/* ========================================================================= Design tokens Reference: onbackup.co.uk, adopted 2026-09-24 in place of the Calendly "Navy ink on cool marble" system the products ran before it. Taken from the reference: the warm Bone canvas with a Paper card surface a hair lighter than it, near black Ink for type, a warm Slate for running text, Stone hairlines, Inter at weight 500 with tight negative tracking for headings, JetBrains Mono for uppercase labels, 8px controls, 12px cards and a neutral ink-tinted shadow stack. Not taken: the reference's amber. It is that company's signature color, and each product keeps its own accent in the block at the end of this file, so Lima and Saga stay distinguishable from each other and from the site the look was drawn from. Everything above the accent block is byte identical between lima/ and saga/. Only that block differs. ========================================================================= */ /* ---- Web fonts, served from this document root -------------------------- Inter and JetBrains Mono are loaded from assets/fonts/ and from nowhere else. Nothing on the page requests any host but this one, and nothing may be added that does: a stylesheet fetched from another host hands a visitor's IP address to that host on every page view, and the privacy notice states that none is handed to anyone. One file per family per subset rather than one per weight. Google serves both as variable fonts, so every weight renders out of a single download, and the declared range is the weight axis each file actually carries: 100 to 900 for Inter, 100 to 800 for JetBrains Mono. Two subsets each, latin and latin-ext. latin-ext is not optional: it carries the letters that render a Turkish name typed into the contact form and the whole of the Turkish page. The unicode-range values are copied verbatim from the Google stylesheet the files were taken from. Both families are under the SIL Open Font License 1.1, and the license texts ship beside the files as assets/fonts/OFL-*.txt. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2"); 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; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin.woff2") format("woff2"); 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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../assets/fonts/jetbrainsmono-latin-ext.woff2") format("woff2"); 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; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../assets/fonts/jetbrainsmono-latin.woff2") format("woff2"); 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; } :root { /* ---- Palette ---------------------------------------------------------- Every text pair painted from this palette is measured by tools/contrast.sh, which fails under 4.5:1 for text and 3:1 for the resting boundary of a control. The numbers in the comments are its output, on Bone unless another surface is named. */ --ink: #0f1419; /* headings, strong text, dark band (16.09:1) */ --ink-2: #1a2027; /* code and panels inside the dark band */ --slate: #5f5e5a; /* running text, labels (5.64:1) */ --mist: #b4b2a9; /* inert dots only, never text */ --field-line: #8e8c84; /* resting ring of a form control (3.37:1 on white), where Stone would be invisible */ --stone: #d3d1c7; /* hairlines between surfaces, never text */ --sand: #ebe8df; /* tags, meters and quiet fills inside mockups */ --bone: #f1efe8; /* the page canvas */ --paper: #fbfaf7; /* cards and the alternate section band */ --white: #ffffff; /* product mockups and form fields */ --on-ink: #f1efe8; /* headings on the dark band (16.09:1) */ --on-ink-muted: #b9b8b1; /* running text on the dark band (9.30:1) */ /* ---- Type ------------------------------------------------------------ */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The reference's own scale. Headings are weight 500 with tight negative tracking and a line height near 1, which is what makes a headline read as one block rather than as a column of words. */ --text-display: 63px; --lh-display: 1.02; --ls-display: -.045em; --text-h2: 34px; --lh-h2: 1.1; --ls-heading: -.04em; --text-h3: 26px; --lh-h3: 1.15; --text-h4: 18px; --lh-h4: 1.3; --text-lead: 18px; --lh-lead: 1.6; --text-body: 16px; --lh-body: 1.65; --text-body-sm: 14px; --lh-body-sm: 1.5; --text-caption: 12px; --lh-caption: 1.5; --text-label: 11.5px; --ls-label: .2em; /* ---- Spacing (8px base) ---------------------------------------------- */ --sp-8:8px; --sp-16:16px; --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-72:72px; --sp-96:96px; --max-width: 1080px; --gutter: clamp(20px, 4vw, 40px); --nav-height: 68px; --section-gap: clamp(52px, 6vw, 88px); --card-padding: 24px; /* ---- Radius ----------------------------------------------------------- */ --r-card: 12px; --r-product: 12px; --r-button: 8px; --r-input: 8px; --r-small: 4px; --r-pill: 9999px; /* ---- Shadows: neutral, ink-tinted, surfaces and product UI only ------- */ --shadow-sm: 0 1px 2px rgba(15,20,25,.04), 0 2px 6px rgba(15,20,25,.05); --shadow-md: 0 4px 12px -2px rgba(15,20,25,.08), 0 10px 24px -6px rgba(15,20,25,.10); --shadow-lg: 0 12px 28px -8px rgba(15,20,25,.12), 0 24px 48px -16px rgba(15,20,25,.16); --shadow-float: 0 30px 70px -32px rgba(15,20,25,.45); } /* ---- Brand accent: Lima ------------------------------------------------ */ /* Derived from the product logo tile (#c8242b). White on it is 5.61:1, and it carries a link on Bone at 4.88:1, so the link color and the fill are the same value here. Saga's cannot be, see its file. */ :root { --accent: #c8242b; /* CTA fill, active states, chart bars */ --accent-strong: #a71d23; /* hover / pressed */ --accent-text: #c8242b; /* links and numerals on Bone (4.88:1) */ --accent-ink: #8f1a1f; /* accent text on --accent-soft */ --accent-soft: #fbe9e9; /* badge + soft fills */ --accent-line: #f0c6c7; /* accent-tinted hairline */ --accent-on-ink: #f4a4a7; /* labels on the dark band (9.45:1) */ --focus-ring: 0 0 0 3px rgba(200,36,43,.30); }