/* Ouma DS tokens (fonts come from Google Fonts in base templates) */ :root { /* ---------- CORE PALETTE ---------- */ --ouma-dark-teal: #0D3A38; /* primary brand ink, dark surfaces */ --ouma-teal-green: #23B1A6; /* primary accent, links, highlights */ --ouma-light-mint: #C8EAE4; /* soft teal surface */ --ouma-charcoal: #333333; /* body text */ --ouma-mid-gray: #6C757D; /* secondary text */ --ouma-light-gray: #E9ECEF; /* rules, dividers */ --ouma-white: #FFFFFF; /* ---------- WARM TONES ---------- */ --ouma-warm-blush: #E8C4B8; /* warm surface, audience card */ --ouma-warm-sand: #F5EDE8; /* section background */ --ouma-warm-terracotta:#C4836A; /* emphasis, labels, italics */ --ouma-warm-cream: #FBF8F5; /* page / section background */ --ouma-soft-sage: #D4E4D9; /* tertiary surface */ /* ---------- TYPE FAMILIES ---------- */ --ouma-font-serif: "Lora", Georgia, "Times New Roman", serif; --ouma-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---------- TYPE SCALE (desktop) ---------- */ --ouma-fs-display: 3.5rem; /* 56px — hero h1 */ --ouma-fs-h1: 2.75rem; /* 44px — section h1/h2 */ --ouma-fs-h2: 2.25rem; /* 36px — smaller section head */ --ouma-fs-h3: 1.75rem; /* 28px — card title */ --ouma-fs-h4: 1.35rem; /* 22px — small card title */ --ouma-fs-body-lg: 1.15rem; /* 18px — hero sub, lede */ --ouma-fs-body: 1rem; /* 16px — body */ --ouma-fs-body-sm: 0.9rem; /* 14px — small body */ --ouma-fs-micro: 0.72rem; /* ~11.5 — uppercase labels */ /* ---------- SEMANTIC ROLES ---------- */ --ouma-fg: var(--ouma-charcoal); --ouma-fg-muted: var(--ouma-mid-gray); --ouma-fg-inverted: var(--ouma-white); --ouma-fg-brand: var(--ouma-dark-teal); --ouma-fg-accent: var(--ouma-teal-green); --ouma-fg-warm: var(--ouma-warm-terracotta); --ouma-bg: var(--ouma-white); --ouma-bg-cream: var(--ouma-warm-cream); --ouma-bg-sand: var(--ouma-warm-sand); --ouma-bg-dark: var(--ouma-dark-teal); --ouma-border: rgba(0,0,0,0.06); --ouma-border-dark: rgba(255,255,255,0.10); /* ---------- RADII ---------- */ --ouma-radius-sm: 8px; --ouma-radius-md: 14px; --ouma-radius-lg: 16px; --ouma-radius-xl: 20px; --ouma-radius-2xl: 24px; --ouma-radius-pill: 100px; /* ---------- SHADOWS ---------- */ --ouma-shadow-sm: 0 1px 4px rgba(0,0,0,0.04); --ouma-shadow-md: 0 2px 12px rgba(0,0,0,0.06); --ouma-shadow-lg: 0 6px 20px rgba(0,0,0,0.07); --ouma-shadow-card: 0 1px 2px rgba(0,0,0,.03), 0 4px 8px rgba(0,0,0,.03), 0 12px 24px rgba(0,0,0,.04), 0 24px 48px rgba(0,0,0,.04); --ouma-shadow-hover: 0 8px 30px rgba(13,58,56,0.06); /* ---------- SPACING ---------- */ --ouma-sp-1: 0.25rem; --ouma-sp-2: 0.5rem; --ouma-sp-3: 0.75rem; --ouma-sp-4: 1rem; --ouma-sp-5: 1.5rem; --ouma-sp-6: 2rem; --ouma-sp-7: 2.5rem; --ouma-sp-8: 3rem; --ouma-sp-9: 5rem; --ouma-sp-10: 7rem; /* ---------- SIGNATURE GRADIENTS ---------- */ --ouma-gradient-hero: linear-gradient(160deg, #F5EDE8 0%, #E8F4F1 40%, #FBF8F5 70%, #EEE6DF 100%); /* @kind color */ --ouma-gradient-hero-dark: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(200,234,228,0.7) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 20%, rgba(232,196,184,0.6) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 50% 50%, rgba(35,177,166,0.25) 0%, transparent 50%), linear-gradient(160deg, #0D3A38 0%, #134847 25%, #1a5c58 45%, #0D3A38 100%); /* @kind color */ --ouma-gradient-accent-bar: linear-gradient(90deg, var(--ouma-teal-green), var(--ouma-light-mint), var(--ouma-warm-blush), var(--ouma-teal-green)); /* @kind color */ } /* =========================================================== SEMANTIC ELEMENT STYLES =========================================================== */ body, .ouma-body { font-family: var(--ouma-font-sans); color: var(--ouma-fg); background: var(--ouma-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .ouma-h1, .ouma-h2, .ouma-h3, .ouma-h4 { font-family: var(--ouma-font-serif); font-weight: 500; color: var(--ouma-fg-brand); letter-spacing: -0.02em; line-height: 1.2; } h1, .ouma-h1 { font-size: var(--ouma-fs-h1); line-height: 1.15; } h2, .ouma-h2 { font-size: var(--ouma-fs-h1); } h3, .ouma-h3 { font-size: var(--ouma-fs-h3); } h4, .ouma-h4 { font-size: var(--ouma-fs-h4); font-weight: 600; } .ouma-display { font-family: var(--ouma-font-serif); font-weight: 500; font-size: var(--ouma-fs-display); line-height: 1.15; letter-spacing: -0.02em; color: var(--ouma-fg-brand); } .ouma-display em { font-style: italic; color: var(--ouma-warm-terracotta); } p, .ouma-p { font-family: var(--ouma-font-sans); font-size: var(--ouma-fs-body); line-height: 1.7; color: var(--ouma-fg-muted); } .ouma-lede { font-size: var(--ouma-fs-body-lg); line-height: 1.7; color: var(--ouma-fg-muted); } /* Italic serif pullquote (mission / values) */ .ouma-pullquote { font-family: var(--ouma-font-serif); font-style: italic; font-weight: 400; font-size: 1.55rem; line-height: 1.55; letter-spacing: -0.01em; color: var(--ouma-fg-brand); } /* Eyebrow / section label */ .ouma-eyebrow { font-family: var(--ouma-font-sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ouma-fg-accent); } .ouma-eyebrow--warm { color: var(--ouma-warm-terracotta); letter-spacing: 0.14em; } /* Micro uppercase (stat source, footer heading) */ .ouma-micro { font-family: var(--ouma-font-sans); font-size: var(--ouma-fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ouma-fg-muted); } /* Stat number */ .ouma-stat { font-family: var(--ouma-font-serif); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--ouma-fg-brand); } a, .ouma-link { color: var(--ouma-fg-accent); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--ouma-dark-teal); } /* Mint highlight under text (hero + section headings) */ .ouma-highlight { background: linear-gradient(to top, rgba(200,234,228,0.5) 0%, rgba(200,234,228,0.5) 40%, transparent 40%); padding: 0 0.1em; }