/* ══════════════════════════════════════════════════════════════════════════════ vitalite-skin.css — the active skin for theme_switch.py ------------------------------------------------------------------------------ NOTE: the old `@import url('gold-blue-theme.css')` was REMOVED — it re-loaded the theme UNPINNED, and browsers caching that URL served a stale pre-rail copy that landed AFTER the pinned ?v=12 link in the cascade, overriding the rail media rule (sidebar stuck at 224px). Every page links gold-blue-theme.css directly, so the import was pure duplication. Gold/Blue brand + the Linear v2 shell mechanics (the collapsible 36px rail). The shell's interaction (linear-layout.js) toggles `lin-rail-collapsed` on ; this file is the CSS that makes that class DO something while keeping the page looking like the gold-blue theme — the white/red Linear skin (linear-theme.css) is the full rebrand and is NOT what production ships. The collapse rules below are scoped to body.lin-v2 so they only exist when linear-layout.js is present (i.e. when this file is linked by the DRAFT-THEME block). Pages without the shell are untouched. Remove with: python3 tools/theme_switch.py off ══════════════════════════════════════════════════════════════════════════════ */ :root{ --lin-rail-w:240px; /* expanded rail — same as the base .sidebar width */ --lin-rail-min:36px; /* collapsed icon rail — Zen compact */ --lin-t:.14s; --lin-ease:cubic-bezier(.16,1,.3,1); } /* ── Base (expanded) — gold-blue look, shell transition + icon rows ── */ body.lin-v2 .sidebar{ overflow-x:hidden; transition:width var(--lin-t) var(--lin-ease),transform .3s; } body.lin-v2 .page-wrapper{transition:margin-left var(--lin-t) var(--lin-ease)} /* Rows the shell gave an icon to become icon + label rows. */ body.lin-v2 .sidebar-link.lin-has-ico{display:flex;align-items:center;gap:8px} body.lin-v2 .lin-ico{flex:none;display:inline-flex;opacity:.85} body.lin-v2 .sidebar-link.active .lin-ico{opacity:1;color:var(--accent)} /* The collapse toggle: a small square under the wordmark (expanded). */ body.lin-v2 .lin-rail-collapse{ width:28px;height:28px; flex:none; display:inline-flex;align-items:center;justify-content:center; margin:0 8px 4px auto; border:1px solid transparent;border-radius:6px; background:transparent;color:var(--text3); cursor:pointer; transition:background .15s ease,color .15s ease,opacity .15s ease; } body.lin-v2 .lin-rail-collapse:hover{background:var(--accent-bg);color:var(--accent)} /* ── Collapsed: Zen compact icon rail (36px) ── */ body.lin-v2.lin-rail-collapsed .sidebar{width:var(--lin-rail-min);padding-top:4px;overflow:hidden} body.lin-v2.lin-rail-collapsed .page-wrapper{margin-left:var(--lin-rail-min)} /* Wordmark dives; the expand toggle rides at the top of the rail. */ body.lin-v2.lin-rail-collapsed .sidebar-logo{ height:0;padding:0;margin:0;border:0; overflow:hidden;opacity:0;pointer-events:none; } body.lin-v2.lin-rail-collapsed .lin-rail-collapse{ width:100%;height:28px; margin:0;padding:0;border:0;border-radius:0; justify-content:center; opacity:.55; } body.lin-v2.lin-rail-collapsed .lin-rail-collapse:hover{opacity:1;color:var(--accent)} /* Labels and group gutters disappear; rows become centred icon tiles. */ body.lin-v2.lin-rail-collapsed .sidebar-label{ height:0;padding:0;margin:0;border:0; overflow:hidden;font-size:0;opacity:0; } body.lin-v2.lin-rail-collapsed .sidebar-group{margin:0;padding:0;border:0} body.lin-v2.lin-rail-collapsed .sidebar-group + .sidebar-group{border:0;padding-top:2px} body.lin-v2.lin-rail-collapsed .sidebar-link{ justify-content:center; padding:0;gap:0; min-height:32px; border-left:0;border-radius:0; } body.lin-v2.lin-rail-collapsed .sidebar-link.active{border-left:0;background:var(--accent-bg)} /* Rows with no icon fall back to their first character. */ body.lin-v2.lin-rail-collapsed .sidebar-link:not(.lin-has-ico){font-size:.6875rem;font-weight:600;padding:0} body.lin-v2.lin-rail-collapsed .sidebar-link.lin-has-ico{font-size:0} body.lin-v2.lin-rail-collapsed #onthisGroup{display:none} /* Collapsible part groups keep their caret so they stay reachable in the rail. */ body.lin-v2.lin-rail-collapsed .part-toggle{ justify-content:center; padding:0;gap:0; min-height:28px; font-size:0; border-left:0; } body.lin-v2.lin-rail-collapsed .part-toggle .part-caret{ display:block; font-size:.65rem; color:var(--text3); } /* ── Mobile: the rail is a drawer, never the collapsed rail ── Gold-blue draws the drawer below 600px; keep that, and override every collapsed rule so a collapsed preference cannot break the drawer. */ @media (max-width:600px){ body.lin-v2 .sidebar, body.lin-v2.lin-rail-collapsed .sidebar{width:min(84vw,300px)} body.lin-v2 .page-wrapper, body.lin-v2.lin-rail-collapsed .page-wrapper{margin-left:0} body.lin-v2 .lin-rail-collapse{display:none} body.lin-v2.lin-rail-collapsed .sidebar-logo{ height:auto;padding:0 1rem .75rem;margin:0 0 .5rem; border-bottom:1px solid var(--border); opacity:1;pointer-events:auto; } body.lin-v2.lin-rail-collapsed .sidebar-label{ height:auto;padding:.5rem 1rem .25rem;margin:0; font-size:.7rem;opacity:1; } body.lin-v2.lin-rail-collapsed .sidebar-group{margin:0 0 .5rem;padding:0} body.lin-v2.lin-rail-collapsed .sidebar-link{ justify-content:flex-start; padding:.4rem 1rem .4rem 1.5rem;gap:8px; min-height:auto;font-size:.85rem; } body.lin-v2.lin-rail-collapsed .sidebar-link.lin-has-ico{font-size:.85rem} body.lin-v2.lin-rail-collapsed .sidebar-link:not(.lin-has-ico){font-size:.85rem;font-weight:400} body.lin-v2.lin-rail-collapsed #onthisGroup{display:block} body.lin-v2.lin-rail-collapsed .part-toggle{ justify-content:flex-start; gap:.5rem;min-height:auto; padding:.6rem 1rem .6rem 1.15rem; font-size:.85rem; } body.lin-v2.lin-rail-collapsed .part-toggle .part-caret{font-size:inherit;color:inherit} } /* ── Wordmark lives in the rail only ───────────────────────────────────── The Linear shell skin hides the top-bar `.logo` via `body.lin-v2 .lin-topbar-inner > .logo{display:none}`, but that rule is in linear-theme.css which production does NOT load (we ship gold-blue via this file). Mirror it here so the top bar shows no duplicate wordmark. The rail wordmark stays: click → homepage (index.html), zero hover feedback — static logo, no cursor/color/underline change on hover. */ body.lin-v2 .lin-topbar-inner > .logo{display:none} body.lin-v2 .logo, body.lin-v2 .sidebar-logo a{cursor:default} body.lin-v2 .logo:hover, body.lin-v2 .logo:focus, body.lin-v2 .sidebar-logo a:hover, body.lin-v2 .sidebar-logo a:focus{ color:var(--text); text-decoration:none; background:transparent; } /* ── Oliver: quiet top edge — no study-surface tab strip, no breadcrumb ── The shell mounts Guide/Contents/NPTE/CN-Cert tabs (lin-pagetabs) plus a page-name crumb (lin-crumb inside .lin-context) at the top of shell pages. Both are chrome noise Oliver wants gone. The ⌘K palette and guide chapter tabs (lin-tabstrip without lin-pagetabs) are untouched. */ body.lin-v2 .lin-pagetabs{display:none} body.lin-v2 .lin-context{display:none} /* ── Patrick: no sidebar toggle ───────────────────────────────────────── The ☰ drawer/rail button is removed — the sidebar is always present and never collapsed, so there is nothing to toggle. */ body.lin-v2 .sidebar-toggle{display:none!important} /* ── Top bar layout + toggles ───────────────────────────────────────────── The layout script builds a .lin-topbar-inner with: .lin-topleft — the bilingual + dark/light toggles, FIRST child so they sit at the very top-LEFT of the bar (Patrick) / — hidden on the shipped skin .header-actions — the profile / login button + notification bell plus the section pills (sections.js appends them there) .lin-search-cluster — the search field The search is LEFT-DOCKED (not centered): toggles, then the field, then a flex slab, then the control stack pinned to the far right. The control stack keeps its natural content width (flex:0 0 auto — it never shrinks below bell + account pill + section pills + study pill + dev gear), and the field's margin-right:auto eats the slack, so the field always sits safely LEFT of the stack and can never slide under it. An equal-weight centered layout was tried first — it broke the moment the right flank's content (≈406px when signed in as a dev) grew wider than half the bar − the field, being a fixed middle child, let the stack overflow left UNDER it. Left-docking removes that failure mode entirely. */ /* Roomier bar: more vertical padding and side air so the top doesn't feel squeezed. On shell pages the bar spans the full content width (the 820px content column below stays narrow), so the search, the bell, the account pill and the section pills are never crushed into the 820 column. */ body.lin-v2 .lin-topbar-inner{padding:.9375rem 20px} body.lin-v2:not(.lin-marketing) .lin-topbar-inner{max-width:none} /* Top bar balance — the two flanks (toggles on the left, the control stack on the right) each grow from a zero basis to fill half of the leftover room, so the search field between them sits at the exact middle of the bar. The uniform gap keeps a steady 14px rhythm around every control. */ body.lin-v2 .lin-topbar-inner{gap:14px} /* Search: an ordinary in-flow child right after the toggles. The auto right margin absorbs ALL the slack before the controls, pinning them to the bar's far right and the field safely left of them. */ body.lin-v2 .lin-search-cluster{ order:0; flex:0 0 auto; position:relative; /* the dropdown anchors its centre to the field */ display:flex;align-items:center;gap:20px; z-index:10; margin-right:auto; /* slab: any leftover room goes here, after the field */ } /* Left flank — the toggles keep exactly their natural width; they are the very first thing in the bar. */ body.lin-v2 .lin-topbar-inner > .lin-topleft{ order:-1; flex:0 0 auto; justify-content:flex-start; } /* Right flank — the whole control stack (bell · account pill · section pills · Study Tools · dev gear) keeps its natural content width, pinned to the bar's right edge. Because it never shrinks, it can never slip under the field — the field simply takes the leftover room. */ body.lin-v2 .header-actions{ order:1; flex:0 0 auto; justify-content:flex-end; gap:14px; margin-left:0; /* cancel the base auto margin */ } /* The section pills (sections.js rides them inside this flank) keep the uniform 14px gap — a leftover margin from the old right-corner placement is zeroed so the rhythm reads even. */ body.lin-v2 .header-actions .sec-switcher{margin-left:0} /* Smaller account pill: fits neatly under the field's flank without crowding the bell or the section pills. */ body.lin-v2 .header-actions .btn-login{ padding:.28rem .6rem; font-size:.78rem; gap:.35rem; } body.lin-v2 .header-actions .btn-login .bl-name{max-width:88px} /* ── Study Tools menu (the four study surfaces, one pill) ────────────── linear-layout.js mounts #studyToolsBtn + #studyMenu inside the right flank. The pill keeps the section-pill look so it reads as part of the same capsule family; the dropdown hangs below the bar, right-aligned, above page content but far below the tutorial spotlight layer (2147483000+) — the spotlight ring floats over it and dims everything outside its hole, which is exactly what the tour needs to highlight the four menu items (#stFlash/#stQuiz/#stExam/#stAI). */ body.lin-v2 .lin-study-wrap{ position:relative; flex:0 0 auto; align-self:center; z-index:60; } body.lin-v2 .lin-study-btn{ display:inline-flex;align-items:center;gap:.35rem; padding:.3rem .65rem;border-radius:99px; border:1px solid var(--border); background:var(--surface2); color:var(--text2); font-family:var(--font);font-size:.78rem;font-weight:700;line-height:1.2; white-space:nowrap;cursor:pointer; flex:0 0 auto; transition:color .15s,background .15s,border-color .15s; } body.lin-v2 .lin-study-btn:hover{color:var(--accent);background:var(--surface)} body.lin-v2 .lin-study-caret{opacity:.65;transform:rotate(90deg);font-size:.8rem} body.lin-v2 .lin-study-wrap.open .lin-study-btn{color:var(--accent);border-color:var(--accent)} body.lin-v2 .lin-study-menu{ position:absolute;top:calc(100% + 8px);right:0; min-width:215px; display:none;flex-direction:column;gap:2px; padding:.35rem; background:var(--surface2); border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.14); } body.lin-v2 .lin-study-wrap.open .lin-study-menu{display:flex} body.lin-v2 .lin-study-item{ display:flex;align-items:center;gap:.6rem; padding:.5rem .7rem;border-radius:9px; background:transparent;border:0; color:var(--text2); font-family:var(--font);font-size:.83rem;font-weight:600;line-height:1.2; text-align:left;white-space:nowrap;cursor:pointer; transition:background .15s,color .15s; } body.lin-v2 .lin-study-item:hover{background:var(--surface);color:var(--accent)} body.lin-v2 .lin-study-item .lin-ico{flex:0 0 auto} body.lin-v2 .lin-study-label{white-space:nowrap} /* Label collapses below 900px but the pill itself stays (it is the tour anchor + the shortcut); mirror the .btn-login icon-only treatment. */ @media (max-width:900px){ body.lin-v2 .lin-study-btn .lin-study-label{display:none} body.lin-v2 .lin-study-btn{padding:.3rem .5rem} } body.lin-v2 .lin-search{ position:relative; display:flex;align-items:center; width:clamp(180px,min(26vw,260px),260px); } /* Language-adaptive balance: English labels (sidebar/toggles/pill) are wider so the field stays compact; Chinese is denser, so give the search bar more room — the two languages then read equally balanced. */ body.lin-v2.lang-zh .lin-search{ width:clamp(220px,min(34vw,330px),330px); } body.lin-v2 .lin-search > .lin-ico{ position:absolute;left:12px;top:50%;margin-top:-8px; color:var(--text3); pointer-events:none; } body.lin-v2 .lin-search-input{ width:100%;height:32px; padding:0 34px 0 32px; border:1px solid var(--border2); border-radius:var(--radius-sm); background:var(--surface2); color:var(--text); font-family:var(--font); font-size:.8125rem;letter-spacing:-.006em; outline:none; transition:background var(--lin-t) ease,border-color var(--lin-t) ease,box-shadow var(--lin-t) ease; } body.lin-v2 .lin-search-input::placeholder{color:var(--text3)} body.lin-v2 .lin-search-input:focus{ background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,24,40,.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); } body.lin-v2 .lin-search-kbd{ position:absolute;right:10px;top:50%;margin-top:-10px; font-family:var(--font-mono,monospace); font-size:.6875rem;font-weight:600; font-variant-numeric:tabular-nums; color:var(--text3); border:1px solid var(--border2); border-radius:4px; padding:2px 5px; background:var(--bg); line-height:1.25; pointer-events:none; } body.lin-v2 .lin-search:focus-within .lin-search-kbd{display:none} /* The toggles beside the field — round icon buttons matching the field's quiet surface instead of the loud floating pills elsewhere. */ body.lin-v2 .lin-topleft{display:flex;align-items:center;gap:12px} body.lin-v2 .lin-topleft .btn-icon{ width:34px;height:34px; border-radius:50%; border:1px solid var(--border2); background:var(--surface2); color:var(--text2); font-size:.95rem; display:flex;align-items:center;justify-content:center; cursor:pointer; transition:background var(--lin-t) ease,border-color var(--lin-t) ease,color var(--lin-t) ease,transform var(--lin-t) ease,box-shadow var(--lin-t) ease; } body.lin-v2 .lin-topleft .btn-icon:hover{ background:var(--accent-bg); border-color:var(--accent); color:var(--accent); } body.lin-v2 .lin-search-dd{ position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:min(560px,calc(100vw - 32px)); max-height:min(62vh,480px); overflow-y:auto; overscroll-behavior:contain; margin:0;padding:6px; list-style:none; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:500; animation:lin-rise .14s var(--lin-ease); } body.lin-v2 .lin-search-dd[hidden]{display:none} body.lin-v2 .lin-search-empty{ padding:24px 16px; color:var(--text3); font-size:.8125rem; } /* Group + row styles inside the dropdown. */ body.lin-v2 .lin-search-dd .lin-cmdk-group{ padding:10px 8px 4px; font-size:.6875rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase; color:var(--text3); } body.lin-v2 .lin-search-dd .lin-cmdk-item{ display:flex;align-items:center;gap:10px; min-height:32px; padding:0 8px; border-radius:var(--radius-sm); color:var(--text2); font-size:.8125rem; cursor:pointer; } body.lin-v2 .lin-search-dd .lin-cmdk-item.on{background:var(--accent-bg);color:var(--text)} body.lin-v2 .lin-search-dd .lin-cmdk-item.on .lin-ico{color:var(--accent)} body.lin-v2 .lin-search-dd .lin-cmdk-item .lin-cmdk-label{ flex:1;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } body.lin-v2 .lin-search-dd .lin-cmdk-item .lin-cmdk-hint{ flex:none; font-family:var(--font-mono,monospace); font-size:.6875rem; font-variant-numeric:tabular-nums; color:var(--text3); } @keyframes lin-rise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* Narrow-bar band: with a 224px sidebar the shell bar is short (900→350px of usable width). The pills are hidden below 900px (sections.css) so the bar boils down to toggles · left-docked search · bell · account · Study Tools. The left-dock means the flank never underlaps the field — but the field must cede real estate, so ≤768 (below) tightens it further. */ @media (max-width:900px){ body.lin-v2 .lin-search{width:clamp(130px,22vw,190px)} body.lin-v2.lang-zh .lin-search{width:clamp(150px,27vw,220px)} body.lin-v2 .header-actions .btn-login{ max-width:40px; padding:.3rem .45rem; gap:.3rem; } body.lin-v2 .header-actions .btn-login .bl-name{display:none} } /* Tight band — deliberately AFTER the 900px band so these narrower values win in ≤850. With the 224px sidebar the usable bar is as short as ~350px, so the ↻ replay pill disappears from .lin-topleft, the toggles shrink to 30px and the search clamps down hard — otherwise the right control stack (bell · account · Study Tools · dev gear) clips past the bar's right edge. */ @media (max-width:850px){ body.lin-v2 .lin-topleft #tutReplay{display:none} body.lin-v2 .lin-topleft .btn-icon{width:30px;height:30px} body.lin-v2 .lin-search{width:clamp(90px,min(16vw,140px),140px)} body.lin-v2.lang-zh .lin-search{width:clamp(100px,min(18vw,150px),150px)} body.lin-v2 .lin-search-kbd{display:none} body.lin-v2 .lin-search-cluster{gap:10px} body.lin-v2 .lin-topleft{gap:8px} body.lin-v2 .header-actions{gap:10px} body.lin-v2 .lin-topbar-inner{gap:10px} body.lin-v2 .lin-topbar-inner{padding:.6rem 12px} } @media (max-width:600px){ body.lin-v2 .lin-search{width:min(34vw,130px)} body.lin-v2.lang-zh .lin-search{width:min(36vw,140px)} body.lin-v2 .lin-search-cluster{gap:10px} body.lin-v2 .lin-topleft{gap:8px} body.lin-v2 .lin-search-dd{width:min(92vw,320px)} body.lin-v2 .header-actions{gap:10px} body.lin-v2 .header-actions .btn-login{max-width:38px;padding:.45rem .5rem} body.lin-v2 .header-actions .btn-login .bl-name{display:none} } /* ── Rail icons: equal spacing, always fit ──────────────────────────────────────── At rest the sidebar is a thin icon rail — the gold-blue 56px hover rail ((hover:hover) desktops ≥901px) by default. The rest rail shows ONLY the part-group toggles. Give every row a uniform 30px height with equal, near-zero gaps so the icons fit any window height and are evenly spaced. On hover/focus the rail expands to the flyout — unify EVERY row there (part toggles, links, sub-links) to one 30px height and a single gap so the whole nav shares one rhythm. Scoped strictly to the rail/hover contexts so medium windows (601–900px, full 240px label sidebar) and touch layouts are untouched. */ /* ── All states: every sidebar row equally lengthed ────────────────────────────── The rail/flyout rules above only cover the icon-rail states. The full 240px label sidebar (medium windows 601-900px + touch/no-hover) kept the inline accordion heights — part-toggles ~42px, sidebar links 29px, separator labels 30px — so an OPENED group read as squeezed/ragged and the Knowledge group (the longest) showed it worst. Equalize EVERY row in every state to one 32px box with equal 2px gaps. */ body.lin-v2 .sidebar .part-toggle, body.lin-v2 .sidebar .sidebar-group.part > .part-body .sidebar-link, body.lin-v2 .sidebar .sidebar-group.part > .part-body .sidebar-link.sub, body.lin-v2 .sidebar .sidebar-group.part > .part-body .sidebar-label{ height:32px;min-height:32px;margin:2px 0;line-height:1; } body.lin-v2 .sidebar .sidebar-group.part > .part-body .sidebar-label{ display:flex;align-items:center; } /* ── gold-blue hover rail (the DEFAULT desktop state) ──────────────── The rail lives in gold-blue-theme.css ((hover:hover) desktops ≥901px: 56px rest → 224px flyout on hover/focus). Nothing in this skin touches the rail width or label visibility — gold-blue owns it. The base row equalization above applies in every state, so no per-state re-assertion is needed here. Touch layouts and medium windows keep the base 224px sidebar untouched. */