/* ========================================================================== Fauci Files — Question Bank · library.css Shared design library for all site pages. Load in each page's : (or "../library.css" from a one-level-deep page directory) ========================================================================== */ /* ---- Tokens ---- */ :root { /* Color */ --ff-navy-dark: #1c2a6b; /* header bg, primary buttons, table header rule */ --ff-navy: #37458f; /* links, avatar bg, chip text, button hover */ --ff-navy-deep: #1a2140; /* body text, headings */ --ff-blue-accent: #002DFF; /* eyebrow labels, active/hover accents */ --ff-ink-muted: #5c6386; /* secondary text */ --ff-ink-faint: #8087a8; /* tertiary text, ids */ --ff-paper: #f4f3ee; /* page background, light text on navy */ --ff-white: #ffffff; /* cards, table surfaces */ --ff-border: #e6e4da; /* card borders */ --ff-border-soft: #efede4; /* row dividers */ --ff-surface-hover: #fbfaf7; --ff-chip-bg: #eceef9; /* mode chip background */ --ff-nav-text: #d9ddf2; /* nav links on navy */ --ff-nav-muted: #9aa5d8; /* "Question Bank" wordmark suffix */ /* Status (score badges) */ --ff-good: #2f7a4d; --ff-mid: #b07a1f; --ff-poor: #a94442; /* Type */ --ff-font-serif: 'Newsreader', serif; /* wordmark, page titles, big numbers */ --ff-font-sans: 'IBM Plex Sans', sans-serif; /* body, UI */ --ff-font-mono: 'Courier New', monospace; /* eyebrows, column labels, ids, question IDs */ /* Shape & spacing */ --ff-radius-card: 16px; --ff-radius-control: 1px; /* buttons and chips are near-square */ --ff-header-height: 64px; --ff-page-max: 1180px; --ff-page-pad-x: 40px; } /* ---- Base ---- */ html, body { margin: 0; padding: 0; background: var(--ff-paper); } body { font-family: var(--ff-font-sans); color: var(--ff-navy-deep); } a { color: var(--ff-navy); text-decoration: none; } a:hover { color: var(--ff-navy-dark); } /* ---- Motion ---- */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .ff-rise { animation: rise 0.5s ease both; } /* ---- Header / nav ---- */ .ff-header { background: var(--ff-navy-dark); color: var(--ff-paper); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--ff-page-pad-x); height: var(--ff-header-height); } .ff-wordmark { font-family: var(--ff-font-serif); font-size: 24px; font-weight: 600; letter-spacing: 0.2px; color: var(--ff-paper); } .ff-wordmark:hover { color: var(--ff-white); } .ff-wordmark-suffix { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ff-nav-muted); white-space: nowrap; } .ff-nav { display: flex; align-items: center; gap: 20px; } .ff-nav-link { font-size: 14px; font-weight: 500; color: var(--ff-nav-text); white-space: nowrap; } .ff-nav-link:hover { color: var(--ff-white); } .ff-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ff-navy); color: var(--ff-paper); display: grid; place-items: center; font-size: 13px; font-weight: 600; } /* ---- Page scaffold ---- */ .ff-main { max-width: var(--ff-page-max); margin: 0 auto; padding: 64px var(--ff-page-pad-x) 96px; } .ff-eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ff-blue-accent); font-weight: 600; font-family: var(--ff-font-mono); } .ff-page-title { margin: 0; font-family: var(--ff-font-serif); font-weight: 500; font-size: 46px; line-height: 1.05; letter-spacing: -0.5px; color: var(--ff-navy-deep); } .ff-page-sub { margin: 14px 0 0; font-size: 17px; color: var(--ff-ink-muted); } /* ---- Buttons ---- */ .ff-btn-primary { background: var(--ff-navy-dark); color: var(--ff-paper); border: none; border-radius: var(--ff-radius-control); padding: 12px 24px; font-family: var(--ff-font-sans); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; } .ff-btn-primary:hover { background: var(--ff-navy); } .ff-btn-ghost { background: transparent; color: var(--ff-nav-text); border: 3px solid rgba(217, 221, 242, 0.4); border-radius: var(--ff-radius-control); padding: 3px 16px; font-family: var(--ff-font-sans); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; } .ff-btn-ghost:hover { background: rgba(217, 221, 242, 0.12); color: var(--ff-white); } /* ---- Cards & tables ---- */ .ff-card { background: var(--ff-white); border: 1px solid var(--ff-border); border-radius: var(--ff-radius-card); overflow: hidden; } .ff-col-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--ff-navy-dark); font-family: var(--ff-font-mono); } .ff-table-head { border-bottom: 2px solid var(--ff-navy-dark); } .ff-table-row { border-bottom: 1px solid var(--ff-border-soft); } .ff-table-row:hover { background: var(--ff-surface-hover); } /* ---- Chips & badges ---- */ .ff-chip-mode { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; color: var(--ff-navy); background: var(--ff-chip-bg); border-radius: var(--ff-radius-control); padding: 2px 7px; width: fit-content; } .ff-chip-tag { font-size: 12px; color: var(--ff-navy-deep); background: var(--ff-paper); border: 1px solid var(--ff-border); border-radius: var(--ff-radius-control); padding: 3px 9px; } .ff-score-badge { width: 46px; height: 46px; border-radius: 50%; color: var(--ff-white); display: grid; place-items: center; font-size: 13px; font-weight: 600; font-family: var(--ff-font-mono); } .ff-score-good { background: var(--ff-good); } .ff-score-mid { background: var(--ff-mid); } .ff-score-poor { background: var(--ff-poor); } /* ---- Text utilities ---- */ .ff-text-muted { font-size: 13px; color: var(--ff-ink-muted); } .ff-text-mono-id { font-size: 12px; font-family: var(--ff-font-mono); color: var(--ff-ink-faint); } /* ---- Cards (dashboard hero + tool tiles) ---- */ .ff-hero-card { grid-row: span 2; background: var(--ff-navy-dark); color: var(--ff-paper); border-radius: var(--ff-radius-card); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; min-height: 181px; box-shadow: 0 12px 32px rgba(28, 42, 107, 0.22); transition: transform 0.18s ease, box-shadow 0.18s ease; } .ff-hero-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(28, 42, 107, 0.3); color: var(--ff-white); } .ff-hero-card h2 { margin: 0 0 8px; font-family: var(--ff-font-serif); font-weight: 500; font-size: 30px; color: var(--ff-white); } .ff-hero-card p { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: #b9c1e6; } .ff-hero-cta { font-size: 16px; line-height: 1; font-family: var(--ff-font-sans); } .ff-tile { background: var(--ff-white); border: 1px solid var(--ff-border); border-radius: var(--ff-radius-card); padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .ff-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26, 33, 64, 0.1); border-color: #c6cbe8; } .ff-tile-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--ff-chip-bg); display: grid; place-items: center; } .ff-tile h3 { margin: 6px 0 0; font-family: var(--ff-font-serif); font-weight: 600; font-size: 21px; color: var(--ff-navy-deep); } .ff-tile p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ff-ink-muted); }