/* ========================================================================= THE VFX INSTITUTE — v1 DESIGN SYSTEM Black-first. Cyan → violet is the one accent gradient, and it carries every "this is alive / this is built" moment: the mark's fill, the discipline cards, the CTA. Nothing else on the page is a colour. Single source of truth. Nothing downstream hardcodes a colour, size, duration or easing. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ======================================================================= 1. COLOUR Everything sits on near-black. Two greys of "black" are used, not one — --void is the page ground, --surface is one step up for anything that needs to visually lift off it (fold 2's panel, the header bar) — so a raised surface reads as raised without ever needing a border to prove it. Every text colour below was measured against BOTH darks, because a pair that clears --void can still fail on --surface: ink #F5F7FA 18.77:1 on void / 17.72:1 on surface — headlines ink-mid #B7BFCC 10.87:1 on void / 10.26:1 on surface — body copy ink-quiet #7A8299 5.26:1 on void / 4.97:1 on surface — captions, the quietest tier that still clears 4.5:1 on both cyan #22E7FF 13.38:1 on void — bright enough to carry text, not just graphics. Eyebrows, links, small accent copy. violet #A66BFF 5.92:1 on void — clears AA, but assigned to display/ graphic roles by design, not because it fails: keeping violet OUT of small text is what keeps cyan reading as "the" accent instead of two accents competing. ======================================================================= */ --void: #06070A; /* the ground */ --surface: #0E1016; /* one step up — panels, header */ --surface-raised:#171B26; /* two steps up — cards */ --ink: #F5F7FA; --ink-mid: #B7BFCC; --ink-quiet: #7A8299; --ink-invert: #06070A; /* text on a filled cyan/violet surface */ /* --- the brand red --------------------------------------------------- Sampled straight off the supplied logo: its dominant fill is #B80808 and its brightest #CA0007, so --brand is the pure, deep red the mark is actually drawn in — not an approximation of it. That red is dark, and on a near-black ground it measures 3.31:1, which is why it is split into four roles rather than used everywhere: brand #C80808 3.31:1 on --void — GRAPHIC ONLY, never text brand-deep #A50606 white on it: 7.92:1 — button gradient, from brand-mid #E01414 white on it: 4.90:1 — button gradient, to brand-lit #FF5347 6.23:1 on --void — the only red allowed to carry small text The gradient is bounded at #E01414 deliberately: one stop brighter (#F02020) drops white to 4.25:1 and the button label stops being legal. */ --brand: #C80808; --brand-deep: #A50606; --brand-mid: #E01414; --brand-lit: #FF5347; /* the poster gold. 9.8:1 on the hero panel, and it sits with the fire in the plate far better than a second red would. */ --gold: #E8A81E; --gold-rgb: 232, 168, 30; /* Channel triplets, for rgba() composition — a wash and a glow should provably be the same colour as the accent they belong to, not two independently-tuned darks that happen to look similar. */ --void-rgb: 6, 7, 10; --surface-rgb: 14, 16, 22; --brand-rgb: 200, 8, 8; --brand-lit-rgb: 255, 83, 71; --white-rgb: 255, 255, 255; --rule: rgba(var(--white-rgb), 0.10); /* hairline on dark — graphic only */ --rule-quiet: rgba(var(--white-rgb), 0.06); --focus: var(--brand-lit); /* the lit red, so the ring is visible */ /* The five discipline accents are one ramp, not five picks — brand red walking out to ember amber, so the set reads as one spectrum and lands on the same fire the portal is made of. Graphic roles only (card rules, glows); none of them carries text. Order matches the subcopy: VFX, Animation, Motion Graphics, Gaming, Filmmaking. */ --disc-1: 200, 8, 8; /* VFX — the brand red */ --disc-2: 224, 40, 24; --disc-3: 240, 78, 32; --disc-4: 250, 120, 40; --disc-5: 255, 160, 56; /* Filmmaking — ember amber */ /* --- the portal ------------------------------------------------------ The ring is real footage, so the only colour needed here is for the CSS glow that stands in for it on the static path, and for the warm wash under the pinned stage. */ --ember: #FF8A1E; --ember-rgb: 255, 138, 30; /* ======================================================================= 2. TYPE — two families, split by job. Space Grotesk carries every headline: geometric, a little technical, the thing that should look "built" rather than "written." Inter carries everything meant to be read at length — eyebrows, body, labels, the marquee — so a long line of it never fatigues the way a display face would. Two families, not one, because this page has to look more constructed than a clinic homepage does; one workhorse sans would flatten that back out. ======================================================================= */ /* Space Grotesk is gone. It was carrying two rules — the step headings and the tick labels — while Anton carried every other heading on the page, so the one fold that used it read as a different site. One less family to fetch, and --font-display now points at the poster face so anything still asking for it gets the page's actual display type. */ --font-display: 'Anton', 'Arial Narrow', system-ui, sans-serif; /* the poster face: one weight, ultra-condensed, caps only. Used for the hero headline alone — at body sizes it is unreadable. */ --font-poster: 'Anton', 'Arial Narrow', system-ui, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-nano: 0.62rem; /* discipline card meta */ --fs-micro: 0.72rem; /* eyebrows, uppercase micro */ /* nano is 9.9px, which is fine for an all-caps chip on a desktop and not fine for a sentence on a phone. The floor is raised at the bottom of this file rather than per component — every one of the ten places it was under 12px reads from this one token. */ --fs-xs: 0.8rem; /* captions, chips */ --fs-sm: 0.9rem; --fs-body: 1rem; --fs-lead: 1.15rem; /* the subcopy paragraph */ --fs-md: 1.3rem; /* card titles */ /* the hero word: sized to command the fold, clamped so it never breaks three words onto more than two lines down to phone width */ --fs-hero: clamp(2.6rem, 2rem + 5.4vw, 6.4rem); --fs-d2: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); /* fold 2 label */ --track-display: -0.02em; --track-hero: -0.03em; --track-micro: 0.22em; /* eyebrows — wide and loud, same job as dental's */ --track-belt: 0.02em; --lh-display: 1.04; --lh-tight: 1.2; --lh-body: 1.6; --measure: 58ch; /* ======================================================================= 3. SPACE — 8px baseline ======================================================================= */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; /* One vertical rhythm for every content fold. Before this each section carried its own hand-tuned pair and they ran from 72px to 128px with no system behind the difference — a reader scrolling the page felt the spacing change under them. The full-bleed bands (the belt, the partners ribbon, the wall, the red call strip) are deliberately not on it: they are edge-to-edge devices between folds, not folds. */ --fold-y: clamp(3.75rem, 7vw, 6.5rem); --page: 1360px; --gutter: clamp(1.25rem, 4vw, 4.5rem); --fold: clamp(5rem, 9vw, 9rem); /* ======================================================================= 4. MOTION — one curve, three speeds, plus the belt's own duration since a marquee runs on a clock, not a curve. ======================================================================= */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.33, 0, 0.15, 1); --t-1: 0.3s; --t-2: 0.6s; --t-3: 0.9s; --t-belt: 32s; /* hero belt — one full loop */ --t-belt-fold2: 26s; /* fold 2 belt — a touch quicker, page has moved on */ --r-sm: 4px; --r-md: 16px; --r-pill: 999px; --hair: 1px; } @media (prefers-reduced-motion: reduce) { :root { --t-1: 1ms; --t-2: 1ms; --t-3: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ========================================================================= THE PHONE TYPE FLOOR Measured on a 390px viewport: ten separate things rendered under 12px — stat notes, blog dates, the footer's newsletter line and copyright, the menu's descriptions. All of them read --fs-nano, so the fix is the token, not ten rules. micro moves with it so the two do not collide, and the scale above nano is already comfortable at this size. ========================================================================= */ @media (max-width: 620px) { :root { --fs-nano: 0.78rem; /* 12.5px */ --fs-micro: 0.82rem; /* 13.1px */ --fs-xs: 0.86rem; } }