/* ============================================================ POLEGA-QUIGLEY FOR FL STATE HOUSE — Core Tokens Colors + Typography. Import this everywhere. ============================================================ */ /* ---- Fonts ---- Heading/Logo: Roc Grotesk (roc-grotesk) — weights 100..900 Body: STIX Two Text (stix-two-text) — 400/700, roman + italic Both come from the campaign's licensed Adobe Fonts (Typekit) kit (kit id yph6nkc). The @font-face rules below are declared explicitly so the faces resolve even where the remote @import isn't followed. The kit (https://use.typekit.net/yph6nkc.css) may also be added to any page as a convenience — it serves the same faces. */ /* Roc Grotesk — display / headings / logo */ @font-face { font-family:"roc-grotesk"; font-style:normal; font-weight:400; font-display:swap; src:url("https://use.typekit.net/af/978839/00000000000000007735b7d4/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"); } @font-face { font-family:"roc-grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("https://use.typekit.net/af/95a747/00000000000000007735b7d0/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"); } @font-face { font-family:"roc-grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("https://use.typekit.net/af/7c2f37/00000000000000007735b7c0/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"); } @font-face { font-family:"roc-grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("https://use.typekit.net/af/0ca66f/00000000000000007735b7c3/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"); } @font-face { font-family:"roc-grotesk"; font-style:normal; font-weight:800; font-display:swap; src:url("https://use.typekit.net/af/67b2f9/00000000000000007735b7bc/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"); } @font-face { font-family:"roc-grotesk"; font-style:normal; font-weight:900; font-display:swap; src:url("https://use.typekit.net/af/983e94/00000000000000007735b7c8/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"); } /* STIX Two Text — body */ @font-face { font-family:"stix-two-text"; font-style:normal; font-weight:400; font-display:swap; src:url("https://use.typekit.net/af/d001ae/00000000000000007735caff/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"); } @font-face { font-family:"stix-two-text"; font-style:italic; font-weight:400; font-display:swap; src:url("https://use.typekit.net/af/90b930/00000000000000007735caf8/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"); } @font-face { font-family:"stix-two-text"; font-style:normal; font-weight:700; font-display:swap; src:url("https://use.typekit.net/af/5e9a4e/00000000000000007735cb02/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"); } @font-face { font-family:"stix-two-text"; font-style:italic; font-weight:700; font-display:swap; src:url("https://use.typekit.net/af/5deb99/00000000000000007735cafa/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"); } :root { /* ---------- Brand palette (from logo guide PDF) ---------- */ --pq-green: #226040; /* PANTONE 7734 C — primary, "LINDSAY" */ --pq-navy: #011B2B; /* PANTONE 296 C — text, "POLEGA-QUIGLEY" */ --pq-gold: #D29E14; /* PANTONE 7555 C — accents, tagline */ --pq-rust: #C0541B; /* PANTONE 167 C — ibis, Florida shape, alerts */ /* ---------- Tints & shades (oklch-derived, on-brand) ---------- */ --pq-green-700: #1a4c33; --pq-green-600: #226040; --pq-green-500: #2c7650; --pq-green-100: #e2ede7; /* soft green wash for section bands */ --pq-navy-900: #011018; --pq-navy-800: #011B2B; --pq-navy-700: #0a2d40; --pq-gold-600: #b8870f; --pq-gold-100: #f7eccf; --pq-rust-600: #a8470f; --pq-rust-100: #f5e2d6; /* ---------- Neutrals ---------- */ --pq-white: #ffffff; --pq-paper: #faf8f4; /* warm off-white page background */ --pq-sand: #f1ece3; /* card / band alt background */ --pq-line: #e3ddd2; /* hairline borders on paper */ --pq-line-strong: #cfc7b8; --pq-ink-60: rgba(1, 27, 43, 0.62); /* muted body text */ --pq-ink-40: rgba(1, 27, 43, 0.40); /* ---------- Semantic foreground/background ---------- */ --fg1: var(--pq-navy); /* primary text */ --fg2: var(--pq-ink-60); /* secondary text */ --fg3: var(--pq-ink-40); /* tertiary / captions */ --fg-on-dark: var(--pq-white); --bg1: var(--pq-paper); /* page */ --bg2: var(--pq-sand); /* raised band / card */ --bg-dark: var(--pq-navy); /* footer, dark sections */ --accent: var(--pq-gold); --accent-warm: var(--pq-rust); --brand: var(--pq-green); /* ---------- Type families ---------- Roc Grotesk weight map: 400 Regular · 500 Medium · 600 Bold · 700 ExtraBold · 800 Black · 900 Heavy. Headlines use 800/900. */ --font-display: 'roc-grotesk', 'Arial Narrow', sans-serif; --font-body: 'stix-two-text', Georgia, 'Times New Roman', serif; /* ---------- Type scale (1.250 major third, 18px base) ---------- */ --text-xs: 0.75rem; /* 12 — micro labels */ --text-sm: 0.875rem; /* 14 — captions, footer */ --text-base: 1.125rem; /* 18 — body */ --text-lg: 1.375rem; /* 22 — lead paragraph */ --text-xl: 1.75rem; /* 28 — h4 / card title */ --text-2xl: 2.25rem; /* 36 — h3 */ --text-3xl: 3rem; /* 48 — h2 */ --text-4xl: 4rem; /* 64 — h1 */ --text-5xl: 5.5rem; /* 88 — hero display */ /* ---------- Radii ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* ---------- Elevation ---------- */ --shadow-sm: 0 1px 2px rgba(1,27,43,.08), 0 1px 1px rgba(1,27,43,.04); --shadow-md: 0 6px 18px rgba(1,27,43,.10), 0 2px 6px rgba(1,27,43,.06); --shadow-lg: 0 18px 48px rgba(1,27,43,.16), 0 6px 16px rgba(1,27,43,.08); /* ---------- Spacing (8px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- Layout ---------- */ --container: 1180px; --container-narrow: 760px; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ .pq-display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; color: var(--pq-navy); } h1, .pq-h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--text-4xl); line-height: 0.98; letter-spacing: -0.005em; color: var(--pq-navy); margin: 0; } h2, .pq-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1.0; color: var(--pq-navy); margin: 0; } h3, .pq-h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--text-2xl); line-height: 1.05; color: var(--pq-navy); margin: 0; } h4, .pq-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.1; color: var(--pq-navy); margin: 0; } /* Kicker / eyebrow — gold, tracked-out grotesk */ .pq-kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.14em; color: var(--pq-rust); } p, .pq-body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: 1.6; color: var(--fg1); margin: 0 0 1em; } .pq-lead { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.5; color: var(--fg1); } .pq-caption { font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg2); } .pq-disclaimer { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--fg3); line-height: 1.4; } a { color: var(--pq-green); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--pq-green-700); }