/** * Light-theme cascade fixes — load LAST in after all component CSS. * Targets html[data-theme="light"] only; dark production default unchanged. */ html[data-theme='light'] { /* Progressive disclosure: replace dark glass gradient */ --pd-item-bg: linear-gradient( 165deg, color-mix(in srgb, var(--text-main) 4%, transparent) 0%, transparent 48% ); } /* ── Links (silo) ── */ html[data-theme='light'] .silo-main a:not(.btn-primary):not(.btn-secondary):not(.btn-whatsapp):not(.btn-wa-ref):not(.authority-card):not( .site-carousel__qr-link ):not(.site-carousel__qr-home):not(.site-carousel__qr-cta-link):not(.page-order-qr__link):not( .page-order-qr__home ):not(.page-order-qr__cta-link):not(.page-order-qr__url-link):not(.content-link):not(.silo-link-pill):not( .footer-pill ):not(.footer-legal__site):not(.footer-social__link):not(.intro-pills__pill):not(.guide-market-chip):not( .sample-gallery__pill ):not(.sample-shot__link):not(.guides-cluster-jump__link):not(.btn-pricing):not(.btn-market-cta):not( .site-carousel__pain-pill ):not(.site-carousel__pitch-link):not(.site-carousel__promo-link):hover, html[data-theme='light'] .silo-main a:not(.btn-primary):not(.btn-secondary):not(.btn-whatsapp):not(.btn-wa-ref):not(.authority-card):not( .site-carousel__qr-link ):not(.site-carousel__qr-home):not(.site-carousel__qr-cta-link):not(.page-order-qr__link):not( .page-order-qr__home ):not(.page-order-qr__cta-link):not(.page-order-qr__url-link):not(.content-link):not(.silo-link-pill):not( .footer-pill ):not(.footer-legal__site):not(.footer-social__link):not(.intro-pills__pill):not(.guide-market-chip):not( .sample-gallery__pill ):not(.sample-shot__link):not(.guides-cluster-jump__link):not(.btn-pricing):not(.btn-market-cta):not( .site-carousel__pain-pill ):not(.site-carousel__pitch-link):not(.site-carousel__promo-link):focus-visible { color: var(--text-main); } html[data-theme='light'] .silo-link-pill:hover, html[data-theme='light'] .silo-link-pill:focus-visible { color: var(--text-main); background: var(--pill-hover-bg); border-color: var(--pill-hover-border); } html[data-theme='light'] .silo-faq, html[data-theme='light'] .faq-item { border-color: var(--border); } html[data-theme='light'] .silo-cta, html[data-theme='light'] #packages .package-contact-routes, html[data-theme='light'] #packages .package-internal-links, html[data-theme='light'] .package-summary-grid article, html[data-theme='light'] .package-info-grid section, html[data-theme='light'] .package-info-grid article { border-color: var(--border); background: var(--panel-bg); box-shadow: var(--shadow-card); } html[data-theme='light'] .silo-figure-grid { border-color: var(--border); } /* ── Package comparison table ── */ html[data-theme='light'] .package-comparison__scroll { border-color: var(--border); background: var(--surface-elevated); box-shadow: var(--shadow-card); } html[data-theme='light'] .package-comparison__table th, html[data-theme='light'] .package-comparison__table td { border-bottom-color: var(--border); } html[data-theme='light'] .package-comparison__table thead th { background: var(--surface-band); color: var(--text-main); } html[data-theme='light'] .package-comparison__table td:not(.pkg-cmp-feature), html[data-theme='light'] .package-comparison__table thead th:not(.pkg-cmp-feature) { border-left-color: var(--border); background: var(--surface); } html[data-theme='light'] .pkg-cmp-feature { background: var(--surface-elevated); box-shadow: 4px 0 8px color-mix(in srgb, var(--text-main) 6%, transparent); } html[data-theme='light'] .pkg-cmp-feature--corner { background: var(--surface-band); } html[data-theme='light'] .pkg-cmp-tier-icon-wrap { background: var(--surface-band); border-color: var(--border); color: var(--link-uk); } html[data-theme='light'] body.region-za .pkg-cmp-tier-icon-wrap { color: var(--link-za); } html[data-theme='light'] body.region-us .pkg-cmp-tier-icon-wrap { color: var(--link-us); } html[data-theme='light'] .pkg-cmp-tier-icon, html[data-theme='light'] .package-tier-icon, html[data-theme='light'] .silo-cta-icon, html[data-theme='light'] .hero-package-icon__svg { color: var(--text-main); } /* ── Intro pills ── */ html[data-theme='light'] .intro-pills__pill, html[data-theme='light'] button.intro-pills__pill, html[data-theme='light'] a.intro-pills__pill:is(:link, :visited, :hover, :focus, :focus-visible, :active) { border-color: var(--pill-border); background: var(--pill-bg); color: var(--pill-text); box-shadow: var(--shadow-card); } html[data-theme='light'] button.intro-pills__pill:hover, html[data-theme='light'] button.intro-pills__pill:focus-visible, html[data-theme='light'] a.intro-pills__pill:hover, html[data-theme='light'] a.intro-pills__pill:focus-visible { border-color: var(--pill-hover-border); background: var(--pill-hover-bg); color: var(--text-main); } /* ── Progressive disclosure ── */ html[data-theme='light'] .pd-item { background: var(--pd-item-bg), var(--surface-elevated); box-shadow: var(--shadow-card); } html[data-theme='light'] .pd-item:hover { box-shadow: var(--shadow-elevated); } html[data-theme='light'] .pd-panel .package-info-grid .managed-vs-diy__col--diy, html[data-theme='light'] .package-info-grid .managed-vs-diy__col--diy { background: var(--surface-band); border-color: var(--border); } html[data-theme='light'] .pd-panel .package-info-grid .managed-vs-diy__col--csmbac, html[data-theme='light'] .package-info-grid .managed-vs-diy__col--csmbac, html[data-theme='light'] .managed-vs-diy__col--csmbac { background: radial-gradient(ellipse 90% 70% at 15% 0%, rgba(0, 123, 255, 0.08), transparent 55%), radial-gradient(ellipse 60% 50% at 95% 100%, rgba(0, 210, 255, 0.05), transparent 50%), var(--surface-elevated); border-color: color-mix(in srgb, #007bff 28%, var(--border)); box-shadow: var(--shadow-card); } /* ── Example themes marquee controls ── */ html[data-theme='light'] .example-themes-marquee__device-btn, html[data-theme='light'] .example-themes-marquee__zoom-btn { border-color: color-mix(in srgb, #6366f1 35%, var(--border)); background: linear-gradient( 145deg, color-mix(in srgb, #6366f1 12%, var(--surface-elevated)) 0%, var(--surface-band) 100% ); color: var(--chrome-fg); box-shadow: var(--shadow-card); } html[data-theme='light'] .example-themes-marquee__device-btn:hover, html[data-theme='light'] .example-themes-marquee__device-btn:focus-visible, html[data-theme='light'] .example-themes-marquee__zoom-btn:hover, html[data-theme='light'] .example-themes-marquee__zoom-btn:focus-visible { border-color: color-mix(in srgb, #6366f1 55%, var(--border)); color: var(--text-main); box-shadow: var(--shadow-elevated); } html[data-theme='light'] .example-themes-marquee__frame { background: var(--frame-bg); border-color: var(--border); } /* ── Carousel pitch chips ── */ html[data-theme='light'] .site-carousel__pitch-kicker, html[data-theme='light'] .site-carousel__pitch-line { color: var(--text-main); } html[data-theme='light'] .site-carousel__pain-pill, html[data-theme='light'] .site-carousel__pitch-link { background: var(--pill-bg); border-color: var(--pill-border); color: var(--pill-text); } html[data-theme='light'] .site-carousel__stage-overlay { background: linear-gradient( 180deg, color-mix(in srgb, var(--bg) 12%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 100% ); } /* ── Authority metal cards (lighter surfaces; CTAs stay graphite) ── */ html[data-theme='light'] .authority-card--metal-copper, html[data-theme='light'] .authority-card--metal-silver, html[data-theme='light'] .authority-card--metal-gold, html[data-theme='light'] .authority-card--metal-black, html[data-theme='light'] .authority-card--metal-flagship { background: linear-gradient( 165deg, var(--surface-elevated) 0%, var(--surface-band) 55%, var(--surface) 100% ); border-color: var(--border); box-shadow: var(--shadow-card); color: var(--text-main); } html[data-theme='light'] .authority-card--metal-copper .authority-card-price, html[data-theme='light'] .authority-card--metal-silver .authority-card-price, html[data-theme='light'] .authority-card--metal-gold .authority-card-price, html[data-theme='light'] .authority-card--metal-black .authority-card-price, html[data-theme='light'] .authority-card--metal-flagship .authority-card-price { color: var(--text-main); } /* ── Nav active states ── */ html[data-theme='light'] .nav-links a.is-active, html[data-theme='light'] .nav-links a[aria-current='page'] { color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main) !important; } html[data-theme='light'] .nav-more__btn[aria-expanded='true'] { color: var(--text-main); } /* ── Secure checkout / modals ── */ html[data-theme='light'] .secure-checkout__overlay { background: color-mix(in srgb, var(--bg) 55%, transparent); } html[data-theme='light'] .secure-checkout__panel, html[data-theme='light'] .hero-cta-modal__dialog { background: var(--surface-elevated); border-color: var(--border); color: var(--text-main); } /* ── Nav logo (mark + animated subtitle) ── */ html[data-theme='light'] nav a.logo .site-logo__image, html[data-theme='light'] body > nav a.logo .site-logo__image { filter: brightness(0) saturate(100%); } html[data-theme='light'] nav a.logo .logo-copy .logo-sub.logo-sub--anim, html[data-theme='light'] body > nav a.logo .logo-sub.logo-sub--anim { color: var(--chrome-fg-muted, var(--text-muted)); } html[data-theme='light'] nav a.logo .logo-sub__chars, html[data-theme='light'] nav a.logo .logo-sub__char.is-settled, html[data-theme='light'] body > nav a.logo .logo-sub__chars, html[data-theme='light'] body > nav a.logo .logo-sub__char.is-settled { color: var(--chrome-fg-muted, var(--text-muted)); } html[data-theme='light'] nav a.logo .logo-sub__morse, html[data-theme='light'] body > nav a.logo .logo-sub__morse { color: color-mix(in srgb, var(--accent, #6366f1) 72%, var(--text-main)); } @keyframes logoSubCharPopLight { 0% { opacity: 0; transform: scale(1.55); color: var(--text-muted); text-shadow: 0 0 6px color-mix(in srgb, var(--accent, #6366f1) 40%, transparent); } 42% { opacity: 1; transform: scale(1.14); text-shadow: 0 0 8px color-mix(in srgb, var(--accent, #6366f1) 35%, transparent); } 68% { transform: scale(0.97); filter: brightness(1.08); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); text-shadow: none; color: var(--chrome-fg-muted, var(--text-muted)); } } html[data-theme='light'] nav a.logo .logo-sub__char.is-entering, html[data-theme='light'] body > nav a.logo .logo-sub__char.is-entering { animation-name: logoSubCharPopLight; } /* ── Mobile drawer More panel ── */ html[data-theme='light'] .mobile-menu .nav-more--mobile { border-top-color: var(--border); } html[data-theme='light'] .mobile-menu .nav-more__btn { color: var(--text-muted) !important; } html[data-theme='light'] .mobile-menu .nav-more.is-open > .nav-more__btn { color: var(--text-main) !important; } html[data-theme='light'] .mobile-menu .nav-more__panel { border-left-color: var(--border); } html[data-theme='light'] .mobile-menu .nav-more__panel a, html[data-theme='light'] .mobile-menu .nav-more__panel a:is(:link, :visited) { color: var(--text-muted) !important; } html[data-theme='light'] .mobile-menu .nav-more__panel a:hover, html[data-theme='light'] .mobile-menu .nav-more__panel a:focus-visible { color: var(--text-main) !important; } /* ── Analytics consent banner ── */ html[data-theme='light'] .csmbac-consent { background: color-mix(in srgb, var(--surface-elevated, #ffffff) 96%, transparent); border-top-color: var(--border); color: var(--text-main); box-shadow: 0 -8px 28px color-mix(in srgb, var(--text-main) 8%, transparent); } html[data-theme='light'] .csmbac-consent__copy { color: var(--text-muted); } html[data-theme='light'] .csmbac-consent__copy a { color: var(--link-uk, #4f46e5); } html[data-theme='light'] body.region-za .csmbac-consent__copy a { color: var(--link-za, #0d9488); } html[data-theme='light'] body.region-us .csmbac-consent__copy a { color: var(--link-us, #0284c7); } html[data-theme='light'] .csmbac-consent__btn { border-color: var(--border); background: var(--surface); color: var(--text-main); } html[data-theme='light'] .csmbac-consent__btn--accept { background: #0d9488; border-color: #0d9488; color: #ffffff; } html[data-theme='light'] .csmbac-consent__btn--reject { background: var(--surface-band); color: var(--text-main); } html[data-theme='light'] .csmbac-consent__btn:focus-visible { outline-color: color-mix(in srgb, var(--accent, #6366f1) 65%, transparent); } html[data-theme='light'] .csmbac-consent-manage { background: var(--surface-elevated); border-color: var(--border); color: var(--text-muted); } /* ── HORIZONEERING watermark (hero background) ── */ html[data-theme='light'] .hero-concept { background: linear-gradient( 90deg, color-mix(in srgb, #4535ff 24%, transparent) 0%, color-mix(in srgb, #0073e6 22%, transparent) 35%, color-mix(in srgb, #08cf8d 20%, transparent) 55%, color-mix(in srgb, #0073e6 24%, transparent) 75%, color-mix(in srgb, #4535ff 26%, transparent) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: none; opacity: var(--hz-opacity-revealed, 0.22); } html[data-theme='light'] .hero-concept.revealed { opacity: var(--hz-opacity-revealed, 0.28); } /* ── Hero copy: drop dark-theme text shadow on light bg ── */ html[data-theme='light'] header.hero p, html[data-theme='light'] .hero p { text-shadow: none; } /* ── Hero value-flow infographic (dark glass + backdrop-blur fails on light hero) ── */ html[data-theme='light'] .hero-value-flow { --hvf-cyan: #0891b2; --hvf-teal: #0d9488; --hvf-ink: var(--text-muted); --hvf-glass: var(--surface-elevated); --hvf-edge: var(--border); border-color: var(--border); background: radial-gradient(120% 140% at 50% -20%, color-mix(in srgb, #0891b2 10%, transparent), transparent 55%), var(--surface-elevated); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-card); } html[data-theme='light'] .hero-value-flow .hvf-kicker { color: color-mix(in srgb, #0891b2 85%, var(--text-main)); text-shadow: none; } html[data-theme='light'] .hero-value-flow .hvf-label, html[data-theme='light'] .hero-value-flow .hvf-beat-copy strong { color: var(--text-main); } html[data-theme='light'] .hero-value-flow .hvf-hint, html[data-theme='light'] .hero-value-flow .hvf-beat-copy { color: var(--text-muted); } html[data-theme='light'] .hero-value-flow .hvf-icon { color: var(--hvf-cyan); border-color: color-mix(in srgb, #0891b2 35%, var(--border)); background: radial-gradient(circle at 50% 28%, color-mix(in srgb, #0891b2 14%, transparent), transparent 68%), var(--surface-band); box-shadow: none; } html[data-theme='light'] .hero-value-flow .hvf-stage:nth-child(odd) .hvf-icon { color: var(--hvf-teal); border-color: color-mix(in srgb, #0d9488 35%, var(--border)); } html[data-theme='light'] .hero-value-flow .hvf-arrow { color: color-mix(in srgb, #0891b2 80%, var(--text-muted)); } html[data-theme='light'] .hero-value-flow .hvf-loop-arc { color: color-mix(in srgb, #0d9488 70%, var(--text-muted)); } html[data-theme='light'] .hero-value-flow .hvf-loop-label { border-color: color-mix(in srgb, #0d9488 28%, var(--border)); background: color-mix(in srgb, #0d9488 8%, var(--surface-band)); color: var(--text-main); } html[data-theme='light'] .hero-value-flow .hvf-beat { border-color: var(--border); background: var(--surface-band); box-shadow: none; } html[data-theme='light'] .hero-value-flow .hvf-meter { background: color-mix(in srgb, var(--text-main) 10%, transparent); } html[data-theme='light'] .hero-value-flow.is-live .hvf-icon { animation-name: hvfIconPulseLight; } @keyframes hvfIconPulseLight { 0%, 14%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #0891b2 0%, transparent); } 5% { box-shadow: 0 0 18px 2px color-mix(in srgb, #0891b2 28%, transparent); } } /* ── Package comparison body (hard-coded #e2e8f0 / #f1f5f9 on light rows) ── */ html[data-theme='light'] .package-comparison__lead { color: var(--text-muted); } html[data-theme='light'] .pkg-cmp-cell--text, html[data-theme='light'] .pkg-cmp-cell--elevated, html[data-theme='light'] .pkg-cmp-cell--peak, html[data-theme='light'] .pkg-cmp-cell--elevated .pkg-cmp-cell__value, html[data-theme='light'] .pkg-cmp-cell--peak .pkg-cmp-cell__value { color: var(--text-main); } html[data-theme='light'] .pkg-cmp-cell--peak { background: color-mix(in srgb, #6366f1 8%, var(--surface-band)); border: 1px solid color-mix(in srgb, #6366f1 14%, var(--border)); } html[data-theme='light'] .pkg-cmp-tier-badge { color: var(--link-uk); } html[data-theme='light'] body.region-za .pkg-cmp-tier-badge { color: var(--link-za); } html[data-theme='light'] body.region-us .pkg-cmp-tier-badge { color: var(--link-us); } html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--tier-peak { background: color-mix(in srgb, #6366f1 5%, var(--surface)) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, #6366f1 12%, var(--border)), inset -1px 0 0 color-mix(in srgb, #6366f1 12%, var(--border)); } html[data-theme='light'] .package-comparison__table thead th.pkg-cmp-col--tier-peak { background: linear-gradient( 180deg, color-mix(in srgb, #6366f1 12%, var(--surface-band)) 0%, var(--surface-band) 100% ); } html[data-theme='light'] .pkg-cmp-cell--yes-base .pkg-cmp-icon { color: #059669; } html[data-theme='light'] .pkg-cmp-cell--yes-elevated .pkg-cmp-icon { color: #047857; text-shadow: none; } html[data-theme='light'] .pkg-cmp-cell--yes-peak .pkg-cmp-icon { color: #065f46; text-shadow: none; } /* ── Authority / pricing cards (outer white cards + readable copy) ── */ html[data-theme='light'] .authority-card-name, html[data-theme='light'] .authority-card-invest { color: var(--text-main); } html[data-theme='light'] .authority-card-meta, html[data-theme='light'] .authority-card-tagline, html[data-theme='light'] .authority-card-benefits { color: var(--text-muted); } html[data-theme='light'] .authority-card:not(.authority-card--metal-copper):not(.authority-card--metal-silver):not(.authority-card--metal-gold):not(.authority-card--metal-black):not(.authority-card--metal-flagship) .authority-card-price { color: var(--text-main); } html[data-theme='light'] .pricing-card.selectable:not(.selected) { border-color: var(--border); box-shadow: var(--shadow-card); opacity: 1; filter: none; } html[data-theme='light'] .pricing-card:not(.selected):hover, html[data-theme='light'] .pricing-card:not(.selected):focus-visible, html[data-theme='light'] .pricing-card.selectable:not(.selected):hover, html[data-theme='light'] .pricing-card.selectable:not(.selected):focus-visible { background: var(--surface-hover); border-color: var(--border-hover); box-shadow: var(--shadow-elevated); color: var(--text-main); } html[data-theme='light'] .pricing-card.selectable.selected { color: var(--text-main); } html[data-theme='light'] .pricing-card h3, html[data-theme='light'] .pricing-card .price { color: var(--text-main); } html[data-theme='light'] .pricing-card .features, html[data-theme='light'] .pricing-card .features li { color: var(--text-muted); } /* ── Dark content blocks → token surfaces ── */ html[data-theme='light'] .how-it-works__panel { background: var(--surface-elevated); border-color: var(--border); box-shadow: var(--shadow-card); } html[data-theme='light'] .how-it-works__steps-wrap { background: var(--surface-band); border-color: var(--border); } html[data-theme='light'] .how-it-works__step { border-bottom-color: var(--border); } html[data-theme='light'] .how-it-works__step-text { color: var(--text-muted); } html[data-theme='light'] .how-it-works__step.is-ticked .how-it-works__step-text, html[data-theme='light'] .how-it-works__step:hover .how-it-works__step-text { color: var(--text-main); } html[data-theme='light'] .how-it-works__step-text::before { color: var(--link-uk); background: color-mix(in srgb, var(--link-uk) 10%, var(--surface-elevated)); border-color: color-mix(in srgb, var(--link-uk) 32%, var(--border)); } html[data-theme='light'] body.region-za .how-it-works__step-text::before { color: var(--link-za); background: color-mix(in srgb, var(--link-za) 10%, var(--surface-elevated)); border-color: color-mix(in srgb, var(--link-za) 32%, var(--border)); } html[data-theme='light'] body.region-us .how-it-works__step-text::before { color: var(--link-us); background: color-mix(in srgb, var(--link-us) 10%, var(--surface-elevated)); border-color: color-mix(in srgb, var(--link-us) 32%, var(--border)); } html[data-theme='light'] .silo-cta { border-color: var(--border); } html[data-theme='light'] .silo-cta strong { color: var(--text-main); } html[data-theme='light'] .silo-figure-grid { border-color: var(--border); background: var(--surface-band); } /* ── FAQ / progressive-disclosure accordions (closed + open) ── */ html[data-theme='light'] .pd-item, html[data-theme='light'] .pd-item.is-open { color: var(--text-main); background: var(--pd-item-bg), var(--surface-elevated); border-color: var(--border); box-shadow: var(--shadow-card); } html[data-theme='light'] .pd-item.is-open { background: color-mix(in srgb, var(--accent) 5%, var(--surface-elevated)); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); } html[data-theme='light'] .pd-item:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } html[data-theme='light'] .pd-panel, html[data-theme='light'] .pd-panel p, html[data-theme='light'] .pd-panel li, html[data-theme='light'] .pd-panel .section-header p { color: var(--text-muted); } html[data-theme='light'] .pd-panel h2, html[data-theme='light'] .pd-panel h3, html[data-theme='light'] .pd-panel h4, html[data-theme='light'] .pd-panel strong { color: var(--text-main); } html[data-theme='light'] .faq-item h3 { color: var(--text-main); } html[data-theme='light'] .faq-item p, html[data-theme='light'] .faq-item li { color: var(--text-muted); } html[data-theme='light'] .peace-of-mind-accordion > summary { color: var(--text-main); } html[data-theme='light'] .peace-of-mind-body { color: var(--text-muted); } /* ── Forms (enquiry + mailing list strips) ── */ html[data-theme='light'] .silo-cta-mailing-label { color: var(--text-muted); } html[data-theme='light'] .silo-cta-mailing-field input[type='text'], html[data-theme='light'] .silo-cta-mailing-field input[type='email'] { background: var(--surface-elevated); border-color: var(--border); color: var(--text-main); } html[data-theme='light'] .silo-cta-mailing-status { color: var(--text-muted); } html[data-theme='light'] .csmbac-enquiry__heading { color: var(--text-main); } html[data-theme='light'] .csmbac-enquiry__field input, html[data-theme='light'] .csmbac-enquiry__field textarea { background: var(--surface-elevated); border-color: var(--border); color: var(--text-main); } html[data-theme='light'] .csmbac-enquiry__privacy a, html[data-theme='light'] .csmbac-enquiry__mailto { color: var(--link-uk); } html[data-theme='light'] body.region-za .csmbac-enquiry__privacy a, html[data-theme='light'] body.region-za .csmbac-enquiry__mailto { color: var(--link-za); } html[data-theme='light'] body.region-us .csmbac-enquiry__privacy a, html[data-theme='light'] body.region-us .csmbac-enquiry__mailto { color: var(--link-us); } /* ── Footer logo mark ── */ html[data-theme='light'] .site-logo__image--footer, html[data-theme='light'] footer .footer-logo .site-logo__image { filter: brightness(0) saturate(100%); } /* ── Content-link hover (hard-coded #fff in shared CSS) ── */ html[data-theme='light'] .silo-main a.content-link:hover, html[data-theme='light'] .silo-main a.content-link:focus-visible, html[data-theme='light'] .guides-page a.content-link:hover, html[data-theme='light'] .guides-page a.content-link:focus-visible, html[data-theme='light'] .package-internal-links a:hover, html[data-theme='light'] .package-internal-links a:focus-visible { color: var(--text-main); background: color-mix(in srgb, var(--link-uk) 12%, var(--surface-elevated)); border-color: color-mix(in srgb, var(--link-uk) 28%, var(--border)); } /* ═══════════════════════════════════════════════════════════════════════════ Scribe-inspired light standardization (Aug 2026) Pink removal, flat CTAs, hover retokenize, hero text, carousel, ge-bg ═══════════════════════════════════════════════════════════════════════════ */ /* Subtle page background pattern (Scribe-style) */ html[data-theme='light'] body { background-image: radial-gradient(circle at 50% 0%, var(--glow) 0%, transparent 55%), radial-gradient(circle at 80% 20%, rgba(8, 207, 141, 0.03) 0%, transparent 40%), linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%); } /* ── Logo wordmark: flat indigo/teal, no pink shimmer ── */ html[data-theme='light'] nav a.logo .logo-copy .logo-word, html[data-theme='light'] body > nav a.logo .logo-copy .logo-word, html[data-theme='light'] .logo-word { background-image: var(--light-accent-gradient); background-size: 200% auto; animation: logoShiftLight 8s linear infinite; } @keyframes logoShiftLight { to { background-position: 200% center; } } /* ── Nav tagline + H1 emphasis: readable slate/blue/teal shimmer ── */ html[data-theme='light'] .nav-tagline__line, html[data-theme='light'] .hero-h1-emphasis { background-image: var(--light-shimmer-gradient); background-size: 280% 100%; } html[data-theme='light'] .nav-tagline__line.is-typing::after { background: var(--text-muted); } /* ── Hero lead bulge: white-on-white shimmer made text invisible ── */ html[data-theme='light'] header.hero > p.hero-lead-bulge.is-settled { color: var(--text-main); background-image: linear-gradient( 90deg, #475569 0%, #15142e 18%, #334155 36%, #15142e 54%, #475569 72%, #64748b 100% ); background-size: 240% 100%; -webkit-text-fill-color: transparent; color: transparent; } @media (prefers-reduced-motion: reduce) { html[data-theme='light'] header.hero > p.hero-lead-bulge.is-settled { color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main) !important; background: none !important; } } html[data-theme='light'] .hero-year { color: var(--text-muted); text-shadow: none; } /* Hero value-flow: ensure armed/live text stays visible on light panel */ html[data-theme='light'] .hero-value-flow.is-armed .hvf-stage, html[data-theme='light'] .hero-value-flow.is-armed .hvf-beat, html[data-theme='light'] .hero-value-flow.is-armed .hvf-loop-label { opacity: 0; } html[data-theme='light'] .hero-value-flow.is-live .hvf-stage, html[data-theme='light'] .hero-value-flow.is-live .hvf-beat, html[data-theme='light'] .hero-value-flow.is-live .hvf-loop-label { opacity: 1; color: var(--text-main); } /* ── Flat secondary CTAs (no pink glass gradient) ── */ html[data-theme='light'] .btn-pricing.secondary, html[data-theme='light'] a.btn-pricing.secondary:is(:link, :visited, :hover, :active, :focus-visible), html[data-theme='light'] .pricing-card a.btn-pricing.secondary:is(:link, :visited, :hover, :active, :focus-visible) { background: var(--surface-elevated); border: 1px solid var(--border); color: var(--text-main); box-shadow: var(--shadow-card); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme='light'] .btn-pricing.secondary:hover, html[data-theme='light'] .btn-pricing.secondary:focus-visible, html[data-theme='light'] a.btn-pricing.secondary:is(:link, :visited):hover, html[data-theme='light'] a.btn-pricing.secondary:is(:link, :visited):focus-visible { background: var(--surface-hover); border-color: var(--border-hover); color: var(--text-main); box-shadow: var(--shadow-elevated); } html[data-theme='light'] .btn-pricing.secondary::after, html[data-theme='light'] a.btn-pricing.secondary::after { display: none; } /* Tier-band / glass chip keywords (was pink→purple→indigo) */ html[data-theme='light'] .tier-head-pill, html[data-theme='light'] .package-tier-band__pill, html[data-theme='light'] .authority-tiers-head__pill { background: color-mix(in srgb, var(--accent) 10%, var(--surface-elevated)); border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); color: var(--text-main); text-shadow: none; box-shadow: var(--shadow-card); backdrop-filter: none; -webkit-backdrop-filter: none; } /* ── QR / carousel CTA: flat regional primary, no rainbow gradient ── */ html[data-theme='light'] .site-carousel__qr-cta, html[data-theme='light'] .page-order-qr__cta { background: var(--btn-primary-bg); background-size: auto; border: 1px solid color-mix(in srgb, var(--btn-primary-bg) 65%, var(--border)); color: var(--btn-primary-fg); text-shadow: none; box-shadow: var(--shadow-card); animation: none; backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme='light'] .site-carousel__qr-cta:hover, html[data-theme='light'] .page-order-qr__cta:hover, html[data-theme='light'] a.site-carousel__qr-cta-link:hover .site-carousel__qr-cta, html[data-theme='light'] a.page-order-qr__cta-link:hover .page-order-qr__cta { background: color-mix(in srgb, var(--btn-primary-bg) 88%, #000); color: var(--btn-primary-fg); text-shadow: none; box-shadow: var(--shadow-elevated); } /* ── QR panels: light frosted, not dark glass ── */ html[data-theme='light'] div.page-order-qr .page-order-qr__panel, html[data-theme='light'] .site-carousel__qr-panel { border-color: var(--border); background: var(--panel-bg); color: var(--text-main); box-shadow: var(--shadow-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-theme='light'] div.page-order-qr .page-order-qr__panel:hover, html[data-theme='light'] div.page-order-qr .page-order-qr__panel:focus-within, html[data-theme='light'] .site-carousel__qr-panel:hover, html[data-theme='light'] .site-carousel__qr-panel:focus-within { border-color: var(--border-hover); background: var(--panel-bg-hover); color: var(--text-main); box-shadow: var(--shadow-elevated); transform: translateY(-1px); } html[data-theme='light'] .site-carousel__qr-link:hover, html[data-theme='light'] .site-carousel__qr-link:focus-visible { color: var(--text-main); } /* ── Authority cards: lighter surfaces + light hovers ── */ html[data-theme='light'] .authority-card:not(.authority-card--metal-copper):not(.authority-card--metal-silver):not(.authority-card--metal-gold):not(.authority-card--metal-black):not(.authority-card--metal-flagship), html[data-theme='light'] .silo-main a.authority-card:not(.authority-card--metal-copper):not(.authority-card--metal-silver):not(.authority-card--metal-gold):not(.authority-card--metal-black):not(.authority-card--metal-flagship) { background: rgb(0 0 0 / 2%); border-color: var(--border); color: var(--text-main); box-shadow: var(--shadow-card); } html[data-theme='light'] .authority-card--metal-copper, html[data-theme='light'] .authority-card--metal-silver, html[data-theme='light'] .authority-card--metal-gold, html[data-theme='light'] .authority-card--metal-black, html[data-theme='light'] .authority-card--metal-flagship { background: rgb(0 0 0 / 2%); } html[data-theme='light'] .authority-card:hover, html[data-theme='light'] .authority-card:focus-visible, html[data-theme='light'] .silo-main a.authority-card:hover, html[data-theme='light'] .silo-main a.authority-card:focus-visible { background: var(--surface-hover); border-color: var(--border-hover); color: var(--text-main); box-shadow: var(--shadow-elevated); transform: translateY(-3px) scale(1.008); } html[data-theme='light'] .authority-card--metal-black .authority-card-price, html[data-theme='light'] .authority-card--metal-black .authority-card-icon-wrap { color: #4c4c4c; } html[data-theme='light'] .authority-tiers-grid.is-focusing .authority-card.is-selected { background: var(--surface-elevated); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-elevated); color: var(--text-main); } html[data-theme='light'] .authority-tiers-grid.is-focusing .authority-card.is-dimmed { opacity: 0.72; filter: none; } /* ── Growth engine SVG panel (rect.ge-bg) ── */ html[data-theme='light'] .ge-bg { fill: var(--surface-band); fill-opacity: 1; } /* ── Carousel: lighter stage, proper image fit ── */ html[data-theme='light'] .site-carousel { --carousel-pitch-ink: var(--text-main); --carousel-pitch-muted: var(--text-muted); --carousel-accent: var(--accent); } html[data-theme='light'] .site-carousel__stage { background: var(--surface-band); border-color: var(--border); box-shadow: var(--shadow-card); } html[data-theme='light'] .site-carousel__stage:focus-visible { outline-color: color-mix(in srgb, var(--accent) 55%, transparent); } html[data-theme='light'] .site-carousel__slide img { object-fit: cover; object-position: center center; } html[data-theme='light'] .site-carousel__pitch-track, html[data-theme='light'] .site-carousel__promo { border-color: var(--border); background: var(--panel-bg); box-shadow: var(--shadow-card); } html[data-theme='light'] .site-carousel__nav-btn { border-color: var(--border); background: var(--surface-elevated); color: var(--text-main); box-shadow: var(--shadow-card); } html[data-theme='light'] .site-carousel__nav-btn:hover, html[data-theme='light'] .site-carousel__nav-btn:focus-visible { background: var(--surface-hover); border-color: var(--border-hover); color: var(--text-main); } /* ── Package comparison table hovers (was dark rgba fills) ── */ @media (hover: hover) { html[data-theme='light'] .package-comparison__table tbody th.pkg-cmp-feature:hover, html[data-theme='light'] .package-comparison__table tbody th.pkg-cmp-feature:focus-within { background: var(--surface-hover) !important; box-shadow: inset 0 0 0 1px var(--border-hover); } html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--premium-authority:hover, html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--premium-authority:focus-within { background: color-mix(in srgb, #d4a574 10%, var(--surface)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #d4a574 28%, var(--border)); } html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--authority-plus:hover, html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--authority-plus:focus-within { background: color-mix(in srgb, #94a3b8 10%, var(--surface)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #94a3b8 28%, var(--border)); } html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--authority-pro:hover, html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--authority-pro:focus-within { background: color-mix(in srgb, #fbbf24 10%, var(--surface)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fbbf24 30%, var(--border)); } html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--enterprise-authority:hover, html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--enterprise-authority:focus-within { background: color-mix(in srgb, #475569 8%, var(--surface)) !important; box-shadow: inset 0 0 0 1px var(--border-hover); } html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--authority-battleship-seo:hover, html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--authority-battleship-seo:focus-within { background: color-mix(in srgb, var(--link-uk) 8%, var(--surface)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link-uk) 24%, var(--border)); } } html[data-theme='light'] .package-comparison__table tbody td.pkg-cmp-col--enterprise-authority:active { background: color-mix(in srgb, #475569 8%, var(--surface)) !important; } html[data-theme='light'] .package-comparison__table tbody th.pkg-cmp-feature:active { background: var(--surface-hover) !important; } html[data-theme='light'] .package-comparison__table thead th.pkg-cmp-col:hover .pkg-cmp-tier-icon-wrap { background: var(--surface-hover); border-color: var(--border-hover); } /* ── Pill / footer / content-link hovers ── */ html[data-theme='light'] .footer-pill:hover, html[data-theme='light'] .footer-pill:focus-visible, html[data-theme='light'] .footer-nav a:hover, html[data-theme='light'] footer a:not(.footer-pill):hover { color: var(--text-main); background: var(--pill-hover-bg); } html[data-theme='light'] body.region-uk .silo-main a.content-link:is(:link, :visited), html[data-theme='light'] body.region-za .silo-main a.content-link:is(:link, :visited), html[data-theme='light'] body.region-us .silo-main a.content-link:is(:link, :visited) { color: var(--content-link-text); background: var(--content-link-bg); border-color: var(--content-link-border); } html[data-theme='light'] body.region-uk .silo-main a.content-link:hover, html[data-theme='light'] body.region-za .silo-main a.content-link:hover, html[data-theme='light'] body.region-us .silo-main a.content-link:hover { color: var(--text-main); background: var(--surface-hover); border-color: var(--border-hover); } html[data-theme='light'] .site-carousel__pain-pill:hover, html[data-theme='light'] .site-carousel__pitch-link:hover, html[data-theme='light'] .site-carousel__promo-link:hover { background: var(--pill-hover-bg); border-color: var(--pill-hover-border); color: var(--text-main); } /* ── Pricing card hover (was dark surface) ── */ html[data-theme='light'] .pricing-card:hover, html[data-theme='light'] .pricing-card:focus-visible { background: var(--surface-hover); color: var(--text-main); } /* ── Step cards / panels with dark inset bg ── */ html[data-theme='light'] .step-card { background: var(--surface-elevated); border-color: var(--border); } html[data-theme='light'] .step-card:hover { border-color: var(--border-hover); background: var(--surface-hover); } html[data-theme='light'] .growth-engine__panel, html[data-theme='light'] .growth-engine__example { background: var(--surface-elevated); border-color: var(--border); } html[data-theme='light'] .growth-engine__flow-visual { background: var(--surface-band); border-color: var(--border); }