/* ============================================================ SOROPTIMIST OF POMPANO BEACH — Colors & Type Foundational design tokens. Import this file anywhere: ------------------------------------------------------------ Brand fonts are LICENSED (Proxima Nova, Palatino). Upload the licensed font files to fonts/ and add @font-face rules below; the tokens already point at the real families. Until then each stack falls back to a close system font (system sans / a Palatino-class serif) — no third-party substitute is loaded. ============================================================ */ /* ---------- Brand @font-face ---------- local()-only sources: the licensed face renders if it is installed on the machine; otherwise the token's fallback stack takes over. When you upload the licensed WEB fonts to fonts/, add url("fonts/…") before each local() to serve them everywhere. Do not point these at a different family. */ @font-face { font-family: "Proxima Nova"; src: local("Proxima Nova"), local("ProximaNova-Regular"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: local("Proxima Nova Semibold"), local("ProximaNova-Semibold"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: local("Proxima Nova Bold"), local("ProximaNova-Bold"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: local("Proxima Nova Extrabold"), local("ProximaNova-Extrabld"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Palatino Linotype"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Palatino Linotype"; src: local("Palatino Linotype Italic"), local("Palatino-Italic"), local("Palatino Italic"); font-weight: 400; font-style: italic; font-display: swap; } :root { /* ---------- BRAND COLOR ---------- */ /* Soroptimist "S" blue — the single most important brand color */ --so-blue: #4F8BC9; /* primary brand blue (the logo) */ --so-blue-deep: #2E5C92; /* darker blue — text on light, hovers */ --so-blue-tint: #EDF3FB; /* pale blue wash for fills */ /* Dream Program palette — drawn from the club brochure cover */ --so-indigo: #293374; /* deep navy-indigo, the anchor dark */ --so-purple: #712B84; /* royal purple */ --so-magenta: #D2408D; /* warm magenta */ --so-pink: #D8117D; /* vivid pink (high-energy accent) */ --so-gold: #F0C054; /* optimistic gold */ /* LiveYourDream.org sub-brand accents */ --so-coral: #EF5C4E; --so-teal: #36C9A6; /* ---------- NEUTRALS ---------- */ --ink: #1E2333; /* primary text — near-navy, not pure black */ --fg-1: #2A3142; /* strong text */ --fg-2: #545C70; /* secondary text */ --fg-3: #8A93A6; /* muted / captions / placeholders */ --line: #E3E7EF; /* hairline borders */ --line-strong: #CDD4E0; /* stronger dividers */ --bg: #FFFFFF; /* page */ --bg-soft: #F5F7FB; /* cool off-white section bg */ --bg-card: #FFFFFF; /* ---------- SEMANTIC ---------- */ --color-text: var(--ink); --color-text-muted: var(--fg-2); --color-primary: var(--so-blue); --color-primary-ink: var(--so-blue-deep); --color-accent: var(--so-pink); --color-success: #3A9D6E; --color-warning: var(--so-gold); --color-danger: #D24545; --color-link: var(--so-blue-deep); /* ---------- BRAND GRADIENTS ---------- */ /* "Investing in Dreams" cover gradient: pink → purple → indigo */ --grad-dream: linear-gradient(140deg, #D8117D 0%, #712B84 52%, #293374 100%); /* @kind color */ /* Softer header band */ --grad-blue: linear-gradient(135deg, #4F8BC9 0%, #2E5C92 100%); /* @kind color */ /* LiveYourDream.org circle gradient */ --grad-lyd: linear-gradient(150deg, #EF5C4E 0%, #6E2A74 55%, #54E0BE 100%); /* @kind color */ /* ============================================================ TYPOGRAPHY ============================================================ */ --font-sans: "Proxima Nova", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-serif: "Palatino Linotype", "Palatino", "Book Antiqua", Georgia, "Times New Roman", serif; /* Type scale (1.250 major-third-ish, tuned) */ --text-display: 600 56px/1.05 var(--font-sans); --text-h1: 700 40px/1.12 var(--font-sans); --text-h2: 700 30px/1.18 var(--font-sans); --text-h3: 600 22px/1.3 var(--font-sans); --text-body-lg: 400 19px/1.6 var(--font-sans); --text-body: 400 16px/1.6 var(--font-sans); --text-small: 400 14px/1.55 var(--font-sans); --text-eyebrow: 700 13px/1.2 var(--font-sans); /* pair with caps + tracking */ --text-quote: 400 26px/1.45 var(--font-serif); /* Letter-spacing */ --track-eyebrow: 0.14em; /* ALL-CAPS eyebrows & labels */ --track-wordmark:0.22em; /* SOROPTIMIST-style wide caps */ --track-tight: -0.01em; /* large display headings */ /* ---------- RADII ---------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ---------- SHADOWS / ELEVATION ---------- */ --shadow-sm: 0 1px 2px rgba(30,35,51,.06), 0 1px 3px rgba(30,35,51,.08); --shadow-md: 0 4px 12px rgba(30,35,51,.08), 0 2px 4px rgba(30,35,51,.05); --shadow-lg: 0 12px 32px rgba(41,51,116,.14), 0 4px 10px rgba(30,35,51,.06); --shadow-blue: 0 10px 28px rgba(79,139,201,.32); /* ---------- SPACING (4px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- LAYOUT ---------- */ --container: 1200px; --container-narrow: 760px; } /* ============================================================ SEMANTIC ELEMENT DEFAULTS Opt in with class="so-type" on a wrapper, or rely on these when building brand pages. ============================================================ */ .so-type, .so-type body { color: var(--ink); font: var(--text-body); } .so-display { font: var(--text-display); letter-spacing: var(--track-tight); color: var(--ink); } .so-h1 { font: var(--text-h1); letter-spacing: var(--track-tight); color: var(--ink); } .so-h2 { font: var(--text-h2); color: var(--ink); } .so-h3 { font: var(--text-h3); color: var(--ink); } .so-body-lg { font: var(--text-body-lg); color: var(--fg-1); } .so-body { font: var(--text-body); color: var(--fg-1); } .so-small { font: var(--text-small); color: var(--fg-2); } .so-quote { font: var(--text-quote); color: var(--so-indigo); font-style: italic; } /* Eyebrow / kicker — the brand's signature caps label */ .so-eyebrow { font: var(--text-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--so-blue-deep); } /* Wide inscriptional caps, echoing the SOROPTIMIST wordmark */ .so-wordmark { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: var(--track-wordmark); color: var(--so-blue); font-weight: 500; }