/* ========================================================================== prototyping-guide.css Page styles for /prototyping-guide — "Kinetic Editorial" (WNCP AI). All pg- prefixed; tokens from colors_and_type.css via styles.css. Hard brand rules: 0px card corners (full radius only on numbered circles), 4px red top bars on cards, NO shadows (tonal elevation), red used sparingly, light-first with a single dark hero. Reveal is a JS enhancement only — resting state is fully visible without JS and under reduced-motion. ========================================================================== */ /* ========================================================================== Scroll-reveal — progressive enhancement. prototyping-guide.js adds .pg-reveal-on to ONLY when an IntersectionObserver is available and motion is allowed. Until then (no JS, reduced motion, old browsers) every .reveal element is fully visible. ========================================================================== */ .pg-reveal-on .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--easing), transform 0.6s var(--easing); will-change: opacity, transform; } .pg-reveal-on .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== Shared section primitives ========================================================================== */ .pg-lead { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 70ch; margin: var(--s6) 0 var(--s7); } .pg-lead strong { color: var(--ink); } .pg-nav__back { font-size: 13px; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; text-transform: none; } /* Anchor targets clear the sticky nav when jumped to */ .section[id], .pg-stage[id], .pg-version[id] { scroll-margin-top: 84px; } /* ========================================================================== §1 — Dark editorial hero ========================================================================== */ .pg-hero { background: var(--inverse-bg); color: var(--inverse-body); position: relative; overflow: hidden; padding: clamp(30px, 4vw, 52px) 0 clamp(48px, 6vw, 84px); } .pg-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gradient-red); z-index: 4; } .pg-hero__accent { position: absolute; top: 0; right: 0; width: 34%; height: 100%; background: var(--gradient-red); clip-path: polygon(64% 0, 100% 0, 100% 100%, 30% 100%); opacity: 0.14; z-index: 0; pointer-events: none; } .pg-hero__inner { position: relative; z-index: 2; } .pg-hero__masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: clamp(32px, 4.5vw, 56px); padding-bottom: clamp(20px, 3vw, 28px); border-bottom: 1px solid rgba(var(--border-rgb), 0.12); } .pg-hero__session { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--inverse-body); /* --muted fails contrast on dark; --inverse-body ~13:1 */ } /* Hero grid: headline left, guardrails card right */ .pg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .pg-hero__body { min-width: 0; } .pg-hero__kicker { color: var(--red); } .pg-hero__h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 5.4vw, 62px); letter-spacing: -0.03em; line-height: 1.02; color: var(--inverse-head); margin: var(--s4) 0 0; text-wrap: balance; } .pg-hero__sub { font-family: var(--font-body); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.62; color: var(--inverse-body); margin: var(--s5) 0 0; max-width: 60ch; } /* Three-stage arc strip */ .pg-hero__stages { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); } .pg-arc__pill { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--white-rgb), 0.66); padding: var(--s2) var(--s3); border: 1px solid rgba(var(--border-rgb), 0.14); } .pg-arc__pill--current { color: var(--inverse-head); border-color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); } .pg-arc__pill--future { color: rgba(var(--white-rgb), 0.55); } .pg-arc__arrow { color: var(--red); font-size: 14px; } .pg-hero__stages-note { margin: var(--s4) 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(var(--white-rgb), 0.72); max-width: 58ch; } /* Guardrails card (hero right) */ .pg-hero__guardrails { background: rgba(var(--white-rgb), 0.04); border: 1px solid rgba(var(--border-rgb), 0.14); border-left: 4px solid var(--red); padding: var(--s5) var(--s5) var(--s4); } .pg-guardrails__label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0 0 var(--s4); } .pg-guardrails__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s4); } .pg-guardrails__list li { position: relative; padding-left: var(--s5); font-size: 13.5px; line-height: 1.55; color: var(--inverse-body); } .pg-guardrails__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--red); } .pg-guardrails__list strong { color: var(--inverse-head); display: block; margin-bottom: 2px; } .pg-guardrails__instruction { margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid rgba(var(--border-rgb), 0.12); font-size: 12.5px; line-height: 1.55; color: rgba(var(--white-rgb), 0.7); font-style: italic; } /* ========================================================================== §2 — Tabs (Spec / Build) ========================================================================== */ .pg-tabs-section { position: relative; padding-top: var(--s8); } .pg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s7); } .pg-tab { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); font-family: var(--font-body); text-align: left; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--border); padding: var(--s5); cursor: pointer; transition: color 0.14s var(--easing), background 0.14s var(--easing), border-color 0.14s var(--easing); } .pg-tab:hover { color: var(--ink); border-top-color: var(--ink-2); } .pg-tab--active, .pg-tab[aria-selected="true"] { color: var(--ink); background: var(--elevated); border-top-color: var(--red); } .pg-tab__num { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--muted); letter-spacing: 0.12em; transition: color 0.14s var(--easing); } .pg-tab--active .pg-tab__num, .pg-tab[aria-selected="true"] .pg-tab__num { color: var(--red); } .pg-tab__label { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 4vw, 38px); line-height: 1; letter-spacing: -0.02em; color: inherit; } .pg-tab__sub { font-weight: 500; font-size: 14.5px; line-height: 1.35; letter-spacing: -0.005em; color: var(--muted); } .pg-tab--active .pg-tab__sub, .pg-tab[aria-selected="true"] .pg-tab__sub { color: var(--ink-2); } /* Panels — progressive enhancement. No-JS / pre-JS: all panels visible in document order. The inline