/* ========================================================================== 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 + COMING SOON stay English in every language) for the poster-style headline, Caveat (handwritten, Cyrillic) for the small eyebrow labels, Inter (Cyrillic + Latin Extended) for body/UI. 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; --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; /* Breathing room for the motion strokes and speech bubble, so they do not press against the mascot or clip against the page edge. Extra top margin clears the speech bubble for every hat, including the tallest ones (wasabi, soy, chili). */ margin: 40px 46px 0; } @media (min-width: 1024px) { .hat-stage-wrap { margin: 26px 72px 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; } } /* Comic-style motion strokes flanking the mascot, like the poster */ .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); } /* Speech bubble, poster-style, top-right of the mascot, clear of its hat. The mascot art (assets/hats-cut/) keeps a consistent body baseline and a generous top margin per tile, but the tallest hats (wasabi, soy, chili) still reach further up than the rest - the bubble sits well clear of even those, verified against every tile in the hero rotation. */ /* Vertical kanji beside the mascot - desktop only, too tight on mobile */ .kanji { display: none; } @media (min-width: 1024px) { .kanji { display: block; writing-mode: vertical-rl; font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.25em; color: var(--warm-white); opacity: 0.85; margin-right: 38px; } } .brush-heading { font-family: var(--font-display); color: var(--warm-white); font-size: clamp(2rem, 11vw, 3.1rem); 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 wordmark starts - otherwise the stroke and "HATTEFISK" collide on narrow screens. */ margin: 0 0 0.55em; } .brush-heading .brush-stroke { position: absolute; left: 50%; bottom: -0.32em; transform: translateX(-50%); width: 78%; color: var(--red); z-index: -1; } .wordmark { font-family: var(--font-display); font-weight: 400; color: var(--red); font-size: clamp(2.1rem, 10vw, 3.4rem); line-height: 0.95; margin: 0 0 10px; text-wrap: balance; } .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 4px; 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 22px; 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; } /*