/* ========================================================= DOPLNEJCH POWERLIFTING — design system Signature motif: the 3-light judging system (bílá = platný pokus, červená = neplatný). Used sparingly as loader, section divider and card accent. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ --black:#0a0a0b; --charcoal:#131315; --card:#18181b; --card-hover:#1e1e22; --line:#2a2a2e; --red:#d81e2c; --red-text:#e8384a; /* AA-safe (4.8:1) red for small text on dark bg — brand --red (3.9:1) is for large headings/backgrounds only */ --red-dim:#5c1319; --red-glow: rgba(216,30,44,.45); --navy:#173a63; --navy-light:#2c5290; --chalk:#f2efe6; --steel:#9a9ca3; --steel-dim:#5f6167; /* Text na barevném podkladu (červená, navy). Musí zůstat světlý v obou režimech — --chalk se ve světlém režimu přepíná na tmavou a na modré nebo červené ploše by zmizel. */ --na-barve:#f2efe6; --font-display:'Bebas Neue', 'Arial Narrow', sans-serif; --font-body:'Inter', -apple-system, sans-serif; --font-mono:'IBM Plex Mono', 'Courier New', monospace; --container: 1180px; --radius: 2px; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ background:var(--black); color:var(--chalk); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Pojistky proti vodorovnému přetékání na mobilu. Samotné overflow-x na nestačí — prohlížeč ho ignoruje, když je příčinou potomek s pevnou šířkou nebo zápornou pozicí. */ html{overflow-x:hidden; max-width:100%;} *, *::before, *::after{min-width:0;} /* Dlouhá slova a odkazy se zalomí místo rozšíření stránky */ p, li, td, th, h1, h2, h3, h4, .lead, .text-steel{overflow-wrap:break-word; word-break:break-word;} img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} ul{list-style:none;} .wrap{max-width:var(--container); margin:0 auto; padding:0 24px;} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;} } /* ---------- Typography ---------- */ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; letter-spacing:-.5px; text-transform:uppercase; line-height:.98; } h1{font-size:clamp(3.2rem,9vw,7.4rem);} h2{font-size:clamp(2.1rem,5vw,3.6rem);} h3{font-size:1.5rem;} .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--red-text); display:flex; align-items:center; gap:10px; margin-bottom:14px; } .eyebrow::before{content:''; width:24px; height:2px; background:var(--red-text); display:inline-block;} p.lead{font-size:1.15rem; color:var(--steel); max-width:56ch;} .mono{font-family:var(--font-mono);} /* ---------- Nav ---------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(10,10,11,.94); border-bottom:1px solid var(--line); } .site-header .wrap{display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; height:76px;} .logo{font-family:var(--font-display); font-size:1.6rem; letter-spacing:1px; display:flex; align-items:center; gap:10px; flex-shrink:0;} .logo-img{height:46px; width:auto; display:block; transition:transform .25s;} .logo:hover .logo-img{transform:scale(1.06);} [data-theme="light"] .logo-img{filter:invert(1) hue-rotate(180deg);} .logo-text{display:flex; align-items:center; gap:10px;} .logo .bar{width:6px; height:22px; background:var(--red);} .logo small{display:block; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.2em; color:var(--steel); text-transform:uppercase;} .main-nav ul{display:flex; gap:30px; align-items:center;} .main-nav a{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); position:relative; padding:6px 0; transition:color .2s; } .main-nav a:hover, .main-nav a.active{color:var(--chalk);} .main-nav a.active::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--red);} .nav-cta{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; background:var(--red); color:var(--na-barve); padding:10px 18px; border-radius:var(--radius); transition:background .2s, transform .2s; flex-shrink:0; } .nav-cta:hover{background:#f0263a; transform:translateY(-1px);} /* Hamburger — vlastnosti nastavené natvrdo (ne jen v media query), ať se viditelnost řídí VÝHRADNĚ přes display:none/flex níže a nic to jinde nemůže přebít. Garantovaná min. velikost 44×44px (dotykový standard). */ .nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:none; border:none; cursor:pointer; width:44px; height:44px; min-width:44px; min-height:44px; flex-shrink:0; position:relative; z-index:101; visibility:visible; opacity:1; } .nav-toggle span{width:24px; height:2px; background:var(--chalk); display:block; flex-shrink:0;} @media screen and (max-width:900px){ .main-nav{ display:none !important; position:fixed !important; top:76px; right:0; bottom:0; left:0; background:var(--black); padding:30px 24px; overflow-y:auto; z-index:99; } .main-nav.open{display:block !important;} .main-nav ul{flex-direction:column; align-items:flex-start; gap:22px;} .main-nav a{font-size:1rem;} .nav-toggle{display:flex !important;} .nav-cta{display:none !important;} } /* ---------- Buttons ---------- */ .btn{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; padding:16px 30px; border-radius:0; border:1px solid transparent; cursor:pointer; /* Bez tohohle mají