/* ============================================================ */ /* kd-chrome.css */ /* Header chrome additions: */ /* · placeholder slots injected by kd-chrome.js */ /* · language pill (EN | SV) */ /* · hamburger button + mobile nav drawer */ /* Single source of truth for these primitives. Do not */ /* duplicate in other stylesheets. */ /* ============================================================ */ /* ---------------- Chrome placeholders ----------------------- */ /* The kd-chrome.js templates are injected into these wrappers. */ /* `display: contents` removes the wrapper from the layout box */ /* tree so sticky positioning on the inner .kd-header still */ /* works against the body, exactly as it did pre-refactor. */ [data-kd-header], [data-kd-footer], [data-kd-mobilenav] { display: contents; } /* ---------------- Stock-ticker counter (kd-counter.js) ------ Digitized "data feed locking onto target" feel — the whole .kd-fact (label + value together) fades up while the value scrambles in accent color with a soft glow, then each cell pops to the foreground color when it locks. No-JS / crawler view: real values are in the HTML and visible by default. The inline `html.js` class set in hides them only when JS is on, so the script can take over and reveal label+value together. */ html.js .kd-fact:has([data-kd-counter]) { opacity: 0; transform: translateY(4px); transition: opacity 500ms var(--kd-ease), transform 500ms var(--kd-ease); } html.js .kd-fact:has([data-kd-counter].kd-counter--ready) { opacity: 1; transform: translateY(0); } /* During the scramble phase: cells glow in the active accent (mono / amber / blue / etc. depending on theme), giving a HUD/readout feel. */ .kd-counter__char { display: inline-block; color: var(--kd-accent); text-shadow: 0 0 1px currentColor, 0 0 6px color-mix(in srgb, var(--kd-accent) 35%, transparent); transition: color 240ms var(--kd-ease), text-shadow 240ms var(--kd-ease); } /* On lock: brief brighter pop, then settle to the parent foreground color. */ .kd-counter__char--locked { color: inherit; text-shadow: none; animation: kd-counter-pop 320ms var(--kd-ease) both; } @keyframes kd-counter-pop { 0% { transform: scale(1.22); color: var(--kd-accent); text-shadow: 0 0 14px var(--kd-accent-ring); } 55% { transform: scale(0.94); } 100% { transform: scale(1); color: inherit; text-shadow: none; } } @media (prefers-reduced-motion: reduce) { /* Skip the scramble motion but keep the fade-in so the values still appear gracefully rather than flashing on. */ .kd-counter__char--locked { animation: none; } .kd-counter__char { color: inherit; text-shadow: none; } html.js .kd-fact:has([data-kd-counter]) { transition-duration: 0ms; } } /* ---------------- Language pill ---------------- */ .kd-langpill { display: inline-flex; align-items: stretch; border: 1px solid var(--kd-border-strong); border-radius: 999px; overflow: hidden; height: 28px; background: var(--kd-bg); } .kd-langpill__btn { appearance: none; -webkit-appearance: none; background: transparent; border: 0; cursor: pointer; font-family: var(--kd-font-mono); font-size: 11px; font-weight: var(--kd-w-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--kd-fg-muted); padding: 0 12px; line-height: 1; transition: color var(--kd-dur) var(--kd-ease), background-color var(--kd-dur) var(--kd-ease); } .kd-langpill__btn:hover { color: var(--kd-fg); } .kd-langpill__btn.is-active { background: var(--kd-fg) !important; color: var(--kd-bg) !important; } /* ---------------- Hamburger button ---------------- */ .kd-hamburger { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--kd-border-strong); border-radius: var(--kd-radius-2, 6px); width: 36px; height: 36px; display: none; /* shown only on mobile breakpoint */ align-items: center; justify-content: center; cursor: pointer; color: var(--kd-fg); transition: background-color var(--kd-dur) var(--kd-ease); } .kd-hamburger:hover { background: var(--kd-bg-alt); } .kd-hamburger__icon { position: relative; width: 16px; height: 12px; display: block; } .kd-hamburger__icon::before, .kd-hamburger__icon::after, .kd-hamburger__icon span { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 220ms var(--kd-ease), opacity 220ms var(--kd-ease), top 220ms var(--kd-ease); } .kd-hamburger__icon::before { top: 0; } .kd-hamburger__icon span { top: 50%; transform: translateY(-50%); } .kd-hamburger__icon::after { top: 100%; transform: translateY(-100%); } /* Active (X) state when drawer is open */ .kd-hamburger[aria-expanded="true"] .kd-hamburger__icon::before { top: 50%; transform: translateY(-50%) rotate(45deg); } .kd-hamburger[aria-expanded="true"] .kd-hamburger__icon span { opacity: 0; } .kd-hamburger[aria-expanded="true"] .kd-hamburger__icon::after { top: 50%; transform: translateY(-50%) rotate(-45deg); } /* ---------------- Mobile nav drawer ---------------- */ .kd-mobilenav { position: fixed; inset: 0; z-index: var(--kd-z-modal, 1000); pointer-events: none; visibility: hidden; } .kd-mobilenav[aria-hidden="false"] { pointer-events: auto; visibility: visible; } .kd-mobilenav__scrim { position: absolute; inset: 0; background: rgba(10, 12, 16, 0.55); opacity: 0; transition: opacity 220ms var(--kd-ease); border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .kd-mobilenav[aria-hidden="false"] .kd-mobilenav__scrim { opacity: 1; } .kd-mobilenav__panel { position: absolute; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(86vw, 360px); background: var(--kd-bg); border-left: 1px solid var(--kd-border); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 260ms var(--kd-ease); display: flex; flex-direction: column; } .kd-mobilenav[aria-hidden="false"] .kd-mobilenav__panel { transform: translateX(0); } .kd-mobilenav__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--kd-border); flex: 0 0 auto; } .kd-mobilenav__brand { font-weight: var(--kd-w-semibold); font-size: 16px; letter-spacing: -0.01em; color: var(--kd-fg); text-decoration: none; } .kd-mobilenav__close { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--kd-border); border-radius: var(--kd-radius-2, 6px); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--kd-fg); cursor: pointer; font-size: 20px; line-height: 1; } .kd-mobilenav__close:hover { background: var(--kd-bg-alt); } .kd-mobilenav__list { list-style: none; margin: 0; padding: 16px 0; overflow-y: auto; flex: 1 1 auto; } .kd-mobilenav__list a { display: block; padding: 14px 24px; font-size: 18px; font-weight: var(--kd-w-medium); color: var(--kd-fg); text-decoration: none; border-bottom: 1px solid var(--kd-border); } .kd-mobilenav__list a:active { background: var(--kd-bg-alt); } .kd-mobilenav__foot { padding: 20px 24px; border-top: 1px solid var(--kd-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; } /* ---------------- Breakpoints ---------------- */ /* At <=720px the desktop nav hides (rule lives in kd-sections.css); show the hamburger here so we don't strand the user with nothing. */ @media (max-width: 720px) { .kd-hamburger { display: inline-flex; } /* Optional: hide the primary CTA in the header to save room. The drawer carries it instead. */ .kd-header__actions .kd-btn { display: none; } } /* Lock body scroll while drawer is open (set by JS) */ body.kd-no-scroll { overflow: hidden; }