/* ================================================= */ /* LOCAL FONTS — Inter v4, WOFF2 */ /* Stejný font jako předtím (TTF), jen Brotli */ /* komprimace pro WOFF2 — vizuálně bit-identické. */ /* ================================================= */ @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-300.woff2') format('woff2'); font-style: normal; font-weight: 300; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-600.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; } /* ================================================= */ /* GLOBAL RESET & ROOT */ /* ================================================= */ html { background: #FFFFFF; scroll-behavior: smooth; scrollbar-gutter: stable; } html.dark { background: #0B0F14; } /* ================================================= */ /* THEME SWITCH — plynulý přechod světlý ⇄ tmavý */ /* Aktivní jen ~300ms během přepnutí (třída se */ /* v JS odebere), aby transition nezasahoval */ /* do běžného renderu a nezpomaloval scroll/hover. */ /* ================================================= */ html.theme-anim, html.theme-anim body, html.theme-anim .card, html.theme-anim section, html.theme-anim header, html.theme-anim footer, html.theme-anim nav, html.theme-anim .page-header-band, html.theme-anim .btn, html.theme-anim .btn-outline, html.theme-anim .chip, html.theme-anim .chip-blue, html.theme-anim .hero-mesh, html.theme-anim .img-skeleton { transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, fill 280ms ease, stroke 280ms ease; } /* View Transitions API (Chrome/Edge) — jemný cross-fade */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: ease; } /* ================================================= */ /* IMAGE SKELETON — shimmer placeholder dokud */ /* se obrázek nenačte. */ /* ================================================= */ @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .img-skeleton-bg { background-color: #E5E9EF; background-image: linear-gradient( 110deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65% ); background-size: 200% 100%; background-repeat: no-repeat; animation: skeleton-shimmer 1.6s ease-in-out infinite; } html.dark .img-skeleton-bg { background-color: #1C232C; background-image: linear-gradient( 110deg, transparent 35%, rgba(255, 255, 255, 0.05) 50%, transparent 65% ); } .img-skeleton-bg.img-loaded { background-image: none; background-color: transparent; animation: none; } .img-skeleton-target { opacity: 0; transition: opacity 320ms ease-out; } .img-skeleton-target.is-loaded { opacity: 1; } /* Page loader CSS žije inline v (header.php) — kritická cesta. */ @media (prefers-reduced-motion: reduce) { .img-skeleton-bg { animation: none; } } body { margin: 0; padding: 0; overscroll-behavior: none; overflow-x: hidden; } /* ================================================= */ /* SCROLLBAR — žluto/modrý brand */ /* ================================================= */ * { scrollbar-width: auto; scrollbar-color: rgba(0, 173, 239, 0.7) transparent; } html.dark * { scrollbar-color: rgba(251, 199, 7, 0.6) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(0, 173, 239, 0.85), rgba(0, 144, 199, 0.85) ); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } html.dark ::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(251, 199, 7, 0.8), rgba(224, 174, 0, 0.8) ); border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } * { -webkit-tap-highlight-color: transparent; } /* ================================================= */ /* HERO BACKDROP HELPER */ /* ================================================= */ .hero-mesh { background: radial-gradient(60% 50% at 80% 10%, rgba(251, 199, 7, 0.22), transparent 70%), radial-gradient(70% 60% at 0% 100%, rgba(0, 173, 239, 0.18), transparent 65%), #F6F8FB; } html.dark .hero-mesh { background: radial-gradient(60% 50% at 80% 10%, rgba(251, 199, 7, 0.18), transparent 70%), radial-gradient(70% 60% at 0% 100%, rgba(0, 173, 239, 0.20), transparent 65%), #0B0F14; } /* ================================================= */ /* PAGE HEADER → CONTENT SECTION GAP */ /* Když .section následuje hned za page-header-band, */ /* zmenšíme top padding aby gap nebyl moc velký. */ /* ================================================= */ .page-header-band + section.section { padding-top: 3rem; /* 48px (default .section má 64px top) */ } @media (min-width: 768px) { .page-header-band + section.section { padding-top: 4.5rem; /* 72px (default md: 96px top) */ } } /* MOBIL: sjednocená mezera header→obsah na VŠECH stránkách = jako /dokumenty (28px). Pokrývá i stránky, kde mezi hlavičkou a sekcí stojí