/* ========================================================================== DESIGN TOKENS ========================================================================== This file defines every color, spacing value, font size, radius, and shadow used on the site — as CSS custom properties (the official name for what people casually call "CSS variables"). WHY THIS FILE EXISTS ON ITS OWN: Every other CSS file in this project references these tokens instead of writing raw values like "16px" or "#4F7CF7" directly. That means if you ever want to change the brand blue, or make all spacing slightly larger, you edit ONE value in THIS file and it updates everywhere on the site automatically. This is the same idea as the app's AppColors.swift, AppFonts.swift, and AppSpacing.swift files — we're translating that same system from Swift into CSS. HOW CSS CUSTOM PROPERTIES WORK: Any property starting with two dashes (--like-this) is a custom property. It doesn't do anything by itself — it's just a named storage box for a value. You "use" a token elsewhere with the var() function, like: color: var(--color-brand-blue); If you change the value here, every var(--color-brand-blue) on the entire site updates at once. ========================================================================== */ :root { /* ------------------------------------------------------------------ COLOR — BRANDING UPDATE (v2): rebalanced to match the app itself more closely. The app's default and most-used accent is system blue — pink only ever appears as one edge of the app icon's gradient, never in the app's actual UI. The original v1 tokens used a 50/50 blue-to-pink gradient everywhere (buttons, nav mark, hero glow), which read as more "playful consumer app" than the calm, trustworthy, premium feel we want. Blue is now the primary color throughout; pink is kept only as a rare, deliberate accent. ACCESSIBILITY NOTE: the original blue (#4F7CF7) and pink (#E85A9E) both FAILED WCAG AA contrast (4.5:1 minimum) as text and as button fills with white text on top — they measured 3.3-3.8:1. Every color below was tested with an actual luminance-contrast calculation (not eyeballed) and passes AA at every place it's used in this codebase. ------------------------------------------------------------------ */ /* Brand blue — now deep enough to pass AA as text, as a link color, and as a button fill with white text sitting on top of it. This ONE token is used for nearly everything blue on the site: links, the section eyebrow labels, pill text, icons, button fills. */ --color-brand-blue: #3560D6; /* A brighter blue, reserved ONLY for large low-opacity decorative shapes (like the hero's background glow) where no text ever sits directly on top of it, so the AA requirement doesn't apply. Never use this token behind text. UPDATED for logo alignment: value shifted from #4F7CF7 to a softer, paler sky-blue sampled directly from the real UpLift Me logo's stroke gradient (#9ED9F5–#ABDDF5 range in the source asset). This token was already documented as decorative-only before this change, which is exactly why it's the safe place to introduce the logo's actual lighter palette — no contrast requirement applies here. */ --color-brand-blue-bright: #7EC4F0; /* A deeper blue for the dark end of gradients and for hover states, where a bit more depth reads as more premium than a flat fill. */ --color-brand-blue-deep: #2850BD; /* Pink — demoted from "half the palette" to "rare accent only". Darkened from the original so that on the rare occasion it IS used as text (not just a decorative background tint), it still passes AA contrast. Reach for this only when you specifically want to draw a small amount of attention to one element — not as a default secondary color. */ --color-brand-pink: #B23873; /* The brand gradient is now monochromatic blue (light stop to deep stop) instead of blue-to-pink. A single-hue gradient reads as calm and premium; a two-hue gradient reads as playful/energetic — the latter was working against the "trustworthy, premium" brief. Both stops individually pass AA with white text on top, so a button using this gradient is legible at every point across it. */ --color-brand-gradient: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-deep) 100%); /* NEW TOKEN — added for logo alignment. --color-brand-gradient above is shared by BOTH text-bearing surfaces (button fills with white text, the hero headline's highlighted text, numbered step badges) AND purely decorative ones (the hero background blob, the founder note's small avatar circle, a blog placeholder). That gradient can't simply be lightened to match the logo's actual soft palette without breaking contrast on the text-bearing uses. This second gradient exists specifically for the decorative-only subset — it's built from --color-brand-blue-bright (already updated above to the logo's real sampled tone) at both stops, so it echoes the logo's soft, airy stroke gradient. It must never be used behind text; every current usage is confirmed to sit behind nothing (empty shapes) or behind text in its own separate container. See css/home.css and css/blog.css for exact usages. */ --color-brand-gradient-soft: linear-gradient(135deg, #DEEDF5 0%, var(--color-brand-blue-bright) 100%); /* Tints — soft backgrounds derived from the brand colors. Pink-soft is kept defined (useful later for blog category tagging) but is no longer used anywhere in the core site chrome. */ --color-sky-soft: #E6F1FB; --color-pink-soft: #FBEAF0; /* A warm amber, used for one specific semantic purpose: labeling the "Problem" side of the problem/solution/benefit pattern on the Features page. Amber reads as "something to pay attention to" without pink's more decorative, less serious connotation — a small semantic upgrade alongside the visual rebalancing. */ --color-amber: #B45309; /* Neutrals — warm, not pure gray/white, to match the app's illustration style. Pure white (#FFFFFF) would feel clinical next to warm illustrations, so the base background is an off-white instead. */ --color-warm-white: #FAF9F6; --color-sand: #F1EFE8; --color-ink: #1B1F2E; /* Text colors — three levels of emphasis, same pattern as the app's AppColors.textPrimary / textSecondary / textTertiary */ --color-text-primary: #0F172A; --color-text-secondary: #5F5E5A; --color-text-muted: #6E6D66; --color-text-inverse: #FFFFFF; /* Borders and dividers */ --color-border: #E5E2D9; --color-border-strong: #D3D1C7; /* Semantic colors — used sparingly, e.g. form validation */ --color-success: #3B6D11; --color-error: #A32D2D; /* ------------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------------ Two font families, matching the app's split between its standard scale (AppFonts.headlineLarge, .bodyLarge, etc.) and its "Rounded" scale reserved for onboarding and celebratory moments. On the website: Inter carries body copy and UI text, Nunito (rounded, friendly) carries the hero and section headlines. */ --font-display: 'Nunito', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Type scale — mirrors the app's displayLarge/headlineLarge/bodyLarge naming so the two systems stay conceptually linked. Sizes are larger here because a website is read at arm's length on a monitor, not held a foot from your face like a phone. */ --text-display-lg: 3.5rem; /* 56px — hero headline, desktop */ --text-display-md: 2.5rem; /* 40px — hero headline, tablet/mobile */ --text-heading-lg: 2rem; /* 32px — section headings */ --text-heading-md: 1.5rem; /* 24px — card titles, subheadings */ --text-heading-sm: 1.25rem; /* 20px — small headings */ --text-body-lg: 1.0625rem; /* 17px — lead paragraphs */ --text-body-md: 0.9375rem; /* 15px — standard body text */ --text-body-sm: 0.8125rem; /* 13px — captions, meta text */ /* Line heights — generous for body copy (easier reading), tight for display text (large text needs less breathing room between lines) */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; /* ------------------------------------------------------------------ SPACING — a strict 4px grid, copied directly from the app's AppSpacing.swift. Using a fixed scale (instead of arbitrary values like 13px, 22px, 17px) is what makes a layout feel intentional rather than improvised. ------------------------------------------------------------------ */ --space-2xs: 0.125rem; /* 2px */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px */ --space-lg: 1rem; /* 16px */ --space-xl: 1.25rem; /* 20px */ --space-2xl: 1.5rem; /* 24px */ --space-3xl: 2rem; /* 32px */ --space-4xl: 3rem; /* 48px — new: larger gap needed for web sections */ --space-5xl: 4rem; /* 64px — new: section padding on desktop */ --space-6xl: 6rem; /* 96px — new: hero section padding on desktop */ /* ------------------------------------------------------------------ RADIUS — matches the app's AppSpacing corner radius scale exactly (10 / 14 / 18 / 22), so cards and buttons on the website feel like the same design language as the app itself. ------------------------------------------------------------------ */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px; /* fully rounded, for pills and badges */ /* ------------------------------------------------------------------ SHADOW — the app's shadow system is deliberately soft and diffuse ("Airbnb-like depth" per the source code comments) rather than hard drop shadows. We carry that same softness onto the website. ------------------------------------------------------------------ */ --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12); /* ------------------------------------------------------------------ MOTION — named durations and easing, matching the app's AppMotion naming (snappy / smooth / gentle). Using named tokens instead of raw millisecond values in every transition keeps animation feeling consistent across the whole site. ------------------------------------------------------------------ */ --ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 200ms; --duration-medium: 300ms; --duration-slow: 500ms; /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --container-max: 1200px; --container-padding: 1.25rem; /* 20px side padding on mobile */ --container-padding-lg: 2.5rem; /* 40px side padding on desktop */ } /* ========================================================================== RESPONSIVE TOKEN OVERRIDES ========================================================================== Some tokens need different values at different screen sizes. Rather than writing "if mobile, use 32px, if desktop use 56px" in every single component, we redefine the TOKEN itself inside a media query. Every place that uses var(--text-display-lg) automatically gets the right size for the current screen — the components never need to know about breakpoints at all. ========================================================================== */ /* Mobile: below 640px, shrink the display and heading sizes so a 56px headline doesn't force awkward line-wrapping on a small screen */ @media (max-width: 640px) { :root { --text-display-lg: 2.25rem; /* 36px on mobile, down from 56px */ --text-display-md: 1.875rem; /* 30px */ --text-heading-lg: 1.5rem; /* 24px */ --container-padding: 1rem; /* 16px — slightly tighter side margins */ } }