/* =================================================================== * v683 — DESIGN TOKEN ARCHITECTURE * * All visual properties cascade through CSS variables so swapping a * theme or font becomes a single root attribute change instead of N * per-element rewrites. Adding a new theme = add a new * [data-theme="X"] block here. Adding a new font set = add a new * [data-typeset="X"] block here. Components reference var() only. * * Hierarchy: * [data-theme] → color palette (light / dark / pink / cat / ember) * [data-typeset] → typography (regular / editorial) * [data-density] → spacing scale (future: compact / standard / comfy) * [data-motion] → animation policy (full / reduced — auto) * * Read this comment block before changing any token. Components that * still hardcode colors/fonts/sizes should be migrated to vars. * =================================================================== */ /* ---------- TYPOGRAPHY TOKENS (v683) ---------- * Default: Manrope sans + IBM Plex Mono (the historical CB look). * Editorial mode: Fraunces serif for body + headings (cinematic feel). * Switch via window.CBFontToggle or by setting data-typeset="editorial" * on . Persists in localStorage('cb-typeset'). * Mono stays Mono regardless of typeset (code-flavor consistent). */ :root { --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-size-base: 20px; /* v741 — 19→20px (David: "continually making the font a little bit bigger") */ --line-height-base: 1.78; /* v738 — paired bump for breathing room */ --tap-min: 44px; /* v741 — Apple HIG / WCAG 2.5.5 minimum tap target — used by clickable controls */ /* Corner Radii scale */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* Spacing Scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Typography Line-Heights */ --lh-display: 1.25; --lh-body: 1.8; --lh-callout: 1.66; } [data-typeset="editorial"] { --font-body: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-heading: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; /* --font-mono unchanged — IBM Plex Mono stays for code/eyebrows/data */ } :root,[data-theme="light"]{--bg:#fcfbfa;--bg2:#ffffff;--bg3:#f4f3f0;--bg4:#eae8e3;--bg-nav:rgba(252,251,250,.85);--bg-glass:rgba(255,255,255,.7);--text:#1c1917;--text2:#4a4744;--text3:#787570;--bg-rgb:252,251,250;--border:#e2dfda;--border2:#d0ccc5;--accent:#0b6635;--accent2:#10b981;--ar:11,102,53;--gold:#92400e;--gold2:#f59e0b;--gr:146,64,14;--purple:#6d28d9;--purple2:#a78bfa;--pr:109,40,217;--red:#b91c1c;--red2:#f87171;--rr:185,28,28;--green:#0b6635;--green2:#10b981;--nr:11,102,53;--orange:#c2410c;--orange2:#fb923c;--or:194,65,12;--soft:rgba(var(--ar),.05);--mid:rgba(var(--ar),.1);--gold-soft:rgba(var(--gr),.05);--gold-mid:rgba(var(--gr),.1);--purple-soft:rgba(var(--pr),.05);--purple-mid:rgba(var(--pr),.1);--red-soft:rgba(var(--rr),.05);--red-mid:rgba(var(--rr),.1);--green-soft:rgba(var(--nr),.05);--green-mid:rgba(var(--nr),.1);--orange-soft:rgba(var(--or),.05);--orange-mid:rgba(var(--or),.1);--glow:0 0 20px rgba(var(--ar),.08);--card-lift:0 8px 32px rgba(0,0,0,.06);--shadow:0 1px 3px rgba(0,0,0,.04);--chroma-1:#0b6635;--chroma-2:#10b981;--chroma-3:#34d399;--grain:.03} /* v724 — Dark theme harmonised with Obsidian's typography + neutral palette. */ [data-theme="dark"]{--bg:#09090e;--bg-rgb:9,9,14;--bg2:#121217;--bg3:#1a1a21;--bg4:#24242d;--bg-nav:rgba(9,9,14,.88);--bg-glass:rgba(255,255,255,.05);--text:#e4e4eb;--text2:#a1a1b3;--text3:#65657d;--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.15);--accent:#34d399;--accent2:#6ee7b7;--ar:52,211,153;--gold:#fbbf24;--gold2:#fde68a;--gr:251,191,36;--purple:#a78bfa;--purple2:#c4b5fd;--pr:167,139,250;--red:#f87171;--red2:#fca5a5;--rr:248,113,113;--green:#34d399;--green2:#6ee7b7;--nr:52,211,153;--orange:#fb923c;--orange2:#fdba74;--or:251,146,60;--soft:rgba(var(--ar),.08);--mid:rgba(var(--ar),.14);--gold-soft:rgba(var(--gr),.08);--gold-mid:rgba(var(--gr),.14);--purple-soft:rgba(var(--pr),.08);--purple-mid:rgba(var(--pr),.14);--red-soft:rgba(var(--rr),.08);--red-mid:rgba(var(--rr),.14);--green-soft:rgba(var(--nr),.08);--green-mid:rgba(var(--nr),.14);--orange-soft:rgba(var(--or),.08);--orange-mid:rgba(var(--or),.14);--glow:0 0 24px rgba(var(--ar),.12);--card-lift:0 12px 36px rgba(0,0,0,.35);--shadow:0 1px 3px rgba(0,0,0,.4);--chroma-1:#34d399;--chroma-2:#10b981;--chroma-3:#047857;--grain:.015} /* v825 — David: the entire DARK theme should read EMERALD-GREEN like the V4 Shoulder module (his reference), not fade through blue/purple. The chroma trio drives every gradient hero title (.land-hero h1 em, .cb-ed-h1 em, .ps-h1 em, .pp-hero h1 em, etc.) + the ambient radial glow. Was green->sky(#38bdf8)-> purple(#a78bfa), which is why Library/other heroes looked purple. Now an all-emerald light->mid->deep ramp so every dark page matches the Shoulder. */ [data-theme="dark"] body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} *{box-sizing:border-box;margin:0;padding:0;overflow-wrap:break-word;word-wrap:break-word} body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--font-size-base);line-height:var(--line-height-base);-webkit-font-smoothing:antialiased;transition:background .45s ease,color .35s ease,filter .8s ease;overflow-wrap:break-word;word-wrap:break-word} /* v683 — headings inherit --font-heading; switches to Fraunces in editorial mode */ h1,h2,h3,h4{font-family:var(--font-heading)} /* v683 — mono spans use --font-mono so future font-pair changes cascade */ code,kbd,samp,pre{font-family:var(--font-mono)} body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px} /* v471: REVERT overflow-x:auto from v466 — it was clipping nav-cat dropdowns (Foundations/MSK/Spine/Neuro/etc.) The original reason for overflow-x:auto was a wide theme-toggle, but v470 replaced the 4-button toggle with a compact 38px dropdown trigger, so the nav fits again. */ .site-nav{position:sticky;top:0;z-index:100;background:var(--bg-nav);backdrop-filter: var(--glass-filter-anchor);-webkit-backdrop-filter: var(--glass-filter-anchor);border-bottom:1px solid var(--border);padding:0 16px;display:flex;align-items:center;height:48px;gap:3px;overflow:visible!important;transition:all .45s ease;box-shadow:0 1px 3px rgba(0,0,0,.03)} .site-nav::-webkit-scrollbar{display:none;width:0;height:0} .site-nav .theme-toggle{flex-shrink:0;margin-left:4px;margin-right:2px} .site-nav > *:last-child{margin-right:0} .site-nav .logo-link{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--text);flex-shrink:0;margin-right:6px} .site-nav .mark{width:28px;height:28px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Manrope',sans-serif;font-weight:800;font-size:11px;letter-spacing:.5px;transition:all .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 10px rgba(var(--ar),.3)} .site-nav .logo-link:hover .mark{transform:scale(1.18) rotate(-8deg);box-shadow:0 4px 16px rgba(var(--ar),.4)} .site-nav .brand-text{font-weight:700;font-size:13px;letter-spacing:-.4px;white-space:nowrap} .site-nav a.nav-link{color:var(--text3);text-decoration:none;font-size:12.5px;font-weight:600;padding:5px 9px;border-radius:6px;white-space:nowrap;transition:all .2s ease;flex-shrink:0;position:relative;letter-spacing:.01em} .site-nav a.nav-link::after{content:'';position:absolute;bottom:1px;left:50%;width:0;height:1.5px;background:var(--accent);border-radius:1px;transition:width .25s ease,left .25s ease} .site-nav a.nav-link:hover{color:var(--text)} .site-nav a.nav-link:hover::after{width:50%;left:25%} .site-nav a.nav-link.active{color:var(--accent);background:var(--soft)} .site-nav a.nav-link.active::after{width:50%;left:25%} .nav-spacer{flex:1;min-width:4px} .cb-nav-search-btn,.cb-nav-flashcards-btn{border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;padding:6px 12px;border-radius:8px;font-size:12px;font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.02em;transition:all .2s;margin-right:6px;flex-shrink:0} .cb-nav-search-btn:hover,.cb-nav-flashcards-btn:hover{background:var(--soft);color:var(--accent);border-color:var(--accent)} #cb-fc-fab,#cb-search-fab{display:none} /* v469: theme toggle as dropdown — TRIGGER inside nav, POPOVER at body level. Popover at body level escapes every possible overflow/transform/filter clip. */ .theme-toggle{position:relative;display:flex;flex-shrink:0;background:transparent;border:none;padding:0;border-radius:0;transition:none} .theme-toggle.theme-dd .theme-dd-trigger{ display:flex;align-items:center;justify-content:center;gap:3px; width:auto;min-width:38px;height:30px;padding:0 8px 0 10px; background:var(--bg3);border:1px solid var(--border);border-radius:8px; font-size:13px;cursor:pointer;color:var(--text2); transition:all .2s cubic-bezier(.4,0,.2,1); } .theme-toggle.theme-dd .theme-dd-trigger:hover{background:var(--soft);color:var(--accent);border-color:var(--accent)} .theme-toggle.theme-dd.open .theme-dd-trigger{background:var(--soft);color:var(--accent);border-color:var(--accent);box-shadow:var(--shadow)} .theme-toggle.theme-dd .theme-dd-current{font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center} .theme-toggle.theme-dd .theme-dd-chev{font-size:8.5px;color:var(--text3);transition:transform .2s cubic-bezier(.4,0,.2,1);line-height:1;margin-top:1px} .theme-toggle.theme-dd.open .theme-dd-chev{transform:rotate(180deg);color:var(--accent)} /* Popover lives at body level — positioned with JS via fixed positioning */ .theme-dd-popover{ position:fixed;top:-9999px;left:-9999px; background:var(--bg2);border:1px solid var(--border2);border-radius:11px; padding:5px;min-width:160px; display:none;flex-direction:column;gap:1px; box-shadow:0 16px 36px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.10); z-index:99999; animation:themeDdIn .18s cubic-bezier(.4,0,.2,1); } [data-theme="dark"] .theme-dd-popover{box-shadow:0 16px 40px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4)} .theme-dd-popover.open{display:flex} @keyframes themeDdIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .theme-dd-popover .theme-btn{ width:auto;height:auto;display:flex;align-items:center;justify-content:flex-start;gap:10px; padding:9px 12px;border-radius:7px; font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:600;color:var(--text); background:transparent;border:1px solid transparent;cursor:pointer; transition:background .15s,color .15s,border-color .15s; text-align:left;flex-shrink:0; } .theme-dd-popover .theme-btn:hover{background:var(--bg3);color:var(--text);transform:none} .theme-dd-popover .theme-btn.active{background:var(--soft);color:var(--accent);border-color:var(--mid);box-shadow:none;transform:none} .theme-dd-popover .theme-btn .theme-dd-ico{font-size:14px;width:18px;text-align:center;display:inline-flex;align-items:center;justify-content:center} .theme-dd-popover .theme-btn .theme-dd-lbl{font-size:13.5px;font-weight:600} .theme-dd-popover .theme-btn.active .theme-dd-lbl{font-weight:700} /* v474: removed ::after checkmark — JS now injects a checkmark inline so we don't double-up */ .hero{padding:44px 28px 32px;border-bottom:1px solid var(--border);max-width:1120px;margin:0 auto;transition:border-color .45s;position:relative;overflow:hidden} .hero-tag{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--accent);letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px;font-weight:500} .hero h1{font-family:'Manrope',sans-serif;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700;line-height:1.2;letter-spacing:-.025em;margin-bottom:10px} .hero h1 span{color:var(--accent2);font-weight:500} .hero p{color:var(--text2);max-width:680px;font-size:15.5px;line-height:1.75;font-weight:400} .hero-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px} .badge{background:var(--soft);border:1px solid var(--mid);color:var(--accent);font-size:11px;font-family:'IBM Plex Mono',monospace;padding:3px 11px;border-radius:20px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1)} .badge:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(var(--ar),.15);background:var(--mid)} .badge.gold{background:var(--gold-soft);border-color:var(--gold-mid);color:var(--gold)} .badge.purple{background:var(--purple-soft);border-color:var(--purple-mid);color:var(--purple)} .badge.red{background:var(--red-soft);border-color:var(--red-mid);color:var(--red)} .badge.green{background:var(--green-soft);border-color:var(--green-mid);color:var(--green)} .badge.orange{background:var(--orange-soft);border-color:var(--orange-mid);color:var(--orange)} .chip-nav{background:var(--bg2);border-right:1px solid var(--border);padding:6px 20px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;transition:background .45s,border-color .45s;position:sticky;top:48px;width:200px;min-width:200px;max-height:calc(100vh - 48px);flex-shrink:0;overflow-x:hidden;align-self:stretch} .chip-nav::-webkit-scrollbar{width:3px} .chip-nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} .chip-nav button{background:var(--bg3);border:1px solid transparent;color:var(--text3);font-family:var(--font-body);font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;border-left:2px solid transparent;border-bottom:none;white-space:normal;line-height:1.3;transition:all .25s cubic-bezier(.4,0,.2,1);letter-spacing:.01em;text-align:left;border-radius:20px;word-break:break-word;position:relative;overflow:hidden} /* v685 — added position:relative + overflow:hidden so the .active::before shimmer pseudo * positions against the button (not ) and clips cleanly within rounded corners. * Also migrated font-family from hardcoded 'Manrope' to var(--font-body) per v683 token system. */ .chip-nav button:hover{color:var(--text);background:var(--bg4);border-color:var(--border);transform:translateY(-1px)} .chip-nav button.active{color:#fff;border-left-color:var(--accent);border-bottom:none;background:var(--accent);font-weight:700;border-color:var(--accent);box-shadow:0 2px 12px rgba(var(--ar),.25)} .chip-nav+.tab-panel.active,.chip-nav~.tab-panel.active{flex:1;min-width:0} .tab-layout{display:flex;align-items:stretch;background:linear-gradient(to right,var(--bg2) 0,var(--bg2) 240px,var(--bg) 240px,var(--bg) 100%);position:relative} .tab-layout::before{content:'';position:absolute;left:240px;top:0;bottom:0;width:1px;background:var(--border);pointer-events:none;z-index:1} .tab-layout .chip-nav{position:sticky;top:48px;background:transparent;border-right:none;width:240px;min-width:240px;padding:14px 20px} .tab-layout>.tab-panel{flex:1;min-width:0} .container{max-width:1120px;margin:0 auto;padding:32px 24px;overflow-x:hidden} .tab-panel{display:none;overflow-x:hidden;animation:none} .tab-panel.active{display:block;animation:tabEnter .4s cubic-bezier(.4,0,.2,1)} .section-title{font-family:'Manrope',sans-serif;font-size:1.3rem;font-weight:700;color:var(--accent);margin:32px 0 8px;letter-spacing:-.01em;position:static;display:block;padding-bottom:0} .section-title:first-child{margin-top:0} .section-sub{color:var(--text2);font-size:15.5px;margin-bottom:28px;line-height:1.8;font-weight:400} p,li,td,th,div,span,strong,em,a{overflow-wrap:break-word;word-wrap:break-word} ul,ol{padding-left:1.2em} .ma-header h4{font-size:15px;font-family:'Manrope',sans-serif;font-weight:700;color:var(--text);letter-spacing:-.01em;flex:1} .data-table{font-size:14px;table-layout:auto;width:100%;overflow-x:auto;display:table;border-collapse:separate;margin:20px 0;border-spacing:0;border-radius:10px;overflow:hidden;border:1px solid var(--border)} .data-table th{font-size:11px;background:var(--bg3);color:var(--accent);font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.7px;padding:12px 16px;text-align:left;border-bottom:2px solid var(--border);font-weight:600} .data-table td,.data-table th{overflow-wrap:break-word;word-wrap:break-word} .card-title{font-size:14px;font-family:'Manrope',sans-serif;color:var(--text);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;font-weight:700} .rc2 .rc2-q{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.6;padding-right:40px} .rc2 .rc2-a{font-size:14px;display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);color:var(--text2);line-height:1.8} li{font-size:14px;line-height:1.7} .grid2,.grid3{overflow:hidden} .grid2>*,.grid3>*{min-width:0;overflow:hidden} .card{overflow:hidden;min-width:0;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:12px;transition:all .2s} .data-table thead{display:table-header-group} .data-table tbody{display:table-row-group} .data-table tr{display:table-row} .data-table{table-layout:auto} @media(max-width:900px){.chip-nav{position:static;flex-direction:row;width:100%;min-width:0;max-width:100%;max-height:none;border-right:none;border-bottom:1px solid var(--border);padding:0 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;box-sizing:border-box}.chip-nav button{white-space:nowrap;flex-shrink:0;border-left:none;border-bottom:2px solid transparent;border-radius:0;padding:10px 12px}.chip-nav button.active{border-left-color:transparent;border-bottom-color:var(--accent)}.tab-layout{flex-direction:column}.tab-layout::before{display:none}} .card:hover{border-color:var(--mid);box-shadow:0 2px 10px rgba(0,0,0,.04)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:700px){.grid2,.grid3{grid-template-columns:1fr}} @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}} .tab-layout .grid2{grid-template-columns:1fr 1fr} @media(max-width:1100px){.tab-layout .grid2{grid-template-columns:1fr}} @media(max-width:1100px){.tab-layout .grid3{grid-template-columns:1fr 1fr}} @media(max-width:800px){.tab-layout .grid3{grid-template-columns:1fr}} .ma-item{border:1px solid var(--border);border-radius:14px;margin-bottom:16px;overflow:hidden;transition:all .3s ease;position:relative} .ma-item:hover{border-color:transparent;box-shadow:0 4px 20px rgba(var(--ar),.08)} .ma-header{background:var(--bg3);padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .25s;gap:14px} .ma-header:hover{background:var(--bg4)} .ma-tags{display:none} .ma-tag{font-size:10px;font-family:'IBM Plex Mono',monospace;padding:2px 9px;border-radius:12px;font-weight:500;background:var(--soft);color:var(--accent);border:1px solid var(--mid);transition:all .25s} .ma-tag:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(var(--ar),.1)} .ma-tag.gold{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-mid)} .ma-tag.purple{background:var(--purple-soft);color:var(--purple);border-color:var(--purple-mid)} .ma-tag.red{background:var(--red-soft);color:var(--red);border-color:var(--red-mid)} .ma-tag.green{background:var(--green-soft);color:var(--green);border-color:var(--green-mid)} .ma-tag.orange{background:var(--orange-soft);color:var(--orange);border-color:var(--orange-mid)} .ma-chevron{color:var(--text3);font-size:11px;flex-shrink:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .2s} .ma-header:hover .ma-chevron{color:var(--accent)} .ma-body{display:none;padding:22px 20px;background:var(--bg2);border-top:1px solid var(--border)} /* v761 — explicit body sizing so ma-body p + bullets match .bl-strip p (15.5px/1.7). Without this they inherit the v738 sitewide 19px and feel too large vs the surrounding callouts. */ .ma-body p,.ma-body ul:not(.cb-numlist) li{font-size:15.5px;line-height:1.7;color:var(--text)} .ma-body p{margin:0 0 10px} .ma-body p:last-child{margin-bottom:0} .ma-body ul:not(.cb-numlist){padding-left:22px;margin:8px 0 14px} .ma-body.open{display:block;animation:revealBody .4s cubic-bezier(.4,0,.2,1)} .ma-card.open > .ma-body,.ma-item.open > .ma-body{display:block;animation:revealBody .4s cubic-bezier(.4,0,.2,1)} .ma-card{border:1px solid var(--border);border-radius:14px;margin-bottom:16px;overflow:hidden;transition:all .3s ease;position:relative;background:var(--bg2)} .ma-card:hover{border-color:transparent;box-shadow:0 4px 20px rgba(var(--ar),.08)} .ma-card .ma-header{background:var(--bg3);padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .25s;gap:14px} .ma-card .ma-header:hover{background:var(--bg4)} /* v761 — title bumped 15px → 16.5px so the header is bigger than its body (was inverted: body 19px > title 15px → felt off). */ .ma-card .ma-title{font-size:16.5px;font-family:'Manrope',sans-serif;font-weight:700;color:var(--text);letter-spacing:-.01em;flex:1;line-height:1.4} .ma-card.open .ma-chevron{transform:rotate(180deg);color:var(--accent)} @keyframes revealBody{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} details.ma-card summary, details.ma-item summary, details.cb-check summary { list-style: none; outline: none; } details.ma-card summary::-webkit-details-marker, details.ma-item summary::-webkit-details-marker, details.cb-check summary::-webkit-details-marker { display: none; } details.ma-card summary::marker, details.ma-item summary::marker, details.cb-check summary::marker { content: ''; } details.ma-card summary:focus-visible, details.ma-item summary:focus-visible, details.cb-check summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .data-table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:top;transition:all .2s;line-height:1.7;font-size:14px} .data-table tr:hover td{background:var(--bg2)} .data-table td strong{color:var(--text);display:inline} .data-table .hi{color:var(--accent);font-weight:700} .data-table .bad{color:var(--red)} .data-table .ok{color:var(--green)} .data-table .warn{color:var(--gold)} .rc2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:14px 0} .rc2{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:22px;cursor:pointer;position:relative;transition:all .35s cubic-bezier(.4,0,.2,1);overflow:hidden} .rc2:hover{box-shadow:0 12px 40px rgba(var(--ar),.1);transform:translateY(-4px);border-color:var(--accent)} .rc2 .rc2-flip{position:absolute;top:14px;right:14px;font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--accent);opacity:.4;transition:all .25s;background:var(--soft);padding:2px 8px;border-radius:10px} .rc2:hover .rc2-flip{opacity:1;transform:scale(1.1)} .rc2 .rc2-a.open{display:block;animation:revealBody .35s ease} .rc2 .rc2-a strong{color:var(--accent);display:inline} .chip-label{font-family:'Manrope',sans-serif;font-size:1.15rem;font-weight:700;color:var(--gold);padding:20px 20px 3px;border-top:1px solid var(--border);margin-top:6px} .chip-label:first-child{border-top:none;margin-top:0} @media(max-width:768px){.site-nav{padding:0 10px;height:44px}.site-nav .brand-text{display:none}.hero{padding:28px 14px 20px}.hero h1{font-size:1.5rem}.container{padding:20px 14px}.chroma-line{top:44px}.ma-header{padding:10px 12px}.ma-body{padding:10px 12px}.ma-tags{display:none}} .nav-cat{position:relative;padding:0 1px;z-index:101} .nav-cat>button{background:none;border:none;color:var(--text3);font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:all .2s;letter-spacing:.01em;display:flex;align-items:center;gap:4px} .nav-cat>button:hover{color:var(--text);background:var(--bg3)} .nav-cat>button .nav-chev{font-size:7px;transition:transform .25s,opacity .2s;opacity:.4} .nav-cat:hover>button .nav-chev{transform:rotate(180deg);opacity:1} .nav-cat.has-active>button{color:var(--accent);background:var(--soft)} .nav-drop{display:none;visibility:hidden;opacity:0;pointer-events:none;position:absolute;top:100%;left:50%;min-width:220px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 12px 40px rgba(0,0,0,.12);z-index:200;margin-top:4px;backdrop-filter: var(--glass-filter-anchor);transform:translateX(-50%);padding-top:12px} .nav-cat:hover .nav-drop,.nav-cat:focus-within .nav-drop{display:block;visibility:visible;opacity:1;pointer-events:auto;animation:navDrop .2s ease} @keyframes navDrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .nav-drop a{display:block;padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--text2);font-size:13px;font-weight:500;transition:all .2s;white-space:nowrap} .nav-drop a:hover{background:var(--soft);color:var(--accent);transform:translateX(3px)} .nav-drop a.active{color:var(--accent);background:var(--soft);font-weight:700} .nav-drop-label{font-size:9.5px;font-family:'IBM Plex Mono',monospace;color:var(--accent);text-transform:uppercase;letter-spacing:1px;padding:10px 12px 3px;font-weight:600;opacity:.5} .hero::before{content:'';position:absolute;top:-50%;right:-30%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(var(--ar),.06) 0%,transparent 70%);pointer-events:none;animation:heroOrb 20s ease-in-out infinite alternate} .hero::after{content:'';position:absolute;bottom:-40%;left:-20%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(var(--ar),.04) 0%,transparent 70%);pointer-events:none;animation:heroOrb 15s ease-in-out infinite alternate-reverse} @keyframes heroOrb{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.1)}100%{transform:translate(-20px,10px) scale(.95)}} .section-title::after,.section-title::before{content:none!important;display:none!important;width:0!important;height:0!important;border:none!important;background:none!important} .ma-item::before{content:'';position:absolute;inset:-1px;border-radius:14px;background:none;opacity:0;display:none} .ma-item:hover::before{opacity:.4} .data-table tbody tr:nth-child(even) td{background:rgba(var(--ar),.02)} .data-table tbody tr:hover td{background:var(--soft);color:var(--text)} .rc2::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(var(--ar),.06) 0%,transparent 50%);opacity:0;transition:opacity .4s;pointer-events:none} .rc2:hover::before{opacity:1} @keyframes tabEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .chroma-line{display:none!important} .hero-badges .badge{opacity:0;animation:badgeIn .5s ease forwards} .hero-badges .badge:nth-child(1){animation-delay:.1s} .hero-badges .badge:nth-child(2){animation-delay:.18s} .hero-badges .badge:nth-child(3){animation-delay:.26s} .hero-badges .badge:nth-child(4){animation-delay:.34s} .hero-badges .badge:nth-child(5){animation-delay:.42s} .hero-badges .badge:nth-child(6){animation-delay:.5s} @keyframes badgeIn{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}} ::selection{background:rgba(var(--ar),.15);color:var(--text)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)} ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--text3)} @media print{.site-nav,.chroma-line,.chip-nav,.theme-toggle,.cb-fab,.cb-panel,.nav-cat{display:none!important}.hero{padding:20px 0}.ma-body{display:block!important}} @media(max-width:768px){.site-nav{padding:0 12px;height:46px;gap:2px}.site-nav .brand-text{display:none}.hero{padding:28px 16px 22px}.hero h1{font-size:1.45rem}.container{padding:22px 16px}.chroma-line{top:46px}.ma-header{padding:12px 14px}.ma-body{padding:14px}.ma-tags{display:none}.chip-nav{padding:4px 12px}.chip-nav button{font-size:12px;padding:6px 11px}.hero::before,.hero::after{display:none}.nav-cat>button{font-size:11.5px;padding:4px 7px}} .nav-cat:hover>button{color:var(--accent);background:var(--soft)} .nav-cat:hover>.nav-drop{display:block;animation:navDrop .25s ease} @keyframes navDrop{from{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} .layout-bar{max-width:1120px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:flex-end;gap:4px} .layout-bar-label{font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;margin-right:6px} .layout-btn{background:var(--bg3);border:1px solid var(--border);width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--text3);transition:all .2s} .layout-btn:hover{background:var(--bg4);color:var(--text)} .layout-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)} [data-layout="default"] .ma-item{display:block} [data-layout="default"] .ma-body{display:none} [data-layout="default"] .ma-body.open{display:block} [data-layout="cards"] .ma-item{border-radius:14px;margin-bottom:12px;perspective:800px} [data-layout="cards"] .ma-header{border-radius:14px;min-height:80px;align-items:flex-start;padding:18px 20px} [data-layout="cards"] .ma-header h4{font-size:16px} [data-layout="cards"] .ma-body{border-radius:0 0 14px 14px;animation:cardFlipIn .4s ease} @keyframes cardFlipIn{from{opacity:0;transform:rotateX(-8deg)}to{opacity:1;transform:rotateX(0)}} [data-layout="expanded"] .ma-body{display:block!important;border-top:1px solid var(--border)} [data-layout="expanded"] .ma-chevron{display:none} [data-layout="expanded"] .ma-header{cursor:default;pointer-events:none} [data-layout="expanded"] .ma-item{margin-bottom:16px} [data-layout="expanded"] .ma-item:hover::before{opacity:0} [data-layout="minimal"] .ma-item{border:none;border-radius:0;border-bottom:1px solid var(--border);margin-bottom:0} [data-layout="minimal"] .ma-item:hover::before{opacity:0} [data-layout="minimal"] .ma-item:hover{box-shadow:none} [data-layout="minimal"] .ma-header{background:none;padding:12px 4px} [data-layout="minimal"] .ma-header h4{font-size:14px} [data-layout="minimal"] .ma-body{padding:12px 4px;background:none} [data-layout="minimal"] .ma-tags{display:none} [data-layout="minimal"] [data-layout="minimal"] .data-table{font-size:12.5px} [data-layout="minimal"] .section-title{font-size:1.3rem} [data-layout="minimal"] .hero{padding:24px 24px 16px} [data-layout="minimal"] .hero p{display:none} [data-layout="minimal"] .hero-badges{display:none} @media(max-width:768px){.site-nav{overflow-x:auto!important;overflow-y:visible!important}.nav-drop{position:fixed;left:12px!important;right:12px!important;transform:none!important;top:52px!important;min-width:auto}.nav-cat:hover>.nav-drop{animation:navDropMobile .25s ease}@keyframes navDropMobile{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.layout-bar{padding:6px 16px}} .nav-cat::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px;z-index:199} .flow-step{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;margin:12px 0;position:relative} .flow-step h5{font-family:'Manrope',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px} .flow-step p{font-size:14px;color:var(--text2);line-height:1.75} .flow-step .flow-result{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;margin-top:10px} .flow-result.yes{background:var(--green-soft);color:var(--green);border:1px solid var(--green-mid)} .flow-result.no{background:var(--red-soft);color:var(--red);border:1px solid var(--red-mid)} .flow-result.warn{background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-mid)} .flow-arrow{text-align:center;font-size:20px;color:var(--text3);margin:4px 0;line-height:1} .procedure-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:12px 0} .procedure-col{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;position:relative} .procedure-col h5{font-family:'Manrope',sans-serif;font-size:16px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--accent)} .procedure-col.warn-col h5{border-bottom-color:var(--red)} .procedure-step{padding:10px 0;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start} .procedure-step:last-child{border-bottom:none} .procedure-num{width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px} .procedure-col.warn-col .procedure-num{background:var(--red-soft);color:var(--red)} .procedure-text{font-size:14px;line-height:1.7;color:var(--text)} .procedure-text strong{color:var(--text)} @media(max-width:700px){.procedure-grid{grid-template-columns:1fr}} .ppe-steps{display:flex;flex-direction:column;gap:2px} .ppe-step{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)} .ppe-step:last-child{border-bottom:none} .ppe-step-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;flex-shrink:0;margin-top:2px} .ppe-step-num.on{background:var(--green-soft,#e8f5e9);color:var(--green,#2e7d32);border:1.5px solid var(--green-mid,#a5d6a7)} .ppe-step-num.off{background:var(--red-soft,#ffebee);color:var(--red,#c62828);border:1.5px solid var(--red-mid,#ef9a9a)} .ppe-step-content h5{font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;margin:0 0 4px 0} .ppe-step-content p{font-size:13.5px;color:var(--text2);line-height:1.7;margin:0} .stage-list{display:flex;flex-direction:column;gap:8px;margin:8px 0} .stage-item{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:all .2s;display:flex;gap:14px;align-items:flex-start} .stage-item:hover{border-color:var(--mid);box-shadow:0 2px 8px rgba(0,0,0,.04)} .stage-item .stage-label{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px} .stage-item .stage-label.s1{color:var(--gold)} .stage-item .stage-label.s2{color:var(--orange)} .stage-item .stage-label.s3{color:var(--red)} .stage-item .stage-label.s4{color:var(--red)} .stage-item .stage-label.su{color:var(--purple)} .stage-item .stage-label.dti{color:var(--purple)} .stage-item .stage-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px} .stage-item .stage-depth{font-size:12px;font-family:'IBM Plex Mono',monospace;color:var(--text3);margin-bottom:6px} .stage-item .stage-desc{font-size:14px;color:var(--text2);line-height:1.7} .stage-label{width:fit-content;min-width:90px;padding:4px 12px;border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;text-align:center;flex-shrink:0;white-space:nowrap;margin-top:2px} .stage-label.s1{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7} .stage-label.s2{background:#fff8e1;color:#f57f17;border:1px solid #ffe082} .stage-label.s3{background:#fff3e0;color:#e65100;border:1px solid #ffcc80} .stage-label.s4{background:#ffebee;color:#c62828;border:1px solid #ef9a9a} .stage-label.unstage{background:#f3e5f5;color:#6a1b9a;border:1px solid #ce93d8} .stage-label.dti{background:#ede7f6;color:#4527a0;border:1px solid #b39ddb} .stage-content{flex:1} .stage-content strong{font-weight:700;color:var(--text);display:block;font-size:14px;margin-bottom:2px} .stage-content .stage-layers{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--accent);margin-bottom:4px;display:block} .stage-content p{font-size:13.5px;color:var(--text2);line-height:1.7;margin:0} .stage-grid{display:flex;flex-direction:column;gap:10px;margin:12px 0} .stage-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:12px;background:var(--bg2);border:1px solid var(--border);transition:all .2s} .stage-card:hover{border-color:var(--mid);box-shadow:0 2px 10px rgba(0,0,0,.05)} .stage-card .stage-label{min-width:100px;padding:5px 12px;border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;text-align:center;flex-shrink:0;white-space:nowrap;margin-top:2px} .stage-card.s1 .stage-label{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7} .stage-card.s2 .stage-label{background:#fff8e1;color:#f57f17;border:1px solid #ffe082} .stage-card.s3 .stage-label{background:#fff3e0;color:#e65100;border:1px solid #ffcc80} .stage-card.s4 .stage-label{background:#ffebee;color:#c62828;border:1px solid #ef9a9a} .stage-card.su .stage-label{background:#f3e5f5;color:#6a1b9a;border:1px solid #ce93d8} .stage-card.dt .stage-label{background:#ede7f6;color:#4527a0;border:1px solid #b39ddb} .stage-card .stage-title{font-family:'Manrope',sans-serif;font-size:14.5px;font-weight:700;color:var(--text);margin:0 0 2px} .stage-card .stage-depth{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--accent);margin-bottom:4px} .stage-card .stage-desc{font-size:13.5px;color:var(--text2);line-height:1.75;margin:0} .divider{height:1px;background:var(--border);margin:28px 0} .ppe-step-content p strong{color:var(--text)} .wound-compare{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:12px 0} .wound-col{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px;position:relative} .wound-col-title{font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--accent)} .wound-col-title.arterial{border-bottom-color:var(--red)} .wound-col-title.venous{border-bottom-color:var(--gold)} .wound-col-title.neuropathic{border-bottom-color:var(--accent)} .wound-col ul{list-style:none;padding:0;margin:0} .wound-col li{font-size:13px;line-height:1.7;color:var(--text2);padding:4px 0;border-bottom:1px solid var(--border)} .wound-col li:last-child{border-bottom:none} .wound-col li strong{color:var(--text);font-size:12px} @media(max-width:768px){.wound-compare{grid-template-columns:1fr}} .quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:12px 0} .quad-cell{padding:16px 18px;background:var(--bg2);border:1px solid var(--border);position:relative} .quad-cell h4{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px} .quad-cell h4::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0} .quad-cell.ruq h4::before{background:var(--accent)} .quad-cell.luq h4::before{background:var(--gold)} .quad-cell.rlq h4::before{background:var(--purple)} .quad-cell.llq h4::before{background:var(--red)} .quad-cell ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 8px} .quad-cell li{font-size:12.5px;color:var(--text2);line-height:1.5;padding:2px 8px;background:var(--bg3);border-radius:4px;white-space:nowrap} @media(max-width:600px){.quad-grid{grid-template-columns:1fr}} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:700px){.two-col{grid-template-columns:1fr}} .tab-layout .two-col{grid-template-columns:1fr 1fr} @media(max-width:1100px){.tab-layout .two-col{grid-template-columns:1fr}} /* === bl-strip: soft card with accent border. Hover lifts subtly. === */ .bl-strip{position:relative;border-left:3px solid var(--border2);background:linear-gradient(90deg,var(--bg3) 0%,transparent 60%);padding:14px 18px 14px 18px;margin:22px 0;border-radius:0 10px 10px 0;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .3s} .bl-strip:hover{transform:translateX(2px);box-shadow:2px 4px 16px rgba(0,0,0,.04)} .bl-strip .bl-label{font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px;font-weight:700;display:inline-flex;align-items:center;gap:6px} .bl-strip .bl-label::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7} .bl-strip p{font-size:15.5px;color:var(--text2);line-height:1.75;margin:0} .bl-strip.gold{border-left-color:var(--gold);background:linear-gradient(90deg,var(--gold-soft) 0%,transparent 70%)} .bl-strip.gold .bl-label{color:var(--gold)} .bl-strip.purple{border-left-color:var(--purple);background:linear-gradient(90deg,var(--purple-soft) 0%,transparent 70%)} .bl-strip.purple .bl-label{color:var(--purple)} .bl-strip.red{border-left-color:var(--red);background:linear-gradient(90deg,var(--red-soft) 0%,transparent 70%)} .bl-strip.red .bl-label{color:var(--red)} .bl-strip.green{border-left-color:var(--green);background:linear-gradient(90deg,var(--green-soft) 0%,transparent 70%)} .bl-strip.green .bl-label{color:var(--green)} .bl-strip.orange{border-left-color:var(--orange);background:linear-gradient(90deg,var(--orange-soft) 0%,transparent 70%)} .bl-strip.orange .bl-label{color:var(--orange)} /* Content area padding inside tab layout */ .tab-layout .container{padding:32px 40px;max-width:none} /* === Pill badges (stat-pill for Sn/Sp; wb-pill for weight-bearing status) === */ .stat-pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;padding:2px 9px;border-radius:12px;letter-spacing:.3px;line-height:1.5;border:1px solid transparent;white-space:nowrap} .stat-pill.stat-sen{background:var(--green-soft);color:var(--green);border-color:var(--green-mid)} .stat-pill.stat-spec{background:var(--purple-soft);color:var(--purple);border-color:var(--purple-mid)} .data-table td .stat-pill{margin:1px 0} .wb-pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;letter-spacing:.4px;text-transform:uppercase;line-height:1.5;border:1px solid transparent;white-space:nowrap} .wb-pill.wb-nwb{background:var(--red-soft);color:var(--red);border-color:var(--red-mid)} .wb-pill.wb-ttwb{background:var(--red-soft);color:var(--red);border-color:var(--red-mid)} .wb-pill.wb-pwb{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-mid)} .wb-pill.wb-wbat{background:var(--green-soft);color:var(--green);border-color:var(--green-mid)} .wb-pill.wb-fwb{background:var(--green-soft);color:var(--green);border-color:var(--green-mid)} /* === Healing timeline table (Gantt-style bars in table cells) === */ .healing-table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0;font-size:13px;border:1px solid var(--border);border-radius:10px;overflow:hidden} .healing-table th{background:var(--bg3);color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.7px;padding:10px 8px;text-align:center;border-bottom:2px solid var(--border);font-weight:600;white-space:nowrap} .healing-table th:first-child{text-align:left;padding-left:14px} .healing-table td{padding:8px;border-bottom:1px solid var(--border);vertical-align:middle;line-height:1.6;font-size:13px;color:var(--text2);text-align:center;min-width:44px} .healing-table td:first-child{text-align:left;padding-left:14px;color:var(--text);font-weight:500;min-width:140px} .healing-table tr:last-child td{border-bottom:none} .healing-table tr:hover td{background:var(--bg2)} .healing-table td[colspan] span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text3);font-weight:600;display:block;padding:6px 0 2px;text-align:left;border-top:1px solid var(--border)} .healing-table tr:first-child td[colspan] span{border-top:none;padding-top:0} .bar{height:14px;border-radius:7px;width:100%;min-width:24px;background:var(--bg4);transition:transform .2s,box-shadow .2s} .bar:hover{transform:scaleY(1.2);box-shadow:0 2px 8px rgba(var(--ar),.15)} .bar-teal{background:linear-gradient(90deg,rgba(var(--ar),.5),rgba(var(--ar),.85));border:1px solid rgba(var(--ar),.3)} .bar-gold{background:linear-gradient(90deg,rgba(var(--gr),.5),rgba(var(--gr),.85));border:1px solid rgba(var(--gr),.3)} .bar-red{background:linear-gradient(90deg,rgba(var(--rr),.5),rgba(var(--rr),.85));border:1px solid rgba(var(--rr),.3)} .bar-purple{background:linear-gradient(90deg,rgba(var(--pr),.5),rgba(var(--pr),.85));border:1px solid rgba(var(--pr),.3)} @media(max-width:768px){ .healing-table{font-size:11px} .healing-table th{font-size:9px;padding:6px 4px} .healing-table td{padding:6px 4px;font-size:11px} .healing-table td:first-child{min-width:100px} .bar{height:10px} } /* === Pathway step indicators (Neuroanatomy circuit/pathway diagrams) === */ .pathway-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;margin-right:8px;border:1px solid var(--mid);vertical-align:middle} .pathway-arrow{display:inline-block;font-size:16px;color:var(--text3);margin-right:8px;vertical-align:middle;font-weight:700} /* === Phase labels (TherEx healing-phase bl-strips) === */ .phase-num{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:6px;background:var(--soft);color:var(--accent);letter-spacing:.5px;text-transform:uppercase;margin-right:10px;border:1px solid var(--mid)} .phase-title{font-family:'Manrope',sans-serif;font-size:14.5px;font-weight:700;color:var(--text);margin-right:10px} .phase-timeline{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text3);font-weight:600;letter-spacing:.3px} /* === Quiz modal === */ .quiz-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter: var(--glass-filter-ambient);-webkit-backdrop-filter: var(--glass-filter-ambient);z-index:9999;display:none} .quiz-backdrop.open{display:flex;align-items:flex-start;justify-content:center;padding:48px 24px 24px;overflow-y:auto} .quiz-modal{background:var(--bg);border:1px solid var(--border);border-radius:18px;width:100%;max-width:680px;box-shadow:0 24px 64px rgba(0,0,0,.5);opacity:1;position:relative;z-index:10000;margin:0 auto} .quiz-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1} .quiz-header-title{font-family:'Manrope',sans-serif;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em} .quiz-header-sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;margin-top:2px} .quiz-close{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s} .quiz-close:hover{background:var(--bg3);color:var(--text)} .quiz-body{padding:24px} .quiz-progress{display:flex;gap:4px;margin-bottom:24px} .quiz-progress-dot{flex:1;height:4px;border-radius:2px;background:var(--border);transition:background .25s} .quiz-progress-dot.done{background:var(--accent)} .quiz-progress-dot.wrong{background:var(--red)} .quiz-progress-dot.current{background:var(--accent2)} .quiz-question{font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;color:var(--text);line-height:1.55;margin-bottom:20px} .quiz-choices{display:flex;flex-direction:column;gap:10px} .quiz-choice{background:var(--bg2);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .2s;font-family:'Manrope',sans-serif;font-size:14.5px;color:var(--text);line-height:1.5;text-align:left;display:flex;gap:12px;align-items:flex-start} .quiz-choice:hover{border-color:var(--accent);background:var(--soft);transform:translateY(-1px)} .quiz-choice.selected{border-color:var(--accent);background:var(--soft)} .quiz-choice.correct{border-color:var(--green);background:var(--green-soft);color:var(--text)} .quiz-choice.wrong{border-color:var(--red);background:var(--red-soft);color:var(--text)} .quiz-choice.disabled{cursor:default;pointer-events:none;opacity:.65} .quiz-choice.disabled.correct,.quiz-choice.disabled.wrong,.quiz-choice.disabled.selected{opacity:1} .quiz-choice-letter{width:28px;height:28px;border-radius:50%;background:var(--bg3);color:var(--text3);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .quiz-choice.correct .quiz-choice-letter{background:var(--green);color:#fff} .quiz-choice.wrong .quiz-choice-letter{background:var(--red);color:#fff} .quiz-choice.selected .quiz-choice-letter{background:var(--accent);color:#fff} .quiz-explanation{margin-top:18px;padding:14px 16px;background:var(--bg2);border-left:3px solid var(--accent);border-radius:6px;font-size:14px;color:var(--text2);line-height:1.7;display:none} .quiz-explanation.show{display:block;animation:quizFadeIn .3s ease} .quiz-explanation strong{color:var(--text)} .quiz-explanation-label{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:700;display:block;margin-bottom:6px} .quiz-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-top:1px solid var(--border);gap:12px;position:sticky;bottom:0;background:var(--bg)} .quiz-btn{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:600;padding:10px 20px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer;transition:all .2s} .quiz-btn:hover{background:var(--bg3);border-color:var(--border2)} .quiz-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)} .quiz-btn.primary:hover{background:var(--accent2);border-color:var(--accent2);box-shadow:0 4px 16px rgba(var(--ar),.3)} .quiz-btn:disabled{opacity:.4;cursor:not-allowed} .quiz-btn:disabled:hover{background:var(--bg2);border-color:var(--border)} .quiz-result{text-align:center;padding:20px 0} .quiz-score-ring{width:120px;height:120px;margin:0 auto 20px;position:relative;display:flex;align-items:center;justify-content:center} .quiz-score-ring svg{transform:rotate(-90deg);width:120px;height:120px} .quiz-score-ring circle{fill:none;stroke-width:8;stroke-linecap:round} .quiz-score-ring .ring-bg{stroke:var(--border)} .quiz-score-ring .ring-fg{stroke:var(--accent);transition:stroke-dasharray .6s cubic-bezier(.4,0,.2,1)} .quiz-score-num{position:absolute;font-family:'Manrope',sans-serif;font-size:28px;font-weight:800;color:var(--text)} .quiz-score-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;margin-top:4px} .quiz-result h3{font-family:'Manrope',sans-serif;font-size:20px;font-weight:700;color:var(--text);margin:12px 0 6px;letter-spacing:-.01em} .quiz-result p{font-size:14px;color:var(--text2);max-width:440px;margin:0 auto 24px;line-height:1.6} .quiz-missed{text-align:left;margin-top:16px;padding:16px;background:var(--bg2);border-radius:10px;border:1px solid var(--border)} .quiz-missed-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--red);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:10px} .quiz-missed-item{font-size:13.5px;color:var(--text2);padding:8px 0;border-bottom:1px solid var(--border);line-height:1.6} .quiz-missed-item:last-child{border-bottom:none} .quiz-missed-item strong{color:var(--text);display:block;margin-bottom:3px;font-size:13px} .quiz-no-questions{text-align:center;padding:40px 20px;color:var(--text2)} .quiz-no-questions p{font-size:14px;line-height:1.7;margin-bottom:8px} .quiz-no-questions .label{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:12px} /* Quiz chip button in chip-nav */ .chip-nav button.quiz-chip{background:linear-gradient(135deg,rgba(var(--ar),.15),rgba(var(--pr),.15));color:var(--accent);border:1px solid rgba(var(--ar),.3)} .chip-nav button.quiz-chip:hover{background:linear-gradient(135deg,rgba(var(--ar),.25),rgba(var(--pr),.25));color:var(--accent);border-color:var(--accent);box-shadow:0 2px 10px rgba(var(--ar),.2)} .chip-nav button.quiz-chip::before{content:'◆ ';font-size:9px;opacity:.7} @media(max-width:640px){ .quiz-modal{max-width:100%;border-radius:14px} .quiz-body{padding:18px} .quiz-header{padding:14px 18px} .quiz-footer{padding:14px 18px} .quiz-question{font-size:15px} .quiz-choice{font-size:14px;padding:12px 14px} .quiz-backdrop.open{padding:12px} } /* === Study path: Progress indicators on chip-nav === */ .cb-progress-dot{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;vertical-align:middle;font-size:10px;font-weight:700;line-height:10px;text-align:center;flex-shrink:0} .cb-progress-dot.unvisited{background:transparent;border:1.5px solid var(--border2);opacity:.6} .cb-progress-dot.visited{background:var(--accent);opacity:.55;border:1.5px solid var(--accent)} .cb-progress-dot.completed{background:var(--green,#16a34a);color:#fff;border:1.5px solid var(--green,#16a34a);width:12px;height:12px;line-height:12px;font-size:9px} .chip-nav button.active .cb-progress-dot.visited{background:#fff;opacity:.9;border-color:#fff} .chip-nav button.active .cb-progress-dot.completed{background:#fff;color:var(--accent);border-color:#fff} .chip-nav button.active .cb-progress-dot.unvisited{border-color:rgba(255,255,255,.5)} /* === Next / Prev navigation at bottom of each tab === */ .cb-next-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:48px 0 24px;padding-top:24px;border-top:1px solid var(--border)} .cb-nav-btn{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px 18px;cursor:pointer;text-align:left;color:var(--text);font-family:'Manrope',sans-serif;font-size:14px;transition:all .2s;display:flex;flex-direction:column;gap:2px;text-decoration:none} .cb-nav-btn:hover{border-color:var(--accent);background:var(--soft);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--ar),.08)} .cb-nav-prev{text-align:left} .cb-nav-next{text-align:right;align-items:flex-end} .cb-nav-label-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-weight:600} .cb-nav-label-main{font-size:14px;font-weight:600;color:var(--text)} .cb-nav-next .cb-nav-label-main{color:var(--accent)} .cb-nav-next.cb-nav-quiz{background:linear-gradient(135deg,rgba(var(--ar),.12),rgba(var(--pr),.12));border-color:rgba(var(--ar),.3)} .cb-nav-next.cb-nav-quiz:hover{background:linear-gradient(135deg,rgba(var(--ar),.22),rgba(var(--pr),.22));border-color:var(--accent)} .cb-nav-next.cb-nav-quiz .cb-nav-label-main{color:var(--accent);font-weight:700} .cb-nav-next.cb-nav-done{background:var(--green-soft,rgba(22,163,74,.08));border-color:var(--green-mid,rgba(22,163,74,.25))} .cb-nav-next.cb-nav-done .cb-nav-label-main{color:var(--green,#16a34a);font-weight:700} @media(max-width:640px){ .cb-next-nav{grid-template-columns:1fr;gap:10px} .cb-nav-btn{padding:12px 14px} } /* === First-visit intro modal === */ .cb-intro-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter: var(--glass-filter-ambient);-webkit-backdrop-filter: var(--glass-filter-ambient);z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s ease;pointer-events:none} .cb-intro-backdrop.open{opacity:1;pointer-events:auto} .cb-intro-modal{background:var(--bg);border:1px solid var(--border);border-radius:18px;max-width:480px;width:100%;box-shadow:0 20px 48px rgba(0,0,0,.4);transform:translateY(20px) scale(.96);transition:transform .3s cubic-bezier(.34,1.56,.64,1);position:relative;z-index:9999} .cb-intro-backdrop.open .cb-intro-modal{transform:translateY(0) scale(1)} .cb-intro-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 14px;border-bottom:1px solid var(--border)} .cb-intro-title{font-family:'Manrope',sans-serif;font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.01em} .cb-intro-close{background:none;border:none;color:var(--text3);font-size:22px;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s} .cb-intro-close:hover{background:var(--bg3);color:var(--text)} .cb-intro-body{padding:20px 24px} .cb-intro-lead{font-size:14.5px;color:var(--text2);line-height:1.6;margin-bottom:18px} .cb-intro-path{background:var(--bg2);border-radius:10px;padding:14px 18px;margin-bottom:16px} .cb-intro-path-label{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:700;margin-bottom:8px} .cb-intro-path-list{list-style:none;padding:0;margin:0;counter-reset:step} .cb-intro-path-list li{font-size:13.5px;color:var(--text);padding:5px 0;counter-increment:step;display:flex;gap:10px;align-items:baseline;line-height:1.5} .cb-intro-path-list li::before{content:counter(step);font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;color:var(--text3);flex-shrink:0;min-width:14px} .cb-intro-path-list li.cb-intro-more::before{content:'…';color:var(--text3)} .cb-intro-path-list li.cb-intro-more{color:var(--text3);font-style:italic} .cb-intro-footnote{font-size:12.5px;color:var(--text3);line-height:1.6;margin-top:4px} .cb-demo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin:0 2px;font-size:8px;font-weight:700;line-height:9px;text-align:center} .cb-demo-dot.visited{background:var(--accent);opacity:.55} .cb-demo-dot.completed{background:var(--green,#16a34a);color:#fff;width:11px;height:11px;line-height:11px} .cb-intro-footer{display:flex;gap:10px;padding:14px 24px 20px;border-top:1px solid var(--border);justify-content:flex-end} .cb-intro-btn{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer;transition:all .2s} .cb-intro-btn:hover{background:var(--bg3)} .cb-intro-btn.cb-intro-primary{background:var(--accent);color:#fff;border-color:var(--accent)} .cb-intro-btn.cb-intro-primary:hover{background:var(--accent2);box-shadow:0 4px 14px rgba(var(--ar),.3)} /* ===== MOBILE RESPONSIVE FIXES (v19) ===== */ /* Consolidated mobile improvements: larger tap targets, hide overflowing elements, scrollable chip nav */ @media(max-width:768px){ /* Hide the nav-bar search button on mobile (it's placed inside backdrop-filter parent, which breaks fixed positioning). search.js creates a separate fixed FAB for mobile with id #cb-search-fab */ .cb-nav-search-btn,.cb-nav-flashcards-btn{display:none} /* The mobile FAB - injected by search.js, positioned outside the nav */ #cb-search-fab{ display:flex; position:fixed; bottom:20px; left:calc(50% - 60px); transform:translateX(-50%); z-index:999; padding:11px 16px; background:var(--accent); color:#fff; border:none; border-radius:999px; font-size:13px; font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.28); cursor:pointer; align-items:center; gap:6px; font-family:'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.02em; } #cb-search-fab:active{transform:translateX(-50%) scale(0.95)} #cb-fc-fab{ display:flex; position:fixed; bottom:20px; left:calc(50% + 60px); transform:translateX(-50%); z-index:999; background:#fff; color:var(--accent); border:2px solid var(--accent); border-radius:999px; font-size:18px; box-shadow:0 6px 20px rgba(0,0,0,.22); cursor:pointer; width:46px; height:46px; align-items:center; justify-content:center; padding:0; } #cb-fc-fab:active{transform:translateX(-50%) scale(0.95)} /* v469: theme dropdown — bigger trigger + bigger popover menu items on mobile */ .theme-toggle.theme-dd .theme-dd-trigger{min-width:42px;height:36px;font-size:15px} .theme-dd-popover{min-width:180px} .theme-dd-popover .theme-btn{padding:12px 14px;font-size:14px;min-height:46px} .theme-dd-popover .theme-btn .theme-dd-ico{font-size:16px;width:20px} /* Nav category buttons: bigger tap target */ .site-nav .nav-cat>button{min-height:36px;padding:6px 9px;font-size:12px} /* Chip-nav buttons: bigger tap targets */ .chip-nav button{min-height:38px;font-size:13px;padding:8px 13px} /* Chip-nav: strong horizontal scroll with scroll-snap for tab-like feel */ .chip-nav{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .chip-nav::-webkit-scrollbar{display:none} .chip-nav button{scroll-snap-align:start;flex-shrink:0} /* Tables: force horizontal scroll in a wrapper rather than break layout */ .container table.data-table{display:block;overflow-x:auto;white-space:nowrap;max-width:100%;-webkit-overflow-scrolling:touch} .container table.data-table td,.container table.data-table th{white-space:normal;min-width:120px} /* Bigger bottom spacing so content isn't hidden under any fixed UI */ .container{padding-bottom:40px} /* Hero cleanup: tighter */ .hero-tag{font-size:10.5px;margin-bottom:6px} /* Make text minimum 14px in content areas (currently 12px in some spots) */ .container p,.container li,.container td{font-size:14px;line-height:1.5} .container .section-sub{font-size:13.5px} } @media(max-width:420px){ /* iPhone SE class devices */ .site-nav{height:44px} .chroma-line{top:44px} /* Hide Career Guide text, keep only relevant nav */ .site-nav .nav-cat>button{font-size:11.5px;padding:5px 7px} /* Hero headline fits on one line for most titles */ .hero h1{font-size:1.35rem;line-height:1.15} /* FAB/trophy notifications: ensure they don't cover nav */ .cb-fab{bottom:16px;right:16px} } /* Better touch-feedback for buttons on mobile */ @media(hover:none){ button:active,.chip-nav button:active,.nav-cat>button:active{transform:scale(0.97);transition:transform .08s} } /* ===== AESTHETIC POLISH (v21) ===== */ /* Smooth scroll for anchor/tab navigation */ html{scroll-behavior:smooth} /* Better focus ring for keyboard users — accessible without being ugly */ *:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;transition:outline-offset .15s} button:focus-visible,a:focus-visible{outline-offset:3px} /* Body gets very subtle radial accents in corners, scoped so hero text stays crisp */ body{position:relative} body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 10% 100%,rgba(var(--ar),.04) 0%,transparent 40%),radial-gradient(circle at 90% 0%,rgba(var(--pr),.03) 0%,transparent 35%)} [data-theme="dark"] body::after{background:radial-gradient(circle at 10% 100%,rgba(var(--ar),.02) 0%,transparent 40%),radial-gradient(circle at 90% 0%,rgba(var(--pr),.015) 0%,transparent 35%)} /* Hero: add a soft gradient accent and subtle floating orb */ .hero{position:relative} .hero::before{content:'';position:absolute;top:-50px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(var(--ar),.07) 0%,transparent 60%);pointer-events:none;z-index:0;animation:heroFloat 12s ease-in-out infinite} .hero::after{content:'';position:absolute;bottom:-80px;left:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(var(--pr),.05) 0%,transparent 60%);pointer-events:none;z-index:0;animation:heroFloat 15s ease-in-out infinite reverse} [data-theme="dark"] .hero::before{background:radial-gradient(circle,rgba(var(--ar),.03) 0%,transparent 60%)} [data-theme="dark"] .hero::after{background:radial-gradient(circle,rgba(var(--pr),.025) 0%,transparent 60%)} .hero > *{position:relative;z-index:1} @keyframes heroFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,10px) scale(1.05)}} /* Section titles: subtle underline accent */ .section-title{position:relative;padding-bottom:4px} .section-title::after{content:'';position:absolute;left:0;bottom:0;width:40px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);border-radius:2px;opacity:.5;transition:width .3s,opacity .3s} .section-title:hover::after{width:80px;opacity:.8} /* Data tables: softer borders, row hover, better header */ .data-table{background:var(--bg2);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04),0 1px 1px rgba(0,0,0,.03)} .data-table tbody tr{transition:background .15s} .data-table tbody tr:hover{background:var(--soft)} .data-table thead th{position:relative} .data-table thead th::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent)} /* Trophy toast: glass morphism to match modern aesthetic */ .cb-trophy-toast,.cb-achievement{background:var(--bg-glass)!important;backdrop-filter: var(--glass-filter-standard);-webkit-backdrop-filter: var(--glass-filter-standard);border:1px solid var(--border)!important;box-shadow:0 10px 40px rgba(0,0,0,.12),0 0 0 1px rgba(255,255,255,.1) inset!important;border-radius:14px!important} /* Chip-nav buttons: smoother active state with subtle glow */ .chip-nav button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative} .chip-nav button.active{box-shadow:0 0 0 1px var(--accent) inset,0 2px 12px rgba(var(--ar),.15)} .chip-nav button:not(.active):hover{transform:translateX(2px)} /* Buttons in footer/nav: subtle press feedback */ button:not(:disabled):active{transform:translateY(1px)} /* MA (accordion) items: softer container */ .ma-item{border-radius:12px;overflow:hidden;transition:box-shadow .25s;border:1px solid var(--border)} .ma-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.05)} .ma-header{transition:background .2s} .ma-header:hover{background:var(--soft)} /* Strong text gets slight warmth in content */ .bl-strip strong,.container p strong{color:var(--text);font-weight:600} /* Link hover: subtle underline animation */ .container a{position:relative;text-decoration:none;color:var(--accent);transition:color .15s} .container a:hover{color:var(--accent2)} /* Code-like terms: subtle styling */ .container code{background:var(--bg3);padding:1px 6px;border-radius:4px;font-size:.9em;border:1px solid var(--border)} /* Improved scrollbar — subtle, theme-aware */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px;border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:var(--text3)} /* Smooth fade-in for tab panels when switching */ .tab-panel.active{animation:tabFadeIn .35s cubic-bezier(.4,0,.2,1)} @keyframes tabFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* First-paint stability: prevent flash */ body{opacity:0;animation:pageFadeIn .4s ease forwards} @keyframes pageFadeIn{to{opacity:1}} /* Disable decorative animations if user prefers reduced motion */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .hero::before,.hero::after{animation:none} } /* ===== AESTHETIC POLISH PASS (v20 → v21) ===== */ /* Goal: elevated cards, subtle motion, crisper hierarchy, hover-reveal depth. All using existing CSS tokens so all 4 themes (light/dark/pink/cat) work. */ /* BL-STRIP: upgrade from border-left strip to soft-background card. Provides clearer visual grouping without heavy chrome. */ .bl-strip{ background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 85%); border-left:3px solid var(--border2); border-top:1px solid transparent; border-right:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:4px 12px 12px 4px; padding:16px 20px 16px 22px; box-shadow:0 1px 2px rgba(0,0,0,.03); } .bl-strip:hover{ transform:translateX(3px); box-shadow:0 6px 20px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04); border-left-width:4px; } /* Colored variants get tinted backgrounds */ .bl-strip.gold{background:linear-gradient(135deg,var(--gold-mid) 0%,var(--gold-soft) 100%)} .bl-strip.purple{background:linear-gradient(135deg,var(--purple-mid) 0%,var(--purple-soft) 100%)} .bl-strip.red{background:linear-gradient(135deg,var(--red-mid) 0%,var(--red-soft) 100%)} .bl-strip.green{background:linear-gradient(135deg,var(--green-mid) 0%,var(--green-soft) 100%)} .bl-strip.orange{background:linear-gradient(135deg,var(--orange-mid) 0%,var(--orange-soft) 100%)} /* On hover, amplify the tint */ .bl-strip.gold:hover{background:linear-gradient(135deg,var(--gold-mid) 0%,var(--gold-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--gr),.12)} .bl-strip.purple:hover{background:linear-gradient(135deg,var(--purple-mid) 0%,var(--purple-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--pr),.12)} .bl-strip.red:hover{background:linear-gradient(135deg,var(--red-mid) 0%,var(--red-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--rr),.12)} .bl-strip.green:hover{background:linear-gradient(135deg,var(--green-mid) 0%,var(--green-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--nr),.12)} .bl-strip.orange:hover{background:linear-gradient(135deg,var(--orange-mid) 0%,var(--orange-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--or),.12)} /* BL-LABEL: more confident typography, better separation from body */ .bl-strip .bl-label{ font-size:10.5px; letter-spacing:1.4px; font-weight:700; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid rgba(0,0,0,.04); display:inline-flex; align-items:center; gap:7px; } [data-theme="dark"] .bl-strip .bl-label{border-bottom-color:rgba(255,255,255,.06)} .bl-strip .bl-label::before{ width:5px; height:5px; opacity:.9; box-shadow:0 0 6px currentColor; } /* SECTION TITLE: gradient accent underline */ .section-title{ position:relative; display:block; padding-bottom:8px; margin-bottom:14px; } .section-title::after{ content:''; position:absolute; left:0; bottom:0; width:48px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .35s cubic-bezier(.34,1.56,.64,1); } .section-title:hover::after{width:72px} /* HERO: subtle decorative orb on the right side using chroma tokens */ .hero{ position:relative; } .hero::after{ content:''; position:absolute; top:50%; right:-60px; transform:translateY(-50%); width:340px; height:340px; border-radius:50%; background:radial-gradient(circle at 30% 40%,var(--chroma-1) 0%,transparent 55%),radial-gradient(circle at 70% 60%,var(--chroma-2) 0%,transparent 50%),radial-gradient(circle at 50% 80%,var(--chroma-3) 0%,transparent 45%); opacity:.08; filter:blur(40px); pointer-events:none; animation:heroOrb 16s ease-in-out infinite alternate; } @keyframes heroOrb{ 0%{transform:translateY(-50%) scale(1) rotate(0deg);opacity:.08} 50%{opacity:.12} 100%{transform:translateY(-50%) scale(1.08) rotate(8deg);opacity:.08} } /* Hide hero orb on small screens — avoid distraction */ @media(max-width:900px){.hero::after{display:none}} /* DATA TABLE: subtle row hover + stronger header presence */ .data-table{ border-radius:10px; overflow:hidden; border:1px solid var(--border); box-shadow:0 1px 3px rgba(0,0,0,.03); } .data-table thead th{ background:linear-gradient(to bottom,var(--bg3) 0%,var(--bg2) 100%); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text2); font-weight:700; border-bottom:2px solid var(--border2); padding:12px 16px; } .data-table tbody tr{transition:background .15s} .data-table tbody tr:hover{background:var(--soft)} .data-table tbody tr:hover td{color:var(--text)} /* CHIP-NAV: better inactive state, softer transitions, glow on active */ .chip-nav button{ transition:all .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s; position:relative; overflow:hidden; } .chip-nav button:not(.active):hover{ background:var(--soft); color:var(--text); transform:translateX(2px); } .chip-nav button.active{ box-shadow:0 0 0 1px var(--accent),0 4px 14px rgba(var(--ar),.18); } /* Shimmer effect on active button */ .chip-nav button.active::before{ content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%); animation:shimmer 2.5s ease-in-out infinite; } @keyframes shimmer{ 0%{left:-100%} 60%{left:200%} 100%{left:200%} } /* MA-ITEM (collapsible accordion): cleaner card treatment */ .ma-item{ border-radius:10px; border:1px solid var(--border); background:var(--bg2); margin-bottom:10px; overflow:hidden; transition:border-color .2s,box-shadow .2s; } .ma-item:hover{ border-color:var(--border2); box-shadow:0 2px 12px rgba(0,0,0,.04); } .ma-header{ cursor:pointer; user-select:none; transition:background .15s; } .ma-header:hover{background:var(--soft)} /* TROPHY TOAST: upgrade to glass effect matching the search modal */ .cb-trophy-toast,.cb-toast{ background:var(--bg-glass)!important; backdrop-filter: var(--glass-filter-anchor); -webkit-backdrop-filter: var(--glass-filter-anchor); border:1px solid var(--border)!important; box-shadow:0 12px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)!important; border-radius:14px!important; } /* SEARCH/FC MODAL: subtle gradient on modal backgrounds for depth */ #cb-search-modal,#cb-fc-modal{ background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)!important; } /* FADE-IN on page load */ .hero,.container{animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both} @keyframes fadeUp{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } /* Stagger container slightly after hero */ .container{animation-delay:.08s} /* Respect prefers-reduced-motion */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; animation-iteration-count:1!important; } } /* NAV: subtle gradient border-bottom instead of flat line */ .site-nav{ border-bottom:1px solid transparent; background-image:linear-gradient(var(--bg-nav),var(--bg-nav)),linear-gradient(90deg,transparent 0%,var(--border2) 30%,var(--border2) 70%,transparent 100%); background-origin:border-box; background-clip:padding-box,border-box; } /* NAV BUTTONS: subtle bg on hover */ .cb-nav-search-btn,.cb-nav-flashcards-btn{ background:transparent; border-color:transparent; } .cb-nav-search-btn:hover,.cb-nav-flashcards-btn:hover{ background:var(--soft); border-color:var(--border2); } /* PRACTICE QUIZ BUTTON (in sidebar): make it stand out as CTA */ .chip-nav button.practice-btn,.chip-nav button[onclick*="quiz"]{ margin-top:12px; border:1px dashed var(--accent); color:var(--accent); font-weight:700; background:var(--soft); } .chip-nav button.practice-btn:hover,.chip-nav button[onclick*="quiz"]:hover{ background:var(--accent); color:#fff; border-style:solid; transform:none; box-shadow:0 4px 14px rgba(var(--ar),.24); } /* ===== HERO STATS WIDGET (v21) ===== */ .cb-hero-stats{ position:absolute; right:40px; bottom:32px; display:flex; gap:28px; align-items:flex-end; z-index:2; } .cb-hs-item{ text-align:right; opacity:.85; transition:opacity .2s,transform .2s; } .cb-hs-item:hover{ opacity:1; transform:translateY(-2px); } .cb-hs-num{ font-family:'Manrope',sans-serif; font-size:32px; font-weight:800; line-height:1; background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; letter-spacing:-.02em; } .cb-hs-lbl{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1.5px; margin-top:4px; font-weight:600; } /* Hide stats on mobile/narrow to avoid overlapping text */ @media(max-width:1100px){.cb-hero-stats{display:none}} /* ===== POLISH PASS 2 (v22 → v23) ===== */ /* Addresses: orphaned SR pill, dark-mode bl-strip contrast, hero orb subtlety, quiz answer micro-interactions, scrollbar styling, focus rings */ /* SR DASHBOARD: make the "All caught up" / "Due" pill feel integrated and intentional */ .sr-dashboard{ padding:8px 14px!important; border-radius:24px!important; font-weight:600; letter-spacing:.3px; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:all .25s cubic-bezier(.34,1.56,.64,1)!important; } .sr-dashboard:hover{ transform:translateY(-2px) scale(1.02)!important; box-shadow:0 6px 18px rgba(var(--ar),.18); } .sr-dashboard.sr-empty{ background:linear-gradient(135deg,var(--green-soft),transparent); border-color:var(--green-mid)!important; color:var(--green)!important; opacity:1!important; } .sr-dashboard.sr-empty span:first-child{color:var(--green)!important} .sr-dashboard:not(.sr-empty){ background:linear-gradient(135deg,var(--mid),var(--soft)); border-color:var(--accent)!important; } .sr-dashboard-badge{ background:var(--accent)!important; font-family:'Manrope',sans-serif!important; box-shadow:0 2px 6px rgba(var(--ar),.3); } /* DARK THEME BL-STRIP: stronger contrast against very dark bg */ [data-theme="dark"] .bl-strip{ background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.02) 85%); border-color:rgba(255,255,255,.08); } [data-theme="dark"] .bl-strip.gold{background:linear-gradient(135deg,rgba(var(--gr),.18) 0%,rgba(var(--gr),.06) 100%)} [data-theme="dark"] .bl-strip.purple{background:linear-gradient(135deg,rgba(var(--pr),.18) 0%,rgba(var(--pr),.06) 100%)} [data-theme="dark"] .bl-strip.red{background:linear-gradient(135deg,rgba(var(--rr),.18) 0%,rgba(var(--rr),.06) 100%)} [data-theme="dark"] .bl-strip.green{background:linear-gradient(135deg,rgba(var(--nr),.18) 0%,rgba(var(--nr),.06) 100%)} [data-theme="dark"] .bl-strip.orange{background:linear-gradient(135deg,rgba(var(--or),.18) 0%,rgba(var(--or),.06) 100%)} /* HERO ORB: more presence, especially on light themes */ .hero::after{ opacity:.14!important; filter:blur(50px)!important; } [data-theme="dark"] .hero::after{opacity:.2!important} @keyframes heroOrb{ 0%{transform:translateY(-50%) scale(1) rotate(0deg);opacity:.12} 50%{opacity:.18} 100%{transform:translateY(-50%) scale(1.1) rotate(10deg);opacity:.12} } /* QUIZ ANSWER BUTTONS: micro-interaction feedback */ .q-option,.quiz-choice,button[data-answer]{ transition:all .2s cubic-bezier(.34,1.56,.64,1); } .q-option:hover,.quiz-choice:hover,button[data-answer]:hover{ transform:translateX(4px); } .q-option:active,.quiz-choice:active,button[data-answer]:active{ transform:scale(.98); } /* Correct answer feedback */ .q-option.correct,.quiz-choice.correct{ animation:correctPulse .6s cubic-bezier(.34,1.56,.64,1); } @keyframes correctPulse{ 0%{transform:scale(1)} 40%{transform:scale(1.03);box-shadow:0 0 0 8px rgba(var(--nr),.15)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--nr),0)} } /* Incorrect answer feedback — subtle shake */ .q-option.incorrect,.quiz-choice.incorrect{ animation:incorrectShake .35s ease-in-out; } @keyframes incorrectShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} } /* CUSTOM SCROLLBARS: thin, theme-aware */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{ background:var(--border2); border-radius:6px; border:2px solid var(--bg); transition:background .2s; } *::-webkit-scrollbar-thumb:hover{background:var(--text3)} /* Firefox */ *{scrollbar-width:thin;scrollbar-color:var(--border2) transparent} /* FOCUS RINGS: accessible but not ugly */ button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } /* Remove default focus on click for buttons */ button:focus:not(:focus-visible){outline:none} /* BL-LABEL ICON: animated pulse for colored strips to draw eye */ .bl-strip.gold .bl-label::before, .bl-strip.red .bl-label::before, .bl-strip.purple .bl-label::before{ animation:dotPulse 2.5s ease-in-out infinite; } @keyframes dotPulse{ 0%,100%{box-shadow:0 0 0 0 currentColor;opacity:.9} 50%{box-shadow:0 0 0 4px transparent;opacity:1} } /* SECTION SUB (description under section-title): subtle improvement */ .section-sub{ color:var(--text2); line-height:1.65; margin-bottom:20px; max-width:70ch; } /* TAB-PANEL: existing animation in place via theme.css line 53-54 - no override needed */ /* NAV LOGO: subtle hover bounce */ .logo-link:hover .mark{ animation:markBounce .5s cubic-bezier(.34,1.56,.64,1); } @keyframes markBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} } /* LINKS: understated but clearly interactive */ .container a:not(.cb-nav-search-btn):not(.cb-nav-flashcards-btn):not(.logo-link){ color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; } .container a:not(.cb-nav-search-btn):not(.cb-nav-flashcards-btn):not(.logo-link):hover{ border-bottom-color:var(--accent); } /* ===== POLISH PASS 3 (v23 → v24) ===== */ /* Targeting: NEXT UP nav, related modules, accordion chevrons, rc2 review cards */ /* ACCORDION (ma-item) chevron: larger, rotate on open */ .ma-chevron{ font-size:14px!important; width:24px; height:24px; display:flex!important; align-items:center; justify-content:center; border-radius:6px; background:var(--soft); color:var(--accent)!important; font-weight:700; } .ma-header:hover .ma-chevron{ background:var(--mid); transform:scale(1.1); } .ma-body.open ~ .ma-chevron, .ma-item .ma-body[style*="block"] ~ * .ma-chevron{ /* chevron flip handled by JS toggleMA via inline transform */ } /* MA-ITEM: better header layout */ .ma-header{ padding:16px 20px; font-weight:600; } .ma-header h4{ font-size:15px; font-weight:700; letter-spacing:-.01em; } .ma-body{ padding:0 20px 20px; } /* NEXT UP NAV: upgrade to elegant cards with subtle arrow animations */ .cb-next-nav{ margin:56px 0 32px; padding-top:32px; border-top:1px solid var(--border); } .cb-nav-btn{ padding:18px 22px; border-radius:14px; background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%); border:1px solid var(--border); transition:all .3s cubic-bezier(.34,1.56,.64,1); position:relative; overflow:hidden; } .cb-nav-btn::before{ content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--soft) 0%,transparent 60%); opacity:0; transition:opacity .3s; } .cb-nav-btn:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 24px rgba(var(--ar),.14); } .cb-nav-btn:hover::before{opacity:1} .cb-nav-btn > *{position:relative;z-index:1} .cb-nav-label-sub{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; } .cb-nav-label-main{ font-size:15px; font-weight:700; color:var(--text); margin-top:4px; } .cb-nav-prev .cb-nav-label-main::before{content:'';display:inline-block} .cb-nav-next .cb-nav-label-main{text-align:right;display:block} .cb-nav-next .cb-nav-label-sub{text-align:right;display:block} /* RELATED MODULES: upgrade card style */ .cb-related-card{ background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%)!important; border:1px solid var(--border)!important; border-radius:18px!important; padding:28px 32px!important; position:relative; overflow:hidden; } .cb-related-card::before{ content:''; position:absolute; top:0; right:0; width:180px; height:180px; background:radial-gradient(circle at 100% 0%,var(--mid) 0%,transparent 70%); pointer-events:none; } .cb-related-link,a.cb-related-link{ background:var(--bg2)!important; border:1px solid var(--border)!important; border-radius:12px; padding:14px 18px!important; transition:all .25s cubic-bezier(.34,1.56,.64,1)!important; display:flex!important; flex-direction:column; gap:4px; text-decoration:none!important; color:var(--text)!important; border-bottom:1px solid var(--border)!important; } .cb-related-link:hover,a.cb-related-link:hover{ border-color:var(--accent)!important; background:var(--soft)!important; transform:translateY(-3px); box-shadow:0 8px 20px rgba(var(--ar),.12); } .cb-related-link-name{ font-weight:700; font-size:14px; color:var(--text); } .cb-related-link-why{ font-size:12px; color:var(--text3); line-height:1.4; } /* RC2 REVIEW CARDS: additional polish on the existing treatment */ .rc2{ border-radius:16px!important; padding:24px!important; background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%)!important; } .rc2:hover{ box-shadow:0 16px 48px rgba(var(--ar),.14)!important; transform:translateY(-5px)!important; } .rc2 .rc2-q{ font-size:15px!important; line-height:1.5!important; } /* STAT PILLS (Sn/Sp): subtle lift on hover */ .stat-pill,.wb-pill{ transition:transform .15s; } .stat-pill:hover,.wb-pill:hover{ transform:scale(1.08); } /* BL-STRIP: subtle inner glow on colored variants */ .bl-strip.red::before,.bl-strip.gold::before,.bl-strip.purple::before, .bl-strip.green::before,.bl-strip.orange::before{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.15); } [data-theme="dark"] .bl-strip::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important} /* TRANSITIONS: smoother page-wide */ html{scroll-behavior:smooth} /* ===================================================================== TC-CARD (Triple Card) — What it is / Why it matters / What to do A three-section learning card for concepts that need full clinical context. Inherits the bl-strip aesthetic; compatible with all color variants + themes. ===================================================================== */ .tc-card{ position:relative; background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 85%); border-left:3px solid var(--border2); border-top:1px solid transparent; border-right:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:4px 12px 12px 4px; padding:18px 20px 18px 22px; margin:24px 0; box-shadow:0 1px 2px rgba(0,0,0,.03); transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .3s,border-left-width .2s; } .tc-card:hover{ transform:translateX(3px); box-shadow:0 6px 20px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04); border-left-width:4px; } .tc-card .tc-label{ font-size:10px; font-family:'IBM Plex Mono',monospace; color:var(--text3); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:12px; font-weight:700; display:inline-flex; align-items:center; gap:6px; } .tc-card .tc-label::before{ content:''; display:inline-block; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.7; } .tc-card .tc-section{ padding:10px 0; border-top:1px dashed var(--border); } .tc-card .tc-section:first-of-type{border-top:none;padding-top:2px} .tc-card .tc-section:last-of-type{padding-bottom:2px} .tc-card .tc-tag{ font-size:10.5px; font-family:'IBM Plex Mono',monospace; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent); display:inline-flex; align-items:center; gap:7px; margin-bottom:5px; } .tc-card .tc-tag::before{ font-size:11px; line-height:1; opacity:.95; } .tc-card .tc-what .tc-tag::before{content:'◆'} .tc-card .tc-why .tc-tag::before{content:'◇'} .tc-card .tc-do .tc-tag::before{content:'▸'} .tc-card .tc-section p{ font-size:14.5px; color:var(--text2); line-height:1.75; margin:0; } .tc-card .tc-section p strong{ color:var(--text); font-weight:600; } /* Colored variants — mirror bl-strip exactly so the system feels consistent */ .tc-card.gold{border-left-color:var(--gold);background:linear-gradient(135deg,var(--gold-mid) 0%,var(--gold-soft) 100%)} .tc-card.gold .tc-label,.tc-card.gold .tc-tag{color:var(--gold)} .tc-card.purple{border-left-color:var(--purple);background:linear-gradient(135deg,var(--purple-mid) 0%,var(--purple-soft) 100%)} .tc-card.purple .tc-label,.tc-card.purple .tc-tag{color:var(--purple)} .tc-card.red{border-left-color:var(--red);background:linear-gradient(135deg,var(--red-mid) 0%,var(--red-soft) 100%)} .tc-card.red .tc-label,.tc-card.red .tc-tag{color:var(--red)} .tc-card.green{border-left-color:var(--green);background:linear-gradient(135deg,var(--green-mid) 0%,var(--green-soft) 100%)} .tc-card.green .tc-label,.tc-card.green .tc-tag{color:var(--green)} .tc-card.orange{border-left-color:var(--orange);background:linear-gradient(135deg,var(--orange-mid) 0%,var(--orange-soft) 100%)} .tc-card.orange .tc-label,.tc-card.orange .tc-tag{color:var(--orange)} /* Hover amplification on colored variants */ .tc-card.gold:hover{background:linear-gradient(135deg,var(--gold-mid) 0%,var(--gold-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--gr),.12)} .tc-card.purple:hover{background:linear-gradient(135deg,var(--purple-mid) 0%,var(--purple-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--pr),.12)} .tc-card.red:hover{background:linear-gradient(135deg,var(--red-mid) 0%,var(--red-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--rr),.12)} .tc-card.green:hover{background:linear-gradient(135deg,var(--green-mid) 0%,var(--green-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--nr),.12)} .tc-card.orange:hover{background:linear-gradient(135deg,var(--orange-mid) 0%,var(--orange-soft) 70%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(var(--or),.12)} /* Inner glow like bl-strip colored variants have */ .tc-card.gold::before,.tc-card.red::before,.tc-card.purple::before, .tc-card.green::before,.tc-card.orange::before{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.15); } [data-theme="dark"] .tc-card::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important} /* ===================================================================== CARD SPACING — robust gaps between cards regardless of wrapper nesting (fixes cramped-card bug where bl-strips inside
wrappers touched) ===================================================================== */ /* Ensure any direct child of .container gets consistent top-spacing when following another block. This guarantees card separation even when cards are wrapped in intermediate
s. */ .container > div + div, .container > .bl-strip + .bl-strip, .container > .tc-card + .tc-card, .container > .bl-strip + .tc-card, .container > .tc-card + .bl-strip{ margin-top:20px; } /* Same protection inside accordions (ma-body) */ .ma-body > div > .bl-strip + .bl-strip, .ma-body > div > .tc-card + .tc-card, .ma-body > div > .bl-strip + .tc-card, .ma-body > div > .tc-card + .bl-strip, .ma-body .bl-strip + .bl-strip, .ma-body .tc-card + .tc-card, .ma-body .bl-strip + .tc-card, .ma-body .tc-card + .bl-strip{ margin-top:20px!important; } /* Space sibling
wrappers that commonly group cards */ .ma-body > div + div{ margin-top:20px; } /* ===================================================================== INTERACTIVE PRIMITIVES — cb-order, cb-match Learning-by-doing widgets. Touch-friendly, keyboard accessible, zero external dependencies. Styled to match the rest of the system. ===================================================================== */ /* ---- Shared widget shell ---- */ .cb-widget{ position:relative; background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 85%); border:1px solid var(--border); border-radius:14px; padding:20px 22px; margin:24px 0; box-shadow:0 1px 2px rgba(0,0,0,.03); } .cb-widget-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; } .cb-widget-tag{ font-size:10px; font-family:'IBM Plex Mono',monospace; color:var(--accent); background:var(--soft); border:1px solid var(--mid); padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:1.2px; font-weight:700; } .cb-widget-title{ font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; color:var(--text); flex:1; min-width:0; } .cb-widget-score{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text3); font-weight:600; } .cb-widget-prompt{ font-size:14px; color:var(--text2); line-height:1.6; margin-bottom:14px; } .cb-widget-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; } .cb-btn{ background:var(--bg2); border:1px solid var(--border); color:var(--text); font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; padding:8px 16px; border-radius:8px; cursor:pointer; transition:all .2s; } .cb-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--soft)} .cb-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)} .cb-btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--ar),.25)} .cb-btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .cb-widget-result{ margin-top:14px; padding:12px 14px; border-radius:10px; font-size:13.5px; line-height:1.6; display:none; } .cb-widget-result.show{display:block;animation:cbFade .25s ease} .cb-widget-result.correct{ background:var(--green-soft); border:1px solid var(--green-mid); color:var(--green); } .cb-widget-result.partial{ background:var(--gold-soft); border:1px solid var(--gold-mid); color:var(--gold); } .cb-widget-result.incorrect{ background:var(--red-soft); border:1px solid var(--red-mid); color:var(--red); } .cb-widget-result strong{color:inherit;font-weight:700} @keyframes cbFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* ===== ORDER (drag-to-sequence) ===== */ .cb-order-list{ display:flex; flex-direction:column; gap:8px; } .cb-order-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; cursor:grab; user-select:none; transition:all .15s; touch-action:none; /* allow drag on mobile */ } .cb-order-item:hover{border-color:var(--border2);background:var(--bg3)} .cb-order-item.dragging{opacity:.4;cursor:grabbing} .cb-order-item.drop-target{border-color:var(--accent);background:var(--soft);transform:scale(1.01)} .cb-order-item.correct{border-color:var(--green);background:var(--green-soft)} .cb-order-item.correct .cb-order-num{background:var(--green);color:#fff} .cb-order-item.wrong{border-color:var(--red);background:var(--red-soft)} .cb-order-item.wrong .cb-order-num{background:var(--red);color:#fff} .cb-order-num{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--bg3); color:var(--text3); font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:all .2s; } .cb-order-text{ flex:1; min-width:0; font-size:14px; color:var(--text); line-height:1.45; } .cb-order-grip{ flex-shrink:0; color:var(--text3); font-size:14px; opacity:.5; font-family:monospace; letter-spacing:-2px; } .cb-order-item:hover .cb-order-grip{opacity:1} /* Keyboard focus + move buttons for accessibility */ .cb-order-move{ display:flex; flex-direction:column; gap:2px; flex-shrink:0; } .cb-order-move button{ width:22px; height:18px; border:1px solid var(--border); background:var(--bg2); border-radius:4px; cursor:pointer; font-size:10px; color:var(--text3); display:flex; align-items:center; justify-content:center; padding:0; transition:all .15s; } .cb-order-move button:hover{color:var(--accent);border-color:var(--accent)} .cb-order-move button:disabled{opacity:.3;cursor:not-allowed} /* ===== MATCH (click pairs) ===== */ .cb-match-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; } .cb-match-col{ display:flex; flex-direction:column; gap:8px; } .cb-match-col-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text3); margin-bottom:4px; font-weight:700; } .cb-match-item{ padding:10px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; cursor:pointer; font-size:13.5px; color:var(--text); line-height:1.45; transition:all .15s; position:relative; text-align:left; font-family:'Manrope',sans-serif; font-weight:500; } .cb-match-item:hover:not(.matched):not(.selected){ border-color:var(--accent); background:var(--soft); } .cb-match-item.selected{ border-color:var(--accent); background:var(--mid); border-width:2px; padding:9px 13px; } .cb-match-item.matched{ border-color:var(--green); background:var(--green-soft); color:var(--green); cursor:default; pointer-events:none; } .cb-match-item.matched::after{ content:'✓'; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--green); font-weight:700; } .cb-match-item.flash-wrong{ animation:cbShake .4s; border-color:var(--red)!important; background:var(--red-soft)!important; } @keyframes cbShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} } @media (max-width:560px){ .cb-match-grid{grid-template-columns:1fr} .cb-match-col + .cb-match-col{margin-top:8px} } /* ===================================================================== REVEAL-CARD PRIMITIVE (v60) Usage:
Question
Answer
Optional variants: .rv-card.gold / .purple / .red / .green / .orange Click to flip. Keyboard: Tab to focus + Enter/Space to toggle. ===================================================================== */ .rv-card{ position:relative;background:var(--bg3); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px;padding:18px 22px;margin:14px 0; cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1); user-select:none; } .rv-card:hover{ transform:translateX(3px); box-shadow:0 6px 20px rgba(var(--ar),.12); border-left-width:4px; } .rv-card:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--ar),.25)} .rv-card .rv-q{ font-family:'Manrope',sans-serif;font-size:15px;font-weight:600; color:var(--text);line-height:1.55;padding-right:32px; } .rv-card .rv-q::before{ content:'Q';position:absolute;top:18px;right:18px; display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:50%;background:var(--soft); color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:11px; font-weight:700;transition:all .2s; } .rv-card .rv-a{ display:none;margin-top:14px;padding-top:14px; border-top:1px dashed var(--border2); font-size:14px;color:var(--text2);line-height:1.75; animation:rvFlip .4s cubic-bezier(.34,1.56,.64,1); } .rv-card.rv-open .rv-a{display:block} .rv-card.rv-open .rv-q::before{ content:'A';background:var(--accent);color:#fff; transform:rotate(360deg); } .rv-card.rv-open{border-left-width:4px} @keyframes rvFlip{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} } /* Color variants */ .rv-card.gold{border-left-color:var(--gold)} .rv-card.gold .rv-q::before{background:var(--gold-soft);color:var(--gold)} .rv-card.gold.rv-open .rv-q::before{background:var(--gold);color:#fff} .rv-card.purple{border-left-color:var(--purple)} .rv-card.purple .rv-q::before{background:var(--purple-soft);color:var(--purple)} .rv-card.purple.rv-open .rv-q::before{background:var(--purple);color:#fff} .rv-card.red{border-left-color:var(--red)} .rv-card.red .rv-q::before{background:var(--red-soft);color:var(--red)} .rv-card.red.rv-open .rv-q::before{background:var(--red);color:#fff} .rv-card.green{border-left-color:var(--green)} .rv-card.green .rv-q::before{background:var(--green-soft);color:var(--green)} .rv-card.green.rv-open .rv-q::before{background:var(--green);color:#fff} .rv-card.orange{border-left-color:var(--orange)} .rv-card.orange .rv-q::before{background:var(--orange-soft);color:var(--orange)} .rv-card.orange.rv-open .rv-q::before{background:var(--orange);color:#fff} /* Grid layout for rv-card rows */ .rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:14px 0} .rv-grid .rv-card{margin:0} @media(max-width:700px){.rv-grid{grid-template-columns:1fr}} /* Bulk reveal-all button */ .rv-bulk{display:inline-flex;align-items:center;gap:6px; background:transparent;border:1px solid var(--border);color:var(--text2); padding:6px 12px;border-radius:16px;font-family:'IBM Plex Mono',monospace; font-size:11px;font-weight:600;letter-spacing:.3px;cursor:pointer; transition:all .15s;margin:8px 0 16px} .rv-bulk:hover{border-color:var(--accent);color:var(--accent);background:var(--soft)} /* ===================================================================== * v709 — OBSIDIAN THEME — elegant black + gradient accents, no frost. * "Glass" via gradient overlays + inner highlight (NO backdrop-filter blur). * Activate: * ===================================================================== */ /* v757 — Obsidian darkened + contrast lifted + chroma intensified. Bg goes near-black (#020207) so the galaxy nebula pops harder. Text + border alphas pushed up so glass UI reads against the deeper black. Chroma palette saturated for gradient-text legibility against the void. */ /* Ambient depth gradient (static, visible at all motion levels) */ /* Premium gradient text on hero em / big numbers — v749: no drop-shadow glow per David's "I don't want it to glow" feedback. Clean gradient text only. */ /* Glass-without-frost cards — gradient overlay + inner edge highlight */ /* Featured tier — stronger wash */ /* Nav top edge */ /* CTAs — gradient buttons */ /* "Most popular" badge — punchier */ /* Bedside-Ready badges (Education library) */ /* Inputs */ /* NPTE callout */ /* Pricing matrix */ /* FAQ details */ /* ===================================================================== * v709 — Sitewide hover/click micro-animations (motion-respectful). * Disabled when [data-motion="off"] is set on . * ===================================================================== */ html:not([data-motion="off"]) button, html:not([data-motion="off"]) .price-cta, html:not([data-motion="off"]) .pp-tier-cta, html:not([data-motion="off"]) .price-cta-3t, html:not([data-motion="off"]) .cta-primary, html:not([data-motion="off"]) .cta-ghost, html:not([data-motion="off"]) .ps-bar-btn{ transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .25s ease,filter .2s ease,background-color .25s,border-color .2s,color .2s; } html:not([data-motion="off"]) button:active:not(:disabled), html:not([data-motion="off"]) .price-cta:active, html:not([data-motion="off"]) .pp-tier-cta:active, html:not([data-motion="off"]) .price-cta-3t:active, html:not([data-motion="off"]) .cta-primary:active{ transform:translateY(1px) scale(.985);transition-duration:.08s; } /* Motion=off: kill all transitions and ambient gradients */ html[data-motion="off"] *{ animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important; } html[data-motion="off"] .price-card:hover, html[data-motion="off"] .pp-tier:hover, html[data-motion="off"] .land-pillar:hover, html[data-motion="off"] .feat-card:hover, html[data-motion="off"] .cb-positioning-col:hover, html[data-motion="off"] .sister-card:hover, html[data-motion="off"] .path-card:hover, html[data-motion="off"] .ps-card:hover, html[data-motion="off"] .cb-ed-card:hover{transform:none !important;box-shadow:none !important} html[data-motion="off"] body{background-attachment:initial !important} /* ===================================================================== * v710 — MODULE SHELL — sitewide learning UX layer. * Path selector (Full / Quick / Bedside), reading time + progress bar, * inline learning components (mini-quiz / mnemonic / go-deeper / try-it), * and rhythm callouts (.cb-pearl / .cb-npte-note / .cb-mnemonic / * .cb-pitfall). Auto-mounts on CB_*Module*.html pages via themes.js. * ===================================================================== */ /* ── Path selector + reading time + progress bar ── */ .cb-ms-bar{max-width:1180px;margin:14px auto 18px;padding:14px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:14px} .cb-ms-row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center} @media(max-width:780px){.cb-ms-row{grid-template-columns:1fr}} .cb-ms-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;color:var(--text2);margin-bottom:8px} .cb-ms-paths{display:flex;flex-wrap:wrap;gap:6px} .cb-ms-path-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;background:transparent;border:1px solid var(--border);border-radius:10px;padding:8px 14px;cursor:pointer;font-family:'Manrope',sans-serif;color:var(--text2);line-height:1.2;transition:all .2s} .cb-ms-path-chip:hover{border-color:var(--accent);color:var(--accent)} .cb-ms-path-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)} .cb-ms-path-icon{font-size:15px;line-height:1} .cb-ms-path-label{font-size:12.5px;font-weight:700;letter-spacing:-.005em;display:inline-flex;align-items:center;gap:6px} .cb-ms-path-label::before{content:attr(data-icon-fallback)} .cb-ms-path-chip .cb-ms-path-label{display:flex;align-items:center;gap:6px} .cb-ms-path-chip .cb-ms-path-icon{margin-right:4px} .cb-ms-path-hint{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.7px;color:inherit;opacity:.75;font-weight:600} .cb-ms-meta{display:flex;flex-direction:column;gap:8px;min-width:240px} .cb-ms-meta-row{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)} .cb-ms-meta-icon{font-size:14px} .cb-ms-meta-text{font-weight:600;color:var(--text)} .cb-ms-progress-track{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;border:1px solid var(--border)} .cb-ms-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width .35s ease} .cb-ms-progress-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.6px;color:var(--text3);font-weight:700;margin-top:4px} /* Obsidian overrides — gradient feel */ /* ── MINI QUIZ ── */ .cb-mq{background:linear-gradient(135deg,rgba(99,102,241,.04),rgba(99,102,241,.01));border:1px solid var(--border);border-left:3px solid #6366f1;border-radius:12px;padding:18px 20px;margin:18px 0} .cb-mq-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;color:#6366f1} .cb-mq-q{font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:700;margin:10px 0 14px;line-height:1.45;color:var(--text)} .cb-mq-opts{display:flex;flex-direction:column;gap:8px} .cb-mq-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;cursor:pointer;font-family:'Manrope',sans-serif;font-size:14px;color:var(--text);line-height:1.4;transition:all .18s} .cb-mq-opt:hover{border-color:#6366f1;background:rgba(99,102,241,.05)} .cb-mq-letter{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;background:var(--bg3);color:var(--text2);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:800;flex-shrink:0} .cb-mq-opt.answered{cursor:default;opacity:.65} .cb-mq-opt.answered:hover{border-color:var(--border);background:var(--bg2)} .cb-mq-opt.right{border-color:#16a34a;background:rgba(22,163,74,.08);color:var(--text);opacity:1} .cb-mq-opt.right .cb-mq-letter{background:#16a34a;color:#fff} .cb-mq-opt.wrong{border-color:#dc2626;background:rgba(220,38,38,.06)} .cb-mq-opt.wrong .cb-mq-letter{background:#dc2626;color:#fff} .cb-mq-opt.reveal{border-color:#16a34a;background:rgba(22,163,74,.05);opacity:1} .cb-mq-opt.reveal .cb-mq-letter{background:rgba(22,163,74,.30);color:#16a34a} .cb-mq-explain{margin-top:14px;padding:10px 14px;background:rgba(0,0,0,.04);border-radius:8px;font-size:13.5px;line-height:1.55;color:var(--text2);border-left:2px solid var(--accent)} .cb-mq-explain strong{color:var(--text);font-weight:700} [data-theme="dark"] .cb-mq-explain{background:rgba(255,255,255,.04)} /* ── MNEMONIC CARD ── */ .cb-mnem{background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(124,58,237,.01));border:1px solid var(--border);border-left:3px solid #7c3aed;border-radius:12px;padding:16px 20px;margin:18px 0;max-width:520px} .cb-mnem-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--border)} .cb-mnem-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;color:#7c3aed} .cb-mnem-key{font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;letter-spacing:.5px;color:var(--text);background:linear-gradient(120deg,#7c3aed,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent} .cb-mnem-title{font-size:13px;color:var(--text2);font-style:italic} .cb-mnem-body{display:flex;flex-direction:column;gap:6px} .cb-mnem-row{display:flex;align-items:center;gap:14px;padding:4px 0} .cb-mnem-letter{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background:rgba(124,58,237,.10);color:#7c3aed;font-family:'Manrope',sans-serif;font-size:16px;font-weight:800;flex-shrink:0} .cb-mnem-word{font-size:14px;font-weight:600;color:var(--text)} .cb-mnem-note{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--text2);line-height:1.5;font-style:italic} /* ── GO DEEPER (expand/collapse) ── */ .cb-deeper{margin:18px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2)} .cb-deeper-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;background:transparent;border:none;cursor:pointer;text-align:left;font-family:'Manrope',sans-serif;color:var(--text);transition:background-color .2s} .cb-deeper-toggle:hover{background:var(--soft)} .cb-deeper-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:var(--accent);color:#fff;font-size:18px;font-weight:600;flex-shrink:0;line-height:1;transition:transform .2s} .cb-deeper-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;color:var(--accent)} .cb-deeper-title{font-size:14px;font-weight:700;color:var(--text);margin-left:auto} .cb-deeper-body{padding:0 18px 18px;border-top:1px solid var(--border);font-size:14px;line-height:1.65;color:var(--text)} .cb-deeper-body > *:first-child{margin-top:14px} /* ── TRY-IT (clinical reasoning prompt) ── */ .cb-tryit{background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(245,158,11,.01));border:1px solid var(--border);border-left:3px solid #f59e0b;border-radius:12px;padding:18px 20px;margin:18px 0} .cb-tryit-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .cb-tryit-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;color:#b45309} .cb-tryit-tag{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1px;font-weight:700;text-transform:uppercase;color:var(--text3);background:var(--bg3);padding:2px 7px;border-radius:4px;border:1px solid var(--border)} .cb-tryit-case{font-size:14px;line-height:1.6;color:var(--text);background:rgba(0,0,0,.03);padding:12px 14px;border-radius:8px;margin-bottom:12px;font-style:italic} [data-theme="dark"] .cb-tryit-case{background:rgba(255,255,255,.04)} .cb-tryit-q{font-size:14px;color:var(--text);margin-bottom:14px;line-height:1.55} .cb-tryit-reveal{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:9px 16px;border-radius:8px;background:#f59e0b;color:#fff;border:none;cursor:pointer;transition:transform .18s,filter .18s,box-shadow .25s} .cb-tryit-reveal:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 6px 18px rgba(245,158,11,.30)} .cb-tryit-answer{margin-top:14px;padding:12px 14px;background:rgba(22,163,74,.06);border-left:2px solid #16a34a;border-radius:0 8px 8px 0;font-size:14px;line-height:1.6;color:var(--text)} /* ── RHYTHM CALLOUTS (CSS-only — authors just add the class) ── */ .cb-pearl,.cb-npte-note,.cb-mnemonic,.cb-pitfall{ display:block;padding:14px 18px;margin:16px 0;border:1px solid var(--border);border-radius:10px;font-size:14px;line-height:1.6; position:relative;padding-left:48px; } .cb-pearl::before,.cb-npte-note::before,.cb-mnemonic::before,.cb-pitfall::before{ position:absolute;left:14px;top:14px;font-size:18px;line-height:1; } .cb-pearl{background:linear-gradient(135deg,rgba(20,184,166,.06),rgba(20,184,166,.01));border-left:3px solid #14b8a6} .cb-pearl::before{content:'💡'} .cb-pearl > strong:first-child,.cb-pearl > b:first-child{color:#0d9488;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1.4px;display:block;margin-bottom:6px} .cb-npte-note{background:linear-gradient(135deg,rgba(220,38,38,.05),rgba(59,130,246,.03));border-left:3px solid #dc2626} .cb-npte-note::before{content:'🎯'} .cb-npte-note > strong:first-child{color:#dc2626;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1.4px;display:block;margin-bottom:6px} .cb-mnemonic{background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(124,58,237,.01));border-left:3px solid #7c3aed} .cb-mnemonic::before{content:'🧠'} .cb-mnemonic > strong:first-child{color:#7c3aed;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1.4px;display:block;margin-bottom:6px} .cb-pitfall{background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(245,158,11,.01));border-left:3px solid #f59e0b} .cb-pitfall::before{content:'⚠️'} .cb-pitfall > strong:first-child{color:#b45309;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1.4px;display:block;margin-bottom:6px} /* ===================================================================== * v711 — OBSIDIAN POLISH PASS (from David's screenshot review): * - Hero headlines were rendering low-contrast (non-em text faded). * Force pure-white + drop-shadow for legibility against ambient gradient. * - Body ambient gradient was double-stacking with cb-mesh-bg making text * areas too bright in places. Reduced to a single subtle wash. * - Module content .container had cream backgrounds bleeding through. * Catch-all glass treatment. * ===================================================================== */ /* v713 — Hero / section headers force bright white + -webkit-text-fill-color (the property that beats background-clip propagation). Same defensive pattern as Pulse v713. */ /* The em child re-declares its gradient (parent set -webkit-text-fill-color) */ /* Lead / subtitle paragraphs — keep readable on the ambient gradient */ /* Body ambient gradient — lower brightness so it doesn't wash text */ /* Module content wrappers — catch any .container or .tab-panel inner that had a light/cream background bleeding through */ /* ===================================================================== * v711 — EMBER POLISH PASS — match the fiery red identity in components * that used the old muted-orange tokens. The cb-theme-ember.css file * holds the token-level overrides; these are the component-level fits. * ===================================================================== */ /* The em child re-declares for Ember */ /* Ember: kill backdrop-filter blur too — pure cards, no smudge */ /* Top-nav buttons across all themes — coherent visual rhythm. The Bedside button stays gold-red as the CB-clinician pop; the muted NPTE/Business adapt via themes.js. Upgrade adapts to var(--accent). */ /* Upgrade CTA on dark themes — keep punchy regardless of accent */ /* ===================================================================== * v712 — DEFENSIVE FIX for the "orange blob" on the featured pricing tier. * * David's screenshot showed the MOST POPULAR badge gradient (orange→red→ * magenta) rendering as a huge organic blob covering the Student card. * Root cause was likely one (or a combination) of: * - Galaxy tilt-glare residue (.galaxy-tilt-glare element left behind) * - filter:blur or scale inheriting onto ::before from a parent * - The Galaxy 3D-tilt animation mid-transform when theme was switched * * Defense in depth — force the badge to its known-good small-pill * geometry and kill any inherited filters/transforms on featured tiers. * Applies across all themes (the bug isn't theme-specific). Stronger * !important here than elsewhere because the bug is hard to repro * deterministically and the user wants it gone. * ===================================================================== */ .pp-tier.featured::before, .price-card.featured::before{ position:absolute !important; top:-12px !important; left:50% !important; transform:translateX(-50%) !important; width:auto !important; height:auto !important; max-width:90% !important; padding:5px 14px !important; font-size:9.5px !important; line-height:1.2 !important; border-radius:999px !important; filter:none !important; /* keep authored content for the pill text */ white-space:nowrap !important; overflow:hidden !important; } /* Galaxy tilt-glare can sometimes get stuck on a card if a transition was interrupted (theme swap, tab nav). Kill any stuck glare. The active hover effect re-creates the element fresh anyway. */ .galaxy-tilt-glare{ /* Cap any rogue size — glare should be card-sized, never larger. */ max-width:100% !important; max-height:100% !important; border-radius:inherit !important; pointer-events:none !important; } /* Featured tier cards: kill any inherited filter / mix-blend-mode from parent that could be making the pseudo-element look blurry/oversized. */ .pp-tier.featured, .price-card.featured{ filter:none; mix-blend-mode:normal; contain:layout style; /* isolate the card's transforms */ } .pp-tier.featured *, .price-card.featured *{ filter:none; } /* ========================================================================== HIGH-YIELD (HY) MODE STYLES ========================================================================== */ html[data-hy-mode="active"] .hy-dimmed, html[data-hy-mode="active"] .ma-item:not(.hy-highlight), html[data-hy-mode="active"] .bl-strip:not(.hy-highlight), html[data-hy-mode="active"] .tc-card:not(.hy-highlight) { opacity: 0.35 !important; filter: blur(0.15px) grayscale(40%) !important; transition: all 0.22s var(--ease-out, ease-out); } html[data-hy-mode="active"] .hy-dimmed:hover, html[data-hy-mode="active"] .ma-item:not(.hy-highlight):hover, html[data-hy-mode="active"] .bl-strip:not(.hy-highlight):hover, html[data-hy-mode="active"] .tc-card:not(.hy-highlight):hover { opacity: 0.95 !important; filter: none !important; } html[data-hy-mode="active"] .hy-highlight { position: relative; opacity: 1 !important; filter: none !important; border-left: 3px solid var(--accent) !important; box-shadow: 0 0 16px rgba(var(--ar), 0.2) !important; transition: all 0.22s var(--ease-out, ease-out); } .cb-hy-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 30px; padding: 0 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text2); margin-right: 8px; font-weight: 700; transition: all 0.2s var(--ease-out, ease-out); } .cb-hy-toggle:hover { background: var(--soft); color: var(--accent); border-color: var(--accent); } .cb-hy-toggle.active { background: linear-gradient(120deg, rgba(45,255,128,0.22), rgba(16,64,40,0.05)); border-color: var(--v4-line-hi, rgba(45,255,128,0.42)); color: #fff; box-shadow: inset 0 0 0 1px rgba(45,255,128,0.35); } [data-theme="light"] .cb-hy-toggle.active { background: rgba(5, 150, 105, 0.15); border-color: var(--accent); color: var(--accent); }