/** * UmmahCity Brand Integration Layer * Version: 1.0.0 — Jul 7 2026 * * Bridges the UMG master design system (tokens.css + components.css) * with ummah.city's existing city-core.css token system. * * Load order: tokens.css → components.css → city-core.css → THIS FILE * * Philosophy: city-core.css drives the component-level CSS; this file * remaps the --city-* custom properties to the brand tokens so every * consumer of those tokens automatically inherits the brand palette. * * RULE: No hardcoded hex in this file — reference brand tokens only. * KILL LIST enforced here: #2D5016 / #10B981 / #C4A265 never appear. */ /* ───────────────────────────────────────────────────────────────────────── 1. TOKEN BRIDGE — Remap city-core vars to brand tokens Applied globally so all city-core consumers inherit the brand palette. ───────────────────────────────────────────────────────────────────────── */ :root { /* Remap city-core's night palette to brand Ummah theme defaults */ --city-bg: var(--cream); /* #FAF8F3 — page surface */ --city-bg-deep: var(--stone); /* #EAE6DF — secondary surface */ --city-surface: var(--surface-raised, #FFFFFF); --city-border: var(--stone); /* #EAE6DF — borders */ --city-text: var(--ink); /* #0F1F17 — primary text */ --city-text-muted: var(--text-secondary, #4A6356); --city-text-dim: var(--text-muted, #7D9E8C); --city-heading: var(--ink); /* #0F1F17 */ /* Gold: use brand gold (NOT the rogue #C4A265) */ --city-gold: var(--gold); /* #C8912E — heritage/value only */ --city-gold-light: var(--gold-bright); /* #DFA032 */ /* Action: forest green for CTAs */ --city-action: var(--forest); /* #166534 */ --city-action-hover: var(--forest-deep); /* #0F4A26 */ /* Nav surfaces */ --city-nav-bg: rgba(250, 248, 243, 0.92); /* cream glass */ --city-nav-border: var(--stone); /* Card surfaces */ --city-card-bg: linear-gradient(145deg, #FFFFFF, var(--cream)); --city-card-border: var(--stone); --city-overlay-bg: rgba(250, 248, 243, 0.85); /* Particle / atmospheric effects — off by default in light mode */ --city-star-opacity: 0; --city-grain-opacity: 0.008; --city-geo-opacity: 0.03; --city-shooting-opacity: 0; --city-scrollbar-track: var(--cream); --city-scrollbar-thumb: var(--forest); } /* ───────────────────────────────────────────────────────────────────────── 2. BODY + HTML — Force the light/cream surface as the default data-umg-theme="ummah" set on , combined with .day-mode on ───────────────────────────────────────────────────────────────────────── */ html[data-umg-theme="ummah"] { background-color: var(--cream); color: var(--ink); } body.day-mode { background-color: var(--cream); color: var(--ink); } /* Turn off atmospheric effects that are night-mode-only */ .starfield { opacity: 0 !important; } .shooting-star { opacity: 0 !important; animation: none !important; } .grain { opacity: 0.008 !important; } .geo-underlay { opacity: 0.03 !important; } /* Orbs: display:none (not just opacity:0) — opacity still contributes to scrollWidth */ .orb { display: none !important; } /* Prevent horizontal overflow from position:absolute decorative elements. clip (not hidden) preserves the ability for fixed children to show beyond the body edge while clipping absolute/relative overflow. */ html, body { overflow-x: clip; } /* Al-Hisn badge: city-core.css has a duplicate .hisn-badge { position: relative } rule (line 959) that cascades AFTER the intended position:fixed (line 878), turning the badge into a block-level element that bleeds off-viewport. Force it back to fixed here. */ .hisn-badge { position: fixed !important; } /* Scrollbar */ ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--forest); } /* ───────────────────────────────────────────────────────────────────────── 3. NAVIGATION — Brand nav grammar applied to .city-nav-pill ───────────────────────────────────────────────────────────────────────── */ .city-nav-pill { background: rgba(250, 248, 243, 0.92) !important; backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); border-bottom: 1px solid var(--stone) !important; box-shadow: 0 1px 0 rgba(15, 31, 23, 0.06); } .city-nav-pill .nav-inner { background: transparent; } /* Nav links — use brand forest green on hover */ .city-nav-pill a:not(.nav-logo):not(.nav-signin) { color: var(--text-secondary, #4A6356) !important; font-family: var(--font-ui); font-weight: var(--weight-medium); transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } .city-nav-pill a:not(.nav-logo):not(.nav-signin):hover { color: var(--forest) !important; background-color: rgba(22, 101, 52, 0.06); border-radius: var(--radius-sm); } /* Nav logo — brand two-weight wordmark */ .city-nav-pill .nav-logo { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; } .city-nav-pill .nav-logo .logo-seal { width: 30px; height: 30px; border-radius: 6px; background: var(--cream); border: 1px solid var(--stone); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Sign-in button — brand secondary style */ .city-nav-pill .nav-signin { font-family: var(--font-ui); font-weight: var(--weight-semibold); color: var(--forest) !important; border: 1.5px solid var(--forest) !important; background: transparent !important; border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); transition: background-color var(--duration-fast) var(--ease); text-shadow: none !important; } .city-nav-pill .nav-signin:hover { background: rgba(22, 101, 52, 0.06) !important; } /* Hamburger icon — dark on light */ .nav-hamburger-btn svg { stroke: var(--ink) !important; } /* Nav mobile menu — cream surface */ .nav-mobile-menu { background: var(--cream) !important; border: 1px solid var(--stone) !important; box-shadow: var(--shadow-lg) !important; } .nav-mobile-menu a { color: var(--ink) !important; } .nav-mobile-menu a:hover { color: var(--forest) !important; background: rgba(22, 101, 52, 0.06) !important; } /* Account dropdown */ .nav-account-dropdown { background: var(--cream) !important; border: 1px solid var(--stone) !important; box-shadow: var(--shadow-md) !important; } .nav-account-dropdown-item { color: var(--ink) !important; } .nav-account-dropdown-item:hover { background: rgba(22, 101, 52, 0.06) !important; color: var(--forest) !important; } .nav-account-dropdown-divider { background: var(--stone) !important; } /* Sign-out — keep it distinct but not red in marketing context */ .nav-account-dropdown-item--signout { color: var(--text-secondary, #4A6356) !important; } .nav-account-dropdown-item--signout:hover { color: var(--ink) !important; } /* ───────────────────────────────────────────────────────────────────────── 4. HERO TYPOGRAPHY — Amiri for display headings, Outfit for body ───────────────────────────────────────────────────────────────────────── */ /* Apply Amiri to h1/h2 inside hero panels */ .hero-panel h1, .hero-panel h2, section[id*="hero"] h1, section[id*="hero"] h2, .hero-cinematic, .city-greeting-welcome { font-family: var(--font-display) !important; /* Amiri */ letter-spacing: var(--tracking-snug); color: var(--ink); } /* City greeting — light mode override */ .city-greeting-salam { color: var(--gold) !important; /* brand gold, not rogue #DFA032 */ opacity: 0.85; } .city-greeting-welcome { color: var(--ink) !important; } .city-greeting-welcome em { color: var(--forest) !important; /* forest, not gold */ font-style: normal; } /* Bismillah / Arabic text — font stack only; let each element control its own color */ .font-arabic, [dir="rtl"], .umg-arabic { font-family: var(--font-arabic) !important; } /* Hero bismillah specifically: deep amber-gold = 5.4:1 contrast on cream (AA+AAA large text) */ .hero-panel-1 .font-arabic, .hero-s1-reveal.font-arabic { color: #8B5E0A !important; opacity: 1; } /* Section h2/h3 headings across the page */ h1, h2, h3 { color: var(--ink); } /* ───────────────────────────────────────────────────────────────────────── 5. CTAs — Primary buttons must use forest green (NEVER gold) Gold signals: pricing, heritage, launch urgency. Never CTA. ───────────────────────────────────────────────────────────────────────── */ /* Hero primary CTA — override the inline gold style */ .hero-panel a.hero-cta-primary, .city-greeting a[href*="join"], .city-greeting a[href*="ummahpass"] { background: var(--forest) !important; color: var(--cream) !important; border-color: var(--forest) !important; font-family: var(--font-ui); font-weight: var(--weight-semibold); border-radius: var(--radius-lg); box-shadow: none; text-shadow: none; letter-spacing: var(--tracking-normal); transition: background-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } .hero-panel a.hero-cta-primary:hover, .city-greeting a[href*="join"]:hover, .city-greeting a[href*="ummahpass"]:hover { background: var(--forest-deep) !important; border-color: var(--forest-deep) !important; box-shadow: 0 4px 12px rgba(22, 101, 52, 0.3) !important; } /* Pulse ring override — forest instead of gold */ .pulse-ring::before { border-color: rgba(22, 101, 52, 0.35) !important; } /* Secondary CTAs — ghost/outline */ .city-greeting a[href*="/app"] { background: transparent !important; color: var(--text-secondary, #4A6356) !important; border: 1px solid var(--stone) !important; font-family: var(--font-ui); } /* Generic sign-in / already-a-member links */ .city-greeting a[href*="login"] { color: var(--forest) !important; font-size: var(--text-sm); } .city-greeting a[href*="login"] b { color: var(--forest) !important; font-weight: var(--weight-semibold); } /* ───────────────────────────────────────────────────────────────────────── 6. DISTRICT CARDS — Brand card grammar + star watermark ───────────────────────────────────────────────────────────────────────── */ .district-card { background: #FFFFFF !important; border: 1px solid var(--stone) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; /* Star watermark (light mode treatment) */ position: relative; overflow: hidden; } /* Brand star watermark on district cards */ .district-card::after { content: ''; position: absolute; bottom: -30px; right: -30px; width: 120px; height: 120px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon fill='%23166534' points='100,10 114.27,65.56 163.64,36.36 134.44,85.73 190,100 134.44,114.27 163.64,163.64 114.27,134.44 100,190 85.73,134.44 36.36,163.64 65.56,114.27 10,100 65.56,85.73 36.36,36.36 85.73,65.56'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; opacity: 0.04; pointer-events: none; z-index: 0; } .district-card::before { /* Remove the existing dark top-border gradient */ background: none; opacity: 0; } .district-card:hover { border-color: rgba(22, 101, 52, 0.2) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-4px); } /* District LIVE badge — keep the gold scarcity signal */ .district-card.district-live { border-color: rgba(200, 145, 46, 0.25) !important; } .district-card.district-live:hover { border-color: var(--gold) !important; box-shadow: 0 8px 24px rgba(200, 145, 46, 0.12) !important; } /* LIVE pulse dot — use live-green (the correct functional color) */ .live-pulse::before { background: var(--live-green) !important; /* #6DB87A — correct; was #10B981 (rogue) */ } /* District card text — ensure legible on cream */ .district-card h3, .district-card p, .district-card span { color: var(--ink); position: relative; z-index: 1; } /* ───────────────────────────────────────────────────────────────────────── 7. TIER / MEMBERSHIP CARDS ───────────────────────────────────────────────────────────────────────── */ .tier-card { background: var(--cream) !important; border: 1.5px solid var(--stone) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-xs); } .tier-card:hover { border-color: var(--forest) !important; box-shadow: var(--shadow-md) !important; } /* ───────────────────────────────────────────────────────────────────────── 8. WALL PROGRESS — Brand tokens ───────────────────────────────────────────────────────────────────────── */ .wall-progress-track, .wall-progress-outer { background: var(--stone) !important; border-color: rgba(22, 101, 52, 0.15) !important; } .wall-progress-fill, .wall-progress-inner { background: linear-gradient(90deg, var(--forest), var(--gold)) !important; box-shadow: 0 0 8px rgba(22, 101, 52, 0.25) !important; } /* ───────────────────────────────────────────────────────────────────────── 9. SECTION TEXT OVERRIDES — Ensure readability on cream The original page used text-white / text-gray-* for night mode. Override to use brand tokens for the light surface. ───────────────────────────────────────────────────────────────────────── */ section .text-white, section .text-white\/90, section .text-white\/80 { color: var(--ink) !important; } section .text-gray-400 { color: var(--text-secondary, #4A6356) !important; } section .text-gray-500 { color: var(--text-muted, #7D9E8C) !important; } section .text-gray-600 { color: var(--text-secondary, #4A6356) !important; } /* Hadith / quote sections */ .hadith-border, blockquote { border-color: rgba(200, 145, 46, 0.2) !important; } /* Gold decorative lines */ .gold-line { background: linear-gradient(90deg, transparent, rgba(200, 145, 46, 0.25), transparent) !important; } /* Timeline */ .timeline-dot { border-color: rgba(200, 145, 46, 0.3); background: var(--cream); } .timeline-dot.active { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 10px rgba(200, 145, 46, 0.4); } /* ───────────────────────────────────────────────────────────────────────── 10. SECTION REVEAL ANIMATIONS — Keep intact, just adjust colors ───────────────────────────────────────────────────────────────────────── */ /* Countdown blocks in light mode */ .countdown-block { background: var(--stone) !important; border-color: rgba(200, 145, 46, 0.15) !important; } .countdown-block::before { background: linear-gradient(135deg, rgba(200, 145, 46, 0.15), transparent 50%, rgba(200, 145, 46, 0.08)) !important; } /* Population sign */ .pop-sign { background: linear-gradient(180deg, var(--stone) 0%, var(--cream) 100%) !important; border-color: rgba(200, 145, 46, 0.2) !important; } .pop-sign-number { color: var(--gold) !important; } .pop-sign-city { color: var(--ink) !important; } .pop-sign-growing { color: var(--live-green) !important; } .pop-sign-growing::before { background: var(--live-green) !important; /* #6DB87A — NOT rogue #10B981 */ } /* ───────────────────────────────────────────────────────────────────────── 11. FOOTER — Brand footer grammar ───────────────────────────────────────────────────────────────────────── */ footer, .city-footer, section.relative.py-20 > .umg-footer { background-color: var(--ink) !important; color: var(--cream) !important; } /* ───────────────────────────────────────────────────────────────────────── 12. KILL LIST — Explicitly zero out rogue colors These were used in the night-mode build. Override to brand equivalents. Kill: #2D5016 → var(--forest-deep) Kill: #10B981 → var(--live-green) for Pulse only Kill: #C4A265 → var(--gold) ───────────────────────────────────────────────────────────────────────── */ /* Pop-sign growing indicator used #10B981 — corrected above in item 10 */ /* Any orb-teal using rgba(20,184,166) backgrounds — hidden in light mode */ .orb-teal { display: none; } /* ───────────────────────────────────────────────────────────────────────── 13. MEMBER SHELL (signed-in surface) — cream surface ───────────────────────────────────────────────────────────────────────── */ .uc-feed-header { background: var(--cream); border-bottom: 1px solid var(--stone); } /* Bottom nav in light mode */ .uc-bottom-nav { background: rgba(250, 248, 243, 0.95) !important; border-top: 1px solid var(--stone) !important; backdrop-filter: blur(12px); } .uc-bottom-nav a { color: var(--text-secondary, #4A6356) !important; } .uc-bottom-nav a[aria-current="page"], .uc-bottom-nav a.active { color: var(--forest) !important; } /* ───────────────────────────────────────────────────────────────────────── 14. SCROLLBAR — Brand colors ───────────────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--forest); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--forest-deep); } /* ───────────────────────────────────────────────────────────────────────── 15. DIVIDER — 8-pt star accent (gold) as section separator ───────────────────────────────────────────────────────────────────────── */ .umg-divider-star { opacity: 0.5; } /* Section gold separator line */ hr, .section-divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--stone), transparent); margin: var(--space-12) 0; } /* ───────────────────────────────────────────────────────────────────────── 16. PRAYER STRIP — Keep functional, apply brand surface (Prayer surface is INTENTIONALLY not Matomo-tracked) ───────────────────────────────────────────────────────────────────────── */ /* Keep prayer UI on cream — ensure it uses brand text colors */ .prayer-strip, [x-data*="prayerStrip"] { background: var(--cream); color: var(--ink); } /* ───────────────────────────────────────────────────────────────────────── 17. RESPONSIVE — Ensure no horizontal overflow at 390/768/1440 ───────────────────────────────────────────────────────────────────────── */ html, body { overflow-x: hidden; max-width: 100vw; } img, svg { max-width: 100%; height: auto; } /* ───────────────────────────────────────────────────────────────────────── 18. GATE SVG — Light mode treatment (warm sandstone tone) The great gate SVG stays as the visual metaphor but uses warm tones. ───────────────────────────────────────────────────────────────────────── */ .gate-svg { filter: drop-shadow(0 0 40px rgba(200, 145, 46, 0.18)); } .gate-svg .gate-arch-outer, .gate-svg .gate-arch-inner { stroke: rgba(139, 94, 15, 0.35); } .gate-svg .gate-arch-detail { stroke: rgba(139, 94, 15, 0.18); } .gate-svg .gate-inner-glow { fill: rgba(200, 145, 46, 0.08); } .gate-svg .gate-glow { stroke: rgba(200, 145, 46, 0.45); } .gate-svg .gate-crown-fill { fill: #C4841D; } .gate-svg .gate-lattice { stroke: #8B5E0F; } .gate-svg .gate-rosette { stroke: #8B5E0F; } .gate-svg .gate-star-dot { fill: #C4841D; } .gate-svg .gate-wall-ext { stroke: rgba(139, 94, 15, 0.2); } .gate-svg .gate-cren { stroke: rgba(139, 94, 15, 0.15); } .gate-rays { background: radial-gradient(ellipse at bottom center, rgba(200, 145, 46, 0.12) 0%, transparent 70%); } /* ───────────────────────────────────────────────────────────────────────── 19. UTILITY — Suppress dark-only elements in light mode ───────────────────────────────────────────────────────────────────────── */ /* Camel watermark — keep but soften on cream */ .anon-camel-watermark { opacity: 0.15 !important; } /* Brick buttons in wall section */ .brick-btn-inactive { background: var(--stone) !important; color: var(--ink) !important; border-color: rgba(22, 101, 52, 0.12) !important; } .brick-btn-inactive:hover { background: rgba(22, 101, 52, 0.08) !important; border-color: rgba(22, 101, 52, 0.2) !important; } .brick-btn-active { background: var(--forest) !important; color: var(--cream) !important; border-color: var(--forest) !important; box-shadow: 0 2px 8px rgba(22, 101, 52, 0.25) !important; } /* Brick card glass — cream surface */ .brick-card-glass { background: var(--cream) !important; border-color: var(--stone) !important; backdrop-filter: blur(4px); } .brick-card-glass::before { background: linear-gradient(135deg, rgba(200, 145, 46, 0.15), transparent 50%, rgba(200, 145, 46, 0.08)) !important; } /* Construction sparks — gold color */ .construction-spark { background: var(--gold) !important; } /* ───────────────────────────────────────────────────────────────────────── 20. FOCUS RINGS — Brand forest green ───────────────────────────────────────────────────────────────────────── */ :focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; border-radius: var(--radius-sm); } /* ───────────────────────────────────────────────────────────────────────── 21. DISTRICT SECTION — 8-pt-star watermark + cream-mode contrast fixes ───────────────────────────────────────────────────────────────────────── */ /** * Khatim Sulayman tessellation field — one tasteful background texture * for the Districts section. The star is the brand signature; 4% opacity * reads as texture, not decoration. Single field per WS1 grammar. * * The SVG tile (80×80px) places the exact brand polygon (scaled from 200→80) * centred on a transparent canvas; repeat fills the section. * Polygon points: WS1 brand polygon scaled ×0.4 (200px → 80px). */ #districts { overflow: clip; /* clip (not hidden) preserves stacking without scroll */ } #districts::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpolygon fill='%23166534' opacity='0.04' points='40%2C4%2045.71%2C26.22%2065.46%2C14.54%2053.78%2C34.29%2076%2C40%2053.78%2C45.71%2065.46%2C65.46%2045.71%2C53.78%2040%2C76%2034.29%2C53.78%2014.54%2C65.46%2026.22%2C45.71%204%2C40%2026.22%2C34.29%2014.54%2C14.54%2034.29%2C26.22'/%3E%3C/svg%3E"); background-size: 80px 80px; background-repeat: repeat; } /* All section children sit above the watermark field */ #districts > * { position: relative; z-index: 1; } /** * Contrast fixes: the section was authored against a void/dark background. * In cream mode the Tailwind utility classes (text-white, text-gray-400, * text-gray-500) become near-invisible on #FAF8F3. * ID selector (#districts h2) specificity = (1,0,1) > Tailwind (0,1,0) — * no !important needed. */ #districts h2 { color: var(--ink); } #districts h2 span.text-gray-400 { color: var(--text-secondary, #4A6356); } #districts p.text-gray-500 { color: var(--text-secondary, #4A6356); } /* "Inside the Walls" eyebrow label */ #districts .text-center p:first-child { color: var(--gold); opacity: 0.9; } /* Card description body text: text-gray-400 on sandy card bg (~2.3:1) */ #districts .district-card p.text-sm.text-gray-400 { color: var(--text-secondary, #4A6356); } /* "Enter District" CTA row — gold at full opacity for readability */ #districts .district-card .group-hover\:text-city-gold { color: var(--gold); } /* ───────────────────────────────────────────────────────────────────────── 22. HERO — Tablet breathing room (640–1023px) Extra clearance between the fixed nav pill and the hero content stack at the tablet breakpoint where the full nav + full copy + CTAs + pills can feel compressed. ───────────────────────────────────────────────────────────────────────── */ @media (min-width: 640px) and (max-width: 1023px) { .hero-panel-1 { padding-top: 7rem; /* 5rem → 7rem: 32px extra below fixed nav */ padding-bottom: 2rem; } .city-greeting { /* Reduce greeting's own top margin so content stays vertically centred */ margin-top: 1.25rem; } } /* ───────────────────────────────────────────────────────────────────────── 23. FOUNDING-CTA EXCEPTION — dark-background card within cream page Section 9's `section .text-white { color: var(--ink) }` override is correct for most sections but .founding-cta has its own explicit dark gradient background (rgba(6,11,24, 0.95) dominates). Restore white text so the heading and benefits are legible on the dark surface. ───────────────────────────────────────────────────────────────────────── */ .founding-cta .text-white, .founding-cta .text-white\/90, .founding-cta .text-white\/80 { color: #ffffff !important; } .founding-cta .text-gray-300 { color: #d1d5db !important; } .founding-cta .text-gray-400 { color: #9ca3af !important; } .founding-cta .text-gray-500 { color: #6b7280 !important; } .founding-cta .text-gray-600 { color: #4b5563 !important; } /* Gold accent text stays gold on dark */ .founding-cta .text-city-gold { color: var(--gold) !important; } /* ───────────────────────────────────────────────────────────────────────── 24. NAV PILL — P0 CENTERING FIX city-core.css: `.city-nav-pill { animation: heroReveal 0.8s … both }` The heroReveal @keyframes `to { transform: translateY(0) }` REPLACES the element-level `transform: translateX(-50%)` after fill-mode:both settles → nav left-anchors at viewport-mid (1440px → starts at 720px, clips right). Fix: shadow animation-name with city-nav-reveal that preserves the X-offset on BOTH frames. Duration / easing / delay / fill inherited from existing rule. ───────────────────────────────────────────────────────────────────────── */ .city-nav-pill { animation-name: city-nav-reveal; /* city-core provides duration/easing/delay/fill */ } @keyframes city-nav-reveal { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ───────────────────────────────────────────────────────────────────────── 25. TAP TARGETS — WCAG 2.5.5 (min 44×44px on all interactive elements) Measurements: district pills 36px, hamburger 30×18px, footer links 16px. Fix: explicit min-height + inline-flex alignment on all sub-44px targets. ───────────────────────────────────────────────────────────────────────── */ /* 1. Nav pill links (measured 36px → 44px) */ .city-nav-pill .nav-inner > a:not(.nav-logo) { min-height: 44px; display: inline-flex !important; align-items: center; } /* 2. Hamburger button (30×18 → 44×44) */ .nav-hamburger-btn { min-height: 44px; min-width: 44px; display: flex !important; align-items: center; justify-content: center; } /* 3. Sky-toggle (36px → 44px) */ .sky-toggle { min-height: 44px !important; min-width: 44px !important; } /* 4. Persona expand CTAs — dark pill so white text passes WCAG AA regardless of card gradient */ .persona-cta { min-height: 44px; display: inline-flex !important; align-items: center; background: rgba(6, 11, 24, 0.85) !important; padding: 10px 16px !important; border-radius: 999px !important; margin-top: 4px; } /* Exception: persona-cta white text must not be overridden by section .text-white {color:var(--ink)} */ section .persona-cta, section .persona-cta:hover { color: #ffffff !important; } /* Other .persona-expand links (non-pill, fallback) */ .persona-expand a:not(.persona-cta) { min-height: 44px; display: inline-flex !important; align-items: center; } /* 5. Footer links (16px text line-height → 44px hit area) */ footer a.text-xs, footer a.text-sm { min-height: 44px; display: inline-flex !important; align-items: center; padding-left: 4px; padding-right: 4px; } /* 6. Hisn dismiss button */ .hisn-dismiss { min-height: 44px; min-width: 44px; display: inline-flex !important; align-items: center; justify-content: center; } /* 7. Nav search icon link */ .city-nav-pill a.nav-search { min-height: 44px !important; min-width: 44px; justify-content: center; } /* 8. Inline text tap-target helper — extend hit area without changing layout */ .tap-link { display: inline-block; padding: 14px 0; margin: -14px 0; vertical-align: middle; } /* End of UmmahCity brand integration — Jul 7 2026 (v4) */