/* subpage.css — shared chrome for every harbor/*.html project page. Base reset/nav shell lives in ../css/base.css. Theme: light (parchment) by default. Add data-theme="dark" on for the control-room palette (used by hardware/AI pages). Page-unique styles (device mockups, svg illustrations, accent overrides) stay inline per page. */ :root{ --ink:#16323a; --h1:#15323a; --body-text:#46504e; --muted:#5a6460; --label:#2c6b73; --footer-text:#7a8c88; --body-bg:#f4ede0; --panel-bg:#faf6ee; --panel-border:rgba(21,86,95,.16); --panel-border-soft:rgba(21,86,95,.14); --code-color:#15565f; --code-bg:rgba(21,86,95,.08); --tag-bg:rgba(21,86,95,.08); --tag-border:rgba(21,86,95,.2); --tag-color:#2c6b73; --nav-bg:rgba(244,237,221,.88); } [data-theme="dark"]{ --ink:#cfe6e8; --h1:#eef6f6; --body-text:#9bbfc4; --muted:#7fa8ae; --label:#4a7e85; --footer-text:#4a7e85; --body-bg:#0e1a22; --panel-bg:#111e28; --panel-border:rgba(79,208,216,.14); --panel-border-soft:rgba(79,208,216,.1); --code-color:#4fd0d8; --code-bg:rgba(79,208,216,.08); --tag-bg:rgba(79,208,216,.08); --tag-border:rgba(79,208,216,.18); --tag-color:#7fc6cd; --nav-bg:rgba(14,26,34,.85); } body{background:var(--body-bg);color:var(--ink)} ::selection{background:var(--code-color);color:var(--body-bg)} nav{background:var(--nav-bg);border-bottom:1px solid var(--panel-border)} /* ── Nav ── */ .nav-back{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--code-color);transition:color .15s} .nav-back:hover{color:#c0572b} .nav-berth{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--label);letter-spacing:.1em} /* ── Layout ── */ .page{max-width:860px;margin:0 auto;padding:0 36px 100px} /* ── Hero ── */ .hero{padding:110px 0 64px;display:flex;align-items:flex-start;gap:44px} .hero-art,.hero-device,.hero-grid,.hero-dial,.hero-ui{flex-shrink:0} .hero-text{flex:1} .hero-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.26em;color:var(--label);margin-bottom:14px;display:flex;align-items:center;gap:10px} .hero-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} h1{font-size:52px;font-weight:700;letter-spacing:-.025em;color:var(--h1);margin:0 0 10px;line-height:1} .hero-subtitle{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--label);margin-bottom:22px;letter-spacing:.04em} .hero-blurb{font-size:17px;line-height:1.6;color:var(--body-text);margin:0;max-width:540px} .tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;padding:5px 11px;border-radius:30px;background:var(--tag-bg);border:1px solid var(--tag-border);color:var(--tag-color)} .tag-active{background:rgba(192,87,43,.1);border-color:rgba(192,87,43,.3);color:#c8794e} .tag-status{background:rgba(60,159,110,.1);border-color:rgba(60,159,110,.28);color:#4fa876} .tag-proto,.tag-placeholder{background:rgba(63,134,192,.1);border-color:rgba(63,134,192,.3);color:#5a96cc} .live-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:11px 15px;border-radius:3px;background:var(--code-color);color:#f4ede0;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em} .live-link:hover{background:#c0572b} /* ── Content blocks ── */ .block{margin-top:60px} .block-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--label);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--panel-border)} .block p{font-size:15.5px;line-height:1.65;color:var(--body-text);margin:0 0 14px} .block p:last-child{margin-bottom:0} .block strong{color:var(--ink);font-weight:600} .block code{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--code-color);background:var(--code-bg);padding:1px 6px;border-radius:2px} .block h2{font-size:26px;font-weight:700;color:var(--h1);margin:0 0 18px;letter-spacing:-.01em} /* ── Phase roadmap ── */ .phase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--panel-border-soft);border:1px solid var(--panel-border-soft);border-radius:5px;overflow:hidden;margin-top:4px} .phase{background:var(--panel-bg);padding:18px 16px;min-height:118px} .phase-no{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:#c0572b;margin-bottom:12px} .phase-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px} .phase-body{font-size:13px;line-height:1.55;color:var(--muted)} /* ── Stack grid ── */ .stack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--panel-border-soft);border:1px solid var(--panel-border-soft);border-radius:5px;overflow:hidden;margin-top:4px} .stack-cell{background:var(--panel-bg);padding:18px 20px} .stack-cell-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--label);margin-bottom:8px} .stack-cell-items{font-size:13.5px;line-height:1.8;color:var(--body-text)} .stack-cell-items code{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--code-color);background:var(--code-bg);padding:1px 5px;border-radius:2px} /* ── Architecture diagram panel ── */ .arch-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:5px;padding:32px;margin-top:4px;overflow-x:auto} /* ── Decision list ── */ .decision-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;margin-top:4px} .decision{background:var(--panel-bg);border:1px solid var(--panel-border-soft);border-radius:4px;padding:20px 22px} .decision-head{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:8px} .decision-body{font-size:14px;line-height:1.6;color:var(--muted);margin:0} .decision-body code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--code-color);background:var(--code-bg);padding:1px 5px;border-radius:2px} /* ── Challenge list ── */ .challenge-list{display:flex;flex-direction:column;gap:22px;margin-top:4px} .challenge{border-left:2px solid #c0572b;padding-left:20px} .challenge-head{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:7px} .challenge-body{font-size:14px;line-height:1.6;color:var(--muted);margin:0} .challenge-body code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--code-color);background:var(--code-bg);padding:1px 5px;border-radius:2px} /* ── Status panel ── */ .status-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:5px;padding:4px 0;margin-top:4px} .status-row{display:flex;align-items:flex-start;gap:16px;padding:14px 22px;border-bottom:1px solid var(--panel-border-soft)} .status-row:last-child{border-bottom:none} .status-key{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--label);flex-shrink:0;width:110px;padding-top:2px} .status-val{font-size:14px;line-height:1.55;color:var(--body-text)} .status-val code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--code-color);background:var(--code-bg);padding:1px 5px;border-radius:2px} /* ── Placeholder / summary pattern (pages without a full case study yet) ── */ .summary-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:5px;padding:26px 28px} .summary-panel p{font-size:15.5px;line-height:1.65;color:var(--body-text);margin:0 0 14px} .summary-panel p:last-child{margin-bottom:0} .coming-soon{margin-top:22px;border-left:2px solid #c0572b;padding-left:18px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:#c8794e} /* ── Footer ── */ .page-footer{margin-top:80px;padding-top:28px;border-top:1px solid var(--panel-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--footer-text)} /* ── Responsive ── */ @media(max-width:700px){ .page{padding:0 20px 80px} .hero{flex-direction:column;gap:24px;padding-top:90px} .hero-art,.hero-grid,.hero-dial,.hero-ui{display:none} h1{font-size:36px} .phase-grid{grid-template-columns:repeat(2,1fr)} .page-carousel{grid-template-columns:repeat(2,1fr)} .stack-grid{grid-template-columns:1fr} .status-key{width:80px} }