/* ========================================================================== Chip Verdict - Colours (8 October 2026; switch removed 28 October 2026) The site has one appearance, the approved dark treatment (Night). is set on the server by mu-plugins/cv-modes.php. The Day colours and the Day/Night control were removed on 28 October 2026; the previous file is in /home/chipverd/cv-backups. ========================================================================== */ /* ---------- 1 the shared tokens: future templates use these and inherit both modes ---------- */ html{ --cvm-bg:#FFFFFF; --cvm-surface:#F3F4F5; --cvm-text:#080808; --cvm-text-2:#3E434A; --cvm-text-3:#5F6670; --cvm-line:#E2E5E9; --cvm-line-2:#CBD0D6; --cvm-accent:#E1BD5E; --cvm-accent-hover:#8F6B1F; --cvm-accent-text:#8F6B1F; --cvm-on-accent:#15171A; --cvm-focus:#8F6B1F; --cvm-panel:#F3F4F5; --cvm-panel-line:#D5DAE0; color-scheme:light} html[data-mode="night"]{ --cvm-bg:#0E0D0B; --cvm-surface:#1B1C1F; --cvm-text:#F4F5F7; --cvm-text-2:#BBC1CA; --cvm-text-3:#9AA1AB; --cvm-line:#2C2F34; --cvm-line-2:#3B4047; --cvm-accent:#E1BD5E; --cvm-accent-hover:#EDD08A; --cvm-accent-text:#E1BD5E; --cvm-on-accent:#15171A; --cvm-focus:#E1BD5E; --cvm-panel:#EEF0F3; --cvm-panel-line:#CBD0D6; color-scheme:dark} /* ---------- 2 the Day/Night control: two quiet words in the header ---------- */ /* ---------- 3 the new templates (homepage and posts), Day ---------- Their colours come from three tokens: --page, --ink (white at set strengths) and --veil (the dark layer on pictures). Day turns the page white and the ink black; anything that sits on a photograph keeps the dark treatment, so its words stay readable. White written as a colour becomes the ink, so it follows whichever side it is on. */ /* the dark sides: photographs and the panels drawn over them */ /* white written as a colour */ /* the compact bar and the full-screen menu */ /* picture frames that are empty until their picture loads */ /* the homepage's three worlds (Poker, Casino, Sports): their own quiet palette, turned to day */ /* a feature without a photograph is a light panel by day */ /* ---------- 4 posts (news, guides, course reviews), Day ---------- */ /* the opening: the picture stands as it is; the side it fades into is the white page, the words are black */ /* the dark boxes inside a text become light ones */ /* white buttons become black ones on the white page */ /* screenshot controls sit on a dark chip over the picture */ /* the screenshot and video viewer: the picture on a dark stage, by day too, so it reads as the course's own */ /* course reviews: the reading surface white, the text black, the column open on the page */ /* the verdict panel: a very light neutral panel, a thin orange top edge, black text */ /* the verdict panel is light in both modes, so its label uses the darker orange in both */ :root body.cv2.cv2-course .prose .cvv > .cvv__main > h2{color:#8F6B1F} :root body.cv2.cv2-course .prose .cvv > .cvv__main > h2::before{background:#8F6B1F} /* ---------- 5 the older templates (category and search pages, games, tools, standalone pages), both modes ---------- Their colours come from the tokens of casino.css and magazine.css. Here those tokens point at the shared ones above, so the older pages lose the lime, violet and navy and follow Day and Night like the rest. */ body:not(.cv2){ --cv-paper:var(--cvm-bg); --cv-paper-2:var(--cvm-surface); --cv-navy:var(--cvm-surface); --cv-navy-2:var(--cvm-surface); --cv-orange:var(--cvm-accent); --cv-orange-2:var(--cvm-accent-text); --cv-ink:var(--cvm-text); --cv-ink-2:var(--cvm-text-2); --cv-muted:var(--cvm-text-3); --cv-line:var(--cvm-line); --cv-line-2:var(--cvm-line-2); --cv-rule:var(--cvm-line-2); --cv-on-navy:var(--cvm-text); --cv-on-navy-2:var(--cvm-text-2); --x-bg:var(--cvm-bg); --x-bg2:var(--cvm-surface); --x-ink:var(--cvm-text); --x-dim:var(--cvm-text-3); --x-blue:var(--cvm-surface); --x-coral:var(--cvm-accent); --x-lime:var(--cvm-accent); --x-amber:var(--cvm-accent); --x-line:var(--cvm-line); --cs-bg:var(--cvm-bg); --cs-bg-2:var(--cvm-surface); --cs-panel:var(--cvm-bg); --cs-panel-2:var(--cvm-surface); --cs-line:var(--cvm-line-2); --cs-line-soft:var(--cvm-line); --cs-text:var(--cvm-text); --cs-muted:var(--cvm-text-2); --cs-dim:var(--cvm-text-3); --cs-cta:var(--cvm-accent); --cs-cta-2:var(--cvm-accent-hover); --cs-ink:var(--cvm-on-accent); --cs-gold:var(--cvm-accent); --cs-gold-2:var(--cvm-accent-text); --cs-violet:var(--cvm-accent); --cs-violet-2:var(--cvm-accent-text); --cs-green:var(--cvm-text-2); --cs-green-2:var(--cvm-text-2); --cs-red:var(--cvm-accent-text); --cs-glow-violet:0 0 0 1px var(--cvm-line-2); --cs-glow-gold:0 0 0 1px var(--cvm-line-2); --cs-shadow:none; background:var(--cvm-bg); background-image:none; color:var(--cvm-text)} html[data-mode="night"] body:not(.cv2){--cs-panel:var(--cvm-surface); --cs-panel-2:#23262B} body:not(.cv2) :focus-visible{outline-color:var(--cvm-focus)} body:not(.cv2) :is(h1,h2,h3,h4,h5,h6){color:var(--cvm-text)} :where(body:not(.cv2)) a:hover{color:var(--cvm-text)} body:not(.cv2) :is(.cv-skip-link,.cs-skip-link){color:var(--cvm-bg);background:var(--cvm-text)} /* the bar at the top: a little closer together, so the Day/Night control fits beside the sections */ @media (min-width:821px){body:not(.cv2) .cvx-bar__in{gap:18px} body:not(.cv2) .cvx-nav{gap:18px}} body:not(.cv2) .cvx-nav a{white-space:nowrap} body:not(.cv2) .cvx-bar{background:color-mix(in srgb,var(--cvm-bg) 92%,transparent);border-bottom:1px solid var(--cvm-line)} body:not(.cv2) .cvx-logo .m{background:var(--cvm-accent)} body:not(.cv2) .cvx-nav a{color:var(--cvm-text-2)} body:not(.cv2) .cvx-nav a:hover,body:not(.cv2) .cvx-nav a.on{color:var(--cvm-text)} body:not(.cv2) .cvx-nav a.on{box-shadow:inset 0 -2px 0 var(--cvm-accent)} body:not(.cv2) .cvx-wtp{background:transparent;color:var(--cvm-text);border:0;box-shadow:inset 0 0 0 1px var(--cvm-line-2)} body:not(.cv2) .cvx-wtp:hover{box-shadow:inset 0 0 0 1px var(--cvm-text);color:var(--cvm-text)} /* on a narrow phone the bar was a few pixels wider than the screen */ @media (max-width:420px){body:not(.cv2) .cvx-wtp{padding:9px 10px;letter-spacing:.03em}} body:not(.cv2) :is(.cvx-search,.cs-menu-toggle){color:var(--cvm-text)} body:not(.cv2) .cs-menu-toggle{background:transparent;border-color:var(--cvm-line-2)} body:not(.cv2) .cs-menu-toggle[aria-expanded="true"]{border-color:var(--cvm-text);color:var(--cvm-text)} @media (max-width:820px){body:not(.cv2) .cvx-nav{background:var(--cvm-bg);box-shadow:0 18px 30px rgba(0,0,0,.18);border-bottom:1px solid var(--cvm-line)}} /* cards, rows, chips and buttons */ body:not(.cv2) :is(.cs-card,.cs-row,.cs-product-card):hover{border-color:var(--cvm-text-3)} body:not(.cv2) .cs-row--top{border-color:var(--cvm-accent)} body:not(.cv2) :is(.cs-card__title a,.cs-result__title a,.cs-product-card__icon,.cs-product-card__title,.cs-row__name h3 a,.cs-resources__phone, .cs-table__operator a,.cs-sum__value,.cs-facts dd,.cs-versus__figure,.cs-versus__delta,.cs-howto__list li::before,.cs-crumbs a:hover, .cs-chip:hover,.cs-button:hover,.cs-search__field input[type="search"],.cs-country__select,.cs-form__field :is(input,select,textarea)){color:var(--cvm-text)} body:not(.cv2) .cs-country__select option{color:#080808;background:#fff} body:not(.cv2) :is(.cs-chip,.cs-button,.cs-button--quiet,.cs-search__field,.cs-resources__item,.cs-country-chip,.cs-medal,.cs-bar){background-color:var(--cvm-surface)} body:not(.cv2) .cs-button:hover{background-color:var(--cvm-line)} body:not(.cv2) .cs-search__submit{background:var(--cvm-text);color:var(--cvm-bg)} body:not(.cv2) .cs-chip--on{background:var(--cvm-text);color:var(--cvm-bg);border-color:var(--cvm-text)} body:not(.cv2) .cs-cta{box-shadow:none;background:var(--cvm-accent);color:var(--cvm-on-accent)} body:not(.cv2) .cs-cta::after{display:none} body:not(.cv2) .cs-cta:hover{box-shadow:none;background:var(--cvm-accent-hover)} body:not(.cv2) :is(.cs-medal--silver,.cs-medal--bronze){background:var(--cvm-surface);color:var(--cvm-text)} body:not(.cv2) .cs-table tbody tr:hover{background:var(--cvm-surface)} /* the hours a bankroll lasts: one quiet treatment instead of green, violet and gold */ body:not(.cv2) :is(.cs-cost--longest,.cs-cost--long,.cs-cost--fastest){background:var(--cvm-surface);color:var(--cvm-text);box-shadow:inset 0 0 0 1px var(--cvm-line-2)} body:not(.cv2) .cs-cost--longest{box-shadow:inset 0 0 0 1px var(--cvm-accent)} body:not(.cv2) :is(.cs-bar__fill--longest,.cs-bar__fill--long){background:var(--cvm-text-3)} body:not(.cv2) .cs-bar__fill--longest{background:var(--cvm-accent)} body:not(.cv2) :is(.cs-responsible,.cs-assume){background:var(--cvm-surface);border-color:var(--cvm-line)} body:not(.cv2) :is(.cs-versus__side--good,.cs-versus__side--bad){border-color:var(--cvm-line-2)} body:not(.cv2) .cs-versus__side--good .cs-versus__figure{color:var(--cvm-text)} body:not(.cv2) .cs-versus__side--bad .cs-versus__figure{color:var(--cvm-accent-text)} body:not(.cv2) :is(.cs-placeholder-note,.cs-placeholder-block){background:var(--cvm-surface);border-color:var(--cvm-line-2);color:var(--cvm-text-2)} body:not(.cv2) .screen-reader-text:focus{background:var(--cvm-text);color:var(--cvm-bg)} /* the advertising strip on the older category pages */ body:not(.cv2) .cs-acrban a{background:var(--cvm-surface);border-color:var(--cvm-line-2)} body:not(.cv2) .cs-acrban a:hover{border-color:var(--cvm-text-3)} body:not(.cv2) .cs-acrban__label{color:var(--cvm-text-3)} body:not(.cv2) :is(.cs-acrban__brand,.cs-acrban__copy strong){color:var(--cvm-text)} body:not(.cv2) .cs-acrban__brand b{color:var(--cvm-accent-text)} body:not(.cv2) .cs-acrban__copy{color:var(--cvm-text-2)} body:not(.cv2) .cs-acrban__btn{background:var(--cvm-accent);color:var(--cvm-on-accent)} /* the tools: their cards follow the page instead of staying white */ body:not(.cv2) .cvtool{background:var(--cvm-bg);border-color:var(--cvm-line-2)} body:not(.cv2) .cvtool :is(input,select){background:var(--cvm-bg);color:var(--cvm-text);border-color:var(--cvm-line-2)} body:not(.cv2) .cvtool__out b{color:var(--cvm-accent-text)} /* Your Move: the quiz is a card table, a dark panel in both modes; its lime becomes the site's orange */ body:not(.cv2) .ym-quiz{--lime:#E1BD5E;--lime-ink:#15171A;--cv-on-navy:#F4F5F7;--cv-on-navy-2:#BBC1CA;--cv-orange:#E1BD5E;background:#1B1C1F;color:#F4F5F7} body:not(.cv2) .ym-opt:hover:not(:disabled){background:rgba(255,99,59,.14)} body:not(.cv2) .ym-card.back{background:repeating-linear-gradient(45deg,#3B4047,#3B4047 6px,#2C2F34 6px,#2C2F34 12px)} /* the control on the older pages: in the bar on a wide screen, at the foot of the menu on a phone */ /* ---------- 6 the Play at ACR landing page (template-acr.php): its own tokens, pointed at the shared ones ---------- */ body.cs-acr{--paper:var(--cvm-bg);--panel:var(--cvm-surface);--panel2:var(--cvm-surface);--ink:var(--cvm-text);--muted:var(--cvm-text-2);--line:var(--cvm-line);--lime:var(--cvm-accent);--lime-ink:var(--cvm-on-accent)} body.cs-acr .bar{background:color-mix(in srgb,var(--cvm-bg) 92%,transparent)} body.cs-acr .hero::before{display:none} body.cs-acr :is(.eyebrow,.kicker,.wordmark span,.bar__cta){color:var(--cvm-accent-text)} body.cs-acr .bar__cta{border-color:var(--cvm-accent)} body.cs-acr .bar__cta:hover{color:var(--cvm-on-accent)} body.cs-acr :is(.cta,.cta:hover,.disc){box-shadow:none} body.cs-acr .feat__i{background:rgba(255,99,59,.12);color:var(--cvm-accent-text)} body.cs-acr .verdict{background:var(--cvm-surface)} body.cs-acr .verdict p,body.cs-acr .disc-note b{color:var(--cvm-text-2)} body.cs-acr .rg{color:var(--cvm-text-3)} body.cs-acr footer.cs-foot{background:var(--cvm-surface)} /* ---------- 7 found while checking: in-text buttons in course reviews had lost their label (white on a white pill); they now read like the course link button, in both modes ---------- */ body.cv2.cv2-course .prose a.wp-block-button__link,body.cv2.cv2-course .prose a.cs-cta{gap:10px;border-radius:4px;padding:12px 22px;background:var(--t-accent);color:var(--t-on-accent);text-decoration:none;box-shadow:none;transition:background-color .16s ease} body.cv2.cv2-course .prose a.wp-block-button__link:hover,body.cv2.cv2-course .prose a.cs-cta:hover{transform:none;box-shadow:none;background:var(--t-accent-hover)} /* ---------- 8 course reviews: the opening keeps its Night look in both modes (9 October 2026) ---------- The picture, its treatment, the dark layers and the words on them stay exactly as in Night; the page under the opening follows Day or Night as everywhere else. On a wide screen the menu row lies on the opening, so it does too. */ /* ========================================================================== UX-001 stages 4 to 6 (9 October 2026). Remove this section to undo them. 4 Tap targets of at least 44px, made with padding (negative margins keep the look), and 12px as the smallest text. 5 The course review's verdict panel in Night: the dark surface instead of light grey. Day is unchanged. 6 Small fixes: the category tabs on phones, the length of a line of article text on desktop, the orange of large words on white (Play at ACR), the finder's small print in Night. ========================================================================== */ /* ---------- 4 tap targets ---------- */ body.cv2 .menu__logo{display:inline-block;padding:9px 0;margin:-9px 0} body.cv2 .menu__burger,body.cv2 .menu__search{position:relative} body.cv2 :is(.menu__burger,.menu__search,.screen__close)::after{content:"";position:absolute;inset:-2px;border-radius:50%} body.cv2 .hero__names a{display:inline-block;padding:11px 4px;margin:-11px -4px} body.cv2 .crumbs a{display:inline-block;padding:14px 0;margin:-14px 0} body.cv2 a.quiet{display:inline-block;padding:12px 0;margin:-12px 0} body.cv2 .ft__group a{padding:10px 0;margin:-2px 0} body.cv2 .atoc ul{row-gap:0} body.cv2 .atoc a{padding-top:12px;padding-bottom:12px} body.cv2 .atoc a::before{top:calc(12px + .15em)} /* ---------- 4 the smallest text: 12px ---------- */ body.cv2 :is(.pt__eye,.pt__btn,.pt-route a,.pt-choice__n,.pt-choice small,.pt-fin__method){font-size:12px} @media (max-width:899px){body.cv2 .pt__tab{font-size:12px}} body.cv2 .media__tag{font-size:12px} body.cv2.cv2-course .prose table.cv-ctable td[data-label]::before{font-size:12px} /* the room finder's summary, on phones */ @media (max-width:699px){body.cv2 .pt-fin__head p{font-size:15px;line-height:1.45}} /* ---------- 5 the verdict panel in Night ---------- */ html[data-mode="night"] body.cv2.cv2-course .prose .cvv{background:var(--cvm-surface);border-color:var(--cvm-line);border-top-color:var(--cvm-accent);color:var(--cvm-text)} html[data-mode="night"] body.cv2.cv2-course .prose .cvv > .cvv__main > h2{color:var(--cvm-accent-text)} html[data-mode="night"] body.cv2.cv2-course .prose .cvv > .cvv__main > h2::before{background:var(--cvm-accent-text)} html[data-mode="night"] body.cv2.cv2-course .prose .cvv :is(.cvv__lead,.cvv__fit dt,.cvv__clip-title){color:var(--cvm-text)} html[data-mode="night"] body.cv2.cv2-course .prose .cvv .cvv__fit dd{color:var(--cvm-text-2)} html[data-mode="night"] body.cv2.cv2-course .prose .cvv .cvv__fit div{border-top-color:var(--cvm-line-2)} html[data-mode="night"] body.cv2.cv2-course .prose .cvv .cvv__clip{border-left-color:var(--cvm-line-2)} html[data-mode="night"] body.cv2.cv2-course .prose .cvv > p.cvv__facts,html[data-mode="night"] body.cv2.cv2-course .prose .cvv .cvv__facts{border-top-color:var(--cvm-line-2);color:var(--cvm-text-2)} html[data-mode="night"] body.cv2.cv2-course .prose .cvv .cvv__clip-sub{color:var(--cvm-text-2)} /* ---------- 6 small fixes ---------- */ /* the category tabs: the three fit on a phone */ @media (max-width:440px){body.cv2 .snav ul{gap:0 12px}} /* a line of article text: about 70 characters on desktop; pictures, tables and the verdict keep the full column */ @media (min-width:1100px){body.cv2 .prose > :is(p,ul,ol,h2,h3,h4,blockquote){max-width:40rem}} /* large orange words on white: the darker orange the site uses for small orange text in Day */ body.cs-acr h1 em{color:var(--cvm-accent-text)} /* the finder's small print in Night: readable on its dark panel */ html:not([data-mode="day"]) body.cv2 .pt-fin__method{color:#9A989C}