/* TowTechniks critical CSS — above-the-fold + the shared foundation. Inlined / -first in ; main.css adds the rest async. Cascade layers establish a deterministic order so main.css can layer the section components on top of this base without specificity wars and without a single !important. The order is set here (critical.css loads first); main.css re-declares the same line — harmless. */ @layer reset, base, components, utilities; /* Fonts — 400 + 700 for the hero; 600/800 + the mono load from main.css. */ @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Design tokens — light defaults; the dark block re-points the --c-* set. Variables sit outside the layers (nothing competes to set them). */ :root{ color-scheme:light; --c-bg:#ffffff; --c-surface:#f7f8fa; --c-surface-2:#eef0f4; --c-text:#0d0e0e; --c-text-muted:#56585c; --c-border:#dfe2e8; --c-accent:#2563eb; --c-accent-hover:#1d4ed8; --c-accent-contrast:#ffffff; /* vertical rhythm */ --section-pad:clamp(56px,8vw,96px); /* radii — sharp by construction (50% only on the lite-yt play button) */ --radius:2px; /* shadows — md for card hovers, lg for the lightbox */ --shadow-md:0 8px 24px rgba(0,0,0,.10); --shadow-lg:0 24px 70px rgba(0,0,0,.45); /* motion */ --dur-fast:0.15s; --dur-base:0.25s; --dur-slow:0.4s; --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; } [data-theme="dark"]{ color-scheme:dark; --c-bg:#0d0d0f; --c-surface:#16161a; --c-surface-2:#1d1d22; --c-text:#e8e8ea; --c-text-muted:#a0a0a8; --c-border:#2a2a30; --c-accent:#3b82f6; --c-accent-hover:#60a5fa; --c-accent-contrast:#0d0d0f; --shadow-md:0 8px 24px rgba(0,0,0,.45); } @layer reset{ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body,h1,h2,h3,h4,h5,h6,p,figure,ul,ol,dl,dd,blockquote,fieldset{margin:0} ul,ol{padding:0;list-style:none} fieldset{padding:0;border:0;min-width:0} img,picture,svg,video{display:block;max-width:100%;height:auto} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{color:var(--c-accent);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)} a:hover{text-decoration:underline} :where(h1,h2,h3,h4,h5,h6){line-height:1.2;font-weight:700} } @layer base{ body{font-family:'Poppins',system-ui,sans-serif;color:var(--c-text);background:var(--c-bg);font-size:15px;font-weight:400;line-height:1.5;overflow-x:hidden;position:relative} /* Layout primitives */ .wrapper{position:relative;overflow:hidden;width:100%} .container{max-width:1230px;margin-inline:auto;padding-inline:15px;width:auto;position:relative} .mono{font-family:var(--font-mono);font-feature-settings:"liga" 0;letter-spacing:0} /* Skip link — hidden until focused. */ .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;z-index:9999;padding:10px 16px;background:var(--c-accent);color:var(--c-accent-contrast);font-weight:600;text-decoration:none} /* Focus visibility */ :focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:var(--radius)} :focus:not(:focus-visible){outline:none} /* --- Header — flat dark bar: wordmark left, nav right. --- */ .header{z-index:16;position:absolute;top:0;left:0;right:0} .header__topbar{background:linear-gradient(to bottom,#242424,#111);position:relative;z-index:17;border-bottom:1px solid rgba(255,255,255,.06)} .topbar__inner{display:flex;justify-content:flex-end;align-items:center;min-height:60px} .header__logo{position:absolute;left:15px;top:0;bottom:0;z-index:18;display:flex;align-items:center;font-family:'Poppins',sans-serif;font-size:1.15rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-decoration:none;line-height:1} .header__logo:hover{color:#fff;text-decoration:none;opacity:.85} .topbar__nav{display:flex;align-items:center;gap:clamp(14px,2.6vw,28px)} .topbar__nav-link{color:rgba(255,255,255,.6);font-size:13px;font-weight:600;letter-spacing:.02em;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)} .topbar__nav-link:hover{color:#fff;text-decoration:none;border-bottom-color:var(--c-accent)} .topbar__nav-link--blog{color:#fff;font-size:14.5px;letter-spacing:.01em} .topbar__lang{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:12px;font-weight:600} .topbar__lang a{color:rgba(255,255,255,.5);text-decoration:none} .topbar__lang a.active{color:#fff} .topbar__lang a:hover{color:#fff;text-decoration:none} .topbar__lang span{color:rgba(255,255,255,.26)} @media (max-width:991px){ .topbar__lang{font-size:11.5px} } @media (max-width:575px){ .header__logo{font-size:1rem;letter-spacing:.03em} .topbar__nav{gap:12px} } /* Theme toggle — small icon button in the topbar. */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;margin:0;border:0;border-radius:var(--radius);background:transparent;color:#fff;cursor:pointer;line-height:0;transition:background var(--dur-fast) var(--ease-out)} .theme-toggle:hover{background:rgba(255,255,255,.14)} .theme-toggle svg{width:20px;height:20px;display:block} .theme-toggle .icon-sun{display:none} .theme-toggle .icon-moon{display:block} [data-theme="dark"] .theme-toggle .icon-sun{display:block} [data-theme="dark"] .theme-toggle .icon-moon{display:none} /* Non-home pages: the header is in flow (a solid bar), so the first block just needs a little breathing room below it. */ body.page .header{position:relative} body.page .header__topbar{position:relative;z-index:auto} body.page .header+*{padding-top:clamp(24px,4vw,40px)} /* --- Hero — text hero on a real photo, dark overlay. --- */ .hero--text{position:relative;z-index:15;overflow:hidden;color:#fff;text-align:center;background:#0a0a0c;padding-block:clamp(118px,16vh,170px) clamp(56px,9vh,110px)} .hero__bg{position:absolute;inset:0;z-index:0} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center} .hero--text::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,.55) 35%,rgba(8,8,10,.82) 100%)} .hero--text .hero__content{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 15px} .hero__eyebrow{margin:0 0 16px;font-size:13px;letter-spacing:.04em;color:#7dd3fc;text-transform:none} .hero--text h1{color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.1;letter-spacing:-.01em;text-transform:none;margin:0 0 16px} .hero--text .hero__subtitle{margin:0 auto 28px;max-width:600px;color:rgba(255,255,255,.82);font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.6;font-style:normal;font-weight:300} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .hero__cta .btn{display:inline-flex;align-items:center;gap:.5em;padding:14px 26px;border-radius:var(--radius);font-size:15px;font-weight:600;line-height:1;min-height:44px;text-decoration:none;text-transform:none;border:1px solid transparent;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)} .hero__cta .btn:hover{text-decoration:none;transform:translateY(-1px)} .hero__cta .btn--primary{background:var(--c-accent);color:#fff} .hero__cta .btn--primary:hover{background:var(--c-accent-hover);color:#fff} .hero__cta .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)} .hero__cta .btn--ghost:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.6)} /* Slow Ken-Burns drift on the hero photo (motion-safe only). */ @media (prefers-reduced-motion: no-preference){ .hero__bg img{animation:hero-kenburns 28s var(--ease-in-out) infinite alternate;transform-origin:50% 45%;will-change:transform} @keyframes hero-kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(0,-1.5%,0)}} } } /* Respect reduced-motion globally. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} }