1/**
2 * @file
3 * Text Content.
4 */
5
6@import "../base/variables.pcss.css";
7
8.text-content,
9.cke_editable {
10  color: var(--color--gray-10);
11  font-family: var(--font-serif);
12  line-height: var(--sp1-5);
13
14  /*
15    @todo
16
17    text-decoration-thickness is supported by FF & Safari
18    text-underline-offset is supported by Safari
19
20    text-decoration-color supported by Chrome, FF, & Safari
21  */
22
23  & a {
24    color: var(--color--blue-20);
25    text-decoration-color: var(--color--blue-20);
26    text-decoration-thickness: 2px;
27    overflow-wrap: break-word;
28
29    @supports (box-shadow: none) {
30      transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
31      text-decoration: none;
32      box-shadow: inset 0 -2px 0 0 var(--color--blue-50);
33
34      &:hover {
35        text-decoration: underline;
36        color: var(--color--black);
37
38        /* @todo - #d9ecfa isn't currently a variable. */
39        box-shadow: inset 0 -2em 0 0 #d9ecfa;
40        text-decoration-color: #d9ecfa;
41      }
42    }
43  }
44
45  & p {
46    margin-block-start: var(--sp);
47    margin-block-end: var(--sp);
48
49    &:first-child {
50      margin-block-start: 0;
51    }
52
53    &:last-child {
54      margin-block-end: 0;
55    }
56
57    @media (--md) {
58      margin-block-start: var(--sp2);
59      margin-block-end: var(--sp2);
60    }
61  }
62
63  & code {
64    background-color: var(--color--gray-95);
65  }
66
67  & pre code {
68    display: block;
69    overflow: auto;
70    padding-block: var(--sp);
71    padding-inline-start: var(--sp);
72    padding-inline-end: var(--sp);
73    color: var(--color--gray-20);
74  }
75
76  & blockquote {
77    position: relative;
78    margin-block: var(--sp2);
79    margin-inline-start: 0;
80    margin-inline-end: 0;
81    padding-inline-start: var(--sp2);
82    letter-spacing: -0.01em;
83    font-family: var(--font-serif);
84    font-size: 21px;
85    line-height: var(--sp2);
86
87    &:before {
88      position: absolute;
89      inset-block-start: 0;
90      inset-inline-start: 0;
91      content: "“";
92      color: var(--color--blue-70);
93      font-size: 54px;
94    }
95
96    &:after {
97      position: absolute;
98      inset-block-end: 0;
99      inset-inline-start: 0;
100      width: var(--sp0-5);
101      height: calc(100% - 30px);
102      margin-inline-start: 4px;
103      content: "";
104      background: var(--color--gray-95);
105    }
106
107    @media (--grid-md) {
108      font-size: 32px;
109      line-height: var(--sp3);
110    }
111
112    @media (--lg) {
113      font-size: 40px;
114      line-height: calc(3.5 * var(--sp));
115    }
116  }
117
118  @media (--grid-md) {
119    font-size: 18px;
120    line-height: var(--sp2);
121  }
122}
123
124/**
125 * Special colors for footer that has a dark background.
126 */
127.site-footer .text-content {
128  color: inherit;
129
130  & * {
131    color: inherit;
132  }
133
134  & a {
135    text-decoration: underline;
136    color: var(--color--white);
137    box-shadow: none;
138
139    &:hover {
140      text-decoration: none;
141      color: var(--color--white);
142      box-shadow: none;
143    }
144  }
145}
146
147/**
148 * Decrease font-size for blockquote placed in sidebar region.
149 */
150.region--sidebar .text-content blockquote {
151  @media (--lg) {
152    font-size: 24px;
153    line-height: var(--sp2);
154  }
155}
156