/* =========================================================================== TOKENS. The whole re-skin surface for this site. Family: porcelain editorial. Warm paper, hairline rules, one serif that carries the page, and exactly one colour spent sparingly. Every contrast figure written in this file was computed with the WCAG relative-luminance formula and every colour distance with CIEDE2000. Neither was eyeballed. The procedure is in README.md; the accent search is reproducible with `node tools/accent-check.mjs`. ======================================================================== */ /* Noto Sans JP, Latin subsets only. One family does the whole page: display and text, weights 100 to 900 off a single variable axis. A geometric neutral sans reads modern and sells; the serif it replaced read editorial and dated. It has no true italic, and a synthesised oblique on a geometric sans looks like a mistake. So the accent word is set by WEIGHT and COLOUR instead, which is the more current device anyway. */ @font-face { font-family: "Noto Sans JP"; src: url("../fonts/v2/noto-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Sans JP"; src: url("../fonts/v2/noto-latinext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---- grounds ------------------------------------------------------- Warm porcelain, three steps. One dark ground exists, and it is spent on the buying door at the foot of the page. A second dark band would make the first one stop meaning anything. */ --paper: #faf7f1; --paper-2: #f2ede4; --paper-3: #e8e1d4; --board: #1b1a17; --board-2: #252320; --board-3: #33302b; /* ---- accent: DAMSON ------------------------------------------------ deep #3f1c5e on paper 12.76:1 paper-2 11.70:1 paper-3 10.49:1 paper text on the deep fill 12.76:1 bright #d9c9ec on board 11.20:1 board-2 10.09:1 board-3 8.46:1 board text on the bright fill 11.20:1 CIEDE2000 to the nearest accent hex anywhere in the fleet register: 13.63 from #4636a8 (The Orrery) for the deep, 13.62 from #a2afd0 (Hollow and Pine) for the bright. Both are new colours. The retired citron this site used to wear is 26.61 away and is not coming back. */ /* ---- the brand orange, LOGOTYPE ONLY -------------------------------- #e1512d is the second half of the Carverpoint wordmark and the folded corner of the mark. It is 3.63:1 on paper, which is under the 4.5:1 legal floor and far under this site's own 7:1 buyer floor, so it may NEVER carry a link, a button, a label or a line of body text. WCAG 1.4.3 exempts text that is part of a brand name, and that exemption is the entire licence this colour has: the wordmark, the mark, the favicon. Damson keeps the interface. If this ever moves onto a control, tools/contrast.mjs is the thing that will say so. */ --brand-orange: #e1512d; --brand-slate: #253238; --accent-deep: #3f1c5e; --accent-bright: #d9c9ec; /* ---- text ------------------------------------------------------------ The two quiet inks hold 7:1 or better on every ground they are actually rendered on, because the quiet half of a two-tone lead and every line of purchase-path small print are set in them. That floor is what fixed these two values, not taste. */ --ink: #1b1a17; /* paper 16.27:1 paper-2 14.92:1 paper-3 13.38:1 */ --ink-quiet: #514a42; /* paper 8.16:1 paper-2 7.48:1 paper-3 6.71:1 */ --paper-quiet: #aca59a; /* board 7.13:1 board-2 6.42:1 board-3 5.38:1 */ /* ---- semantics: paper is the default theme --------------------------- */ --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3); --fg: var(--ink); --quiet: var(--ink-quiet); --accent: var(--accent-deep); --accent-fill: var(--accent-deep); --accent-fill-fg: var(--paper); --rule: rgba(27, 26, 23, 0.14); /* decorative hairline, 1.33:1, no floor applies */ --rule-strong: rgba(27, 26, 23, 0.5); /* the load-bearing control edge. Composited it reads 3.27:1 on paper, 3.20:1 on paper-2, 3.11:1 on paper-3, so every form field and outline button clears the 3:1 of WCAG SC 1.4.11. */ --focus: #1146b8; /* paper 7.58:1 paper-2 6.95:1 paper-3 6.23:1 */ /* ---- type ------------------------------------------------------------ One serif does the whole page. The sans is for eyebrows, labels, controls and the small print, which is all it is asked to do. */ --font-display: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; --font-text: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; --t-display: clamp(2.9rem, 7.4vw, 5.6rem); --t-h2: clamp(2rem, 4.2vw, 3.1rem); --t-h3: clamp(1.3rem, 2.2vw, 1.6rem); --t-lead: clamp(1.1rem, 1.6vw, 1.32rem); --t-price: clamp(1.5rem, 2.6vw, 1.9rem); --t-body: 1.0625rem; --t-small: 0.9rem; --t-micro: 0.8125rem; --t-eyebrow: 0.72rem; --lh-display: 1.02; --lh-heading: 1.12; --lh-body: 1.62; --track-eyebrow: 0.2em; --track-display: -0.028em; /* ---- space ----------------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; --section-pad: clamp(4.5rem, 11vh, 8.5rem); --edge: clamp(1.25rem, 5vw, 3.5rem); --measure: 34rem; --spread: 72rem; /* ---- shape ----------------------------------------------------------- No card radius anywhere. Structure is rule work and air. The radii below exist for the pill controls and the one device frame. */ --r-1: 2px; --r-pill: 999px; --r-device: 26px; --hair: 1px; /* ---- shadow ----------------------------------------------------------- The only two soft edges on the site, and both belong to a frame around a photograph. They live here because main.css is not allowed a colour literal and a shadow is a colour. */ --shadow-rig: 0 1px 0 var(--rule), 0 26px 60px -34px rgba(27, 26, 23, 0.45); --shadow-mat: 0 1px 0 var(--rule), 0 18px 48px -36px rgba(27, 26, 23, 0.5); /* ---- texture ---------------------------------------------------------- ONE treatment for the whole site, a hairline grid, and it appears in exactly two places: the ground of the system section and the mat the console screenshot is framed on. It is two repeating gradients, so it weighs nothing and cannot be a request. 0.055 alpha over paper composites to #eeebe5, and that composite is the ground every figure below was measured against, because a reader whose eye lands on a grid line reads the letterform against the line and not against the average. On #eeebe5: ink 14.60:1, ink-quiet 7.32:1, accent-deep 11.45:1. ink-quiet is the binding one, and it is what holds the alpha at 0.055 rather than anywhere darker. Reproduce all of it with `node tools/contrast.mjs`. */ --tx: rgba(27, 26, 23, 0.055); --tx-pitch: 34px; /* ---- motion ----------------------------------------------------------- Entrances land between 0.4s and 0.8s; hover answers under 150ms; the one long duration belongs to the preview and to nothing else. */ --dur-fast: 130ms; --dur-mid: 340ms; --dur-enter: 640ms; --dur-draw: 780ms; --dur-count: 900ms; --dur-scroll: 20s; --stagger: 110ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---- layers ----------------------------------------------------------- */ --z-head: 40; --z-skip: 70; } /* The board theme. Any wrapper carrying data-theme="board" flips the whole semantic set; components only ever read semantics, so nothing else changes. */ [data-theme="board"] { --bg: var(--board); --bg-2: var(--board-2); --bg-3: var(--board-3); --fg: var(--paper); /* 16.27:1 on board */ --quiet: var(--paper-quiet); --accent: var(--accent-bright); --accent-fill: var(--accent-bright); --accent-fill-fg: var(--board); --rule: rgba(250, 247, 241, 0.18); --rule-strong: rgba(250, 247, 241, 0.5); /* composited 4.98:1 on board, 4.74:1 on board-2 */ --focus: #a9c6ff; /* board 10.12:1 board-2 9.11:1 board-3 7.64:1 */ --tx: rgba(250, 247, 241, 0.07); }