/* FitPilot — Waitlist landing page. Tailwind (skompilovaný cez css/tailwind-input.css, viď index.html ) robí layout/utility prácu; tento súbor drží len to, čo Tailwind utility triedy nevedia pekne vyjadriť — presné brand tokeny z DESIGN.md a počiatočné stavy pre GSAP scroll reveal (viď js/main.js). Font (Inter) sa načítava priamym v index.html/privacy.html — nie @import tu (viď komentár tam prečo). */ :root { /* DESIGN.md — presné brand tokeny, rovnaké ako v hlavnej appke (app/globals.css) */ --ink: #121110; --ink-2: #1b1a18; --ink-3: #262421; --ink-4: #302d28; --paper: #f3efe6; --paper-dim: #cfc9bd; --paper-faint: #8f897d; --iron-red: #e0402a; --iron-red-deep: #c3341f; /* na plných tlačidlách — WCAG AA 4.78:1 s --paper (overené výpočtom) */ --plate-yellow: #e6b23a; /* výhradne AI kontext, nikdy CTA — DESIGN.md pravidlo jedného akcentu */ --steel-line: #38352f; --radius-s: 9px; --radius-m: 12px; --shadow-2: 0 12px 32px -12px rgba(0, 0, 0, 0.65); } html { scroll-behavior: smooth; } body { font-family: "Inter", system-ui, sans-serif; background: var(--ink); color: var(--paper); } /* GSAP scroll reveal — počiatočný stav pred animáciou (js/main.js ju animuje na opacity:1). Zámerne sa nepoužíva na hero H1/CTA (viď komentár v index.html) — skúsenosť z /v4 landing page appky: JS-viazaná animácia na prvej veci, ktorú návštevník uvidí, poškodzuje Largest Contentful Paint (LCP z 5.2s na 2.3s po odstránení). Tu je aplikovaná len na sekcie POD foldom. */ [data-reveal] { opacity: 0; transform: translateY(24px); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); } /* Bez JS (napr. vypnutý JS, pomalé pripojenie počas ktorého GSAP ešte nenabehol) nesmie obsah ostať navždy neviditeľný — no-js fallback cez triedu nižšie. */ html:not(.js) [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } .btn-primary { background: var(--iron-red-deep); color: var(--paper); box-shadow: var(--shadow-2); } .btn-primary:hover { background: #b82f1b; } .card { background: var(--ink-3); border: 1px solid var(--steel-line); border-radius: var(--radius-m); } /* feature/wishlist redizajn — inšpirované /v4 (hlavná appka): radiálna žiara za hero sekciou namiesto plochej farby, marquee pás, farebné akcenty kariet (jeden akcent na kontext — jantárová VÝHRADNE pre AI, DESIGN.md pravidlo). */ .hero-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(224, 64, 42, 0.16), transparent 70%); } .card-accent-coral { border-top: 2px solid var(--iron-red); } .card-accent-amber { border-top: 2px solid var(--plate-yellow); } .card-icon-coral { color: var(--iron-red); } .card-icon-amber { color: var(--plate-yellow); } /* ---------- marquee text pás (rovnaký princíp ako /v4 MarqueeText) ---------- */ .marquee-wrap { overflow: hidden; border-top: 1px solid var(--steel-line); border-bottom: 1px solid var(--steel-line); padding: clamp(16px, 3vh, 24px) 0; } .marquee-track { display: flex; width: max-content; will-change: transform; animation: marqueeScroll 22s linear infinite; } .marquee-track:hover { animation-play-state: paused; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-25%); } /* 4 kópie v trati → -25% = presne šírka jednej kópie, bezšvový loop */ } .marquee-item { flex: none; font-size: clamp(1.1rem, 3vw, 1.7rem); font-weight: 800; color: var(--paper-faint); white-space: nowrap; padding-right: 1ch; } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none !important; transform: none !important; } } /* ---------- chapter break — celoplošný obrázok appky, tlmený a rozmazaný ---------- */ .chapter { position: relative; min-height: 62vh; display: flex; align-items: flex-end; overflow: hidden; } .chapter-img { object-fit: cover; filter: blur(3px) brightness(0.55) saturate(1.1); transform: scale(1.03); } .chapter-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 17, 16, 0.3) 0%, rgba(18, 17, 16, 0.55) 45%, rgba(18, 17, 16, 0.95) 100%); } .chapter-rim { position: absolute; inset: -10%; pointer-events: none; box-shadow: inset 0 0 220px 40px rgba(224, 64, 42, 0.28); } /* Natívny select/checkbox v tmavom motíve — bez knižnice, len farebná zhoda. */ input, select, textarea { background: var(--ink-2); border: 1px solid var(--steel-line); color: var(--paper); border-radius: var(--radius-s); } input::placeholder, textarea::placeholder { color: var(--paper-faint); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--iron-red); outline-offset: 1px; } /* Honeypot proti spam botom (index.html #website) — mimo obrazovky, nie display:none/visibility:hidden. Niektoré boty tieto dva parsujú a pole preskočia; posunutie mimo viditeľnú oblasť funguje spoľahlivejšie a nezasahuje do rozloženia (žiadny skok layoutu, position:absolute). */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }