/* ========================================================================== Design tokens — taken from mohammedzohaib.com. Measured off the live brand site rather than guessed: type Tenor Sans (headings, uppercase) + Poppins 300/400/500/600 surfaces #050505 #0f0f0f #181818 — neutral black, not blue-black ink white, and white at 85% for secondary copy accent none. See the correction below. THERE WAS NEVER A BRAND RED. #720000 was taken from mohammedzohaib.com and called "the brand red" — but it came from `a.btn-3x`, the "Visit 3X Capital" button, which advertises a different company. Re-checked against the live site: rgb(114,0,0) occurs there exactly twice, on that button and its arrow, and nowhere else. The only other colours on the whole page are YouTube's #d31616 and WhatsApp's #25d366, both third-party marks on their own buttons. His palette is black, white and grey. That is all of it. v2.2.0 removed the two backgrounds painted in it. v2.3.0 removed the red entirely, on the client's decision: --accent and --accent-text are white, and the #720000 slug is gone from theme.json. Emphasis is carried by the ink ramp and by weight, size and underline. Two colours deliberately survive, because neither is a brand colour: --green the confirmation tick. Status, not identity. --alert form errors. Removing colour from an error message makes a form measurably harder to recover from. These mirror theme.json. Change a value in both places or neither. ========================================================================== */ :root { /* ---- Surface — the brand's own blacks, in order of elevation --------- */ --bg: var(--wp--preset--color--bg, #050505); --bg-2: var(--wp--preset--color--bg-2, #0f0f0f); --surface: var(--wp--preset--color--surface, #181818); --surface-2: var(--wp--preset--color--surface-2, #232323); /* ---- Rules ---------------------------------------------------------- * line / line-2 are decorative hairlines and sit below 3:1 on purpose. * line-3 is the only one allowed on a control boundary — an input or a * choice pill is a UI component and owes 3:1 under WCAG 1.4.11. * -------------------------------------------------------------------- */ --line: var(--wp--preset--color--line, #262626); --line-2: var(--wp--preset--color--line-2, #333333); --line-3: var(--wp--preset--color--line-3, #666666); /* 3.55:1 on --bg */ /* ---- Ink — neutral greys, matching the brand's white-on-black -------- */ --ink: var(--wp--preset--color--ink, #ffffff); /* 20.4:1 */ --ink-2: var(--wp--preset--color--ink-2, #b3b3b3); /* 9.7:1 */ --ink-3: var(--wp--preset--color--ink-3, #8a8a8a); /* 5.9:1 */ /* ---- Emphasis ------------------------------------------------------- * Both are white. There is no accent colour, because the brand does not * have one — see the correction at the top of this file. * * The names are kept rather than renamed to --emphasis: they are declared * in theme.json as palette slugs, which WordPress bakes into * --wp--preset--color--*, and renaming a slug orphans any block that has * already been saved with it. The role has changed; the key has not. * * Hierarchy now comes from the ink ramp above, not from hue. White is the * loudest thing available, so anything painted with these two tokens is * claiming to be the most important mark in its component — if that is not * true, use --ink-2, --ink-3 or --line-3 instead. * * Both are 20.4:1 on --bg, so nothing here can fail a contrast check. * -------------------------------------------------------------------- */ --accent: var(--wp--preset--color--accent, #ffffff); --accent-text: var(--wp--preset--color--accent-text, #ffffff); --green: var(--wp--preset--color--green, #35c184); --alert: var(--wp--preset--color--alert, #e0654f); /* ---- Type ----------------------------------------------------------- * Tenor Sans ships one weight (400). Never ask for bold — the browser * will synthesise it and the letterforms fall apart at display size. * Poppins covers 300-600; there is no 700. * -------------------------------------------------------------------- */ --display: var(--wp--preset--font-family--display, "Tenor Sans", Optima, "Gill Sans", "Segoe UI", sans-serif); --sans: var(--wp--preset--font-family--sans, "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif); --t-micro: 12px; --t-small: 14px; --t-body: 16px; --t-lead: clamp(17px, 1.15vw + 13px, 20px); --t-h3: clamp(19px, 1.1vw + 14px, 24px); --t-h2: clamp(24px, 2vw + 16px, 36px); /* Capped at 34, down from 46 in v2.1.0 and 58 before that. Each cut was the same trade: the headline is 47 characters of uppercase Tenor Sans, and every line it takes comes straight off the video. The client asked for the video bigger and the heading smaller, which is the same instruction twice — at 34 the headline holds two lines on a laptop and hands roughly 90px back to the player. */ --t-h1: clamp(21px, 1.7vw + 13px, 34px); /* Uppercase display copy needs air between the letters and less between the lines than mixed case does. */ --track-display: .045em; --track-caps: .16em; /* ---- Space ----------------------------------------------------------- */ --s-xs: 12px; --s-s: 20px; --s-m: clamp(28px, 3.5vw, 44px); --s-l: clamp(44px, 6vw, 72px); --s-sec: clamp(64px, 8vw, 112px); /* ---- Layout ---------------------------------------------------------- */ --max: var(--wp--custom--max-width, 1180px); --narrow: 680px; --pad: var(--wp--custom--pad, 22px); --radius: var(--wp--custom--radius, 12px); --pill: 999px; /* ---- Depth — every shadow carries an offset and a soft blur ---------- */ --lift-1: 0 2px 10px rgba(0, 0, 0, .45); --lift-2: 0 14px 38px -12px rgba(0, 0, 0, .78); --lift-3: 0 30px 80px -28px rgba(0, 0, 0, .9); /* ---- Motion ---------------------------------------------------------- * Five registers, and everything in the theme picks one: * * press 90ms :active only. Always faster than the release — * that asymmetry IS the physics, no spring library. * feedback 180ms hover, focus, colour * commit 320ms pill select, toggle — things you touched. * All five use --ease; there is no overshoot anywhere. * A press reads as physical from the timing asymmetry * (90ms down against 220ms up), not from a rebound. * arrival 760ms reveals, panels, cards * authored 1400ms one moment per page. A hard ceiling, not a target. * -------------------------------------------------------------------- */ --ease: cubic-bezier(.16, 1, .3, 1); /* arrivals */ --ease-soft: cubic-bezier(.33, 1, .68, 1); /* ambient, loops */ --ease-in: cubic-bezier(.55, 0, 1, .45); /* exits */ --dur-micro: 90ms; --dur-fast: 180ms; --dur: 320ms; --dur-slow: 760ms; --dur-cine: 1400ms; /* The single translate distance. Reduced motion sets these to 0 and every travel in the theme becomes a pure crossfade with its timing structure intact — that is the whole reduced-motion strategy, in two variables. */ --travel: 14px; --travel-lg: 22px; }