/* ========================================================================== Hattefisk - coming soon Tokens: black bg matches the hat-tile sprites exactly (no seams, no gradient behind them - see .hero). Warm white for content cards, brand red for accents. Buttons default to --red-deep (white text >= 4.5:1); bright --red is reserved for decorative/large type. Type: Permanent Marker (brush, latin-only, brand wordmark stays English in every language) for the poster-style HATTEFISK lockup, Caveat (handwritten, Cyrillic) for the small eyebrow labels, Inter (Cyrillic + Latin Extended) for body/UI, including the COMING SOON badge. All three self-hosted in assets/fonts/. ========================================================================== */ @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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/Inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/Caveat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/Caveat-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/PermanentMarker-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2122; } :root { --black: #000000; --ink: #141210; --warm-white: #f7f1e4; --warm-white-dim: #e9e0cd; --red: #ef3d20; --red-deep: #b32914; --red-deep-hover: #8f2000; --accent: #e8a83e; --grey: #9a9186; --grey-dim: #5c584f; --line: rgba(247, 241, 228, 0.14); --font-display: "Permanent Marker", "Segoe Script", cursive; --font-script: "Caveat", "Segoe Script", cursive; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --gutter: 20px; --radius-lg: 28px; --radius-md: 18px; --radius-sm: 10px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } @media (min-width: 720px) { :root { --gutter: 40px; } } @media (min-width: 1200px) { :root { --gutter: 64px; } } /* ---- Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* Black on AND , not just the sections: on iOS Safari (and desktop Safari) an overscroll/rubber-band past the top or bottom of the document reveals the viewport background, not any section's background - without this, that reveals white/default instead of a seamless black. */ html { background: #000000; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--black); color: var(--warm-white); font-family: var(--font-body); font-size: 16px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } button { font: inherit; color: inherit; } h1, h2, h3, p, figure { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* Visible focus ring everywhere, no silent removal */ :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; } .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 { position: absolute; top: -100%; left: var(--gutter); z-index: 100; background: var(--red-deep); color: var(--warm-white); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; } .skip-link:focus { top: calc(var(--safe-t) + 10px); } /* ---- Top bar: lang switch ---------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: flex-end; align-items: center; padding: calc(var(--safe-t) + 12px) calc(var(--gutter) + var(--safe-r)) 12px calc(var(--gutter) + var(--safe-l)); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); pointer-events: none; } /* Lightweight text-link language switcher, shared by header and footer. No pill background: small, does not compete with the hero. */ .lang-links { display: flex; align-items: center; gap: 6px; pointer-events: auto; } .lang-links span { color: var(--grey-dim); font-size: 0.72rem; } .lang-links button { appearance: none; border: none; background: transparent; color: var(--grey); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; padding: 4px 2px; cursor: pointer; transition: color 0.15s ease; } .lang-links button:hover { color: var(--warm-white); } .lang-links button[aria-pressed="true"] { color: var(--red); } /* No footer-specific .lang-links override needed: the footer is on the same black background as the header (see .footer below), so the base .lang-links rules above already fit both places. */ /* ---- Hero --------------------------------------------------------------- */ .hero { /* Capped, not a pure 100vh: on a tall phone (844px+) with the sticky topbar taking its own space above, a pure 100vh hero plus flex centering left a huge dead-air gap below the form note before the catering card (round 4 fix - was ~171px, well past a comfortable section break). The cap keeps the poster-style vertical centering on short/typical screens while stopping the hero from ballooning on tall ones. */ min-height: min(100svh, 720px); min-height: min(100vh, 720px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--safe-t) + 8px) calc(var(--gutter) + var(--safe-r)) calc(var(--safe-b) + 16px) calc(var(--gutter) + var(--safe-l)); position: relative; background: var(--black); /* solid black, matches the hat sprites exactly: no gradient behind the tile */ } .hero-main { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 26px; } .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; } .hat-stage-wrap { position: relative; display: flex; align-items: center; justify-content: center; margin: 40px 0 0; } @media (min-width: 1024px) { .hat-stage-wrap { margin: 26px 0 0; } } .hat-stage { position: relative; width: clamp(150px, 34vw, 190px); height: clamp(150px, 34vw, 190px); } .hat-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(0.9); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .hat-frame.is-active { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { .hat-frame { transition: none; } } /* Three motion strokes on each side of the mascot, poster-style (owner reference: _preview/owner-ref/before-desktop-old-layout.png). No vertical kanji beside them - that element stays retired. */ .motion-strokes { position: absolute; top: 50%; transform: translateY(-50%); color: var(--warm-white); opacity: 0.9; pointer-events: none; } .motion-strokes--left { left: clamp(-44px, -13vw, -32px); } .motion-strokes--right { right: clamp(-44px, -13vw, -32px); } /* HATTEFISK brand lockup (round 8): reuses the tilted poster treatment that used to carry "COMING SOON" (owner reference: _preview/owner-ref/before-desktop-old-layout.png) - same rotate, same font-size, same white color, same red brush-stroke swash sized to the word. The old separate, unrotated red .wordmark is retired. */ .brush-heading { font-family: var(--font-display); font-weight: 400; color: var(--warm-white); /* +~11% over the initial round-8 pass (owner feedback): on a 390px phone the word should nearly fill the content width, not sit with visible side margins. */ font-size: clamp(2.2rem, 12.2vw, 3.4rem); line-height: 0.85; transform: rotate(-3deg); position: relative; /* Bottom margin clears the red brush-stroke underline (it extends to -0.32em below the text, see .brush-stroke) before the badge below starts - otherwise the stroke and "COMING SOON" collide. */ margin: 0 0 0.55em; text-wrap: balance; } .brush-heading .brush-stroke { position: absolute; left: 50%; bottom: -0.32em; transform: translateX(-50%); /* Narrower than the word, not wider (owner feedback): the swash must not poke out past the outer letters. */ width: 87%; color: var(--red); z-index: -1; } /* COMING SOON: a small uppercase pill label, not a second brush-lettered headline - it needs to read as a status tag under the wordmark, not compete with it. Accent amber (round 8), not brand red: the red is already busy carrying the wordmark's brush-stroke underline right above this pill, and a second red shape that close reads as one blob. */ .coming-soon-badge { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 999px; padding: 0.35em 0.9em; margin: 0 0 10px; } .hero-tagline { font-family: var(--font-script); font-weight: 700; font-size: clamp(1.5rem, 6.5vw, 2.3rem); line-height: 1.05; color: var(--warm-white); max-width: 22ch; margin: 0 auto 3px; text-wrap: balance; } .hero-line { font-family: var(--font-body); font-size: clamp(0.9rem, 3vw, 1.02rem); font-weight: 500; color: var(--warm-white-dim); max-width: 34ch; margin: 0 auto 14px; text-wrap: balance; } .hero-form { width: 100%; max-width: 380px; margin: 0 auto; } /* ---- Shared form styles -------------------------------------------------- */ /* Every element on this page is centered (round 4 feedback) - labels, field text, hints - so a plain .field-row centers by default. */ .field-row { display: flex; flex-direction: column; gap: 8px; text-align: center; } /* Hero newsletter field: its own label is visually hidden (the placeholder + button carry the meaning), so the visible pieces - input, button, hint text below - also center horizontally as a group, not just their text. */ .field-row--center { align-items: center; text-align: center; } .optional-marker { font-weight: 400; color: var(--grey-dim); } .inline-form { display: flex; gap: 8px; align-items: stretch; } @media (max-width: 420px) { .inline-form { flex-direction: column; } } label { font-size: 0.82rem; font-weight: 600; color: var(--grey); } input, select, textarea { font-family: var(--font-body); font-size: 16px; /* never smaller: prevents iOS auto-zoom */ background: var(--warm-white); color: var(--ink); border: 2px solid transparent; border-radius: var(--radius-sm); padding: 13px 14px; width: 100%; text-align: center; transition: border-color 0.15s ease; } /*