/* ============================================================ ExamCrack - white surface for the static content pages Used by contact.html and legal.html (Sep 15 2026). WHY THESE PAGES GOT THEIR OWN FILE They used to load css/welcome.css, the dark theme written for a landing page that no longer exists. The live design now lives in css/welcome-3.css, and those two pages are the last of the old theme. WHY IT IS SHARED RATHER THAN COPIED contact and legal are the same kind of page - static content with a site head and foot - so they share one file. Only the document typography for legal and the contact cards differ, and both live here. Nothing is duplicated, so there is one place to change the head, the foot, the tokens or the contrast. Every rule sits under body.page-white. If this file is ever linked from a page that does not carry that class, nothing in it applies. Contrast, measured on white, at the sizes actually used here: --ink #0d1117 18.9:1 --brand #4f46e5 6.29:1 --ink-2 #334155 9.59:1 --brand-dark #4338ca 7.67:1 --ink-3 #55606e 6.60:1 --ink-4 #6b7280 4.83:1 - the floor, never used below 12px ============================================================ */ body.page-white { --ink: #0d1117; --ink-2: #334155; --ink-3: #55606e; --ink-4: #6b7280; --brand: #4f46e5; --brand-dark: #4338ca; --brand-soft: #eef2ff; --line: rgba(13, 17, 23, 0.10); --line-soft: rgba(13, 17, 23, 0.06); --paper: #f7f8fa; --page: #ffffff; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0; background-color: var(--page); color: var(--ink-2); font-family: var(--font-ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body.page-white * { box-sizing: border-box; } body.page-white h1, body.page-white h2, body.page-white h3, body.page-white p, body.page-white ul { margin: 0; } body.page-white ul { padding: 0; list-style: none; } body.page-white img { max-width: 100%; } body.page-white a { color: var(--brand); text-decoration: none; } body.page-white a:hover { color: var(--brand-dark); } body.page-white :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* The drift canvas is position:fixed at z-index 0 (css/net-bg.css). Content has to sit above it on its own layer, or the canvas is painted over it. */ body.page-white .wrap { position: relative; z-index: 1; } body.page-white .container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; } body.page-white .skip { position: absolute; left: -9999px; top: 0; z-index: 5; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; } body.page-white .skip:focus { left: 0; color: #fff; } /* ---------------- site head ---------------- */ body.page-white .site-head { position: sticky; top: 0; z-index: 2; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); } body.page-white .head-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; } body.page-white .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } body.page-white .brand:hover { color: var(--ink); } /* The brand mark and the wordmark are the per-org white-label hooks that js/welcome-branding.js looks for. Keep both, and keep the class names. */ body.page-white .brand-mark { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; overflow: hidden; flex: 0 0 auto; } body.page-white .brand-mark img, body.page-white .brand-mark .welcome-brand-logo { width: 100%; height: 100%; object-fit: cover; } body.page-white .head-links { display: flex; align-items: center; gap: 20px; margin-left: auto; } body.page-white .head-links a { color: var(--ink-2); font-size: 14.5px; font-weight: 500; } body.page-white .head-links a:hover { color: var(--ink); } body.page-white .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 14.5px; font-weight: 600; } body.page-white .btn-primary:hover { background: var(--brand-dark); color: #fff; } /* ---------------- hero (contact's .page-hero, legal's .legal-hero) ---------------- */ body.page-white .page-hero, body.page-white .legal-hero { padding: 72px 0 8px; } body.page-white .page-hero h1, body.page-white .legal-hero h1 { color: var(--ink); font-weight: 700; letter-spacing: -0.025em; font-size: clamp(32px, 5vw, 52px); line-height: 1.06; margin-bottom: 14px; } body.page-white .page-hero p, body.page-white .legal-hero p { color: var(--ink-3); font-size: 16.5px; max-width: 620px; } body.page-white .eyebrow { display: inline-block; margin-bottom: 18px; padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* ---------------- contact cards ---------------- */ body.page-white .contact-grid { display: grid; gap: 16px; margin: 40px 0 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } body.page-white .contact-card { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.72); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.page-white .contact-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(13, 17, 23, 0.07); } body.page-white .cc-icon { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); } body.page-white .contact-card h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } body.page-white .contact-card p { font-size: 14px; color: var(--ink-3); margin-bottom: 14px; } body.page-white .cc-link { margin-top: auto; font-family: var(--font-mono); font-size: 13.5px; color: var(--brand-dark); word-break: break-all; border-bottom: 1px solid transparent; } body.page-white .cc-link:hover { border-bottom-color: var(--brand-dark); } body.page-white .contact-note { margin-top: 24px; padding: 16px 18px; border-radius: 12px; border: 1px dashed var(--line); background: rgba(247, 248, 250, 0.7); color: var(--ink-3); font-size: 14px; } body.page-white .contact-note strong { color: var(--ink-2); font-weight: 600; } body.page-white .contact-note a { border-bottom: 1px solid rgba(79, 70, 229, 0.35); } /* ---------------- legal document ---------------- The markup for these sections is left exactly as it was; only the styling moved here from the page's old inline