/* Tunji Idowu - approved design tokens (v2: navy / gold, Playfair + Montserrat). Source: WordPress Architecture.md section 4. SCOPED, DELIBERATELY. These tokens are declared on the route's own body class rather than on :root, so they exist only on the routes that opt in. Home, Story, Ideas and Connect keep the earlier umber layer in app.css untouched and cannot inherit anything from here. That scoping is the whole point of building My Work first: the approved visual system gets proven in production on a room nobody has published yet, and the four live routes carry none of the risk. When the global migration happens these declarations move to :root and this file's scoping disappears - the token names do not change, so nothing that consumes them has to be rewritten. Custom properties inherit, so declaring them on reaches every element inside the page. */ :root { /* Grounds */ --ti2-navy: #0D1B2A; --ti2-navy-2: #10202F; --ti2-plate: #132639; --ti2-paper: #DCD7CB; --ti2-ivory: #F4F2ED; --ti2-bone: #FBFAF6; --ti2-warm: #CFC8B8; /* Accent */ --ti2-gold: #C8A153; --ti2-gold-ink: #6E5217; /* Ink */ --ti2-slate: #16283C; --ti2-dune: #E6E2DA; --ti2-muted: #5A6270; /* Alpha compositing. Kept as channel triplets so a rule can set its own opacity without hard-coding a fourth colour for every transparency. */ --ti2-gold-rgb: 200, 161, 83; --ti2-navy-rgb: 13, 27, 42; --ti2-dune-rgb: 230, 226, 218; --ti2-ivory-rgb: 244, 242, 237; /* Slate, the approved secondary. Named in the brand system; the four frozen rooms carry their own #5A6270 / #31445A inside their compositions and are not touched by this migration. */ --ti2-slate-2: #6B7280; /* Type */ --ti2-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --ti2-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Measure. The export sets these per element; naming them keeps the page stylesheet readable and the values in one place. */ --ti2-shell: 1440px; --ti2-gutter: clamp(20px, 4.4vw, 56px); /* Motion */ --ti2-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ti2-rise: 800ms; } /* Legacy's own grounds. A separate block, not additions to the shared one above, because Legacy and My Work do not agree on every value: the Legacy export's page ground is #FBF8F1 where My Work's Writing panel is #FBFAF6. Redefining a shared token would silently restyle a frozen page, so the values that differ get their own names and the two rooms stay independent. Both still draw navy, gold and ink from the shared block, which is what keeps them one brand. */ .ti-route-legacy { --ti2-lg-ground: #FBF8F1; /* page ground */ --ti2-lg-band: #F5F0E4; /* alternating band: Ministry, Prize */ --ti2-lg-frame-a: #EDE6D6; /* reserved photography, on band */ --ti2-lg-frame-b: #F1EADC; /* reserved photography, on ground */ --ti2-lg-caption: #6B6455; /* figure captions and quiet register */ /* The gold thread's origin. Every node is positioned from this one value, so the dots stay centred on the line at every width instead of being given their own coordinates to drift out of step with. */ --ti2-lg-thread-x: 22px; --ti2-lg-content-x: 46px; } @media (min-width: 900px) { .ti-route-legacy { --ti2-lg-thread-x: clamp(48px, 6vw, 96px); --ti2-lg-content-x: clamp(80px, 9vw, 150px); } } /* Ideas & Engagements grounds. A third room, a third set of grounds. Ideas opens on #F7F5EF — the architecture's primary paper — where My Work opens on #DCD7CB and Legacy on #FBF8F1. Three different values for "the page", because the exports say so and because each room is meant to feel like its own. Navy, gold and ink stay shared: that is what makes them one site. */ .ti-route-ideas, .ti-route-ti_idea { --ti2-id-ground: #F7F5EF; /* page ground */ --ti2-id-warm: #EDE9DF; /* engagement and library ground */ --ti2-id-screen: #10202F; /* screening room */ --ti2-id-plate: #1C3348; /* reserved broadcast still */ --ti2-id-frame: #132639; /* video frame ground */ --ti2-id-poster: #E7E2D6; /* message poster ground */ --ti2-id-session: #E3DDCD; /* reserved session photograph */ --ti2-id-slate2: #31445A; /* secondary running text */ } /* Story's own grounds. The fourth room, and the first to open on navy rather than a light ground — Story begins in the dark and moves into the light, which is the page's whole shape. It also uses a different gold-ink: #7E621E, where My Work and Legacy use #6E5217. A small difference, but a real one in the export, so it gets its own token rather than being rounded to a value it is not. */ .ti-route-about { --ti2-st-ink: #7E621E; /* gold-family text on light — Story's own */ --ti2-st-plate: #132639; /* reserved portrait ground */ --ti2-st-dune: #E6E2DA; /* Life beyond the boardroom ground */ --ti2-st-hover: #EDEAE1; /* card hover on the light ground */ --ti2-st-muted: #5A6270; /* register labels */ } /* Home's own values. Home is where the brand states itself, so it carries the widest range of the system in one page: navy for the hero, the frameworks and the close, ivory for the reading sections, warm gray for the writing band. Its shell is 1360px rather than the rooms' 1440px, which is the export's own measure and the reason Home reads slightly tighter than My Work beside it. */ /* Connect's own grounds. The last room, and the one that has to hold a form. Its page ground is #F7F5EF — the architecture's primary paper, the same value Ideas opens on — while the form card sits a shade warmer and brighter than the page so it reads as an object laid on it rather than a panel cut out of it. The field ground is plain white, which is the export's, and the only surface on the site that is. The validation colour is #8A2B2B, not the #9E3B22 the older shell carries. The export is explicit about it, and a form is the one place on a site where the error colour has to be exactly the approved one. */ .ti-route-connect { --ti2-cn-ground: #F7F5EF; /* page ground below the navy band */ --ti2-cn-card: #FFFDF8; /* the form card */ --ti2-cn-field: #FFFFFF; /* input and textarea ground */ --ti2-cn-muted: #5A6270; /* field labels and the privacy line */ --ti2-cn-error: #8A2B2B; /* validation */ } .ti-route-home { --ti2-hm-shell: 1360px; /* narrower than the rooms, per the export */ --ti2-hm-ink: #7E621E; /* gold-family text on light grounds */ --ti2-hm-ink-2: #8A6B22; /* the Legacy teaser's heading emphasis */ --ti2-hm-slate: #31445A; /* secondary body on light */ --ti2-hm-muted: #5A6270; /* registers and eyebrows */ --ti2-hm-plate: #132639; /* the portrait's ground before it loads */ }