/* ============================================================ P3 MULTISOLUTIONS — GLOBAL STYLESHEET style.css FONT IMPORTS (add to before this file) USAGE (if using Tailwind) ============================================================ */ /* ── 1. CSS CUSTOM PROPERTIES (Design Tokens) ────────────── */ :root { /* Brand colours */ --red: #D42B3A; --red-soft: rgba(212, 43, 58, 0.08); --red-mid: rgba(212, 43, 58, 0.18); --ink: #0B0C10; --ink-60: rgba(11, 12, 16, 0.60); --ink-40: rgba(11, 12, 16, 0.40); --ink-20: rgba(11, 12, 16, 0.20); --ink-08: rgba(11, 12, 16, 0.08); --bg: #F5F4F1; /* warm off-white — primary light bg */ --bg-white: #FFFFFF; --muted: #8A8FA8; /* Dark backgrounds */ --dark: #0D0F16; --dark-nav: #0F1729; /* services section navy */ --dark-aiv: #0B0C10; /* near-black sections */ --dark-foot: #080A0F; /* footer */ /* Data / chart colours (never use --red for all charts) */ --blue: #2563EB; --green: #059669; --green-ai: #10A37F; /* ChatGPT brand green */ --amber: #D97706; --teal: #0891B2; --purple: #7C6FE0; /* Typography */ --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; /* Spacing scale */ --space-section-y: clamp(80px, 8vw, 128px); --space-section-x: clamp(24px, 5vw, 80px); /* Radii */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; /* Shadows */ --shadow-card: 0 2px 12px rgba(11, 12, 16, 0.06); --shadow-float: 0 8px 40px rgba(11, 12, 16, 0.10), 0 0 0 1px rgba(11, 12, 16, 0.05); --shadow-dark: 0 8px 40px rgba(0, 0, 0, 0.30); /* Transitions */ --transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Nav height — update if nav height changes */ --nav-h: 68px; } /* ── 2. RESET & BASE ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg-white); color: var(--ink); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, canvas { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font: inherit; } ul, ol { list-style: none; } /* ── 3. TYPOGRAPHY ───────────────────────────────────────── */ /* Headings — always Fraunces */ h1, h2, h3, h4, h5, h6, .font-fraunces { font-family: var(--font-serif); line-height: 1.06; letter-spacing: -0.03em; } /* Headline size scale */ .text-hero { font-size: clamp(50px, 5.2vw, 74px); } .text-h1 { font-size: clamp(38px, 4vw, 58px); } .text-h2 { font-size: clamp(32px, 3.4vw, 48px); } .text-h3 { font-size: clamp(22px, 2.2vw, 30px); } /* Eyebrow labels */ .eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; display: block; width: 28px; height: 1.5px; background: var(--red); flex-shrink: 0; } /* Body text helpers */ .text-muted { color: var(--muted); } .text-ink-60 { color: var(--ink-60); } .lead { font-size: 16px; line-height: 1.75; color: var(--ink-60); } /* Keyframes */ @keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);} } @keyframes typewrite { from{width:0;}to{width:100%;} } @keyframes countUp { from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;} } @keyframes barGrow { from{width:0;}to{width:var(--target-w);} } @keyframes floatUp { 0%{transform:translateY(0);}50%{transform:translateY(-6px);}100%{transform:translateY(0);} } .pulse-dot { animation:pulseDot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.7); } } @keyframes blink-cursor { 0%,100% { opacity:1; } 50% { opacity:0; } } @keyframes flow-line { 0% { stroke-dashoffset: 300; } 100% { stroke-dashoffset: 0; } } @keyframes node-ping { 0% { transform:scale(1);opacity:.9; } 70% { transform:scale(1.8);opacity:0; } 100% { transform:scale(1);opacity:0; } } @keyframes spin-slow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } /* ── 4. LAYOUT ───────────────────────────────────────────── */ .container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: var(--space-section-x); padding-right: var(--space-section-x); } .section-pad { padding-top: var(--space-section-y); padding-bottom: var(--space-section-y); padding-left: var(--space-section-x); padding-right: var(--space-section-x); } /* Dot-grid backgrounds */ .dot-grid-light { background-color: var(--bg); background-image: radial-gradient(rgba(11,12,16,0.06) 1px, transparent 1px); background-size: 28px 28px; } .dot-grid-dark { background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 28px 28px; } .line-grid-dark { background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 52px 52px; } /* ── 5. COMPONENTS ───────────────────────────────────────── */ /* ---- Dashboard float ---- */ @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .float{animation:float 6s ease-in-out infinite;} /* --- Pill badge --- */ .pill { display: inline-flex; align-items: center; gap: 8px; background: var(--red-soft); border: 1px solid rgba(212, 43, 58, 0.20); border-radius: 100px; padding: 6px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--red); } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse-slow 2s ease-in-out infinite; } .pill .badge { background: var(--red); color: white; font-size: 9px; font-weight: 900; padding: 1px 6px; border-radius: 100px; letter-spacing: 0.06em; } /* --- Cards --- */ .card { background: var(--bg-white); border: 1px solid var(--ink-08); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: var(--ink-20); } .card-dark { background: var(--dark); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-dark); } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; padding: 12px 24px; border-radius: var(--radius-sm); border: none; cursor: pointer; text-decoration: none; transition: var(--transition); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-dark { background: var(--ink); color: white; } .btn-dark:hover { background: var(--red); } .btn-red { background: var(--red); color: white; } .btn-red:hover { background: #b82030; } .btn-ghost { background: transparent; color: var(--ink-60); border: 1px solid var(--ink-20); } .btn-ghost:hover { border-color: var(--ink-40); color: var(--ink); } .btn-ghost-white { background: transparent; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.12); } .btn-ghost-white:hover { border-color: rgba(255,255,255,0.3); color: white; } /* --- Tag pills (service cards) --- */ .tag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 3px 10px; border-radius: 100px; letter-spacing: 0.03em; } .tag-red { background: rgba(212,43,58,0.12); color: var(--red); } .tag-blue { background: rgba(37,99,235,0.12); color: var(--blue); } .tag-green { background: rgba(5,150,105,0.12); color: var(--green); } .tag-purple { background: rgba(124,111,224,0.12);color: var(--purple); } .tag-amber { background: rgba(217,119,6,0.12); color: var(--amber); } .tag-white { background: rgba(255,255,255,0.10);color: rgba(255,255,255,0.65); } /* Nav glass effect */ #nav { background:rgba(255,255,255,0); border-bottom:1px solid transparent; transition:background .3s ease,border-color .3s ease; } #nav.glass { background:rgba(255,255,255,.96); border-bottom:1px solid rgba(11,12,16,.07); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } /* Hamburger → X animation */ #ham.open .ham-bar:nth-child(1) { transform:translateY(6.5px) rotate(45deg); } #ham.open .ham-bar:nth-child(2) { opacity:0; transform:scaleX(0); } #ham.open .ham-bar:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); } /* Dropdown panel pointer-events toggle */ #servicesPanel.open { opacity:1 !important; transform:translateY(0) translateX(-50%) !important; pointer-events:all !important; } /* Subtle dot pattern inside dropdown */ #servicesPanel::before { content:''; position:absolute;inset:0; background-image:radial-gradient(circle,rgba(11,12,16,.045) 1px,transparent 1px); background-size:22px 22px; pointer-events:none; z-index:0; border-radius:16px; } #servicesPanel > * { position:relative; z-index:1; } /* Nav link active state */ .nav-active { color:#0B0C10 !important; } /* #nav { background:rgba(255,255,255,0); border-bottom:1px solid transparent; transition:all .3s ease; } */ /* --- Nav glass (applied on scroll via JS) --- nav.glass { background: rgba(245, 244, 241, 0.88) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(11, 12, 16, 0.09); } */ /* --- Ticker / marquee --- */ @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ticker-wrap { overflow: hidden; white-space: nowrap; } .ticker-inner { display: inline-flex; animation: ticker 30s linear infinite; will-change: transform; } .ticker-inner:hover { animation-play-state: paused; } /* Stat count-up */ @keyframes countUp { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } } .stat-anim { animation: countUp .6s ease forwards; } /* Card hover lift */ .card-lift { transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1); } .card-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(11,12,16,.12); } /* Pillar card glow */ .pillar-li:hover .pillar-icon { filter: brightness(1.15); } /* Platform tab active */ .plat-btn.active { background: #0B0C10; color: #fff; } .plat-btn { transition: all .22s ease; } #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Gradient text */ .grad-li { background: linear-gradient(135deg, #2563EB 0%, #7C6FE0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .grad-yt { background: linear-gradient(135deg, #D42B3A 0%, #D97706 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .grad-ig { background: linear-gradient(135deg, #D97706 0%, #D42B3A 40%, #7C6FE0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Platform content panel */ .plat-panel { display: none; } .plat-panel.active { display: block; } /* Review card accent */ .review-accent { height: 2px; border-radius: 2px 2px 0 0; } /* Animated bar */ @keyframes barGrow { from { width: 0; } to { width: var(--bar-w); } } .bar-fill { animation: barGrow 1.2s ease forwards; animation-play-state: paused; } .bar-fill.run { animation-play-state: running; } /* ── 6. SCROLL REVEAL ────────────────────────────────────── */ /* Elements start invisible + shifted down; JS adds .vis to reveal */ .rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } .rv.vis { opacity: 1; transform: translateY(0); } /* Stagger delays — add .delay-1 through .delay-5 to children */ .rv.delay-1 { transition-delay: 0.10s; } .rv.delay-2 { transition-delay: 0.20s; } .rv.delay-3 { transition-delay: 0.30s; } .rv.delay-4 { transition-delay: 0.40s; } .rv.delay-5 { transition-delay: 0.55s; } .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s}.rv.d6{transition-delay:.6s;} .rv-d1.vis{transition-delay:.1s;} .rv-d2.vis{transition-delay:.2s;} .rv-d3.vis{transition-delay:.3s;} .rv-d4.vis{transition-delay:.4s;} /* Cards */ .card-hover { transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s; } .card-hover:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(11,12,16,.1); } /* Ticker */ #ticker-inner { display:flex; animation:ticker 32s linear infinite; } #ticker-inner:hover { animation-play-state:paused; } /* ── TECH LOGO GRID ── */ .tech-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); transition: all .25s ease; } .tech-logo:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); transform: translateY(-3px); } /* ── STACK CARD ── */ .stack-card { background: #fff; border: 1px solid rgba(11,12,16,.07); border-radius: 20px; padding: 28px; transition: all .28s ease; } .stack-card:hover { box-shadow: 0 20px 48px rgba(0,0,0,.09); transform: translateY(-4px); border-color: rgba(11,12,16,.14); } /* ── PROCESS STEP ── */ .proc-step { border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 24px; background: rgba(255,255,255,.03) !important; transition: all .25s ease; } .proc-step.active { background: rgba(255,255,255,.07); border-color: rgba(212,43,58,.3); } /* ── REVIEW CARD ── */ .review-card { background: #fff; border: 1px solid rgba(11,12,16,.07); border-radius: 20px; padding: 28px; position: relative; overflow: hidden; transition: all .28s ease; } .review-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.08); } /* ── COMPARISON TABLE ── */ .cmp-row { border-bottom: 1px solid #f3f4f6; transition: background .2s ease; } .cmp-row:hover { background: #fafafa; } .cmp-row:last-child { border-bottom: none; } /* ── 7. ANIMATIONS ───────────────────────────────────────── */ @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes pulse-slow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes waveBar { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1.0); } } /* Chat bubble animation */ @keyframes slideIn { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } } .chat-in { animation: slideIn .4s ease forwards; } /* Workflow node ping */ .node-ring { position:absolute;inset:-6px;border-radius:50%; border:1.5px solid rgba(212,43,58,.5); animation: node-ping 2s ease-out infinite; } /* Step connector */ .step-line { position:absolute;left:19px;top:44px;bottom:-16px;width:2px;background:linear-gradient(to bottom,rgba(11,12,16,.12),transparent); } /* Utility classes for animations */ .animate-float { animation: float 4s ease-in-out infinite; } .animate-pulse-slow{ animation: pulse-slow 2s ease-in-out infinite; } .animate-blink { animation: blink 0.9s step-end infinite; } .animate-fadeUp { animation: fadeUp 0.7s ease forwards; } /* Cursor blink for typewriter effect */ .oai-cur { display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: text-bottom; animation: blink 0.7s step-end infinite; } /* Wave bars (voice animation) */ .wbar { width: 3px; border-radius: 3px; background: #F59E0B; transition: height 0.1s ease; flex-shrink: 0; align-self: center; } /* ── 8. UTILITY HELPERS ──────────────────────────────────── */ .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .select-none { user-select: none; } .pointer-none { pointer-events: none; } /* Gradient text */ .text-gradient-red { background: linear-gradient(135deg, var(--red), #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── 9. RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 1024px) { :root { --space-section-x: clamp(24px, 4vw, 48px); } } @media (max-width: 768px) { /* Hero: single column */ .hero-grid { grid-template-columns: 1fr !important; } /* Services bento: single column */ .svc-bento { grid-template-columns: 1fr !important; } /* AIV: single column */ .aiv-body { grid-template-columns: 1fr !important; } /* Process: unstick panel on mobile */ #process [style*="position:sticky"] { position: relative !important; top: auto !important; } /* Tech grid: 3 columns on mobile */ .tech-grid { grid-template-columns: repeat(3, 1fr) !important; } .text-hero { font-size: clamp(38px, 9vw, 54px); } .text-h1 { font-size: clamp(30px, 7vw, 44px); } .text-h2 { font-size: clamp(26px, 6vw, 36px); } } @media (max-width: 480px) { :root { --space-section-x: 20px; --space-section-y: 64px; } .btn { padding: 10px 18px; font-size: 13px; } } /* ---- Hero stagger ---- */ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} .fu{opacity:0;animation:fadeUp .75s ease forwards;} .fu1{animation-delay:.1s}.fu2{animation-delay:.25s}.fu3{animation-delay:.4s}.fu4{animation-delay:.55s}.fu5{animation-delay:.7s} /* ── 10. SECTION-SPECIFIC OVERRIDES ─────────────────────── */ /* Process sticky panel fix */ #process .grid { align-items: start; } /* Results canvas wrapper */ #results-chart { display: block; width: 100%; } /* Testimonials track */ #t-track { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } #t-track::-webkit-scrollbar { display: none; } /* Mobile menu overlay */ #mob-menu a:hover { color: var(--red); } /* Content calendar cell */ .cal-cell { transition:all .2s ease; } .cal-cell:hover { transform:scale(1.04); z-index:2; } /* Progress bars */ .bar-fill { height:100%; border-radius:100px; animation:barGrow 1.2s ease forwards; animation-play-state:paused; } .bar-fill.animated { animation-play-state:running; } /* Typewriter */ .type-line { overflow:hidden; white-space:nowrap; border-right:2px solid #D97706; animation:typewrite 1.8s steps(40,end) forwards, blink .8s step-end 1.8s infinite; } /* Float animation for hero card */ .float-card { animation:floatUp 4s ease-in-out infinite; } /* ---- FAQ ---- */ .faq-body { max-height: 0; overflow: hidden; transition: max-height .38s ease; } .faq-icon { transition: transform .28s ease; } /* ---- Card hover ---- */ .ch{transition:transform .28s ease,box-shadow .28s ease;} .ch:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.09);} /* ---- Dot grid bg (light) ---- */ .dot-light{background-image:radial-gradient(circle,#d1d5db 1px,transparent 1px);background-size:24px 24px;} /* ---- Line grid (dark) ---- */ .line-dark{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;} /* ---- Diagonal stripe (dark accent) ---- */ .stripe-dark{background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 0,transparent 50%);background-size:12px 12px;} .dot-light-warm { background-color: #F5F4F1; background-image: radial-gradient(circle, rgba(11,12,16,0.09) 1px, transparent 1px); background-size: 24px 24px; } .dot-warm { background-color: #F5F4F1; background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px); background-size: 24px 24px; } .gray-50-bg { background-color: #F9FAFB; background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px); background-size: 24px 24px; background-position: 0 0; } /* ---- Era timeline ---- */ .era-bar-fill{height:100%;border-radius:4px;transition:width 1.2s ease;} /* ---- Methodology pillar card ---- */ .pillar-card{transition:box-shadow .25s ease,transform .25s ease;} .pillar-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.08);} .pillar-dark{background:#0B0C10;color:#fff;} /* ---- Mobile menu ---- */ #mobile-menu{display:none;} /* ---- Avatar placeholder ---- */ .avatar-ph{background:linear-gradient(135deg,#e5e7eb,#d1d5db);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Fraunces',Georgia,serif;color:#6b7280;} .logo-ph{background:#f3f4f6;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-size:8px;color:#9ca3af;} /* ---- Scrollbar hide ---- */ .no-scrollbar::-webkit-scrollbar{display:none;} .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;} /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(11,12,16,.2); border-radius: 3px; } /* ---- Canvas ---- */ #hero-canvas{position:absolute;inset:0;pointer-events:none;opacity:.5;} @keyframes heroFadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}} .manifesto-card{ background:linear-gradient(135deg,#0B0C10 0%,#0F1729 55%,#111827 100%); border:1px solid rgba(255,255,255,.06); border-radius:24px; overflow:hidden; position:relative; } .manifesto-card::before{ content:'';position:absolute;inset:0; background:repeating-linear-gradient(-45deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 0,transparent 50%); background-size:12px 12px; pointer-events:none; } /* ── VALUES: staggered timeline ── */ .value-line{ position:absolute;left:19px;top:0;bottom:0;width:1px; background:linear-gradient(to bottom,transparent,rgba(212,43,58,.3) 20%,rgba(212,43,58,.3) 80%,transparent); } /* pulse ring on team cards */ @keyframes ringPulse{ 0%{box-shadow:0 0 0 0 rgba(212,43,58,.35);} 70%{box-shadow:0 0 0 12px rgba(212,43,58,.0);} 100%{box-shadow:0 0 0 0 rgba(212,43,58,0);} } /* ── PRINCIPLES CARD hover glow ── */ .principle-card{ background:#fff;border:1px solid #f0f0f0;border-radius:16px;padding:28px 24px; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; cursor:default; } .principle-card:hover{ transform:translateY(-6px); box-shadow:0 24px 56px rgba(0,0,0,.1); border-color:rgba(212,43,58,.18); } /* ── JOURNEY timeline ── */ .journey-dot{ width:10px;height:10px;border-radius:9999px; background:#D42B3A; box-shadow:0 0 0 3px rgba(212,43,58,.2); flex-shrink:0;margin-top:5px; } .journey-line{ position:absolute;left:4px;top:14px;bottom:0;width:2px; background:linear-gradient(to bottom,rgba(212,43,58,.4),rgba(212,43,58,.1)); } /* floating badge */ @keyframes floatBadge{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} .float-badge{animation:floatBadge 5s ease-in-out infinite;} .float-badge-2{animation:floatBadge 6.5s ease-in-out infinite .8s;} #leadTeam .lead-member { min-width: 0; } #leadTeam .lead-member.active { flex: 3.5 !important; } #leadTeam .lead-member:not(.active) { flex: 1 !important; } /* On active: reveal bio + linkedin */ #leadTeam .lead-member.active .member-bio, #leadTeam .lead-member.active .member-li { opacity: 1 !important; transform: translateY(0) !important; } /* On inactive collapsed cards: hide bio/linkedin even if previously shown */ #leadTeam .lead-member:not(.active) .member-bio, #leadTeam .lead-member:not(.active) .member-li { opacity: 0 !important; transform: translateY(8px) !important; } /* Mobile: stack lead cards vertically */ @media (max-width: 639px) { #leadTeam { flex-direction: column; min-height: auto !important; } #leadTeam .lead-member, #leadTeam .lead-member.active, #leadTeam .lead-member:not(.active) { flex: none !important; width: 100%; } #leadTeam .lead-member .relative { height: 280px !important; } #leadTeam .lead-member.active .relative { height: 360px !important; } #leadTeam .lead-member .member-bio, #leadTeam .lead-member .member-li { opacity: 1 !important; transform: translateY(0) !important; } } /* Extended team: grayscale swap */ .ext-member:hover .ext-avatar-gray { opacity: 0; } .ext-member:hover .ext-avatar-color { opacity: 1; } /* When photos are used, apply CSS filter approach instead */ .ext-member img.ext-photo { filter: grayscale(1) contrast(1.05); transition: filter .4s ease; } .ext-member:hover img.ext-photo { filter: grayscale(0) contrast(1); }