/* guide.css — topic landing pages, styled to match the HSCScience homepage design system (tokens, fonts and component look lifted from index.html's hp-* system). */ :root{ --hp-canvas:#f5f5f4;--hp-surface:#ffffff;--hp-ink:#0f172a;--hp-ink-2:#334155;--hp-ink-3:#64748b;--hp-ink-4:#94a3b8; --hp-hairline:#e7e5e4;--hp-hairline-2:#d6d3d1;--hp-accent:#0f172a; --hp-bio:#059669;--hp-bio-tint:#d1fae5;--hp-bio-ink:#065f46; --hp-chem:#2563eb;--hp-chem-tint:#dbeafe;--hp-chem-ink:#1e40af; --hp-phy:#ea580c;--hp-phy-tint:#fed7aa;--hp-phy-ink:#9a3412; --hp-math:#7c3aed;--hp-math-tint:#ede9fe;--hp-math-ink:#5b21b6; --hp-radius:14px;--hp-radius-lg:20px;--hp-shadow-sm:0 1px 2px rgba(15,23,42,.04);--hp-shadow:0 4px 16px rgba(15,23,42,.06); --accent:var(--hp-ink);--accent-tint:var(--hp-hairline);--accent-ink:var(--hp-ink); } *{box-sizing:border-box} body{margin:0;background:var(--hp-canvas);color:var(--hp-ink);font-family:'DM Sans',system-ui,-apple-system,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;} .g-shell{max-width:1080px;margin:0 auto;padding:0 24px;} /* accent themes (set on ) */ .bio{--accent:var(--hp-bio);--accent-tint:var(--hp-bio-tint);--accent-ink:var(--hp-bio-ink);} .chem{--accent:var(--hp-chem);--accent-tint:var(--hp-chem-tint);--accent-ink:var(--hp-chem-ink);} .phy{--accent:var(--hp-phy);--accent-tint:var(--hp-phy-tint);--accent-ink:var(--hp-phy-ink);} .math{--accent:var(--hp-math);--accent-tint:var(--hp-math-tint);--accent-ink:var(--hp-math-ink);} /* nav */ .g-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hp-hairline);} .g-nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px;} .g-logo{display:flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-weight:700;font-size:18px;color:var(--hp-ink);text-decoration:none;} .g-logo-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;font-weight:800;font-size:15px;font-family:'Outfit',sans-serif;} .g-nav-links{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500;} .g-nav-links a{color:var(--hp-ink-2);text-decoration:none;} .g-nav-links a:hover{color:var(--hp-ink);} .g-nav-cta{padding:8px 15px;border-radius:999px;background:var(--accent);color:#fff!important;font-weight:600;} @media(max-width:640px){.g-nav-links a:not(.g-nav-cta){display:none;}} /* hero */ .g-hero{padding:56px 0 36px;} .g-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent-ink);background:var(--accent-tint);padding:6px 13px;border-radius:999px;margin-bottom:18px;} .g-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);} .g-hero h1{font-family:'Outfit',sans-serif;font-size:44px;line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:0 0 16px;} .g-hero p.g-sub{font-size:18px;color:var(--hp-ink-2);max-width:660px;margin:0 0 26px;} .g-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;} .g-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .15s,box-shadow .15s;} .g-btn.primary{background:var(--accent);color:#fff;box-shadow:var(--hp-shadow);} .g-btn.primary:hover{transform:translateY(-1px);} .g-btn.secondary{background:var(--hp-surface);color:var(--hp-ink);border:1px solid var(--hp-hairline-2);} .g-btn.secondary:hover{border-color:var(--accent);} @media(max-width:640px){.g-hero h1{font-size:32px;}.g-hero{padding:34px 0 24px;}.g-hero p.g-sub{font-size:16px;}} /* content */ .g-section-head{margin:26px 0 14px;} .g-section-head h2{font-family:'Outfit',sans-serif;font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0;} .g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} @media(max-width:820px){.g-grid{grid-template-columns:1fr;}} .g-card{background:var(--hp-surface);border:1px solid var(--hp-hairline);border-radius:var(--hp-radius);padding:20px 22px;transition:box-shadow .15s,border-color .15s;} .g-card:hover{box-shadow:var(--hp-shadow);border-color:var(--accent);} .g-card>h3{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;margin:0 0 4px;color:var(--accent-ink);} .g-links a{display:block;padding:11px 0;border-top:1px solid var(--hp-hairline);text-decoration:none;color:inherit;} .g-links a:first-of-type{border-top:none;} .g-links strong{display:block;font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;color:var(--hp-ink);} .g-links span{font-size:13px;color:var(--hp-ink-3);} .g-links a:hover strong{color:var(--accent-ink);} /* Quick Check band */ .g-cta{margin:30px 0 8px;background:var(--accent-tint);border:1px solid var(--accent);border-radius:var(--hp-radius-lg);padding:32px 28px;text-align:center;} .g-cta h2{font-family:'Outfit',sans-serif;font-size:24px;font-weight:700;margin:0 0 8px;color:var(--accent-ink);} .g-cta p{color:var(--hp-ink-2);max-width:540px;margin:0 auto 18px;} /* footer */ .g-footer{border-top:1px solid var(--hp-hairline);margin-top:44px;padding:26px 0;background:var(--hp-surface);} .g-foot-inner{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:center;font-size:14px;} .g-foot-brand{font-family:'Outfit',sans-serif;font-weight:700;color:var(--hp-ink);text-decoration:none;} .g-foot-inner a{color:var(--hp-ink-2);text-decoration:none;} .g-foot-inner a:hover{color:var(--hp-ink);} .g-copy{width:100%;text-align:center;font-size:12px;color:var(--hp-ink-4);margin-top:8px;}