/* ========================================================= IRAAVA — STORY PAGE RETINT --------------------------------------------------------- Maps the cinematic homepage onto the product palette in web/app/theme.css, so /story reads as the same brand as the browse pages instead of as the old dark site. THIS FILE IS THE ONLY PLACE THE RETINT LIVES. styles.css, home.css, home.js and script.js in this folder are SYMLINKS to the repo root — the live iraava.com files. Editing any of them changes the production site. Everything here is therefore an override, loaded after home.css. THE ONE RULE THAT EXPLAINS THE REST `--cin-text` is used in two incompatible places: as ink on the solid interstitials AND as ink over the film. Flipping the token would put #222 type on dark footage. So the token stays light and every SOLID-ground selector is flipped by hand below. `--cin-mute` carries no such double duty — its own header says "SOLID GROUNDS ONLY" — so it is flipped as a token. WHAT CHANGES AND WHAT DOES NOT · Six interstitials -> white / beige ground, #222 ink, cerulean accents. · Six film acts -> untouched. White type over measured scrims is the only thing legible on moving footage, and those scrims are contrast-measured (see docs/cinematic-homepage.md). · Footer -> the product's deep ocean #0B2E3F. Values are lifted verbatim from web/app/theme.css. ========================================================= */ body.cinema { /* ---- Product palette, mirrored from theme.css ---- */ --st-page: #FFFFFF; --st-surface: #F7F4EE; --st-strong: #F0EBE1; --st-ink: #222222; --st-ink-soft: #717171; --st-border: #DDD9D2; --st-border-hi: #C7C1B6; --st-accent: #1A5F8A; --st-accent-hi: #164F73; --st-footer: #0B2E3F; /* ---- Cinema tokens that are SAFE to flip ---- Each of these is only ever consumed on a solid ground. */ --cin-bg: var(--st-page); --cin-surface: var(--st-page); --cin-mute: var(--st-ink-soft); --cin-line: var(--st-border); --cin-line-hover: var(--st-border-hi); /* Action colour. --cin-teal is ink-on-solid, --cin-teal-fill is the button fill; both become the one product accent. */ --cin-teal: var(--st-accent); --cin-teal-fill: var(--st-accent); --cin-teal-deep: var(--st-accent-hi); /* NOT flipped, deliberately: --cin-text ink over film (and on solid — flipped per selector) --cin-on-video ink over film --cin-void act scrims --cin-gold the chapter rail + hero cue, both over film */ background: var(--st-page); } html:has(body.cinema) { background: var(--st-page); } /* ========================================================= 1 · NAV Transparent over the hero film for the first 0.72vh, then home.js adds .is-solid and it stays solid for the rest of the page. So: leave the transparent state light, flip the solid state to a pale bar with dark ink. ========================================================= */ body.cinema .nav.is-solid { background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid var(--st-border); } body.cinema .nav.is-solid .nav__links a, body.cinema .nav.is-solid .nav__dropdown-trigger, body.cinema .nav.is-solid .nav__auth, body.cinema .nav.is-solid .nav__logo { color: var(--st-ink); } body.cinema .nav.is-solid .nav__burger span { background: var(--st-ink); } /* Sign in is an outline button on this page. Its border has to invert with the bar, or it vanishes into whichever ground it is currently over. */ body.cinema .nav.is-solid .nav__auth { border-color: var(--st-border-hi); } body.cinema .nav.is-solid .nav__auth:hover { background: var(--st-surface); border-color: var(--st-ink); } /* The dropdown panel is its own surface, not part of the bar. */ body.cinema .nav__dropdown-menu { background: var(--st-page); border: 1px solid var(--st-border); box-shadow: 0 8px 28px rgb(0 0 0 / 0.16); } body.cinema .nav__dropdown-menu a strong { color: var(--st-ink); } body.cinema .nav__dropdown-menu a span { color: var(--st-ink-soft); } body.cinema .nav__dropdown-menu a:hover { background: var(--st-surface); } body.cinema .nav__mobile { background: var(--st-page); border-top: 1px solid var(--st-border); } body.cinema .nav__mobile a { color: var(--st-ink); } body.cinema .nav__mobile-divider { color: var(--st-ink-soft); } /* ========================================================= 2 · CHAPTER RAIL The one element that is over BOTH grounds: home.js shows it from 0.5vh onward, and it stays fixed while acts and interstitials pass underneath. Dark ink alone would die on the film; light ink would die on the beige. So it gets its own pale frosted chip and reads as dark ink on that, whatever is behind it. ========================================================= */ .cin-rail::before { content: ""; position: absolute; inset: -18px -16px -18px -20px; border-radius: 999px; background: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); border: 1px solid rgb(0 0 0 / 0.06); pointer-events: none; } .cin-rail { background: var(--st-border); } .cin-rail__fill { background: linear-gradient(180deg, var(--st-accent), #113D59); } .cin-rail__btn { color: var(--st-ink-soft); } .cin-rail__tick.is-active .cin-rail__btn, .cin-rail__btn:hover { color: var(--st-ink); } .cin-rail__btn::after { background: var(--st-border-hi); } .cin-rail__tick.is-active .cin-rail__btn::after { background: var(--st-accent); } .cin-rail__name { color: var(--st-accent); } /* ========================================================= 3 · INTERSTITIALS — the six solid sections Every selector here sits on a solid ground, never on film. ========================================================= */ .cin-section--tint { background: linear-gradient(180deg, var(--st-surface), #F4F0E8 55%, var(--st-surface)); } .cin-head .cin-eyebrow { color: var(--st-accent); } .cin-h2 { color: var(--st-ink); } .cin-h2 em { color: var(--st-accent); } .cin-step__num, .cin-pillar__num, .cin-fact__k { color: var(--st-accent); } .cin-step__title, .cin-pillar__title { color: var(--st-ink); } .cin-chip:hover { color: var(--st-ink); } /* Ghost button on the solid ground. home.css tints it gold there, which is 2.4:1 on this canvas — it has to become the accent. */ .cin-section .cin-btn-ghost { border-color: var(--st-accent); color: var(--st-accent); } .cin-section .cin-btn-ghost:hover { border-color: var(--st-accent-hi); background: rgb(26 95 138 / 0.06); } /* ========================================================= 4 · LIVE INVENTORY BAND The band blurs the finale frame behind itself and seals it top and bottom. Both were built to darken; they now lighten. ========================================================= */ .cin-band__bg { filter: blur(40px) brightness(1.6) saturate(0.5); opacity: 0.32; } .cin-band__seal { background: linear-gradient(180deg, var(--st-page) 0%, rgb(247 244 238 / 0.88) 40%, rgb(247 244 238 / 0.94) 72%, var(--st-page) 100%); } .cin-rail-cards { scrollbar-color: var(--st-border-hi) transparent; } .cin-rail-cards::-webkit-scrollbar-thumb { background: var(--st-border-hi); } /* Cards: white on the beige band, with the product's hover shadow. home.css refuses a shadow because one is invisible on #12201A — on white it is the correct elevation, so it comes back. */ .cin-card { background: var(--st-page); background-image: none; box-shadow: none; transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .3s var(--ease); } .cin-card:hover { box-shadow: 0 6px 16px rgb(0 0 0 / 0.12); } .cin-card__loc { color: var(--st-ink-soft); } .cin-card__name { color: var(--st-ink); } /* Price is value, and value on a light ground is near-black, not gold. */ .cin-card__price { color: var(--st-ink); } .cin-card__cta { color: var(--st-accent); } .cin-state strong { color: var(--st-ink); } /* The badge sits on the photograph, not on the card ground — it stays a dark chip with white type. Nothing to flip. */ .cin-card--skeleton .cin-card__media { background: var(--st-strong); } .cin-card--skeleton .cin-sk { background: var(--st-strong); } /* ========================================================= 5 · FOCUS --cin-teal is now the accent, which is right on the light sections and too dark against the film. Keyboard focus over an act therefore keeps a light ring. ========================================================= */ .act a:focus-visible, .act button:focus-visible, .cin-search a:focus-visible, .cin-search button:focus-visible, .cin-search input:focus-visible { outline-color: #EAF2ED; } /* ========================================================= 6 · FOOTER home.css pulls the footer to the cinema ground so the page ends in one tone. The product's one dark surface is deep ocean, so it ends there instead. ========================================================= */ body.cinema .footer { background: var(--st-footer); border-top: 1px solid var(--st-border); } /* ========================================================= 7 · IRAAVA AI WIDGET bot.css reads every colour as var(--brand-token, literal), so the widget follows whatever palette the host page defines. Left alone it inherits the pre-rebrand forest greens from styles.css and sits on this page as the one green object on a cerulean page. The overrides are scoped to the widget's own two root elements (.bot-btn / .bot-panel, created by bot.js) rather than to body.cinema, so redefining these shared names cannot reach the hero search bar or the footer, which read the same tokens out of styles.css. ========================================================= */ body.cinema .bot-btn, body.cinema .bot-panel { --emerald: var(--st-accent); --espresso-deep: #113D59; --espresso: var(--st-footer); --ink-strong: var(--st-ink); --mute: var(--st-ink-soft); --line: var(--st-border); --cream: var(--st-surface); --paper: var(--st-page); /* Reads on the widget's dark header, where the accent itself is too dark. Same cyan the product footer uses for its one bright mark. */ --gold: #22B8CF; /* This page is a light retint that stays light in dark mode, so the widget has to stay light with it — and bot.css's dark patches key off html[data-theme=dark], which IS stamped here. Those patches are written through tokens for exactly this reason: --accent paints the launcher, the reader's own bubbles and send; --moss/--forest the title bar; --ink the quick-reply chips (unmapped, they were the twilight near-white on white — invisible). Mapping the five keeps the whole dark skin on this page's palette. */ --accent: var(--st-accent); --accent-deep: #113D59; --on-accent: #FFFFFF; --ink: var(--st-ink); --moss: var(--st-accent); --forest: #113D59; } /* The three dark rules that carry literals rather than tokens: an amber wash and a black-heavy shadow, neither of which belongs on a white panel. Scoped under body.cinema, so specificity settles it against bot.css — which bot.js injects after this file. */ [data-theme="dark"] body.cinema .bot-header__avatar { background: rgb(34 184 207 / 0.18); } [data-theme="dark"] body.cinema .bot-mode-btn.is-active { background: rgb(255 255 255 / 0.18); color: #FFFFFF; } [data-theme="dark"] body.cinema .bot-panel { box-shadow: 0 24px 64px rgb(30 26 22 / 0.22), 0 0 0 1px rgb(23 36 30 / 0.10); } /* ========================================================= 8 · SIGN-UP NUDGE signup-nudge.js reads its colours the same way bot.css does, and home.css already maps them onto the film's dark --cin-* palette (see "SIGN-UP NUDGE, on the film" there). On this page that mapping half-lands: the retint above flips --cin-surface, --cin-mute and --cin-teal-fill, so the card correctly arrives white with a cerulean button. What does NOT follow is the pair this file's header calls out — --cin-text stays light because it doubles as ink over the footage, and --cin-gold is a colour for dark grounds only. The card is a solid ground, so it is one of the hand-flipped selectors that warning describes: without this its title landed at 1.07:1 and its log-in link at 1.95:1, both effectively invisible on white. Scoped to the card's own root, like the widget above, so these shared names cannot reach anything else on the page. ========================================================= */ body.cinema .signup-nudge { --ink: var(--st-ink); --ink-strong: var(--st-ink); /* The accent as ink — the log-in link, the mark, the focus ring. Gold is for the film's dark ground; here it is the product accent, same as the button it sits under. */ --accent-ink: var(--st-accent); --sand: var(--st-surface); /* close button's hover wash */ /* home.css casts the card's shadow for the film's near-black ground; on white that reads as a bruise. The product's panel shadow instead. */ box-shadow: 0 8px 28px rgb(0 0 0 / 0.16); }