/* ============================================= KINETIC EDGE HEALTH — Shared Design System kineticedgehealth.com ============================================= */ /* Google Fonts loaded via in HTML — not @import — to avoid render-blocking chain */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Design Tokens ── */ :root { /* Brand palette */ --obsidian: #0F0818; --obsidian-mid: #1A101E; --purple-deep: #2D1060; --purple-primary: #6B21A8; --purple-mid: #8B5CF6; --purple-light: #C4B5FD; --purple-pale: #EDE9FE; /* Light surface tokens */ --bg: #FFFFFF; --bg-tint: #F8F5FF; --bg-alt: #F2EEF9; --text-primary: #1A0F2E; --text-body: #4A3F5C; --text-muted: #7A6B8A; --border-light: rgba(107, 33, 168, 0.13); /* Legacy tokens (kept for hero/dark sections) */ --muted: #6B5E78; --muted-light: #9D8FAA; --white: #FFFFFF; --nav-h: 72px; } html, body { background: var(--bg); font-family: 'Inter', sans-serif; color: var(--text-primary); -webkit-font-smoothing: antialiased; line-height: 1.6; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } /* ── Subtle noise on dark sections only ── */ .dark-section::before, .hero-wrap::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.028; pointer-events: none; z-index: 0; } /* ============================================ NAVIGATION — light ============================================ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(107, 33, 168, 0.10); } .logo { display: flex; align-items: center; } .logo-img { height: 60px; width: auto; display: block; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.01em; transition: color 0.15s; } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); } .nav-cta { font-size: 13px; font-weight: 600; color: var(--white) !important; background: linear-gradient(135deg, #6B21A8 0%, #4C1D95 100%); border: 1px solid rgba(107, 33, 168, 0.4); padding: 9px 20px; border-radius: 8px; letter-spacing: 0.01em; transition: box-shadow 0.2s, transform 0.15s; white-space: nowrap; box-shadow: 0 2px 12px rgba(107, 33, 168, 0.25); } .nav-cta:hover { box-shadow: 0 4px 20px rgba(107, 33, 168, 0.4) !important; transform: translateY(-1px); } /* ============================================ PAGE HERO (interior pages) — light ============================================ */ .page-hero { position: relative; z-index: 1; padding: 120px 48px 80px; text-align: center; overflow: hidden; background: var(--bg-tint); border-bottom: 1px solid var(--border-light); } .page-hero::before { content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient(ellipse at center, rgba(107, 33, 168, 0.08) 0%, rgba(45, 16, 96, 0.03) 50%, transparent 75% ); pointer-events: none; } .page-hero-inner { position: relative; max-width: 700px; margin: 0 auto; } /* page-hero on dark hero pages */ .page-hero.dark { background: var(--obsidian); color: var(--white); border-bottom: 1px solid rgba(107,33,168,0.12); } /* ============================================ BUTTONS ============================================ */ .btn-primary { display: inline-block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--white); background: linear-gradient(135deg, #6B21A8 0%, #4C1D95 100%); border: 1px solid rgba(139, 92, 246, 0.4); padding: 13px 28px; border-radius: 10px; letter-spacing: 0.01em; box-shadow: 0 4px 24px rgba(107, 33, 168, 0.35), inset 0 1px 0 rgba(196, 181, 253, 0.15); cursor: pointer; transition: box-shadow 0.2s, transform 0.15s; text-decoration: none; } .btn-primary:hover { box-shadow: 0 6px 32px rgba(107, 33, 168, 0.5); transform: translateY(-1px); color: var(--white); } .btn-secondary { display: inline-block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--purple-primary); background: transparent; border: 1px solid rgba(107, 33, 168, 0.3); padding: 13px 28px; border-radius: 10px; letter-spacing: 0.01em; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; text-decoration: none; } .btn-secondary:hover { color: var(--white); background: var(--purple-primary); border-color: var(--purple-primary); } /* btn-secondary on dark backgrounds */ .dark .btn-secondary, .hero-wrap .btn-secondary { color: var(--muted-light); border-color: rgba(107, 33, 168, 0.2); } .dark .btn-secondary:hover, .hero-wrap .btn-secondary:hover { color: var(--white); border-color: rgba(139, 92, 246, 0.4); background: transparent; } /* ============================================ SECTION BASE ============================================ */ .section { position: relative; z-index: 1; padding: 96px 48px; background: var(--bg); } .section-inner { max-width: 1200px; margin: 0 auto; } .section-alt { background: var(--bg-tint); border-top: 1px solid rgba(107, 33, 168, 0.08); border-bottom: 1px solid rgba(107, 33, 168, 0.08); } /* Dark variant for sections that need to stay dark */ .section.dark { background: var(--obsidian-mid); color: var(--white); } .divider { border: none; border-top: 1px solid rgba(107, 33, 168, 0.10); margin: 0; } .section-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple-primary); margin-bottom: 12px; } .section-heading { font-size: clamp(28px, 3.8vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--text-primary); margin-bottom: 14px; } .section-subhead { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--text-body); max-width: 560px; } /* Overrides for dark sections */ .dark .section-label { color: var(--purple-light); } .dark .section-heading { color: var(--white); } .dark .section-subhead { color: var(--muted-light); } /* ============================================ FOOTER — dark ============================================ */ footer { position: relative; z-index: 1; background: var(--obsidian); color: var(--white); border-top: 1px solid rgba(107, 33, 168, 0.15); padding: 64px 48px 40px; } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(107, 33, 168, 0.12); } .footer-brand p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 14px; max-width: 280px; } .footer-col h4 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 18px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 10px; } .footer-col a { font-size: 13px; color: var(--muted); transition: color 0.15s; } .footer-col a:hover { color: var(--white); } .footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .footer-legal { font-size: 11.5px; color: var(--muted); line-height: 1.7; max-width: 640px; } .footer-copy { font-size: 11.5px; color: var(--muted); white-space: nowrap; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { nav { padding: 0 32px; } .section { padding: 80px 32px; } .page-hero { padding: 100px 32px 64px; } footer { padding: 48px 32px 32px; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 768px) { nav { padding: 0 20px; } .logo-img { height: 46px; } .nav-links { display: none; } .section { padding: 64px 20px; } .page-hero { padding: 88px 20px 56px; } footer { padding: 40px 20px 28px; } .footer-inner { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { flex-direction: column; } }