/* ═══════════════════════════════════════════════════════════════════ hotline — the shared type + token layer for all six takes. Six pieces, one system: three billboards and three mini sites for the 1-800-WABI / (855) TRY-WABI campaign. Every piece pulls its faces and its colour from here so the family holds together even where the registers are deliberately miles apart. Faces Publico Banner Ultra the fat newspaper serif — the shouted register Canela the flared editorial serif — the quiet register Graphik XX Condensed condensed caps — billboard metadata, silkscreen Orleans Fat the 19th-c fat face — late-night TV numbers Selecta Wabi's own grotesque (Regular + Medium only) Kalice Wabi's own serif Klim / Commercial trial licences: these are TRIAL cuts. Fine for internal proofs and comps, not for a printed board — swap in licensed files before anything goes to a press. ═══════════════════════════════════════════════════════════════════ */ @font-face{font-family:Publico;src:url('../fonts/PublicoBanner-Ultra-Trial.otf') format('opentype');font-weight:900;font-display:block} @font-face{font-family:Publico;src:url('../fonts/PublicoBanner-Black-Trial.otf') format('opentype');font-weight:800;font-display:block} @font-face{font-family:Canela;src:url('../fonts/Canela-Black-Trial.otf') format('opentype');font-weight:800;font-style:normal;font-display:block} @font-face{font-family:Canela;src:url('../fonts/Canela-BlackItalic-Trial.otf') format('opentype');font-weight:800;font-style:italic;font-display:block} @font-face{font-family:Canela;src:url('../fonts/Canela-Light-Trial.otf') format('opentype');font-weight:300;font-style:normal;font-display:block} @font-face{font-family:Canela;src:url('../fonts/Canela-LightItalic-Trial.otf') format('opentype');font-weight:300;font-style:italic;font-display:block} @font-face{font-family:Board;src:url('../fonts/GraphikXXCondensed-Super-Trial.otf') format('opentype');font-weight:900;font-display:block} @font-face{font-family:Board;src:url('../fonts/GraphikXXCondensed-Bold-Trial.otf') format('opentype');font-weight:700;font-display:block} @font-face{font-family:Board;src:url('../fonts/GraphikXXCondensed-Medium-Trial.otf') format('opentype');font-weight:500;font-display:block} @font-face{font-family:Orleans;src:url('../fonts/Orleans-Fat-Trial.otf') format('opentype');font-style:normal;font-display:block} @font-face{font-family:Orleans;src:url('../fonts/Orleans-FatItalic-Trial.otf') format('opentype');font-style:italic;font-display:block} @font-face{font-family:Selecta;src:url('../fonts/Selecta-Regular.otf') format('opentype');font-weight:400;font-display:swap} @font-face{font-family:Selecta;src:url('../fonts/Selecta-Medium.otf') format('opentype');font-weight:500;font-display:swap} @font-face{font-family:Kalice;src:url('../fonts/Kalice-Regular.woff2') format('woff2');font-weight:400;font-display:swap} :root{ /* wabi.ai's own two colours, exactly */ --paper:#f0f0f0; --ink:#191919; --ink-70:rgba(25,25,25,.70); --ink-45:rgba(25,25,25,.45); --ink-22:rgba(25,25,25,.22); --ink-10:rgba(25,25,25,.10); /* the late-night TV field — a video blue, high chroma, slightly violet */ --tv-blue:#151ec4; --tv-blue-deep:#0a0d78; --tv-gold:#ffd94a; --tv-gold-hi:#fff6c4; --tv-gold-lo:#a5670f; --tv-white:#f4f2ea; /* the object register: one hot accent, a phone red */ --red:#c4392c; --red-lo:#8d2318; --red-hi:#e8705f; /* brushed steel + the dial's card stock */ --cream:#faf6ec; --steel-hi:#efece6; --steel:#c9c6bf; --steel-lo:#8d8b85; --steel-deep:#5c5a56; --ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box} html,body{margin:0;padding:0} /* ── the metadata voice every piece shares: condensed caps, tracked ── */ .meta{ font-family:Board,'Helvetica Neue',sans-serif;font-weight:500; text-transform:uppercase;letter-spacing:.14em; font-size:13px;line-height:1.45; } /* An all-caps face centres its em box, not its ink. Board's caps sit high, so anything set in a pill or a button splits its padding — see `caps-sit-high-in-a-pill`. --cap-drop is that correction, as a FRACTION of the control's own vertical padding. ⚠️ UNITLESS, and this is not a style preference. It is used as `calc(13px + var(--cap-drop) * 14px)`, and ` × ` is invalid in calc — so with `.055em` here the whole padding shorthand was thrown away and every button on all three sites computed to 0px of padding. `/listing/`'s "CALL NOW" was 16px tall against a 44pt target, with a 999px radius biting the first letter off. One character. */ :root{ --cap-drop:.055 } /* ── the chrome-bevel number ─────────────────────────────────────── Late-night television did not have a chrome font; it had a bevel filter and a gold ramp. So this is three stacked copies of one string: an outline and drop-stack behind, the gold ramp clipped to the glyphs on top, and a specular sliver across the cap line. Text is only in one of them for a screen reader — the others are aria-hidden. */ .chrome{ position:relative; display:inline-block; white-space:nowrap } .chrome > span{ position:absolute; inset:0; display:block } .chrome > .ch-flow{ position:relative; color:transparent } .chrome .ch-back{ color:#2b1400; -webkit-text-stroke:.052em #24100a; text-shadow: 0 .014em 0 #8d5209, 0 .028em 0 #6a3c06, 0 .042em 0 #4a2904, 0 .058em .012em rgba(0,0,0,.65), 0 .1em .06em rgba(0,0,0,.45); } .chrome .ch-face{ background-image:linear-gradient(180deg, #fff9d0 0%, #ffe98a 20%, #ffcf3a 40%, #b06b0d 50.5%, #7d4906 52%, #ffe07a 57%, #ffd049 74%, #f0a91f 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .chrome .ch-spec{ background-image:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 11%, rgba(255,255,255,0) 22%); -webkit-background-clip:text; background-clip:text; color:transparent; } .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}