/* POPTANI reading typography and responsive refinements. */ body.home main#poptani-cinema .poptani-proof__value { font-family: "POPTANI Palanquin", sans-serif; font-size: .875rem; font-weight: 500; letter-spacing: .08em; line-height: 1.35; } body.home main#poptani-cinema .poptani-frame--three .poptani-invitation { font-family: "POPTANI Martel", Georgia, serif; font-size: .9375rem; font-weight: 400; letter-spacing: normal; line-height: 1.7; } body.home main#poptani-cinema .poptani-contact, body.home main#poptani-cinema .poptani-contact input, body.home main#poptani-cinema .poptani-contact button, body.home main#poptani-cinema .poptani-contact label { font-family: "POPTANI Palanquin", sans-serif; } body.home main#poptani-cinema .poptani-contact { font-weight: 400; } body.home main#poptani-cinema .poptani-contact input[type="email"] { font-size: 1.0625rem; line-height: 1.5; } body.home main#poptani-cinema .poptani-contact label { font-size: 1rem; font-weight: 500; line-height: 1.5; } body.home main#poptani-cinema .poptani-contact button { font-size: .9375rem; font-weight: 600; letter-spacing: .025em; line-height: 1.4; } body.home main#poptani-cinema .poptani-contact__note, body.home main#poptani-cinema .poptani-contact__status { font-size: .9375rem; line-height: 1.6; } body.home main#poptani-cinema .poptani-closing-banner__principles { font-size: .9375rem; line-height: 1.4; } @media (max-width: 800px) { body.home main#poptani-cinema .poptani-frame--two .poptani-copy { padding-top: 6rem; padding-bottom: 3rem; } } @media (max-width: 380px) { body.home main#poptani-cinema .poptani-proof-grid { grid-template-columns: 1fr; } } body.home main#poptani-cinema > .poptani-frame { width: 100%; } @media (min-width: 1001px) { body.home main#poptani-cinema > section.poptani-frame:last-child { height: auto !important; min-height: 100svh !important; } body.home main#poptani-cinema > section.poptani-frame:last-child > .poptani-copy { height: auto !important; min-height: 0 !important; } } @media (min-width: 1001px) { body.home main#poptani-cinema > section.poptani-frame:last-child > .poptani-copy { flex: 1 0 auto !important; } body.home main#poptani-cinema > section.poptani-frame:last-child > .poptani-closing-banner { height: auto !important; min-height: 80px !important; flex: 0 0 auto !important; padding-block: 1rem !important; } body.home main#poptani-cinema .poptani-closing-banner__principles { flex-wrap: wrap; gap: .75rem 1.5rem; transform: none; } body.home main#poptani-cinema .poptani-closing-banner__principles li { white-space: normal; } } /* POPTANI type system: Palanquin for display, titles and UI; Martel for prose. */ body.home main#poptani-cinema .poptani-intro, body.home main#poptani-cinema .poptani-heading, body.home main#poptani-cinema .poptani-strategy__eyebrow { /* This rule is the ONLY source of font-family, line-height and text-wrap for these three: dist/styles.css sets their size, weight, tracking and colour but no family and no leading. Do not delete it. The font-weight: 400 and letter-spacing: -.006em that used to sit here lost to dist at 375, 800 and 1512 — verified before removal — as did a whole .poptani-intro block setting a third competing font-size. */ font-family: "POPTANI Palanquin", "Helvetica Neue", Helvetica, sans-serif; line-height: 1.06; text-wrap: balance; } /* Titles and UI in Palanquin; sentences in Martel. */ body.home main#poptani-cinema .poptani-proof__value, body.home main#poptani-cinema .poptani-contact, body.home main#poptani-cinema .poptani-closing-banner__principles { font-family: "POPTANI Palanquin", "Helvetica Neue", Helvetica, sans-serif; } body.home main#poptani-cinema .poptani-thesis { font-family: "POPTANI Martel", Georgia, serif; font-weight: 400; letter-spacing: normal; line-height: 1.45; color: #866D50; } @media (max-width: 800px) { body.home main#poptani-cinema .poptani-heading, body.home main#poptani-cinema .poptani-strategy__eyebrow { line-height: 1.1; } } /* One restrained page palette, controlled by the existing Day / Night switch. */ body.home main#poptani-cinema > .poptani-frame, body.home main#poptani-cinema .poptani-copy, body.home .poptani-closing-banner { transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease; } /* =========================================================================== NIGHT — NAVY. Locked 7 Nov; replaces the #130600 brown throughout. Eight values carry the whole night page: ground #08122C plaque #0D1A3A panel #18295A rules #2A3C66 wordmark #FFFFFF text #F3EFE6 accent #C18641 sliver #BD0034 There is deliberately no hook colour and no second red. Day puts its colour moment in the text because paper can carry it; night moves that moment to the 3px sliver, the same logic as the day lime, and the hero does its hierarchy with weight alone (300 title, 400 hook, both #F3EFE6). Text tiers, all measured on #08122C: hero / headings / intro #F3EFE6 16.15 (day signature ink 13.14) scroll body / labels #BFB9AF 9.51 (day body 9.8 — matched) quietest notes #A8A29A 7.32 gold section headings #C18641 5.96 = 0.37x body (day titles 0.45x) Explicit hexes rather than rgba: alpha over a blue ground composites to a neutral grey and the warm cast of the family is lost. The block below the ground rules is a palette layer — it reaches selectors owned by dist/styles.css and header-modules.css and beats them on specificity, not on load order. Fold it back into those files in the next batch; it lives here for now so the swap was one reviewable edit. =========================================================================== */ html[data-poptani-header-theme="night"] body.home, html[data-poptani-header-theme="night"] body.home main#poptani-cinema, html[data-poptani-header-theme="night"] body.home main#poptani-cinema > .poptani-frame { background: #08122C; } /* The closing banner leaves the ground so the page ends on a plate rather than on more page. The value is set by day, not invented: day's footer is pure #FFFFFF on the #F1E8DD paper, a separation of 1.212, and #12234F on #08122C is 1.217 — the same step, inverted. That matters because day's footer is the brightest surface on its page, and night's should hold the same rank rather than becoming the quietest. Against the other night surfaces: 1.125 from the header plaque #0D1A3A, 1.090 from the email panel #18295A. Everything on it clears AA — wordmark 15.23, text 13.27, principles 7.81, gold 4.90. Measured, 7 Nov. Was #18295A (1.33, too strong), then #0D1A3A (1.08, too timid); this is the day-matched value. */ html[data-poptani-header-theme="night"] body.home .poptani-closing-banner { background: #12234F; } html[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-copy, html[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-intro, html[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-contact, html[data-poptani-header-theme="night"] body.home .poptani-closing-banner { color: #F3EFE6; } /* Hero, brightest tier. Day runs both hero lines off the signature ink #292B2D, the brightest thing on the paper; night matches that at #F3EFE6 / 16.15 and lets weight alone separate them — 300 title, 400 hook. This is option A: the hook carries no colour of its own, because the colour moment has moved to the 3px sliver, the same logic as the day lime. */ html:root[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-signature { color: #F3EFE6; } /* --- accent tier: REMOVED 10 Nov ------------------------------------------ This block used to paint the gold #C18641 on the section heading, strategy eyebrow, thesis, story heading, proof value, proof label and the + rule, at the :root-boosted (1,3,3) prefix, purely to out-specify the old bronze #C6AB86 that theme.css and dist/styles.css were still carrying for several of them. Those two files now state the gold themselves, so every one of these declarations had two sources and this layer had nothing left to override. Deleting it is the point of the exercise. The role mapping it enforced is unchanged and still the reason these elements are gold rather than white: the accent tier is whatever the day page paints in its bronze #866D50, which keeps titles sitting quieter than their own body copy — gold on navy is 5.96, i.e. 0.37x the body, against day's 0.45x. The palette table above carries those figures. One selector moved rather than simply vanishing: .poptani-plus, which has no day colour of its own and was holding its gold only from here, now has its own night rule in both files. It is a span inside .poptani-proof__value and inside .poptani-story__body, so without that rule the story + would inherit the #BFB9AF body grey instead of the gold it has always had. .poptani-proof__value itself did NOT move. A pass earlier on 10 Nov took it to #F3EFE6 on a literal reading of the brief; it was confirmed the same day that it keeps its gold, so nothing here changes what renders. Do not re-add a layer here to fix a night colour. Fix it in theme.css AND in dist/styles.css together — dist is what the live page loads and it is enqueued last, so a value changed in only one of them is a silent inconsistency rather than a fix. */ html[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-invitation, html[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-contact__note, html[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-contact__status, html[data-poptani-header-theme="night"] body.home .poptani-closing-banner__principles { color: #BFB9AF; } html[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-proof { border-color: #2A3C66; } html[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-copy { background: none; } html[data-poptani-header-theme="night"] body.home .poptani-closing-banner__wordmark { color: #FFFFFF; } /* This is the hook — "Delight is heaven", the second hero line, crimson #BD0034 in day. It is named __anchor but it is not a link. Night runs it at the body white: no hook colour, per the 7 Nov decision. Weight, not hue, separates it from the line above. */ html:root[data-poptani-header-theme="night"] body.home main#poptani-cinema .poptani-signature__anchor { color: #F3EFE6; } /* --- palette layer: REMOVED 10 Nov ---------------------------------------- This block used to restate the night palette — gold #C18641 on the story heading, story art and both chevrons, #BFB9AF on the scroll body, #A8A29A on the proof note, #2A3C66 on the accordion rules — purely to out-specify the old brown that theme.css and dist/styles.css were still carrying. The brown is gone: both of those files now state the navy values themselves, so this layer had nothing left to override and every one of these declarations had two sources. Deleting it is the point of the exercise; the colours did not change, which the before/after reading on the published page confirms. Do not re-add a layer here to fix a night colour. Fix it in theme.css AND in dist/styles.css together — dist is what the live page loads and it is enqueued last, so a value changed in only one of them is a silent inconsistency rather than a fix. The one selector that was left open here on 8 Nov, .poptani-proof__value, is resolved: the accent-tier block that was painting it gold is gone too, and both theme.css and dist/styles.css now state it at #C18641 themselves, so it renders exactly as it always did. Nothing in this file paints the night palette any more. */ /* The investor panel's night colours were briefly overridden from here. They are back in header-modules.css, which owns the header, so each of those declarations has one source again. Nothing to see here; do not re-add. */ /* --- the open transition --------------------------------------------------- .poptani-header__investor::before is inset:0, so while the panel is opening it is a full-height block of the edge colour fading from 1 to 0 over 260ms against the panel fading in. At <=760px the open panel is 68px, so that is a 68px block. The bronze made it invisible; crimson makes it a red flash on every mobile load, since the panel opens itself at the top of the page. Caught at 375 on the published page. Anchoring the pseudo-element to a 3px strip at the bottom means the fade is a hairline rather than a block. Scoped to .is-investor-open at first, which was wrong: the header DROPS that class at the moment it compacts, so the fix stopped applying for exactly the 420ms the panel spends collapsing — a crimson block across the header on every snap. Caught in a mid-transition screenshot, 7 Nov. It applies in every state now, which also brings the resting sliver to the locked 3px instead of filling the 7px the element reserves. */ html body.home .poptani-header__investor::before { inset: auto 0 0 0; height: 3px; } /* --- page contact form at night -------------------------------------------- The day rules above paint these in bronze over paper. At night the border composited to an off-palette warm grey, and the placeholder — day ink at 45% over the navy — came out around 1.2:1, effectively invisible. Same class of defect as the Scroll 2 body copy. Measured on the published page. */ html:root[data-poptani-header-theme="night"] body.home main#poptani-cinema input, html:root[data-poptani-header-theme="night"] body.home main#poptani-cinema textarea, html:root[data-poptani-header-theme="night"] body.home main#poptani-cinema select { border-color: #2A3C66; } html:root[data-poptani-header-theme="night"] body.home main#poptani-cinema input::placeholder, html:root[data-poptani-header-theme="night"] body.home main#poptani-cinema textarea::placeholder { color: #A8A29A; } /* Tailwind's forms base paints every input, textarea and select border with its own neutral, oklch(55.1% 0.027 264.364) — a blue-grey at hue 264 that is outside the palette and that nobody chose. It lives in dist/styles.css inside @layer base, so an unlayered rule here beats it at any specificity. */ body.home input, body.home textarea, body.home select { border-color: rgba(134, 109, 80, .34); } body.home input::placeholder, body.home textarea::placeholder { color: rgba(41, 43, 45, .45); } /* Respect reduced motion for the page palette as well as the header. */ @media (prefers-reduced-motion: reduce) { body.home main#poptani-cinema > .poptani-frame, body.home main#poptani-cinema .poptani-copy, body.home .poptani-closing-banner { transition: none !important; } }