/*
* faqs.css
* FAQ page (faqs.html): the three sections (the basics and the old editor
* in the site's black design, the new editor in the editor's light
* design), the "Which editor?" jump links and the search boxes.
* Load after standard-page.css and faqs-wcag.css:
*
*
* Same browser target as the WCAG drop-ins: no custom properties, no grid,
* no :focus-visible. Contrast ratios are noted where colours are chosen;
* all text is at least 4.5:1 and borders of controls at least 3:1.
*/
.tsf-hidden {
display: none !important;
}
/* ---------------------------------------------------------------------
* Sections
* ------------------------------------------------------------------- */
.tsf-part {
padding: 0 0 40px 0;
}
/* The page's own h2 rule is for the grey subtitle; section titles are
bigger and white (#ddd on #1a1a1a, 12.8:1). */
.tlsp-body-content .tsf-part-title {
margin: 0 0 12px 0;
font-size: 40px;
line-height: 46px;
font-weight: bold;
text-transform: uppercase;
color: #ddd;
}
.tsf-part-common .tsf-part-title {
margin-bottom: 30px;
}
.tsf-part-intro {
max-width: 700px;
margin: 0 0 24px 0;
font-size: 18px;
line-height: 26px;
color: #b3b3b3; /* 8.3:1 on #1a1a1a */
}
.tsf-part-intro a {
color: #fff;
font-weight: bold;
text-decoration: underline;
}
/* Bulleted lists in answers (the numbered ones keep the page's style). */
.tlsp-faq-block ul.tsf-list {
margin: 10px 0 15px 22px;
list-style: disc outside;
color: #8e8e8e;
}
.tlsp-faq-block ul.tsf-list li {
list-style: disc outside;
}
.tlsp-faq-block ul.tsf-list li p {
padding: 0;
margin: 6px 0;
}
/* Names of buttons and fields in answers: bold (the reset makes
plain). */
.tlsp-faq-block p b {
font-weight: bold;
color: #b3b3b3;
}
/* The old editor follows the new one: a rule between them. */
.tsf-band-old {
border-top: 1px solid #444;
}
/* ---------------------------------------------------------------------
* "Which editor are you using?"
* ------------------------------------------------------------------- */
.tsf-jump {
margin: -30px 0 50px 0;
}
.tsf-jump-q {
margin: 0 0 12px 0;
font-size: 20px;
font-weight: bold;
color: #ddd;
}
.tsf-jump ul {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -8px;
}
.tsf-jump li {
-ms-flex: 1 1 260px;
flex: 1 1 260px;
margin: 0 8px 16px 8px;
}
.tsf-jump a {
display: block;
padding: 18px 20px;
border-radius: 8px;
text-decoration: none;
font-size: 18px;
line-height: 24px;
}
.tsf-jump a b {
display: block;
font-size: 22px;
line-height: 28px;
text-decoration: underline;
}
.tsf-jump a span {
display: block;
margin-top: 4px;
}
/* New: the editor's own light look (#1C1F24 / #3B4048 on #fff). */
.tsf-jump a.tsf-jump-new {
background: #fff;
color: #3B4048;
border: 2px solid #fff;
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.tsf-jump a.tsf-jump-new b {
color: #1D5BBF; /* 6.4:1 on white */
}
/* Old: black on the dark page, with a border so it reads as a card
(#767676 on #1a1a1a is 3.8:1). */
.tsf-jump a.tsf-jump-old {
background: #000;
color: #b3b3b3;
border: 2px solid #767676;
}
.tsf-jump a.tsf-jump-old b {
color: #fff;
}
.tsf-jump a:hover b {
text-decoration: none;
}
.tsf-jump-note {
margin: 0;
font-size: 16px;
line-height: 22px;
color: #8e8e8e; /* 5.3:1 */
}
/* ---------------------------------------------------------------------
* Search
* ------------------------------------------------------------------- */
.tsf-search {
margin: 0 0 30px 0;
max-width: 600px;
}
.tsf-search-label {
display: block;
margin: 0 0 8px 0;
font-size: 18px;
font-weight: bold;
color: #ddd;
}
.tsf-search-row {
display: -ms-flexbox;
display: flex;
}
.tsf-search-input {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
height: 48px;
margin: 0;
padding: 0 14px;
border: 2px solid #8e8e8e; /* 5.3:1 against the page */
border-radius: 6px;
background: #fff;
color: #1a1a1a;
font-family: inherit;
font-size: 18px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
}
.tsf-search-clear {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
min-width: 80px;
height: 48px;
margin: 0 0 0 8px;
padding: 0 16px;
border: 2px solid #8e8e8e;
border-radius: 6px;
background: #000;
color: #fff;
font-family: inherit;
font-size: 17px;
font-weight: bold;
cursor: pointer;
}
.tsf-search-clear:hover {
background: #333;
}
.tsf-search-hint,
.tsf-search-status {
margin: 8px 0 0 0;
font-size: 16px;
line-height: 22px;
color: #b3b3b3;
}
.tsf-search-status {
font-weight: bold;
color: #ddd;
}
.tsf-search-status:empty {
display: none;
}
/* ---------------------------------------------------------------------
* The new editor: light, like the editor itself
* ------------------------------------------------------------------- */
.tsf-band-new {
background: #F2F4F7;
padding-bottom: 20px;
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.tsf-band-new .tlsp-body-content .tsf-part-title {
color: #1C1F24; /* 15:1 on #F2F4F7 */
}
.tsf-band-new .tsf-part-intro {
color: #3B4048; /* 9.5:1 */
}
.tsf-band-new .tsf-part-intro a {
color: #1D5BBF; /* 5.7:1 */
}
.tsf-band-new .tlsp-faq-group h3 {
color: #1C1F24;
background: none;
border-bottom: 2px solid #C9CED6;
padding-bottom: 7px;
}
.tsf-band-new .tlsp-faq-block h4 a {
color: #3B4048;
}
.tsf-band-new .tlsp-faq-block h4 a:hover,
.tsf-band-new .tlsp-faq-block-open h4 a {
color: #1D5BBF;
}
.tsf-band-new .tlsp-faq-block-open {
background: #fff;
border: 1px solid #E1E4E8;
box-shadow: 0 1px 3px rgba(28, 31, 36, 0.08);
}
.tsf-band-new .tlsp-faq-block p,
.tsf-band-new .tlsp-faq-block ul.tsf-list {
color: #3B4048; /* 10.4:1 on white, 9.5:1 on #F2F4F7 */
}
.tsf-band-new .tlsp-faq-block p b {
color: #1C1F24;
font-weight: 600;
}
.tsf-band-new .tlsp-faq-block p a {
color: #1D5BBF;
}
.tsf-band-new .tlsp-faq-block p a:hover {
color: #15171A;
}
/* Step numbers: the page draws them on a dark picture; here a blue disc
with white digits (6.4:1). */
.tsf-band-new .tlsp-faq-block li p span {
background: #1D5BBF none;
color: #fff;
border-radius: 50%;
font-size: 13px;
font-weight: bold;
line-height: 21px;
top: 2px;
}
.tsf-band-new .tsf-search-label {
color: #1C1F24;
}
.tsf-band-new .tsf-search-input {
border-color: #767B85; /* 4.3:1 on white, 3.9:1 on the band */
color: #1C1F24;
}
.tsf-band-new .tsf-search-clear {
background: #fff;
color: #1D5BBF;
border-color: #767B85;
}
.tsf-band-new .tsf-search-clear:hover {
background: #EEF3FC;
}
.tsf-band-new .tsf-search-hint {
color: #555B65; /* 6.2:1 */
}
.tsf-band-new .tsf-search-status {
color: #1C1F24;
}
/* Focus in the light section: the editor's blue ring with a white edge,
which shows on the grey band and the white answers alike. */
.tsw-keyboard .tsf-band-new a:focus,
.tsw-keyboard .tsf-band-new button:focus,
.tsw-keyboard .tsf-band-new input:focus,
.tsw-keyboard .tsf-band-new [role="button"]:focus {
outline: 3px solid #1D5BBF !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px #fff !important;
}
/* The search box always shows where focus is, mouse or keyboard. */
.tsf-search-input:focus {
outline: 3px solid #ffbf47;
outline-offset: 2px;
border-color: #fff;
}
.tsf-band-new .tsf-search-input:focus {
outline-color: #1D5BBF;
border-color: #1C1F24;
}
/* Headings focus is moved to stay ring-less (faqs-wcag does the same). */
.tsw-keyboard .tsf-part-title.tsw-script-focus:focus,
.tsf-part-title:focus {
outline: none !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------------------
* Small screens and zoom (1.4.10)
* ------------------------------------------------------------------- */
@media (max-width: 640px) {
.tlsp-body-content .tsf-part-title {
font-size: 28px;
line-height: 34px;
}
.tsf-jump {
margin-top: -20px;
}
.tsf-jump ul {
display: block;
margin: 0;
}
.tsf-jump li {
margin: 0 0 12px 0;
}
.tsf-search-clear {
min-width: 0;
}
}
@media print {
.tsf-band-new {
background: none;
}
.tsf-search,
.tsf-jump {
display: none;
}
}