/* ========================================================================== Bear's Bakery — დათვის საცხობი Vanilla CSS, no framework, no build step. Brand tokens come straight from Branding/Bears Bakery - Brandbook.pdf (pp. 9–10). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts BPG Guardian Egyp carries Georgian + Latin but NO Cyrillic, and its Latin is a slab serif that isn't the brand's Latin voice. So each face is restricted with unicode-range: Georgian resolves to BPG, Latin and Cyrillic fall through to Montserrat automatically. One font stack, correct result in all three languages, no per-language CSS. -------------------------------------------------------------------------- */ @font-face { font-family: "BPG Guardian Caps"; src: url("../fonts/bpg-guardian-caps-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+20BE; } @font-face { font-family: "BPG Guardian"; src: url("../fonts/bpg-guardian-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+20BE; } @font-face { font-family: "BPG Guardian"; src: url("../fonts/bpg-guardian-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+20BE; } /* Montserrat is a variable font — one file covers 100–900. */ @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-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: "Montserrat"; src: url("../fonts/montserrat-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* -------------------------------------------------------------------------- 2. Design tokens -------------------------------------------------------------------------- */ :root { /* Brand palette — brandbook pp. 9–10 */ --brand-brown: #653319; --brand-tan: #a9723c; --brand-amber: #fbb040; --cream-200: #f2e2ce; --cream-100: #f3e4d2; --paper: #fffbfa; /* Dark panel colour used by .section--brown and the footer (client's choice). */ --charcoal: #313131; /* Derived tones */ --brown-dark: #4a2512; --brown-soft: #8a5a33; --amber-dark: #e79a25; --line: #e4cfb4; --ink: #3b2415; --ink-muted: #7a6152; /* --brand-tan on cream is only 3.2:1 — fine for large display type (needs 3:1) but it fails WCAG AA for small text (needs 4.5:1). Use this darker tan for eyebrows, slogans, unit labels and anything else set small. */ --tan-text: #8a5a33; /* Type */ --font-head: "BPG Guardian Caps", "Montserrat", system-ui, sans-serif; --font-body: "BPG Guardian", "Montserrat", system-ui, sans-serif; /* Rhythm */ --wrap: 1200px; --gutter: 20px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; /* Elevation — warm, never grey */ --shadow-sm: 0 2px 8px rgba(101, 51, 25, 0.07); --shadow-md: 0 8px 24px rgba(101, 51, 25, 0.1); --shadow-lg: 0 18px 48px rgba(101, 51, 25, 0.14); /* Tall enough to give the 72px logo ~10px of breathing room. Everything that depends on header height — sticky offset, anchor scroll-margin, the mobile nav drop position — reads this, so they stay in step. */ --header-h: 92px; } /* -------------------------------------------------------------------------- 2b. Language visibility Drives multilingual display from , which is present in the markup before any script runs. Without this the browser paints all three languages stacked until main.js executes (a ~7000px flash), and the page would stay that way if JS ever failed to load. main.js still sets inline display on switch — the two agree, this just wins the race on first paint. -------------------------------------------------------------------------- */ html[lang="ka"] [data-lang]:not([data-lang="ka"]), html[lang="en"] [data-lang]:not([data-lang="en"]), html[lang="ru"] [data-lang]:not([data-lang="ru"]) { display: none !important; } /* -------------------------------------------------------------------------- 3. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand-brown); text-decoration: none; } a:hover { color: var(--brand-tan); } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--brand-brown); line-height: 1.18; margin: 0 0 0.5em; letter-spacing: 0.01em; } h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); } h2 { font-size: clamp(1.55rem, 3.6vw, 2.5rem); } h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } :focus-visible { outline: 3px solid var(--brand-amber); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--brand-brown); color: var(--paper); padding: 12px 20px; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; color: var(--paper); } /* -------------------------------------------------------------------------- 4. Buttons HOUSE RULE: