/* =========================================================================== AARAIN digikorraldaja — DESIGN SYSTEM --------------------------------------------------------------------------- Every colour, size, radius and shadow the app uses is declared here and nowhere else. Change a value in this file and the whole app follows. From the Aarain brand sheet: charcoal #111617 yellow #E9B817 sage #7DA49A (the tan and sand tones from the sheet are deliberately unused) Light mode is led by sage; dark mode is led by yellow. Both take their logo straight from the brand sheet, unmodified. Type: Anton for display, Gruppo for labels, Hind for everything read. All three are bundled as files, not fetched from Google — the app has to work in a forest with no signal. =========================================================================== */ /* --- Anton: display ------------------------------------------------------ */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/anton-latin-ext-400-normal.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: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/anton-latin-400-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Gruppo: labels and eyebrows ----------------------------------------- */ @font-face { font-family: 'Gruppo'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/gruppo-latin-ext-400-normal.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: 'Gruppo'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/gruppo-latin-400-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Hind: body and interface -------------------------------------------- */ @font-face { font-family: 'Hind'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/hind-latin-ext-400-normal.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: 'Hind'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/hind-latin-400-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hind'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/hind-latin-ext-500-normal.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: 'Hind'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/hind-latin-500-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hind'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/hind-latin-ext-600-normal.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: 'Hind'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/hind-latin-600-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hind'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/hind-latin-ext-700-normal.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: 'Hind'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/hind-latin-700-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* =========================================================================== LIGHT — led by sage =========================================================================== */ :root { /* Brand constants, unchanged in either mode */ --brand-charcoal: #111617; --brand-yellow: #E9B817; --brand-sage: #7DA49A; --brand-ember: #ED681B; /* from the päevakud leaf; used only for alerts */ /* Sage ramp, built around #7DA49A */ --sage-900: #1E2E2A; --sage-800: #2C433D; --sage-700: #385650; --sage-600: #46685F; /* dark enough to carry white text */ --sage-500: #7DA49A; /* the brand tone */ --sage-400: #9CBBB3; --sage-300: #BAD1CB; --sage-200: #D5E3DF; --sage-100: #E9F1EE; --sage-050: #F3F8F6; /* Aliases onto the sage ramp. The stylesheet refers to --brand-050/100/300/ 700 in several places (selected filter chips, the current hour on the timetable, the restore box in the installer). They were never declared, so every one of those rules resolved to nothing and quietly did not paint — a selected chip looked exactly like an unselected one. */ --brand-050: var(--sage-050); --brand-100: var(--sage-100); --brand-200: var(--sage-200); --brand-300: var(--sage-300); --brand-600: var(--sage-600); --brand-700: var(--sage-700); /* Surfaces and text */ --ink: #111617; --ink-2: #3D4746; --ink-3: #68746F; --ink-4: #97A29F; --line: #E1E8E6; --line-strong:#C4D1CD; --bg: #F4F7F5; --surface: #FFFFFF; --surface-2: #FAFCFB; --overlay: rgba(17,22,23,.46); /* Action */ --accent: #46685F; /* buttons: white text sits on this safely */ --on-accent: #FFFFFF; --accent-soft: #7DA49A; /* highlights, borders, active chips */ --accent-wash: #E9F1EE; /* Signals. Earth tones drawn from the brand, readable in daylight. */ --ok: #46685F; --ok-bg: #E7F0EC; --warn: #8A6A08; --warn-bg: #FBF2D9; --alert: #B4491A; --alert-bg: #FCEADF; --info: #3F6480; --info-bg: #E9F0F5; /* Type */ --font: 'Hind', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Anton', 'Hind', system-ui, sans-serif; --font-head: 'Gruppo', 'Hind', system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --lh: 1.5; --track-tight: -0.01em; --track-caps: 0.1em; --track-display: 0.01em; /* Shape — the brand sheet specifies a 4px logo radius, so the whole interface stays square-ish rather than pill-soft. */ --r-xs: 3px; --r: 6px; --r-lg: 10px; --r-xl: 16px; --r-logo: 4px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(17,22,23,.05); --sh-2: 0 2px 8px rgba(17,22,23,.07), 0 1px 2px rgba(17,22,23,.05); --sh-3: 0 12px 34px rgba(17,22,23,.18), 0 3px 10px rgba(17,22,23,.08); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --tap: 44px; /* never smaller: gloves, rain, low light */ --header-h: 58px; --nav-h: 62px; } /* =========================================================================== DARK — led by yellow Competition mornings start before sunrise, and a white screen at full brightness ruins night vision. This is working kit, not decoration. =========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #F1F0EB; --ink-2: #BEC5C3; --ink-3: #8D9997; --ink-4: #66726F; --line: #293334; --line-strong:#3C4849; --bg: #0E1314; --surface: #1A2122; --surface-2: #212A2B; --overlay: rgba(0,0,0,.62); --accent: #E9B817; /* brand yellow carries the actions here */ --on-accent: #111617; --accent-soft: #7DA49A; --accent-wash: #1E2A28; --ok: #8FBBAF; --ok-bg: #1B2B27; --warn: #E9B817; --warn-bg: #2E2711; --alert: #F0834B; --alert-bg: #33201A; --info: #86AECB; --info-bg: #17262F; /* In the dark the same ramp has to run the other way round, or a "selected" chip lights up almost white. */ --brand-050: #16201E; --brand-100: #1E2A28; --brand-200: #26332F; --brand-300: #3A4E48; --brand-600: #9CBBB3; --brand-700: #BAD1CB; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 8px rgba(0,0,0,.45); --sh-3: 0 12px 34px rgba(0,0,0,.62); } } :root[data-theme="dark"] { --ink: #F1F0EB; --ink-2: #BEC5C3; --ink-3: #8D9997; --ink-4: #66726F; --line: #293334; --line-strong:#3C4849; --bg: #0E1314; --surface: #1A2122; --surface-2: #212A2B; --overlay: rgba(0,0,0,.62); --accent: #E9B817; --on-accent: #111617; --accent-soft: #7DA49A; --accent-wash: #1E2A28; --ok: #8FBBAF; --ok-bg: #1B2B27; --warn: #E9B817; --warn-bg: #2E2711; --alert: #F0834B; --alert-bg: #33201A; --info: #86AECB; --info-bg: #17262F; --brand-050: #16201E; --brand-100: #1E2A28; --brand-200: #26332F; --brand-300: #3A4E48; --brand-600: #9CBBB3; --brand-700: #BAD1CB; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 8px rgba(0,0,0,.45); --sh-3: 0 12px 34px rgba(0,0,0,.62); }