/* Robin of Loxley: brand tokens, v2. One file every app in the family imports so the colours, type, spacing, radii and motion match. Change the brand here, not in each app. Rules: brand/BRAND.md. System and components: brand/DESIGN.md. An app picks its accent with one attribute on : and may force a theme with data-theme="light" or data-theme="dark"; with neither, it follows prefers-color-scheme. */ /* Fonts are self-hosted (fonts/ next to this file, SIL Open Font License, Latin subset): no request to Google, so no visitor IP leaves the site for a font. The URLs are relative to this file, so a copy of brand/ works at any path (/brand/, /static/rol/, node_modules/...). */ @font-face { font-family: 'Gloock'; src: url('fonts/gloock-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('fonts/hanken-grotesk-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Greens: Lincoln green, the cloth of Robin's hood and cap. */ --rol-sherwood: #10261A; /* darkest: hero bands, dark surfaces */ --rol-lincoln: #1F4D35; /* the family primary: buttons, links, the arrow */ --rol-lincoln-2: #2E6A4A; /* hover */ --rol-moss: #DCE7D8; /* tint: quiet fills, tags */ /* Scarlet: the feather in Robin's cap, and Will Scarlet. The accent, used sparingly: what they charge, the fletching, alerts, one call to action per screen. */ --rol-scarlet: #C0392B; --rol-scarlet-soft: #F6DAD5; --rol-on-scarlet: #FCF9F2; /* text on a scarlet button */ /* Gold: the centre of the target ("the gold") and the golden arrow Robin won at Nottingham. Decoration and emphasis on dark; never body text on light. */ --rol-gold: #D4A23C; --rol-gold-deep: #A87A1E; /* The kit: straw for the archery butt, yew for the longbow and the stand. */ --rol-straw: #E9D7A6; --rol-yew: #6B4A2B; /* Neutrals: warm, never grey. */ --rol-parchment: #F5EFE1; /* page */ --rol-linen: #FCF9F2; /* cards */ --rol-ink: #17201A; /* text */ --rol-ink-soft: #4A554D; --rol-ink-faint: #636C65; --rol-line: rgba(23, 32, 26, 0.12); --rol-line-strong: rgba(23, 32, 26, 0.24); /* The header band is near-black in both themes, so its text tokens don't change. */ --rol-band: #17201A; --rol-band-text: #F5EFE1; --rol-band-soft: #C9D3C6; /* Accent: the one colour each app owns (primary buttons, links, its own price). Lincoln green unless data-rol-app picks another, below. Hover and tint are mixed from it, so an app sets one value per theme. */ --rol-accent: var(--rol-lincoln); --rol-on-accent: #FCF9F2; /* text on an accent button */ --rol-accent-hover: color-mix(in oklab, var(--rol-accent) 82%, var(--rol-ink)); --rol-accent-soft: color-mix(in oklab, var(--rol-accent) 12%, var(--rol-linen)); /* Type. Gloock has one weight and is for 24px and up: marketing headings, app wordmarks, prices. Hanken Grotesk is everything else, including every logged-in screen. Nothing on any page is smaller than --rol-text-small. */ --rol-font-display: 'Gloock', Georgia, 'Times New Roman', serif; --rol-font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; --rol-text-h1: clamp(2.5rem, 1.75rem + 3vw, 3.75rem); /* 40 to 60px */ --rol-text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* 28 to 36px */ --rol-text-h3: 1.5rem; /* 24px: card headings, prices */ --rol-text-lede: 1.125rem; /* 18px */ --rol-text-body: 1rem; /* 16px */ --rol-text-small: 0.8125rem; /* 13px: small print, sources, table heads */ --rol-leading-display: 1.08; --rol-leading-body: 1.6; --rol-measure: 68ch; /* Space, on a 4px base. */ --rol-space-1: 4px; --rol-space-2: 8px; --rol-space-3: 12px; --rol-space-4: 16px; --rol-space-5: 24px; --rol-space-6: 32px; --rol-space-7: 48px; --rol-space-8: 64px; --rol-space-9: 96px; --rol-section: clamp(48px, 8vw, 96px); /* vertical padding of a page section */ /* Layout */ --rol-container: 1120px; --rol-gutter: clamp(16px, 4vw, 32px); --rol-header-h: 64px; --rol-control-h: 44px; /* buttons and inputs: a thumb-sized target */ /* Shape: woodcut. Square-ish corners, heavy ink rules, an offset ink shadow on the one important surface per page. Round shapes are kept for the target itself. */ --rol-radius: 4px; /* buttons, chips, inputs */ --rol-radius-lg: 6px; /* cards */ --rol-radius-pill: 999px; /* number discs and dots only */ --rol-rule: 2px solid var(--rol-ink); --rol-shadow: 8px 8px 0 var(--rol-ink); --rol-focus: 2px solid var(--rol-accent); /* Motion. One strong ease-out for anything that enters or answers a press; ease-in-out only for things moving on screen. Nothing over 300ms. */ --rol-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --rol-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --rol-dur-press: 160ms; /* button press, hover colour */ --rol-dur-ui: 200ms; /* menus, popovers, tooltips */ --rol-dur-max: 300ms; /* drawers, dialogs */ } /* App accents. The key is the app's name in lower case. Contrast of --rol-on-accent on each is checked by brand/check_contrast.py. */ :root[data-rol-app="myownsession"] { --rol-accent: #217567; } /* formerly Faresay */ :root[data-rol-app="myownedu"] { --rol-accent: #3E3A9E; } /* formerly fair-do */ :root[data-rol-app="myownarc"] { --rol-accent: #1F4E79; } :root[data-rol-app="myownmenu"] { --rol-accent: #B23A0B; } :root[data-rol-app="myownlingo"] { --rol-accent: #C2185B; } /* robinofloxley, myowntrader and myownreach keep Lincoln green. */ /* Dark. The same values twice: once for the system setting (unless the page forces light), once for a page that forces dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rol-sherwood: #0B1A12; --rol-lincoln: #86BD98; --rol-lincoln-2: #A6D3B3; --rol-moss: #1E3226; --rol-scarlet: #EE7A64; --rol-scarlet-soft: #3A1F1A; --rol-on-scarlet: #17201A; --rol-gold: #E2B658; --rol-gold-deep: #C4953A; --rol-straw: #3A3322; --rol-yew: #A77B4F; --rol-parchment: #0F1813; --rol-linen: #16221B; --rol-ink: #EEE8D9; --rol-ink-soft: #B4BCB2; --rol-ink-faint: #858E86; --rol-line: rgba(238, 232, 217, 0.10); --rol-line-strong: rgba(238, 232, 217, 0.22); --rol-on-accent: #0F1813; color-scheme: dark; } :root:not([data-theme="light"])[data-rol-app="myownsession"] { --rol-accent: #5FC2AE; } :root:not([data-theme="light"])[data-rol-app="myownedu"] { --rol-accent: #A9A6F2; } :root:not([data-theme="light"])[data-rol-app="myownarc"] { --rol-accent: #8DB8E8; } :root:not([data-theme="light"])[data-rol-app="myownmenu"] { --rol-accent: #F2895C; } :root:not([data-theme="light"])[data-rol-app="myownlingo"] { --rol-accent: #F28DB2; } } :root[data-theme="dark"] { --rol-sherwood: #0B1A12; --rol-lincoln: #86BD98; --rol-lincoln-2: #A6D3B3; --rol-moss: #1E3226; --rol-scarlet: #EE7A64; --rol-scarlet-soft: #3A1F1A; --rol-on-scarlet: #17201A; --rol-gold: #E2B658; --rol-gold-deep: #C4953A; --rol-straw: #3A3322; --rol-yew: #A77B4F; --rol-parchment: #0F1813; --rol-linen: #16221B; --rol-ink: #EEE8D9; --rol-ink-soft: #B4BCB2; --rol-ink-faint: #858E86; --rol-line: rgba(238, 232, 217, 0.10); --rol-line-strong: rgba(238, 232, 217, 0.22); --rol-on-accent: #0F1813; color-scheme: dark; } :root[data-theme="dark"][data-rol-app="myownsession"] { --rol-accent: #5FC2AE; } :root[data-theme="dark"][data-rol-app="myownedu"] { --rol-accent: #A9A6F2; } :root[data-theme="dark"][data-rol-app="myownarc"] { --rol-accent: #8DB8E8; } :root[data-theme="dark"][data-rol-app="myownmenu"] { --rol-accent: #F2895C; } :root[data-theme="dark"][data-rol-app="myownlingo"] { --rol-accent: #F28DB2; } @media (prefers-reduced-motion: reduce) { :root { --rol-dur-press: 0ms; --rol-dur-ui: 0ms; --rol-dur-max: 0ms; } }