/* ========================================================================== FE Civil Exam Prep — "Blueprint & Drafting Table" design system Reference: real structural/survey drawing conventions — title blocks, dimension lines, vellum/blueprint paper, technical hand-lettering. ========================================================================== Site-wide z-index scale (keep new fixed/sticky elements within these bands, don't invent one-off large numbers): 0-40 in-flow sticky bars (page headers, exam topbar/footer, cheat-sheet bar) 150 assets/mobile-nav.js bottom tab bar 200 assets/pwa.js install banner 210 assets/feedback.js floating "Feedback" button 300-310 page-local full-screen overlays (exam question navigator/modal, flashcards topic filter) -- above the persistent floating chrome above, since these are actual modal dialogs the user is focused on 400 top-level modals (feedback submission form, diagram fullscreen expand) ========================================================================== */ :root{ /* -- palette (named, 6 core hues) -- */ --paper: #f6f5f0; /* vellum */ --paper-2: #ffffff; /* panel / card surface */ --ink: #132a3a; /* primary text & linework */ --graphite: #5c6b73; /* muted text, tick marks, grid lines */ --blueprint: #1d5c8a; /* primary accent — structural blue */ --redline: #b3401f; /* secondary accent — markups, flags, warnings */ --grid-line: rgba(19,42,58,.06); --border: #c9d2d6; --border-strong: var(--ink); --ok: #2f7d4f; --ok-bg: #e6f1e9; --warn-bg: #fbeee7; /* Header/footer bars are pinned to a dark ink background in BOTH color schemes (see header.sheet-header below), so their text needs a stable light color that does NOT invert with the mode — unlike --paper, which flips to a dark tone in dark mode and would go dark-on-dark here. */ --header-text: #eef2f8; /* -- type -- */ --font-display: Futura, "Century Gothic", "Avenir Next", "Segoe UI", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; --radius: 3px; /* drafted, not app-rounded */ } @media (prefers-color-scheme: dark){ :root{ --paper: #0a2540; --paper-2: #123354; --ink: #dbe9f2; --graphite: #7f97a6; --blueprint: #5fa8d3; --redline: #e0754f; --grid-line: rgba(219,233,242,.07); --border: #24435e; --border-strong: #4a7391; --ok: #5fbf82; --ok-bg: #123326; --warn-bg: #3a2417; } } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.5; } a{color:var(--blueprint);} ::selection{background:var(--blueprint); color:var(--paper-2);} /* -- focus visibility (always keep) -- */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--blueprint); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} } /* -- grid-paper texture (subtle vellum grid) -- */ .grid-paper{ background-image: repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 32px); } /* -- display / heading type: geometric caps, drafting title-block lettering -- */ h1, h2, h3, .caps{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin:0; } .eyebrow{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--graphite); text-transform:uppercase; } .mono, .num, kbd, code, time, .timer{font-family:var(--font-mono);} /* -- title block (page header identity strip) -- */ .title-block{ display:inline-flex; align-items:stretch; border:1.5px solid var(--border-strong); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; background:var(--paper-2); color:var(--ink); } .title-block > div{padding:.4rem .65rem; border-right:1px solid var(--border-strong); white-space:nowrap;} .title-block > div:last-child{border-right:none;} .title-block .field-label{display:block; font-size:.58rem; color:var(--graphite); letter-spacing:.06em; margin-bottom:.1rem;} /* -- top bar shared across all pages -- Light paper, not a dark-navy fill — the blueprint accent lives in the border/ links/icons, not as a big background block. Keeps the whole site reading as one continuous sheet of vellum, texture and all, header included. */ header.sheet-header{ background:var(--paper-2); color:var(--ink); border-bottom:2px solid var(--border-strong); padding:1rem 1.1rem; position:relative; } /* Auth control lives top-right on every page, positioned absolutely so it never disturbs each page's own header content flow (backlink, h1, title- block all differ per page) — see assets/auth-gate.js. */ .fe-auth-slot{ position:absolute; top:1rem; right:1.1rem; display:flex; align-items:center; gap:.5rem; z-index:5; } .fe-auth-login-btn{ font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; padding:.4rem .85rem; border-radius:var(--radius); border:1.5px solid var(--blueprint); background:var(--blueprint); color:#fff; text-decoration:none; white-space:nowrap; } .fe-auth-login-btn:hover{opacity:.9;} @media (max-width:560px){ .fe-auth-slot{position:static; justify-content:flex-end; margin-top:.6rem;} } /* Below the same breakpoint assets/mobile-nav.js's bottom tab bar takes over (its Profile tab owns login/sign-out there instead) -- showing both would be redundant chrome competing for a narrow header. */ @media (max-width:720px){ .fe-auth-slot{display:none;} } header.sheet-header a.backlink{ color:var(--blueprint); opacity:.85; text-decoration:none; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; } header.sheet-header a.backlink:hover{opacity:1;} header.sheet-header h1{color:var(--ink); font-size:1.25rem; margin-top:.6rem;} header.sheet-header .subtitle{ font-family:var(--font-body); text-transform:none; letter-spacing:normal; font-weight:400; color:var(--graphite); font-size:.8rem; margin-top:.3rem; max-width:640px; } /* -- dimension line: signature divider device -- */ .dim-line{position:relative; height:1px; background:var(--border-strong); margin:2rem 0;} .dim-line::before, .dim-line::after{ content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--border-strong); } .dim-line::before{left:0;} .dim-line::after{right:0;} .dim-line .dim-label{ position:absolute; top:-1.55rem; left:50%; transform:translateX(-50%); background:var(--paper); padding:0 .5rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; color:var(--graphite); text-transform:uppercase; white-space:nowrap; } /* -- dimension progress bar: replaces generic rounded pill progress bars -- */ .dim-progress{position:relative; height:2px; background:var(--border); margin:1.9rem 0 1.6rem;} .dim-progress::before, .dim-progress::after{ content:""; position:absolute; top:-5px; width:1px; height:11px; background:var(--border-strong); } .dim-progress::before{left:0;} .dim-progress::after{right:0;} .dim-progress .fill{position:absolute; top:0; left:0; height:100%; background:var(--blueprint);} .dim-progress .fill-label{ position:absolute; top:-1.55rem; right:0; transform:translateX(50%); font-family:var(--font-mono); font-size:.72rem; color:var(--blueprint); white-space:nowrap; } /* -- cards: hairline border, minimal radius, no drop shadows -- */ .card{ background:var(--paper-2); border:1px solid var(--border); border-radius:var(--radius); } .card-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:.95rem;} /* -- buttons -- */ .btn{ display:inline-block; padding:.6rem 1.05rem; border-radius:var(--radius); border:1.5px solid var(--border-strong); background:var(--paper-2); color:var(--ink); cursor:pointer; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; } .btn:hover{background:var(--grid-line);} .btn.primary{background:var(--blueprint); color:var(--paper-2); border-color:var(--blueprint);} .btn.redline{background:var(--warn-bg); color:var(--redline); border-color:var(--redline);} .btn:disabled{opacity:.4; cursor:not-allowed;} /* -- tables -- */ table{width:100%; border-collapse:collapse; font-size:.87rem;} th, td{text-align:left; padding:.5rem .55rem; border-bottom:1px solid var(--border);} th{font-family:var(--font-mono); color:var(--graphite); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;} /* -- badges / pills (kept low-radius, technical) -- */ .pill{ display:inline-block; padding:.14rem .55rem; border-radius:2px; font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.03em; border:1px solid currentColor; } .pill.ok{color:var(--ok); background:var(--ok-bg);} .pill.warn{color:var(--redline); background:var(--warn-bg);} .pill.neutral{color:var(--graphite); background:transparent;} footer.sheet-footer{ border-top:1px solid var(--border); color:var(--graphite); font-size:.75rem; font-family:var(--font-mono); padding:1.2rem 1rem; letter-spacing:.02em; }