/* ========================================================================= jonlo.ninja — shared design system One stylesheet, all pages. Dark is the default (OLED near-black). Light theme via [data-theme="light"] on . ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* ---------- Tokens: dark (default) ---------- */ :root { color-scheme: dark; /* surfaces — cool near-black, true-ish OLED black at base */ --bg: oklch(0.10 0.004 265); --bg-grid: oklch(0.16 0.006 265 / 0.6); --surface: oklch(0.155 0.006 265); --surface-2: oklch(0.195 0.007 265); --surface-3: oklch(0.235 0.008 265); --border: oklch(0.27 0.008 265); --border-strong:oklch(0.36 0.010 265); /* text */ --text: oklch(0.94 0.004 265); --text-dim: oklch(0.72 0.008 265); --text-faint: oklch(0.54 0.008 265); /* brand accent — candy-apple / blood red */ --accent: oklch(0.635 0.233 23); --accent-bright: oklch(0.70 0.215 23); --accent-deep: oklch(0.52 0.20 23); --accent-ink: oklch(0.98 0.01 23); /* text on accent fill */ --accent-soft: oklch(0.635 0.233 23 / 0.14); --accent-line: oklch(0.635 0.233 23 / 0.35); --glow: oklch(0.635 0.233 23 / 0.55); /* semantic status (kept distinct from red brand) */ --ok: oklch(0.78 0.165 152); --ok-soft: oklch(0.78 0.165 152 / 0.16); --warn: oklch(0.82 0.155 78); --info: oklch(0.72 0.13 240); /* placeholder injection token */ --token-bg: oklch(0.635 0.233 23 / 0.10); --token-line: oklch(0.635 0.233 23 / 0.45); /* radii */ --r-xs: 4px; --r-sm: 7px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; --sp-7: 42px; --sp-8: 60px; --sp-9: 88px; /* fluid type scale (clamp: folded-phone → TV) */ --fs-mono-lbl: clamp(0.66rem, 0.6rem + 0.25vw, 0.78rem); --fs-cap: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem); --fs-sm: clamp(0.8rem, 0.76rem + 0.25vw, 0.92rem); --fs-base: clamp(0.92rem, 0.88rem + 0.3vw, 1.05rem); --fs-md: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); --fs-lg: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); --fs-xl: clamp(1.7rem, 1.3rem + 2vw, 2.8rem); --fs-hero: clamp(2.3rem, 1.2rem + 6vw, 6rem); /* fonts */ --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace; /* chrome */ --header-h: clamp(56px, 4vw, 72px); --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4), 0 4px 14px oklch(0 0 0 / 0.35); --shadow-2: 0 8px 40px oklch(0 0 0 / 0.5); --maxw: 1320px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- Tokens: light ---------- */ [data-theme="light"] { color-scheme: light; --bg: oklch(0.975 0.003 265); --bg-grid: oklch(0.86 0.006 265 / 0.8); --surface: oklch(1 0 0); --surface-2: oklch(0.965 0.004 265); --surface-3: oklch(0.935 0.005 265); --border: oklch(0.90 0.005 265); --border-strong:oklch(0.80 0.007 265); --text: oklch(0.21 0.012 265); --text-dim: oklch(0.44 0.013 265); --text-faint: oklch(0.60 0.011 265); --accent: oklch(0.545 0.225 25); --accent-bright: oklch(0.50 0.225 25); --accent-deep: oklch(0.46 0.20 25); --accent-ink: oklch(0.99 0.005 25); --accent-soft: oklch(0.545 0.225 25 / 0.10); --accent-line: oklch(0.545 0.225 25 / 0.30); --glow: oklch(0.545 0.225 25 / 0.30); --ok: oklch(0.55 0.16 152); --ok-soft: oklch(0.55 0.16 152 / 0.13); --warn: oklch(0.62 0.15 70); --info: oklch(0.55 0.15 250); --token-bg: oklch(0.545 0.225 25 / 0.08); --token-line: oklch(0.545 0.225 25 / 0.40); --shadow-1: 0 1px 2px oklch(0.5 0.02 265 / 0.12), 0 4px 16px oklch(0.5 0.02 265 / 0.10); --shadow-2: 0 12px 44px oklch(0.5 0.02 265 / 0.16); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; overflow-x: hidden; /* default texture: fine dot field (see html[data-bg=…] overrides below) */ background-image: radial-gradient(var(--bg-grid) 1.1px, transparent 1.5px); background-size: 30px 30px; background-position: center top; } /* ---------- Background textures (set via html[data-bg], default = dots) ---------- */ html[data-bg="dots"] body { background-image: radial-gradient(var(--bg-grid) 1.1px, transparent 1.5px); background-size: 30px 30px; background-position: center top; } html[data-bg="grid"] body { background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; background-position: center top; } html[data-bg="diagonal"] body { background-image: repeating-linear-gradient(45deg, var(--bg-grid) 0 1px, transparent 1px 23px); background-size: auto; } html[data-bg="rings"] body { /* radar sweep: concentric hairlines from the top edge */ background-image: repeating-radial-gradient(circle at 50% -4%, transparent 0 47px, var(--bg-grid) 47px 48px); background-size: auto; } html[data-bg="mesh"] body { /* offset micro-cross field — fine engineering ticks */ background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px), linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 88px 88px, 88px 88px, 22px 22px, 22px 22px; background-position: center top; opacity: 1; } html[data-bg="none"] body { background-image: none; } html[data-bg="matrix"] body { background-image: none; } /* Matrix rain canvas (injected by app.js when data-bg="matrix") */ #matrix-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.62; } [data-theme="light"] #matrix-canvas { opacity: 0.32; } /* radial accent wash behind content (subtle) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(70% 50% at 50% -10%, var(--accent-soft), transparent 60%); opacity: 0.9; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; } input, select { font: inherit; } svg { display: block; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } /* ---------- Layout helpers ---------- */ .shell { position: relative; z-index: 1; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(var(--sp-4), 3vw, var(--sp-8)); } .page-main { padding-block: clamp(var(--sp-6), 4vw, var(--sp-9)); } .mono { font-family: var(--font-mono); font-feature-settings: "zero" 1; } .dim { color: var(--text-dim); } .faint { color: var(--text-faint); } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono-lbl); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: var(--sp-2); } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--glow); } /* placeholder injection token */ .tok { font-family: var(--font-mono); color: var(--accent-bright); background: var(--token-bg); border-bottom: 1px dashed var(--token-line); border-radius: var(--r-xs) var(--r-xs) 0 0; padding: 0.05em 0.34em; white-space: nowrap; } /* =========================================================== HEADER =========================================================== */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: color-mix(in oklab, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: var(--sp-4); width: 100%; } /* wordmark */ .brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-weight: 600; font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.18rem); letter-spacing: -0.01em; white-space: nowrap; color: var(--text); } .brand .node { width: 13px; height: 13px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 14px var(--glow); transform: rotate(45deg); flex: none; } .brand .tld { color: var(--accent); } .brand .dot { color: var(--accent); } /* nav */ .nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-4); } .nav-spacer { flex: 1; } .nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 13px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim); white-space: nowrap; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .nav-link:hover, .nav-trigger:hover { color: var(--text); background: var(--surface-2); } .nav-link.is-active { color: var(--text); } .nav-link.is-active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--glow); border-radius: 2px; } .nav-link { position: relative; } .nav-ext-icon { width: 11px; height: 11px; opacity: 0.55; } .chev { width: 13px; height: 13px; opacity: 0.6; transition: transform 0.18s var(--ease); } [aria-expanded="true"] .chev { transform: rotate(180deg); } /* dropdown */ .nav-group { position: relative; } .dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 232px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: var(--sp-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s; } .nav-group.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-label { font-family: var(--font-mono); font-size: var(--fs-mono-lbl); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); padding: 6px 10px 8px; } .dropdown-item { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 10px; border-radius: var(--r-sm); color: var(--text-dim); font-size: var(--fs-sm); transition: background 0.13s, color 0.13s; } .dropdown-item:hover { background: var(--surface-2); color: var(--text); } .dropdown-item .di-key { font-family: var(--font-mono); font-weight: 600; color: var(--text); min-width: 74px; } .dropdown-item:hover .di-key { color: var(--accent-bright); } .dropdown-item .di-desc { color: var(--text-faint); font-size: var(--fs-cap); } .dropdown-item .di-spacer { flex: 1; } .dropdown-item .di-mark { width: 13px; height: 13px; opacity: 0.5; flex: none; } .dropdown-sep { height: 1px; background: var(--border); margin: var(--sp-2) 6px; } .dropdown-item.gated .di-key { color: var(--text-dim); } .lock { width: 12px; height: 13px; opacity: 0.7; flex: none; } /* header right */ .header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } .theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); transition: color 0.15s, border-color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); } .theme-toggle .i-sun { display: none; } .theme-toggle .i-moon { display: block; } [data-theme="light"] .theme-toggle .i-sun { display: block; } [data-theme="light"] .theme-toggle .i-moon { display: none; } .theme-toggle svg { width: 18px; height: 18px; } .hamburger { display: none; width: 38px; height: 38px; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); } .hamburger span { display: block; width: 17px; height: 1.6px; background: var(--text); border-radius: 2px; transition: transform 0.22s var(--ease), opacity 0.18s; } .hamburger span + span { margin-top: 4px; } body.nav-open .hamburger .b1 { transform: translateY(5.6px) rotate(45deg); } body.nav-open .hamburger .b2 { opacity: 0; } body.nav-open .hamburger .b3 { transform: translateY(-5.6px) rotate(-45deg); } /* =========================================================== COMPONENTS =========================================================== */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .panel-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .panel-head h2 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; } .panel-head .ph-meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--text-faint); } /* label/value rows */ .kv-list { display: flex; flex-direction: column; } .kv { display: grid; grid-template-columns: minmax(140px, 0.4fr) 1fr; gap: var(--sp-4); align-items: start; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .kv:last-child { border-bottom: none; } .kv-key { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-dim); font-weight: 500; } .kv-key .ic { width: 15px; height: 15px; color: var(--text-faint); flex: none; } .kv-val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); word-break: break-word; line-height: 1.45; } .kv-val .sub { color: var(--text-faint); } /* status dot */ .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; } .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft), 0 0 10px var(--ok); } .dot.accent { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 10px var(--glow); } .pulse { animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* badges */ .badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-mono-lbl); letter-spacing: 0.04em; font-weight: 600; border: 1px solid var(--border-strong); color: var(--text-dim); background: var(--surface-2); } .badge.accent { color: var(--accent-bright); border-color: var(--accent-line); background: var(--accent-soft); } .badge.ok { color: var(--ok); border-color: var(--ok-soft); background: var(--ok-soft); } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 11px 18px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); transition: transform 0.08s var(--ease), background 0.15s, border-color 0.15s, box-shadow 0.15s; } .btn:hover { border-color: var(--accent-line); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px var(--glow); } .btn.primary:hover { background: var(--accent-bright); } .btn:disabled, .btn.is-running { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .btn .spin { display: none; width: 14px; height: 14px; } .btn.is-running .spin { display: block; animation: spin 0.7s linear infinite; } .btn.is-running .btn-label { opacity: 0.8; } @keyframes spin { to { transform: rotate(360deg); } } /* form fields */ .field { display: flex; flex-direction: column; gap: var(--sp-2); } .field label { font-size: var(--fs-cap); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .input, .select { width: 100%; padding: 11px 13px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-sm); transition: border-color 0.15s, box-shadow 0.15s; } .input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input::placeholder { color: var(--text-faint); } /* segmented control */ .seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); } .seg button { padding: 7px 14px; border-radius: 5px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim); transition: background 0.13s, color 0.13s; } .seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--accent-bright); box-shadow: var(--shadow-1); } /* collapsible */ .collapse-head { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-4) var(--sp-5); text-align: left; } .collapse-head .chev { transition: transform 0.2s var(--ease); margin-left: auto; } .collapse[data-open="true"] .collapse-head .chev { transform: rotate(180deg); } .collapse-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); } .collapse[data-open="true"] .collapse-body { grid-template-rows: 1fr; } .collapse-body > .inner { overflow: hidden; } /* =========================================================== MODAL (Portal gate) =========================================================== */ .modal-scrim { position: fixed; inset: 0; z-index: 100; background: oklch(0 0 0 / 0.6); backdrop-filter: blur(5px); display: grid; place-items: center; padding: var(--sp-4); opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), visibility 0.2s; } .modal-scrim.open { opacity: 1; visibility: visible; } .modal { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--sp-6); transform: translateY(10px) scale(0.98); transition: transform 0.22s var(--ease); } .modal-scrim.open .modal { transform: none; } .modal .lock-badge { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-bright); margin-bottom: var(--sp-4); } .modal .lock-badge svg { width: 22px; height: 22px; } .modal h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); } .modal p { color: var(--text-dim); font-size: var(--fs-sm); margin-bottom: var(--sp-5); } .modal .field { margin-bottom: var(--sp-4); } .modal .modal-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); } .modal .modal-actions .btn { flex: 1; } /* =========================================================== RESPONSIVE — collapse nav to hamburger =========================================================== */ @media (max-width: 900px) { .hamburger { display: grid; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: var(--sp-3); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-2); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; transform: translateY(-110%); transition: transform 0.28s var(--ease); z-index: 49; } body.nav-open .nav { transform: translateY(0); } .nav-spacer { display: none; } .nav-link, .nav-trigger { padding: 12px 14px; font-size: var(--fs-base); border-radius: var(--r-sm); } .nav-link.is-active::after { display: none; } .nav-link.is-active { background: var(--accent-soft); color: var(--accent-bright); } .nav-group { width: 100%; } .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--border); border-radius: 0; margin: 2px 0 var(--sp-2) 14px; padding: var(--sp-1) var(--sp-2); max-height: 0; overflow: hidden; transition: max-height 0.28s var(--ease); } .nav-group.open .dropdown { max-height: 600px; } .nav-group .chev { margin-left: auto; } } @media (min-width: 901px) { .nav { display: flex !important; transform: none !important; } } /* very small / folded phones */ @media (max-width: 360px) { .brand { font-size: 0.95rem; } .container { padding-inline: var(--sp-4); } .kv { grid-template-columns: 1fr; gap: var(--sp-1); } } /* large screens / TV — keep content from sprawling, scale comfortably */ @media (min-width: 2200px) { :root { --maxw: 1680px; } } @media print { .site-header, .modal-scrim { display: none; } body { background: #fff; color: #000; } } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* --- background picker (added during integration) --- */ .bg-picker { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer; -webkit-appearance: none; appearance: none; } .bg-picker:hover { border-color: var(--border-strong); color: var(--text); } @media (max-width: 540px) { .bg-picker { display: none; } } /* --- integration fix: prevent long header/UA values from forcing page-wide overflow (mobile zoom-out) --- */ .kv { min-width: 0; } .kv-val, .kv-key { min-width: 0; overflow-wrap: anywhere; } .kv-val { word-break: break-word; } /* hard guard so nothing can push the page wider than the viewport */ html, body { max-width: 100%; } /* --- integration fix: guarantee hero IP wraps, never overflows viewport --- */ .hero-ip { max-width: 100%; overflow-wrap: anywhere !important; word-break: break-all !important; } /* --- integration fix: .tok is the design's placeholder style (nowrap) — but it now wraps REAL data. Allow wrapping for the hero IP and any tok holding long values. --- */ .hero-ip .tok, .kv-val .tok { white-space: normal; overflow-wrap: anywhere; word-break: break-all; } /* --- integration: IP sized to fit one line even on a narrow phone (no wrap) --- */ .hero-ip { font-size: clamp(0.95rem, 4.4vw, 2.6rem); line-height: 1.1; } .hero-ip .tok, .kv-val .tok { white-space: nowrap; } /* fits now, so keep on one line */ /* --- integration fix: mobile nav panel (closed) must be fully hidden. translateY(-110%) didn't clear a tall panel; hide it properly until open. --- */ @media (max-width: 900px) { .nav { visibility: hidden; transition: transform 0.28s var(--ease), visibility 0s linear 0.28s; } body.nav-open .nav { visibility: visible; transition: transform 0.28s var(--ease), visibility 0s; } }