/* ========================================================================== Turisťák — design tokens -------------------------------------------------------------------------- The single source of truth for colour, type, spacing, radius and shadow. Linked first in base.html and auth/base.html; every other stylesheet consumes these and should not invent its own values. The look is "warm editorial": paper-coloured surfaces, deep forest green, and photographs doing the heavy lifting. Amber is an accent — it underlines and marks, it never fills a section. That restraint is the whole point; the previous theme used amber as a full-bleed background and the photos had to fight it. ========================================================================== */ /* -------------------------------------------------------------------------- Fonts — self-hosted. Served from /static/fonts rather than Google's CDN: one less render-blocking third-party request, and no visitor IPs handed to Google, which matters for a primary school's site. These are variable fonts, so one file covers the whole weight range instead of four static cuts. latin-ext is not optional here. Czech needs ě š č ř ž ý á í é ů, and the plain latin subset does not contain them — omit it and the browser falls back mid-word, which looks like a rendering bug. -------------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../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('../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('../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('../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 { /* ---------------------------------------------------------------------- Surfaces. Warm off-white, not pure white — the site is a field journal and paper is never #FFF. --paper-sunken is what replaces the old amber full-bleed sections: it separates bands of content without shouting. ---------------------------------------------------------------------- */ --paper: #FAF8F5; --paper-raised: #FFFFFF; --paper-sunken: #F1EDE6; --paper-inverse: #14181A; /* footer, hero scrims */ /* Full-screen scrim behind the lightbox. Deliberately near-opaque and dark: the previous modal used a 0.9 *paper* overlay, so a photo opened onto a background the same colour as the page behind it and never read as a modal at all. */ --scrim: rgba(16, 19, 21, 0.94); /* Plates that sit on top of a photograph or the scrim. */ --on-photo: rgba(255, 255, 255, 0.14); --on-photo-strong: rgba(255, 255, 255, 0.26); /* Hairlines. --rule for dividers, --rule-strong for a deliberate edge. The old theme drew every border 2px solid black; at that weight the borders read louder than the photographs they framed. */ --rule: rgba(26, 29, 32, 0.12); --rule-strong: rgba(26, 29, 32, 0.26); /* ---------------------------------------------------------------------- Ink. Contrast ratios are against --paper and are the reason these are not rounder numbers. ---------------------------------------------------------------------- */ --ink: #1A1D20; /* 15.2:1 — body copy, headings */ --ink-muted: #565D66; /* 7.1:1 — secondary prose, captions */ --ink-faint: #767E88; /* 4.6:1 — labels; the floor for small text */ --ink-inverse: #F7F5F1; /* on --paper-inverse and photo scrims */ /* ---------------------------------------------------------------------- Brand. Forest green carries interaction: links, primary buttons, focus. Amber is reserved for emphasis and never becomes a surface. The old hero highlight was #ff9500, which is ~2:1 on paper and simply unreadable as text; --amber is the corrected version of that idea. ---------------------------------------------------------------------- */ --forest: #0B5C3F; /* 7.6:1 */ --forest-deep: #084430; /* hover/active */ --forest-wash: rgba(11, 92, 63, 0.07); --forest-edge: rgba(11, 92, 63, 0.22); /* Area fills under a plotted line. Heavier than --forest-wash, which is a hover/selected surface tint and disappears entirely at chart scale. */ --forest-fill: rgba(11, 92, 63, 0.16); --amber: #A85207; /* 5.4:1 — accent text, underlines, marks */ --amber-deep: #8A4306; --amber-wash: rgba(168, 82, 7, 0.08); --amber-edge: rgba(168, 82, 7, 0.24); /* ---------------------------------------------------------------------- Difficulty. Previously defined five times across CSS and once in JS in three unrelated palettes; a "Lehká" badge could be #10b981, #4CAF50 or var(--primary-green) depending on which page you were on. One set, all at least 4.5:1 on paper, and legible to red/green colour-blind readers because the badges carry text as well as colour. ---------------------------------------------------------------------- */ --diff-easy: #1B7A4B; --diff-easy-wash: rgba(27, 122, 75, 0.10); --diff-medium: #A85207; --diff-medium-wash: rgba(168, 82, 7, 0.10); --diff-hard: #A32C1E; --diff-hard-wash: rgba(163, 44, 30, 0.10); /* Status, for flash messages and form validation. */ --ok: #1B7A4B; --warn: #A85207; --danger: #A32C1E; --info: #0B5C3F; /* ---------------------------------------------------------------------- Type. Two families. Raleway is gone — it is a display face whose Czech diacritics get cramped at text sizes, and it was only ever applied via 20 hardcoded `'Raleway', sans-serif` declarations because the variable for it was never defined. --font-data is for numbers that need to line up: distances, elevations, dates, counts. That is the one job monospace does better than a proportional face, and the old theme diluted it by setting body copy in mono too. ---------------------------------------------------------------------- */ --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-data: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Fluid scale. Each clamp is min / preferred / max — no media queries needed for type, which is why the breakpoint mess below matters less. */ --fs-display: clamp(2.5rem, 1.60rem + 3.6vw, 4.25rem); /* 40 → 68px */ --fs-h1: clamp(2rem, 1.40rem + 2.4vw, 3rem); /* 32 → 48px */ --fs-h2: clamp(1.5rem, 1.20rem + 1.2vw, 2.125rem); /* 24 → 34px */ --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); /* 18 → 21px */ --fs-body: 1.0625rem; /* 17px — Czech prose reads better a notch up */ --fs-small: 0.9375rem; /* 15px */ --fs-label: 0.8125rem; /* 13px — mono labels, badges */ --fs-micro: 0.75rem; /* 12px — the floor; never for prose */ --lh-tight: 1.15; /* display and headings */ --lh-snug: 1.35; /* subheads, card titles */ --lh-body: 1.65; /* prose */ --tracking-tight: -0.02em; /* large headings only */ --tracking-label: 0.08em; /* uppercase mono labels */ /* ---------------------------------------------------------------------- Space — 4px base. ---------------------------------------------------------------------- */ --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: 4rem; --s-9: 6rem; --s-10: 8rem; /* Vertical rhythm between major page bands. */ --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* Page gutter — matches on both sides, and is what stops full-width children spilling past the viewport on a phone. */ --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem); --container: 1200px; /* was 1400px; too wide to scan comfortably */ --container-narrow: 780px; /* prose columns */ --measure: 68ch; /* max line length for running text */ /* ---------------------------------------------------------------------- Radius & shadow. Soft, low, layered — the old hard offsets (`4px 4px 0px #1a1d20`) belong to a different genre entirely. ---------------------------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-full: 999px; --shadow-sm: 0 1px 2px rgba(26, 29, 32, 0.06), 0 1px 1px rgba(26, 29, 32, 0.04); --shadow-md: 0 4px 12px rgba(26, 29, 32, 0.07), 0 1px 3px rgba(26, 29, 32, 0.05); --shadow-lg: 0 12px 32px rgba(26, 29, 32, 0.10), 0 2px 8px rgba(26, 29, 32, 0.05); /* For elements sitting on a photograph, where the ambient shadow needs to be darker to register at all. */ --shadow-on-photo: 0 8px 24px rgba(0, 0, 0, 0.28); --focus-ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--forest); /* ---------------------------------------------------------------------- Motion. Everything is short; nothing that moves is load-bearing. Honoured by the prefers-reduced-motion block at the end of this file. ---------------------------------------------------------------------- */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 360ms; /* Layering. Named so the gallery modal cannot lose to the mobile nav. */ --z-base: 1; --z-sticky: 100; --z-navbar: 1000; --z-bottom-nav: 1010; --z-modal: 9000; --z-toast: 9500; --navbar-height: 72px; --navbar-height-sm: 60px; /* .navbar.scrolled — kept in sync, unlike before */ --bottom-nav-height: 64px; } /* ========================================================================== Legacy bridge -------------------------------------------------------------------------- style.css, trip.css, trips-list.css, navbar.css, footer.css, 404.css, auth.css and admin.css between them reference the old variable names in roughly 950 places. Rather than a single unreviewable rewrite, the old names are re-pointed at the new tokens here: every stylesheet is re-skinned at once, and the per-page work that follows is about layout and structure rather than colour. Note how badly the old names had drifted from their values — `--bg-dark-900` was #faf8f5, `--border-neon` was plain black, `--shadow-glow` was `none`. They are aliases now, and each one should disappear as its stylesheet is reworked. Nothing new should reference anything in this block. ========================================================================== */ :root { /* Surfaces (the "dark" names are a fossil of an abandoned dark theme) */ --bg-dark-900: var(--paper); --bg-dark-800: var(--paper-raised); --bg-dark-700: var(--paper-sunken); --bg-glass: rgba(250, 248, 245, 0.88); --bg-primary: var(--paper); --bg-secondary: var(--paper-raised); --bg-accent: var(--paper-sunken); /* Brand */ --primary-green: var(--forest); --primary-green-dark: var(--forest-deep); --primary-green-darker: var(--forest-deep); --accent-green: var(--forest); --light-green: var(--forest-wash); --bg-green: var(--forest-wash); --border-green: var(--forest-edge); --accent: var(--forest); --accent-light: var(--forest); /* Undefined in the old bundle, so .marker-pin rendered with no background at all. Defined here because map pins should have a colour. */ --primary: var(--forest); --dark: var(--ink); --accent-orange: var(--amber); --accent-orange-dark: var(--amber-deep); --bg-orange: var(--amber-wash); --border-orange: var(--amber-edge); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-muted); --text-light: var(--ink-faint); /* Borders */ --border-light: var(--rule); --border-medium: var(--rule-strong); --border-neon: var(--rule-strong); --border-color: var(--rule-strong); --border-width: 1px; /* Status (previously only defined in auth.css and admin.css) */ --color-success: var(--ok); --color-danger: var(--danger); --color-warning: var(--warn); --color-info: var(--info); /* Type */ --font-mono: var(--font-data); --font-sans: var(--font-text); --font-title: var(--font-text); /* Shadows — the brutalist offsets become the soft scale. */ --shadow-xl: var(--shadow-lg); --shadow-glow: none; --shadow-glow-orange: none; --shadow-brutal: var(--shadow-md); --shadow-brutal-orange: var(--shadow-md); --transition: all var(--dur) var(--ease); } /* ========================================================================== Primitives used across pages ========================================================================== */ /* The hero accent. Load-bearing: hero_title and list_title are stored in the database as HTML and ship ``, so any value a teacher has already edited through the admin depends on this class existing. It is now an amber underline rather than orange fill text — legible on paper, and still legible on a photo scrim where it inherits white. */ .highlight { color: inherit; background-image: linear-gradient(var(--amber), var(--amber)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.14em; padding-bottom: 0.04em; } /* Mono labels: section eyebrows, table keys, badge text. */ .label, .mono-code { font-family: var(--font-data); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); } /* Any figure the reader might compare against another figure. */ .tnum, .stat-value, .row-value { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Prose columns. */ .measure { max-width: var(--measure); } /* A visible focus ring that survives on both paper and photographs. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } /* Skip link — first tab stop, hidden until focused. */ .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: calc(var(--z-navbar) + 1); padding: var(--s-3) var(--s-5); background: var(--forest); color: var(--ink-inverse); border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: var(--s-4); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }