/* ═══════════════════════════════════════════════════════════════ UrbanFix Design Tokens — urbanfix.css Single source of truth for color, type, radius, shadow, motion. Pages keep their historical local variable names ( --orange, --brand, --ink, --text … ) but alias them to these --uf-* tokens in their own :root block. Never hardcode a hex that exists here. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Brand ── */ --uf-brand: #C85A2A; /* terracotta — the only accent */ --uf-brand-dim: #A34821; /* hover / pressed */ --uf-brand-soft: #F6EAE2; /* tinted fills, selected chips */ --uf-brand-tint: rgba(200, 90, 42, 0.08); /* ── Ink (warm near-black) ── */ --uf-ink: #141210; --uf-ink-80: rgba(20, 18, 16, 0.80); --uf-ink-40: rgba(20, 18, 16, 0.40); --uf-ink-deep: #0D0B09; /* footer / deepest surface */ /* ── Surfaces (warm neutrals only — no cool grays) ── */ --uf-cream: #F5F0E8; /* primary tinted surface */ --uf-cream-dark: #EDE8DF; --uf-bg: #F8F6F2; /* app page background */ --uf-bg-marketing: #FAFAF8; /* marketing page background */ --uf-surface: #FFFFFF; /* ── Lines ── */ --uf-border: #E4DDD4; --uf-border-soft: #EDE8E0; /* ── Text ── */ --uf-muted: #8C867D; /* secondary text */ --uf-muted-dark: #A09B94; /* secondary text on dark */ --uf-faint: #6E6862; /* footer / tertiary on dark */ /* ── Semantic ── */ --uf-green: #1F9D5C; --uf-green-tint: #D1FAE5; --uf-green-text: #065F46; --uf-amber-tint: #FEF3C7; --uf-amber-text: #92400E; --uf-blue-tint: #DBEAFE; --uf-blue-text: #1E40AF; --uf-red: #E74C3C; --uf-red-tint: #FEE2E2; --uf-red-text: #B91C1C; /* ── Type ── */ --uf-font-head: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; --uf-font-body: 'DM Sans', system-ui, -apple-system, sans-serif; /* ── Radius scale ── */ --uf-r-sm: 6px; /* inputs, small buttons, chips */ --uf-r-md: 10px; /* buttons, cards’ inner elements */ --uf-r-lg: 16px; /* cards, panels, modals */ --uf-r-xl: 24px; /* bezel shells, hero cards */ /* ── Shadows (warm ink-tinted, light from above) ── */ --uf-shadow-sm: 0 1px 4px rgba(20, 18, 16, 0.06); --uf-shadow-md: 0 4px 16px rgba(20, 18, 16, 0.08); --uf-shadow-lg: 0 20px 50px -12px rgba(20, 18, 16, 0.25); /* ── Drenched brand surfaces (heroes, CTA bands — brand register only) ── Deep ember → terracotta. Text on these surfaces is cream; the dark end anchors the regions where copy sits so contrast stays ≥ AA. */ --uf-drench: linear-gradient(160deg, #6E2810 0%, #9C3E1A 55%, #C85A2A 100%); --uf-drench-bloom: radial-gradient(ellipse 80% 60% at 78% 18%, rgba(232, 137, 90, 0.35), transparent 70%); /* ── Motion ── */ --uf-ease: cubic-bezier(0.22, 1, 0.36, 1); --uf-dur-fast: 0.2s; --uf-dur: 0.3s; } /* ═══ Shared polish utilities ═══ */ /* Headings never orphan a single word; body text breaks evenly. */ h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* Consistent keyboard focus ring everywhere. */ :focus-visible { outline: 2px solid var(--uf-brand); outline-offset: 2px; } /* Tabular figures for stats and money. */ .uf-tnum { font-variant-numeric: tabular-nums; } /* ── Double-bezel card architecture ── A card never sits flatly on the background: an outer tray (tinted, hairline ring, 6px padding) holds an inner core with a concentric radius. Use .uf-bezel on light surfaces, .uf-bezel-dark on drenched or ink surfaces. The direct child gets .uf-bezel-core. */ .uf-bezel, .uf-bezel-dark { padding: 6px; border-radius: var(--uf-r-xl); } .uf-bezel { background: rgba(20, 18, 16, 0.045); box-shadow: inset 0 0 0 1px rgba(20, 18, 16, 0.06); } .uf-bezel-dark { background: rgba(245, 240, 232, 0.10); box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.22); } .uf-bezel-core { border-radius: calc(var(--uf-r-xl) - 6px); background: var(--uf-surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(20, 18, 16, 0.05), 0 16px 40px -16px rgba(20, 18, 16, 0.22); } .uf-bezel-dark .uf-bezel-core { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 24px 64px -20px rgba(13, 11, 9, 0.55); } /* ── Pill CTA with nested icon disc ── Marketing-register primary action. The trailing arrow never sits naked next to the label — it lives in its own disc, flush with the right inner padding, and drifts on hover. */ .uf-cta { display: inline-flex; align-items: center; gap: 12px; padding: 10px 10px 10px 26px; border-radius: 999px; background: var(--uf-brand); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; border: none; cursor: pointer; transition: background var(--uf-dur-fast) var(--uf-ease), transform var(--uf-dur-fast) var(--uf-ease); } .uf-cta:hover { background: var(--uf-brand-dim); } .uf-cta:active { transform: scale(0.98); } .uf-cta .uf-cta-disc { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--uf-dur-fast) var(--uf-ease), background var(--uf-dur-fast) var(--uf-ease); } .uf-cta:hover .uf-cta-disc { transform: translate(2px, -1px); background: rgba(255, 255, 255, 0.26); } .uf-cta.uf-cta-light { background: var(--uf-cream); color: var(--uf-ink); } .uf-cta.uf-cta-light:hover { background: #fff; } .uf-cta.uf-cta-light .uf-cta-disc { background: rgba(20, 18, 16, 0.08); } .uf-cta.uf-cta-light:hover .uf-cta-disc { background: rgba(20, 18, 16, 0.14); } .uf-cta.uf-cta-ink { background: var(--uf-ink); color: var(--uf-cream); } .uf-cta.uf-cta-ink:hover { background: #2A2118; } .uf-cta.uf-cta-ink .uf-cta-disc { background: rgba(245, 240, 232, 0.14); } /* ── Route divider ── the I-85 corridor motif as a section seam. A dashed arc between two waypoints; quiet, and ours. */ .uf-route-divider { display: block; width: min(360px, 60%); margin: 0 auto; opacity: 0.55; } /* Film-grain overlay for large dark surfaces — breaks flat-vector sterility. Parent needs position: relative (the class sets it). Positioned children with a z-index already sit above the grain. */ .uf-grain { position: relative; } .uf-grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.04; }