/* ═══════════════════════════════════════════════════════════════ Kalmit s. r. o. — shared design system Tokens bound from measured recon of the reference page. Used by every page. ═══════════════════════════════════════════════════════════════ */ :root{ --bg: oklch(1 0 0); --fg: oklch(0 0 0); --surface: oklch(0.968 0 0); --surface-hover: oklch(0.918 0 0); --muted: oklch(0.556 0 0); --border: oklch(0.883 0 0); --inverse-bg: oklch(0 0 0); --inverse-fg: oklch(1 0 0); --btn-hover-bg: oklch(0.22 0 0); --header-h: 110px; --gut: clamp(20px, 5vw, 76px); --band: clamp(88px, 12vh, 168px); --sans: "Jost", system-ui, sans-serif; --serif: "Cormorant", Georgia, serif; --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Paper grain at the root — the reference applies a grain image to . */ body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9; opacity:.035; background-image:url("grain.svg"); } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } h1,h2,h3,p{ margin:0; } ::selection{ background:var(--fg); color:var(--inverse-fg); } :focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:1px; } .skip{ position:absolute; left:-9999px; top:0; z-index:60; background:var(--fg); color:var(--inverse-fg); padding:12px 20px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; } .skip:focus{ left:12px; top:12px; } /* ── Type primitives ───────────────────────────────────────── */ .eyebrow{ font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); } .display{ font-family:var(--serif); font-weight:300; line-height:1.04; letter-spacing:-.012em; text-wrap:balance; } .lede{ font-size:clamp(16px,1.45vw,19px); font-weight:300; line-height:1.72; text-wrap:pretty; } /* Underline-grow link — the system's single interactive flourish. */ .tlink{ position:relative; display:inline-block; font-size:13px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; padding-bottom:5px; background:none; border:0; cursor:pointer; color:inherit; font-family:var(--sans); } .tlink::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); } .tlink:hover::after, .tlink:focus-visible::after{ transform:scaleX(1); transform-origin:left; } /* ── Header ────────────────────────────────────────────────── */ .hdr{ position:fixed; inset:0 0 auto 0; z-index:20; height:var(--header-h); display:flex; align-items:center; gap:var(--gut); padding:0 var(--gut); color:var(--inverse-fg); transition:background .45s var(--ease), color .45s var(--ease), height .45s var(--ease); } /* Interior pages start on white, so the header is solid from the first paint. */ .hdr--solid, .hdr.is-stuck{ background:var(--bg); color:var(--fg); height:76px; border-bottom:1px solid var(--border); } .wordmark{ font-family:var(--serif); font-size:25px; font-weight:400; letter-spacing:.34em; text-indent:.34em; line-height:1; white-space:nowrap; } .hdr nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(20px,2.6vw,42px); } .navlink{ font-size:12px; font-weight:400; letter-spacing:.15em; text-transform:uppercase; position:relative; padding:6px 0; } .navlink::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); } .navlink:hover::after, .navlink:focus-visible::after, .navlink[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; } .navtoggle{ display:none; background:none; border:0; padding:10px; color:inherit; cursor:pointer; min-width:44px; min-height:44px; } .navtoggle span{ display:block; width:22px; height:1px; background:currentColor; margin:5px 0; } /* ── Buttons ───────────────────────────────────────────────── */ .btn{ min-height:52px; padding:14px 34px; background:var(--fg); color:var(--inverse-fg); border:1px solid var(--fg); font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } /* Inverting solid button — foreground and background swap in one rule. */ .btn:hover{ background:var(--btn-hover-bg); color:var(--inverse-fg); border-color:var(--btn-hover-bg); } .btn--onDark{ background:var(--inverse-fg); color:var(--inverse-bg); border-color:var(--inverse-fg); } .btn--onDark:hover{ background:var(--btn-hover-bg); color:var(--inverse-fg); border-color:var(--inverse-fg); } /* Secondary — outline only, never a second solid for the same action. */ .btn--ghost{ background:transparent; color:var(--fg); border:1px solid var(--border); } .btn--ghost:hover{ background:var(--surface-hover); color:var(--fg); border-color:var(--fg); } /* ── Footer ────────────────────────────────────────────────── */ .ftr{ background:var(--inverse-bg); color:var(--inverse-fg); padding:clamp(56px,7vh,90px) var(--gut) 40px; border-top:1px solid rgba(255,255,255,.15); } .ftr__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:clamp(28px,4vw,60px); padding-bottom:52px; } .ftr__grid h3{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px; } .ftr ul{ list-style:none; margin:0; padding:0; } .ftr li + li{ margin-top:11px; } .ftr__link{ font-size:14px; font-weight:300; color:rgba(255,255,255,.86); position:relative; } .ftr__link::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--inverse-fg); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); } /* Text brightens toward white on hover — contrast rises, never falls. */ .ftr__link:hover,.ftr__link:focus-visible{ color:var(--inverse-fg); } .ftr__link:hover::after,.ftr__link:focus-visible::after{ transform:scaleX(1); transform-origin:left; } .ftr__mark{ font-family:var(--serif); font-size:22px; letter-spacing:.34em; margin-bottom:20px; } .ftr__blurb{ font-size:14px; font-weight:300; color:rgba(255,255,255,.62); max-width:32ch; text-wrap:pretty; } /* Legal row — sits between the link grid and the credits. */ .ftr__legal{ border-top:1px solid rgba(255,255,255,.15); padding:22px 0; display:flex; gap:clamp(18px,3vw,38px); flex-wrap:wrap; } .ftr__legal .ftr__link{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); } .ftr__base{ border-top:1px solid rgba(255,255,255,.15); padding-top:26px; display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.5); } /* ── Reveal ──────────────────────────────────────────────────── Elements are hidden ONLY under html.anim, which an inline head script adds when JS is alive and reduced-motion is not requested. No JS, blocked script, or a failed GSAP load → .anim is never set (or is stripped by the failsafe) and everything renders normally. ───────────────────────────────────────────────────────────── */ html.anim .rv{ opacity:0; transform:translateY(24px); } html.anim .rv.in{ opacity:1; transform:none; transition:opacity .95s var(--ease), transform .95s var(--ease); } /* GSAP writes inline styles, which take precedence over the rules above. */ /* ── Shared responsive ─────────────────────────────────────── */ @media (max-width:820px){ :root{ --header-h:74px; } .hdr nav{ position:fixed; inset:var(--header-h) 0 auto 0; background:var(--bg); color:var(--fg); flex-direction:column; align-items:flex-start; gap:0; padding:8px var(--gut) 26px; border-bottom:1px solid var(--border); display:none; } .hdr nav.open{ display:flex; } .hdr nav .navlink{ padding:15px 0; font-size:15px; width:100%; } .navtoggle{ display:block; margin-left:auto; } .wordmark{ font-size:21px; } } @media (max-width:600px){ .ftr__grid{ grid-template-columns:1fr 1fr; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition-duration:.01ms !important; } .rv{ opacity:1; transform:none; } }