/* ════════════════════════════════════════════════════════════════════════ soon.css · SHARED PLACEHOLDER STYLESHEET · both decks (FSWD root + java/) ──────────────────────────────────────────────────────────────────────── Used by every not-yet-authored class / lab / crash page in the repo. Each stub sets only three custom properties in its own : :root{ --sc:#334155; --sc-deep:#1E293B; --sc-tint:#F1F5F9; } ...and everything below themes itself from them. When a stub is replaced by the real authored deck, the whole file is overwritten — nothing here is ever inherited by a finished page. LOCKED: a stub must NEVER pretend to be finished content. It states plainly that the session is not written yet, shows the real roster of what WILL be on the page (from the UDC), and links back to its unit. No fake code panels, no fake output, no fake screenshots. ════════════════════════════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box;} :root{ --sc:#334155; --sc-deep:#1E293B; --sc-tint:#F1F5F9; --ink:#14181F; --ink-soft:#4A5361; --ink-08:rgba(20,24,31,.08); --paper:#FFFDF8; --r-lg:20px; --r-md:14px; --shadow-1:0 2px 10px rgba(20,24,31,.06); --shadow-2:0 16px 40px rgba(20,24,31,.13); } html{scroll-behavior:smooth;} body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; } .wrap{width:min(1080px,92vw);margin-inline:auto;} .icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;} /* ── animated top ribbon ─────────────────────────────────────────────── */ .ribbon{ height:5px; background:linear-gradient(90deg,var(--sc),var(--sc-deep),var(--sc),var(--sc-deep)); background-size:300% 100%; animation:ribbonSlide 9s linear infinite; } @keyframes ribbonSlide{to{background-position:300% 0;}} /* ── top bar ─────────────────────────────────────────────────────────── */ .topbar{ border-bottom:1px solid var(--ink-08); background:#fff; position:sticky;top:0;z-index:20; } .topbar .wrap{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:14px 0; } .back-link{ display:inline-flex;align-items:center;gap:8px; font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; color:var(--sc-deep);text-decoration:none; background:var(--sc-tint);border:1.5px solid var(--sc); border-radius:9px;padding:8px 13px; transition:transform .14s ease,box-shadow .14s ease; } .back-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12);} .tb-chips{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;} .tb-chip{ font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase; color:var(--ink-soft);background:var(--sc-tint); border:1px solid var(--ink-08);border-radius:7px;padding:6px 10px; } /* ── main ────────────────────────────────────────────────────────────── */ main{flex:1;padding:clamp(38px,6vw,72px) 0;} /* ── the honest "not written yet" hero ───────────────────────────────── */ .stub-hero{ background:linear-gradient(135deg,var(--sc-deep),var(--sc)); border-radius:var(--r-lg); padding:clamp(28px,4.4vw,48px); color:#fff; box-shadow:var(--shadow-2); position:relative;overflow:hidden; } .stub-hero::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 88% 12%,rgba(255,255,255,.16),transparent 58%); pointer-events:none; } .sh-badge{ display:inline-flex;align-items:center;gap:8px; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34); border-radius:999px;padding:7px 14px; margin-bottom:18px; } .sh-badge .icon{width:13px;height:13px;} .stub-hero h1{ font-family:'Fraunces',Georgia,serif;font-weight:900; font-size:clamp(28px,4.6vw,46px);line-height:1.12; letter-spacing:-.015em;margin-bottom:14px; } .stub-hero h1 em{font-style:italic;color:#FDE68A;} .sh-lede{ font-size:clamp(15px,1.7vw,18px);line-height:1.62; color:rgba(255,255,255,.9);max-width:68ch; } .sh-meta{ display:flex;gap:10px;flex-wrap:wrap;margin-top:22px; position:relative;z-index:1; } .sh-m{ font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase; background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.22); border-radius:8px;padding:7px 12px;color:#fff; } /* ── status card — the honest statement ──────────────────────────────── */ .status-card{ margin-top:clamp(24px,3.4vw,36px); background:#fff;border:2px dashed var(--sc); border-radius:var(--r-lg); padding:clamp(22px,3.2vw,34px); box-shadow:var(--shadow-1); } .sc-head{ display:flex;align-items:center;gap:12px;margin-bottom:14px; } .sc-head .icon{width:26px;height:26px;color:var(--sc);} .sc-head h2{ font-family:'Fraunces',Georgia,serif;font-weight:800; font-size:clamp(19px,2.4vw,25px);line-height:1.22; } .status-card p{color:var(--ink-soft);font-size:15px;max-width:74ch;} .status-card p + p{margin-top:12px;} .status-card b{color:var(--ink);} /* ── "what will be on this page" roster ──────────────────────────────── */ .roster{margin-top:clamp(24px,3.4vw,36px);} .roster-cap{ display:flex;align-items:center;gap:10px; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--sc-deep); margin-bottom:14px; } .roster-cap .icon{width:15px;height:15px;color:var(--sc);} .r-list{list-style:none;display:grid;gap:10px;} .r-list li{ position:relative; background:#fff;border:1px solid var(--ink-08); border-left:5px solid var(--sc); border-radius:var(--r-md); padding:14px 18px 14px 52px; font-size:14.5px;line-height:1.55; box-shadow:var(--shadow-1); } .r-list li b{display:block;font-size:15px;margin-bottom:2px;} .r-list li span{color:var(--ink-soft);font-size:13.5px;} .r-list li::before{ content:counter(r-i,decimal-leading-zero); counter-increment:r-i; position:absolute;left:14px;top:14px; width:26px;height:26px;border-radius:8px; background:var(--sc-tint);color:var(--sc-deep); border:1.5px solid var(--sc); font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700; display:flex;align-items:center;justify-content:center; } .r-list{counter-reset:r-i;} /* ── PYQ / note strip ────────────────────────────────────────────────── */ .note-strip{ margin-top:clamp(24px,3.4vw,36px); background:var(--sc-tint); border:1px solid var(--sc); border-radius:var(--r-lg); padding:clamp(18px,2.6vw,26px); } .note-strip h3{ display:flex;align-items:center;gap:10px; font-family:'Fraunces',Georgia,serif;font-weight:800; font-size:17px;margin-bottom:8px;color:var(--sc-deep); } .note-strip h3 .icon{width:18px;height:18px;} .note-strip p{font-size:14px;color:var(--ink-soft);max-width:76ch;} /* ── navigation out ──────────────────────────────────────────────────── */ .stub-nav{ margin-top:clamp(28px,4vw,44px); display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; } .sn{ display:flex;align-items:center;gap:13px; background:#fff;border:1.5px solid var(--ink-08); border-radius:var(--r-md);padding:16px 18px; text-decoration:none;color:var(--ink); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } .sn:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--sc);} .sn .icon{width:19px;height:19px;color:var(--sc);} .sn-k{ display:block; font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft); } .sn-v{display:block;font-weight:700;font-size:14.5px;margin-top:2px;} /* ── footer ──────────────────────────────────────────────────────────── */ footer{ border-top:1px solid var(--ink-08); background:#fff; padding:22px 0; margin-top:auto; } footer .wrap{ display:flex;justify-content:space-between;align-items:center; gap:14px;flex-wrap:wrap; font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft); } /* ── reveal-on-load ──────────────────────────────────────────────────── */ .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;} .rv.in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none;} .ribbon{animation:none;} } @media (max-width:640px){ .topbar .wrap{padding:11px 0;} .tb-chips{margin-left:0;width:100%;} .r-list li{padding:13px 15px 13px 48px;} }