/** * WDHC design tokens (Wave C) * Load first on every public page. Single source for color, type, space, motion. * Supports both --wdhc-* (secondary/portal) and legacy home aliases (--gold, --text-dim). */ :root { /* ── Color · surfaces ── */ --wdhc-bg: #050505; --wdhc-surface: #0a0a0a; --wdhc-surface-hover: #111111; --wdhc-card: #0f0f0f; --wdhc-panel: #0e0e11; --wdhc-panel-warm: #100f0c; --wdhc-border: rgba(255, 255, 255, 0.08); --wdhc-border-strong: rgba(255, 255, 255, 0.14); /* ── Color · brand ── */ --wdhc-gold: #d4af37; --wdhc-gold-bright: #f0d78c; --wdhc-gold-dim: #8a702a; --wdhc-gold-glow: rgba(212, 175, 55, 0.25); --wdhc-bronze: #cd7f32; --wdhc-bronze-dim: #8b5a2b; --wdhc-bronze-glow: rgba(205, 127, 50, 0.25); --wdhc-silver: #e0e0e0; --wdhc-silver-dim: #888888; /* ── Color · text ── */ --wdhc-text: #f2f2f2; --wdhc-text-strong: #ffffff; --wdhc-dim: #d0d0d0; --wdhc-muted: #b5b5b5; --wdhc-faint: #8a8a8a; --wdhc-ui-label: #e0e0e0; --wdhc-ui-caption: #d8d8d8; /* ── Color · status ── */ --wdhc-success: #4caf50; --wdhc-warning: #fbbf24; --wdhc-danger: #cc0000; --wdhc-danger-glow: rgba(204, 0, 0, 0.4); --wdhc-info: #60a5fa; /* ── Typography ── */ --wdhc-font-head: 'Oswald', 'Arial Narrow', Arial, sans-serif; --wdhc-font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; --wdhc-font-ui: 'Rajdhani', sans-serif; --wdhc-font-mono: 'Roboto Mono', ui-monospace, 'Cascadia Mono', monospace; --wdhc-text-xs: 0.82rem; --wdhc-text-sm: 0.95rem; --wdhc-text-md: 1.05rem; --wdhc-text-lg: 1.15rem; --wdhc-text-xl: 1.35rem; --wdhc-leading-tight: 1.25; --wdhc-leading-body: 1.65; /* ── Space · radius · elevation ── */ --wdhc-space-1: 4px; --wdhc-space-2: 8px; --wdhc-space-3: 12px; --wdhc-space-4: 16px; --wdhc-space-5: 24px; --wdhc-space-6: 32px; --wdhc-space-7: 48px; --wdhc-space-8: 64px; --wdhc-radius-sm: 8px; --wdhc-radius: 12px; --wdhc-radius-lg: 16px; --wdhc-radius-pill: 999px; --wdhc-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25); --wdhc-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4); --wdhc-shadow-gold: 0 0 24px var(--wdhc-gold-glow); /* ── Layout chrome ── */ --wdhc-nav-h: 76px; --wdhc-mobile-nav-h: 108px; --wdhc-mobile-cta-h: 58px; --wdhc-content-max: 1120px; --wdhc-content-narrow: 760px; --wdhc-z-nav: 1000; --wdhc-z-modal: 5000; --wdhc-z-skip: 10001; /* ── Motion ── */ --wdhc-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --wdhc-duration-fast: 120ms; --wdhc-duration: 200ms; --wdhc-duration-slow: 350ms; --wdhc-marquee-duration: 22s; /* ── Focus ring (a11y) ── */ --wdhc-focus-ring: 0 0 0 3px rgba(212, 175, 55, 0.45); --wdhc-focus-outline: 2px solid var(--wdhc-gold-bright); /* ── Contact (single source for copy) ── */ --wdhc-phone-display: '602-435-9750'; --wdhc-phone-href: '+16024359750'; /* ── Legacy aliases (home, older pages) ── */ --bg: var(--wdhc-bg); --surface: var(--wdhc-surface); --surface-hover: var(--wdhc-surface-hover); --nav-h: var(--wdhc-nav-h); --mobile-nav-h: var(--wdhc-mobile-nav-h); --mobile-cta-h: var(--wdhc-mobile-cta-h); --gold: var(--wdhc-gold); --gold-dim: var(--wdhc-gold-dim); --gold-glow: var(--wdhc-gold-glow); --bronze: var(--wdhc-bronze); --bronze-dim: var(--wdhc-bronze-dim); --bronze-glow: var(--wdhc-bronze-glow); --silver: var(--wdhc-silver); --silver-dim: var(--wdhc-silver-dim); --accent-red: var(--wdhc-danger); --accent-red-glow: var(--wdhc-danger-glow); --text: var(--wdhc-text-strong); --text-dim: var(--wdhc-dim); --ui-label: var(--wdhc-ui-label); --ui-caption: var(--wdhc-ui-caption); --border: #222; } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { :root { --wdhc-duration-fast: 1ms; --wdhc-duration: 1ms; --wdhc-duration-slow: 1ms; --wdhc-marquee-duration: 0.01ms; } } /* ── Shared site footer ── */ .wdhc-site-footer { margin-top: var(--wdhc-space-7); padding: var(--wdhc-space-7) var(--wdhc-space-5) var(--wdhc-space-8); background: var(--wdhc-surface); border-top: 1px solid var(--wdhc-border); text-align: center; color: var(--wdhc-muted); font-family: var(--wdhc-font-body); } .wdhc-site-footer__inner { width: min(var(--wdhc-content-max), 100%); margin: 0 auto; } .wdhc-site-footer__brand { display: inline-block; margin-bottom: var(--wdhc-space-5); text-decoration: none; } .wdhc-site-footer__logo, .wdhc-site-footer .footer-logo { display: block; width: min(240px, 70vw); height: auto; margin: 0 auto; } .wdhc-site-footer__nav { margin: 0 0 var(--wdhc-space-5); } .wdhc-site-footer__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-bottom: 12px; } .wdhc-site-footer__row a, .wdhc-site-footer .footer-links a { color: var(--wdhc-dim); text-decoration: none; font-size: var(--wdhc-text-sm); font-weight: 500; line-height: 1.4; } .wdhc-site-footer__row a:hover, .wdhc-site-footer .footer-links a:hover { color: var(--wdhc-gold-bright); } .wdhc-site-footer__row--muted a { color: var(--wdhc-faint); font-size: var(--wdhc-text-xs); } .wdhc-site-footer__contact { margin: 0 0 var(--wdhc-space-4); font-size: var(--wdhc-text-md); color: var(--wdhc-dim); line-height: 1.5; } .wdhc-site-footer__contact a { color: var(--wdhc-gold-bright); font-weight: 600; text-decoration: none; } .wdhc-site-footer__contact a:hover { text-decoration: underline; color: #fff; } .wdhc-site-footer__sep { margin: 0 0.45em; color: var(--wdhc-faint); } .wdhc-site-footer__copy, .wdhc-site-footer .footer-copy { margin: 0; font-size: var(--wdhc-text-sm); color: var(--wdhc-faint); } /* Legacy bare