/* ============================================================ MIŠMAŠ FITNESS — premium dark concept Design tokens + global system ============================================================ */ :root { /* --- layered warm-charcoal base (never flat black) --- */ --ink-950: #0f1012; --ink-900: #16171b; --ink-850: #191b1f; --ink-800: #1f2126; --ink-700: #2a2d33; --ink-600: #3a3e45; /* warm undertone used in gradients so it never feels cold/corporate */ --warm: 28 18% 12%; /* --- text --- */ --fg: #f4f6f1; --fg-soft: #c7ccc6; --fg-mute: #8b918c; --fg-faint: #5c615e; /* --- accents (tweakable) --- */ --accent: #ff4200; /* brand orange (logo) */ --accent-deep: #d63600; --accent-ink: #ffffff; /* text on accent */ --amber: #f4a23c; /* warm secondary — happy hours / solarium */ --amber-soft: #f6b765; /* --- glass system (tweakable blur) --- */ --glass-bg: var(--w55); --glass-bg-2: var(--w85); --glass-brd: var(--w140); --glass-brd-2: var(--w220); --glass-blur: 18px; --glass-shadow: 0 24px 60px -20px rgba(0,0,0,0.65); /* --- geometry (tweakable radius) --- */ --r-sm: 10px; --r-md: 15px; --r-lg: 21px; --r-xl: 27px; /* --- type --- */ --font-display: "Saira Condensed", "Arial Narrow", sans-serif; --font-body: "Manrope", system-ui, sans-serif; --maxw: 1280px; --gutter: clamp(20px, 5vw, 64px); --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } * { box-sizing: border-box; margin: 0; padding: 0; } /* color-scheme:dark + pevné tmavé pozadí i na → iOS 26 Safari („Liquid Glass") vzorkuje pro průsvitný status bar tmavou barvu webu, ne fallback na bílou. */ /* scrollbar-gutter: stable → rezervuje místo pro scrollbar i když zmizí (otevření modalu zamkne scroll webu) → stránka v pozadí neskáče do strany. Na mobilu (overlay scrollbary) no-op. */ html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 92px); background: var(--ink-900); color-scheme: dark; scrollbar-gutter: stable; } body { font-family: var(--font-body); background: var(--ink-900); color: var(--fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; line-height: 1.5; } /* page-wide atmospheric backdrop — subtle warm/olive glows over graphite */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(70% 50% at 12% 8%, rgba(255,66,0,0.06), transparent 60%), radial-gradient(60% 55% at 88% 4%, rgba(244,162,60,0.05), transparent 55%), radial-gradient(90% 70% at 50% 120%, rgba(120,150,90,0.05), transparent 60%), linear-gradient(180deg, var(--ink-950), var(--ink-900) 30%, var(--ink-850)); } /* fine film grain across the whole page */ body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .45; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ---------- layout helpers ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); width: 100%; } .section { position: relative; padding-block: clamp(90px, 11vw, 168px); } /* small uppercase metadata label */ .eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; } .eyebrow.amber { color: var(--amber); } .eyebrow.amber::before { background: var(--amber); } /* big section titles use condensed display */ .h-display { font-family: var(--font-display); font-weight: 700; line-height: .92; letter-spacing: -.01em; text-transform: uppercase; } .h1 { font-size: clamp(54px, 9.5vw, 132px); } .h2 { font-size: clamp(34px, 4.2vw, 60px); } .h3 { font-size: clamp(28px, 3.4vw, 46px); } .lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--fg-soft); line-height: 1.62; max-width: 60ch; text-wrap: pretty; } .accent-text { color: var(--accent); } /* oversized ghost section numbers */ .ghost-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(120px, 20vw, 320px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--w70); position: absolute; pointer-events: none; user-select: none; } /* ---------- glass card ---------- */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-brd); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border-radius: var(--r-lg); box-shadow: var(--glass-shadow); } /* subtle top highlight on glass */ .glass.hi { position: relative; overflow: hidden; } .glass.hi::before { content:""; position:absolute; inset:0; background: linear-gradient(160deg, var(--w100), transparent 38%); pointer-events:none; } /* ---------- buttons ---------- */ .btn { font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 100px; border: 1px solid transparent; cursor: pointer; transition: transform .35s var(--ease-out), background .3s, box-shadow .3s, border-color .3s, color .3s; white-space: nowrap; } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 34px -10px rgba(255,66,0,0.55); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -10px rgba(255,66,0,0.7); } .btn-ghost { background: var(--w40); border-color: var(--glass-brd); color: var(--fg); backdrop-filter: blur(10px); } .btn-ghost:hover { background: var(--w100); border-color: var(--glass-brd-2); transform: translateY(-2px); } .btn-amber { background: var(--amber); color: #2a1804; box-shadow: 0 12px 34px -10px rgba(244,162,60,0.5); } .btn-amber:hover { transform: translateY(-2px); } /* ---------- chips ---------- */ .chip { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; padding: 7px 13px; border-radius: 100px; border: 1px solid var(--glass-brd); background: var(--w40); color: var(--fg-soft); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .chip .dot { width:6px; height:6px; border-radius:50%; background: var(--accent); } .chip.amber .dot { background: var(--amber); } /* ---------- scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity:1 !important; transform:none !important; } } /* image-slot fallback styling so empty slots look cinematic, not blank */ image-slot { --is-bg: linear-gradient(135deg, var(--ink-800), var(--ink-700)); } /* ============================================================ BAREVNÁ PALETA — tokeny barev na jednom místě ------------------------------------------------------------ PRAVIDLO: komponenty nepoužívají barvu natvrdo — vždy var(--token). Přidáváš prvek? Použij existující token, nebo přidej nový sem. ============================================================ */ :root { /* jemné bílé překryvy (okraje, výplně, hover) — viz --glass-* výše */ --w40: rgba(255,255,255,0.04); --w50: rgba(255,255,255,0.05); --w55: rgba(255,255,255,0.055); --w60: rgba(255,255,255,0.06); --w70: rgba(255,255,255,0.07); --w80: rgba(255,255,255,0.08); --w85: rgba(255,255,255,0.085); --w100: rgba(255,255,255,0.1); --w120: rgba(255,255,255,0.12); --w140: rgba(255,255,255,0.14); --w160: rgba(255,255,255,0.16); --w180: rgba(255,255,255,0.18); --w220: rgba(255,255,255,0.22); --w240: rgba(255,255,255,0.24); --w280: rgba(255,255,255,0.28); --w300: rgba(255,255,255,0.3); --w340: rgba(255,255,255,0.34); --w420: rgba(255,255,255,0.42); --w500: rgba(255,255,255,0.5); --w620: rgba(255,255,255,0.62); --w720: rgba(255,255,255,0.72); /* neprůhledné povrchy: dropdowny, mobilní menu, modaly */ --surface: rgba(23,25,29,0.95); --surface-2: rgba(15,16,18,0.97); --surface-solid: #15161a; /* ztmavovací závoj za modalem/overlayem */ --veil: rgba(8,9,11,0.62); /* jantarové sklo (happy hours / solárium) */ --amber-glass: rgba(20,18,15,0.5); /* scrim přes fotky (čitelnost textu) — ZÁMĚRNĚ tmavý v obou režimech */ --scrim-0: rgba(15,16,18,0); --scrim-10: rgba(15,16,18,0.1); --scrim-28: rgba(15,16,18,0.28); --scrim-34: rgba(15,16,18,0.34); --scrim-58: rgba(15,16,18,0.58); --scrim-62: rgba(15,16,18,0.62); --scrim-72: rgba(15,16,18,0.72); --scrim-86: rgba(15,16,18,0.86); --scrim-92: rgba(15,16,18,0.92); --scrim-95: rgba(15,16,18,0.95); --scrim-96: rgba(15,16,18,0.96); --scrim-97: rgba(15,16,18,0.97); }