/* ============================================================================ Dark theme for the Autosoit static mirror. Everything is scoped to html[data-theme="dark"]. With no attribute on the site renders exactly as it always has, so this file is inert by default. The brand yellow (#fcef4c) is kept in BOTH themes on purpose: the navigation bar, the buttons and the accents stay yellow, only the surfaces behind them change. Yellow is an opaque fill, so it reads the same on either ground. The block at the bottom is generated: it lists exactly those cx_custom_* classes whose page level style sets a light background, so the dark theme can repaint them without touching the cx_custom_* classes that set only spacing (painting those would invent boxes that were never there) or the ones that are deliberately yellow or already dark. ============================================================================ */ html[data-theme="dark"]{ --d-bg:#15161a; --d-surface:#1c1e23; --d-surface-2:#22252b; --d-ink:#e9e9e2; --d-ink-2:#bcbdb3; --d-muted:#8d8f84; --d-line:#34373e; --d-line-2:#292c32; /* the page builder's column dividers: on the white page they are #eaeaea, which is 1,09 to 1 and reads as almost nothing. This is the same faintness against the dark ground, 1,13 to 1, so a divider that was barely there stays barely there instead of turning into a bright line across the page. */ --d-hairline:#212429; --d-accent:#fcef4c; color-scheme:dark; } /* ---- page grounds ---- */ html[data-theme="dark"] body, html[data-theme="dark"] .l-canvas, html[data-theme="dark"] .l-main, html[data-theme="dark"] .l-footer{background-color:var(--d-bg)} html[data-theme="dark"] body{color:var(--d-ink)} /* ---- running text ---- */ html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] dd, html[data-theme="dark"] dt, html[data-theme="dark"] td, html[data-theme="dark"] blockquote, html[data-theme="dark"] .pb_text_column, html[data-theme="dark"] .uavc-list-desc, html[data-theme="dark"] .w-btn-wrapper{color:var(--d-ink-2)} html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3, html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6, html[data-theme="dark"] th, html[data-theme="dark"] strong,html[data-theme="dark"] b{color:var(--d-ink)} html[data-theme="dark"] a{color:var(--d-ink)} html[data-theme="dark"] a:hover{color:var(--d-accent)} html[data-theme="dark"] hr{border-color:var(--d-line)} /* the theme paints most headings with an explicit near black, which disappears here */ html[data-theme="dark"] .cx_custom_heading, html[data-theme="dark"] .cx_do_custom_heading{color:var(--d-ink) !important} /* except the ones that sit on a dark or yellow fill already, they were light on purpose */ html[data-theme="dark"] .cx_custom_heading[style*="#fff"], html[data-theme="dark"] .cx_custom_heading[style*="#ffffff"]{color:#fff !important} html[data-theme="dark"] .cx_custom_heading[style*="#fcef4c"]{color:var(--d-accent) !important} /* ---- top bar ---- */ html[data-theme="dark"] .l-header.bg_solid .l-subheader.at_middle, html[data-theme="dark"] .l-subheader.at_middle{background-color:var(--d-surface)} html[data-theme="dark"] .l-header{border-color:var(--d-line)} /* the wordmark is black artwork, swap to the yellow one the footer already uses */ html[data-theme="dark"] .l-subheader.at_middle .ush_image_2 img{content:url(/app/uploads/2018/04/logo-as-yellow.svg)} /* social glyphs are dark artwork, swap to the light variants the footer already uses */ html[data-theme="dark"] .l-header .w-socials-item-link[aria-label=YouTube]{background-image:url(/app/design/img/youtube_light.svg)} html[data-theme="dark"] .l-header .w-socials-item-link[aria-label=Facebook]{background-image:url(/app/design/img/facebook_light.svg)} html[data-theme="dark"] .l-header .w-socials-item-link[aria-label=Instagram]{background-image:url(/app/design/img/instagram.svg)} /* language picker in the top bar (the yellow one belongs to the nav bar below) */ html[data-theme="dark"] .l-subheader.at_middle .w-dropdown-list{background-color:var(--d-surface-2)} html[data-theme="dark"] .l-subheader.at_middle .w-dropdown-item-title{color:var(--d-ink)} /* header search field */ html[data-theme="dark"] .w-search input{background-color:var(--d-surface-2);border-color:var(--d-line) !important;color:var(--d-ink)} /* ---- nav bar: stays brand yellow in both themes, so only its popups need help ---- */ html[data-theme="dark"] .w-nav-list.level_2, html[data-theme="dark"] .w-nav-list.level_3{background-color:var(--d-surface-2)} html[data-theme="dark"] .w-nav-list.level_2 .w-nav-anchor, html[data-theme="dark"] .w-nav-list.level_3 .w-nav-anchor{color:var(--d-ink)} html[data-theme="dark"] .w-nav-list.level_2 .w-nav-anchor:hover{background-color:var(--d-surface);color:var(--d-accent)} /* ---- sections and panels ---- */ html[data-theme="dark"] .l-section{background-color:transparent} html[data-theme="dark"] .l-section-overlay[style*="#f9f9f9"], html[data-theme="dark"] .l-section-overlay[style*="#f7f7f7"], html[data-theme="dark"] .l-section-overlay[style*="#ffffff"], html[data-theme="dark"] .l-section-overlay[style*="#fff"]{background-color:var(--d-surface) !important} /* ---- sidebar ---- */ html[data-theme="dark"] aside.l-sidebar{background-color:transparent} html[data-theme="dark"] .sidebar_left aside:before, html[data-theme="dark"] ul:not(.children)>.pg-item-has-sub>ul:before{background:var(--d-line)} html[data-theme="dark"] .box_pages>ul>.pg-item>a{color:var(--d-ink)} html[data-theme="dark"] .box_pages>ul>.pg-item>a:before{background:var(--d-line)} html[data-theme="dark"] .pg-item-has-sub ul li:before{color:var(--d-muted)} html[data-theme="dark"] li .w-nav-title{color:var(--d-ink-2)} /* ---- forms ---- */ html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=password], html[data-theme="dark"] select, html[data-theme="dark"] textarea{background-color:var(--d-surface-2);border-color:var(--d-line);color:var(--d-ink)} html[data-theme="dark"] ::placeholder{color:var(--d-muted);opacity:1} html[data-theme="dark"] .cf-field{background-color:var(--d-surface-2);border-color:var(--d-line);color:var(--d-ink)} html[data-theme="dark"] .cf-box{color:var(--d-ink-2)} /* ---- schedule page ---- */ html[data-theme="dark"] .search-course-form form{background-color:var(--d-surface)} html[data-theme="dark"] .search-course-item>div{border-bottom-color:var(--d-line-2)} html[data-theme="dark"] .search-course-item:hover{background-color:var(--d-surface)} html[data-theme="dark"] .search-course-item__title, html[data-theme="dark"] .search-course-item__date, html[data-theme="dark"] .search-course-item__time{color:var(--d-ink-2)} html[data-theme="dark"] .search-course-item__price{color:var(--d-ink)} html[data-theme="dark"] .search-course-head{color:var(--d-ink)} html[data-theme="dark"] .search-course-result{border-color:var(--d-line)} html[data-theme="dark"] .search-course-item__more-button, html[data-theme="dark"] .search-course-item__buy>a{background-color:var(--d-surface-2);border-color:var(--d-line)} html[data-theme="dark"] .search-course-item__more-button>span{color:var(--d-muted)} html[data-theme="dark"] .search-course-item:hover .search-course-item__more-button>span{color:var(--d-ink)} html[data-theme="dark"] .search-course-item__more-information-inner{background-color:var(--d-surface-2);box-shadow:0 0 25px rgba(0,0,0,.6)} html[data-theme="dark"] .search-course-item__more-content, html[data-theme="dark"] .search-course-item__more-content p{color:var(--d-ink-2)} html[data-theme="dark"] .search-course-item__more-title{color:var(--d-ink)} /* language pills: the selected one is an opaque yellow fill and needs no change */ html[data-theme="dark"] .checkbox-input-wrap .lang-checkbox+span{background-color:transparent;border-color:var(--d-line);color:var(--d-ink-2)} html[data-theme="dark"] .checkbox-input-wrap>label:hover .lang-checkbox:not(:checked)+span{border-color:var(--d-muted);color:var(--d-ink)} /* result count line and the "nothing chosen yet" prompt (inline styles, hence !important) */ html[data-theme="dark"] .results-count{color:var(--d-ink-2)} html[data-theme="dark"] #search-results-empty{background-color:var(--d-surface) !important;border-color:var(--d-line) !important;color:var(--d-ink-2) !important} /* ---- registration page ---- */ html[data-theme="dark"] .ra-tab-body{background-color:var(--d-surface)} html[data-theme="dark"] .pa-tab-head__item-active{background-color:var(--d-surface);border-top-color:var(--d-accent)} html[data-theme="dark"] .ra-tab-chose, html[data-theme="dark"] .pa-tab-cost, html[data-theme="dark"] .pa-tab-transmission, html[data-theme="dark"] .pa-tab-total-cost, html[data-theme="dark"] .pa-tab-client-info{border-bottom-color:var(--d-line)} html[data-theme="dark"] .pa-tab-terms__additionals{border-color:var(--d-line)} html[data-theme="dark"] .pa-tab-data-filed__input input{background-color:var(--d-surface-2);border-color:var(--d-line);color:var(--d-ink)} html[data-theme="dark"] .cb-checkbox.disabled .cb-inner{background-color:var(--d-surface-2)} /* ---- misc chrome ---- */ html[data-theme="dark"] .cookie-popup{background-color:var(--d-surface-2);color:var(--d-ink)} html[data-theme="dark"] .ss-results{background-color:var(--d-surface-2);border-color:var(--d-line)} html[data-theme="dark"] .ss-results a{color:var(--d-ink);border-color:var(--d-line-2)} html[data-theme="dark"] .ss-results a:hover{background-color:var(--d-surface)} html[data-theme="dark"] .ss-none{color:var(--d-muted)} html[data-theme="dark"] img[src*="logo-as-black"]{content:url(/app/uploads/2018/04/logo-as-yellow.svg)} html[data-theme="dark"] .theme-toggle{background:var(--d-surface-2);border-color:var(--d-line);color:var(--d-accent)} html[data-theme="dark"] .theme-toggle:hover{border-color:var(--d-accent)} html[data-theme="dark"] .theme-toggle .icon-sun{display:block} html[data-theme="dark"] .theme-toggle .icon-moon{display:none} /* the small screen sizing of the toggle moved to screen.css: it is layout, not theme, and this file must stay inert when no theme attribute is set */ /* ---- remaining explicit dark inks the audit found ---- */ html[data-theme="dark"] .cd-faq-trigger, html[data-theme="dark"] .cd-faq-trigger *, html[data-theme="dark"] .fq-item a, html[data-theme="dark"] .fq-item span{color:var(--d-ink) !important} html[data-theme="dark"] .pa-tab-cost__title, html[data-theme="dark"] .pa-tab-terms__content, html[data-theme="dark"] .pa-tab-total-cost__title, html[data-theme="dark"] .pa-tab-transmission__input, html[data-theme="dark"] .w-blog-post-content, html[data-theme="dark"] .medium-title span, html[data-theme="dark"] .course-table-description, html[data-theme="dark"] .course-table-description p{color:var(--d-ink-2) !important} /* ---- corrections to the rules above ---- */ /* the dropdown submenus hang off the yellow bar but have a dark panel of their own, so they must NOT inherit the dark-on-yellow text colour set for the bar itself */ html[data-theme="dark"] .l-subheader.at_bottom .w-nav-list.level_2 .w-nav-anchor, html[data-theme="dark"] .l-subheader.at_bottom .w-nav-list.level_2 .w-nav-title, html[data-theme="dark"] .l-subheader.at_bottom .w-nav-list.level_3 .w-nav-anchor, html[data-theme="dark"] .l-subheader.at_bottom .w-nav-list.level_3 .w-nav-title{color:var(--d-ink)} html[data-theme="dark"] .l-subheader.at_bottom .w-nav-list.level_2 .w-nav-anchor:hover .w-nav-title, html[data-theme="dark"] .l-subheader.at_bottom .w-nav-list.level_3 .w-nav-anchor:hover .w-nav-title{color:var(--d-accent)} /* buttons the page fills with brand yellow keep a dark label in both themes */ html[data-theme="dark"] .ubtn[data-bg="#fcef4c"] .ubtn-data, html[data-theme="dark"] .ubtn[style*="fcef4c"] .ubtn-data{color:#1a1a17 !important} /* content text carrying an inline near-black colour from the original page */ html[data-theme="dark"] .l-content :where([style*="color: #000"],[style*="color:#000"],[style*="color: #333"],[style*="color:#333"],[style*="color: #2b2b2b"],[style*="color:#2b2b2b"],[style*="color: #0a0a0a"],[style*="color:#0a0a0a"]){color:var(--d-ink) !important} /* registration wizard step labels */ html[data-theme="dark"] .pa-tab-head__item span{color:var(--d-ink-2)} html[data-theme="dark"] .pa-tab-head__item-active span{color:var(--d-ink)} /* ---- generated: cx_custom_* classes whose page level style sets a light fill ---- */ /* ---- fixes found by the dark mode contrast audit ---- */ /* nav bar keeps its brand yellow, so its text must stay dark, not follow the page ink */ html[data-theme="dark"] .l-subheader.at_bottom .w-nav-anchor, html[data-theme="dark"] .l-subheader.at_bottom .w-nav-title, html[data-theme="dark"] .l-subheader.at_bottom a{color:#1a1a17} html[data-theme="dark"] .l-subheader.at_bottom .w-nav-anchor:hover, html[data-theme="dark"] .l-subheader.at_bottom a:hover{color:#000} /* same for any block that is deliberately filled with the brand yellow */ html[data-theme="dark"] [class*="cx_custom_"][style*="fcef4c"], html[data-theme="dark"] .has-fill [style*="fcef4c"]{color:#1a1a17} /* panels the theme fills from its own stylesheet rather than a cx_custom class */ html[data-theme="dark"] .ax-content-box, html[data-theme="dark"] .w-blog-post-h, html[data-theme="dark"] .contact_pallete_title{background-color:var(--d-surface) !important} /* text the theme paints with an explicit near black, which vanishes on a dark ground */ html[data-theme="dark"] .testi-item__description, html[data-theme="dark"] .testi-item__agent, html[data-theme="dark"] .cd-faq-trigger, html[data-theme="dark"] .cd-faq-content, html[data-theme="dark"] #faq-count, html[data-theme="dark"] .contact_pallete_title, html[data-theme="dark"] .contact_pallete_title *, html[data-theme="dark"] .w-blog-post-title, html[data-theme="dark"] .w-blog-post-title a, html[data-theme="dark"] .entry-title, html[data-theme="dark"] .entry-title a{color:var(--d-ink) !important} html[data-theme="dark"] .w-blog-post-meta-date, html[data-theme="dark"] .w-blog-post-meta, html[data-theme="dark"] .ra-tab-chose__title, html[data-theme="dark"] .ra-tab-chose__description, html[data-theme="dark"] .ra-tab-chose__description div, html[data-theme="dark"] #e-study, html[data-theme="dark"] #normal-study, html[data-theme="dark"] #one_day, html[data-theme="dark"] #two_day{color:var(--d-ink-2) !important} /* outline buttons: the label is drawn near black over a transparent fill */ html[data-theme="dark"] .ubtn-data.ubtn-text{color:var(--d-ink)} html[data-theme="dark"] .ubtn:hover .ubtn-data.ubtn-text{color:#1a1a17} /* contact page: region links and the search field on the FAQ page */ html[data-theme="dark"] .contact_pallete a, html[data-theme="dark"] .contact_pallete span{color:var(--d-ink-2)} html[data-theme="dark"] #faq-search{background-color:var(--d-surface-2) !important;border-color:var(--d-line) !important;color:var(--d-ink) !important} /* gift card and other forms sitting on a converted panel */ html[data-theme="dark"] .cf-form label, html[data-theme="dark"] .cf-list-item-label{color:var(--d-ink-2)} html[data-theme="dark"] .cx_custom_1520366761569, html[data-theme="dark"] .cx_custom_1520366774959, html[data-theme="dark"] .cx_custom_1520367038299, html[data-theme="dark"] .cx_custom_1521063592818, html[data-theme="dark"] .cx_custom_1521063605213, html[data-theme="dark"] .cx_custom_1521064319164, html[data-theme="dark"] .cx_custom_1521064340622, html[data-theme="dark"] .cx_custom_1521385530124, html[data-theme="dark"] .cx_custom_1521385541697, html[data-theme="dark"] .cx_custom_1521497095316, html[data-theme="dark"] .cx_custom_1521657751867, html[data-theme="dark"] .cx_custom_1522261935897, html[data-theme="dark"] .cx_custom_1522261948575, html[data-theme="dark"] .cx_custom_1522261954726, html[data-theme="dark"] .cx_custom_1522262008863, html[data-theme="dark"] .cx_custom_1522262016084, html[data-theme="dark"] .cx_custom_1522262020960, html[data-theme="dark"] .cx_custom_1522703935529, html[data-theme="dark"] .cx_custom_1522703957355, html[data-theme="dark"] .cx_custom_1522737660354, html[data-theme="dark"] .cx_custom_1522737667367, html[data-theme="dark"] .cx_custom_1522738825848, html[data-theme="dark"] .cx_custom_1522738833822, html[data-theme="dark"] .cx_custom_1522748013644, html[data-theme="dark"] .cx_custom_1522784541184, html[data-theme="dark"] .cx_custom_1522784551741, html[data-theme="dark"] .cx_custom_1522867995986, html[data-theme="dark"] .cx_custom_1522868036428, html[data-theme="dark"] .cx_custom_1523312072246, html[data-theme="dark"] .cx_custom_1523312078023, html[data-theme="dark"] .cx_custom_1523312088710, html[data-theme="dark"] .cx_custom_1523312100564, html[data-theme="dark"] .cx_custom_1523312194699, html[data-theme="dark"] .cx_custom_1523312227273, html[data-theme="dark"] .cx_custom_1523312233916, html[data-theme="dark"] .cx_custom_1523312243749, html[data-theme="dark"] .cx_custom_1523353491824, html[data-theme="dark"] .cx_custom_1527541708861, html[data-theme="dark"] .cx_custom_1527541715997, html[data-theme="dark"] .cx_custom_1527541723977, html[data-theme="dark"] .cx_custom_1527541730839, html[data-theme="dark"] .cx_custom_1536336820702, html[data-theme="dark"] .cx_custom_1537011622646, html[data-theme="dark"] .cx_custom_1575965418987, html[data-theme="dark"] .cx_custom_1575965500561, html[data-theme="dark"] .cx_custom_1575965552312, html[data-theme="dark"] .cx_custom_1655886887860, html[data-theme="dark"] .cx_custom_1655886986124, html[data-theme="dark"] .cx_custom_1655887963444, html[data-theme="dark"] .cx_custom_1655888015434, html[data-theme="dark"] .cx_custom_1679671421926, html[data-theme="dark"] .cx_custom_1679673778477, html[data-theme="dark"] .cx_custom_1690464387578, html[data-theme="dark"] .cx_custom_1690465199208, html[data-theme="dark"] .cx_custom_1726493680335, html[data-theme="dark"] .cx_custom_1726493693037, html[data-theme="dark"] .cx_custom_1726493736902, html[data-theme="dark"] .cx_custom_1726667198608, html[data-theme="dark"] .cx_custom_1726667205407, html[data-theme="dark"] .cx_custom_1776765866070, html[data-theme="dark"] .cx_custom_1776765878605{background-color:var(--d-surface) !important} /* ---- last stragglers from the audit ---- */ html[data-theme="dark"] .pa-tab-cost-input span, html[data-theme="dark"] .pa-tab-cost-input, html[data-theme="dark"] .pa-tab-total-cost__price, html[data-theme="dark"] .pa-tab-terms__additionals{color:var(--d-ink-2)} html[data-theme="dark"] .pa-tab-cost-input b{color:var(--d-ink)} /* sidebar "all courses" menu: the theme colours the current item with an explicit #333 through a deep selector, so this one needs to be at least as specific */ html[data-theme="dark"] .l-main .box_nav_menu .nav-item > a, html[data-theme="dark"] .l-main .box_nav_menu .nav-item.current-nav-item > a, html[data-theme="dark"] .l-main .box_nav_menu a{color:var(--d-ink)} html[data-theme="dark"] .l-main .box_nav_menu a:hover{color:var(--d-accent)} html[data-theme="dark"] .box,html[data-theme="dark"] .box_nav_menu{color:var(--d-ink-2)} /* ---- artwork ---- Every icon below is monochrome line art drawn in #000 or #333, so in dark mode it disappears. The category pictograms are inverted (exact, because they carry no hue); the two interface icons are swapped for light redraws of the same paths, because they sit on backgrounds that must not be inverted with them. Photographs and the two logos are deliberately left alone. */ html[data-theme="dark"] img[src*="/2017/11/a.svg"], html[data-theme="dark"] img[src*="/2017/11/b.svg"], html[data-theme="dark"] img[src*="/2017/11/be.svg"], html[data-theme="dark"] img[src*="/2017/11/bl.svg"], html[data-theme="dark"] img[src*="/2017/11/c.svg"], html[data-theme="dark"] img[src*="/2017/11/ce.svg"], html[data-theme="dark"] img[src*="/2017/11/book.svg"], html[data-theme="dark"] img[src*="/2024/03/d-1.svg"]{filter:invert(1) brightness(.92)} /* language picker chevron */ html[data-theme="dark"] .w-dropdown-current .w-dropdown-item:after{ background-image:url("data:image/svg+xml;utf8,")} /* header search magnifier */ html[data-theme="dark"] .w-search input, html[data-theme="dark"] .box_search .w-form input[type=text]{ background-image:url("data:image/svg+xml;utf8,")} /* bullet arrows in list widgets */ html[data-theme="dark"] .IconSet-arrow-right:before{filter:invert(1) brightness(.92)} /* carousel arrows: the glyph is drawn through ::before in a near black */ html[data-theme="dark"] .slick-prev:before, html[data-theme="dark"] .slick-next:before, html[data-theme="dark"] .slick-arrow:before{color:var(--d-ink-2)} html[data-theme="dark"] .slick-dots li button:before{color:var(--d-ink-2)} /* phone glyph on the contact page is black line art; the quote mark next to it is already brand yellow and the header/footer hazard stripe is two tone on purpose, so both stay */ html[data-theme="dark"] .heading-faq-tel:before{filter:invert(1) brightness(.92)} /* the "+" marker on collapsible sidebar entries is drawn in #333 */ html[data-theme="dark"] .nav-item-has-sub ul li:before, html[data-theme="dark"] .pg-item-has-sub ul li:before{color:var(--d-muted)} /* Heading chips: the theme draws some of these as a #333 block. On a dark page a plain grey box adds nothing, so the fill is dropped, EXCEPT for the ones whose own inline colour is the brand yellow. Those are the category chips on the home page, black block with yellow letters, and they are part of the design in both themes, so they keep the chip. Their label is a link, which the general link colour would otherwise turn to page ink. */ html[data-theme="dark"] .cx_custom_heading:not([style*="fcef4c"]){background-color:transparent !important} html[data-theme="dark"] .cx_custom_heading[style*="fcef4c"] a, html[data-theme="dark"] .cx_custom_heading[style*="fcef4c"] a:hover{color:var(--d-accent) !important} /* ---- lines and rules ---- Divider lines are drawn in near white (#eaeaea and friends), which is invisible on a white page and glaring on a dark one. Brand yellow rules (#fcef4c, #ffdd00) are accents and are deliberately left as they are. */ html[data-theme="dark"] .w-separator, html[data-theme="dark"] hr{border-color:var(--d-line) !important;background-color:transparent} html[data-theme="dark"] .ax-content-box, html[data-theme="dark"] .fq-item, html[data-theme="dark"] .fq-item.question, html[data-theme="dark"] .search-course-item-inner{border-color:var(--d-line) !important} html[data-theme="dark"] .l-canvas input:not([type=submit]), html[data-theme="dark"] .l-canvas select, html[data-theme="dark"] .l-canvas textarea, html[data-theme="dark"] .l-canvas button:not(.ubtn):not(.theme-toggle):not(.consent__btn){border-color:var(--d-line)} html[data-theme="dark"] .l-main .box_pages>ul>.pg-item>a:before, html[data-theme="dark"] .l-main ul:not(.children)>.pg-item-has-sub>ul:before{background:var(--d-line)} /* ---- the column dividers ---- The page builder borders individual columns to draw the grid. Those hairlines were repainted in --d-line, which is the right weight for a rule someone drew on purpose but too strong for a divider that the light page barely shows. They now use --d-hairline, so the grid on the home page reads as quietly on the dark ground as it does on the white one. */ html[data-theme="dark"] .cx_custom_1521394703927.cx_custom_1521394703927, html[data-theme="dark"] .cx_custom_1521498746801.cx_custom_1521498746801, html[data-theme="dark"] .cx_custom_1522868108460.cx_custom_1522868108460, html[data-theme="dark"] .cx_custom_1537011622646.cx_custom_1537011622646, html[data-theme="dark"] .cx_custom_1537011629834.cx_custom_1537011629834, html[data-theme="dark"] .cx_custom_1710860864545.cx_custom_1710860864545, html[data-theme="dark"] .cx_custom_1710860868126.cx_custom_1710860868126, html[data-theme="dark"] .cx_custom_1710860877095.cx_custom_1710860877095, html[data-theme="dark"] .cx_custom_1710860882717.cx_custom_1710860882717, html[data-theme="dark"] .cx_custom_1710860885829.cx_custom_1710860885829, html[data-theme="dark"] .cx_custom_1711374431223.cx_custom_1711374431223, html[data-theme="dark"] .cx_custom_1711374464037.cx_custom_1711374464037, html[data-theme="dark"] .cx_custom_1711374466657.cx_custom_1711374466657, html[data-theme="dark"] .cx_custom_1711374470757.cx_custom_1711374470757, html[data-theme="dark"] .cx_custom_1711374488883.cx_custom_1711374488883, html[data-theme="dark"] .cx_custom_1711374694539.cx_custom_1711374694539, html[data-theme="dark"] .cx_custom_1711374698856.cx_custom_1711374698856, html[data-theme="dark"] .cx_custom_1711374712210.cx_custom_1711374712210, html[data-theme="dark"] .cx_custom_1711374818501.cx_custom_1711374818501, html[data-theme="dark"] .cx_custom_1711374832174.cx_custom_1711374832174, html[data-theme="dark"] .cx_custom_1776765866070.cx_custom_1776765866070, html[data-theme="dark"] .cx_custom_1776765878605.cx_custom_1776765878605{border-color:var(--d-hairline) !important} /* The search submit button carries a white FontAwesome magnifier that is invisible against the white page, so the light theme effectively shows only the input's own icon. On a dark ground it suddenly appears and doubles up, so it is hidden here to keep both themes looking alike. */ html[data-theme="dark"] .w-search-form-btn:before{color:transparent} /* the count chip is a yellow fill in both themes, so its digits stay dark; without this the blanket b/strong rule above repaints them in the page ink and they wash out on the yellow */ html[data-theme="dark"] .results-count b{color:#23200a} /* two light outlines the generic input/button rule cannot reach: the schedule form's own rule names .course-form directly, and the FAQ category chips are addressed by id */ html[data-theme="dark"] .course-form input, html[data-theme="dark"] .course-form select{border-color:var(--d-line)} html[data-theme="dark"] #faq-chips button{border-color:var(--d-line)} /* form controls: the checked state is an opaque yellow fill and reads the same on either ground, so only the unchecked box needs a dark treatment */ html[data-theme="dark"] .cf-form input[type=radio], html[data-theme="dark"] .cf-form input[type=checkbox]{background:transparent;border-color:var(--d-line)} /* must repeat the checked fill here: the unchecked rule above lives in this file and would otherwise paint over the yellow that screen.css sets for the checked state */ html[data-theme="dark"] .cf-form input[type=radio]:checked, html[data-theme="dark"] .cf-form input[type=checkbox]:checked{background:#fcef4c;border-color:#e0d12b} html[data-theme="dark"] .cf-form input[type=radio]:hover, html[data-theme="dark"] .cf-form input[type=checkbox]:hover{border-color:var(--d-muted)} html[data-theme="dark"] .cf-form input[type=submit]{background:#fcef4c;color:#23200a} html[data-theme="dark"] .cf-form input[type=submit]:hover{background:#ffe600} /* the checkBo skinned controls used elsewhere carry a blue check that is off brand */ html[data-theme="dark"] .cb-checkbox .cb-inner, html[data-theme="dark"] .cb-radio .cb-inner{background:transparent;border-color:var(--d-line)} html[data-theme="dark"] .cb-checkbox.checked .cb-inner, html[data-theme="dark"] .cb-radio.checked .cb-inner{background-color:#fcef4c;border-color:#e0d12b} html[data-theme="dark"] .cb-checkbox i:before, html[data-theme="dark"] .cb-checkbox i:after{background-color:#23200a} html[data-theme="dark"] .cb-radio.checked i{background-color:#23200a} /* validation note and the inactive submit */ html[data-theme="dark"] .cf-form .cf-errors.is-error{background:#2e1f1c;border-color:#5c332b;color:#e6a094} html[data-theme="dark"] .cf-form .cf-errors.is-hint{background:#23262c;border-color:#33363d;color:#a0a297} html[data-theme="dark"] .cf-form input.error, html[data-theme="dark"] .cf-form textarea.error, html[data-theme="dark"] .cf-form select.error{box-shadow:inset 0 0 0 2px #c0603f} html[data-theme="dark"] .cf-form input[type=checkbox].error, html[data-theme="dark"] .cf-form input[type=radio].error{box-shadow:none;border-color:#c0603f} html[data-theme="dark"] .cf-form label.error, html[data-theme="dark"] .cf-form label.error .cf-list-item-label{color:#e6a094} html[data-theme="dark"] .cf-form input[type=submit]:disabled, html[data-theme="dark"] .cf-form input[type=submit]:disabled:hover{background:#2b2e35;color:#7e8076} html[data-theme="dark"] .cf-form .cf-list-item{border-color:var(--d-line)} html[data-theme="dark"] .cf-form .cf-radio .cf-list-item:hover{border-color:var(--d-muted)} html[data-theme="dark"] .cf-form .cf-radio .cf-list-item:has(input:checked){border-color:#e0d12b;background:rgba(252,239,76,.10)} html[data-theme="dark"] .cf-form .cf-box-acceptance .cf-list-item{border:0;background:none} html[data-theme="dark"] .cf-form .req{color:#e0715a} html[data-theme="dark"] .cf-form .cf-errors.is-sent{background:#1c2a20;border-color:#33513c;color:#8fc79f} html[data-theme="dark"] .cf-form .cf-field-error{color:#e6a094} /* ============================================================================ Second contrast sweep. The first sweep walked eleven page types; this one walked all 256 and turned up the surfaces below, which only appear on pages the sample had missed. ============================================================================ */ /* Instructor lists on the contact pages: each city is a light grey pill with dark text. Lightening the ink alone left near white letters on a near white pill. */ html[data-theme="dark"] .driver-city .grey{background:var(--d-surface)} html[data-theme="dark"] .driver-city .grey:hover{background:var(--d-surface-2)} html[data-theme="dark"] .contact-driver-item{border-top-color:var(--d-line)} /* Blog thumbnails: the theme paints a light grey placeholder behind the picture, which shows as a bright band above every post while the image loads. */ html[data-theme="dark"] .l-section.for_blogpost .w-blog-post-preview, html[data-theme="dark"] .w-blog-post-preview{background-color:var(--d-surface)} /* Notice boxes are pastel fills carrying their own dark ink, so both halves move together: a deep tint of the same hue, and the label back above it. */ html[data-theme="dark"] .w-message.color_blue{background-color:#16242f} html[data-theme="dark"] .w-message.color_blue, html[data-theme="dark"] .w-message.color_blue p, html[data-theme="dark"] .w-message.color_blue li, html[data-theme="dark"] .w-message.color_blue a{color:#9cc4e4} html[data-theme="dark"] .w-message.color_green{background-color:#1b2a1b} html[data-theme="dark"] .w-message.color_green, html[data-theme="dark"] .w-message.color_green p, html[data-theme="dark"] .w-message.color_green a{color:#a7cf92} html[data-theme="dark"] .w-message.color_red{background-color:#2d1a1a} html[data-theme="dark"] .w-message.color_red, html[data-theme="dark"] .w-message.color_red p, html[data-theme="dark"] .w-message.color_red a{color:#e0a09a} html[data-theme="dark"] .w-message.color_yellow{background-color:#2b2617} html[data-theme="dark"] .w-message.color_yellow, html[data-theme="dark"] .w-message.color_yellow p, html[data-theme="dark"] .w-message.color_yellow a{color:#d9c78a} /* Feedback carousel: the card divider is drawn in the same near white as the rest. */ html[data-theme="dark"] .testi-item{border-bottom-color:var(--d-line)} html[data-theme="dark"] .testi-item__description:after{background:var(--d-line)} /* Registration wizard badges: the step still to come is a light grey disc. The tick on the finished step is a white check inside a green circle and already reads on either ground. */ html[data-theme="dark"] .pa-tab-head__item-next i{background:var(--d-surface-2);color:var(--d-muted)} /* Contact line icons. phone-icon.svg, email-icon.svg and map-icon.svg are black artwork drawn at 20% opacity, so inverting them only yields a faint grey. They are swapped for the same outlines in the page ink instead, which reads as white next to the link it labels. save-icon.svg and info-1.svg are already a light grey and are left alone. */ html[data-theme="dark"] .contact-driver-item__phone a:before, html[data-theme="dark"] .cd-faq-content__telephone-item:before, html[data-theme="dark"] .heading-faq-tel:before{background-image:url("data:image/svg+xml;utf8,");filter:none} html[data-theme="dark"] .contact-driver-item__email a:before, html[data-theme="dark"] .cd-faq-content__email a:before{background-image:url("data:image/svg+xml;utf8,");filter:none} html[data-theme="dark"] .cd-faq-content__location:before{background-image:url("data:image/svg+xml;utf8,");filter:none} /* checkBo draws the box itself with an !important near white border, so the dark value has to carry the same weight to land. */ html[data-theme="dark"] .cb-checkbox .cb-inner, html[data-theme="dark"] .cb-checkbox:hover .cb-inner, html[data-theme="dark"] .cb-radio .cb-inner, html[data-theme="dark"] .cb-radio:hover .cb-inner{border-color:var(--d-line) !important} html[data-theme="dark"] .cb-checkbox.checked .cb-inner{border-color:var(--d-accent) !important} /* FAQ search and category chips (added to the three KKK pages by this mirror). */ html[data-theme="dark"] #faq-search{background-color:var(--d-surface);border-color:var(--d-line);color:var(--d-ink)} html[data-theme="dark"] #faq-search::placeholder{color:var(--d-muted)} html[data-theme="dark"] #faq-chips button{background:var(--d-surface);border-color:var(--d-line);color:var(--d-ink-2)} html[data-theme="dark"] #faq-chips button:hover{border-color:var(--d-accent);color:var(--d-ink)} html[data-theme="dark"] #faq-chips button.on{background:#fd0;border-color:#fd0;color:#111} html[data-theme="dark"] #faq-count{color:var(--d-ink)} html[data-theme="dark"] #faq-nores{border-color:var(--d-line);color:var(--d-ink-2)} /* ---- button system, dark half ---- screen.css now defines two roles, primary (yellow fill, black label) and secondary (black outline, black label). Yellow is opaque and reads on either ground, so primary needs nothing here. Secondary is the one that has to turn over: what is black on the white page becomes yellow here, outline and label together. The selectors carry .l-body so they outweigh the important declarations in screen.css. */ html[data-theme="dark"] .l-body .ubtn:not([style*="fcef4c"]):not([data-bg="#fcef4c"]), html[data-theme="dark"] .search-course-item__more-button{ border-color:var(--d-accent) !important; color:var(--d-accent) !important; } html[data-theme="dark"] .l-body .ubtn:not([style*="fcef4c"]):not([data-bg="#fcef4c"]) :where(span,i,.ubtn-data,.ubtn-text), html[data-theme="dark"] .search-course-item__more-button>span{color:var(--d-accent) !important} /* the hover fill is a separate overlay the theme paints near black, which erases the button on a near black page, so it takes the yellow and the label goes dark */ html[data-theme="dark"] .l-body .ubtn:not([style*="fcef4c"]):not([data-bg="#fcef4c"]) .ubtn-hover{background-color:var(--d-accent) !important} html[data-theme="dark"] .l-body .ubtn:not([style*="fcef4c"]):not([data-bg="#fcef4c"]):hover :where(span,i,.ubtn-data,.ubtn-text){color:#1a1a17 !important} html[data-theme="dark"] .search-course-item__more-button:hover{background-color:var(--d-accent) !important;border-color:var(--d-accent) !important} html[data-theme="dark"] .search-course-item__more-button:hover>span{color:#1a1a17 !important} /* an outline button standing on one of the yellow blocks keeps its dark outline: the yellow treatment used everywhere else would disappear on that ground */ html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578 .ubtn.ubtn.ubtn.ubtn, html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164 .ubtn.ubtn.ubtn.ubtn{ border-color:#1a1a17 !important;color:#1a1a17 !important; } html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578 .ubtn.ubtn.ubtn.ubtn :where(span,i,.ubtn-data,.ubtn-text), html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164 .ubtn.ubtn.ubtn.ubtn :where(span,i,.ubtn-data,.ubtn-text){color:#1a1a17 !important} html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578 .ubtn.ubtn.ubtn.ubtn .ubtn-hover, html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164 .ubtn.ubtn.ubtn.ubtn .ubtn-hover{background-color:#1a1a17 !important} /* schedule Vali button and the search submit stay primary, they only need the ad hoc dark overrides from the first sweep taken back off */ html[data-theme="dark"] .search-course-item__buy>a{background-color:var(--d-accent) !important;border-color:var(--d-accent) !important;color:#1a1a17 !important} /* ==== kept last on purpose: anything filled with brand yellow needs dark text, and these must outrank the broader ink rules above ==== */ /* ---- blocks deliberately filled with brand yellow: their text must stay dark ---- */ html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578, html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578 *, html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164, html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164 *{color:#1a1a17 !important} /* and an outline button standing on one of those yellow blocks keeps its dark outline: the yellow treatment the rest of the page gets would vanish on this ground. The class name is repeated to outweigh the general outline rule further up. */ html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578 .ubtn.ubtn.ubtn, html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164 .ubtn.ubtn.ubtn{border-color:#1a1a17 !important;color:#1a1a17 !important} html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578 .ubtn.ubtn.ubtn :where(span,i,.ubtn-data,.ubtn-text), html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164 .ubtn.ubtn.ubtn :where(span,i,.ubtn-data,.ubtn-text){color:#1a1a17 !important} html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578 .ubtn.ubtn.ubtn .ubtn-hover, html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164 .ubtn.ubtn.ubtn .ubtn-hover{background-color:#1a1a17 !important} html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578 .ubtn.ubtn.ubtn:hover, html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164 .ubtn.ubtn.ubtn:hover{background-color:#1a1a17 !important} html[data-theme="dark"] .cx_custom_1522932901578.cx_custom_1522932901578 .ubtn.ubtn.ubtn:hover .ubtn-text, html[data-theme="dark"] .cx_custom_1523352739164.cx_custom_1523352739164 .ubtn.ubtn.ubtn:hover .ubtn-text{color:var(--d-accent) !important} /* Same idea for the yellow buttons: everything inside them, the arrow glyph included, keeps the dark label. The glyph carries its own inline color:#000000, which the broad "near black inline ink" rule further up would otherwise lift to the page ink. */ html[data-theme="dark"] .ubtn[style*="fcef4c"] :where(i,span,.ubtn-data,.ubtn-text), html[data-theme="dark"] .ubtn[data-bg="#fcef4c"] :where(i,span,.ubtn-data,.ubtn-text){color:#1a1a17 !important} /* ---- registration form messages and the payment step ---- */ html[data-theme="dark"] .ra-field-error{color:#e6a094} html[data-theme="dark"] .pa-tab-data-fileds input.error{border-color:#c0392b !important;box-shadow:inset 0 0 0 2px #c0392b} html[data-theme="dark"] .pa-tab-terms__content.error, html[data-theme="dark"] .error-message{color:#e6a094 !important} /* the submit is black with yellow letters, which vanishes on a near black page: the pair is turned over here the same way the outline buttons are */ html[data-theme="dark"] .pa-tab-data-filed__input input[type=submit]{background:var(--d-accent);color:#1a1a17} html[data-theme="dark"] .pa-tab-data-filed__input input[type=submit]:hover{background:#fff6a0;color:#1a1a17} html[data-theme="dark"] .ra-tab-payment .pay-rest, html[data-theme="dark"] .ra-tab-payment .pa-tab-client-info .pay-row{color:var(--d-ink-2)} html[data-theme="dark"] .ra-tab-payment .pa-tab-client-info .pay-row b{color:var(--d-ink)} html[data-theme="dark"] .pa-tab-payment__title, html[data-theme="dark"] .pa-tab-total-cost__price, html[data-theme="dark"] .pa-tab-total-cost__price b{color:var(--d-ink)} html[data-theme="dark"] .pa-tab-total-cost__discount-input input{background:var(--d-surface-2);border-color:var(--d-line);color:var(--d-ink)} html[data-theme="dark"] .pa-tab-total-cost__discount-input input::placeholder{color:var(--d-muted)} html[data-theme="dark"] .pa-tab-total-cost__discount-submit input{background:var(--d-accent);color:#1a1a17} html[data-theme="dark"] .ra-tab-payment .pay-note{color:var(--d-ink-2);border-left-color:var(--d-line)} html[data-theme="dark"] .ra-tab-payment .pay-note.is-flash{border-left-color:#f95353;color:var(--d-ink)} html[data-theme="dark"] .pa-tab-payment__type a.maksmisele.is-off{background:var(--d-surface-2);color:var(--d-muted)} html[data-theme="dark"] .pa-tab-payment__type a.maksmisele.is-off:hover{background:var(--d-surface-2);color:var(--d-muted)} html[data-theme="dark"] .pa-tab-payment__type .pay-back{color:var(--d-ink-2)} html[data-theme="dark"] .pa-tab-payment__type .pay-back:hover{color:var(--d-accent)} /* ---- schedule: past courses and the empty answer ---- */ html[data-theme="dark"] #search-results-none, html[data-theme="dark"] #search-results-empty{background:var(--d-surface) !important;border-color:var(--d-line) !important;color:var(--d-ink-2) !important} /* the plus and minus marker on the collapsible city rows is drawn as two #333 bars, which is almost invisible on a dark page */ html[data-theme="dark"] .cd-faq-trigger:before, html[data-theme="dark"] .cd-faq-trigger:after{background:var(--d-ink-2)} /* the contact card button sits inside .fq-item, whose dark ink rule would otherwise paint the label light and leave yellow letters on a yellow fill */ html[data-theme="dark"] .fq-item .cd-faq-content__button a, html[data-theme="dark"] .cd-faq-content__button a{color:#1a1a17 !important} /* ---- payment step ---- The Valik block on the payment step is a copy of the one from the form, renamed so the tidy-up script cannot write over it. The rename also took it out of reach of the dark rule that lit the original, leaving it at the theme's #666 on a dark ground. It is the line that says which course is being paid for, so it reads in full white here. */ html[data-theme="dark"] #pay-choice .ra-tab-chose__title, html[data-theme="dark"] .ra-tab-payment .pay-choice-desc, html[data-theme="dark"] .ra-tab-payment .pay-choice-desc div, html[data-theme="dark"] .ra-tab-payment .pay-choice-desc span, html[data-theme="dark"] .ra-tab-payment .pay-choice-desc b{color:var(--d-ink) !important} html[data-theme="dark"] .ra-tab-payment .pay-discount-label{color:var(--d-ink)} html[data-theme="dark"] .ra-tab-payment .pay-discount-hint{color:var(--d-ink-2)} html[data-theme="dark"] .ra-tab-payment .pa-tab-total-cost__discount-input input{ background:var(--d-surface-2);border-color:var(--d-line);border-right:0;color:var(--d-ink)} html[data-theme="dark"] .ra-tab-payment .pa-tab-total-cost__discount-input input:focus{border-color:var(--d-muted)} /* the code button is brand yellow with a dark label in both themes, the same as every other button that does something */ html[data-theme="dark"] .ra-tab-payment .pa-tab-total-cost__discount-submit input{ background:var(--d-accent);border-color:var(--d-accent);color:#1a1a17} html[data-theme="dark"] .ra-tab-payment .pa-tab-total-cost__discount-submit input:hover{ background:#fff67f;border-color:#fff67f;color:#1a1a17} /* ---- the dropdown the page draws itself ---- */ html[data-theme="dark"] .sel-btn{background:var(--d-surface-2);border-color:var(--d-line);color:var(--d-ink)} html[data-theme="dark"] .sel-btn:hover{border-color:var(--d-muted)} html[data-theme="dark"] .sel-btn.is-placeholder .sel-value{color:var(--d-muted)} html[data-theme="dark"] .sel-list{background:var(--d-surface-2);border-color:var(--d-line); box-shadow:0 10px 26px rgba(0,0,0,.55)} html[data-theme="dark"] .sel-opt{color:var(--d-ink)} html[data-theme="dark"] .sel-opt.is-active{background:var(--d-line-2)} html[data-theme="dark"] .sel-opt.is-on.is-active{background:var(--d-line)} html[data-theme="dark"] .sel-opt.is-off{color:var(--d-muted);background:none} /* The light half now also answers the row's own hover rule for this label, so the dark half has to be reachable past it: here the fill is yellow, so the label is the dark ink. */ html[data-theme="dark"] .search-course-item__more-button:hover>span, html[data-theme="dark"] .search-course-item:hover .search-course-item__more-button:hover>span{color:#1a1a17 !important} /* ---- the menu behind the hamburger ---- The panel that opens on a phone is the one nav list the dark theme never reached: the theme paints it white by name, through .l-subheader.at_middle .type_mobile .w-nav-list.level_1, and the labels on it are the page's own near white ink. The result was white on white, 1,22 to 1, for every top level entry, while the sub entries were correct because they belong to level 2. The lines between the rows were near white as well. */ html[data-theme="dark"] .header_hor .l-subheader.at_middle .type_mobile .w-nav-list.level_1, html[data-theme="dark"] .header_hor .l-subheader.at_top .type_mobile .w-nav-list.level_1{ background-color:var(--d-surface)} html[data-theme="dark"] .type_mobile .w-nav-list.level_1>.w-nav-item>.w-nav-anchor{ border-color:var(--d-line)} /* the blog titles and the FAQ question rows had no hover here either */ html[data-theme="dark"] a.entry-title:hover, html[data-theme="dark"] .w-blog-post-title a:hover, html[data-theme="dark"] .cd-faq-trigger:hover{color:var(--d-accent) !important} /* the generic dark rule for buttons inside the canvas pinned this border and outranked the hover that belongs to the control, so the course and city dropdowns answered nothing */ html[data-theme="dark"] .l-canvas button.sel-btn:hover{border-color:var(--d-muted)} /* the selected FAQ chip is brand yellow in both themes; its outline was the same yellow here, which left the chip with no edge at all, and it had no hover */ html[data-theme="dark"] #faq-chips button.on{background:#fcef4c;border-color:#1a1a17;color:#1a1a17} html[data-theme="dark"] #faq-chips button.on:hover{background:#fff67f;border-color:#1a1a17} /* the discount tint is translucent, so it mixes with whichever page it sits on; here it only needs its hover held back from the theme's own row colour */ html[data-theme="dark"] .search-course-item[style*="76,252,131"]:hover{ background-color:rgba(76,252,131,0.22) !important} html[data-theme="dark"] .sc-desc-close{color:var(--d-ink-2)} html[data-theme="dark"] .sc-desc-close:hover{background:rgba(255,255,255,.10);color:var(--d-ink)} html[data-theme="dark"] .pa-tab-terms__content .terms-link{color:var(--d-ink)} html[data-theme="dark"] .pa-tab-terms__content .terms-link:hover{color:var(--d-accent)} /* ---- the search submit under the pointer ---- Sweep finding 5. The light theme tints this button with a black wash on hover, which on the dark bar lands on an already dark ground and says nothing, so here it lightens instead. */ html[data-theme="dark"] .no-touch .l-header .w-search.layout_simple button:hover, html[data-theme="dark"] .l-header .w-search.layout_simple button:focus-visible{ background-color:rgba(255,255,255,.12) !important} /* ---- the feedback carousel's arrows ---- The band behind them is white on the light page and near black here, so the buttons take the dark theme's own surface and rule colours. The pressed and hovered state stays brand yellow in both, which is an opaque fill and reads the same on either ground. */ html[data-theme="dark"] .tagasiside-row .slick-prev, html[data-theme="dark"] .tagasiside-row .slick-next{ background:var(--d-surface-2);border-color:var(--d-line)} html[data-theme="dark"] .tagasiside-row .slick-prev:before, html[data-theme="dark"] .tagasiside-row .slick-next:before{color:var(--d-ink)} html[data-theme="dark"].no-touch .tagasiside-row .slick-prev:hover, html[data-theme="dark"].no-touch .tagasiside-row .slick-next:hover, html[data-theme="dark"] .tagasiside-row .slick-prev:focus-visible, html[data-theme="dark"] .tagasiside-row .slick-next:focus-visible{ background:#fcef4c;border-color:#d9ca24} html[data-theme="dark"].no-touch .tagasiside-row .slick-prev:hover:before, html[data-theme="dark"].no-touch .tagasiside-row .slick-next:hover:before, html[data-theme="dark"] .tagasiside-row .slick-prev:focus-visible:before, html[data-theme="dark"] .tagasiside-row .slick-next:focus-visible:before{color:#1a1a17} /* the E-autokool button in the yellow menu bar turns black when hovered, and its words have to turn white with it. The rule above that keeps the bar's words dark outranked the button's own hover colour, which left near black words on the black button. */ html[data-theme="dark"] .l-subheader.at_bottom li.menu-button .w-nav-title:hover, html[data-theme="dark"] .l-subheader.at_bottom li.menu-button .w-nav-anchor:focus-visible .w-nav-title{color:#fff} /* the back to top disc on the dark page:the near black it uses on the light page would sink into the ground here, so it takes the dark theme's raised surface and its rule colour */ html[data-theme="dark"] .w-toplink.pos_right{ background-color:var(--d-surface-2);color:var(--d-ink) !important; box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 0 1px var(--d-line) inset} html[data-theme="dark"].no-touch .w-toplink.pos_right.active:hover{ background-color:#fcef4c;color:#1a1a17 !important} /* audit item 6: the "available in Estonian only" note on the dark page */ html[data-theme="dark"] .lang-note{background:var(--d-surface-2);color:var(--d-ink-2)} html[data-theme="dark"] .lang-note-link{color:var(--d-ink)} html[data-theme="dark"].no-touch .lang-note-link:hover{color:var(--d-accent)} /* ---- the cookie question on the dark page ---- The card takes the raised dark surface, and the two answers invert the brand pair the way every other outlined button here does: a yellow outline and label, filling yellow under the pointer. The badge stays yellow in both themes. */ html[data-theme="dark"] .consent__box{background:var(--d-surface-2);color:var(--d-ink);border-color:var(--d-line); box-shadow:0 14px 40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3)} html[data-theme="dark"] .consent__title, html[data-theme="dark"] .consent__now{color:var(--d-ink)} html[data-theme="dark"] .consent__text{color:var(--d-ink-2)} html[data-theme="dark"] .consent .consent__btn{background:transparent;color:#fcef4c;border-color:#fcef4c} html[data-theme="dark"].no-touch .consent .consent__btn:hover, html[data-theme="dark"] .consent .consent__btn:focus-visible{background:#fcef4c;color:#1a1a17;border-color:#fcef4c} html[data-theme="dark"] .consent .consent__btn:focus-visible{outline-color:#fcef4c} /* the pressed answer fills yellow here, the way the light page fills it black */ html[data-theme="dark"] .consent .consent__btn.is-chosen{background:#fcef4c;color:#1a1a17;border-color:#fcef4c} html[data-theme="dark"] .consent.is-done .consent__icon{box-shadow:0 0 0 6px rgba(252,239,76,.18)} /* a course description can colour a line with an old tag; the light page forces those lines black, which on the dark panel left them almost invisible */ html[data-theme="dark"] .search-course-item__more-content font, html[data-theme="dark"] .search-course-item__more-content font span{color:var(--d-ink)!important} /* ---- the "Küsi lisa" window on the dark page ---- */ html[data-theme="dark"] .ask-dialog{background:var(--d-surface-2);color:var(--d-ink);box-shadow:0 22px 60px rgba(0,0,0,.6)} html[data-theme="dark"] .ask-dialog::backdrop{background:rgba(0,0,0,.65)} html[data-theme="dark"] .ask-dialog__page{color:var(--d-ink-2)} html[data-theme="dark"] .ask-dialog__close{color:var(--d-ink-2)} html[data-theme="dark"] .ask-dialog__close:hover{background:rgba(255,255,255,.1);color:var(--d-ink)} html[data-theme="dark"] .ask-dialog__close:focus-visible{outline-color:var(--d-accent)} html[data-theme="dark"] .l-body .cf-form input[type=submit]:disabled{ background-color:#2e3137 !important;border-color:#2e3137 !important;color:#8b8d86 !important} /* the fields sit a step darker than the window, with the dark theme's rule colour round them */ html[data-theme="dark"] #ask-dialog .cf-form input:not([type=submit]):not([type=hidden]), html[data-theme="dark"] #ask-dialog .cf-form textarea{ background-color:#17191d;border:1px solid var(--d-line);color:var(--d-ink)} html[data-theme="dark"] #ask-dialog .cf-form input:not([type=submit]):focus, html[data-theme="dark"] #ask-dialog .cf-form textarea:focus{border-color:var(--d-accent)} html[data-theme="dark"] #ask-dialog .cf-form label{color:var(--d-ink-2)} /* ---- the page for an address that does not exist, on the dark page ---- The barrier's frame and legs take the light ink so it stands out on the dark ground; the stripe itself stays yellow and black. Outlined buttons go yellow, the front page button stays filled yellow. */ html[data-theme="dark"] .notfound-art{color:var(--d-ink)} html[data-theme="dark"] .notfound-code{color:#fcef4c} html[data-theme="dark"] .notfound-title{color:var(--d-ink)} html[data-theme="dark"] .notfound-lead{color:var(--d-ink-2)} html[data-theme="dark"] .notfound-hint{color:var(--d-muted)} html[data-theme="dark"] .notfound-links a{border-color:#fcef4c;color:#fcef4c} html[data-theme="dark"] .notfound-links a.is-home{background:#fcef4c;color:#1a1a17} html[data-theme="dark"].no-touch .notfound-links a:hover, html[data-theme="dark"] .notfound-links a:focus-visible{background:#fff;border-color:#fff;color:#1a1a17} html[data-theme="dark"] .notfound-links a:focus-visible{outline-color:#fcef4c} /* ---- back from the bank, on the dark page ---- */ html[data-theme="dark"] .thanks-badge{box-shadow:0 0 0 10px rgba(252,239,76,.16)} html[data-theme="dark"] .thanks-title, html[data-theme="dark"] .thanks-bye{color:var(--d-ink)} html[data-theme="dark"] .thanks-lead{color:var(--d-ink)} html[data-theme="dark"] .thanks-list li{color:var(--d-ink-2)} html[data-theme="dark"] .thanks-share{border-top-color:var(--d-line)} html[data-theme="dark"] .thanks-or{color:var(--d-muted)} html[data-theme="dark"] .thanks-btn{border-color:#fcef4c;color:#fcef4c} html[data-theme="dark"].no-touch .thanks-btn:hover, html[data-theme="dark"] .thanks-btn:focus-visible{background:#fcef4c;color:#1a1a17} html[data-theme="dark"] .thanks-btn:focus-visible{outline-color:#fcef4c}