/* ══════════════════════════════════════════════════════════════════════════ KICC · CALM SURFACE LAYER — loaded last, scoped to beat the sheets it fixes Four reported defects, four blocks below: 1 film present but quiet (no shouting plate behind the words) 2 every word on a guaranteed-contrast ground 3 nav stays CATEGORISED on ONE row (5 groups, not 50 pills) 4 density — a county catalogue: ~10+ cards above the fold Specificity debt is documented inline: the rules that used to win were `html[data-kicc-motion-engine] body:not(.admin-shell) #nav …` and `body:not(.admin-shell) #app :is(.grid.g4)`; overrides here carry the same or a heavier prefix so they win on cascade order AND specificity, without `!important` sprawl beyond the properties being corrected. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* Film is served at its published brightness: no veil, no filter. */ --calm-veil:none; --calm-ink:#F7F4EE; --calm-ink-dim:#CFC9BE; --calm-panel:#0E1114; --calm-film-opacity:1; --calm-film-filter:none; } /* ── 1 · FILM: full brightness ───────────────────────────────────────────── The site-wide dimming that used to live here is gone — a .66 opacity, a brightness(.54) saturate(.68) filter, and an rgba(6,7,8,.86→.95) veil were stacked on every background film at once, which is why a published clip read at roughly a fifth of its real brightness. Background video now plays exactly as shot. Geometry of the film layer still belongs to the component: never set `position:relative` on [data-kicc-scene-bg] — that pulls the fixed scene background into flow and pushes every page ~900px down (the over-scroll). */ body:not(.admin-shell) #app .kicc-scene-bg > video, body:not(.admin-shell) #app .expo-video__asset > video, body:not(.admin-shell) #app .hero-video > video, body:not(.admin-shell) #app .ed-bleed > video{ opacity:var(--calm-film-opacity) !important; filter:var(--calm-film-filter) !important; } /* No veil is painted over film. The ::after scrims owned by kicc-responsive-motion.css (.kicc-scene-bg) and expo-video.css (.expo-video__asset) keep their own original gradients — those are the component's tonal hand-off, not the dimming layer removed above. */ :is(.expo-video,.hero,.ed-plate,.kicc-scene-bg){background-color:#0A0B0C} /* ── 2 · WORDS: contrast is not negotiable ───────────────────────────────── Headers rendered cream (#FFF8EF) on beige: ~1.1:1. A page header is now a dark plate in both themes, so the label survives whatever film is behind. */ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head){ background:var(--calm-panel) !important; border-bottom:1px solid rgba(255,255,255,.10) !important; border-radius:0 0 16px 16px; -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); } html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) :is(h1,h2,h3,.eyebrow){ color:var(--calm-ink) !important; -webkit-text-fill-color:var(--calm-ink) !important; text-shadow:0 1px 2px rgba(0,0,0,.85) !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) :is(p,.muted,.muted-xs,small,span.muted){ color:var(--calm-ink-dim) !important; -webkit-text-fill-color:var(--calm-ink-dim) !important; opacity:1 !important; } /* Hero copy over a moving plate: backing plate + shadow. */ :is(.expo-video__title,.expo-video__eyebrow,.expo-video__text, .hero h1,.ed-chapter h1,.ed-chapter h2,.sx-hero h1,.uc-header h1){ text-shadow:0 1px 2px rgba(0,0,0,.92), 0 8px 30px rgba(0,0,0,.72) !important; } .expo-video__content{ background:radial-gradient(120% 130% at 50% 100%, rgba(4,5,6,.80) 0%, rgba(4,5,6,.34) 58%, transparent 100%) !important; border-radius:20px; } .expo-video__text{color:rgba(255,255,255,.93) !important;-webkit-text-fill-color:rgba(255,255,255,.93) !important} @media (prefers-reduced-motion: reduce){ :root{--calm-film-opacity:1;--calm-film-filter:none} .expo-video__film,:is(.hero-video,.ed-bleed) > video{animation:none !important} } /* ── 3 · NAVIGATION: one row, five groups ────────────────────────────────── Measured before: nav 180px tall, `.nav-inner` a 2-row grid, five page links rendered as 44px glass pills at rgba(20,24,28,.88), six CTAs, two of them identical gold buttons. The offender is `html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-inner{display:grid}` (motion css :81) and `html[data-kicc-motion-engine] #nav .nav-links a{…pill…}` (:83). These overrides repeat that prefix, so they win on order and weight. */ html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-inner{ display:flex !important; grid-template-columns:none !important; grid-template-areas:none !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; padding:7px 0 !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-inner > .logo{grid-area:auto;flex:0 0 auto;min-width:0} html[data-kicc-motion-engine] body:not(.admin-shell) #nav .logo small{display:block;font-size:9.5px;letter-spacing:.14em} html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links, html[data-kicc-motion-engine] body:not(.admin-shell) #nav #navLinks{ grid-area:auto !important; flex:1 1 auto !important; min-width:0; display:flex !important; flex-wrap:nowrap !important; justify-content:center !important; align-items:center; gap:2px !important; padding:0 !important; overflow:visible !important; white-space:nowrap; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta{ grid-area:auto !important; flex:0 0 auto !important; display:flex !important; flex-wrap:nowrap !important; align-items:center; gap:6px !important; } /* Two identical gold buttons read as clutter; Marketplace and Quick Book are both reachable from the top-level links and the hero CTAs. */ html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta .btn.gold.sm[href="/marketplace"], html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta .hide-m{display:none !important} /* Page links: text, not pills. The glass pill treatment is what made thirteen routes look like fifty unrelated tabs. */ html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links > a, html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop > a{ min-height:0 !important;min-width:0 !important; height:auto !important; padding:7px 11px !important; border:0 !important; border-radius:9px !important; background:transparent !important; box-shadow:none !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; color:#E8E3DA !important;-webkit-text-fill-color:#E8E3DA !important; font-size:13px !important;font-weight:500 !important;line-height:1.2 !important; display:inline-flex !important;align-items:center;gap:5px; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links > a:hover, html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop > a:hover, html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop.menu-open > a{ color:#FFCD05 !important;-webkit-text-fill-color:#FFCD05 !important; background:rgba(255,205,5,.09) !important; } /* `aria-current` was a salmon pill (#f4b5a6); a gold rule is enough. */ html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links a[aria-current="page"]{ background:transparent !important;border:0 !important; color:#FFCD05 !important;-webkit-text-fill-color:#FFCD05 !important; font-weight:700 !important;box-shadow:inset 0 -2px 0 #FFCD05 !important; } /* Caret and panel geometry copied from the component definition in reference-production.html:245 (11px/.6, top +8px, 216px, r16, z1200). A first draft used 9px/+10px/236px/z800 — the lower z-index put the panel beneath `.nav`'s own layer and it never painted. */ html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-caret{ font-size:11px !important;opacity:.6 !important;margin-left:2px !important; color:inherit !important;-webkit-text-fill-color:inherit !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop{position:relative !important} html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop-menu{ position:absolute !important; top:calc(100% + 8px) !important;left:0 !important; min-width:216px !important;max-height:min(70vh,520px); overflow-y:auto;overscroll-behavior:contain; padding:8px !important;border-radius:16px !important; background:rgba(14,17,20,.97) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 18px 40px rgba(0,0,0,.42) !important; -webkit-backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2); opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none; transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:1200; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop:hover > .nav-drop-menu, html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop:focus-within > .nav-drop-menu, html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop.menu-open > .nav-drop-menu{ opacity:1 !important;visibility:visible !important;transform:none !important; pointer-events:auto !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop-menu a{ display:block !important;padding:10px 14px !important;border-radius:12px !important; font-size:13.5px !important;font-weight:500 !important; color:#C9C3B8 !important;-webkit-text-fill-color:#C9C3B8 !important; white-space:nowrap;text-decoration:none; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop-menu a:hover, html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop-menu a:focus-visible{ color:#FFCD05 !important;-webkit-text-fill-color:#FFCD05 !important; background:rgba(255,205,5,.10) !important; } @media (max-width:1320px){ html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links > a, html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-drop > a{ padding:6px 8px !important;font-size:12.5px !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav .logo small{display:none !important} } @media (max-width:1040px){ /* Measured at 430px before this line existed: `.nav-links` still flex, 50px wide holding 353px of content, colliding with the CTA row. Cause: the one-row rule above ends with `#nav #navLinks` (two ids) while the hide rule carried one id, so the hide rule lost on specificity no matter where it sat. The hide rule repeats the id selector now. */ html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-links, html[data-kicc-motion-engine] body:not(.admin-shell) #nav #navLinks{display:none !important} html[data-kicc-motion-engine] body:not(.admin-shell) #nav .burger{display:block !important} } /* ── 4 · DENSITY: same content, half the scroll ──────────────────────────── */ body:not(.admin-shell) #app .section{padding:40px 0 !important} body:not(.admin-shell) #app .section-sm{padding:20px 0 !important} body:not(.admin-shell) #app .ed-chapter:not(#chapter-top){min-height:0;padding-block:clamp(22px,2.6vw,42px) !important} body:not(.admin-shell) #app .crumb{padding:6px 0 !important;font-size:11px !important} .wrap{max-width:1480px} /* A page title is informational, not a hero: the site-wide `#app h1:clamp(2.1rem,5.2vw,6.5rem)` rendered 83px of type and ate a third of the viewport before a single county appeared. */ html[data-kicc-motion-engine][data-kicc-immersive] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) h1{ font-size:clamp(1.5rem,2.2vw,1.95rem) !important; line-height:1.16 !important; margin:4px 0 0 !important; max-width:38ch; } /* Fraunces 300 at -0.022em tracks words into each other: "Explore all" painted as "Exploreall". Reset tracking and restore the word gap on the display face used by every page header. */ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) :is(h1,h2){ letter-spacing:0 !important; word-spacing:.08em !important; font-weight:500 !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) p{ margin-top:6px !important;font-size:.9rem !important;line-height:1.5 !important;max-width:82ch; } html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head){ padding:18px 22px 14px !important; } /* The page header also carried two stacked rows of filter chrome (a 112px `.between` block plus a 44px `.wrapflex`), which is what kept the first county row below 600px. Same controls, one compact line each. */ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) :is(.between,.wrapflex){ margin-top:10px !important;gap:8px !important;flex-wrap:wrap; } html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) :is(.between,.wrapflex) > *{min-width:0} html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) :is(.pill,.chip,[data-cregion],.mkt-chip){ min-height:0 !important; padding:5px 11px !important; font-size:12px !important;line-height:1.4 !important; border-radius:999px !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) :is(input,select){ min-height:38px !important;padding:7px 11px !important;font-size:13px !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) .eyebrow{ font-size:10.5px !important;letter-spacing:.14em !important; } /* ── 2b · two defects this pass surfaced, both visible in the screenshots ─── (a) the site-wide `#app h1` rule carries letter-spacing -0.038em, which at 31px crushes the inter-word space: the title rendered "Exploreall 47counties". Reset tracking on header titles. (b) /marketplace wraps the ENTIRE product grid inside `
`, so the dark plate painted a 2,425px tall black slab behind 15 product cards. The plate belongs to the inner
only. */ html[data-kicc-motion-engine][data-kicc-immersive] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) h1, body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) h1{ letter-spacing:-.01em !important; word-spacing:.06em !important; font-variation-settings:normal !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app .wrap.page-head.mkt-head{ background:transparent !important; border-bottom:0 !important; border-radius:0 !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; padding:0 0 20px !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app .wrap.page-head.mkt-head > header{ background:var(--calm-panel) !important; border-bottom:1px solid rgba(255,255,255,.10) !important; border-radius:0 0 16px 16px; padding:18px 22px 14px !important; margin-bottom:14px !important; color:var(--calm-ink) !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app .wrap.page-head.mkt-head > header :is(h1,.eyebrow){ color:var(--calm-ink) !important;-webkit-text-fill-color:var(--calm-ink) !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app .wrap.page-head.mkt-head > header p{ color:var(--calm-ink-dim) !important;-webkit-text-fill-color:var(--calm-ink-dim) !important;opacity:1 !important; } /* (c) the public cart entry point is injected as a sibling of `.nav-inner`, not inside `.nav-cta`, so it floated over the page header as a 119px capsule at y=73. It joins the action row instead. */ html[data-kicc-motion-engine] body:not(.admin-shell) #nav > .kicc-cart-link{ position:static !important; flex:0 0 auto; align-self:center; margin:0 8px 0 0 !important; padding:6px 12px !important; min-height:34px !important; font-size:12.5px !important; border-radius:999px !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav{display:flex;align-items:center;gap:8px} html[data-kicc-motion-engine] body:not(.admin-shell) #nav > .nav-inner{flex:1 1 auto;min-width:0} /* Counties: a catalogue. 7 across on desktop, 2 on a phone, 10+ above fold. Beats `body:not(.admin-shell) #app :is(.grid.g4)` (auto-fit 280px → 5 cols) and the county-layout auto-fit sheet. */ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-strip,#countyFull.view-grid){ display:grid !important; gap:10px !important; align-items:stretch; grid-template-columns:repeat(7,minmax(0,1fr)) !important; } @media (max-width:1560px){ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-strip,#countyFull.view-grid){grid-template-columns:repeat(6,minmax(0,1fr)) !important} } @media (max-width:1280px){ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-strip,#countyFull.view-grid){grid-template-columns:repeat(5,minmax(0,1fr)) !important} } @media (max-width:1040px){ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-strip,#countyFull.view-grid){grid-template-columns:repeat(4,minmax(0,1fr)) !important} } @media (max-width:800px){ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-strip,#countyFull.view-grid){grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important} } @media (max-width:560px){ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-strip,#countyFull.view-grid){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important} } html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-layout-card{border-radius:12px !important;overflow:hidden} html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-layout-card :is(.tile-ratio,.tile-media){ aspect-ratio:16/10 !important;height:auto !important;min-height:0 !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-layout-card .tile-body{padding:9px 10px 10px !important} html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-layout-card .tile-body h2{ font-size:.95rem !important;line-height:1.2 !important;margin:4px 0 3px !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-code{font-size:9px !important;letter-spacing:.08em !important} html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-description{ font-size:10.5px !important;line-height:1.36 !important; -webkit-line-clamp:2 !important;line-clamp:2 !important; min-height:0 !important;margin-bottom:4px !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .badge{font-size:9px !important;padding:1px 6px !important;line-height:1.5 !important} html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .muted-xs{font-size:9.5px !important;margin-top:2px !important} html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-links{margin-top:4px !important;gap:6px !important} html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-links a{ min-height:0 !important;font-size:10px !important;padding:1px 0 !important; } /* ── 3b · MOBILE: the bar must not turn into a pile ─────────────────────── At 430px the action row still carried Quick Book (140px), Admin (58px) and the cart (113px) beside a 44px burger, and the row started at x=94 — on top of the logo. The component sheet re-shows gold buttons with `html[data-kicc-motion-engine] #nav .nav-cta>.btn.gold{display:inline-flex!important}` (motion css :96), which is why the max-600px hide at :70 never took effect. One primary action + cart + burger is the whole bar on a phone. */ @media (max-width:820px){ html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta > .btn.gold, html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta > .btn.ghost, html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta > form{display:none !important} html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-inner{padding:6px 0 !important;gap:8px !important} html[data-kicc-motion-engine] body:not(.admin-shell) #nav .logo small{display:none !important} html[data-kicc-motion-engine] body:not(.admin-shell) #nav .logo{font-size:15px !important;gap:7px !important} html[data-kicc-motion-engine] body:not(.admin-shell) #nav .logo .mark{width:30px !important;height:30px !important} /* keep exactly one call to action, plus the cart and the menu */ html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta > .btn.gold.sm[data-nav="/plan"]{display:inline-flex !important} html[data-kicc-motion-engine] body:not(.admin-shell) #nav .nav-cta > .btn.gold.sm[data-nav="/plan"]{ font-size:11px !important;padding:8px 11px !important;min-height:0 !important;border-radius:999px !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav > .kicc-cart-link{ padding:5px 9px !important;font-size:11px !important;min-height:30px !important;margin:0 6px 0 0 !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #nav .burger{min-width:36px !important;min-height:34px !important;width:36px;height:34px} /* the region pills were 9 items in a 430px row: the last five were clipped and unreachable. A scroll rail keeps every region selectable. */ html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) .wrapflex{ flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px; } html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) .wrapflex::-webkit-scrollbar{display:none} html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) :is(.pill,.chip,[data-cregion]){flex:0 0 auto !important} body:not(.admin-shell) #app :is(.wrap.page-head,.wrap.mkt-head) h1{font-size:1.5rem !important} } /* Every other catalogue grid follows the same rhythm. */ body:not(.admin-shell) #app :is(.hierarchy-grid,.ven-grid,.inst-grid,#venueGrid,#instGrid,.market-grid,.prod-grid,.sector-grid){ gap:14px !important; grid-template-columns:repeat(auto-fill, minmax(212px, 1fr)) !important; } body:not(.admin-shell) #app table.tbl :is(th,td){padding:8px 10px !important;line-height:1.35} body:not(.admin-shell) #app .glass-card.pad{padding:16px !important} @media (max-width:700px){ body:not(.admin-shell) #app .section{padding:26px 0 !important} body:not(.admin-shell) #app .section-sm{padding:16px 0 !important} .wrap{max-width:100%} } /* ── 5 · MARKETPLACE CARD SURFACE ───────────────────────────────────────── Measured on the live page: cards carried only rgba(0,0,0,.1) of border on a transparent body, so below the header plate the card copy rendered dark-on- light at ~1.4:1 and rows where an image failed left an empty 240px hole that read as broken layout. Cards are now a solid plate, in both themes, with the action row pinned to the bottom so every card in a row is the same height. */ body:not(.admin-shell) #app .mkt-grid{ align-items:stretch !important; grid-auto-rows:1fr; } body:not(.admin-shell) #app .mkt-card{ background:var(--calm-panel,#0E1114) !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:16px !important; box-shadow:0 10px 26px -18px rgba(0,0,0,.7); color:var(--calm-ink,#F7F4EE) !important; min-height:100%; } body:not(.admin-shell) #app .mkt-card > img{ width:100% !important;aspect-ratio:16/10 !important;object-fit:cover !important; background:#0A0B0C;border-bottom:1px solid rgba(255,255,255,.08); } body:not(.admin-shell) #app .mkt-card h2, body:not(.admin-shell) #app .mkt-card h2 a{ color:var(--calm-ink,#F7F4EE) !important;-webkit-text-fill-color:var(--calm-ink,#F7F4EE) !important; font-family:var(--font-ui,inherit);font-weight:600 !important;letter-spacing:0 !important; font-size:.98rem !important;line-height:1.32 !important; } body:not(.admin-shell) #app .mkt-card p{color:var(--calm-ink-dim,#CFC9BE) !important;-webkit-text-fill-color:var(--calm-ink-dim,#CFC9BE) !important;opacity:1 !important} body:not(.admin-shell) #app .mkt-card p:nth-of-type(2){ color:#FFD24D !important;-webkit-text-fill-color:#FFD24D !important;font-weight:700 !important; } body:not(.admin-shell) #app .mkt-card > div > div{margin-top:auto !important;flex-wrap:wrap} body:not(.admin-shell) #app .mkt-card .btn{ min-height:36px !important;font-size:11.5px !important;padding:8px 13px !important; border-radius:10px !important;white-space:nowrap; } body:not(.admin-shell) #app .mkt-card .btn.ghost{ background:rgba(255,255,255,.10) !important;color:#F7F4EE !important; -webkit-text-fill-color:#F7F4EE !important;border:1px solid rgba(255,255,255,.18) !important; } body:not(.admin-shell) #app .mkt-card .btn.ghost:hover{background:rgba(255,255,255,.18) !important} body:not(.admin-shell) #app .mkt-card .btn.gold{ background:linear-gradient(135deg,#FFE066,#FFCD05) !important;color:#14110C !important; -webkit-text-fill-color:#14110C !important;border:1px solid #FFCD05 !important;font-weight:700 !important; } /* ── 5 · WORDS ON GLASS: the last dark-on-dark ───────────────────────────── Measured this pass on /counties: `.county-code` (KE-001) and `.badge.green` (County film) render `rgb(11,11,11)` — the LIGHT theme's ink — inside a `.tile-body` whose glass panel is `rgba(20,24,28,.82)`. That is 1.1:1: present in the DOM, invisible on screen. The panel decides the ink, so the panel's own children stop inheriting theme ink. /chapter-rail measured 1.78:1 (`--text-muted` at 40% over film). */ html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-layout-card :is(.tile-body,.tile-ratio){ color:var(--calm-ink) !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-layout-card :is(.county-code,.county-description,.muted-xs,.wrapflex small){ color:var(--calm-ink-dim) !important; -webkit-text-fill-color:var(--calm-ink-dim) !important; opacity:1 !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-layout-card .county-code{ background:rgba(255,255,255,.10) !important; border-radius:6px;padding:1px 5px; } html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-layout-card .badge{ color:var(--calm-ink) !important; -webkit-text-fill-color:var(--calm-ink) !important; background:rgba(255,255,255,.14) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) !important; opacity:1 !important; } html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .county-layout-card .county-links a{ color:var(--calm-ink) !important; -webkit-text-fill-color:var(--calm-ink) !important; } /* Chapter rail sits over moving film with no plate of its own. */ html[data-kicc-motion-engine] body:not(.admin-shell) .chapter-rail a, html[data-kicc-motion-engine] body:not(.admin-shell) .chapter-rail a :is(i,span){ color:rgba(247,244,238,.78) !important; -webkit-text-fill-color:rgba(247,244,238,.78) !important; text-shadow:0 1px 3px rgba(0,0,0,.9); } html[data-kicc-motion-engine] body:not(.admin-shell) .chapter-rail a.on, html[data-kicc-motion-engine] body:not(.admin-shell) .chapter-rail a:hover{ color:#FFCD05 !important; -webkit-text-fill-color:#FFCD05 !important; } /* ── 6 · BOOKING CTAs: a class that actually resolves ────────────────────── The exhibition/booking blades are rendered by `layouts.app`, which pulls Tailwind from the Play CDN (`cdn.tailwindcss.com`). The CDN never receives `tailwind.config.js`, so palette utilities like `bg-kicc-gold` compile to NOTHING — measured live: "Book Your Booth" and "Buy Tickets" painted no background at all (transparent plate, #0B0B0B ink on white). The remaining primary CTAs hard-coded `bg-[#B3261E]`, the flat brick red the rest of the site retired, with `text-gray-900` ink on a dark red plate (2.3:1). `.exh-cta-gold` is plain CSS in a sheet every experience page already loads, so it cannot be tree-shaken away: gold plate, dark ink, 11.5:1. */ .exh-cta-gold{ background:linear-gradient(135deg,#FFE066,#FFCD05) !important; color:#14110C !important; -webkit-text-fill-color:#14110C !important; border:1px solid #FFCD05 !important; font-weight:700 !important; box-shadow:0 10px 24px -16px rgba(0,0,0,.75); } .exh-cta-gold:hover{background:linear-gradient(135deg,#FFE87F,#FFD633) !important;border-color:#FFE066 !important} .exh-cta-gold:active{transform:scale(.985)} .exh-cta-gold:focus-visible{outline:2px solid #14110C;outline-offset:2px} /* ─────────────────────────────────────────────────────────────────────────── KICC palette utilities — static fallback layer. `resources/views/layouts/app.blade.php` loads the Tailwind Play CDN, which NEVER receives tailwind.config.js, so `bg-kicc-gold` / `text-kicc-gold` / `ring-kicc-gold` and every opacity + state variant compiled to NOTHING. Measured before this layer: 237 occurrences of 22 distinct kicc-* tokens across 30 non-admin Blade views resolved to no declarations at all. These are plain CSS, in the last stylesheet every experience page loads, so they cannot be tree-shaken or lost when the CDN is slow/blocked. Brand values: gold #FFCD05 (tailwind.config.js:17), red #901C1E (:15). ─────────────────────────────────────────────────────────────────────────── */ .bg-kicc-gold{background-color:#FFCD05} .bg-kicc-gold\/5{background-color:rgba(255,205,5,.05)} .bg-kicc-gold\/10{background-color:rgba(255,205,5,.10)} .bg-kicc-gold\/15{background-color:rgba(255,205,5,.15)} .bg-kicc-gold\/20{background-color:rgba(255,205,5,.20)} .text-kicc-gold{color:#FFCD05} .text-kicc-red{color:#901C1E} .border-kicc-gold{border-color:#FFCD05} .border-kicc-gold\/30{border-color:rgba(255,205,5,.30)} .border-kicc-gold\/40{border-color:rgba(255,205,5,.40)} .border-kicc-gold\/50{border-color:rgba(255,205,5,.50)} .border-kicc-gold\/60{border-color:rgba(255,205,5,.60)} .ring-kicc-gold{--tw-ring-color:#FFCD05} .ring-kicc-gold\/60{--tw-ring-color:rgba(255,205,5,.60)} .from-kicc-gold{--tw-gradient-from:#FFCD05 var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,205,5,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)} .hover\:bg-kicc-gold:hover{background-color:#FFCD05} .hover\:bg-kicc-gold\/10:hover{background-color:rgba(255,205,5,.10)} .hover\:text-kicc-gold:hover{color:#FFCD05} .hover\:text-kicc-red:hover{color:#901C1E} .hover\:border-kicc-gold:hover{border-color:#FFCD05} .hover\:border-kicc-gold\/30:hover{border-color:rgba(255,205,5,.30)} .hover\:border-kicc-gold\/40:hover{border-color:rgba(255,205,5,.40)} .hover\:border-kicc-gold\/50:hover{border-color:rgba(255,205,5,.50)} .focus\:border-kicc-gold:focus{border-color:#FFCD05} .focus\:border-kicc-gold\/60:focus{border-color:rgba(255,205,5,.60)} .focus\:ring-kicc-gold:focus{--tw-ring-color:#FFCD05} .focus\:ring-kicc-gold\/60:focus{--tw-ring-color:rgba(255,205,5,.60)} .group:hover .group-hover\:text-kicc-gold{color:#FFCD05} /* Color only, exactly like real Tailwind: `border-kicc-gold` sets border-color and never a width, so an element that also carries `border-b-2` / `border-4` keeps its own width. Adding a width here would silently flatten it. */ /* ══════════════════════════════════════════════════════════════════════════ GHOST LAYER — 2026-10-27 · one control, isolated planes, no stuck snapshot Measured before this block (live kicctest.org, 1440×900): · 6 × [data-kicc-film-controls] in the DOM, 2 of them inside the viewport at the same scroll offset → the stacked "Pause films" pills. · getComputedStyle(.footer).backgroundColor = rgb(16, 58, 52) — the green slab, from county-images-footer…css (now re-pointed at the theme). · document.startViewTransition existed, swap() ran mutate() unguarded and only released its guard on a 1.5 s timer; a blocked main thread left ::view-transition-old(root) painted over the live DOM. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · ONE DOCK ───────────────────────────────────────────────────────── The JS now builds a single #kicc-film-dock and never one per chapter. Any legacy .kicc-film-controls that an older build injected is retired, so a cached HTML shell cannot bring the stack back. */ body:not(.admin-shell) :is(.kicc-film-controls,#kicc-film-dock){-webkit-tap-highlight-color:transparent} body:not(.admin-shell) .kicc-film-controls{display:none !important} #kicc-film-dock{ position:fixed; right:max(14px, env(safe-area-inset-right)); bottom:max(14px, calc(env(safe-area-inset-bottom) + 10px)); z-index:900; display:flex; align-items:center; gap:10px; max-width:min(92vw, 30rem); padding:8px 8px 8px 14px; border:1px solid rgba(255,248,239,.28); border-radius:999px; background:rgba(12,16,20,.82); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10); isolation:isolate; contain:layout paint style; /* transform-only promotion: the dock never triggers layout when it moves */ transform:translateZ(0); transition:opacity .18s ease; } #kicc-film-dock[hidden]{display:none !important} #kicc-film-dock>[data-kicc-film-label]{ font:500 12px/1.4 var(--font-mono, ui-monospace, monospace); letter-spacing:.02em; color:#F7F4EE; max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #kicc-film-dock>[data-kicc-film-button]{flex:0 0 auto} @media (max-width:600px){ #kicc-film-dock{ left:max(10px, env(safe-area-inset-left)); right:auto; bottom:max(10px, calc(env(safe-area-inset-bottom) + 6px)); max-width:calc(100vw - 20px); padding:6px 6px 6px 12px; gap:8px; } #kicc-film-dock>[data-kicc-film-label]{max-width:11ch;font-size:11px} } /* ── 2 · COMPOSITING ISOLATION ──────────────────────────────────────────── The film plane and the reading plane are separated so the compositor can never reuse a film frame buffer for a text plane (the offset double vision on headings). Film: its own layer, clipped, never repainted by text. */ body:not(.admin-shell) #app .kicc-scene-bg, body:not(.admin-shell) #app .expo-video__asset, body:not(.admin-shell) #app .hero-video{ isolation:isolate; contain:paint; will-change:auto; /* static layer: no per-scroll geometry */ } body:not(.admin-shell) #app .kicc-scene-bg>video{ /* one promotion for the whole film, decided in CSS, not per scroll frame */ transform:translateZ(0) scale(1.035); backface-visibility:hidden; } /* Reading planes are flat and isolated: no inherited perspective, no 3D. */ body:not(.admin-shell) #app :is(.ed-layer,.tm-head,.page-head,.wrap.page-head,.mkt-head,.ed-handoff){ position:relative; z-index:2; isolation:isolate; transform-style:flat; backface-visibility:hidden; } /* A promoted plane per .section was the smear source: keep will-change on the bands that actually animate (chapters/interludes), release it everywhere else so a long route cannot exhaust the compositor's layer budget. */ html.m4d [data-depth]:not(.ed-chapter):not(.ed-interlude){will-change:auto} html.m4d :is(.ed-chapter,.ed-interlude){contain:layout style} html[data-theme] .footer{isolation:isolate;contain:layout paint style} /* ── 3 · A TRANSITION THAT HANGS LOSES ITS SNAPSHOT ─────────────────────── The API has no abort(). Once the 1200 ms bound in swap() fires, the root carries .kicc-vt-stuck for two frames; these rules delete the stale trees so the live DOM is what you see and scroll. */ html.kicc-vt-stuck::view-transition-group(root), html.kicc-vt-stuck::view-transition-image-pair(root), html.kicc-vt-stuck::view-transition-old(root){display:none !important;animation:none !important;opacity:0 !important} html.kicc-vt-stuck::view-transition-new(root){animation:none !important;opacity:1 !important;mix-blend-mode:normal !important} /* the transition layer must never eat clicks (a stuck snapshot looks frozen because the live page under it is unreachable) */ ::view-transition{pointer-events:none} /* ── 4 · FITS ANY SCREEN ────────────────────────────────────────────────── 100vh is the LARGE viewport on mobile (URL bar hidden): a full-height band built on it is taller than the visible screen. svh/dvh track the real box, the caps keep a 430×932 phone and a 2560 desktop in the same rhythm. */ @supports (height:100svh){ .hero{min-height:100svh} body:not(.admin-shell) #app #chapter-inside{min-height:clamp(520px, 82svh, 980px)} } body:not(.admin-shell) .hero-content{ padding-top:clamp(88px, 12vh, 132px); padding-bottom:clamp(56px, 8vh, 92px); } body:not(.admin-shell) #app .ed-layer>.ed-grid, body:not(.admin-shell) #app .ed-interlude .ed-grid, body:not(.admin-shell) #app .tm-head{ gap:clamp(14px, 2vw, 32px); } /* Grids collapse by their own available width, not by device guesswork. */ body:not(.admin-shell) #app :is(.ed-grid,.footer-grid,.uc-grid){ min-width:0; } body:not(.admin-shell) #app :is(.ed-grid,.footer-grid,.uc-grid)>*{min-width:0} /* nothing may create a horizontal scrollbar at any width */ body:not(.admin-shell) #app :is(img,video,canvas,svg){max-width:100%} .consumer-shell,body:not(.admin-shell){overflow-x:clip} @supports not (overflow:clip){.consumer-shell,body:not(.admin-shell){overflow-x:hidden}}