/* ========================================================================== Spark — design tokens Every value here is read out of the PSD comps rather than estimated: colours come from the documents' own fill descriptors, type sizes from their text-engine data, and the 1px rules from sampling the flattened renders. Three bands below: values shared by both comps, then the values measured from each comp separately. Page-specific layout lives in css/sponsorship.css and css/home.css, which may override --gutter / --content-width. ========================================================================== */ /* --- Fonts ---------------------------------------------------------------- */ /* Body — the real typeface from both comps (General Sans, free from Fontshare). The home comp adds Light and Bold to the weights the sponsorship comp used. */ @font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: block; } @font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; } @font-face { font-family: "General Sans"; src: url("../assets/fonts/GeneralSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; } /* Display — stand-in for the Bebas Neue Pro family, which is commercial. Oswald was chosen because its width-to-height proportions match Bebas Neue Pro to within 0.3% on mixed-case text, so only the size needs correcting, not the letter shapes. See reference/font-pick.html. The two comps use different Bebas cuts, so the substitute weights map: sponsorship BebasNeuePro-SmEBd -> Oswald 700 home BebasNeueBold, -Bold -> Oswald 700 home BebasNeuePro-Middle -> Oswald 500 home BebasNeuePro-Regular -> Oswald 400 Swapping in the licensed font later means replacing these @font-face rules and resetting --fs-display-* / --ls-display-* to the PSD values in comments. */ @font-face { font-family: "Spark Display"; src: url("../assets/fonts/Oswald-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "Spark Display"; src: url("../assets/fonts/Oswald-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: "Spark Display"; src: url("../assets/fonts/Oswald-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; } /* Caps display — the home comp's `BebasNeueBold`. Bebas Neue is that same typeface, free from Google, and it reproduces the comp's letterforms, widths and cap heights at ratio 0.991: near enough to 1:1 that only rounding separates them. It has no lowercase at all, which is exactly why the comp switches to the Pro cut (above) for its mixed-case headings. Single weight, so nothing here is synthesised. */ @font-face { font-family: "Spark Caps"; src: url("../assets/fonts/BebasNeue-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } /* ========================================================================== Shared — brand values, identical in both comps ========================================================================== */ :root { --font-body: "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-display: "Spark Display", "Oswald", ui-sans-serif, system-ui, sans-serif; --font-caps: "Spark Caps", "Bebas Neue", "Spark Display", ui-sans-serif, sans-serif; --bg: #000000; --surface: #070709; /* sponsorship card fill as rendered */ --orange: #F46902; --orange-lit: #FEA868; /* the lighten-blend highlight edge on home's pills */ /* Hover colour for every call to action. No comp draws a hover state, so this is a chosen value rather than a measured one: warm enough to read as gold next to the brand orange, light enough to hold 8.8:1 against black. Swap it here if brand has a specific gold. */ --gold: #F0B429; --gold-dim: rgb(240 180 41 / 0.34); /* the same colour as a glow */ /* One duration and one curve for the whole behaviour layer, so hovers, reveals and the carousel tilt all move with the same hand. */ --dur: 180ms; --dur-slow: 620ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --text: #FFFFFF; --text-2: #CDCDCD; --text-3: #A2A2A2; /* The home comp's one light band inverts the scheme. */ --paper: #FFFFFF; --ink: #000000; --card-edge-top: #A2A2A2; /* sponsorship cards carry a top-lit gradient border */ --card-edge-bottom: #272727; --ls-wide: 0.1em; /* PSD tracking 100 */ /* Header navigation. One component on all three pages now that it carries the same three destinations everywhere, so its values are shared rather than banded. Sizes come from the create-event comp, the only one of the three that draws the nav legibly. */ --fs-nav-link: 14.8px; /* PSD 15.25; solved on the comp's ink width */ --r-nav-pill: 2px; --nav-edge: rgb(255 255 255 / 0.22); /* the inactive buttons' outline */ /* Status pills on the opportunity cards. Not in any comp — the comp sets that line as orange text, and it is a status rather than a link. */ --status-open: #F46902; --status-closed: #8A8A8A; /* The site footer. Only the home comp draws one, but the same footer now closes all three pages, so its scale is shared rather than banded — these were .page-home values until sponsorship and create-event grew a footer. --r-footer-frame is the home comp's --r-panel under its own name: that token is still home-only (the trust panel uses it too), so the footer needed a radius it could carry off the page. */ --footer-rule: #323232; /* footer column dividers, brightening downward */ --r-footer-frame: 23px; /* the outlined link block, comp arc */ --fs-col-head: 24.1px; /* PSD 31.27, BebasNeuePro-Middle -> Oswald 500 */ --fs-footer-link: 17.15px; --fs-footer-legal: 18px; --lh-footer-legal: 22px; } /* ========================================================================== Sponsorship comp — PSD/spark web 1.psd (1366 x 2584) ========================================================================== */ :root { --crimson: #DB1F3D; /* one timeline dot; see note in sponsorship.html */ /* Every rule in this comp is a 1px gradient, not a flat line — measured off the flattened render, brightest end first. */ --rule-hero-end: #4C4C4C; /* hero rule: transparent on the left */ --rule-inset: #666667; /* above the featured stats: fades rightwards */ --rule-mid: #5F5F60; /* card column dividers: fade downwards */ --rule-faint: #272727; /* flat: dividers between hero categories */ --timeline-line: #FFFFFF; /* Phone-layout values. Here rather than in a page stylesheet because the phone blocks are the one place all three pages draw on the same set. */ --logo-hint: #9A9A9A; /* the wall's caption on the light band */ --logo-rule: #D8D8D8; /* dividing the logo wall's three groups, on the one light band — dark enough to read as a division, light enough not to compete with the marks it separates */ --rule-hairline: rgb(255 255 255 / 0.12); /* inside a card, over a fill */ --placeholder: #8C8C8C; /* was the form placeholders; the enquiry form is a Tally embed now, but the portfolio gate's footnote uses the same grey */ --tile-plate: #0E0E10; /* behind a tile while its photo loads */ --hero-cta-edge: #A76D43; /* the create-event hero's outline button: the photograph's own warm brown, so the button sits in the picture rather than on it */ --gutter: 54px; --content-width: 1258px; /* 1366 - 2 x 54 */ /* Radii fitted to the comp's own corner arcs, not guessed. */ --radius-card: 20px; --radius-panel: 18px; --radius-thumb: 4px; /* Oswald sizes are calibrated so rendered line widths and cap heights match the comp. The PSD's own Bebas Neue Pro size is noted after each. */ --fs-display-hero: 79.2px; /* PSD 91.4px */ --lh-display-hero: 90px; /* measured cap-top to cap-top */ --ls-display-hero: -0.0506em;/* pulls "SPONSORSHIP" back to the comp's 425px */ --fs-display-section: 38.7px;/* PSD 45px */ /* Body type — PSD values, used as-is. */ --fs-hero-sub: 27.1px; --lh-hero-sub: 37px; --fs-category: 14.3px; --fs-eyebrow: 18px; --fs-pill: 15.2px; --fs-meta: 13.3px; --fs-featured-body: 17.6px; --lh-featured-body: 21px; /* rendered pitch; the PSD's leading value is wrong */ --fs-stat-value: 27.8px; --fs-stat-word: 18.6px; --fs-stat-label: 14.5px; --fs-ribbon: 13.8px; --fs-card-eyebrow: 15.2px; --fs-card-title: 28px; --lh-card-title: 33px; --fs-card-body: 14px; --lh-card-body: 17px; --fs-stat-key: 13.3px; --fs-stat-val: 16px; --fs-cta: 13.8px; --fs-timeline-date: 15.5px; --fs-next-title: 22.1px; --fs-next-location: 10.5px; /* The closing CTA panel sizes everything in cqw so the copy stays registered to its flattened artwork at any width — see the .cta block in sponsorship.css. Its comp values are 38.7 / 24 / 22.1 / 15.8 / 15px. */ } /* ========================================================================== Home comp — PSD/spark web HOME.psd (1366 x 5315) ========================================================================== */ .page-home { /* --- Layout ------------------------------------------------------------ The comp's own left edges run anywhere from 27 to 106. The value that recurs and looks deliberate is 68.74 — all four section titles and the footer legal text sit on it — so that is the column. Everything else is treated as a deliberate overhang. */ --gutter: 68px; --content-width: 1230px; /* 1366 - 2 x 68 */ /* --- Colour ------------------------------------------------------------ */ /* The comp's nav gradient (#F17429 -> #CF2953), its #313131 divider rules and its 3px "Sign Up" radius all went with the header replacement. */ /* The hero pills carry a 3px #FEA868 stroke in lighten mode over an orange outer glow. Lighten over a photo and lighten over black do not land in the same place, so the filled pill and the two ghost pills are sampled apart. */ --pill-edge: #DE9147; --pill-edge-ghost: #A76D43; --caps-rule: #282828; /* capability column rules, fading downward */ --meta-edge: rgba(255, 255, 255, 0.42); /* card date pill: a 0.5px white stroke */ /* --- Radii, fitted to the comp's own arcs ------------------------------ */ --r-pill: 7px; --r-meta: 11px; --r-card: 19px; --r-panel: 23px; --r-cta: 30px; /* --- Display type ----------------------------------------------------- Two faces, because the comp uses two Bebas cuts: BebasNeueBold for everything in capitals and BebasNeuePro-* wherever it needs lowercase. Bebas Neue (free, caps-only) reproduces the first at ratio 0.991 — same letterforms, same widths, same weight, verified in reference/font-pick-home.html. Oswald stands in for the second. The PSD size is noted after each. Where a heading's ink width and its cap height disagree, cap height wins: the comp's cut has narrower figures than Bebas Neue, so the big numerals come out ~3% wide. That reverts cleanly once the licensed font is dropped in. */ --fs-hero: 111.6px; /* PSD 112.28 */ --lh-hero: 104px; /* measured cap-top to cap-top */ --fs-manifesto: 111px; /* PSD 112.14 */ --lh-manifesto: 107px; --fs-caps-h2: 74.9px; /* PSD 75.69 */ --fs-caps-title: 29px; /* PSD 29.07 */ --lh-caps-title: 43px; /* two-line titles, measured */ --fs-stat-big: 157.7px; /* PSD 159.16 */ --fs-stat-small: 84px; /* PSD 84.75 */ --fs-section-h2: 50.3px; /* PSD 66.85, BebasNeuePro-Bold -> Oswald 700 */ --fs-cta-line1: 71.5px; /* PSD 85.07, BebasNeuePro-Regular -> Oswald 400 */ --fs-cta-line2: 85.07px; /* General Sans Bold — the real face, as-is */ /* --- Body type — PSD values, used as-is -------------------------------- */ /* The header was replaced on instruction, so these two are the create-event comp's nav sizes rather than this comp's ~10px flattened lockup. That comp draws the same cluster legibly, and matching it makes the two headers one component instead of two. */ --fs-pill: 20.27px; --fs-manifesto-body: 19px; --lh-manifesto-body: 23px; /* rendered pitch; the PSD's leading is wrong */ --fs-eyebrow: 15px; /* tracking 200 */ --fs-view-all: 15px; /* tracking 100 */ --fs-trust-eyebrow: 22.78px; /* tracking 200 */ --fs-stat-label: 20px; /* tracking 100 */ --fs-stat-label-sm: 10.65px; /* tracking 100 — see README */ --fs-caps-body: 15px; --lh-caps-body: 18px; /* Card copy. Both carousels scale their cards, so these are the sizes at the card's own scale and are applied in em — see .opp / .story. */ --fs-card-cta: 8.66px; /* see README: below accessibility norms */ --fs-card-meta: 11.35px; --fs-story-title: 29.6px; /* PSD 29.88 at ratio 0.991 */ --fs-story-body: 14.29px; } /* ========================================================================== Create-your-own-event comp — PSD/spark web 2.psd (1366 x 2886) ========================================================================== */ .page-create { /* --- Layout ------------------------------------------------------------ This comp is asymmetric. Left edges cluster tightly — rules at 55, logo 61, tiles 69, section titles 70-73 — but right edges do not: the six horizontal rules stop at 1265, the tiles run to 1284, the hamburger to 1301. So the right gutter is anywhere from 65 to 101 against a 55 left. `.shell` centres its column, so --content-width has to be 1366 - 2 x 55 for the left edge to land on 55 at all. The rules then get their own width so they still stop at 1265. See README. */ /* The portfolio download gate. No comp draws it — the design arrived as a phone-only mockup — so these are its values, and the desktop dialog is built from the same set. */ --gate-bg: #0A0A0B; /* one step off the page black, so the sheet reads as a layer above it */ --gate-edge: rgb(244 105 2 / 0.5); --gate-scrim: rgb(0 0 0 / 0.72); /* The disabled-CTA pair. Unreferenced since the gate's fields became a Tally embed — their button is always live — but kept, because they are the design's own values and would have to be re-read from it otherwise. */ --gate-off: #2A2A2C; --gate-off-text: #6E6E71; --gutter: 55px; --content-width: 1256px; --rule-inset-right: 46px; /* 1311 - 1265 */ /* --- Colour ------------------------------------------------------------ */ --panel: #222121; /* process-card fill, and the horizontal rules */ --rule-h: #222121; /* six full-width section rules, flat */ --rule-v: #A2A2A2; /* column dividers, also flat — unlike the other two comps, which gradient theirs */ --field-edge: #A2A2A2; /* unused: see --placeholder above */ /* --- Radii, fitted to the comp's own arcs ------------------------------ */ --r-pill: 2px; /* header pill and hero button */ --r-field: 5px; /* unused: see --placeholder above */ --r-case: 19px; /* the comp draws 19 / 15 / 12 on three sibling cards; normalised — see README */ /* --- Display type ------------------------------------------------------ One family does all of it. The comp uses four cuts — BebasNeueBold, BebasNeueRegular, BebasNeueBook and BebasNeuePro-BoldItalic — and the free Bebas Neue we already ship stands in for every one of them. Sizes below are solved so the rendered ink width equals the comp's measured ink width; see reference/font-calibrate-2.html for the workings, and the PSD size is noted after each. Bold and Regular land at ratio 0.975-1.001, i.e. essentially 1:1. Book is a lighter cut with no free equivalent, so it needs ~4% off to match width and still renders marginally heavy. */ --fs-hero: 96.9px; /* PSD 97.40 */ --lh-hero: 83px; /* measured cap-top to cap-top */ --fs-h2-lg: 51.8px; /* PSD 51.88 */ --fs-h2: 49.98px; /* PSD 49.94 */ --fs-process-title: 33.9px; /* PSD 34.24 */ --lh-process-title: 29px; --fs-case-title: 32.2px; /* PSD 32.92 */ --fs-ready: 73.1px; /* PSD 74.93, BebasNeueRegular, tracking 100 */ --fs-footer-head: 108.7px; /* PSD 110.82 */ --lh-footer-head: 94px; --fs-obj-label: 24.5px; /* PSD 25.22, BebasNeueBook */ --lh-obj-label: 28px; --fs-caps-label: 18.1px; /* PSD 18.88, BebasNeueBook */ --lh-caps-label: 26px; /* The two italic cuts. The tile labels calibrate cleanly on width; the big numerals do not, because this comp's figures are far narrower than free Bebas Neue's — matching width would need 73-84px depending on which digits the number contains, which is not a size. Cap height wins instead, exactly as the home comp resolved the same conflict: 67px of cap height puts the size at 93 and the digits render wide. Reverts cleanly with the licensed font. */ --fs-tile-label: 23.2px; /* PSD 23.46, BebasNeuePro-BoldItalic */ --lh-tile-label: 29px; --fs-numeral: 93px; /* PSD 92.59, matched on cap height not width */ --ital-slant: -7.59deg; /* measured off the tile labels' ink */ /* --- Body type — General Sans Regular throughout, PSD values as-is ----- */ --fs-hero-body: 25.41px; --lh-hero-body: 29px; --fs-button: 15px; /* tracking 100 */ --fs-eyebrow: 13.87px; /* tracking 100 */ --fs-link-small: 12.93px; /* "EXPLORE OUR WORKS" etc, tracking 100 */ --fs-process-body: 13.64px; --lh-process-body: 16.5px; /* rendered pitch; the PSD's leading is wrong */ --fs-case-body: 13.12px; --lh-case-body: 15px; --fs-case-tag: 10.97px; --fs-footer-body: 22px; /* tracking 100 */ --lh-footer-body: 26px; --fs-field: 15px; /* tracking 100 — still used by .enquiry__alt */ --fs-submit: 15.49px; /* unused: see --placeholder above */ }