/* ============================================================================ QUENTIN FRANQUE · DESIGN SYSTEM Clean, simple, clear. My personal signature. Principle #1 — FEW READING LEVELS. A screen has a title and its content. That's it. No stacked eyebrow → title → subtitle → label. Labels & stats are rare accents. No version/kicker surtitles, ever. Usage: … (add qf--grid for the faint grid) ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap"); :root { color-scheme: light; --qf-paper: #f5f0e8; --qf-surface: #fffdf9; --qf-sand: #e7ddca; --qf-ink: #14192a; --qf-muted: #5a6072; --qf-hairline: rgba(20, 25, 42, 0.10); --qf-cobalt: #2b50e2; --qf-cobalt-deep: #1733b2; --qf-cobalt-lift: #93b4ff; --qf-cobalt-wash: rgba(43, 80, 226, 0.08); --qf-green: #0c9d72; --qf-serif: "Fraunces", Georgia, "Times New Roman", serif; --qf-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --qf-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --qf-title: clamp(2.2rem, 5vw, 3.6rem); --qf-stat: clamp(2rem, 4vw, 3rem); --qf-body: 1.0625rem; --qf-label: 0.75rem; --qf-1:.25rem; --qf-2:.5rem; --qf-3:.75rem; --qf-4:1rem; --qf-5:1.5rem; --qf-6:2rem; --qf-7:3rem; --qf-8:4.5rem; --qf-radius: 18px; --qf-radius-lg: 26px; --qf-radius-sm: 10px; --qf-shadow: 0 1px 2px rgba(20,25,42,.04), 0 12px 28px rgba(20,25,42,.06); --qf-ring: 0 0 0 3px rgba(43,80,226,.28); /* dark "breath" ground */ --qf-dark: #10162a; --qf-dark-text: #f4efe4; --qf-dark-muted: rgba(244,239,228,.62); --qf-dark-accent: #9db9ff; --qf-measure: 1040px; --qf-read: 64ch; --qf-gutter: clamp(1.25rem, 5vw, 2.5rem); --qf-ease: cubic-bezier(.2,.8,.2,1); --qf-reveal: 620ms ease; } * { box-sizing: border-box; } /* ============================================================================ 1 · SURFACE — cream, calm. Grid is opt-in via .qf--grid. ============================================================================ */ .qf { margin: 0; color: var(--qf-ink); font-family: var(--qf-sans); font-size: var(--qf-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: radial-gradient(60rem 40rem at 84% -10%, rgba(43,80,226,.05), transparent 60%), radial-gradient(50rem 40rem at -6% 2%, rgba(200,170,110,.10), transparent 55%), var(--qf-paper); background-attachment: fixed; } .qf > * { position: relative; z-index: 1; } /* opt-in faint grid */ .qf--grid::before { content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(20,25,42,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(20,25,42,.025) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 80%); mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 80%); } /* ============================================================================ 2 · TYPE — four roles only: Title · Body · Label · Stat. ============================================================================ */ .qf-title { margin: 0; font-family: var(--qf-serif); font-weight: 600; font-size: var(--qf-title); line-height: 1.0; letter-spacing: -0.02em; color: var(--qf-ink); max-width: 18ch; } .qf-lead { /* just a larger body — an accent, not a level */ margin: 0; font-size: 1.15rem; line-height: 1.55; color: var(--qf-muted); max-width: 42ch; } .qf-label { /* eyebrow == label == legend. One style. */ font-family: var(--qf-sans); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--qf-label); font-weight: 600; color: var(--qf-muted); } .qf-label--accent { color: var(--qf-cobalt); } .qf-prose { max-width: var(--qf-read); } .qf-prose p { margin: 0 0 var(--qf-4); } .qf-serif { font-family: var(--qf-serif); } .qf-accent { color: var(--qf-cobalt); } .qf-muted { color: var(--qf-muted); } .qf-num { font-variant-numeric: tabular-nums; } /* ============================================================================ 3 · STAT & FIGURE — cobalt serif number. ============================================================================ */ .qf-stat { font-family: var(--qf-serif); font-weight: 600; font-size: var(--qf-stat); line-height: 1; letter-spacing: -0.02em; color: var(--qf-cobalt); font-variant-numeric: tabular-nums; } .qf-stat__unit { font-size: .5em; font-weight: 500; } .qf-stat__label { margin-top: var(--qf-2); font-size: var(--qf-label); letter-spacing: .08em; text-transform: uppercase; color: var(--qf-muted); } .qf-figure { font-family: var(--qf-serif); font-weight: 600; font-size: clamp(5rem, 13vw, 10rem); line-height: .9; letter-spacing: -0.03em; color: var(--qf-cobalt); } /* ============================================================================ 4 · SURFACES & CONTENT COMPONENTS ============================================================================ */ .qf-card { border-radius: var(--qf-radius); background: var(--qf-surface); border: 1px solid var(--qf-hairline); box-shadow: var(--qf-shadow); padding: var(--qf-5); } .qf-card--flat { box-shadow: none; } .qf-card--quiet { background: transparent; border-style: dashed; box-shadow: none; } .qf-hr { height: 1px; border: 0; background: var(--qf-hairline); margin-block: var(--qf-6); } /* pull quote — editorial, one cobalt rule, big serif */ .qf-quote { margin: 0; padding-left: var(--qf-5); border-left: 3px solid var(--qf-cobalt); font-family: var(--qf-serif); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--qf-ink); } .qf-quote cite { display: block; margin-top: var(--qf-3); font-family: var(--qf-sans); font-style: normal; font-size: .9rem; color: var(--qf-muted); } /* numbered index / table of contents — big serif number + label */ .qf-index { display: grid; } .qf-index__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--qf-4); padding: var(--qf-4) 0; border-top: 1px solid var(--qf-hairline); } .qf-index__row:last-child { border-bottom: 1px solid var(--qf-hairline); } .qf-index__n { font-family: var(--qf-serif); font-weight: 600; font-size: 1.5rem; color: var(--qf-cobalt); font-variant-numeric: tabular-nums; min-width: 2ch; } .qf-index__t { font-family: var(--qf-serif); font-size: 1.15rem; } .qf-index__meta { font-size: .85rem; color: var(--qf-muted); font-variant-numeric: tabular-nums; } /* key–value rows */ .qf-kv { display: grid; } .qf-kv__row { display: flex; justify-content: space-between; gap: var(--qf-4); padding: var(--qf-3) 0; border-bottom: 1px solid var(--qf-hairline); } .qf-kv__k { color: var(--qf-muted); } .qf-kv__v { font-weight: 600; font-variant-numeric: tabular-nums; } /* callout / note — quiet block, one cobalt edge */ .qf-note { border-radius: var(--qf-radius-sm); border-left: 3px solid var(--qf-cobalt); background: var(--qf-cobalt-wash); padding: var(--qf-4) var(--qf-5); color: var(--qf-ink); } /* clean table */ .qf-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .qf-table th, .qf-table td { text-align: left; padding: var(--qf-3) var(--qf-4); border-bottom: 1px solid var(--qf-hairline); } .qf-table th { font: 600 var(--qf-label)/1 var(--qf-sans); text-transform: uppercase; letter-spacing: .1em; color: var(--qf-muted); } .qf-table tbody tr:hover { background: var(--qf-cobalt-wash); } /* ============================================================================ 5 · PILLS, FLAGS, LEGENDS ============================================================================ */ .qf-pill { display: inline-flex; align-items: center; gap: var(--qf-2); padding: var(--qf-2) var(--qf-3); border-radius: 999px; background: var(--qf-cobalt-wash); border: 1px solid rgba(43,80,226,.14); color: var(--qf-ink); font-size: .875rem; } .qf-pill strong { color: var(--qf-cobalt); font-weight: 600; } .qf-flag { display: inline-flex; align-items: center; padding: var(--qf-2) var(--qf-3); border-radius: 999px; background: var(--qf-cobalt-wash); color: var(--qf-cobalt); font-size: var(--qf-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .qf-legend { display: inline-flex; align-items: center; gap: var(--qf-2); font-size: var(--qf-label); font-weight: 600; color: var(--qf-ink); } .qf-swatch { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; } .qf-swatch--cobalt { background: var(--qf-cobalt); } .qf-swatch--green { background: var(--qf-green); } .qf-swatch--sand { background: var(--qf-sand); } /* ============================================================================ 6 · BARS ============================================================================ */ .qf-bar { height: .5rem; border-radius: 999px; background: rgba(20,25,42,.07); overflow: hidden; } .qf-bar__fill { display: block; height: 100%; width: var(--qf-fill, 0%); border-radius: inherit; background: var(--qf-cobalt); transition: width 800ms var(--qf-ease); } .qf-bar__fill--green { background: var(--qf-green); } /* ============================================================================ 7 · BUTTONS — scoped under .qf so link colour never overrides label. ============================================================================ */ .qf .qf-btn { display: inline-flex; align-items: center; gap: var(--qf-2); padding: var(--qf-3) var(--qf-5); border-radius: 999px; border: 1px solid transparent; font-family: var(--qf-sans); font-weight: 600; font-size: .9375rem; line-height: 1; cursor: pointer; text-decoration: none; transition: background 160ms, color 160ms, border-color 160ms; } .qf .qf-btn--primary { background: var(--qf-cobalt); color: #fff; } .qf .qf-btn--primary:hover { background: var(--qf-cobalt-deep); color: #fff; } .qf .qf-btn--ghost { background: transparent; color: var(--qf-ink); border-color: var(--qf-hairline); } .qf .qf-btn--ghost:hover { border-color: var(--qf-ink); color: var(--qf-ink); } /* links & focus */ .qf a { color: var(--qf-cobalt); text-decoration: none; } .qf a:not(.qf-btn):hover { text-decoration: underline; text-underline-offset: 3px; } .qf :focus-visible { outline: none; box-shadow: var(--qf-ring); border-radius: var(--qf-radius-sm); } /* ============================================================================ 8 · DARK "BREATH" SECTION ============================================================================ */ .qf-dark { background: var(--qf-dark); color: var(--qf-dark-text); } .qf-dark .qf-title, .qf-dark .qf-quote { color: var(--qf-dark-text); } .qf-dark .qf-lead, .qf-dark .qf-label, .qf-dark .qf-muted, .qf-dark .qf-kv__k { color: var(--qf-dark-muted); } .qf-dark .qf-stat, .qf-dark .qf-figure, .qf-dark .qf-accent, .qf-dark .qf-index__n { color: var(--qf-dark-accent); } .qf-dark .qf-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; color: var(--qf-dark-text); } .qf-dark .qf-hr, .qf-dark .qf-index__row, .qf-dark .qf-kv__row, .qf-dark .qf-table th, .qf-dark .qf-table td { border-color: rgba(255,255,255,.14); } .qf-dark .qf-bar { background: rgba(255,255,255,.12); } .qf-dark .qf-bar__fill { background: var(--qf-dark-accent); } .qf-dark .qf-note { background: rgba(157,185,255,.10); border-color: var(--qf-dark-accent); color: var(--qf-dark-text); } .qf-dark .qf-pill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--qf-dark-text); } .qf-dark .qf-pill strong { color: var(--qf-dark-accent); } /* ============================================================================ 9 · LAYOUT ============================================================================ */ .qf-wrap { width: min(var(--qf-measure), 100%); margin-inline: auto; padding-inline: var(--qf-gutter); } .qf-section { padding-block: var(--qf-8); } .qf-stack { display: grid; gap: var(--qf-4); } .qf-stack--lg { gap: var(--qf-6); } .qf-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--qf-4); } .qf-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--qf-5); } .qf-row { display: flex; flex-wrap: wrap; gap: var(--qf-3); align-items: center; } .qf-between { justify-content: space-between; } @media (max-width: 720px) { .qf-grid-3, .qf-grid-2 { grid-template-columns: 1fr; } } /* ============================================================================ 10 · MOTION ============================================================================ */ .qf-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--qf-reveal), transform var(--qf-reveal); will-change: opacity, transform; } .qf-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .qf-reveal { opacity: 1; transform: none; transition: none; } .qf-bar__fill { transition: none; } }