/* ============================================================================= Adviko — dark theme layer (production) Loaded by include/head.inc AFTER css/style.css. Purely additive: not one rule of css/style.css is edited, so the light theme (the default) is unchanged. Activation: . The attribute is set before first paint by a small script in head.inc from localStorage('adviko-theme'), and toggled by [data-theme-toggle] buttons (header + burger menu, see footer.inc). Light = no attribute = the original stylesheet. WHY THE OVERRIDES BELOW EXIST css/style.css routes nearly every colour through :root tokens, but two of them carry a double role: --white = page/card surface AND text on dark or accent backgrounds --ink = body text AND background of dark bands + icon lines Flipping those two values for a dark theme therefore breaks every dark band (footer, stats strip, seo banner, accent buttons, menu overlay): their light text turns dark and disappears. Sections 3-5 repair exactly those rules. ============================================================================= */ /* ----------------------------------------------------------------------------- 0. Role tokens. The values here are the LIGHT-theme equivalents, so these rules are no-ops in light mode. ----------------------------------------------------------------------------- */ :root { --card: #FFFFFF; /* elevated surface: cards, dropdowns, banners */ --on-accent: #FFFFFF; /* text/icons on an accent-pink fill */ --on-inverse: #FFFFFF; /* text on permanently dark bands */ --inverse-bg: #0A0A0A; } /* ----------------------------------------------------------------------------- 1. Dark palette ----------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; /* native scrollbars + form controls */ --ink: #F4F5F7; /* primary text (was #111111) */ --ink-soft: #B9BDC6; /* secondary text (was #555555) */ --white: #121216; /* page surface (was #FFFFFF) */ --surface: #17171C; /* zebra sections (was #F5F5F7) */ --surface-hover: #23232B; --muted: #9A9DA6; /* muted text (was #999999) */ --border: #2E2E38; /* hairlines (was #E5E5EA) */ --card: #1C1C24; /* cards sit ABOVE the page */ --inverse-bg: #0A0A0A; /* #E83087 reaches only ~4.5:1 on #121216 — the AA floor for normal text — so text-sized accent usages use this lightened variant. Button fills keep the brand pink. */ --accent-text: #FF64A8; /* The brand link pink #ff0079 measures 4.45:1 on a card and 3.80:1 on white, both below AA. The dark-theme variant clears it on page (5.6:1) and card (5.1:1) surfaces. */ --link: #FF3D93; } /* ----------------------------------------------------------------------------- 2. Elevated surfaces. ----------------------------------------------------------------------------- */ .service-card, .case-card, .about-col, .header-contact-dropdown, .cookie-banner { background: var(--card); } /* ----------------------------------------------------------------------------- 3. Text that must stay LIGHT on permanently dark surfaces. css/style.css painted these with var(--white), which now means "surface". ----------------------------------------------------------------------------- */ :root[data-theme="dark"] .section-dark { background: var(--inverse-bg); } .section-dark, .footer, .footer-col a, .footer-contact-row a, .footer-contact-row span[itemprop="telephone"], .seo-banner-text, .seo-banner-link { color: var(--on-inverse); } /* ----------------------------------------------------------------------------- 4. Text and icons on accent-pink fills stay light in both themes. ----------------------------------------------------------------------------- */ .header-contact-btn, .header-contact-chevron, .header-contact-icon, .btn-primary, .cookie-banner__btn--accept, .about-col li:hover, .about-col li:hover a { color: var(--on-accent); } /* ----------------------------------------------------------------------------- 5. Accent used as TEXT → lightened variant in dark mode. NB: :is() adopts the specificity of its MOST specific argument, so nothing here may be overridden later by a plain single-class selector without adding specificity. `.hero-eyebrow` is deliberately NOT in this list — see section 12. ----------------------------------------------------------------------------- */ :root[data-theme="dark"] :is( .section-label, .menu-section-title, .menu-links a:hover, .menu-nav a:hover, .about-text strong, .about-highlight .num, .service-card .tag, .service-card .more, .case-body .tag, .case-body .more, .seo-banner-highlight, .cases-footer a:hover, .services-footer a:hover, .stat-number, .menu-close:hover span, .footer-col a:hover, .footer-contact-row a:hover, .footer-social a:hover ) { color: var(--accent-text); } /* ----------------------------------------------------------------------------- 6. Surfaces css/style.css hard-codes as translucent WHITE glass. ----------------------------------------------------------------------------- */ :root[data-theme="dark"] .header.scrolled { background: rgba(18, 18, 22, 0.85); box-shadow: 0 1px 0 var(--border); } :root[data-theme="dark"] .menu-overlay { background: rgba(13, 13, 17, 0.98); } /* ----------------------------------------------------------------------------- 7. Logo. i/logo.png is pure monochrome black (measured: 0 % coloured pixels, dominant colour rgb(0,0,0)), so a filter inversion is exact — no hue cast. ----------------------------------------------------------------------------- */ :root[data-theme="dark"] .logo-img { filter: brightness(0) invert(1); } /* ----------------------------------------------------------------------------- 8. Customer logos (i/logos/*.png) are 150x150 tiles with a baked-in PURE WHITE background (alpha coverage 1.0 — measured). On a dark page they read as 12 glaring white squares, so dark mode gives them a deliberate chip frame. max-height is raised to 92px because `* { box-sizing: border-box }` makes the 10px padding eat into the artwork (which would shrink every logo from 72px to 52px). Real fix = re-export with transparency, or author dark variants. ----------------------------------------------------------------------------- */ :root[data-theme="dark"] .customer-logo { background: #FFFFFF; border-radius: 10px; padding: 10px; max-height: 92px; } /* ----------------------------------------------------------------------------- 9. Content images are white-background screenshots (allpositions.png 241 L, work-flow-new.png 246 L, lid-bitrix24.png 231 L, cases-stamp.png 212 L …). They necessarily stay light — that cannot be fixed in CSS without re-authoring the diagrams — so they get a framed "figure" treatment that reads as intentional rather than accidental. ----------------------------------------------------------------------------- */ :root[data-theme="dark"] .inner-page img, :root[data-theme="dark"] .about-col img, :root[data-theme="dark"] .case-image img { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 28px rgba(0, 0, 0, 0.45); } /* ----------------------------------------------------------------------------- 10. Shadows. rgba(0,0,0,…) is invisible against a dark page — deepen them. ----------------------------------------------------------------------------- */ :root[data-theme="dark"] .service-card:hover, :root[data-theme="dark"] .case-card:hover { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.60); } :root[data-theme="dark"] .header-contact-dropdown { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65); } :root[data-theme="dark"] .cookie-banner { box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.65); } :root[data-theme="dark"] .btn-primary:hover { box-shadow: 0 8px 32px rgba(232, 48, 135, 0.35); } /* ----------------------------------------------------------------------------- 11. Pink washes are far too faint on a dark surface — raise the alpha. ----------------------------------------------------------------------------- */ :root[data-theme="dark"] .cta-banner { background: linear-gradient(135deg, rgba(232, 48, 135, 0.14), rgba(232, 48, 135, 0.04)); border-color: rgba(232, 48, 135, 0.28); } :root[data-theme="dark"] .about-highlight { background: rgba(232, 48, 135, 0.10); } :root[data-theme="dark"] .service-card .tag, :root[data-theme="dark"] .case-body .tag { background: rgba(232, 48, 135, 0.16); } /* ----------------------------------------------------------------------------- 12. HERO. i/heroblock.avif is bright EVERYWHERE — mean L 235, median 240, p99 255, and just as bright in the left column where the copy sits — so the veil alone carries the whole text contrast. 62–70 % is the lightest that keeps the copy at AA: measured on the rendered page (foreground hidden, screenshot sampled), the composited background under the text is 61–100 gray → 5.4:1 worst case against --ink #F4F5F7, floor 4.5:1. 0.58 is the cliff (4.46:1 — fails). Tune with the two tokens; nothing else needs touching. ----------------------------------------------------------------------------- */ :root[data-theme="dark"] { --hero-veil-top: 0.62; --hero-veil-bottom: 0.70; } :root[data-theme="dark"] .hero { background: linear-gradient(180deg, rgba(10, 10, 14, var(--hero-veil-top)), rgba(10, 10, 14, var(--hero-veil-bottom))), url(../i/heroblock.avif) center center / cover no-repeat; } /* Consequence of the light veil: the brand pink no longer clears its threshold over the photo (#E83087 = 1.5:1, #FF64A8 = 2.2:1 — the H1 accent word needs 3:1, the 13px eyebrow needs 4.5:1). So the two pink hero elements shift to pastel tones: the highlighted word #FFA8CE → #FFC2E4 = 3.5–5.0:1 (passes for 64px text), and the eyebrow goes neutral instead of pale-pink-on-pale-photo. */ :root[data-theme="dark"] .hero h1 .highlight { background: linear-gradient(135deg, #FFA8CE, #FFC2E4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="dark"] .hero-eyebrow { color: var(--ink); } /* The outline button's hairline (#2E2E38) is invisible on the veiled photo: 0.6 white gives 3.2:1, which is the 1.4.11 floor for a control boundary. */ :root[data-theme="dark"] .hero .btn-outline { color: var(--ink); border-color: rgba(244, 245, 247, 0.6); } :root[data-theme="dark"] .hero .btn-outline:hover { color: #FFC2E4; border-color: #FFC2E4; }