/* ========================================================================= StackSignal — design system Single stylesheet, theme-switchable via [data-theme] on . ========================================================================= */ :root{ --bg:#07080d; --bg-soft:#0d0f18; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075); --line:rgba(255,255,255,.10); --text:#eef1f8; --muted:#a2aac0; --muted-2:#727b93; --brand:#6ee7ff; --brand-2:#7c8cff; --accent:#6ee7ff; --glow:rgba(110,231,255,.35); --radius:18px; --radius-sm:12px; --maxw:1180px; --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --ease:cubic-bezier(.22,.61,.36,1); --shadow:0 24px 60px -24px rgba(0,0,0,.75); } /* --- Category themes ---------------------------------------------------- */ [data-theme="tech"]{ --accent:#3ddc97; --brand:#3ddc97; --brand-2:#2dd4bf; --glow:rgba(61,220,151,.32); --bg:#050a09; --bg-soft:#081210; } [data-theme="ai"]{ --accent:#c084fc; --brand:#c084fc; --brand-2:#f472b6; --glow:rgba(192,132,252,.34); --bg:#0a0710; --bg-soft:#130d1c; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:clamp(15.5px,.34vw + 14.8px,17px); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body::before{ /* ambient theme wash */ content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(60rem 40rem at 78% -10%, var(--glow), transparent 60%), radial-gradient(50rem 35rem at 5% 8%, rgba(124,140,255,.18), transparent 62%), linear-gradient(180deg,var(--bg-soft),var(--bg) 55%); } img,svg,canvas{ max-width:100%; display:block; } img{ height:auto; } a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; text-underline-offset:3px; } h1,h2,h3,h4{ line-height:1.18; letter-spacing:-.02em; margin:0 0 .6em; font-weight:700; } h1{ font-size:clamp(2.1rem,5.2vw,3.9rem); } h2{ font-size:clamp(1.45rem,2.6vw,2.1rem); } h3{ font-size:clamp(1.12rem,1.6vw,1.35rem); } p{ margin:0 0 1.05em; color:#dbe1ee; } code{ font-family:var(--mono); font-size:.88em; background:var(--surface-2); padding:.15em .42em; border-radius:6px; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; } .skip{ position:absolute; left:-999px; top:0; background:var(--accent); color:#05070c; padding:.7rem 1rem; z-index:200; border-radius:0 0 10px 0; font-weight:700; } .skip:focus{ left:0; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); } .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* --- Header / nav ------------------------------------------------------- */ .hdr{ position:sticky; top:0; z-index:60; backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 72%, transparent); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; } .hdr.is-stuck{ border-bottom-color:var(--line); background:color-mix(in srgb,var(--bg) 90%, transparent); } .hdr__in{ display:flex; align-items:center; gap:1rem; min-height:68px; } .logo{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:-.03em; font-size:1.12rem; color:var(--text); text-decoration:none; background:none; border:0; padding:0; cursor:pointer; } .logo:hover{ text-decoration:none; } .logo__mark{ position:relative; width:34px; height:34px; perspective:420px; flex:none; } .logo__cube{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(-22deg) rotateY(28deg); transition:transform .7s var(--ease); } .logo:hover .logo__cube{ transform:rotateX(-22deg) rotateY(128deg) scale(1.06); } .logo__cube.spin{ animation:logospin 1.1s var(--ease); } @keyframes logospin{ to{ transform:rotateX(-22deg) rotateY(748deg); } } .logo__face{ position:absolute; inset:0; border:1.6px solid var(--accent); border-radius:6px; background:linear-gradient(140deg,var(--glow),transparent); box-shadow:0 0 18px -6px var(--glow); backface-visibility:hidden; } .logo__face:nth-child(1){ transform:translateZ(17px); } /* front */ .logo__face:nth-child(2){ transform:rotateY(90deg) translateZ(17px); opacity:.62; } /* side */ .logo__face:nth-child(3){ transform:rotateX(90deg) translateZ(17px); opacity:.42; } /* top */ .logo__txt small{ display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:600; } .nav{ margin-left:auto; display:flex; align-items:center; gap:.35rem; } .nav a{ color:var(--muted); padding:.5rem .8rem; border-radius:99px; font-size:.94rem; font-weight:600; transition:color .2s,background .2s; } .nav a:hover,.nav a[aria-current="page"]{ color:var(--text); background:var(--surface-2); text-decoration:none; } .nav a[aria-current="page"]{ box-shadow:inset 0 0 0 1px var(--line); } .burger{ display:none; margin-left:auto; background:var(--surface); border:1px solid var(--line); color:var(--text); width:42px; height:42px; border-radius:12px; cursor:pointer; } .burger span{ display:block; width:18px; height:2px; background:currentColor; margin:3.5px auto; border-radius:2px; transition:.3s var(--ease); } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); } /* --- Hero -------------------------------------------------------------- */ .hero{ position:relative; padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem); overflow:hidden; } .hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.95; } @media (max-width:820px){ .hero__canvas{ opacity:.5; } } .hero__in{ position:relative; display:grid; gap:1.4rem; justify-items:start; } .hero__in > *{ max-width:44rem; width:100%; } .hero__in .cta-row,.hero__in .hero__stats{ width:auto; } .kicker{ display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); background:var(--surface); padding:.42rem .85rem; border-radius:99px; width:fit-content; } .kicker::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px 2px var(--glow); animation:pulse 2.4s infinite; } @keyframes pulse{ 50%{ opacity:.35; transform:scale(.8); } } .hero h1 .grad{ background:linear-gradient(100deg,var(--brand),var(--brand-2) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; } .lede{ font-size:clamp(1.02rem,1.5vw,1.22rem); color:var(--muted); max-width:38rem; } .hero__stats{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; margin-top:.4rem; padding:0; list-style:none; } .hero__stats b{ display:block; font-size:1.35rem; letter-spacing:-.03em; color:var(--text); } .hero__stats span{ font-size:.78rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.1em; } .cta-row{ display:flex; flex-wrap:wrap; gap:.7rem; } .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.78rem 1.3rem; border-radius:99px; font-weight:700; font-size:.95rem; border:1px solid var(--line); background:var(--surface-2); color:var(--text); cursor:pointer; transition:transform .2s var(--ease), box-shadow .25s, background .25s; } .btn:hover{ transform:translateY(-2px); text-decoration:none; box-shadow:0 12px 30px -12px var(--glow); } .btn--primary{ background:linear-gradient(100deg,var(--brand),var(--brand-2)); color:#05070c; border-color:transparent; } /* --- Search ------------------------------------------------------------ */ .search{ position:relative; max-width:38rem; margin-top:.4rem; } .search__box{ display:flex; align-items:center; gap:.65rem; background:rgba(8,10,18,.72); border:1px solid var(--line); border-radius:16px; padding:.72rem 1rem; transition:border-color .25s, box-shadow .25s; } .search__box:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%, transparent); } .search__box svg{ flex:none; color:var(--muted); } .search input{ flex:1; background:none; border:0; color:var(--text); font:inherit; font-size:1rem; min-width:0; } .search input::placeholder{ color:var(--muted-2); } .search kbd{ font-family:var(--mono); font-size:.7rem; color:var(--muted-2); border:1px solid var(--line); border-radius:6px; padding:.15rem .4rem; } .search__results{ position:absolute; top:calc(100% + .55rem); left:0; right:0; z-index:50; background:#0b0e17; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:.4rem; margin:0; list-style:none; max-height:22rem; overflow:auto; display:none; } .search__results.open{ display:block; } .search__results li a{ display:block; padding:.6rem .75rem; border-radius:10px; color:var(--text); } .search__results li a:hover,.search__results li a:focus,.search__results li.is-active a{ background:var(--surface-2); text-decoration:none; } .search__results strong{ display:block; font-size:.95rem; } .search__results em{ color:var(--muted-2); font-style:normal; font-size:.79rem; letter-spacing:.06em; text-transform:uppercase; } .search__results mark{ background:color-mix(in srgb,var(--accent) 28%, transparent); color:var(--text); border-radius:3px; } .search__empty{ padding:.9rem .8rem; color:var(--muted); font-size:.92rem; } /* --- Sections & cards --------------------------------------------------- */ section{ padding:clamp(2.4rem,5vw,4.2rem) 0; } .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; } .sec-head p{ margin:0; color:var(--muted); max-width:34rem; } .sec-head h2{ margin:0 0 .3rem; } .grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr)); } .card{ position:relative; display:flex; flex-direction:column; gap:.6rem; padding:1.25rem; border-radius:var(--radius); background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--line); transform-style:preserve-3d; transition:transform .35s var(--ease), border-color .3s, box-shadow .3s; } .card:hover{ border-color:color-mix(in srgb,var(--accent) 45%, var(--line)); box-shadow:0 26px 50px -30px var(--glow); } .card h3{ margin:0; font-size:1.06rem; } .card h3 a{ color:var(--text); } .card p{ margin:0; font-size:.92rem; color:var(--muted); } .card__meta{ display:flex; align-items:center; gap:.55rem; font-size:.74rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.09em; margin-top:auto; padding-top:.4rem; } .badge{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:.25rem .55rem; border-radius:99px; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%, transparent); border:1px solid color-mix(in srgb,var(--accent) 32%, transparent); } .badge--tech{ --accent:#3ddc97; } .badge--ai{ --accent:#c084fc; } .tags{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:0; } .tags li{ font-size:.72rem; color:var(--muted); border:1px solid var(--line); padding:.2rem .55rem; border-radius:99px; } /* Category split panels (home) */ .split{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); } .panel{ position:relative; overflow:hidden; padding:clamp(1.4rem,3vw,2.2rem); border-radius:24px; border:1px solid var(--line); isolation:isolate; transition:transform .4s var(--ease), box-shadow .4s; } .panel:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px var(--glow); } .panel--tech{ --accent:#3ddc97; --glow:rgba(61,220,151,.3); background:linear-gradient(150deg,rgba(61,220,151,.16),rgba(6,15,13,.7)); } .panel--ai{ --accent:#c084fc; --glow:rgba(192,132,252,.3); background:linear-gradient(150deg,rgba(192,132,252,.18),rgba(14,8,20,.7)); } .panel__orb{ position:absolute; width:16rem; height:16rem; right:-4rem; top:-4rem; border-radius:50%; z-index:-1; background:radial-gradient(circle at 35% 35%, var(--accent), transparent 62%); filter:blur(6px); opacity:.5; animation:float 9s ease-in-out infinite; } @keyframes float{ 50%{ transform:translate3d(-14px,18px,0) scale(1.07); } } .panel ul{ margin:.6rem 0 1.2rem; padding-left:1.1rem; color:var(--muted); font-size:.93rem; } /* 3D marquee-ish orbit visual */ .orbit{ position:relative; height:clamp(180px,26vw,260px); perspective:900px; margin-top:1rem; } .orbit__ring{ position:absolute; inset:0; margin:auto; width:min(88%,22rem); aspect-ratio:1; border:1px solid var(--line); border-radius:50%; transform-style:preserve-3d; transform:rotateX(72deg); animation:spin 22s linear infinite; } .orbit__ring:nth-child(2){ width:min(64%,16rem); animation-duration:15s; animation-direction:reverse; border-color:color-mix(in srgb,var(--accent) 40%, transparent); } .orbit__ring:nth-child(3){ width:min(40%,10rem); animation-duration:10s; } @keyframes spin{ to{ transform:rotateX(72deg) rotateZ(360deg); } } .orbit__dot{ position:absolute; top:-5px; left:calc(50% - 5px); width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px 3px var(--glow); } /* --- Article ----------------------------------------------------------- */ .progress{ position:fixed; top:0; left:0 ; height:3px; width:0; z-index:80; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .1s linear; } .crumbs{ font-size:.82rem; color:var(--muted-2); padding-top:1.4rem; } .crumbs a{ color:var(--muted); } .article{ max-width:44rem; padding-top:1rem; } .article__meta{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; font-size:.83rem; color:var(--muted-2); margin-bottom:1.4rem; } .article__lede{ font-size:1.14rem; color:var(--muted); border-left:2px solid var(--accent); padding-left:1rem; margin:0 0 1.8rem; } .prose > p{position:relative;margin:1.15rem 0;padding:1rem 1.1rem 1.05rem;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,white 6%),var(--surface));box-shadow:0 8px 24px rgba(0,0,0,.06);line-height:1.82;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.prose > p::before{content:"";position:absolute;left:-1px;top:1rem;width:3px;height:1.35rem;border-radius:99px;background:var(--accent);opacity:.9}.prose > p:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 28%,var(--line));box-shadow:0 12px 28px rgba(0,0,0,.09)} .prose h2{ margin-top:2.2rem; scroll-margin-top:5rem; } .prose h3{ margin-top:1.6rem; } .prose ul,.prose ol{ padding-left:1.25rem; color:#dbe1ee; } .prose li{ margin:.35rem 0; } .faq details{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:.85rem 1rem; margin-bottom:.6rem; background:var(--surface); } .faq summary{ cursor:pointer; font-weight:700; } .faq p{ margin:.6rem 0 0; color:var(--muted); } /* --- Footer & scroll-top ------------------------------------------------ */ .foot{ border-top:1px solid var(--line); margin-top:2rem; padding:2.5rem 0 3.5rem; color:var(--muted-2); font-size:.9rem; } .foot__grid{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); } .foot h4{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem; } .foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; } .foot a{ color:var(--muted); } .to-top{ position:fixed; right:clamp(.9rem,3vw,1.6rem); bottom:clamp(.9rem,3vw,1.6rem); z-index:70; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:linear-gradient(140deg,var(--brand),var(--brand-2)); color:#05070c; border:0; box-shadow:0 14px 34px -12px var(--glow); opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .to-top.show{ opacity:1; visibility:visible; transform:none; } .to-top:hover{ transform:translateY(-3px) scale(1.05); } /* --- Reveal on scroll --------------------------------------------------- */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* --- Responsive --------------------------------------------------------- */ @media (max-width:820px){ .burger{ display:block; } .nav{ position:fixed; inset:68px 0 auto; flex-direction:column; align-items:stretch; gap:.2rem; padding:1rem clamp(1rem,4vw,2rem) 1.4rem; background:#080b12; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .35s var(--ease); margin:0; } .nav.open{ transform:none; } .nav a{ padding:.8rem 1rem; font-size:1rem; } .hero{ padding-top:2.2rem; } .hero__stats{ gap:.6rem 1.4rem; } } @media (max-width:420px){ .logo__txt small{ display:none; } .to-top{ width:44px; height:44px; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{ opacity:1; transform:none; } } @media print{ .hdr,.to-top,.hero__canvas,.search{ display:none !important; } body{ background:#fff; color:#000; } } /* ========================================================================= ARTICLE READING EXPERIENCE — layout, TOC, callouts, rich prose ========================================================================= */ /* --- Two-column article layout with sticky table of contents ------------ */ .article-grid{ display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; } .article-grid .article{ max-width:46rem; } .toc{ position:sticky; top:5.5rem; font-size:.86rem; border-left:1px solid var(--line); padding-left:1rem; max-height:calc(100vh - 8rem); overflow-y:auto; } .toc__title{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 .7rem; font-weight:800; } .toc ol{ list-style:none; margin:0; padding:0; } .toc li{ margin:0; } .toc a{ display:block; padding:.34rem 0; color:var(--muted); border-left:2px solid transparent; margin-left:-1rem; padding-left:1rem; transition:color .18s var(--ease), border-color .18s var(--ease); line-height:1.4; } .toc a:hover{ color:var(--text); text-decoration:none; } .toc a.is-active{ color:var(--accent); border-left-color:var(--accent); font-weight:600; } .toc__progress{ height:3px; border-radius:3px; background:var(--surface-2); margin-bottom:.9rem; overflow:hidden; } .toc__progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .12s linear; } @media (max-width:960px){ .article-grid{ grid-template-columns:1fr; } .toc{ position:static; max-height:none; border-left:0; border:1px solid var(--line); border-radius:var(--radius-sm); padding:1rem 1.1rem; background:var(--surface); order:-1; } .toc a{ margin-left:0; padding-left:.6rem; } .toc__progress{ display:none; } } /* --- Prose rhythm ------------------------------------------------------- */ .prose{ counter-reset:ss-h2; } .prose p{ margin:0 0 1.15rem; } .prose > h2{ position:relative; padding-top:1.6rem; margin-top:2.6rem; font-size:clamp(1.35rem,2.2vw,1.7rem); border-top:1px solid var(--line); } .prose > h2::after{ content:''; position:absolute; top:-1px; left:0; width:3.5rem; height:2px; background:linear-gradient(90deg,var(--brand),transparent); } .prose h3{ font-size:1.08rem; color:var(--text); margin-top:1.8rem; } .prose h3::before{ content:''; display:inline-block; width:.5rem; height:.5rem; border-radius:2px; background:var(--accent); margin-right:.55rem; vertical-align:middle; transform:translateY(-1px); } .prose strong{ color:#fff; } .prose a{ text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); text-underline-offset:3px; } /* --- Lists with custom markers ------------------------------------------ */ .prose ul{ list-style:none; padding-left:0; } .prose ul li{ position:relative; padding-left:1.5rem; margin:.5rem 0; } .prose ul li::before{ content:''; position:absolute; left:.25rem; top:.68em; width:.38rem; height:.38rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); } .prose ol{ list-style:none; padding-left:0; counter-reset:ss-ol; } .prose ol li{ position:relative; padding-left:2.3rem; margin:.7rem 0; counter-increment:ss-ol; } .prose ol li::before{ content:counter(ss-ol); position:absolute; left:0; top:.05em; width:1.55rem; height:1.55rem; border-radius:50%; display:grid; place-items:center; font-size:.76rem; font-weight:800; color:var(--bg); background:linear-gradient(140deg,var(--brand),var(--brand-2)); } /* --- Callout boxes ------------------------------------------------------ */ .callout{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface); border-radius:var(--radius-sm); padding:1rem 1.15rem; margin:1.6rem 0; } .callout__icon{ width:1.7rem; height:1.7rem; border-radius:8px; display:grid; place-items:center; font-size:.9rem; font-weight:800; background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); } .callout p{ margin:0; color:var(--muted); } .callout p + p{ margin-top:.6rem; } .callout strong{ color:var(--text); } .callout--warn{ border-left-color:#f9a03f; } .callout--warn .callout__icon{ background:rgba(249,160,63,.16); color:#f9a03f; } .callout--tip{ border-left-color:#3ddc97; } .callout--tip .callout__icon{ background:rgba(61,220,151,.16); color:#3ddc97; } .callout--stop{ border-left-color:#ff6b6b; } .callout--stop .callout__icon{ background:rgba(255,107,107,.16); color:#ff6b6b; } /* --- Key takeaways card ------------------------------------------------- */ .takeaways{ border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.35rem; margin:0 0 2rem; background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 9%,transparent),var(--surface)); position:relative; overflow:hidden; } .takeaways::before{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg,var(--brand),transparent); } .takeaways h4{ margin:0 0 .7rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .takeaways ul{ margin:0; } .takeaways li{ color:var(--muted); } /* --- Stat strip --------------------------------------------------------- */ .stat-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.8rem; margin:1.8rem 0; } .stat-strip div{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:.9rem 1rem; } .stat-strip b{ display:block; font-size:1.35rem; letter-spacing:-.02em; background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat-strip span{ font-size:.78rem; color:var(--muted-2); } /* --- Pull quote --------------------------------------------------------- */ .prose blockquote{ margin:1.9rem 0; padding:.2rem 0 .2rem 1.3rem; border-left:3px solid var(--accent); font-size:1.12rem; line-height:1.55; color:var(--text); font-weight:600; letter-spacing:-.01em; } .prose blockquote p{ margin:0; } /* --- Tables ------------------------------------------------------------- */ .table-wrap{ overflow-x:auto; margin:1.6rem 0; border:1px solid var(--line); border-radius:var(--radius-sm); } .prose table{ border-collapse:collapse; width:100%; font-size:.9rem; min-width:26rem; } .prose th,.prose td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); } .prose th{ background:var(--surface-2); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); } .prose tr:last-child td{ border-bottom:0; } /* --- Divider ------------------------------------------------------------ */ .prose hr{ border:0; height:1px; background:linear-gradient(90deg,var(--line),transparent); margin:2.4rem 0; } /* --- Reveal on scroll for prose blocks ---------------------------------- */ /* Hidden state is applied by JS only, so content stays visible without JS. */ .reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* ========================================================================= PLATFORM UI — learning-path, topic and practice surfaces ========================================================================= */ .cmd-btn{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:10px;padding:.42rem .58rem;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;margin-left:.25rem}.cmd-btn span{opacity:.7}.cmd-btn:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--surface-2)} .eyebrow{display:block;color:var(--accent);font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.55rem} .hero--compact{min-height:44vh}.hero--platform{min-height:58vh}.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem} .path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.path-card{padding:1.2rem;border:1px solid var(--line);background:linear-gradient(150deg,var(--surface-2),var(--surface));border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}.path-card::after{content:'';position:absolute;inset:auto -20% -45% auto;width:13rem;height:13rem;background:radial-gradient(circle,var(--glow),transparent 70%);pointer-events:none}.path-card--2{transform:translateY(1.25rem)}.path-card__top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:1rem}.path-num{font:800 1.35rem/1 var(--mono);color:var(--accent)}.path-time{margin-left:auto;color:var(--muted-2);font-size:.72rem}.chip-row{display:flex;flex-wrap:wrap;gap:.35rem;margin:.9rem 0}.chip-row span{font-size:.7rem;padding:.28rem .48rem;border:1px solid var(--line);border-radius:999px;color:var(--muted)}.path-steps{list-style:none;padding:0;margin:1rem 0 1.1rem;display:grid;gap:.55rem}.path-steps li{display:grid;grid-template-columns:1.5rem 1fr;gap:.55rem;align-items:start}.path-steps li>span{width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);font:800 .72rem var(--mono)}.path-steps a{color:var(--text);line-height:1.4}.path-steps a:hover{color:var(--accent);text-decoration:none} .platform-band{border-block:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent);padding:4rem 0;margin:2rem 0}.platform-band__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:center}.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.steps-row div,.loop-card,.feature-links a{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:.95rem}.steps-row b{display:block;font-size:.9rem}.steps-row span{display:block;color:var(--muted-2);font-size:.74rem;margin-top:.25rem} .feature-links{display:grid;gap:.7rem}.feature-links a{color:var(--text);display:grid;gap:.2rem;transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}.feature-links a:hover{transform:translateX(4px);text-decoration:none;border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--surface-2)}.feature-links span{color:var(--muted);font-size:.78rem}.loop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.loop-card{min-height:9rem}.loop-card b{font:800 .75rem var(--mono);color:var(--accent)}.loop-card h3{margin:.7rem 0 .35rem}.loop-card p{font-size:.82rem;color:var(--muted)} .topics-wrap{padding-block:2rem 4rem}.topic-group{padding-block:1rem 2.2rem}.topic-group__head{margin-bottom:1rem}.topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.topic-card{padding:1rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);min-height:13rem}.topic-card__icon{width:2rem;height:2rem;border-radius:9px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#05070c;font-weight:900;margin-bottom:.8rem}.topic-card h3{margin-bottom:.25rem}.topic-card>span{color:var(--muted-2);font-size:.74rem}.topic-card>div:last-child{display:grid;gap:.45rem;margin-top:.8rem}.topic-card a{color:var(--muted);font-size:.78rem;line-height:1.4}.topic-card a:hover{color:var(--text);text-decoration:none} .two-up{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}.system-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem}.system-flow span{padding:.65rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:700}.system-flow i{font-style:normal;color:var(--accent)} .article-path{margin:1rem 0;padding:.65rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.82rem;color:var(--muted)}.article-path strong{color:var(--text)}.save-btn{margin-left:auto;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;padding:.35rem .55rem;font:inherit;font-size:.75rem;cursor:pointer}.save-btn.is-saved{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}.save-btn:hover{color:var(--text)} .cmd-palette[hidden]{display:none}.cmd-palette{position:fixed;inset:0;z-index:120}.cmd-palette__backdrop{position:absolute;inset:0;background:rgba(1,4,10,.72);backdrop-filter:blur(8px)}.cmd-palette__dialog{position:relative;width:min(680px,calc(100% - 2rem));margin:12vh auto 0;border:1px solid var(--line);border-radius:18px;background:#0b0e16;box-shadow:0 30px 100px rgba(0,0,0,.55);overflow:hidden}.cmd-palette__head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .85rem;border-bottom:1px solid var(--line)}.cmd-palette__head b{display:block}.cmd-palette__head span{display:block;color:var(--muted-2);font-size:.74rem;margin-top:.2rem}.cmd-palette__head button{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:.28rem .45rem;cursor:pointer}.cmd-palette__search{display:flex;gap:.6rem;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--line)}.cmd-palette__search span{font:800 .7rem var(--mono);color:var(--muted-2)}.cmd-palette__search input{flex:1;background:transparent;border:0;color:var(--text);font:inherit;outline:0}.cmd-palette__list{max-height:54vh;overflow:auto;padding:.5rem}.cmd-item{display:grid;grid-template-columns:2rem 1fr auto;gap:.65rem;align-items:center;padding:.7rem .75rem;border-radius:10px;color:var(--text)}.cmd-item:hover,.cmd-item.is-active{background:var(--surface-2);text-decoration:none}.cmd-item__icon{width:2rem;height:2rem;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:800}.cmd-item__label{font-size:.9rem}.cmd-item__meta{font-size:.7rem;color:var(--muted-2)} @media (max-width:980px){.path-grid,.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.path-card--2{transform:none}.loop-grid{grid-template-columns:repeat(2,1fr)}.steps-row{grid-template-columns:repeat(2,1fr)}} @media (max-width:760px){.platform-band__grid,.two-up{grid-template-columns:1fr}.path-grid,.topic-grid{grid-template-columns:1fr}.hero--compact{min-height:50vh}.cmd-btn{display:none}.article__meta{align-items:flex-start;flex-wrap:wrap}}