/* Source: /assets/css/genie.css */ /* PowerShell Genie — homepage mockup (hand-built, desktop 1440px) Spacing scale ONLY: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 24 / 28 / 32 / 48 / 64. 1px is reserved for borders and hairline alignment only. No other magic numbers. */ :root{ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --navy:#00244b; --navy-2:#0a2f5c; --blue:#0068fe; --blue-dark:#0052cc; --blue-soft:#e8f1ff; --action-blue:#0068fe; --action-blue-hover:#0052cc; --ink:#10253f; --muted:#5a6c84; --faint:#8494ab; --bg:#ffffff; --inset:#f1f5fa; --card:#ffffff; --line:#d9e2f0; --line-soft:#e6ecf5; --green:#147d45; --green-bg:#e5f5ea; --red:#c03f3f; --red-bg:#fdecec; --amber:#996410; --amber-bg:#fdf3df; --code:#12283f; --code-2:#0c1c30; --r-sm:8px; --r-md:12px; --r-lg:16px; --font:"Nunito","Segoe UI",ui-rounded,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font);background:var(--bg);color:var(--ink); font-size:15.5px;line-height:1.6;display:flex;min-height:100vh; } ::selection{background:var(--action-blue);color:#fff} /* ============ LEFT SIDEBAR (the only navigation — no top nav, per user decision) ============ */ .side{ width:248px;flex:0 0 248px;background:var(--navy);color:#dbe7f7; display:flex;flex-direction:column;position:sticky;top:0;height:100vh; } .brand{display:flex;gap:var(--s3);align-items:center;padding:var(--s5) var(--s4) var(--s4);text-decoration:none;color:inherit} .brand img{width:44px;height:44px;border-radius:50%;background:var(--navy-2);object-fit:cover;flex:0 0 44px} /* Bolt v351: in-header drawer close — the open drawer covers the hamburger at 390px */ .drawer-close{display:none;position:absolute;top:10px;right:10px;z-index:2; width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer} .drawer-close:hover{background:rgba(255,255,255,.18)} .brand-name{font-weight:800;font-size:17px;line-height:1.2;color:#fff} .brand-name b{color:#7cc4ff;font-weight:800} .brand-tag{font-size:11.5px;color:#9db4d4;line-height:1.35} .nav{flex:1;overflow-y:auto;padding:var(--s2) var(--s3) var(--s4)} .nav h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8ba3c7; padding:var(--s4) var(--s3) var(--s2);font-weight:800} .nav a{display:flex;align-items:center;gap:var(--s3);color:#c9d9f0;text-decoration:none; font-weight:700;font-size:14.5px;padding:var(--s2) var(--s3);border-radius:var(--r-sm)} .nav a svg{width:20px;height:20px;flex:0 0 20px;opacity:.85} .nav a:hover{background:rgba(255,255,255,.08);color:#fff} .nav a.active{background:var(--action-blue);color:#fff} .side-foot{padding:var(--s4);border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between} .theme-btn{display:flex;align-items:center;gap:var(--s2);background:rgba(255,255,255,.08);border:0;color:#dbe7f7; border-radius:999px;padding:var(--s2) var(--s3);font:inherit;font-size:13px;font-weight:700;cursor:pointer} .theme-btn svg{width:16px;height:16px} /* Header theme toggle: sits at the right end of the utilbar search row. Theme-aware tokens so it reads on light --bar and dark --bar alike. */ .utilbar .theme-btn{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--ink)} .utilbar .theme-btn:hover{border-color:var(--blue)} @media(max-width:560px){ /* mobile: icon-only toggle keeps hamburger + search uncluttered at 390px */ .utilbar .theme-label{display:none} .utilbar .theme-btn{padding:var(--s2)} } /* ============ MAIN COLUMN ============ */ .main{flex:1;min-width:0;display:flex;flex-direction:column} .utilbar{display:flex;gap:var(--s3);align-items:center;padding:var(--s4) var(--s6); background:var(--bar);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:5} .search{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s2);background:var(--card);border:1px solid var(--line); border-radius:999px;padding:var(--s2) var(--s4);color:var(--faint);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .search svg{width:18px;height:18px;flex:0 0 18px} .kbd{margin-left:auto;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;color:var(--faint);background:var(--inset);white-space:nowrap;flex:0 0 auto} .page{padding:var(--s6);max-width:1180px;width:100%;margin:0 auto} /* ============ HERO ============ */ .hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start;margin-bottom:var(--s6);position:relative} /* Mira texture pass (2026-09-29): Hero Patterns-style dot grid, 24px tile, whisper-quiet — texture, not decoration. ::before keeps layout untouched; content sits above on z-index:1. Dark theme gets white dots instead. */ .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%2300244b' fill-opacity='0.06'/%3E%3C/svg%3E")} .hero>*{position:relative;z-index:1} [data-theme="dark"] .hero::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")} .hero h1 .w{display:inline-block} .crumbs{display:flex;align-items:center;gap:var(--s2);font-size:12px;font-weight:800;letter-spacing:.08em; color:var(--blue);text-transform:uppercase;margin-bottom:var(--s4)} .crumbs svg{width:14px;height:14px;color:var(--faint)} .hero h1{font-size:44px;line-height:1.12;font-weight:800;letter-spacing:-.01em;margin-bottom:var(--s4)} .hero h1 .hl{color:var(--blue)} .lede{color:var(--muted);font-size:16.5px;margin-bottom:var(--s5);max-width:44ch} .cta-row{display:flex;gap:var(--s3);margin-bottom:var(--s6);flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:var(--s2);font:inherit;font-weight:800;font-size:15px; border-radius:var(--r-md);padding:var(--s3) var(--s5);cursor:pointer;text-decoration:none;border:1px solid transparent} .btn svg{width:18px;height:18px} .btn-primary{background:var(--action-blue);color:#fff} .btn-primary:hover{background:var(--action-blue-hover)} .btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--blue);color:var(--blue)} /* v300 M2 motion: press states are compositor-only (transform), killed under prefers-reduced-motion by the global rule. */ .btn{transition:transform .12s ease,background-color .18s ease,border-color .18s ease} .btn:active{transform:scale(.97)} .hub-card{transition:transform .15s ease,border-color .18s ease,box-shadow .18s ease} .hub-card:hover{transform:translateY(-2px)} .hub-card:active{transform:translateY(0) scale(.99)} .copy-btn{transition:transform .12s ease,background-color .15s ease,color .15s ease} .copy-btn:active{transform:scale(.94)} .rail-tool{transition:background-color .15s ease,color .15s ease} .door{transition:transform .12s ease} .door:active{transform:scale(.97)} .feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)} .feat{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start} .feat .ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--blue-soft);color:var(--blue); display:flex;align-items:center;justify-content:center} .feat .ic svg{width:22px;height:22px} .feat span{font-size:13.5px;font-weight:700;line-height:1.4} /* ============ CHALLENGE CARD ============ */ .challenge{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--s5);box-shadow:0 8px 28px rgba(0,36,75,.07)} .kicker{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--blue);text-transform:uppercase;margin-bottom:var(--s2)} .challenge h2{font-size:22px;font-weight:800;margin-bottom:var(--s1)} .sim-note{font-size:13px;color:var(--faint);margin-bottom:var(--s4)} .steps{display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s5)} .step{display:inline-flex;align-items:center;gap:var(--s1);font-size:12.5px;font-weight:700;color:var(--muted); background:var(--inset);border:1px solid var(--line-soft);border-radius:999px;padding:var(--s1) var(--s2); transition:background-color .25s ease,color .25s ease,border-color .25s ease} .step.on{background:var(--action-blue);border-color:var(--blue);color:#fff} /* v300 M2: progress fills animate (width on a tiny bar is cheap; killed under reduced-motion) */ [data-progress-fill]{transition:width .45s cubic-bezier(.4,0,.2,1)} .step-sep{color:var(--faint);display:inline-flex} .step-sep svg{width:12px;height:12px} .funnel-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s4);align-items:center;margin-bottom:var(--s4)} .svc-list{display:flex;flex-direction:column;gap:var(--s2)} .svc{display:flex;align-items:center;gap:var(--s2);background:var(--inset);border:1px solid var(--line-soft); border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-size:13.5px;font-weight:700} .svc svg{width:16px;height:16px;color:var(--faint);flex:0 0 16px} .pill{margin-left:auto;font-size:11.5px;font-weight:800;border-radius:999px;padding:4px 12px;white-space:nowrap} .pill.run{background:var(--green-bg);color:var(--green)} .pill.stop{background:var(--red-bg);color:var(--red)} .col-label{display:flex;align-items:center;gap:var(--s2);font-size:13px;font-weight:800;color:var(--ink);margin-bottom:var(--s2)} .col-label .n{width:22px;height:22px;border-radius:50%;background:var(--action-blue);color:#fff;font-size:12px; display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px} .funnel-mid{display:flex;flex-direction:column;align-items:center;gap:var(--s3);min-width:208px} /* Mason v326: challenge card ran ~970px tall vs ~790px in pm14-index-1440.png. Tighten the funnel column to match the mockup's proportions. */ .funnel-mid .bubble{margin-bottom:var(--s1)} .bubble{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); padding:var(--s2) var(--s3);font-size:12.5px;font-weight:700;line-height:1.4;max-width:200px;text-align:center} .bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--card); border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)} .funnel-stage{display:flex;flex-direction:column;align-items:center;gap:var(--s2)} .funnel-stage img.mascot{width:60px;height:60px;border-radius:50%;object-fit:cover;background:var(--blue-soft); border:3px solid #fff;box-shadow:0 4px 14px rgba(0,36,75,.18);flex:0 0 60px} .funnel{width:124px;height:110px;background:linear-gradient(180deg,#7aa7f0 0%,#5b8ce9 55%,#4176dd 100%); clip-path:polygon(0 0,100% 0,66% 58%,66% 100%,34% 100%,34% 58%)} .filter-chip{position:static;background:var(--card);border:1px solid var(--line); border-radius:var(--r-sm);padding:var(--s1) var(--s3);font-size:12.5px;font-weight:800;color:var(--blue); box-shadow:0 2px 8px rgba(0,36,75,.12);white-space:nowrap} .farrow{color:var(--blue);display:flex} .farrow svg{width:28px;height:28px} .codeblock{position:relative;background:var(--code);border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s4); font-family:Consolas,"Cascadia Code",Menlo,monospace;font-size:14px;line-height:1.7;color:#dbe7f7;overflow-x:auto; /* Rivet M2: reserve room for the absolute copy button so long lines never slide under it. Mobile keeps the static-button layout below. v335: trimmed 104px -> 84px (button is ~64px) so the homepage challenge command fits without clipping. */ padding-right:calc(var(--s4) + 84px)} .codeblock .ln{display:flex;gap:var(--s4)} .codeblock .gutter{color:#5f7692;user-select:none;flex:0 0 16px;text-align:right} .tok-cmd{color:var(--syntax-cmd);font-weight:700}.tok-pipe{color:var(--syntax-op)}.tok-param{color:var(--syntax-param)} .tok-var{color:var(--syntax-var);font-weight:700} .tok-str{color:var(--syntax-str)} .tok-com{color:var(--syntax-com)} /* code comments: dimmer than tok-pipe, still readable (Don N3) */ .ps-prompt{color:#7cc4ff;font-weight:700} /* Prose context: code tokens sit on a light page, so the dark-code colors are remapped to darker variants that hold 4.5:1 on white (Don N1/N2). */ .topic article p .tok-var,.topic article li .tok-var{color:var(--syntax-var)} .topic article p .tok-str,.topic article li .tok-str{color:var(--syntax-str)} /* Dark mode: the light-mode remaps fail AA on the dark surface (Don's re-audit measured 3.04:1 / 3.40:1), so prose tokens reuse the dark-designed code colors. */ [data-theme="dark"] .topic article p .tok-var,[data-theme="dark"] .topic article li .tok-var{color:var(--syntax-var)} [data-theme="dark"] .topic article p .tok-str,[data-theme="dark"] .topic article li .tok-str{color:var(--syntax-str)} /* Mason v330: prose links are just bold blue — no underline, and :visited looks identical to :link (no violet/purple anywhere). Scoped to article prose plus the byline (p.cred) and breadcrumb trail (.crumbs), which sit under
outside
and previously fell back to browser-default violet links. Chrome (nav, rails, cards, footer) keeps its own colors. Dark mode carries through automatically: --blue becomes light-blue there. */ :where(main.page article a:link:not(.btn):not(.btn-primary),main.page article a:visited:not(.btn):not(.btn-primary),main.page .cred a:link,main.page .cred a:visited,main.page .crumbs a:link,main.page .crumbs a:visited){color:var(--blue);font-weight:700;text-decoration:none} .run-row{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s4);flex-wrap:wrap} .run-row .spacer{flex:1} /* Mason v326: pin the footer (sim-chip + hints + reset) to its own row like the mockup — previously it wrapped unpredictably depending on viewport width. */ .challenge .run-row .spacer{flex:1 1 100%;height:0} .link-btn{display:inline-flex;align-items:center;gap:var(--s2);background:none;border:0;color:var(--muted); font:inherit;font-size:13.5px;font-weight:700;cursor:pointer} .link-btn svg{width:16px;height:16px} .link-btn:hover{color:var(--blue)} .inspector{border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden} /* Mason v326: the inspector's empty column headers are 37px of dead weight before the first run (the mockup has no inspector at all). Hide the thead while the tbody holds only the placeholder row; real result rows bring it back. */ .challenge .inspector:has(tbody td[colspan]) thead{display:none} .challenge .inspector:has(tbody td[colspan]) td{padding:var(--s2) var(--s4);font-size:13px} .insp-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);background:var(--inset); border-bottom:1px solid var(--line-soft);font-size:13.5px;font-weight:800} .insp-head svg{width:16px;height:16px;color:var(--muted)} .insp-head .cnt{margin-left:auto;font-size:12px;color:var(--faint);font-weight:700} table{width:100%;border-collapse:collapse;font-size:13.5px} th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint); padding:var(--s2) var(--s4);border-bottom:1px solid var(--line-soft);background:var(--inset)} td{padding:var(--s2) var(--s4);border-bottom:1px solid var(--line-soft);font-weight:600} tr:last-child td{border-bottom:0} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:var(--s2)} /* ============ GENIE PROMISE STRIP (replaces testimonial — no fabricated quotes) ============ */ .promise{display:flex;gap:var(--s4);align-items:center;background:var(--navy);color:#dbe7f7; border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s6)} .promise img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 88px;background:var(--navy-2)} .promise p{font-size:16px;line-height:1.55} .promise p b{color:#fff} .promise .who{display:block;margin-top:var(--s2);font-size:13px;color:#9db4d4;font-weight:700} /* ============ JOURNEY STRIP ============ */ .journey{display:flex;align-items:center;gap:var(--s5);background:var(--card);border:1px solid var(--line); border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin-bottom:var(--s7);flex-wrap:wrap} .journey .j-ic{width:44px;height:44px;border-radius:50%;background:var(--blue-soft);color:var(--blue); display:flex;align-items:center;justify-content:center;flex:0 0 44px} .journey .j-ic svg{width:24px;height:24px} .journey .j-txt b{display:block;font-size:16px} .journey .j-txt span{font-size:13.5px;color:var(--muted)} .journey .j-prog{flex:1;min-width:220px} .journey .j-prog .lbl{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:var(--s2)} .bar{height:10px;border-radius:999px;background:var(--inset);border:1px solid var(--line-soft);overflow:hidden} .bar i{display:block;height:100%;width:37.5%;border-radius:999px; background:linear-gradient(90deg,var(--green),#2fbf71)} /* ============ LEARNING ROUTE ============ */ .route-head{margin-bottom:var(--s5)} .route-head h2{font-size:26px;font-weight:800;margin-bottom:var(--s2)} .route-head p{color:var(--muted);max-width:70ch} .route{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-bottom:var(--s7)} .stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4); position:relative;display:flex;flex-direction:column;gap:var(--s2)} .stage + .stage{margin-left:var(--s4)} .stage + .stage::before{content:"";position:absolute;left:calc(-1 * var(--s4));top:44px;width:var(--s4); border-top:2px dashed var(--line)} .stage .num{width:32px;height:32px;border-radius:50%;background:var(--action-blue);color:#fff;font-weight:800; font-size:14px;display:flex;align-items:center;justify-content:center} .stage.done .num{background:var(--green)} .stage h3{font-size:15px;font-weight:800} .stage p{font-size:12.5px;color:var(--muted);line-height:1.5} .stage ul{list-style:none;display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s1)} .stage li{display:flex;gap:var(--s2);align-items:flex-start;font-size:12.5px;font-weight:600;color:var(--muted)} .stage li svg{width:15px;height:15px;flex:0 0 15px;margin-top:3px} .stage li.ok{color:var(--ink)} .stage li.ok svg{color:var(--green)} .stage li.todo svg{color:var(--faint)} /* ============ FOOTER ============ */ footer{margin-top:auto;border-top:1px solid var(--line);background:var(--card)} .foot-in{max-width:1180px;margin:0 auto;padding:var(--s5) var(--s6);display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap} .foot-brand{display:flex;align-items:center;gap:var(--s2);font-weight:800;font-size:15px} .foot-brand img{width:28px;height:28px;border-radius:50%} .foot-brand b{color:var(--blue)} .foot-links{display:flex;gap:var(--s4);margin-left:auto} .foot-links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:700} .foot-links a:hover{color:var(--blue)} .copy{font-size:13px;color:var(--faint);width:100%} /* ============ TOPIC PAGE (sticky sidebars) ============ */ .topic .crumbs{margin-bottom:var(--s3)} .topic h1{font-size:36px;line-height:1.15;font-weight:800;letter-spacing:-.01em;margin-bottom:var(--s3)} .topic .lede{color:var(--muted);font-size:16.5px;margin-bottom:var(--s4);max-width:70ch} .topic-meta{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s6);flex-wrap:wrap; font-size:13px;font-weight:700;color:var(--muted)} .topic-meta .pill{margin:0} .topic-grid{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:var(--s6);align-items:start;margin-bottom:var(--s7)} .topic article{min-width:0} .topic article section{margin-bottom:var(--s7);scroll-margin-top:calc(var(--utilbar-h,68px) + var(--s5))} .topic article h2{font-size:23px;font-weight:800;margin-bottom:var(--s3)} .topic article p{color:var(--ink);margin-bottom:var(--s4);max-width:72ch} .topic article p.muted{color:var(--muted)} .topic article ul.tight{margin:0 0 var(--s4) var(--s4);color:var(--ink);display:flex;flex-direction:column;gap:var(--s2)} .topic article .codeblock{margin-bottom:var(--s3)} .sample-note{display:flex;align-items:center;gap:var(--s2);font-size:12.5px;font-weight:700;color:var(--faint);margin-bottom:var(--s4)} .sample-note svg{width:14px;height:14px} .coach{display:flex;gap:var(--s3);align-items:flex-start;background:var(--blue-soft); border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s4);max-width:72ch} .coach img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px;background:var(--card);border:2px solid #fff} .coach p{font-size:14px;margin:0} .coach p b{color:var(--blue-dark)} details.try{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card); padding:var(--s4);max-width:72ch;margin-bottom:var(--s4)} details.try summary{font-weight:800;font-size:15px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--s2)} details.try summary svg{width:18px;height:18px;color:var(--blue)} details.try summary::-webkit-details-marker{display:none} details.try .codeblock{margin:var(--s3) 0 0} /* Sticky right rail: "On this page" mirrors the article's h2s exactly. top offset comes from the sticky contract (--utilbar-h), shared with scroll-spy. v300 M2: the rail is a .rail-col (sticky column) holding the map aside plus .rail-blocks (Related, Site tools, Genie tip, Your progress). Hubs keep the classic single