Spaces:
Sleeping
Sleeping
| /* ============================================================================ | |
| LM Playground — shared platform shell (nav bar, hub, theme tokens) | |
| Loaded by every page via <link rel="stylesheet" href="/platform/platform.css"> | |
| All selectors are scoped under .plat- to avoid colliding with chapter CSS. | |
| ========================================================================== */ | |
| :root{ | |
| --plat-bg:#0f1117; --plat-panel:#181b24; --plat-panel2:#1f2330; | |
| --plat-border:#2a2f3d; --plat-text:#e6e8ee; --plat-muted:#9aa3b2; | |
| --plat-accent:#7c8cff; --plat-accent2:#5be0c0; | |
| --plat-good:#5be08a; --plat-warn:#ffc06b; | |
| --plat-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; | |
| --plat-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; | |
| --plat-nav-h:54px; /* approximate nav height; used for scroll-padding */ | |
| } | |
| /* Anchor links land below the sticky nav, not hidden under it */ | |
| html { scroll-padding-top:calc(var(--plat-nav-h) + 12px) } | |
| /* ---------------------------------------------------------------- top nav -- */ | |
| .plat-nav{position:sticky;top:0;z-index:1000; | |
| background:rgba(15,17,23,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); | |
| border-bottom:1px solid var(--plat-border);font-family:var(--plat-sans); | |
| /* Break out of any body padding a chapter page may set, so the bar always spans | |
| full viewport width. Formula: margin-left = -(body-padding-left); | |
| width = 100vw regardless of parent width. When body has no padding the | |
| calc evaluates to 0 and the rule is a no-op. */ | |
| width:100vw; | |
| margin-left:calc(-1 * ((100vw - 100%) / 2));} | |
| .plat-nav__inner{max-width:1180px;margin:0 auto;display:flex;align-items:center; | |
| gap:14px;padding:9px 20px} | |
| .plat-brand{display:flex;align-items:center;gap:8px;color:var(--plat-text); | |
| text-decoration:none;font-weight:700;font-size:14px;letter-spacing:-.2px;white-space:nowrap} | |
| .plat-brand .dot{width:9px;height:9px;border-radius:50%; | |
| background:linear-gradient(135deg,var(--plat-accent),var(--plat-accent2))} | |
| .plat-ctx{color:var(--plat-muted);font-size:12.5px;white-space:nowrap; | |
| border-left:1px solid var(--plat-border);padding-left:14px} | |
| .plat-ctx b{color:var(--plat-text);font-weight:600} | |
| .plat-spacer{margin-left:auto} | |
| .plat-navlinks{display:flex;align-items:center;gap:6px} | |
| .plat-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none; | |
| color:var(--plat-muted);font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px; | |
| border:1px solid transparent;background:transparent;cursor:pointer;font-family:inherit; | |
| transition:.12s;white-space:nowrap} | |
| .plat-btn:hover{color:var(--plat-text);background:rgba(124,140,255,.10)} | |
| .plat-btn[aria-disabled="true"]{opacity:.32;pointer-events:none} | |
| .plat-btn--primary{color:#fff;background:rgba(124,140,255,.16);border-color:rgba(124,140,255,.4)} | |
| /* ------------------------------------------------------- curriculum overlay -- */ | |
| .plat-overlay{position:fixed;inset:0;z-index:1001;display:none; | |
| background:rgba(8,9,13,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} | |
| .plat-overlay.open{display:block} | |
| .plat-drawer{position:absolute;top:0;right:0;height:100%;width:min(460px,92vw); | |
| background:var(--plat-panel);border-left:1px solid var(--plat-border); | |
| box-shadow:-20px 0 50px rgba(0,0,0,.4);overflow-y:auto;padding:18px 18px 60px; | |
| font-family:var(--plat-sans)} | |
| .plat-drawer h2{font-size:15px;margin:4px 0 2px;color:var(--plat-text)} | |
| .plat-drawer .sub{font-size:12.5px;color:var(--plat-muted);margin:0 0 16px} | |
| .plat-drawer .close{position:absolute;top:14px;right:14px} | |
| .plat-part{font-size:11px;text-transform:uppercase;letter-spacing:.08em; | |
| color:var(--plat-accent2);font-weight:700;margin:18px 0 6px} | |
| .plat-link{display:flex;align-items:center;gap:10px;text-decoration:none; | |
| color:var(--plat-text);padding:7px 9px;border-radius:8px;border:1px solid transparent} | |
| .plat-link:hover{background:var(--plat-panel2);border-color:var(--plat-border)} | |
| .plat-link.active{background:rgba(124,140,255,.14);border-color:rgba(124,140,255,.4)} | |
| .plat-link .n{font:700 11px/1 var(--plat-mono);color:var(--plat-muted); | |
| background:var(--plat-panel2);border-radius:6px;padding:3px 6px;min-width:26px;text-align:center} | |
| .plat-link.active .n{background:linear-gradient(135deg,var(--plat-accent),var(--plat-accent2));color:#0f1117} | |
| .plat-link .t{font-size:13.5px;font-weight:600;flex:1} | |
| .plat-link .st{font-size:14px} | |
| /* ---------------------------------------------------------- hub / home grid -- */ | |
| .plat-hub{max-width:1100px;margin:0 auto;padding:40px 20px 80px; | |
| font-family:var(--plat-sans);color:var(--plat-text)} | |
| .plat-hub__head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap; | |
| border-bottom:1px solid var(--plat-border);padding-bottom:22px;margin-bottom:8px} | |
| .plat-hub__eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em; | |
| color:var(--plat-accent2);font-weight:700;margin:0 0 10px} | |
| .plat-hub__head h1{font-size:32px;margin:0 0 10px;letter-spacing:-.6px;line-height:1.1} | |
| .plat-hub__head .lede{color:var(--plat-muted);font-size:15.5px;max-width:660px;margin:0;line-height:1.6} | |
| .plat-progress{margin-left:auto;min-width:200px;text-align:right} | |
| .plat-progress .pct{font:700 13px/1 var(--plat-mono);color:var(--plat-text)} | |
| .plat-progress .bar{height:8px;border-radius:99px;background:var(--plat-panel2); | |
| border:1px solid var(--plat-border);margin-top:8px;overflow:hidden} | |
| .plat-progress .fill{height:100%;background:linear-gradient(90deg,var(--plat-accent),var(--plat-accent2))} | |
| /* --ph (part hue) is set per-section in platform.js and cascades to cards */ | |
| .plat-partsec{margin-top:38px;--ph:212} | |
| .plat-partsec__head{display:flex;align-items:center;gap:12px;margin:0 0 16px} | |
| .plat-partsec__num{font:700 11px/1 var(--plat-mono);color:#0f1117;letter-spacing:.04em; | |
| background:linear-gradient(135deg,hsl(var(--ph) 75% 68%),hsl(var(--ph) 70% 58%)); | |
| border-radius:6px;padding:5px 9px} | |
| .plat-partsec__title{font-size:18px;font-weight:700;margin:0;letter-spacing:-.2px} | |
| .plat-partsec__rule{flex:1;height:1px;background:linear-gradient(90deg, | |
| hsl(var(--ph) 60% 55% / .45),transparent)} | |
| .plat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:14px} | |
| .plat-card{display:flex;flex-direction:column;gap:8px;text-decoration:none; | |
| background:var(--plat-panel);border:1px solid var(--plat-border);border-radius:14px; | |
| padding:17px 16px 15px;transition:transform .14s,border-color .14s,box-shadow .14s; | |
| color:var(--plat-text);position:relative;overflow:hidden} | |
| .plat-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px; | |
| background:linear-gradient(90deg,hsl(var(--ph) 72% 62%),hsl(var(--ph) 60% 52% / .25)); | |
| opacity:.55;transition:opacity .14s} | |
| .plat-card:hover{border-color:hsl(var(--ph) 65% 60%);transform:translateY(-3px); | |
| box-shadow:0 10px 28px rgba(0,0,0,.32)} | |
| .plat-card:hover::before{opacity:1} | |
| .plat-card.stub{opacity:.9} | |
| .plat-card.stub::before{opacity:.28} | |
| .plat-card__top{display:flex;align-items:center;gap:10px;margin-top:2px} | |
| .plat-card__num{font:700 12px/1 var(--plat-mono);color:#0f1117;border:0;border-radius:7px;padding:5px 8px; | |
| background:linear-gradient(135deg,hsl(var(--ph) 75% 66%),hsl(var(--ph) 68% 56%))} | |
| .plat-card.stub .plat-card__num{color:var(--plat-muted); | |
| background:var(--plat-panel2);border:1px solid var(--plat-border)} | |
| .plat-card__title{font-size:15.5px;font-weight:700;flex:1;line-height:1.25} | |
| .plat-badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; | |
| padding:3px 7px;border-radius:99px;white-space:nowrap} | |
| .plat-badge.ready{color:var(--plat-good);background:rgba(91,224,138,.12);border:1px solid rgba(91,224,138,.3)} | |
| .plat-badge.soon{color:var(--plat-warn);background:rgba(255,192,107,.10);border:1px solid rgba(255,192,107,.3)} | |
| .plat-card__blurb{font-size:13px;color:var(--plat-muted);line-height:1.5;margin:0} | |
| .plat-card__obj{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px} | |
| .plat-card__obj span{font-size:11px;color:var(--plat-muted); | |
| background:var(--plat-panel2);border:1px solid var(--plat-border);border-radius:99px;padding:2px 8px} | |
| /* ------------------------------------------------------------ stub pages -- */ | |
| .plat-stub{max-width:820px;margin:0 auto;padding:48px 20px 80px; | |
| font-family:var(--plat-sans);color:var(--plat-text);--ph:212} | |
| /* hero: a faint part-hued glow behind the title */ | |
| .plat-stub__hero{position:relative;margin:0 0 32px;padding:32px 28px 28px; | |
| background:var(--plat-panel);border:1px solid var(--plat-border);border-radius:18px; | |
| overflow:hidden} | |
| .plat-stub__hero::before{content:"";position:absolute;inset:0;pointer-events:none; | |
| background:radial-gradient(ellipse 70% 120% at 100% 0%, | |
| hsl(var(--ph) 72% 62% / .12),transparent 68%)} | |
| .plat-stub__hero::after{content:"";position:absolute;top:0;left:0;right:0;height:3px; | |
| background:linear-gradient(90deg,hsl(var(--ph) 72% 62%),hsl(var(--ph) 60% 52% / .2))} | |
| .plat-stub__eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em; | |
| color:hsl(var(--ph) 70% 68%);font-weight:700;margin:0 0 12px;display:flex; | |
| align-items:center;gap:10px} | |
| .plat-stub__eyebrow .part-pip{display:inline-block;width:7px;height:7px;border-radius:50%; | |
| background:hsl(var(--ph) 72% 62%)} | |
| .plat-stub__hero h1{font-size:34px;margin:0 0 14px;letter-spacing:-.6px;line-height:1.1} | |
| .plat-stub__hero .lede{font-size:16.5px;color:var(--plat-muted);line-height:1.6;margin:0 0 20px; | |
| max-width:620px} | |
| /* objective pills */ | |
| .plat-pills{display:flex;flex-wrap:wrap;gap:7px} | |
| .plat-pills span{font-size:12px;font-weight:600;padding:4px 11px;border-radius:99px; | |
| color:hsl(var(--ph) 72% 72%);background:hsl(var(--ph) 72% 62% / .12); | |
| border:1px solid hsl(var(--ph) 60% 55% / .3)} | |
| /* panels */ | |
| .plat-panel{background:var(--plat-panel);border:1px solid var(--plat-border); | |
| border-radius:14px;padding:20px 22px;margin:0 0 16px} | |
| .plat-panel h3{font-size:11px;text-transform:uppercase;letter-spacing:.09em; | |
| color:var(--plat-muted);font-weight:700;margin:0 0 14px} | |
| /* "what you'll build" description */ | |
| .plat-panel .build-desc{margin:0;font-size:15px;color:var(--plat-text); | |
| line-height:1.65;opacity:.88} | |
| /* playground placeholder */ | |
| .plat-preview{border-radius:14px;overflow:hidden;border:1px solid var(--plat-border); | |
| margin:0 0 16px;background:var(--plat-panel)} | |
| .plat-preview__label{display:flex;align-items:center;gap:8px;padding:11px 18px; | |
| border-bottom:1px solid var(--plat-border);background:var(--plat-panel2)} | |
| .plat-preview__label span{font-size:11px;font-weight:700;text-transform:uppercase; | |
| letter-spacing:.08em;color:var(--plat-muted)} | |
| .plat-preview__label .dot-row{display:flex;gap:5px} | |
| .plat-preview__label .dot-row i{display:block;width:8px;height:8px;border-radius:50%; | |
| background:var(--plat-border)} | |
| .plat-preview__canvas{display:flex;flex-direction:column;gap:10px;padding:22px 18px} | |
| .plat-preview__bar{height:10px;border-radius:99px;background:var(--plat-panel2); | |
| border:1px solid var(--plat-border)} | |
| .plat-preview__bar.w60{width:60%} | |
| .plat-preview__bar.w80{width:80%} | |
| .plat-preview__bar.w45{width:45%} | |
| .plat-preview__block{display:flex;gap:10px} | |
| .plat-preview__block .col{flex:1;height:80px;border-radius:10px; | |
| background:var(--plat-panel2);border:1px solid var(--plat-border)} | |
| .plat-preview__block .col.accent{ | |
| background:hsl(var(--ph) 72% 62% / .08);border-color:hsl(var(--ph) 60% 55% / .25)} | |
| .plat-preview__coming{display:flex;align-items:center;justify-content:center;gap:9px; | |
| padding:10px 0 4px;font-size:13px;font-weight:600;color:var(--plat-warn)} | |
| .plat-objlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} | |
| .plat-objlist li{display:flex;gap:10px;align-items:flex-start;font-size:15px} | |
| .plat-objlist li::before{content:"▸";color:var(--plat-accent);font-weight:700;margin-top:1px} | |
| .plat-stub__nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px; | |
| border-top:1px solid var(--plat-border);padding-top:20px} | |
| /* back-to-hub link */ | |
| .plat-stub__back{display:inline-flex;align-items:center;gap:6px;font-size:13px; | |
| font-weight:600;color:var(--plat-muted);text-decoration:none;margin-bottom:28px; | |
| padding:6px 12px;border-radius:8px;border:1px solid var(--plat-border); | |
| background:var(--plat-panel);transition:.12s} | |
| .plat-stub__back:hover{color:var(--plat-text);border-color:hsl(var(--ph) 60% 55% / .5)} | |
| @media (max-width:560px){ | |
| .plat-ctx{display:none} | |
| .plat-hub__head h1{font-size:24px} | |
| .plat-progress{margin-left:0;text-align:left;width:100%} | |
| } | |