/* ============================================================ PREMIER — DESIGN TOKENS · v4.0 "cold luxury" ------------------------------------------------------------ v3 took its rhythm from Tishman. v4 keeps that rhythm but changes the REGISTER, taken from 111 West 57th: enormous display type set close to the page edge, micro UI, low contrast, vast emptiness. THE ONE RULE THAT MATTERS — temperature. Warm cream + low contrast + no saturated colour is the "AI-generated" cluster, and it is death for this client. 111W57 is not actually a taupe site: its ground is #B5B5B5, a NEUTRAL-COLD grey, with taupe used only as large flat fields. What separates luxury from slop is: cold ground + low contrast + ONE saturated anchor + hard geometry + extreme scale contrast Premier's anchor is the brick red. Because the red does the anchoring, this palette can sit lower in contrast than most. So: never warm anything. Cool it. Keep the red full strength. NOTE ON clamp(): + and - inside clamp()/calc() REQUIRE spaces on both sides or the whole declaration is dropped and the size silently falls back to 16px. This cost us a whole version. ============================================================ */ /* ---- Tiempos. Trial ("Test") cuts — Personal Use Only. Replace with a purchased Klim web licence before go-live. ---- */ @font-face{font-family:'Tiempos Headline';src:url('../fonts/tiempos/TiemposHeadline-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Tiempos Headline';src:url('../fonts/tiempos/TiemposHeadline-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Tiempos Headline';src:url('../fonts/tiempos/TiemposHeadline-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Tiempos Text';src:url('../fonts/tiempos/TiemposText-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Tiempos Text';src:url('../fonts/tiempos/TiemposText-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Tiempos Text';src:url('../fonts/tiempos/TiemposText-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap} :root{ /* ---- Fonts ---- */ --font-display:'Tiempos Headline','Newsreader','Times New Roman',Georgia,serif; --font-serif:'Tiempos Text','Newsreader',Georgia,serif; --font-ui:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --font-mono:'Spline Sans Mono',ui-monospace,monospace; /* ---- The anchor. Full strength, never tinted down. ---- */ --red: #98202A; --red-deep: #5E1017; --red-mid: #7C1A22; --red-bright: #B83A34; /* ---- Cold neutrals. Every one of these is neutral or blue-leaning; nothing here drifts to cream. ---- */ --stone: #EAEAE7; /* page ground — cold limestone */ --stone-deep: #DEDEDA; --surface: #F2F2EF; --silver: #C7C9CA; /* large flat field (where 111W57 uses taupe) */ --graphite: #63696B; --graphite-dk:#3B4042; --ink: #17191A; /* overlay only */ /* ---- Semantic. No pure black: the darkest text is graphite, which lowers contrast and cools in a single move. Still ~8:1 on the ground — low in FEEL, not in legibility. ---- */ --bg:var(--stone); --text:var(--graphite-dk); --text-soft:var(--graphite); --text-faint:#83888A; /* decorative only — see note below */ --display-ink:#4A5052; /* display type sits lighter than body */ /* --text-faint is for decoration only (section index, placeholder labels). Anything a user must READ — links, legal, labels — takes --text-soft, which clears 6:1 on the ground. Low contrast is a look, not an excuse. */ --line:rgba(59,64,66,.16); --line-strong:rgba(59,64,66,.30); --dark-text:#EDEDEA; --dark-text-soft:#B9BCBD; --dark-line:rgba(237,237,234,.18); /* ============================================================ TYPE SCALE — pushed up hard. The reference runs its statements at ~66px on a 1280 viewport; v3 ran at 55px on 1440. The jump in scale is most of the jump in perceived level. ============================================================ */ --t-micro:clamp(0.62rem, 0.60rem + 0.10vw, 0.72rem); /* micro buttons, labels */ --step--1:clamp(0.74rem, 0.70rem + 0.14vw, 0.84rem); /* captions */ --step-0: clamp(0.98rem, 0.95rem + 0.12vw, 1.08rem); /* body */ --step-1: clamp(1.05rem, 0.98rem + 0.28vw, 1.30rem); /* sub */ --step-2: clamp(1.40rem, 1.10rem + 1.10vw, 2.30rem); /* small statement */ --step-3: clamp(1.60rem, 0.90rem + 2.80vw, 3.80rem); /* lead → 50px@1280 */ --step-4: clamp(2.20rem, 1.10rem + 4.20vw, 5.60rem); /* statement → 71px@1280 */ --step-5: clamp(2.80rem, 1.60rem + 4.60vw, 7.00rem); /* nav overlay */ --display:clamp(3.00rem, 1.60rem + 6.00vw, 9.00rem); --t-stat: clamp(2.00rem, 1.10rem + 3.20vw, 4.40rem); /* figures → 58px@1280 */ --t-motto:clamp(1.90rem, 1.00rem + 3.40vw, 4.60rem); /* hero line → 60px@1280 */ /* ---- Leading: tight on display, open on body ---- */ --lh-statement:1.06; --lh-lead:1.18; --lh-body:1.6; /* ---- Spacing ---- */ --s-2xs:.5rem; --s-xs:.75rem; --s-s:1rem; --s-m:1.75rem; --s-l:3rem; --s-xl:5rem; --s-2xl:8rem; --s-3xl:12rem; --s-block:clamp(3.5rem, 7vw, 8rem); /* ============================================================ LAYOUT — the margin is the other half of the register. Tishman sits at 8.3%; 111W57 at 1.4%, effectively edge to edge. 3.2% lands close to the reference without the type colliding with the bezel on a laptop. → 41px at 1280 ============================================================ */ --container:1440px; --container-wide:1800px; --measure:60ch; --gutter:clamp(1.25rem, 3.2vw, 4rem); --grid-gap:clamp(1rem, 2.2vw, 2.6rem); --radius:0; /* hard geometry — nothing rounded */ --header-h:104px; --header-h-sm:70px; /* ---- Motion ---- */ --ease:cubic-bezier(0.16,1,0.3,1); --ease-mat:cubic-bezier(0.22,0.61,0.36,1); --dur-slow:1.2s; --dur-med:.7s; --dur-fast:.35s; --stripe-angle:122deg; } @media (prefers-reduced-motion:reduce){:root{--dur-slow:.01ms;--dur-med:.01ms;--dur-fast:.01ms}}