/* ============================================================= Snap Zap Media — website design tokens "Dark Enchanted Night". Settled 2026-09-13. This file is the single source of truth for colour, type and spacing on the Snap Zap Media website. Every value below is approved. Do not substitute, re-derive or "improve" them. ============================================================= */ :root{ /* ---------- COLOUR ---------- A near-black ground with the purple spent sparingly as light. Roughly 60 / 30 / 10 — ground / surface and body text / accent. The accent is a glow, never a large background fill. */ --ground: #170312; /* page background — the dominant field */ --surface: #33032F; /* panels, raised surfaces, table rows */ --surface-alt: #531253; /* borders, dividers, secondary surface */ --ink: #F6F4F8; /* headings — white without the glare, carries a trace of purple so it reads native to the ground, not pasted on */ --ink-muted: #B3A8C4; /* body copy — legible over long paragraphs without competing */ --ink-faint: #857A96; /* small print, dates, secondary labels, footers. The dark-mode "charcoal" */ --accent: #E052E0; /* glow, active state, links, the one emphasised word in a heading */ --accent-fill: #531253; /* button fill at rest */ --accent-deep: #33032F; /* inactive rules, hover borders */ --hairline: rgba(246,244,248,.10); /* standard 1px divider */ --hairline-2: rgba(246,244,248,.18); /* secondary button border */ /* ---------- TYPE ---------- */ --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif; --body: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Headings use --display at 800 (H1) and 700 (H2/H3). Body uses --body at 400, with 500/600 for emphasis and buttons. */ /* ---------- TYPE SCALE ---------- Fluid via clamp() rather than fixed breakpoints, so type grows with the viewport instead of stepping. */ --step--1: clamp(.75rem, .72rem + .15vw, .82rem); /* labels, small print */ --step-0: clamp(.95rem, .9rem + .25vw, 1.05rem); /* body */ --step-1: clamp(1.05rem, .98rem + .35vw, 1.2rem); /* lead paragraph */ --step-2: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); /* H2 / H3 */ --step-hero: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); /* H1 */ /* ---------- LAYOUT ---------- */ --page: min(1240px, 92vw); /* content container, centred */ /* ---------- CORNER RADIUS ---------- Ruled by Robbie 2026-09-15, replacing the 2px "corners are sharp" ceiling this file carried until 2026-09-16. Clearly rounded, never pill or oval: the radius is a fixed number of pixels, never a percentage and never half the height, so a button cannot round into a capsule however short its label. Cards take the larger of the two. */ --radius: 10px; /* buttons, controls, small badges */ --radius-card: 16px; /* cards and highlighted blocks */ /* ---------- LIFT: GRADIENT AND GLOW ---------- Ruled by Robbie 2026-09-15. Every button and every card is filled with a gradient between two existing surface tokens instead of one flat colour, and carries a soft accent glow beneath it, so it hovers above the ground rather than sitting flush in it. No new colour enters here. Every stop and every shadow is one of the six approved tokens, mixed with color-mix() where a softer step or a transparent edge is wanted. Light falls from above: the lighter stop is at the top, the darker at the bottom. Flip the two stops in each --fill-* below to reverse that, and the whole site follows. */ --fill-surface: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 42%, var(--surface)) 0%, var(--surface) 58%, color-mix(in srgb, var(--ground) 45%, var(--surface)) 100%); --fill-primary: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--accent-fill)) 0%, var(--accent-fill) 62%, color-mix(in srgb, var(--accent-deep) 70%, var(--accent-fill)) 100%); --fill-ghost: linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent) 0%, color-mix(in srgb, var(--surface) 22%, transparent) 60%, transparent 100%); /* The glow is the accent spent as light, under the element and never behind the text. Low opacity at rest, a little stronger on hover, where the element also rises 2px. */ --glow: 0 10px 26px -14px color-mix(in srgb, var(--accent) 34%, transparent); --glow-hover: 0 16px 34px -14px color-mix(in srgb, var(--accent) 48%, transparent); --glow-card: 0 18px 40px -20px color-mix(in srgb, var(--accent) 28%, transparent); /* The lift's easing. A small overshoot on the way up, so the hover reads as a rise rather than a jump. */ --ease-lift: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------- "1 HAIRLINE" — THE ONE FEATURE CARD ---------- Ruled by Robbie 2026-09-16 after seeing samples. He chose the one named "1 Hairline", and the two values below are its approved values, transcribed exactly. ★★ THE ONLY PLACE ON THIS SITE WHERE SILVER AND WHITE ARE A COLOUR RATHER THAN A MIXING ENDPOINT. Robbie permitted them for this edge alone. They are not part of "Dark Enchanted Night" and they do not join the palette. FIVE THINGS WEAR IT, ALL RULED BY NAME. The Visual Concepts card on the homepage (2026-09-16); the homepage hero's navigational secondary, "What We Create" (2026-09-16); the Presence and Authority cards on /packages (2026-09-17, approved on a rendered sample 2026-09-16); and the contact form card on /contact — Robbie's ruling of 2026-09-17, approved on a rendered sample, recorded in CONTENT.md §4. That ruling replaces the "FOUR THINGS WEAR IT … a FIFTH thing wanting a chrome edge is a new ruling again" this block carried until then; the superseded wording is deleted rather than struck through, per PROJECT-RULES.md §8. A SIXTH thing wanting a chrome edge is a new ruling again, not a reuse of these five. Book Discovery Call is not a candidate: it carries the moving Liquid Metal rim and nothing else. The edge is STATIC: a fixed gradient, painted once. It does not move, shimmer, glint or animate, and it must never be mistaken for the moving Liquid Metal rim on Book Discovery Call, which is the one thing on the site allowed to move like that. Polished steel read top to bottom: white, a bright wash, mid silver, a darkening shoulder, the thin dark horizon at 50%, then bright again immediately below it and settling through silver to a darker foot. */ --chrome-edge: linear-gradient(180deg, #ffffff 0%, #eceaf0 12%, #b9b5c2 30%, #6f6a79 46%, #2a2530 50%, #f7f5fa 52%, #d6d2dd 64%, #a39fad 80%, #eeebf2 94%, #8b8694 100%); /* The approved glow, brighter than --glow-card and --glow-hover and deliberately so. color-mix() of --accent at 50% resolves to exactly the approved rgba(224,82,224,.50), so the value is the one Robbie signed off AND the accent still lives in one place: change --accent and this follows it. */ --glow-feature: 0 22px 56px -20px color-mix(in srgb, var(--accent) 50%, transparent); /* ---------- THE RECOMMENDED CARD'S GLOW ---------- Ruled by Robbie 2026-09-17, approved on a rendered sample 2026-09-16: the Signature card on /packages carries "a slightly stronger pink glow" than the two cards beside it. One step up from --glow-card's 28% and well short of the feature card's 50%, so the three glows stay distinct and no new colour enters — it is --accent, as everything here is. */ --glow-recommended: 0 20px 46px -20px color-mix(in srgb, var(--accent) 38%, transparent); /* ---------- THE CONTACT FORM CARD ---------- Ruled by Robbie 2026-09-17, approved on a rendered sample: the form area on /contact is a floating card with the still chrome edge above, a dark purple face and a pink glow beneath it. Recorded in CONTENT.md §4. Two values, and nothing else on the site reads either of them. THE FACE is the approved gradient, transcribed exactly, the way --chrome-edge and the hero frame's two ends are. It is NOT a seventh and eighth palette colour: both stops are the approved sample's own lift and deepening of --surface #33032F, sitting between it and --ground #170312, which is the band every surface on this site already occupies. They are written out rather than built with color-mix() for the reason the hero frame gives at the foot of this file — a transcribed value renders identically to the sample, a mixed one lands a unit or two off it. Light falls from above, so the lighter stop is at the top, as every --fill-* here is. THE GLOW is two layers: the approved feature glow, then a wider, softer one beneath it that carries the light further down the page. Both are --accent through color-mix(), which resolves the first to exactly the approved rgba(224,82,224, .50) and the second to rgba(224,82,224,.45), so the values are the ones Robbie signed off AND the accent still lives in one place. The first layer is --glow-feature's value and is deliberately written out rather than composed from it: the two are free to diverge, and a change made for the feature card must not reach this one. The soft pink light pooling just below the card's bottom edge is NOT here. It is a painted element, not a shadow, so it lives with the card in site.css. */ --fill-contact-card: linear-gradient(180deg, #3d0a39 0%, #2a0326 100%); --glow-contact-card: 0 22px 56px -20px color-mix(in srgb, var(--accent) 50%, transparent), 0 40px 90px -40px color-mix(in srgb, var(--accent) 45%, transparent); /* ---------- THE HERO FRAME'S GROUND ---------- Ruled by Robbie 2026-09-16 from the approved hero mockup, replacing the flat --ground fill the pinned frame carried until then. Three layers read back to front: a purple bloom high on the right, a deeper one low on the left, and a vertical wash that lifts at the head of the frame and darkens towards its foot. ★ STATIC. It does not move, drift or animate, and the hero canvas no longer paints a ground of its own beneath it. DESIGN-SYSTEM §6 — nothing moves for decoration. ★ The accent stays LIGHT, not a large background fill: both blooms are well under half the frame and both fade to nothing by 70%. WHERE THE VALUES COME FROM, and why two of them are written out rather than derived. The wash's middle stop is var(--ground) and follows the token, exactly as everything on this site is meant to. Its two ends, #1f0419 and #10020c, are the approved gradient's own lift and deepening of --ground, transcribed here as --chrome-edge is. ★ The two BLOOMS are --surface-alt #531253 and --surface #33032F, at .55 and .85 — the same two palette colours, no seventh and no eighth. They are written out as rgba() instead of built with color-mix(), which is what --glow-feature does and what this block did first. The reason is measured, not assumed: color-mix() resolves to color(srgb …), and Chromium rasterises a color(srgb) gradient stop through a different rounding path from an rgba() one, landing the ramp one unit of 255 off the approved render across about a thirtieth of the frame. Invisible — and still not what was approved. Written this way the frame is pixel-identical to the mockup, which was checked both ways rather than argued about. ⚠ So these two stops do NOT follow --surface-alt and --surface on their own. They are the same colours and must be changed with them. The frame is a full viewport tall so this reads at the scale it was approved at; the hero's own bottom fade carries it into --ground with no seam. */ --hero-veil: radial-gradient(90vw 70vh at 78% 18%, rgba(83,18,83,.55) 0%, rgba(83,18,83,0) 70%), radial-gradient(70vw 60vh at 8% 95%, rgba(51,3,47,.85) 0%, rgba(51,3,47,0) 70%), linear-gradient(180deg, #1f0419 0%, var(--ground) 55%, #10020c 100%); } /* ============================================================= COMPONENT RULES Surfaces FLOAT. Ruled by Robbie 2026-09-15, replacing the flat, bordered, shadowless surfaces this file carried until 2026-09-16. Every button and every card is rounded, filled with a gradient between two surface tokens, and lifted off the ground by a soft accent glow beneath it. Hover raises it 2px; pressing it puts it back down. What did NOT change: the palette, the type, and the rule that the accent is light rather than a large background fill. The glow is accent at low opacity under an element — it never sits behind text. Two things are deliberately NOT cards and keep their own look: the .visual image wells, which fade at the edges and must never read as framed boxes, and the "Learn more" disclosure toggles. Motion is restrained and always has a job — it shows state or guides attention. Nothing moves for decoration. The moving metal rim is the exception, ruled in on 2026-09-15: it marks the single conversion ask on every page, and NO OTHER BUTTON carries it. From 2026-09-17 one card carries it too — the Signature card on /packages, Robbie's ruling, approved on a rendered sample 2026-09-16 and recorded in CONTENT.md, spun slower than the button's. That replaces the "and nothing else on the site" this block carried until then; the superseded wording is deleted rather than struck through, per PROJECT-RULES.md §8. ============================================================= */ body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased; } h1{ font-family:var(--display); font-weight:800; font-size:var(--step-hero); line-height:.98; letter-spacing:-.03em; margin:0; text-wrap:balance; } /* One word per heading may carry the accent. Never more. */ h1 .lift{ color:var(--accent); } h2,h3{ font-family:var(--display); font-weight:700; font-size:var(--step-2); letter-spacing:-.025em; } p{ color:var(--ink-muted); max-width:70ch; text-wrap:pretty; } .small, .label{ font-size:var(--step--1); color:var(--ink-faint); letter-spacing:.22em; text-transform:uppercase; } /* ---------- buttons ---------- Both are rounded, gradient-filled and glowing, and both rise on hover and press back down on click. Primary still brightens to the accent on hover; secondary is still the quieter of the two, a bordered ghost over a faint surface wash. The size is still set by the label and the padding, never by a fixed width, and the radius is a fixed 10px — a short label can never round the button into a pill. */ .btn{ font-family:var(--body); font-weight:600; font-size:var(--step-0); text-decoration:none; display:inline-block; position:relative; padding:.95rem 1.6rem; border-radius:var(--radius); transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .22s var(--ease-lift), transform .22s var(--ease-lift); } .btn:hover{ transform:translateY(-2px) } /* Pressed: down 1px and very slightly smaller, so the lift closes under the finger. It reads at a touch as well as a click. */ .btn:active{ transform:translateY(1px) scale(.98) } .btn-primary{ background:var(--fill-primary); color:#FFFFFF; border:1px solid color-mix(in srgb, var(--accent) 34%, var(--accent-fill)); box-shadow:var(--glow); } .btn-primary:hover, .btn-primary:focus-visible{ background:var(--accent); border-color:var(--accent); box-shadow:var(--glow-hover); } .btn-secondary{ background:var(--fill-ghost); color:var(--ink); border:1px solid var(--hairline-2); box-shadow:var(--glow); } .btn-secondary:hover, .btn-secondary:focus-visible{ border-color:var(--accent-deep); color:var(--accent); box-shadow:var(--glow-hover); } /* The keyboard focus ring is unchanged and still the loudest state on the page: it must stay visible over the glow, so it is an outline outside the element rather than another shadow. */ :where(a,button):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* ---------- structure ---------- */ .wrap{ width:var(--page); margin-inline:auto; } /* The masthead is STICKY — it stays at the top of the viewport for the whole page so a visitor can reach any parent page without scrolling back up. The booking CTA is NOT sticky and never is. */ .site-head{ position:sticky; top:0; z-index:50; background:var(--ground); border-bottom:1px solid var(--hairline); } /* ---------- responsive ---------- Fluid clamp()-based sizing throughout rather than fixed breakpoints. The single real breakpoint is 880px, where the navigation collapses. */ @media (max-width:880px){ .site-nav{ display:none; } }