/* ============================================================ MyAktiv60™ — Global Stylesheet The Heartbeat of Tomorrow ============================================================ Design System: Brand Kit 2026 Fonts: Quicksand · Plus Jakarta Sans · Inter Palette: Aktiv Orange · Deep Charcoal · Accent Blues/Teals ============================================================ */ /* ─── Google Fonts ─── */ /* Loaded via in HTML for faster discovery (preconnect + display=swap) */ /* ─── Design Tokens ─── */ :root { /* ── Primary — Aktiv Orange ── */ --orange-600: #D94E1F; --orange-500: #E8612B; --orange-400: #F07B4A; --orange-300: #F5A07A; --orange-200: #FADBC9; --orange-100: #FEF3ED; /* ── Neutrals — Deep Charcoal ── */ --charcoal-900: #1A1A2E; --charcoal-800: #232340; --gray-600: #4A4A68; --gray-400: #9090A8; --gray-200: #E2E2EC; --gray-50: #F9F9FC; /* ── Accents — Supporting ── */ --blue-500: #2D72C2; --blue-100: #E8F1FB; --teal-500: #0D9488; --teal-100: #E6F7F5; --coral-500: #E8452B; --coral-100: #FDEEEB; /* ── Semantic aliases (used throughout) ── */ --aktiv-orange: var(--orange-500); --aktiv-orange-hover: var(--orange-600); --aktiv-orange-light: var(--orange-400); --aktiv-orange-glow: rgba(232, 97, 43, 0.2); --charcoal: var(--charcoal-900); --charcoal-light: var(--charcoal-800); --accent-blue: var(--blue-500); --wellness-teal: var(--teal-500); --coral: var(--coral-500); --slate: #334155; --cool-gray: #94A3B8; --off-white: #F8FAFC; --white: #FFFFFF; /* ── Typography ── */ --font-display: 'Quicksand', 'Segoe UI', sans-serif; --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; --font-ui: 'Inter', 'Segoe UI', sans-serif; /* ── Spacing Scale (from design system: 4/8/16/24/32/48/64) ── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px; /* ── Layout ── */ --max-width: 1280px; --nav-height: 72px; /* ── Border Radius (design system: 12px / 20px / pill) ── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; /* ── Transitions ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 150ms var(--ease-out); --transition-base: 300ms var(--ease-out); --transition-slow: 500ms var(--ease-out); --transition-spring: 500ms var(--ease-spring); /* ── Shadows ── */ --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.06), 0 1px 2px rgba(26, 26, 46, 0.04); --shadow-md: 0 4px 16px rgba(26, 26, 46, 0.08); --shadow-lg: 0 8px 32px rgba(26, 26, 46, 0.1); --shadow-xl: 0 16px 48px rgba(26, 26, 46, 0.12); --shadow-orange: 0 4px 24px rgba(232, 97, 43, 0.2); --shadow-orange-strong: 0 8px 40px rgba(232, 97, 43, 0.3); --shadow-dark-card: 0 4px 24px rgba(0, 0, 0, 0.25); --shadow-dark-card-hover: 0 12px 48px rgba(0, 0, 0, 0.35); /* ── Warm grain overlay (subtle texture) ── */ --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESET & BASE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: 400; line-height: 1.7; color: var(--gray-600); background-color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } ul, ol { list-style: none; } button { font-family: var(--font-ui); cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: var(--font-body); font-size: 1rem; } ::selection { background: var(--aktiv-orange); color: var(--white); } /* ── Skip to Content (A11y) ── */ .skip-link { position: absolute; top: -100%; left: var(--space-md); background: var(--aktiv-orange); color: var(--white); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); z-index: 10000; font-family: var(--font-ui); font-weight: 600; } .skip-link:focus { top: var(--space-md); } /* ── Focus ── */ :focus-visible { outline: 2px solid var(--aktiv-orange); outline-offset: 3px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TYPOGRAPHY Type Scale from Design System: Display XL: Quicksand 72px/700 H1: Quicksand 42px/700 H2: Quicksand 28px/600 H3: Quicksand 22px/600 Body Large: Plus Jakarta Sans 18px Body: Plus Jakarta Sans 15px Caption: Inter 12px/600 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.01em; color: var(--charcoal); } /* Responsive type scale with clamp() */ h1 { font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-weight: 700; } h2 { font-size: clamp(1.625rem, 3.5vw, 1.75rem); font-weight: 600; line-height: 1.25; } h3 { font-size: clamp(1.25rem, 2.5vw, 1.375rem); font-weight: 600; line-height: 1.3; } h4 { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; line-height: 1.35; } h5 { font-size: 1rem; font-weight: 600; } p { max-width: 65ch; line-height: 1.7; } .body-large { font-size: 1.125rem; line-height: 1.75; } .caption { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* ── Text color utilities ── */ .text-orange { color: var(--aktiv-orange); } .text-white { color: var(--white); } .text-teal { color: var(--wellness-teal); } .text-blue { color: var(--accent-blue); } .text-coral { color: var(--coral); } .text-charcoal { color: var(--charcoal); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LAYOUT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } @media (min-width: 768px) { .container { padding: 0 var(--space-2xl); } } .section { padding: var(--space-4xl) 0; position: relative; } @media (min-width: 768px) { .section { padding: var(--space-5xl) 0; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION BACKGROUNDS — Light / Dark Alternation Critical: Mix of dark AND light sections. Dark sections: charcoal bg, white text Light sections: off-white or white bg, dark text ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── DARK SECTIONS ── */ .section-dark { background-color: var(--charcoal); color: var(--white); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark .section-title { color: var(--white); } .section-dark p, .section-dark .section-subtitle { color: var(--gray-400); } /* Subtle warm grain on dark sections */ .section-dark::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); background-repeat: repeat; background-size: 256px; pointer-events: none; opacity: 0.4; mix-blend-mode: overlay; } /* ── DARKER VARIANT ── */ .section-darker { background-color: var(--charcoal-light); color: var(--white); } .section-darker h1, .section-darker h2, .section-darker h3, .section-darker h4, .section-darker h5, .section-darker .section-title { color: var(--white); } .section-darker p, .section-darker .section-subtitle { color: var(--gray-400); } /* ── LIGHT SECTIONS ── */ .section-light { background-color: var(--white); } .section-light h1, .section-light h2, .section-light h3, .section-light h4, .section-light h5, .section-light .section-title { color: var(--charcoal); } .section-light p, .section-light .section-subtitle { color: var(--gray-600); } /* ── OFF-WHITE SECTIONS ── */ .section-off-white { background-color: var(--off-white); } .section-off-white h1, .section-off-white h2, .section-off-white h3, .section-off-white h4, .section-off-white h5, .section-off-white .section-title { color: var(--charcoal); } .section-off-white p, .section-off-white .section-subtitle { color: var(--gray-600); } /* ── ORANGE ACCENT SECTION ── */ .section-orange { background-color: var(--aktiv-orange); color: var(--white); } .section-orange h1, .section-orange h2, .section-orange h3, .section-orange h4, .section-orange p { color: var(--white); } .section-orange p { color: rgba(255, 255, 255, 0.9); } /* ── TEAL ACCENT SECTION ── */ .section-teal-accent { background: linear-gradient(135deg, var(--teal-100) 0%, var(--off-white) 100%); } .section-teal-accent h2, .section-teal-accent h3, .section-teal-accent h4, .section-teal-accent .section-title { color: var(--charcoal); } .section-teal-accent p { color: var(--gray-600); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CARD STYLES — Adaptive to Section Context Cards on dark sections: charcoal-800 bg Cards on light sections: white bg with soft border ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .card { border-radius: var(--radius-lg); padding: var(--space-2xl); transition: transform var(--transition-base), box-shadow var(--transition-base); position: relative; } .card:hover { transform: translateY(-4px); } /* ── Dark context cards ── */ .section-dark .card, .section-darker .card { background: var(--charcoal-light); border: 1px solid rgba(255, 255, 255, 0.05); } .section-dark .card:hover, .section-darker .card:hover { box-shadow: var(--shadow-dark-card-hover); } .section-dark .card h4, .section-darker .card h4 { color: var(--white); } .section-dark .card p, .section-darker .card p { color: var(--gray-400); } /* ── Light context cards ── */ .section-light .card, .section-off-white .card, .section-teal-accent .card { background: var(--white); border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); } .section-light .card:hover, .section-off-white .card:hover, .section-teal-accent .card:hover { box-shadow: var(--shadow-lg); } .section-off-white .card { background: var(--white); } .section-light .card h4, .section-off-white .card h4, .section-teal-accent .card h4 { color: var(--charcoal); } .section-light .card p, .section-off-white .card p, .section-teal-accent .card p { color: var(--gray-600); } /* ── Card accent borders ── */ .card--orange-left { border-left: 3px solid var(--aktiv-orange); } .card--orange-top { border-top: 3px solid var(--aktiv-orange); } .card--blue-top { border-top: 3px solid var(--accent-blue); } .card--teal-top { border-top: 3px solid var(--wellness-teal); } .card--coral-top { border-top: 3px solid var(--coral); } /* ── Card hover glows ── */ .card--orange-glow:hover { box-shadow: 0 8px 40px rgba(232, 97, 43, 0.12); } .card--blue-glow:hover { box-shadow: 0 8px 40px rgba(45, 114, 194, 0.12); } .card--teal-glow:hover { box-shadow: 0 8px 40px rgba(13, 148, 136, 0.12); } .card--coral-glow:hover { box-shadow: 0 8px 40px rgba(232, 69, 43, 0.12); } /* ── Card Icon ── */ .card-icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-lg); font-size: 1.5rem; } .card-icon--orange { background: var(--orange-100); color: var(--aktiv-orange); } .card-icon--blue { background: var(--blue-100); color: var(--accent-blue); } .card-icon--teal { background: var(--teal-100); color: var(--wellness-teal); } .card-icon--coral { background: var(--coral-100); color: var(--coral); } /* Dark section card icons need different treatment */ .section-dark .card-icon--orange { background: rgba(232, 97, 43, 0.12); } .section-dark .card-icon--blue { background: rgba(45, 114, 194, 0.12); } .section-dark .card-icon--teal { background: rgba(13, 148, 136, 0.12); } .section-dark .card-icon--coral { background: rgba(232, 69, 43, 0.12); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION HEADERS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .section-header { margin-bottom: var(--space-3xl); } .section-label { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--aktiv-orange); margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); } .section-label::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--aktiv-orange); border-radius: 1px; } .section-title { margin-bottom: var(--space-md); } .section-subtitle { font-size: 1.125rem; max-width: 600px; } .section-header--center { text-align: center; } .section-header--center .section-label { justify-content: center; } .section-header--center .section-subtitle { margin-left: auto; margin-right: auto; } /* ── Brand Divider ── */ .brand-divider { width: 60px; height: 3px; background: var(--aktiv-orange); border: none; margin: var(--space-lg) 0; border-radius: 2px; } .brand-divider--center { margin-left: auto; margin-right: auto; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BUTTONS Design system: rounded pill buttons with orange primary ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .btn { font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.875rem 2rem; border-radius: var(--radius-full); transition: all var(--transition-base); cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; border: 2px solid transparent; } /* Warm shimmer on hover */ .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%); opacity: 0; transition: opacity var(--transition-fast); } .btn:hover::after { opacity: 1; } /* ── Primary: Orange fill ── */ .btn-primary { background: var(--aktiv-orange); color: var(--white); border-color: var(--aktiv-orange); box-shadow: var(--shadow-orange); } .btn-primary:hover { background: var(--aktiv-orange-hover); border-color: var(--aktiv-orange-hover); transform: translateY(-2px); box-shadow: var(--shadow-orange-strong); } .btn-primary:active { transform: translateY(0); } /* ── Secondary (on dark): White outline ── */ .btn-secondary { background: transparent; color: var(--white); border: 2px solid rgba(255, 255, 255, 0.3); } .btn-secondary:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); } /* ── Secondary Dark (on light): Charcoal outline ── */ .btn-secondary-dark { background: transparent; color: var(--charcoal); border: 2px solid var(--charcoal); } .btn-secondary-dark:hover { background: var(--charcoal); color: var(--white); transform: translateY(-2px); } /* ── White: White fill ── */ .btn-white { background: var(--white); color: var(--aktiv-orange); border-color: var(--white); } .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2); } /* ── Ghost Orange (on light) ── */ .btn-ghost-orange { background: transparent; color: var(--aktiv-orange); border: 2px solid var(--aktiv-orange); } .btn-ghost-orange:hover { background: var(--aktiv-orange); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-orange); } /* ── Button sizes ── */ .btn-sm { padding: 0.625rem 1.25rem; font-size: 0.8125rem; } .btn-lg { padding: 1rem 2.5rem; font-size: 1rem; } /* ── Arrow button ── */ .btn-arrow::after { content: none; } .btn-arrow svg { transition: transform var(--transition-fast); } .btn-arrow:hover svg { transform: translateX(3px); } /* ── Text link style ── */ .learn-more { font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600; color: var(--aktiv-orange); display: inline-flex; align-items: center; gap: var(--space-xs); transition: all var(--transition-fast); } .learn-more:hover { gap: var(--space-sm); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BADGES (from design system) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .badge { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; padding: 0.375rem 1rem; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: var(--space-xs); letter-spacing: 0.02em; } .badge--orange { background: var(--orange-100); color: var(--aktiv-orange); border: 1px solid var(--orange-200); } .badge--blue { background: var(--blue-100); color: var(--accent-blue); border: 1px solid rgba(45, 114, 194, 0.2); } .badge--teal { background: var(--teal-100); color: var(--wellness-teal); border: 1px solid rgba(13, 148, 136, 0.2); } .badge--coral { background: var(--coral-100); color: var(--coral); border: 1px solid rgba(232, 69, 43, 0.2); } .badge--dark { background: var(--charcoal); color: var(--white); border: 1px solid var(--charcoal); } .badge--charcoal-outline { background: transparent; color: var(--charcoal); border: 1px solid var(--gray-200); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ NAVIGATION Transparent on hero, frosted glass when scrolled ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-height); display: flex; align-items: center; transition: all var(--transition-base); background-color: #FFFFFF !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .nav .nav-link { color: var(--charcoal); } .nav .nav-link:hover { color: var(--aktiv-orange); } .nav .nav-link.active { color: var(--aktiv-orange); border-bottom: 2px solid var(--aktiv-orange); } .nav .nav-logo img { height: 42px; width: auto; mix-blend-mode: normal; } .nav .nav-hamburger span { background: var(--charcoal); } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } @media (min-width: 768px) { .nav-inner { padding: 0 var(--space-2xl); } } /* ── Logo ── */ .nav-logo { display: flex; align-items: center; gap: var(--space-sm); z-index: 1001; } .nav-logo img { height: 40px; width: auto; display: block; } .nav-logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; color: var(--white); letter-spacing: -0.02em; } .nav-logo-text span { color: var(--aktiv-orange); } /* ── Nav Links ── */ .nav-links { display: flex; align-items: center; gap: var(--space-2xl); } .nav-link { font-family: var(--font-ui); font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); position: relative; padding: var(--space-xs) 0; transition: color var(--transition-fast); } .nav-link:hover, .nav-link.active { color: var(--white); } .nav-link.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--aktiv-orange); border-radius: 1px; } .nav-cta { margin-left: var(--space-lg); } /* ── Hamburger ── */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; cursor: pointer; z-index: 1001; gap: 6px; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--transition-base); transform-origin: center; } .nav-hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ── Mobile Nav ── */ .nav-mobile { position: fixed; inset: 0; background: var(--charcoal); z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xl); opacity: 0; visibility: hidden; transition: all var(--transition-base); } .nav-mobile.open { opacity: 1; visibility: visible; } .nav-mobile .nav-link { font-size: 1.5rem; font-family: var(--font-display); font-weight: 700; color: var(--white); } .nav-mobile .btn { margin-top: var(--space-lg); } @media (max-width: 767px) { .nav-hamburger { display: flex; } .nav-links { display: none; } .nav-cta.desktop-only { display: none; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HERO SECTION Full-bleed image with warm overlay — person in gym ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: var(--nav-height); background: var(--charcoal); } /* ── Full-bleed image background area ── */ .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg canvas { width: 100%; height: 100%; } /* Image-based hero background */ .hero-image-bg { position: absolute; inset: 0; z-index: 0; } .hero-image-bg img { width: 100%; height: 100%; object-fit: cover; } /* Warm overlay — NOT flat black, slightly orange-tinted for warmth */ .hero-image-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(26, 26, 46, 0.88) 0%, rgba(26, 26, 46, 0.6) 40%, rgba(26, 26, 46, 0.7) 100% ), linear-gradient( to bottom, transparent 50%, rgba(26, 26, 46, 0.3) 100% ); } /* ── Hero image placeholder (when no real image yet) ── */ .hero-image-placeholder { position: absolute; inset: 0; z-index: 0; /* Warm gradient simulating gym lighting until real photo */ background: radial-gradient(ellipse at 70% 30%, rgba(232, 97, 43, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 30% 70%, rgba(13, 148, 136, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(45, 114, 194, 0.06) 0%, transparent 60%), linear-gradient(160deg, var(--charcoal) 0%, var(--charcoal-light) 50%, var(--charcoal) 100%); overflow: hidden; } /* Decorative orbs for depth (matches cover design in PDF) */ .hero-image-placeholder::before { content: ''; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 97, 43, 0.12) 0%, transparent 70%); animation: float-slow 20s ease-in-out infinite; } .hero-image-placeholder::after { content: ''; position: absolute; bottom: -30%; left: -15%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(45, 114, 194, 0.08) 0%, transparent 70%); animation: float-slow 25s ease-in-out infinite reverse; } @keyframes float-slow { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -15px) scale(1.03); } 66% { transform: translate(-10px, 10px) scale(0.97); } } /* Ambient gradient overlay */ .hero-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(232, 97, 43, 0.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(13, 148, 136, 0.05) 0%, transparent 50%); z-index: 1; pointer-events: none; } /* ── Hero content ── */ .hero-content { position: relative; z-index: 2; max-width: 800px; } .hero-logo { max-width: 280px; margin-bottom: var(--space-2xl); mix-blend-mode: lighten; } @media (min-width: 768px) { .hero-logo { max-width: 360px; } } .hero-title { color: var(--white); margin-bottom: var(--space-lg); } .hero-title .line { display: block; } .hero-subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--gray-400); max-width: 560px; margin-bottom: var(--space-2xl); line-height: 1.8; } .hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-3xl); } /* ── Hero Stat Bar ── */ .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); padding-top: var(--space-2xl); border-top: 1px solid rgba(255, 255, 255, 0.08); } @media (min-width: 768px) { .hero-stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } } .hero-stat { text-align: left; } .hero-stat-value { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--aktiv-orange); margin-bottom: 2px; } .hero-stat-label { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--gray-400); font-weight: 500; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PAGE HERO (Inner Pages) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .page-hero { position: relative; padding: calc(var(--nav-height) + var(--space-4xl)) 0 var(--space-4xl); overflow: hidden; background: var(--charcoal); } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(232, 97, 43, 0.06) 0%, transparent 60%), radial-gradient(ellipse at 70% 100%, rgba(13, 148, 136, 0.04) 0%, transparent 50%); } .page-hero-bg { position: absolute; inset: 0; z-index: 0; } .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .page-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26, 26, 46, 0.85) 0%, rgba(26, 26, 46, 0.6) 100%); } .page-hero-content { position: relative; z-index: 1; max-width: 700px; } .page-hero h1 { color: var(--white); margin-bottom: var(--space-md); } .page-hero p { font-size: 1.125rem; color: var(--gray-400); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LOGO HANDLING Dark bg: mix-blend-mode: lighten Light bg: show white-bg version or standard ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .logo-dark-bg { mix-blend-mode: lighten; } .logo-light-bg { mix-blend-mode: normal; } /* ── Footer logo on dark background ── */ .footer .nav-logo img { mix-blend-mode: lighten; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PHOTO CARDS / IMAGE SHOWCASES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .photo-card { border-radius: var(--radius-lg); overflow: hidden; position: relative; } .photo-card img { width: 100%; height: 280px; object-fit: cover; transition: transform var(--transition-slow); } .photo-card:hover img { transform: scale(1.04); } .photo-card-content { padding: var(--space-xl); } .image-showcase { display: grid; gap: var(--space-lg); margin-top: var(--space-2xl); } @media (min-width: 768px) { .image-showcase { grid-template-columns: repeat(3, 1fr); } } .image-showcase img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-lg); transition: transform var(--transition-base); } .image-showcase img:hover { transform: scale(1.03); } .image-showcase .image-tall { grid-row: span 2; height: 100%; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW WE WORK — Steps Grid ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .steps-grid { display: grid; gap: var(--space-2xl); } @media (min-width: 1024px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } } .step-card { padding-left: var(--space-xl); border-left: 3px solid var(--aktiv-orange); position: relative; } .step-number { font-family: var(--font-display); font-size: 4rem; font-weight: 700; line-height: 1; margin-bottom: var(--space-sm); } /* Step number adapts to context */ .section-dark .step-number { color: rgba(232, 97, 43, 0.15); } .section-light .step-number, .section-off-white .step-number { color: rgba(232, 97, 43, 0.2); } .step-card h4 { margin-bottom: var(--space-sm); } .step-card p { font-size: 0.9375rem; line-height: 1.8; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PILLARS GRID ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pillars-grid { display: grid; gap: var(--space-xl); } @media (min-width: 768px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } } .pillar-card { padding: var(--space-2xl); } .pillar-card h4 { margin-bottom: var(--space-sm); } .pillar-card p { font-size: 0.9375rem; line-height: 1.7; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MARKETS GRID ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .markets-grid { display: grid; gap: var(--space-xl); } @media (min-width: 768px) { .markets-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .markets-grid { grid-template-columns: repeat(3, 1fr); } } .market-card { position: relative; overflow: hidden; } .market-card .card-icon { margin-bottom: var(--space-md); } .market-card h4 { margin-bottom: var(--space-sm); font-size: 1.25rem; } .market-card p { font-size: 0.9375rem; margin-bottom: var(--space-lg); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PURPOSE / MISSION / VISION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pmv-grid { display: grid; gap: var(--space-xl); } @media (min-width: 1024px) { .pmv-grid { grid-template-columns: repeat(3, 1fr); } } .pmv-card { padding: var(--space-2xl); border-left: 3px solid var(--aktiv-orange); } .pmv-card h4 { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--aktiv-orange); margin-bottom: var(--space-lg); } .pmv-card p { font-size: 0.9375rem; line-height: 1.8; } .pmv-card--blue { border-left-color: var(--accent-blue); } .pmv-card--blue h4 { color: var(--accent-blue); } .pmv-card--teal { border-left-color: var(--wellness-teal); } .pmv-card--teal h4 { color: var(--wellness-teal); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TESTIMONIALS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .testimonials-wrapper { position: relative; overflow: hidden; } .testimonials-track { display: flex; gap: var(--space-xl); transition: transform var(--transition-slow); } @media (min-width: 1024px) { .testimonials-track { display: grid; grid-template-columns: repeat(3, 1fr); transform: none !important; } } .testimonial-card { min-width: calc(100vw - 3rem); padding: var(--space-2xl); border-left: 3px solid var(--aktiv-orange); border-radius: var(--radius-lg); display: flex; flex-direction: column; } @media (min-width: 1024px) { .testimonial-card { min-width: unset; } } /* Dark context */ .section-dark .testimonial-card { background: var(--charcoal-light); } /* Light context */ .section-light .testimonial-card, .section-off-white .testimonial-card { background: var(--white); border: 1px solid var(--gray-200); border-left: 3px solid var(--aktiv-orange); } .testimonial-quote { font-size: 1rem; line-height: 1.8; flex: 1; margin-bottom: var(--space-xl); position: relative; padding-top: var(--space-xl); } .testimonial-quote::before { content: '\201C'; position: absolute; top: -8px; left: 0; font-size: 3.5rem; color: var(--aktiv-orange); font-family: Georgia, serif; line-height: 1; opacity: 0.35; } .testimonial-author { font-family: var(--font-ui); font-weight: 600; font-size: 0.9375rem; } .section-dark .testimonial-author { color: var(--white); } .section-light .testimonial-author { color: var(--charcoal); } .testimonial-role { font-size: 0.8125rem; margin-top: 2px; } .section-dark .testimonial-role { color: var(--gray-400); } .section-light .testimonial-role { color: var(--gray-600); } /* ── Carousel dots ── */ .carousel-dots { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); } @media (min-width: 1024px) { .carousel-dots { display: none; } } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(148, 163, 184, 0.3); cursor: pointer; transition: all var(--transition-fast); } .carousel-dot.active { background: var(--aktiv-orange); width: 24px; border-radius: 4px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CTA BANNER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .cta-banner { padding: var(--space-4xl) 0; text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(0, 0, 0, 0.06) 0%, transparent 50%); } .cta-banner .container { position: relative; z-index: 1; } .cta-banner h2 { color: var(--white); margin-bottom: var(--space-md); } .cta-banner p { color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto var(--space-2xl); font-size: 1.125rem; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STAT TILES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } @media (min-width: 768px) { .stat-tiles { grid-template-columns: repeat(4, 1fr); } } .stat-tile { padding: var(--space-xl); text-align: center; border-radius: var(--radius-lg); } /* Dark context */ .section-dark .stat-tile { background: var(--charcoal-light); border: 1px solid rgba(255, 255, 255, 0.05); } /* Light context */ .section-light .stat-tile, .section-off-white .stat-tile { background: var(--white); border: 1px solid var(--gray-200); } .stat-tile-value { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: var(--aktiv-orange); margin-bottom: 4px; } .stat-tile-label { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 500; } .section-dark .stat-tile-label { color: var(--gray-400); } .section-light .stat-tile-label { color: var(--gray-600); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TIMELINE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .timeline { position: relative; padding: var(--space-xl) 0; } .timeline-track { display: flex; gap: var(--space-xl); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-xl); scrollbar-width: thin; scrollbar-color: var(--aktiv-orange) transparent; } .timeline-track::-webkit-scrollbar { height: 4px; } .timeline-track::-webkit-scrollbar-track { background: transparent; border-radius: 2px; } .timeline-track::-webkit-scrollbar-thumb { background: var(--aktiv-orange); border-radius: 2px; } .timeline-item { min-width: 280px; max-width: 320px; scroll-snap-align: start; flex-shrink: 0; position: relative; padding-top: var(--space-xl); } .timeline-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--aktiv-orange), rgba(232, 97, 43, 0.2)); border-radius: 2px; } .timeline-year { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--aktiv-orange); margin-bottom: var(--space-sm); } .timeline-text { font-size: 0.9375rem; line-height: 1.7; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VALUES GRID (Bleue Heart Culture) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .values-grid { display: grid; gap: var(--space-xl); } @media (min-width: 768px) { .values-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .values-grid { grid-template-columns: repeat(4, 1fr); } } .value-card { padding: var(--space-xl); border-left: 3px solid var(--accent-blue); } .value-card .value-icon { color: var(--accent-blue); font-size: 1.25rem; margin-bottom: var(--space-md); } .value-card h5 { margin-bottom: var(--space-sm); font-family: var(--font-display); } .value-card p { font-size: 0.875rem; line-height: 1.7; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BOARD & TEAM GRID ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .team-grid { display: grid; gap: var(--space-xl); } @media (min-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } } .team-card { padding: var(--space-xl); text-align: center; } .team-card-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--aktiv-orange), var(--orange-400)); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-md); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--white); } .team-card h5 { margin-bottom: 2px; } .team-card .team-role { font-size: 0.8125rem; color: var(--aktiv-orange); font-family: var(--font-ui); font-weight: 500; } .team-card p { font-size: 0.8125rem; margin-top: var(--space-xs); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CREDENTIALS GRID ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .credentials-grid { display: grid; gap: var(--space-xl); } @media (min-width: 768px) { .credentials-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .credentials-grid { grid-template-columns: repeat(4, 1fr); } } .credential-card { text-align: center; padding: var(--space-xl); } .credential-icon { font-size: 2rem; margin-bottom: var(--space-md); color: var(--aktiv-orange); } .credential-card h5 { font-size: 1rem; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ACCORDION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .accordion-item { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-md); transition: all var(--transition-base); } /* Dark context */ .section-dark .accordion-item { border: 1px solid rgba(255, 255, 255, 0.06); } .section-dark .accordion-item:hover { border-color: rgba(232, 97, 43, 0.2); } .section-dark .accordion-header { background: var(--charcoal-light); } .section-dark .accordion-header:hover { background: var(--charcoal-800); } /* Light context */ .section-light .accordion-item, .section-off-white .accordion-item { border: 1px solid var(--gray-200); } .section-light .accordion-item:hover, .section-off-white .accordion-item:hover { border-color: var(--orange-200); } .section-light .accordion-header, .section-off-white .accordion-header { background: var(--off-white); } .section-light .accordion-header:hover, .section-off-white .accordion-header:hover { background: var(--orange-100); } .accordion-header { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-xl) var(--space-2xl); cursor: pointer; transition: background var(--transition-fast); width: 100%; text-align: left; } .accordion-header .card-icon { margin-bottom: 0; flex-shrink: 0; } .accordion-header h4 { flex: 1; } .accordion-toggle { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--aktiv-orange); transition: transform var(--transition-base); } .accordion-item.open .accordion-toggle { transform: rotate(180deg); } .accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .accordion-body-inner { padding: 0 var(--space-2xl) var(--space-2xl); padding-left: calc(56px + var(--space-2xl) + var(--space-lg)); } .accordion-body-inner p { font-size: 0.9375rem; line-height: 1.8; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WELLNESS POLICY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .policy-grid { display: grid; gap: var(--space-xl); } @media (min-width: 1024px) { .policy-grid { grid-template-columns: repeat(3, 1fr); } } .policy-card { padding: var(--space-2xl); border-left: 3px solid var(--wellness-teal); } .policy-number { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; color: rgba(13, 148, 136, 0.2); margin-bottom: var(--space-sm); } .policy-card p { font-size: 0.9375rem; line-height: 1.8; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STRATEGIC OBJECTIVES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .objectives-grid { display: grid; gap: var(--space-md); } @media (min-width: 768px) { .objectives-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .objectives-grid { grid-template-columns: repeat(3, 1fr); } } .objective-tile { padding: var(--space-xl); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--space-md); transition: all var(--transition-base); } /* Dark */ .section-dark .objective-tile { background: var(--charcoal-light); border: 1px solid rgba(255, 255, 255, 0.04); } .section-dark .objective-tile:hover { border-color: rgba(232, 97, 43, 0.2); transform: translateY(-2px); } /* Light */ .section-light .objective-tile, .section-off-white .objective-tile { background: var(--white); border: 1px solid var(--gray-200); } .section-light .objective-tile:hover, .section-off-white .objective-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .objective-tile .obj-icon { color: var(--aktiv-orange); flex-shrink: 0; font-size: 1.25rem; } .objective-tile p { font-size: 0.9375rem; font-weight: 500; } /* ── Growth Arrow ── */ .growth-arrow { text-align: center; padding: var(--space-2xl) 0; } .growth-arrow-target { display: inline-flex; align-items: center; gap: var(--space-md); padding: var(--space-lg) var(--space-2xl); background: rgba(232, 97, 43, 0.08); border: 2px solid var(--aktiv-orange); border-radius: var(--radius-full); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--aktiv-orange); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DIGITAL ECOSYSTEM TEASER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ecosystem-teaser { text-align: center; padding: var(--space-3xl); border-radius: var(--radius-lg); position: relative; overflow: hidden; } .section-dark .ecosystem-teaser { background: var(--charcoal-light); border: 1px solid rgba(232, 97, 43, 0.1); } .section-light .ecosystem-teaser { background: var(--off-white); border: 1px solid var(--gray-200); } .ecosystem-teaser::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(232, 97, 43, 0.04) 0%, transparent 70%); } .ecosystem-teaser .content { position: relative; z-index: 1; } .ecosystem-features { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin: var(--space-xl) 0; } .ecosystem-feature-tag { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 500; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-full); } .section-dark .ecosystem-feature-tag { background: rgba(232, 97, 43, 0.08); border: 1px solid rgba(232, 97, 43, 0.15); color: var(--orange-400); } .section-light .ecosystem-feature-tag { background: var(--orange-100); border: 1px solid var(--orange-200); color: var(--aktiv-orange); } /* Pulse indicator */ .pulse-indicator { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600; color: var(--aktiv-orange); } .pulse-dot { width: 10px; height: 10px; background: var(--aktiv-orange); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CONTACT PAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .contact-grid { display: grid; gap: var(--space-3xl); } @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.5fr; } } .contact-info { display: flex; flex-direction: column; gap: var(--space-xl); } .contact-item { display: flex; align-items: flex-start; gap: var(--space-md); } .contact-item-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--aktiv-orange); } /* Dark */ .section-dark .contact-item-icon { background: rgba(232, 97, 43, 0.1); } /* Light */ .section-light .contact-item-icon { background: var(--orange-100); } .contact-item p, .contact-item a { font-size: 0.9375rem; } .contact-item a:hover { color: var(--aktiv-orange); } /* ── Social links ── */ .social-links { display: flex; gap: var(--space-md); margin-top: var(--space-lg); } .social-link { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .section-dark .social-link { background: rgba(255, 255, 255, 0.05); color: var(--gray-400); } .section-light .social-link { background: var(--off-white); color: var(--gray-600); border: 1px solid var(--gray-200); } .social-link:hover { background: var(--aktiv-orange); color: var(--white); transform: translateY(-2px); border-color: var(--aktiv-orange); } /* ── Contact Form ── */ .contact-form { border-radius: var(--radius-lg); padding: var(--space-2xl); } .section-dark .contact-form { background: var(--charcoal-light); border: 1px solid rgba(255, 255, 255, 0.04); } .section-light .contact-form, .section-off-white .contact-form { background: var(--white); border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); } .form-group { margin-bottom: var(--space-lg); } .form-group label { display: block; font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600; margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: 0.05em; } .section-dark .form-group label { color: var(--gray-400); } .section-light .form-group label { color: var(--gray-600); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.875rem var(--space-lg); border-radius: var(--radius-sm); font-size: 0.9375rem; transition: all var(--transition-fast); outline: none; } /* Dark inputs */ .section-dark .form-group input, .section-dark .form-group select, .section-dark .form-group textarea { background: var(--charcoal); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--white); } .section-dark .form-group input::placeholder, .section-dark .form-group textarea::placeholder { color: var(--gray-600); } /* Light inputs */ .section-light .form-group input, .section-light .form-group select, .section-light .form-group textarea, .section-off-white .form-group input, .section-off-white .form-group select, .section-off-white .form-group textarea { background: var(--off-white); border: 1px solid var(--gray-200); color: var(--charcoal); } .section-light .form-group input::placeholder, .section-light .form-group textarea::placeholder { color: var(--gray-400); } /* Focus — same for both */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--aktiv-orange); box-shadow: 0 0 0 3px rgba(232, 97, 43, 0.1); } .form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .form-group textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .form-row { grid-template-columns: repeat(2, 1fr); } } /* Form success */ .form-success { display: none; text-align: center; padding: var(--space-2xl); } .form-success.show { display: block; } .form-success .success-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(13, 148, 136, 0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); color: var(--wellness-teal); font-size: 1.5rem; } /* Form errors */ .form-error { font-size: 0.8125rem; color: var(--coral); margin-top: var(--space-xs); display: none; } .form-group.error input, .form-group.error select, .form-group.error textarea { border-color: var(--coral); } .form-group.error .form-error { display: block; } /* ── Map container ── */ .map-container { margin-top: var(--space-3xl); border-radius: var(--radius-lg); overflow: hidden; height: 400px; border: 1px solid var(--gray-200); } .map-container iframe { width: 100%; height: 100%; border: none; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ OEM PARTNERS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .partners-grid { display: grid; gap: var(--space-xl); } @media (min-width: 768px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } } .partner-card { padding: var(--space-2xl); border-left: 3px solid var(--aktiv-orange); } .partner-card h4 { margin-bottom: var(--space-sm); } .partner-card p { font-size: 0.9375rem; line-height: 1.7; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .footer { background: var(--charcoal); border-top: 3px solid var(--aktiv-orange); padding-top: var(--space-3xl); padding-bottom: 0; color: var(--white); } .footer-grid { display: grid; gap: var(--space-2xl); padding-bottom: var(--space-3xl); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } } .footer-brand p { font-size: 0.9375rem; color: var(--gray-400); margin-bottom: var(--space-lg); } .footer-heading { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); margin-bottom: var(--space-lg); } .footer-links { display: flex; flex-direction: column; gap: var(--space-sm); } .footer-link { font-size: 0.9375rem; color: var(--gray-400); transition: color var(--transition-fast); padding: var(--space-xs) 0; } .footer-link:hover { color: var(--aktiv-orange); } .footer-contact-item { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-sm); color: var(--gray-400); font-size: 0.9375rem; } .footer-contact-item svg { flex-shrink: 0; margin-top: 4px; color: var(--aktiv-orange); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: var(--space-lg) 0; display: flex; flex-direction: column; gap: var(--space-md); align-items: center; text-align: center; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } } .footer-bottom p { font-size: 0.8125rem; color: var(--gray-600); } .footer-social { display: flex; gap: var(--space-md); } .footer-social .social-link { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.05); color: var(--gray-400); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SCROLL ANIMATIONS Warm, organic reveals — not robotic ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal-right.visible { opacity: 1; transform: translateX(0); } .reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal-scale.visible { opacity: 1; transform: scale(1); } /* Stagger delays */ .delay-1 { transition-delay: 80ms; } .delay-2 { transition-delay: 160ms; } .delay-3 { transition-delay: 240ms; } .delay-4 { transition-delay: 320ms; } .delay-5 { transition-delay: 400ms; } .delay-6 { transition-delay: 480ms; } .delay-7 { transition-delay: 560ms; } .delay-8 { transition-delay: 640ms; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ UTILITY — SVG Icons ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESPONSIVE FINE-TUNING ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 767px) { .section { padding: var(--space-3xl) 0; } h1 { font-size: 2.25rem; } h2 { font-size: 1.625rem; } .hero { min-height: calc(100vh - 40px); } .hero-buttons { flex-direction: column; } .hero-buttons .btn { width: 100%; text-align: center; } .cta-banner { padding: var(--space-3xl) 0; } .pmv-card, .step-card { padding-left: var(--space-lg); } .footer-grid { grid-template-columns: 1fr; } .accordion-header { padding: var(--space-lg); } .accordion-body-inner { padding: 0 var(--space-lg) var(--space-lg); padding-left: var(--space-lg); } } @media (min-width: 768px) and (max-width: 1023px) { .markets-grid { grid-template-columns: repeat(2, 1fr); } .pillars-grid { grid-template-columns: repeat(2, 1fr); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ REDUCED MOTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ════════════════════════════════════════════════════════════ BRAND REFRESH 2026 — Connect · Move · Thrive New vibrant identity: magenta joins the palette, every division carries its own accent, dark base is preserved. Layered on top of the base system above. ════════════════════════════════════════════════════════════ */ :root { /* ── New brand colour: Magenta (Connect / Social) ── */ --magenta-600: #C60077; --magenta-500: #EC008C; --magenta-400: #F23DA8; --magenta-100: #FDE4F2; /* ── Amber (Rewards) ── */ --amber-600: #E08A00; --amber-500: #F5A623; --amber-400: #F7B84E; --amber-100: #FEF1DC; /* ── Indigo (HealthID) ── */ --indigo-600: #3F42B0; --indigo-500: #5457C7; --indigo-400: #7B7EDA; --indigo-100: #E9EAF9; /* ── Per-division accent keys ── */ --motion: var(--orange-500); --vital: var(--teal-500); --social: var(--magenta-500); --alyss: var(--blue-500); --rewards: var(--amber-500); --healthid: var(--indigo-500); /* ── Tagline accent font (used ONLY for Connect·Move·Thrive) ── */ --font-script: 'Dancing Script', 'Segoe Script', cursive; /* Active division accent — overridden per page via .theme-* on */ --accent: var(--orange-500); --accent-strong: var(--orange-600); --accent-tint: var(--orange-100); --accent-rgb: 232, 97, 43; } /* ── Division theming: set --accent on the whole page ── Each theme also re-aliases the legacy orange + division vars so every existing component (buttons, CTA banners, links, chips, hero gradients) recolours to the division automatically — one accent, locked per page. */ .theme-motion { --accent: var(--motion); --accent-strong: var(--orange-600); --accent-tint: var(--orange-100); --accent-rgb: 232, 97, 43; } .theme-vital { --accent: var(--vital); --accent-strong: #0B7A70; --accent-tint: var(--teal-100); --accent-rgb: 13, 148, 136; } .theme-social { --accent: var(--social); --accent-strong: var(--magenta-600); --accent-tint: var(--magenta-100); --accent-rgb: 236, 0, 140; } .theme-alyss { --accent: var(--alyss); --accent-strong: #235C9E; --accent-tint: var(--blue-100); --accent-rgb: 45, 114, 194; } .theme-rewards { --accent: var(--rewards); --accent-strong: var(--amber-600); --accent-tint: var(--amber-100); --accent-rgb: 245, 166, 35; } .theme-healthid { --accent: var(--healthid); --accent-strong: var(--indigo-600); --accent-tint: var(--indigo-100); --accent-rgb: 84, 87, 199; } .theme-motion, .theme-vital, .theme-social, .theme-alyss, .theme-rewards, .theme-healthid { --aktiv-orange: var(--accent); --aktiv-orange-hover: var(--accent-strong); --aktiv-orange-light: var(--accent); --aktiv-orange-glow: rgba(var(--accent-rgb), 0.2); --shadow-orange: 0 4px 24px rgba(var(--accent-rgb), 0.24); --shadow-orange-strong: 0 8px 40px rgba(var(--accent-rgb), 0.34); --division-accent: var(--accent); --division-accent-soft: var(--accent-tint); } /* ── Chip / pill colour variants (add magenta, amber, indigo) ── */ .chip-magenta { background: var(--magenta-100); color: var(--magenta-600); } .chip-amber { background: var(--amber-100); color: var(--amber-600); } .chip-indigo { background: var(--indigo-100); color: var(--indigo-600); } .badge--magenta { background: var(--magenta-100); color: var(--magenta-600); border: 1px solid rgba(236, 0, 140, 0.2); } .badge--amber { background: var(--amber-100); color: var(--amber-600); border: 1px solid rgba(245, 166, 35, 0.25); } .badge--indigo { background: var(--indigo-100); color: var(--indigo-600); border: 1px solid rgba(84, 87, 199, 0.2); } /* Stripe + accent helpers keyed to the active division --accent */ .pillar-card-v2.stripe-magenta { border-top-color: var(--magenta-500); } .pillar-card-v2.stripe-amber { border-top-color: var(--amber-500); } .pillar-card-v2.stripe-indigo { border-top-color: var(--indigo-500); } .pillar-card-v2.stripe-accent { border-top-color: var(--accent); } /* ── Connect · Move · Thrive tagline (script accent, tri-colour) ── */ .cmt-tagline { font-family: var(--font-script); font-weight: 700; line-height: 1.1; display: inline-flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; } .cmt-tagline .c { color: var(--magenta-500); } .cmt-tagline .m { color: var(--orange-500); } .cmt-tagline .t { color: var(--teal-500); } /* Small uppercase geometric variant matching the logo lockup */ .cmt-strip { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.8125rem; display: inline-flex; align-items: center; gap: 0.5em; } .cmt-strip .c { color: var(--magenta-500); } .cmt-strip .m { color: var(--orange-500); } .cmt-strip .t { color: var(--teal-500); } .cmt-strip::before, .cmt-strip::after { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--teal-500); opacity: 0.7; } /* Dancing Script signature accent for hero emphasis words. Reserved for a short payoff word/phrase in a headline (brand voice). Script runs a touch smaller than the sans caps, so bump size + line-height. */ .hero-script { font-family: var(--font-script); font-weight: 700; font-size: 1.14em; line-height: 1.15; letter-spacing: 0.005em; padding-right: 0.06em; } /* On the division heroes the accent becomes the script signature */ .page-hero h1 em.hero-script, .alyss-hero h1 em.hero-script { font-style: normal; } /* ════════════════════════════════════════════════════════════ LOGO MARK — tri-colour infinity (pink M · orange 60 · teal) ════════════════════════════════════════════════════════════ */ .logo-lockup { display: inline-flex; align-items: center; gap: 0.55rem; } .logo-mark { flex-shrink: 0; display: block; } .nav .logo-mark { width: 40px; height: 26px; } .logo-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; color: var(--charcoal); white-space: nowrap; } .logo-wordmark .k { color: var(--aktiv-orange); } .logo-wordmark .tm { font-size: 0.55em; vertical-align: super; font-weight: 600; color: var(--gray-400); } /* On dark surfaces (footer, dark heroes) */ .on-dark .logo-wordmark, .footer .logo-wordmark { color: var(--white); } /* ════════════════════════════════════════════════════════════ NAVIGATION — fit 8 links on one line, hamburger below 1160px ════════════════════════════════════════════════════════════ */ .nav-links { gap: 1.35rem; } .nav .nav-link { font-size: 0.85rem; font-weight: 600; } .nav-cta { margin-left: 0.75rem; } .nav .nav-cta { padding: 0.55rem 1.15rem; } /* Active underline follows the page's division accent */ .nav .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); } .nav .nav-link:hover { color: var(--accent); } @media (max-width: 1159px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-cta.desktop-only { display: none; } } @media (min-width: 1160px) and (max-width: 1319px) { .nav-links { gap: 1.05rem; } .nav .nav-link { font-size: 0.82rem; } } @media (max-width: 767px) { .nav .logo-wordmark { font-size: 1.15rem; } .nav .logo-mark { width: 34px; height: 22px; } } /* When the mobile menu is open, blend the header into the dark overlay: white logo + white hamburger so nothing goes invisible on dark. */ body:has(.nav-mobile.open) .nav { background: transparent !important; box-shadow: none !important; } body:has(.nav-mobile.open) .nav .logo-wordmark { color: var(--white); } body:has(.nav-mobile.open) .nav .nav-hamburger span { background: var(--white); } /* Mobile menu: two-column division grid so 8+ links fit without scroll */ .nav-mobile { gap: var(--space-lg); padding: calc(var(--nav-height) + var(--space-lg)) var(--space-lg) var(--space-lg); justify-content: flex-start; overflow-y: auto; } .nav-mobile .nav-link { font-size: 1.25rem; } .nav-mobile .nav-mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-xl); width: 100%; max-width: 360px; } .nav-mobile .nav-mobile-actions { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; max-width: 360px; margin-top: var(--space-md); } .nav-mobile .nav-mobile-actions .btn { width: 100%; margin-top: 0; } /* ════════════════════════════════════════════════════════════ DIVISION HERO — reusable dark hero themed by --accent ════════════════════════════════════════════════════════════ */ .division-hero { position: relative; padding-top: calc(var(--nav-height) + var(--space-4xl)); padding-bottom: var(--space-4xl); color: var(--white); overflow: hidden; background: radial-gradient(1100px 560px at 88% -12%, rgba(var(--accent-rgb), 0.30), transparent 55%), radial-gradient(760px 480px at -6% 108%, rgba(var(--accent-rgb), 0.16), transparent 60%), linear-gradient(150deg, #12121F 0%, var(--charcoal-900) 48%, var(--charcoal-800) 100%); } .division-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 26px 26px; opacity: 0.5; pointer-events: none; } .division-hero .container { position: relative; z-index: 1; } .division-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; } @media (min-width: 940px) { .division-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-4xl); } } .division-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.34); padding: 6px 14px; border-radius: var(--radius-full); margin-bottom: var(--space-lg); } .division-eyebrow img, .division-eyebrow svg { width: 18px; height: 18px; } .division-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--white); margin-bottom: var(--space-lg); } .division-hero h1 .accent { color: var(--accent); } .division-hero-lead { font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,0.8); max-width: 56ch; margin-bottom: var(--space-xl); } .division-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); } /* Accent-driven primary button (overrides orange when themed) */ .btn-accent { background: var(--accent); color: var(--white); border-color: var(--accent); box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.28); } .btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 10px 34px rgba(var(--accent-rgb), 0.4); } .text-accent { color: var(--accent); } /* Secondary buttons on LIGHT surfaces: accent outline (fixes white-on-white contrast where the dark-context .btn-secondary was reused on light heroes) */ .page-hero .btn-secondary, .alyss-hero .btn-secondary, .section-light .btn-secondary, .section-off-white .btn-secondary { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); background: transparent; } .page-hero .btn-secondary:hover, .alyss-hero .btn-secondary:hover, .section-light .btn-secondary:hover, .section-off-white .btn-secondary:hover { color: var(--white); background: var(--accent); border-color: var(--accent); } /* Accent link (replaces hard-coded orange pillar links when themed) */ .link-accent { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; transition: gap var(--transition-base); } .link-accent:hover { gap: 12px; } /* Feature row with accent icon tile (used across division pages) */ .feature-list { display: grid; gap: var(--space-lg); } .feature-item { display: flex; gap: var(--space-md); align-items: flex-start; } .feature-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); } .feature-item h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; margin-bottom: 3px; } .on-dark .feature-item h4 { color: var(--white); } .feature-item p { font-size: 0.9375rem; line-height: 1.6; color: var(--gray-600); margin: 0; } .on-dark .feature-item p { color: rgba(255,255,255,0.72); } /* Stat tiles column (reused from Alyss target design) */ .stat-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .stat-tile { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; } .stat-tile .stat-ico { color: var(--accent); margin-bottom: var(--space-sm); display: inline-flex; } .stat-tile .stat-num { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: var(--white); line-height: 1; } .stat-tile .stat-lbl { font-family: var(--font-ui); font-size: 0.75rem; color: var(--gray-400); margin-top: 4px; letter-spacing: 0.04em; } /* Division icon tile used on ecosystem grids */ .eco-dot.dot-magenta { background: var(--magenta-100); color: var(--magenta-600); } .eco-dot.dot-amber { background: var(--amber-100); color: var(--amber-600); } .eco-dot.dot-indigo { background: var(--indigo-100); color: var(--indigo-600); } /* 6-up ecosystem grid */ @media (min-width: 700px) { .ecosystem-map.eco-6 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .ecosystem-map.eco-6 { grid-template-columns: repeat(3, 1fr); } } .pillars-row.pillars-6 { } @media (min-width: 700px) { .pillars-row.pillars-6 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .pillars-row.pillars-6 { grid-template-columns: repeat(3, 1fr); } } /* Pillar card leading icon */ .pillar-icon { display: inline-flex; margin-bottom: var(--space-md); } .pillar-card-v2 .pillar-chip { margin-bottom: var(--space-sm); } /* "Coming soon" affordance on ecosystem tiles */ .eco-soon { position: relative; } .eco-soon .soon-badge { font-family: var(--font-ui); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); border: 1px solid rgba(255,255,255,0.16); padding: 2px 8px; border-radius: var(--radius-full); margin-left: 8px; }