/* ========================================================================== kangomo — Open Ground Tokens: one colour key (ember) x two light conditions. Every surface in the build reads semantic names only (--ground, --ink, --brand, --pulse ...). The two blocks below are the only place a hex literal is allowed to live, which is what makes the light/dark switch a one-attribute flip on . (The demo's second key, grove, is in redesign_demo/web/css/tokens.css.) ========================================================================== */ @import url('fonts.css'); :root { /* -- Shape ---------------------------------------------------------- */ --r-xs: 7px; --r-sm: 12px; --r: 18px; --r-lg: 28px; --r-xl: 44px; --r-pill: 999px; /* -- Measure -------------------------------------------------------- */ --gutter: clamp(20px, 5vw, 64px); --maxw: 1320px; --section: clamp(64px, 9vw, 132px); --measure: 62ch; --read: 72ch; /* -- Type ----------------------------------------------------------- */ --display: 'Gabarito', system-ui, sans-serif; --body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* The ramp, named. Page stylesheets reference these and never a literal, which is what stops eighteen steps becoming a smear of thirty-one. 11px is the floor: nothing functional is set smaller. */ --t-display: clamp(3rem, 7.4vw, 6rem); /* the landing page only */ --t-display-2: clamp(2.5rem, 5.2vw, 4rem); /* every other page's h1 */ --t-headline: clamp(2rem, 4.2vw, 3.2rem); --t-title: clamp(1.4rem, 2.5vw, 1.95rem); --t-subtitle: clamp(1.12rem, 1.7vw, 1.3rem); --t-figure: clamp(2rem, 3.6vw, 2.9rem); /* counted numbers */ --t-lede: clamp(1.08rem, 1.5vw, 1.28rem); --t-body: 17px; --t-note: 15.5px; --t-nav: 15px; --t-label: 14.5px; --t-meta: 14px; --t-small: 13.5px; --t-caption: 13px; --t-micro: 12.5px; --t-tiny: 12px; --t-legend: 11.5px; --t-pip: 11px; /* the wordmark is a lockup, not body copy: three sizes, used everywhere */ --mark: 28px; --mark-sm: 24px; --mark-lg: 34px; /* -- Motion --------------------------------------------------------- */ --ease: 520ms cubic-bezier(0.16, 1, 0.3, 1); --ease-s: 260ms cubic-bezier(0.16, 1, 0.3, 1); --ease-xs: 140ms cubic-bezier(0.16, 1, 0.3, 1); /* The general curve: fast out, settles, no overshoot. Used by every thumb, icon, pin and panel — 24 elements — where a bounce would read as a tic rather than as life. */ --spring: 540ms cubic-bezier(0.22, 1, 0.26, 1); /* The one overshoot in the build, for the one thing that is literally a hop: the wordmark's letters. A kangaroo brand gets exactly one bounce. */ --hop: 700ms cubic-bezier(0.34, 1.56, 0.64, 1); --out: cubic-bezier(0.16, 1, 0.3, 1); /* -- The light source, moved by the pointer ------------------------- */ --mx: 0.26; --my: 0.22; /* Shadows answer to the light rather than pointing straight down */ --sx: calc((0.5 - var(--mx)) * 30px); --sy: calc((0.5 - var(--my)) * 14px + 12px); } /* ====================================================================== EMBER - warm sand ground, deep rust action, hot orange pulse ====================================================================== */ :root[data-palette='ember'][data-mode='light'] { color-scheme: light; --ground: #f2e1d4; --ground-2: #fbf1e9; /* The masthead. It used to be --ground-2, which on a warm sand page was all but the page itself; a step down gives the bar an edge without turning it into a dark strip. */ --top: #ecd9c8; --ground-3: #e5c9b5; --ground-edge: #d7b49c; --field: #6a2312; --field-2: #7c3811; --on-field: #fceee4; --on-field-2: #e0b9a3; --on-field-3: #cb9e85; --surface: rgba(255, 253, 251, 0.58); --surface-2: rgba(255, 253, 251, 0.94); --surface-solid: #fdf5ee; --surface-sunk: rgba(106, 35, 18, 0.06); --ink: #23110a; --ink-2: #4e3025; --ink-3: #6b4a3d; --brand: #9a2e13; --brand-hot: #71200b; --on-brand: #fff3ea; --brand-soft: #f0cebb; --brand-wash: rgba(154, 46, 19, 0.09); --second: #855015; --on-second: #fdf2e7; --second-soft: #f2d9bd; --pulse: #e9571f; --pulse-hot: #fa6f34; --pulse-ink: #b23508; --on-pulse: #2b0d03; --pulse-field: #ffa176; --pulse-wash: rgba(242, 98, 44, 0.16); --warn: #6f520b; --warn-wash: rgba(125, 92, 13, 0.15); --bad: #8d2049; --bad-wash: rgba(141, 32, 73, 0.13); --line: rgba(35, 17, 10, 0.16); /* a followed rider's row: one shade into the ground in daylight */ --fav-row: rgba(35, 17, 10, 0.07); --shadow: 58, 26, 12; --shadow-a: 0.11; --grain: 0.34; --lit-1: rgba(255, 246, 232, 0.95); --lit-2: rgba(248, 224, 196, 0.5); --lit-3: rgba(229, 201, 181, 0); /* The map is neutral, not the page's sand: MapTiler basic-v2 in ../user-redesign is the reference, and a brown ground read as mud under the courses. The page around it keeps its warmth. */ --map-ground: #efefe9; --map-water: #c6d4db; --map-waterway: #a4b9c4; --map-road: #fbfbf8; --map-road-major:#ffffff; --map-label: #4a4c48; --map-halo: rgba(250, 250, 246, 0.92); } :root[data-palette='ember'][data-mode='dark'] { color-scheme: dark; /* Dusk, not a cellar. The grounds and inks below are the dark palette of ui/velotrace/user-redesign ("Paper & Coral"): warm brown-grey rather than near-black, which is what the near-black ground here used to be. The ember accents are unchanged and still clear the lighter ground. */ --ground: #241c1a; --ground-2: #2e2422; --top: #1c1513; --ground-3: #352a27; --ground-edge: #57433c; --field: #4a2318; --field-2: #5e3220; --on-field: #f8e5d8; --on-field-2: #cc9e83; --on-field-3: #b98d73; --surface: rgba(255, 233, 216, 0.06); --surface-2: rgba(255, 233, 216, 0.13); --surface-solid: #2e2422; --surface-sunk: rgba(0, 0, 0, 0.26); --ink: #f4e9e3; --ink-2: #c8b3aa; --ink-3: #9a847c; --brand: #ff8a5c; --brand-hot: #ffab86; --on-brand: #2a0c02; --brand-soft: rgba(255, 138, 92, 0.18); --brand-wash: rgba(255, 138, 92, 0.10); --second: #e2a44c; --on-second: #2a1806; --second-soft: rgba(226, 164, 76, 0.18); --pulse: #ff6a30; --pulse-hot: #ff9468; --pulse-ink: #ff916a; --on-pulse: #2a0c02; --pulse-field: #ffab86; --pulse-wash: rgba(255, 106, 48, 0.17); --warn: #dcb04a; --warn-wash: rgba(220, 176, 74, 0.16); --bad: #e86b95; --bad-wash: rgba(232, 107, 149, 0.16); --line: rgba(244, 233, 227, 0.16); /* and one shade out of it at dusk, where deeper would read as disabled */ --fav-row: rgba(244, 233, 227, 0.1); --shadow: 0, 0, 0; --shadow-a: 0.46; --grain: 0.4; --lit-1: rgba(122, 56, 26, 0.4); --lit-2: rgba(72, 33, 16, 0.26); --lit-3: rgba(36, 28, 26, 0); /* sampled from the reference's basic-v2-dark: olive-grey ground, grey roads, teal water, pale grey names on a near-black halo */ --map-ground: #24281d; --map-water: #1b2a33; --map-waterway: #23404a; --map-road: #30312e; --map-road-major:#4b4c4a; --map-label: #cdcdcb; --map-halo: rgba(8, 9, 7, 0.85); } /* -- Derived, palette-independent ------------------------------------- */ :root { --lift: calc(var(--sx) * 0.3) calc(var(--sy) * 0.3) 10px rgba(var(--shadow), calc(var(--shadow-a) * 0.7)), var(--sx) var(--sy) 30px rgba(var(--shadow), var(--shadow-a)); --lift-2: calc(var(--sx) * 0.45) calc(var(--sy) * 0.45) 16px rgba(var(--shadow), calc(var(--shadow-a) * 0.85)), calc(var(--sx) * 1.7) calc(var(--sy) * 1.7) 54px rgba(var(--shadow), calc(var(--shadow-a) * 1.25)); --lift-3: calc(var(--sx) * 0.5) calc(var(--sy) * 0.6) 22px rgba(var(--shadow), var(--shadow-a)), calc(var(--sx) * 2.2) calc(var(--sy) * 2.4) 80px rgba(var(--shadow), calc(var(--shadow-a) * 1.4)); }