/* ══════════════════════════════════════════════════════════════════════════════ shapes-skin.css — "Clinical Blue" skin ------------------------------------------------------------------------------ Print-poster build (grain, flat colour blocks, sticker labels, offset-print shadows) in a cool clinical palette: navy · cobalt · azure · sky · ice, white and slate grays, with oxblood red as the one warm accent. shapes-fx.js draws the art (the Vitalité icon set on the landing page, the impossible-ribbon shapes in the splash) and drives the semicircle sidebar. Linked LAST in inside the SHAPES-THEME block so it wins the cascade over gold-blue + vitalite-skin. Remove with: python3 tools/shapes_switch.py off ══════════════════════════════════════════════════════════════════════════════ */ :root{ /* inks */ --os-navy:#12294A; --os-navy-deep:#0A1626; --os-cobalt:#1E4F8F; --os-azure:#3A78C2; --os-sky:#8DB6E2; --os-ice:#DCE8F4; --os-slate:#5E6B7B; --os-gray:#C5CFDA; --os-crimson:#B3323A; --os-oxblood:#8E1F2A; --os-red-lite:#E0575F; --os-ink:#0E1E33; /* light: cool white paper, navy ink, cobalt accent, oxblood warmth */ --bg:#F3F6FA;--surface:#FFFFFF;--surface2:#EEF2F7;--surface3:#E2E9F1; --text:#0E1E33;--text2:#3E4E63;--text3:#6F7D90; --accent:#1E4F8F;--accent2:#8E1F2A;--accent-bg:#E3ECF7; --green:#2E7D5B;--red:#B3323A;--amber:#B7791F; --border:#DCE3EB;--border2:#C6D1DD; --shadow-sm:2px 2px 0 rgba(18,41,74,.10); --shadow:4px 4px 0 rgba(18,41,74,.12); --shadow-lg:8px 8px 0 rgba(18,41,74,.14); --radius:8px;--radius-sm:6px;--radius-lg:10px; --os-hard:var(--os-navy); /* offset-print shadow colour */ --os-grain-op:.14; --accent-glow:rgba(30,79,143,.22); } body.dark{ /* dark (site default): navy ground, sky accent, lifted red for warmth */ --bg:#0A1626;--surface:#0F1F35;--surface2:#152A45;--surface3:#1C3556; --text:#EEF3F9;--text2:#B9C6D6;--text3:#8494A8; --accent:#8DB6E2;--accent2:#E0575F;--accent-bg:#17304F; --green:#8CC5A0;--red:#E0575F;--amber:#E0B36A; --border:#1E3657;--border2:#2A4A72; --shadow-sm:2px 2px 0 rgba(0,0,0,.35); --shadow:4px 4px 0 rgba(0,0,0,.4); --shadow-lg:8px 8px 0 rgba(0,0,0,.45); --os-hard:#040A13; --os-grain-op:.2; --accent-glow:rgba(141,182,226,.25); } /* ── Grain: one fixed stipple sheet over the whole page ─────────────────────── */ body{background-color:var(--bg)} body::after{ content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none; opacity:var(--os-grain-op); mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .16 0 0 0 0 .29 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:220px 220px; } body.dark::after{ mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .88 0 0 0 0 1 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Soft airbrushed washes in the page corners. */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(60vmax 45vmax at 105% -10%,color-mix(in srgb,var(--os-sky) 30%,transparent),transparent 70%), radial-gradient(55vmax 40vmax at -10% 110%,color-mix(in srgb,var(--os-crimson) 9%,transparent),transparent 70%); } body.dark::before{ background: radial-gradient(60vmax 45vmax at 105% -10%,color-mix(in srgb,var(--os-cobalt) 34%,transparent),transparent 70%), radial-gradient(55vmax 40vmax at -10% 110%,color-mix(in srgb,var(--os-crimson) 14%,transparent),transparent 70%); } .page-wrapper{position:relative;z-index:1} ::selection{background:var(--os-sky);color:var(--os-ink)} body.dark ::selection{background:var(--os-crimson);color:#fff} html{scrollbar-color:var(--border2) transparent} /* ── Chrome: header, top bar, rail ─────────────────────────────────────────── */ .landing nav.landing-nav{background:transparent;border:0} header, body.lin-v2 .lin-topbar{ background:color-mix(in srgb,var(--surface) 88%,transparent); border-bottom:2px solid var(--border); } .sidebar{background:var(--surface);border-right:2px solid var(--border)} .sidebar-link.active, body.lin-v2 .sidebar-link.active{ background:var(--accent-bg); color:var(--text); box-shadow:inset 3px 0 0 var(--accent2); } .sidebar-link:hover{color:var(--accent)} /* ── Tags & labels: sharp printed stickers ─────────────────────────────────── */ .section-label, .hero-badge{ border-radius:3px; background:var(--os-oxblood); color:#fff; letter-spacing:.12em; box-shadow:2px 2px 0 var(--os-hard); } body.dark .section-label, body.dark .hero-badge{background:var(--os-sky);color:var(--os-ink)} .hero-badge .dot{background:currentColor!important;box-shadow:none!important} /* ── Buttons: flat ink + offset-print shadow ───────────────────────────────── */ .qo-btn.next,.aq-btn.primary,.capture-btn,.fc-nav button.primary{ background:var(--accent); color:#fff; border:2px solid var(--os-hard)!important; border-radius:var(--radius-sm); box-shadow:3px 3px 0 var(--os-hard); transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s cubic-bezier(.2,.8,.2,1),background .15s; } /* gold-blue paints these gold with !important in dark mode — repaint in sky */ body.dark .qo-btn.next,body.dark .aq-btn.primary,body.dark .fc-nav button.primary, body.dark .fc-chip.active,body.dark .ai-send-btn,body.dark .chat-send,body.dark .chat-msg.user, body.dark .back-top,body.dark .guide-tab.on,body.dark .rec-item .rec-chip,body.dark .ch-nav .qo-btn, body.dark .callout h4 .co-ico,body.dark .guide-chip:hover,body.dark .capture-btn{ background:var(--os-sky)!important;color:var(--os-ink)!important;border-color:var(--os-hard)!important} body.dark .qo-btn.next:hover,body.dark .aq-btn.primary:hover,body.dark .ai-send-btn:hover, body.dark .chat-send:hover,body.dark .fc-nav button.primary:hover,body.dark .guide-tab.on:hover{ background:#A7C8EC!important} body.dark .author-ava{background:var(--os-crimson)!important;color:#fff!important} /* forum.css expects a gold chip under its near-black active text */ .for-cat.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important} body.dark .for-cat.active{color:var(--os-ink)!important} /* guide.html paints the active chapter row gold the same way */ body.dark .sidebar-link.gc.on,body.dark .sidebar-link.gc.on:hover{ background:var(--accent-bg)!important;color:var(--text)!important;box-shadow:inset 3px 0 0 var(--accent2)} .qo-btn.next:hover,.aq-btn.primary:hover,.capture-btn:hover,.fc-nav button.primary:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--os-hard); text-decoration:none; } .qo-btn.next:active,.aq-btn.primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--os-hard)} .btn-login{border-radius:var(--radius-sm)} .sec-pill.active{background:var(--accent);color:#fff} body.dark .sec-pill.active{background:var(--os-sky);color:var(--os-ink)} /* ── Cards: paper tiles with a hard shadow ─────────────────────────────────── */ .feature-card,.fork-card,.stat-card,.ch-card,.acc-item,.callout,.rec-box,.quiz-card,.qo-card{ border:2px solid var(--border); border-radius:var(--radius); background:var(--surface); } .landing .feature-card,.landing .fork-card,.landing .ch-card{ box-shadow:4px 4px 0 var(--border2); transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s cubic-bezier(.2,.8,.2,1),border-color .2s; } .landing .feature-card:hover,.landing .fork-card:hover,.landing .ch-card:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--os-hard); border-color:var(--os-hard); } .rec-box{background:color-mix(in srgb,var(--os-sky) 16%,var(--surface))} .callout{background:color-mix(in srgb,var(--accent-bg) 55%,var(--surface))} /* Chapter numbers & avatars: solid ink tiles, cycling through the inks. */ .ch-num,.author-ava{ background:var(--os-cobalt); color:#fff; border-radius:var(--radius-sm); box-shadow:2px 2px 0 var(--os-hard); } .ch-card:nth-child(5n+2) .ch-num{background:var(--os-crimson)} .ch-card:nth-child(5n+3) .ch-num{background:var(--os-azure)} .ch-card:nth-child(5n+4) .ch-num{background:var(--os-navy)} .ch-card:nth-child(5n+5) .ch-num{background:var(--os-slate)} body.dark .ch-card:nth-child(5n+4) .ch-num{background:var(--os-sky);color:var(--os-ink)} /* ── Headings ──────────────────────────────────────────────────────────────── */ /* gold-blue forces gold→cream gradient text on dark h1–h3; swap the inks. background-IMAGE only — the shorthand would reset background-clip. */ body.dark h1,body.dark h2,body.dark h3{background-image:linear-gradient(120deg,#FFFFFF,#A9C8EA)!important} .landing .hero h1{ background-image:linear-gradient(100deg,var(--os-navy),var(--os-cobalt) 55%,var(--os-crimson))!important; -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important; } body.dark.landing .hero h1{background-image:linear-gradient(100deg,#FFFFFF,var(--os-sky) 50%,var(--os-red-lite))!important} /* A split gradient heading can't clip through its word boxes, so each word carries its own slice of the gradient (shapes-fx.js sets the vars). */ html body .os-gradtext.os-gradtext.os-gradtext[data-os-split]{background:none!important;-webkit-text-fill-color:currentColor!important} /* specificity beats gold-blue's `body:not(.dark) .hero h1 span` (the words ARE spans) */ body .os-gradtext.os-gradtext .os-w .os-wt.os-wt{ background-image:var(--os-bgimg); background-size:var(--os-bw) var(--os-bh); background-position:var(--os-bx,0) var(--os-by,0); background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } .hero h1 span,body.dark .hero h1 span{ background:linear-gradient(100deg,var(--os-cobalt),var(--os-crimson)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } body.dark .hero h1 span{background:linear-gradient(100deg,var(--os-sky),var(--os-red-lite));-webkit-background-clip:text;background-clip:text} /* ── Landing ───────────────────────────────────────────────────────────────── */ .landing .hero{ background:transparent; border-bottom:0; padding:4.5rem 0 3.5rem; } .landing .hero::before,.landing .hero::after{display:none} .landing .hero h1{ font-family:var(--font-subhead); font-weight:700; letter-spacing:-.02em; color:var(--text); } .landing .hero-actions .qo-btn.next{border-radius:var(--radius-sm);box-shadow:4px 4px 0 var(--os-hard)} .landing .hero-actions .qo-btn.next:first-child{background:var(--os-crimson)!important;color:#fff!important} .landing .hero-actions .qo-btn.next:nth-child(2), body.dark.landing .hero-actions .qo-btn.next:nth-child(2){ background:var(--os-cobalt)!important;color:#fff!important;border-color:var(--os-hard)!important; } body.dark.landing .hero-actions .qo-btn.next:nth-child(2){background:var(--os-sky)!important;color:var(--os-ink)!important} /* Bands — each section is a colour block. */ .landing #landing-stats{background:var(--os-navy);border:0} .landing #landing-stats .stat-card{background:transparent;border:0;box-shadow:none} .landing #landing-stats .stat-num{ font-family:var(--font-subhead); color:#FFFFFF;-webkit-text-fill-color:#FFFFFF; background:none; } .landing #landing-stats .stat-card:nth-child(2) .stat-num{color:var(--os-sky);-webkit-text-fill-color:var(--os-sky)} .landing #landing-stats .stat-card:nth-child(3) .stat-num{color:var(--os-red-lite);-webkit-text-fill-color:var(--os-red-lite)} .landing #landing-stats .stat-card:nth-child(4) .stat-num{color:var(--os-ice);-webkit-text-fill-color:var(--os-ice)} .landing #landing-stats .stat-label{color:#C9D6E6} .landing #landing-fork{background:transparent} .landing #landing-chapters{background:color-mix(in srgb,var(--surface2) 70%,transparent);border-color:var(--border)} .landing #landing-cta{background:var(--os-cobalt);color:#fff} body.dark.landing #landing-cta{background:var(--os-oxblood)} .landing #landing-cta h2,.landing #landing-cta p{color:#fff;-webkit-text-fill-color:#fff} body.dark.landing #landing-cta h2{background-image:none!important;-webkit-text-fill-color:#fff!important} .landing #landing-cta .qo-btn.next{border-radius:var(--radius-sm);box-shadow:5px 5px 0 var(--os-ink)} .landing .phase-num{ border-radius:var(--radius-sm); background:var(--os-cobalt); color:#fff; border:0; box-shadow:3px 3px 0 var(--os-hard); font-style:normal; } .landing .ch-phase:nth-child(2) .phase-num{background:var(--os-crimson)} .landing .ch-phase:nth-child(3) .phase-num{background:var(--os-azure)} .landing .ch-phase:nth-child(4) .phase-num{background:var(--os-navy)} body.dark.landing .ch-phase:nth-child(4) .phase-num{background:var(--os-slate)} .landing .phase-eyebrow{color:var(--accent2)} /* Section doors: a colour-block header holding the door's icon — three across. */ .landing .fork-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:1040px} .landing .fork-card{padding-top:0;overflow:hidden} .landing .fork-card .os-art{ margin:0 -1.6rem .4rem; width:calc(100% + 3.2rem); aspect-ratio:16/9; display:flex;align-items:center;justify-content:center; border-bottom:2px solid var(--border); } .landing .fork-card:hover .os-art svg{transform:translateY(-4px) scale(1.05)} .os-art svg{width:auto;height:72%;max-width:62%;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .os-ink-navy{--os-tile:var(--os-navy)} .os-ink-cobalt{--os-tile:var(--os-cobalt)} .os-ink-azure{--os-tile:var(--os-azure)} .os-ink-sky{--os-tile:var(--os-sky)} .os-ink-ice{--os-tile:var(--os-ice)} .os-ink-slate{--os-tile:var(--os-slate)} .os-ink-crimson{--os-tile:var(--os-crimson)} .os-ink-oxblood{--os-tile:var(--os-oxblood)} .os-art,.os-mosaic > div,.os-shape-ico{background:var(--os-tile)!important} /* Features: 3 × 2. */ .landing #landing-features .feature-grid{grid-template-columns:repeat(3,1fr);max-width:1040px;margin-left:auto;margin-right:auto} /* Feature icons: small ink tiles with the feature's icon inside. */ .co-ico.os-shape-ico{ width:52px;height:52px; border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center; box-shadow:3px 3px 0 var(--os-hard); margin-bottom:.8rem; font-size:0; } .co-ico.os-shape-ico svg{width:38px;height:38px} /* ── The hero mosaic (built by shapes-fx.js) ───────────────────────────────── */ .os-mosaic{ display:grid; grid-template-columns:1.35fr .95fr 1.2fr; grid-template-rows:1fr 1fr; width:min(1040px,100%); aspect-ratio:16/9; margin:3rem auto 0; border:3px solid var(--os-hard); box-shadow:10px 10px 0 var(--os-hard); border-radius:4px; overflow:hidden; position:relative; } .os-mosaic > div{ position:relative; display:flex;align-items:center;justify-content:center; overflow:hidden; } .os-mosaic > div::after{ /* per-panel airbrush shading */ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 20% 15%,rgba(255,255,255,.2),transparent 55%), radial-gradient(120% 90% at 90% 100%,rgba(4,10,20,.25),transparent 60%); mix-blend-mode:soft-light; } .os-mosaic .m1{grid-column:1;grid-row:1} .os-mosaic .m2{grid-column:2;grid-row:1} .os-mosaic .m3{grid-column:3;grid-row:1} .os-mosaic .m4{grid-column:1 / span 2;grid-row:2} .os-mosaic .m5{grid-column:3;grid-row:2} .os-mosaic svg{width:auto;height:74%;max-width:86%;position:relative;z-index:1; animation:os-float 9s ease-in-out infinite} .os-mosaic .m4 svg{height:70%;max-width:88%} .os-mosaic .m2 svg{animation-delay:-2s} .os-mosaic .m3 svg{animation-delay:-4s} .os-mosaic .m4 svg{animation-delay:-6s} .os-mosaic .m5 svg{animation-delay:-1s} @keyframes os-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3%) rotate(-2deg)}} /* Mosaic entrance: panels wipe in, one after another. */ .os-mosaic.os-pre > div{clip-path:inset(0 100% 0 0)} .os-mosaic.os-pre > div svg{opacity:0;transform:scale(.85) rotate(-8deg)} .os-mosaic > div{transition:clip-path .9s cubic-bezier(.77,0,.18,1)} .os-mosaic > div svg{transition:opacity .8s .35s,transform 1.1s .35s cubic-bezier(.2,.8,.2,1)} .os-mosaic .m2{transition-delay:.08s}.os-mosaic .m2 svg{transition-delay:.43s} .os-mosaic .m3{transition-delay:.16s}.os-mosaic .m3 svg{transition-delay:.51s} .os-mosaic .m4{transition-delay:.24s}.os-mosaic .m4 svg{transition-delay:.59s} .os-mosaic .m5{transition-delay:.32s}.os-mosaic .m5 svg{transition-delay:.67s} /* ── Linear-style text reveal (words rise out of a blur) ───────────────────── */ html body .os-w.os-w{background:none!important;-webkit-text-fill-color:inherit} .os-wt{display:inline-block} .os-w{ display:inline-block; white-space:pre; will-change:transform,opacity,filter; } .os-reveal-pre .os-w{ opacity:0; filter:blur(10px); transform:translateY(.42em); } .os-reveal-go .os-w{ opacity:1;filter:blur(0);transform:none; transition: opacity .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms + var(--d,0ms)), filter .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms + var(--d,0ms)), transform .9s cubic-bezier(.16,1,.3,1) calc(var(--i) * 55ms + var(--d,0ms)); } /* ── Icons: every line icon becomes a two-ink ribbon ───────────────────────── */ .vi-ico svg,.lin-ico svg{stroke:url(#os-ribbon);stroke-width:1.7} body.dark .vi-ico svg,body.dark .lin-ico svg{stroke:url(#os-ribbon-dark)} .vi-ico--ok svg,.vi-ico--no svg,.vi-ico--warn svg{stroke:currentColor} /* On filled controls the ribbon would vanish into the fill — use the label colour. */ .qo-btn .vi-ico svg,.aq-btn .vi-ico svg,.sec-pill.active .vi-ico svg,.sec-pill.active .lin-ico svg, .btn-login .vi-ico svg,.back-top .vi-ico svg,.chat-send .vi-ico svg, .fc-chip.active .vi-ico svg,.guide-tab.on .vi-ico svg,.section-label .vi-ico svg, .for-cat.active .vi-ico svg,.for-chip.active .vi-ico svg,.for-btn .vi-ico svg, body.dark .qo-btn .vi-ico svg,body.dark .sec-pill.active .vi-ico svg,body.dark .sec-pill.active .lin-ico svg{stroke:currentColor} .vi-ico,.lin-ico{opacity:1} /* ── Odds & ends that hard-code the old purple/gold ────────────────────────── */ /* Q&A bubble: red→purple (shell) / gold-brown (plain pages) → the blue inks. */ #qnaFab,body:not(.lin-v2) #qnaFab{ background:linear-gradient(135deg,var(--os-cobalt),var(--os-navy))!important; border:2px solid var(--os-hard);box-shadow:3px 3px 0 var(--os-hard)!important; } body.dark #qnaFab{background:linear-gradient(135deg,var(--os-crimson),var(--os-oxblood))!important} .tut-spot{border-color:var(--accent)!important} /* Landing header: the Study Tools pill (PR #153) joined the right-hand stack, so the in-page nav needs a wider bar and a tighter rhythm to keep all three links; below 1180px the section pills (duplicates of the hero doors) step out. */ .landing header > .container.header-inner{max-width:1320px} .landing .landing-nav{gap:1.1rem;flex:none} .landing .landing-nav a{white-space:nowrap} @media (max-width:1180px){.landing .header-actions .sec-switcher{display:none}} #readingBar,body:not(.dark) #readingBar{background:linear-gradient(90deg,var(--os-sky),var(--os-azure),var(--os-cobalt),var(--os-crimson))} .fc-chip.active{background:var(--accent);color:#fff;border-color:var(--os-hard);box-shadow:2px 2px 0 var(--os-hard)} .fc-front{background:var(--os-navy);border:2px solid var(--os-hard)} .fc-back{background:color-mix(in srgb,var(--os-sky) 22%,var(--surface));border:2px solid var(--os-azure)} .quote{border-left-color:var(--os-crimson)} /* ── Splash: clinical blues, the ribbon shapes float round the mark ────────── */ #v-splash{ --vbg1:#1A3A66;--vbg2:#0F2440;--vbg3:#08121F; --vglow:rgba(141,182,226,.16); --vname:#FFFFFF;--vacc:#8DB6E2;--vrule:rgba(224,87,95,.9);--vtag:rgba(220,232,244,.7); } body:not(.dark) #v-splash{ --vbg1:#FFFFFF;--vbg2:#EEF3F9;--vbg3:#D6E3F1; --vglow:rgba(30,79,143,.12); --vname:#0E1E33;--vacc:#B3323A;--vrule:rgba(142,31,42,.8);--vtag:rgba(14,30,51,.6); } #v-splash{background:radial-gradient(130% 100% at 50% 0%,var(--vbg1) 0%,var(--vbg2) 55%,var(--vbg3) 100%)!important} #v-splash .v-forest,#v-splash .v-hosp{display:none} /* ══ Semicircle sidebar (desktops with a pointer) ═════════════════════════════ Replaces gold-blue's 56px icon rail. At rest only a small frosted half-disc peeks from the middle of the left edge; hovering it — or anywhere along the left edge (shapes-fx.js adds a hot strip) — blooms it into a full semicircle that condenses out of a fog: a feathered radial mask whose radius (--os-fog) animates, over a blurred backdrop, while the rows sharpen in. clip-path tracks the same circle, so a closed sidebar never eats clicks meant for the page. Gated on html.os-semi, which only the script sets — no script, and the old rail is untouched. */ @property --os-fog{syntax:'';inherits:false;initial-value:40px} @media (hover:hover) and (min-width:901px){ html.os-semi{--os-semi-r:min(46vh,400px)} html.os-semi .page-wrapper{margin-left:0} html.os-semi .sidebar.sidebar{ --os-fog:40px; top:calc(50vh - var(--os-semi-r));bottom:auto;left:0; width:var(--os-semi-r)!important;height:calc(var(--os-semi-r) * 2); padding:calc(var(--os-semi-r) * .22) 0; z-index:210; overflow-x:hidden;overflow-y:auto;scrollbar-width:none; border:0;border-radius:0;box-shadow:none!important; --os-semi-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 10.5 8 5 13.5' fill='none' stroke='%231E4F8F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --os-semi-body:radial-gradient(circle at 0 50%, color-mix(in srgb,var(--os-sky) 30%,var(--surface)) 0, color-mix(in srgb,var(--surface) 90%,transparent) 40px, color-mix(in srgb,var(--surface) 78%,transparent) 62%, color-mix(in srgb,var(--os-sky) 22%,transparent) 100%); /* layers: the peek's chevron · a hairline arc that grows with the fog · the frosted body. Backgrounds stay put while the rows scroll. */ background: var(--os-semi-chev) 9px 50% / 16px 16px no-repeat, radial-gradient(circle at 0 50%,transparent calc(var(--os-fog) * .86), color-mix(in srgb,var(--accent) 55%,transparent) calc(var(--os-fog) * .86 + 1px), transparent calc(var(--os-fog) * .86 + 3px)), var(--os-semi-body); -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25); -webkit-mask-image:radial-gradient(circle at 0 50%,#000 calc(var(--os-fog) * .74),rgba(0,0,0,.6) calc(var(--os-fog) * .9),transparent var(--os-fog)); mask-image:radial-gradient(circle at 0 50%,#000 calc(var(--os-fog) * .74),rgba(0,0,0,.6) calc(var(--os-fog) * .9),transparent var(--os-fog)); clip-path:circle(calc(var(--os-fog) + 2px) at 0 50%); transition:--os-fog .75s cubic-bezier(.2,.8,.2,1),transform .3s; } html.os-semi .sidebar.sidebar::-webkit-scrollbar{display:none} html.os-semi body.dark .sidebar.sidebar{ --os-semi-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 10.5 8 5 13.5' fill='none' stroke='%238DB6E2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --os-semi-body:radial-gradient(circle at 0 50%, color-mix(in srgb,var(--os-cobalt) 55%,var(--surface)) 0, color-mix(in srgb,var(--surface) 88%,transparent) 40px, color-mix(in srgb,var(--surface) 72%,transparent) 62%, color-mix(in srgb,var(--os-cobalt) 34%,transparent) 100%); } html.os-semi .sidebar.sidebar.os-open, html.os-semi .sidebar.sidebar:focus-within{--os-fog:var(--os-semi-r);--os-semi-chev:none} /* Rows: hidden in the fog at rest, condensing in once it opens. */ html.os-semi .sidebar.sidebar > *{ opacity:0;filter:blur(9px); transition:opacity .3s ease,filter .4s ease; } html.os-semi .sidebar.os-open > *, html.os-semi .sidebar:focus-within > *{ opacity:1;filter:blur(0); transition:opacity .5s ease .16s,filter .6s cubic-bezier(.2,.8,.2,1) .16s; } /* The rail's rest-state hiding no longer applies — the fog does that now. */ html.os-semi .sidebar .logo-text, html.os-semi .sidebar .part-name, html.os-semi .sidebar .part-caret{display:block} html.os-semi .sidebar .sidebar-group.part:not(.collapsed) > .part-body{display:block} html.os-semi .sidebar .sidebar-logo{justify-content:flex-start;padding:.35rem .9rem .6rem;border-bottom:0} html.os-semi .sidebar .part-toggle{justify-content:flex-start;padding:.42rem .6rem} html.os-semi .sidebar .part-icon{width:1.25rem;font-size:1rem} /* Rows bow along the arc: shapes-fx.js sets each row's --os-arc-x/-o. */ html.os-semi .sidebar .sidebar-logo, html.os-semi .sidebar .part-toggle, html.os-semi .sidebar .sidebar-link, html.os-semi .sidebar .sidebar-label{ width:min(232px,64%); transform:translateX(var(--os-arc-x,0px)); opacity:var(--os-arc-o,1); transition:transform .14s linear,opacity .14s linear,background .14s,color .14s; } html.os-semi .sidebar .sidebar-link:hover{transform:translateX(calc(var(--os-arc-x,0px) + 4px))} /* The hot edge: a full-height strip that opens the semicircle from anywhere along the left edge, not just the peek. */ html.os-semi .os-semi-edge{position:fixed;left:0;top:0;width:10px;height:100vh;z-index:205} } html:not(.os-semi) .os-semi-edge{display:none} @media (prefers-reduced-motion:reduce){ html.os-semi .sidebar.sidebar,html.os-semi .sidebar.sidebar > *{transition:none!important;filter:none} } /* ══ Phones & tablets ═════════════════════════════════════════════════════════ */ @media (max-width:900px){ .landing #landing-features .feature-grid{grid-template-columns:repeat(2,1fr)} .os-mosaic{box-shadow:7px 7px 0 var(--os-hard)} } @media (max-width:640px){ /* mosaic stacks 2 × 3 with the wide pulse panel along the bottom */ .os-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);aspect-ratio:4/5; margin-top:2.2rem;box-shadow:5px 5px 0 var(--os-hard);border-width:2px} .os-mosaic .m1{grid-column:1;grid-row:1} .os-mosaic .m2{grid-column:2;grid-row:1} .os-mosaic .m3{grid-column:1;grid-row:2} .os-mosaic .m5{grid-column:2;grid-row:2} .os-mosaic .m4{grid-column:1 / span 2;grid-row:3} .os-mosaic svg{height:66%} /* hero: tighter, full-width stacked CTAs, lighter shadows */ .landing .hero{padding:2.6rem 0 2.2rem} .landing .hero-badge{font-size:.66rem;letter-spacing:.08em;padding:.4rem .75rem;line-height:1.5} .landing .hero-actions{flex-direction:column;align-items:stretch;gap:.8rem} .landing .hero-actions .qo-btn.next{width:100%;justify-content:center;padding:.8rem 1rem;font-size:.9rem;box-shadow:3px 3px 0 var(--os-hard)} .landing .feature-card,.landing .fork-card,.landing .ch-card{box-shadow:3px 3px 0 var(--border2)} .landing .fork-card .os-art{margin:0 -1.2rem .4rem;width:calc(100% + 2.4rem)} .landing #landing-features .feature-grid{grid-template-columns:1fr} .landing #landing-cta .qo-btn.next{width:100%;max-width:320px;justify-content:center} /* grain a touch finer on small, dense screens */ body::after{background-size:160px 160px} /* Landing header: vitalite-skin clips the account pill to a 38px icon on phones, but the landing's pill is text ("Log In") — let it show, and tighten the row so logo · tutorial · EN · theme · Log In · tools fit. */ .landing .header-actions{gap:8px} .landing .header-actions .btn-icon{width:32px;height:32px;font-size:.85rem} body.lin-v2.landing .header-actions .btn-login,.landing .header-actions .btn-login{ max-width:none;padding:.35rem .55rem;font-size:.74rem;white-space:nowrap} /* Pages without the shell top bar (Social, Login): the header row wraps instead of pushing the page wider than the phone. */ body:not(.lin-v2) .header-inner{flex-wrap:wrap;row-gap:.5rem} body:not(.lin-v2) .header-actions{flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%;margin-left:auto} body:not(.lin-v2) .header-actions .btn-login .bl-name{max-width:72px;overflow:hidden;text-overflow:ellipsis} body:not(.lin-v2) .sec-switcher{flex-wrap:wrap;max-width:100%} /* gold-blue's `.page-wrapper{margin-left:224px}` loads after the pages' own phone rule, so shell-less pages (Social) kept a gutter for a sidebar that is an off-canvas drawer on phones. */ body:not(.lin-v2) .page-wrapper{margin-left:0} /* …and the drawer's fixed ☰ button sits over the wordmark — clear it. */ body:not(.lin-v2) header .header-inner{padding-left:56px} /* The drawer takes the semicircle's frosted look (a rounded right edge). */ .sidebar{ border-radius:0 28px 28px 0;border-right:0; background:color-mix(in srgb,var(--surface) 86%,transparent); -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2); } /* Long words in big headings and table cells may break rather than overflow the phone. */ h1,h2,td,th{overflow-wrap:anywhere} .progress-item label{min-width:84px} } @media (max-width:360px){ .landing .header-inner > div:first-child .logo{display:none} } /* touch devices: no hover lift sticking after a tap */ @media (hover:none){ .landing .feature-card:hover,.landing .fork-card:hover,.landing .ch-card:hover, .qo-btn.next:hover,.aq-btn.primary:hover{transform:none} } @media (prefers-reduced-motion:reduce){ .os-reveal-pre .os-w{opacity:1;filter:none;transform:none} .os-mosaic.os-pre > div{clip-path:none} .os-mosaic.os-pre > div svg{opacity:1;transform:none} .os-mosaic svg{animation:none} }