/* PoliGuide — design system tokens & shared styles Reference: poliguide-design-system.md v2.0 Fonts loaded via Google Fonts in each . */ /* ──────────────────────────────────────────────────────────── Reset ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; } img, picture, svg { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } a { color: inherit; } /* ──────────────────────────────────────────────────────────── Tokens ──────────────────────────────────────────────────────────── */ :root { /* Font stacks (design system §2.1) */ --ff-display: "Fraunces", Georgia, "Times New Roman", serif; --ff-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Light theme (§3.1) */ --paper: #fbf6eb; --paper-alt: #f2ecdd; --surface: #ffffff; --ink: #1f1a24; --ink-soft: #5c5460; --ink-faint: #9a9098; --ink-ghost: #c8bfb3; --rule: #e6dfd0; --brand: #c0362c; --brand-deep: #8e2419; --brand-soft: #f3ddd8; --highlight: #fee9c8; --ok: #2c6e49; /* Spacing (§4) — 4px base */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* Layout */ --container-max: 1200px; --container-prose: 700px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; } @media (prefers-color-scheme: dark) { :root { --paper: #161218; --paper-alt: #201b22; --surface: #221c24; --ink: #f3ebe0; --ink-soft: #a39a91; --ink-faint: #6c6168; --ink-ghost: #3a3139; --rule: #2b2430; --brand: #e86a5a; --brand-deep: #c0362c; --brand-soft: #3a1f1c; --highlight: #3b2d1a; --ok: #5daa7a; } } /* ──────────────────────────────────────────────────────────── Base ──────────────────────────────────────────────────────────── */ body { font-family: var(--ff-ui); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv01", "kern"; overflow-x: hidden; } html { overflow-x: hidden; } ::selection { background: var(--brand); color: var(--paper); } /* Focus — visible, on-brand, never just removed */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Paper grain — barely-there print texture (not noise spam) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient( 900px 500px at 18% -5%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 60% ), radial-gradient( 700px 400px at 95% 110%, color-mix(in srgb, var(--ink) 5%, transparent), transparent 55% ); opacity: 0.7; } /* Skip link for a11y */ .skip-link { position: absolute; top: -100px; left: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--paper); text-decoration: none; border-radius: var(--radius-md); z-index: 200; font-weight: 600; font-size: 0.875rem; } .skip-link:focus { top: var(--s-4); } /* ──────────────────────────────────────────────────────────── Layout ──────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--s-5); } @media (min-width: 768px) { .container { padding: 0 var(--s-8); } } .container-prose { max-width: var(--container-prose); margin: 0 auto; padding: 0 var(--s-5); } @media (min-width: 768px) { .container-prose { padding: 0 var(--s-8); } } section { padding: var(--s-20) 0; } @media (min-width: 768px) { section { padding: var(--s-24) 0; } } .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } /* ──────────────────────────────────────────────────────────── Typography (§2.2) ──────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .display-xl, .display-l, .display-m, .display-s { font-family: var(--ff-display); color: var(--ink); font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; /* Fraunces variable: optical sizing follows actual size */ font-optical-sizing: auto; font-variation-settings: "opsz" 144; } h1, .display-xl { font-size: clamp(2.75rem, 5vw + 1rem, 5.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 0.98; } h2, .display-l { font-size: clamp(2rem, 3.5vw + 0.5rem, 3.5rem); font-weight: 600; letter-spacing: -0.026em; line-height: 1.04; } h3, .display-m { font-size: clamp(1.4rem, 2vw, 1.875rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; } h4, .display-s { font-size: 1.25rem; font-weight: 600; line-height: 1.2; } p { font-size: 1rem; line-height: 1.6; color: var(--ink); text-wrap: pretty; } .deck { font-size: clamp(1.0625rem, 1vw + 0.75rem, 1.25rem); color: var(--ink-soft); line-height: 1.55; font-weight: 400; max-width: 56ch; } .kicker { display: inline-flex; align-items: center; flex-wrap: wrap; font-family: var(--ff-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-3); } .kicker .subject { color: var(--brand); } .kicker .slash { color: var(--ink-ghost); margin: 0 0.5em; font-weight: 400; } .eyebrow { display: block; font-family: var(--ff-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-4); } .tabular { font-variant-numeric: tabular-nums; } .lead { font-family: var(--ff-display); font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.625rem); font-weight: 400; line-height: 1.42; color: var(--ink); letter-spacing: -0.005em; } /* Editorial pull-quote (§5.5) */ .pull-quote { font-family: var(--ff-display); font-size: clamp(1.5rem, 2vw + 0.75rem, 2.125rem); font-weight: 400; line-height: 1.32; color: var(--ink); letter-spacing: -0.012em; border-left: 3px solid var(--brand); padding-left: var(--s-6); max-width: 32ch; text-wrap: balance; } .pull-quote cite { display: block; font-family: var(--ff-ui); font-size: 0.8rem; font-style: normal; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-top: var(--s-4); } /* ──────────────────────────────────────────────────────────── Buttons (§5.8) ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--ff-ui); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.005em; padding: 11px 22px; border-radius: var(--radius-pill); border: 1px solid transparent; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #fbf6eb; } .btn-primary:hover { background: var(--brand-deep); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-secondary:hover { background: var(--ink); color: var(--paper); } .btn-ghost { background: transparent; color: var(--ink-soft); } .btn-ghost:hover { color: var(--ink); } .btn-arrow::after { content: "→"; color: inherit; margin-left: var(--s-1); } /* ──────────────────────────────────────────────────────────── Navigation ──────────────────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--rule); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-4) 0; } .brand-mark { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); } .brand-mark img { width: 32px; height: 32px; border-radius: 8px; } .brand-mark .wordmark { font-family: var(--ff-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .nav-links { display: flex; align-items: center; gap: var(--s-8); list-style: none; } .nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color 0.15s ease; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); } .nav-actions { display: flex; align-items: center; gap: var(--s-3); } .nav-cta { /* Mobile-friendly CTA: tighter padding + smaller text on small screens */ padding: 9px 14px; font-size: 0.875rem; } @media (min-width: 760px) { .nav-cta { padding: 11px 18px 12px; font-size: 0.95rem; } } @media (max-width: 760px) { .nav-links { display: none; } .nav-inner { gap: var(--s-3); } .brand-mark .wordmark { font-size: 1rem; } .brand-mark img { width: 28px; height: 28px; } } /* ──────────────────────────────────────────────────────────── Store badges (custom — match editorial design) ──────────────────────────────────────────────────────────── */ .store-badges { display: flex; gap: var(--s-3); flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; gap: var(--s-3); padding: 11px 18px 12px; background: var(--ink); color: var(--paper); text-decoration: none; border-radius: var(--radius-md); transition: transform 0.15s ease, background 0.15s ease; min-width: 178px; } .store-badge:hover { transform: translateY(-2px); background: #000; } .store-badge svg { width: 26px; height: 26px; flex-shrink: 0; fill: currentColor; } .store-badge .label-stack { display: flex; flex-direction: column; text-align: left; line-height: 1; } .store-badge .label-small { font-family: var(--ff-ui); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.02em; opacity: 0.85; margin-bottom: 3px; } .store-badge .label-big { font-family: var(--ff-ui); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } /* ──────────────────────────────────────────────────────────── Footer ──────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--rule); padding: var(--s-16) 0 var(--s-8); margin-top: var(--s-16); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-12); margin-bottom: var(--s-12); } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-10) var(--s-6); } .footer-brand { grid-column: 1 / -1; } } .footer-brand .brand-mark { margin-bottom: var(--s-4); } .footer-brand p { color: var(--ink-soft); max-width: 36ch; font-size: 0.95rem; } .footer-section h4 { font-family: var(--ff-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-4); } .footer-section ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); } .footer-section a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; transition: color 0.15s ease; } .footer-section a:hover { color: var(--ink); } .footer-bottom { border-top: 1px solid var(--rule); padding-top: var(--s-6); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4); color: var(--ink-faint); font-size: 0.85rem; } .footer-bottom a { color: var(--ink-soft); text-decoration: none; } .footer-bottom a:hover { color: var(--ink); } /* ──────────────────────────────────────────────────────────── Section heads (shared editorial header pattern) ──────────────────────────────────────────────────────────── */ .section-head { margin-bottom: var(--s-12); max-width: 56ch; } .section-head .kicker { margin-bottom: var(--s-4); } .section-head .deck { margin-top: var(--s-4); } /* ──────────────────────────────────────────────────────────── Reveal — staggered fade/lift on initial load ──────────────────────────────────────────────────────────── */ @keyframes reveal-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; animation: reveal-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .reveal-1 { animation-delay: 0.05s; } .reveal-2 { animation-delay: 0.16s; } .reveal-3 { animation-delay: 0.27s; } .reveal-4 { animation-delay: 0.38s; } .reveal-5 { animation-delay: 0.5s; } /* ──────────────────────────────────────────────────────────── Fleuron — restrained section ornament Small italic mark, centered between sections, ink-faint. ──────────────────────────────────────────────────────────── */ .fleuron { display: flex; align-items: center; justify-content: center; gap: var(--s-4); color: var(--ink-faint); font-family: var(--ff-display); font-style: italic; font-size: 1.25rem; margin: 0; padding: var(--s-12) 0; } .fleuron::before, .fleuron::after { content: ""; display: block; width: 60px; height: 1px; background: var(--rule); } /* ──────────────────────────────────────────────────────────── MP profile spotlight — mirrors the app's MP card ──────────────────────────────────────────────────────────── */ .mp-spotlight { background: var(--paper-alt); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s-24) 0; } .mp-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-16); align-items: center; } @media (min-width: 980px) { .mp-grid { grid-template-columns: 1fr 1fr; gap: var(--s-20); } } .mp-card { background: var(--paper); border-radius: var(--radius-lg); padding: var(--s-8) var(--s-6); border: 1px solid var(--rule); max-width: 460px; width: 100%; margin: 0 auto; --score-hi: var(--ok); --score-med: #c08a3e; --score-low: var(--brand); } @media (prefers-color-scheme: dark) { .mp-card { --score-med: #d4a060; } } .mp-head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; margin-bottom: var(--s-6); } .mp-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--paper-alt); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; border: 1px solid var(--rule); } .mp-id h3 { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); } .mp-id .mp-meta { font-family: var(--ff-ui); font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; } .mp-id .mp-meta .dot { color: var(--ink-ghost); margin: 0 0.5em; } .mp-rank { text-align: right; font-variant-numeric: tabular-nums; } .mp-rank .rank-num { display: block; font-family: var(--ff-display); font-size: 1.125rem; font-weight: 600; color: var(--brand); letter-spacing: -0.02em; line-height: 1; } .mp-rank .rank-trend { display: block; font-family: var(--ff-ui); font-size: 0.7rem; color: var(--ok); font-weight: 600; margin-top: 3px; } .mp-overall { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s-4) 0; margin-bottom: var(--s-6); } .overall-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-2); } .overall-row .lbl { font-family: var(--ff-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .overall-row .val { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); font-variant-numeric: tabular-nums; } .overall-row .val small { font-family: var(--ff-ui); font-size: 0.75rem; font-weight: 500; color: var(--ink-faint); margin-left: 2px; } .overall-bar { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; } .overall-bar > span { display: block; height: 100%; background: linear-gradient( 90deg, var(--ok) 0%, var(--score-med) 100% ); border-radius: 2px; } .mp-section-head { display: flex; align-items: center; gap: var(--s-2); font-family: var(--ff-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-4); } .mp-section-head .glyph { color: var(--brand); font-family: var(--ff-display); font-style: italic; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 0.95rem; } .mp-scores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-5); } @media (max-width: 480px) { .mp-scores { grid-template-columns: 1fr; gap: var(--s-3); } } .score { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px var(--s-3); align-items: center; } .score .s-lbl { font-family: var(--ff-ui); font-size: 0.85rem; color: var(--ink); font-weight: 500; } .score .s-val { font-family: var(--ff-display); font-size: 1rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; } .score .s-bar { grid-column: 1 / -1; grid-row: 2; display: block; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; } .score .s-bar > span { display: block; height: 100%; border-radius: 2px; } .score .hi { background: var(--score-hi); } .score .med { background: var(--score-med); } .score .low { background: var(--score-low); } .mp-club { text-align: center; font-family: var(--ff-ui); font-size: 0.8rem; color: var(--ink-soft); padding: var(--s-3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6); font-variant-numeric: tabular-nums; } .mp-club strong { color: var(--ink); font-weight: 600; } .mp-ethics { font-family: var(--ff-display); font-size: 1rem; line-height: 1.55; color: var(--ink); font-weight: 400; letter-spacing: -0.005em; text-wrap: pretty; } .mp-snapshot { margin-top: var(--s-5); font-family: var(--ff-ui); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); text-align: right; } /* ──────────────────────────────────────────────────────────── Mobile sticky CTA — appears after scroll on small screens ──────────────────────────────────────────────────────────── */ .mobile-cta { display: none; } @media (max-width: 760px) { .mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; gap: var(--s-3); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .mobile-cta[data-visible="true"] { transform: translateY(0); } .mobile-cta .store-badge { flex: 1; min-width: 0; padding: 9px 12px; } .mobile-cta .store-badge .label-small { font-size: 0.6rem; } .mobile-cta .store-badge .label-big { font-size: 0.95rem; } }