/* ============================================================ MICHALOVYTRUBKY-SHOP.CZ — GLOBAL FOUNDATION Tokens, fonts, body reset, helpers, icon system Verze: 2 (2026-06-27) — + skrytí nativní Shoptet top-navigation-bar (MT header ji nahrazuje); edit-in-place, bump ?v= v Záhlaví na 3 ============================================================ */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root{ /* Brand barvy */ --mt-primary:#0052DA; --mt-primary-deep:#003BA8; --mt-primary-light:#2873E8; --mt-primary-pale:#7DB1FF; --mt-primary-bg:#DBEAFE; --mt-accent:#253041; --mt-accent-light:rgba(37,48,65,.78); /* Neutral */ --mt-bg:#FFFFFF; --mt-bg-soft:#F5F7FB; --mt-bg-dark:#1A2333; --mt-text:#253041; --mt-text-2:#4C5165; --mt-text-hint:rgba(37,48,65,.55); --mt-border:rgba(37,48,65,.14); --mt-border-subtle:rgba(37,48,65,.08); /* Status */ --mt-success:#10B981; --mt-warning:#F59E0B; --mt-danger:#EF4444; /* Typografie — Helvetica self-hosted, system fallback */ --mt-display:'Helvetica', 'Helvetica Neue', Arial, -apple-system, BlinkMacSystemFont, sans-serif; --mt-body:'Helvetica', 'Helvetica Neue', Arial, -apple-system, BlinkMacSystemFont, sans-serif; /* Layout */ --mt-container:1440px; /* 09.07.2026: sjednoceno s headerem (--mt-container-header) — obsah = šířka headeru */ --mt-container-header:1440px; --mt-container-narrow:800px; --mt-container-form:560px; /* Spacing */ --mt-pad:24px; /* Radius */ --mt-radius:8px; --mt-radius-md:12px; --mt-radius-lg:16px; --mt-radius-pill:999px; /* Stíny */ --mt-shadow-sm:0 1px 2px rgba(37,48,65,.06); --mt-shadow:0 2px 6px rgba(37,48,65,.08); --mt-shadow-md:0 6px 18px rgba(37,48,65,.10); --mt-shadow-lg:0 16px 40px rgba(37,48,65,.14); /* Animace */ --mt-dur:.22s; --mt-ease:cubic-bezier(.4,0,.2,1); } /* ============================================================ FONT LOADING — Google Fonts (Manrope + Mulish) ============================================================ */ /* Preconnect tagy patří do , ne sem — CSS zajistí jen fallback chain. */ /* ============================================================ GLOBAL BODY OVERRIDES (jen na vlastním tagu, nepřeplácet Shoptet nativní třídy jako .common-*, .basic-*) ============================================================ */ body{ font-family:var(--mt-body); color:var(--mt-text); } /* ============================================================ ICON SYSTEM (.mt-i) SVG sprite se injektuje přes mt-header-1.js do . Použití: ============================================================ */ .mt-i{ width:1em; height:1em; display:inline-block; vertical-align:-0.18em; flex-shrink:0; fill:none; stroke:currentColor; } .mt-i-sm{width:14px; height:14px} .mt-i-md{width:18px; height:18px} .mt-i-lg{width:22px; height:22px} .mt-i-xl{width:28px; height:28px} .mt-i-2xl{width:38px; height:38px} .mt-i-3xl{width:46px; height:46px} .mt-i-filled{fill:currentColor} /* Ilustrované ikony (kategorie) — vlastní viewBox 240×240, nepoužívají .mt-i */ .mt-il{ display:block; width:100%; height:100%; } /* ============================================================ BUTTONS (foundation — varianty řeší per-page CSS) ============================================================ */ .mt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--mt-display); font-weight:700; border:0; cursor:pointer; text-decoration:none; padding:12px 22px; border-radius:var(--mt-radius); font-size:14px; letter-spacing:.01em; transition:background var(--mt-dur) var(--mt-ease), color var(--mt-dur) var(--mt-ease), border-color var(--mt-dur) var(--mt-ease), transform var(--mt-dur) var(--mt-ease); white-space:nowrap; } .mt-btn.primary{background:var(--mt-primary); color:#FFFFFF} .mt-btn.primary:hover{background:var(--mt-primary-deep); color:#FFFFFF; text-decoration:none} .mt-btn.secondary{ background:#FFFFFF; color:var(--mt-accent); border:1.5px solid var(--mt-border); } .mt-btn.secondary:hover{ border-color:var(--mt-primary); color:var(--mt-primary); text-decoration:none; } .mt-btn.ghost{ background:transparent; color:var(--mt-accent); } .mt-btn.ghost:hover{color:var(--mt-primary)} /* ============================================================ FOUC SHIELD — skryje obsah do načtení fontů (volitelné, přidává se přes mt-header-1.js přes class na ) ============================================================ */ html.mt-fouc body{visibility:hidden} /* ============================================================ HELPER UTILS ============================================================ */ .mt-container{ max-width:var(--mt-container); margin:0 auto; padding:0 var(--mt-pad); } .mt-eyebrow{ display:inline-block; font-family:var(--mt-display); font-size:12.5px; font-weight:700; color:var(--mt-primary); letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; } .mt-visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ============================================================ HIDE NATIVE SHOPTET CHROME (globálně, všechny stránky) MT header (mt-header) nahrazuje nativní horní lištu. .top-navigation-bar = nativní telefon (demo) + Přihlášení duplikát. Pozn.: header chat skrývá #header v mt-header CSS; tohle je její SOUROZENEC nad ním → lze časem konsolidovat do mt-header. ============================================================ */ .top-navigation-bar{display:none !important}