/* ============================================================ WARDENLESS — Palette de couleurs ------------------------------------------------------- --primary (actuel) : Corail vif #FF7F50 rgba(245,158,11,.12) --secondary (actuel) : Navy #000080 ------------------------------------------------------- Options disponibles pour --primary / --secondary : 01 Citron élec. #C8F000 rgba(200,240,0,.12) 01b Citron foncé #8BBF00 rgba(139,191,0,.12) 01c Citron B #B5D900 rgba(181,217,0,.12) 02 Or raffiné #D4A94A rgba(212,169,74,.12) 02b Or A #F0A500 rgba(240,165,0,.12) 02c Or B #E8A020 rgba(232,160,32,.12) 02d Or C #EDAA35 rgba(237,170,53,.12) 03 Corail vif #FF7F50 rgba(245,158,11,.12) ← actuel 04 Vert lime #7FD44C rgba(127,212,76,.12) 05 Violet doux #B07FE8 rgba(176,127,232,.12) ------------------------------------------------------- Fonts: Outfit (display) · Nunito (body) · Playfair Display (claim) ============================================================ */ :root { --navy: #000080; --navy-80: rgba(0,0,128,.80); --navy-55: rgba(0,0,128,.55); --navy-35: rgba(0,0,128,.35); --navy-15: rgba(0,0,128,.15); --navy-08: rgba(0,0,128,.08); --navy-04: rgba(0,0,128,.04); --primary: #FF7F50; --primary-dk: #E8623A; --primary-lt: #FCD34D; --primary-dim: rgba(245,158,11,.12); --secondary: #FF7F50; --secondary-lt: #FCD34D; --secondary-dim: rgba(245,158,11,.12); --sky: #3B7DD8; --sky-dim: rgba(59,125,216,.12); --white: #FFFFFF; --off: #F6F7FA; --off2: #ECEEF5; --border: rgba(15,27,53,.09); --border2: rgba(15,27,53,.18); --r: 12px; --r-lg: 20px; --r-xl: 32px; --font-display: 'Outfit', sans-serif; --font-body: 'Nunito', sans-serif; --nav-h: 72px; --event-banner-h: 100px; --ease: cubic-bezier(.23,1,.32,1); } html.no-event-banner { --event-banner-h: 0px !important; } html.no-event-banner .event-banner { display:none; } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { background:var(--white); color:var(--navy); font-family:var(--font-body); font-size:16px; line-height:1.7; overflow-x:hidden; } a { color:inherit; text-decoration:none; } ul { list-style:none; } img { display:block; width:100%; height:100%; object-fit:cover; } button { cursor:pointer; background:none; border:none; font-family:inherit; } ::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-track { background:var(--off); } ::-webkit-scrollbar-thumb { background:var(--primary); border-radius:4px; } /* ============================================================ NAVBAR */ #navbar { position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:900; transition:background .35s, border-bottom .35s, backdrop-filter .35s; } #navbar.scrolled { background:rgba(255,255,255,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); box-shadow:0 1px 20px var(--navy-08); } #navbar.scrolled .nav-link { color:var(--navy-55); } #navbar.scrolled .nav-link.active { color:var(--primary); } .nav-inner { max-width:1280px; margin:0 auto; padding:0 2rem; height:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; } .logo { height:auto; width: auto; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--navy); } /* .logo.light { color:var(--white); } .logo.light .logo-icon { background:var(--secondary); color:var(--white); } */ /* .logo-icon { width:34px; height:34px; background:var(--navy); color:var(--white); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; flex-shrink:0; }*/ .logo-text { color:var(--white);font-weight:800; } .scrolled .logo-text { color:var(--navy);font-weight:800; } .logo-text strong { color:var(--primary);font-weight:800; font-size:1.3rem; } .logo-text em { font-style:normal; font-weight:800; vertical-align:baseline; font-size:1.1rem; } .logo-icon-wrap { position:relative; display:inline-flex; height:26px; flex-shrink:0; } .logo-icon { height:26px; width:auto; transition:opacity .5s ease; } .logo-icon.logo-on-light { position:absolute; top:0; left:0; opacity:0; } #navbar.scrolled .logo-icon.logo-on-dark { opacity:0; } #navbar.scrolled .logo-icon.logo-on-light { opacity:1; } /* .logo-text { height:20px; width: auto; display:flex; align-items:center; justify-content:center; flex-shrink:0; } */ .nav-links { display:flex; align-items:center; gap:.15rem; list-style:none; } .nav-link { padding:.45rem .8rem; font-size:16px; font-weight:500; color:var(--white); border-radius:100px; transition:background .2s,color .2s; cursor:pointer; } .nav-link:hover { background:var(--navy-08); color:var(--white); } .nav-link.active { color:var(--primary); font-weight:600; } /* dropdown */ .nav-dropdown-wrap { position:relative; } .nav-dropdown-trigger { display:flex; align-items:center; gap:.3rem; cursor:pointer; user-select:none; } .nav-chevron { width:11px; height:11px; transition:transform .25s var(--ease); flex-shrink:0; } .nav-dropdown-wrap:hover .nav-chevron, .nav-dropdown-wrap.open .nav-chevron { transform:rotate(180deg); } .nav-dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px); width:300px; background:var(--white); border-radius:var(--r-lg); box-shadow:0 16px 48px rgba(15,27,53,.16),0 0 0 1px rgba(15,27,53,.06); padding:.5rem .5rem .5rem; padding-top:calc(.5rem + 8px); opacity:0; pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease); z-index:1000; } .nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown-wrap.open .nav-dropdown { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); } /* pont invisible entre le trigger et le dropdown pour maintenir le hover */ .nav-dropdown::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; background:transparent; } /* petite flèche décorative */ .nav-dropdown::after { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top:none; border-bottom-color:var(--white); filter:drop-shadow(0 -2px 2px rgba(15,27,53,.06)); } .nav-dd-section { padding:.5rem .85rem .25rem; font-family:var(--font-display); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); } .nav-dd-section:not(:first-child) { margin-top:.35rem; border-top:1px solid var(--border); padding-top:.75rem; } .nav-dd-item { display:flex; align-items:flex-start; gap:.75rem; padding:.7rem .85rem; border-radius:var(--r); cursor:pointer; transition:background .18s; text-decoration:none; } .nav-dd-item:hover { background:var(--off); } .nav-dd-icon { font-size:1.2rem; line-height:1; flex-shrink:0; margin-top:2px; } .nav-dd-item strong { display:block; font-family:var(--font-display); font-size:.875rem; font-weight:700; color:var(--navy); margin-bottom:.15rem; } .nav-dd-item em { display:block; font-style:normal; font-size:.775rem; color:var(--navy-55); line-height:1.4; } .nav-dd-item:hover strong { color:var(--primary); } /* scrolled state */ #navbar.scrolled .nav-chevron { stroke:var(--navy-55); } .nav-right { display:flex; align-items:center; gap:.75rem; } .lang-switcher { display:flex; align-items:center; gap:.4rem; font-size:13px; color:var(--navy-35); } .lang-btn { font-size:13px; font-weight:600; color:var(--white); padding:3px 7px; border-radius:6px; transition:all .2s; } #navbar.scrolled .lang-btn { font-size:13px; font-weight:600; color:var(--navy); padding:3px 7px; border-radius:6px; transition:all .2s; } .lang-btn.active { color:var(--white); background:var(--primary); } .lang-btn:hover { color:var(--white); } .lang-switcher span { color:var(--border2); font-size:11px; } .btn-pay { font-size:12px; font-weight:600; color:var(--navy-55); padding:.4rem .9rem; border:1.5px solid var(--border2); border-radius:100px; transition:all .2s; white-space:nowrap; } .btn-pay:hover { color:var(--navy); border-color:var(--navy); } .btn-cta { display:inline-flex; align-items:center; justify-content:center; padding:.55rem 1.3rem; background:var(--primary); color:var(--navy); font-size:13px; font-weight:700; border-radius:100px; transition:background .2s,transform .2s; white-space:nowrap; } .btn-cta:hover { background:#4F46E5; transform:translateY(-1px); } .burger { display:none; flex-direction:column; gap:5px; width:28px; height:28px; justify-content:center; cursor:pointer; } .burger span { display:block; height:2px; background:var(--white); border-radius:2px; transition:all .3s var(--ease); transform-origin:center; } .burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); } .burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* MOBILE MENU */ .mobile-menu { position:fixed; inset:0; top:calc(var(--nav-h) + var(--event-banner-h)); background:var(--white); z-index:800; display:flex; flex-direction:column; justify-content:center; padding:2rem; transform:translateX(100%); transition:transform .4s var(--ease); } .mobile-menu.open { transform:translateX(0); } .mobile-menu ul { list-style:none; display:flex; flex-direction:column; gap:.25rem; margin-bottom:2rem; } .mob-link { display:block; padding:1rem 1.25rem; font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--navy); border-radius:var(--r); transition:background .2s,color .2s; cursor:pointer; } .mob-link:hover { background:var(--primary-dim); color:var(--primary); } .mob-link.mob-sub { font-size:1.3rem; font-weight:600; padding:.65rem 1.25rem .65rem 2rem; } .mob-section { padding:.75rem 1.25rem .25rem; font-family:var(--font-display); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); } .mob-subsection { padding:.5rem 1.25rem .1rem 2rem; font-family:var(--font-display); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); opacity:.4; } .mob-actions { display:flex; flex-direction:column; gap:.75rem; padding:0 1.25rem; } /* ============================================================ EVENT BANNER */ .event-banner { position:fixed; top:var(--nav-h); left:0; right:0; z-index:899; height:var(--event-banner-h); background:var(--white); border-bottom:1.5px solid var(--border2); box-shadow:0 2px 16px rgba(0,0,128,.07); display:flex; align-items:center; overflow:hidden; } .event-banner-inner { max-width:1280px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:0 calc(2rem + 32px) 0 2rem; } .event-info { display:flex; flex-direction:column; gap:.25rem; } .event-info-top { display:flex; align-items:center; gap:.65rem; } .event-tag-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .6rem; background:rgba(255,127,80,.12); border:1px solid rgba(255,127,80,.35); border-radius:100px; font-family:var(--font-display); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); } .event-pulse { width:5px; height:5px; background:var(--primary); border-radius:50%; animation:pulse 2s infinite; flex-shrink:0; } .event-location { font-family:var(--font-display); font-size:.72rem; font-weight:500; color:var(--navy-55); letter-spacing:.03em; } .event-headline { font-family:var(--font-body); font-size:.92rem; font-weight:400; color:var(--navy-55); line-height:1.4; } .event-headline strong { color:var(--navy); font-weight:700; } .event-headline .event-stand { color:var(--primary); font-weight:800; } .event-badge-wrap { flex-shrink:0; } .event-badge-link { display:block; border-radius:var(--r); transition:transform .22s var(--ease), box-shadow .22s; } .event-badge-link:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.18); } .event-badge-img { height:76px; width:auto; display:block; object-fit:contain; } .event-close-btn { position:absolute; right:1.5rem; top:50%; transform:translateY(-50%); width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--navy-35); border-radius:50%; z-index:2; transition:color .18s, background .18s; } .event-close-btn:hover { color:var(--navy); background:var(--navy-08); } @media(max-width:900px) { :root { --event-banner-h: 120px; } .event-banner { height:var(--event-banner-h); } .event-banner-inner { gap:1rem; } .event-badge-img { height:64px; } } @media(max-width:640px) { :root { --event-banner-h: 164px; } .event-banner { height:var(--event-banner-h); padding:0 1.25rem; } .event-banner-inner { flex-direction:column; align-items:flex-start; justify-content:center; gap:.6rem; padding:0 2.5rem 0 0; } .event-badge-img { height:52px; } .event-headline { font-size:.85rem; } } /* PAGES */ .page { display:none; } .page.active { display:block; } /* ============================================================ BUTTONS */ .btn-primary { display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.8rem; background:var(--primary); color:var(--navy); font-weight:700; font-size:18px; border-radius:var(--r); transition:background .2s,transform .2s; border:none; font-family:var(--font-body); cursor:pointer; } .btn-primary:hover { background:var(--primary-dk); color:var(--white); transform:translateY(-2px); } .btn-primary.sm { padding:.55rem 1.3rem; font-size:13px; } .btn-primary.full { width:100%; border-radius:var(--r); font-size:15px; padding:1rem; } .btn-primary:active { transform:scale(.98); } .btn-primary.btn-shake { background:#e53e3e !important; color:#fff !important; animation:btn-shake .35s ease; } @keyframes btn-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} } .btn-ghost { display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.8rem; border:2px solid var(--primary); color:var(--white); font-weight:600; font-size:17px; border-radius:100px; transition:all .2s; background:transparent; cursor:pointer; } .btn-ghost:hover { border-color:var(--primary); background:rgba(99,102,241,.12); } .btn-indigo { display:inline-flex; align-items:center; justify-content:center; padding:.85rem 2rem; background:var(--primary); color:var(--navy); font-weight:700; font-size:14px; border-radius:100px; transition:background .2s,transform .2s; } .btn-indigo:hover { background:#4F46E5; transform:translateY(-2px); } .btn-indigo.sm { padding:.55rem 1.3rem; font-size:13px; } .btn-outline-white { display:inline-flex; align-items:center; justify-content:center; padding:.85rem 2rem; border:2px solid rgba(255,255,255,.4); color:var(--white); font-weight:600; font-size:14px; border-radius:100px; transition:all .2s; } .btn-outline-white:hover { border-color:var(--white); background:rgba(255,255,255,.1); } /* ============================================================ HERO */ .hero { position:relative; min-height:65svh; padding-top:calc(var(--nav-h) + var(--event-banner-h)); background:var(--navy); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3rem; max-width:100%; overflow:hidden; } .hero-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; } .hero-shape { position:absolute; border-radius:50%; } .s1 { width:700px; height:700px; background:radial-gradient(circle,rgba(59,125,216,.20),transparent); top:-20%; right:-10%; } .s2 { width:400px; height:400px; background:radial-gradient(circle,rgba(232,86,58,.15),transparent); bottom:-10%; left:5%; } .hero-content { position:relative; z-index:2; padding:5rem 0 5rem clamp(2rem,5vw,5rem); } .hero-badge { display:inline-flex; align-items:center; gap:8px; padding:.45rem 1rem; border:1.5px solid rgba(99,102,241,.3); border-radius:100px; font-size:11px; font-weight:600; color:var(--primary); letter-spacing:.04em; margin-bottom:2rem; background:rgba(99,102,241,.08); text-transform:uppercase; } .badge-dot { width:6px; height:6px; background:var(--primary); border-radius:50%; animation:pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } .hero-title { font-family:var(--font-display); font-size:clamp(3rem,6.5vw,5.8rem); font-weight:900; line-height:1.0; letter-spacing:-.03em; color:var(--white); margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.05em; } .hero-title .accent { color:var(--primary); } .hero-sub { font-size:1.35rem; color:rgba(255,255,255,.65); max-width:520px; margin-bottom:2.5rem; line-height:1.75; } .hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; } .hero-visual { position:relative; z-index:2; padding:3rem clamp(2rem,4vw,4rem) 3rem 0; } .hero-img-wrap { position:relative; } .hero-img-wrap img { height:560px; border-radius:var(--r-xl); box-shadow:0 32px 80px rgba(0,0,0,.4); } /* .hero-card { position:absolute; bottom:-1rem; left:-2rem; background:rgba(255,255,255,.97); backdrop-filter:blur(20px); border-radius:var(--r-lg); padding:1.1rem 1.5rem; box-shadow:0 8px 40px rgba(0,0,0,.18); animation:floatCard 6s ease-in-out infinite; } @keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } .hc-row { display:flex; align-items:center; gap:1.25rem; margin-bottom:.65rem; } .hc-stat { display:flex; flex-direction:column; } .hc-num { font-family:var(--font-display); font-size:1.9rem; font-weight:900; color:var(--navy); line-height:1; letter-spacing:-.03em; } .hc-unit { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--primary); } .hc-label { font-size:11px; color:var(--navy-55); margin-top:2px; font-weight:500; } .hc-div { width:1px; height:40px; background:var(--border2); } .hc-tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--navy); padding:.3rem .75rem; background:var(--primary); border-radius:100px; letter-spacing:.02em; } */ /* ============================================================ TRUST BAR */ .trust-bar { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--off); padding:1.5rem 0; } .trust-label { text-align:center; font-size:11px; font-weight:700; color:var(--navy-35); letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; } .trust-marquee { overflow:hidden; } .trust-track { display:flex; gap:2rem; align-items:center; width:max-content; white-space:nowrap; animation:marquee 30s linear infinite; } .trust-track span { font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--navy-35); padding:.35rem 1rem; border:1.5px solid var(--border); border-radius:100px; background:var(--white); transition:all .2s; } .trust-track span:hover { color:var(--navy); border-color:var(--border2); } @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ============================================================ TAGLINE BANNER */ .tagline-banner { background:var(--navy); padding:5rem 2rem; text-align:center; position:relative; overflow:hidden; } .tagline-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%,rgba(59,125,216,.18),transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(232,86,58,.15),transparent 60%); pointer-events:none; } .tagline-inner { position:relative; z-index:1; max-width:900px; margin:0 auto; } .tagline-text { font-family:var(--font-display); font-size:clamp(2.2rem,5.5vw,4.5rem); font-weight:900; line-height:1.1; letter-spacing:-.03em; color:var(--white); margin:0 0 1.25rem; } .tagline-sep { color:rgba(255,255,255,.45); font-weight:400; } .tagline-brand { color:var(--primary); } .tagline-punct { color:var(--primary); } .tagline-sub { font-family:var(--font-display); font-size:clamp(1rem,2vw,1.35rem); color:rgba(255,255,255,.55); font-weight:400; line-height:1.65; letter-spacing:.01em; margin:0; } /* tagline entrance animations */ @keyframes tagFadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} } @keyframes tagGlow { 0%,100%{filter:drop-shadow(0 0 0px transparent)} 50%{filter:drop-shadow(0 0 18px rgba(232,86,58,.5))} } .tagline-w1 { display:inline-block; animation:tagFadeUp .7s var(--ease) .1s both; } .tagline-w2 { display:inline-block; animation:tagFadeUp .7s var(--ease) .4s both, tagGlow 3.5s ease-in-out 1.2s infinite; } .tagline-w3 { display:block; animation:tagFadeUp .7s var(--ease) .75s both; } /* tagline feature list */ /* ============================================================ ZONES BANNER */ .zones-banner { background:var(--off); border-bottom:1px solid var(--border); padding:5rem 0; } .zones-banner-inner { display:flex; flex-direction:column; align-items:center; gap:1.75rem; } .tagline-feat-title { font-family:var(--font-display); font-size:clamp(1.1rem,1.8vw,1.4rem); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); margin:0; display:flex; align-items:center; gap:.9rem; } .tagline-feat-title::before, .tagline-feat-title::after { content:''; width:40px; height:1.5px; background:var(--primary); opacity:.4; flex-shrink:0; } .tagline-feat-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; } .tagline-feat-item { font-family:var(--font-display); font-size:clamp(.8rem,1.2vw,.95rem); font-weight:400; color:var(--navy); cursor:pointer; transition:background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; padding:0; border-radius:100px; background:var(--white); border:1px solid var(--primary); box-shadow:0 2px 8px var(--navy-08); } .tagline-feat-item::before, .tagline-feat-item::after { display:none; } .tagline-feat-item a { display:block; padding:.45rem 1.2rem; color:inherit; text-decoration:none; } .tagline-feat-item:hover { background:var(--primary); border-color:var(--primary); color:var(--white); transform:translateY(-3px); box-shadow:none; } .tagline-feat-item:hover a { color:var(--white); } /* ============================================================ SECTIONS */ .section { padding:7rem 0; } .bg-navy { background:var(--navy); } .bg-light { background:var(--off); } .container { max-width:1280px; margin:0 auto; padding:0 2rem; } .section-label { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--primary); text-transform:uppercase; margin-bottom:1rem; } .section-label.light { color:var(--primary); } .section-headline { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.2rem); font-weight:800; letter-spacing:-.025em; line-height:1.1; color:var(--navy); margin-bottom:1.25rem; } .section-headline.light { color:var(--white); } .section-sub { font-size:1.05rem; color:var(--navy-55); max-width:540px; line-height:1.8; } .section-sub.light { color:rgba(255,255,255,.6); } .section-header { margin-bottom:4rem; } .hl { color:var(--primary); } .hl-indigo { color:var(--primary); } /* ============================================================ WHY US */ .why-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:stretch; } .why-visual { position:relative; display:flex; flex-direction:column; } .why-client { display:flex; align-items:center; gap:1rem; margin-bottom:1.75rem; } .why-client-logo { height:100px; width:auto; object-fit:contain; } .why-client-logo--shop { height:150px; } .why-client-logo--ev { height:80px; } .why-client-logo--blue { height:100px; } .why-client-logo--delivery { height:100px; } .why-client-logo--nostop { height:100px; } .why-client-name { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; } .why-img-container { position:relative; flex:1; height:auto; min-height:0; border-radius:var(--r-xl); overflow:hidden; border:2px solid var(--border); } .why-img-accent { position:absolute; inset:-12px; border-radius:calc(var(--r-xl) + 12px); border:2px dashed var(--primary-dim); pointer-events:none; } .why-badge-float { position:absolute; bottom:2rem; right:-2rem; background:var(--white); border:2px solid var(--border); border-radius:var(--r-lg); padding:1rem 1.5rem; box-shadow:0 12px 40px var(--navy-15); display:flex; flex-direction:column; align-items:center; z-index:2; } .badge-num { font-family:var(--font-display); font-size:2.5rem; font-weight:900; letter-spacing:-.04em; color:var(--primary); line-height:1; } .badge-text { font-size:11px; font-weight:700; color:var(--navy-55); letter-spacing:.08em; text-transform:uppercase; margin-top:.3rem; } .why-content { display:flex; flex-direction:column; gap:1.5rem; } .section-tag { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--primary); text-transform:uppercase; } .section-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; color:var(--navy); } .section-title.left { text-align:left; } .gradient-text { color:var(--primary); } .why-content > p { font-size:1rem; color:var(--navy-55); line-height:1.8; } .why-list { display:flex; flex-direction:column; gap:1.5rem; } .why-item { display:flex; gap:1.25rem; align-items:flex-start; } .why-icon { width:40px; height:40px; border-radius:10px; background:var(--primary-dim); color:var(--primary); font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.06em; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; } .why-item strong { display:block; font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--navy); margin-bottom:.3rem; } .why-item p { font-size:1.05rem; color:var(--navy-55); line-height:1.8; margin:0; } .why-callout { display:flex; gap:1.5rem; align-items:flex-start; background:var(--navy-04); border:1.5px solid var(--navy-15); border-left:4px solid var(--primary); border-radius:var(--r-lg); padding:1.75rem 2rem; margin-top:3rem; } .why-callout-icon { flex-shrink:0; width:48px; height:48px; border-radius:10px; background:var(--primary-dim); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-top:2px; } .why-callout-icon svg { width:24px; height:24px; } .why-callout-body { display:flex; flex-direction:column; gap:.5rem; } .why-callout-label { font-family:var(--font-display); font-size:.85rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); } .why-callout-body p { font-size:1.05rem; color:var(--navy-55); line-height:1.75; margin:0; } /* ============================================================ FAILS SECTION */ .fails-section { padding-bottom:6rem; } .fails-header { margin-bottom:3.5rem; } .fails-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .fails-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:2rem; display:flex; flex-direction:column; gap:1.25rem; transition:background .3s, border-color .3s; position:relative; overflow:hidden; } .fails-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(232,86,58,.06) 0%, transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none; } .fails-card:hover { background:rgba(255,255,255,.07); border-color:rgba(232,86,58,.3); } .fails-card:hover::after { opacity:1; } .fails-icon-wrap { width:60px; height:60px; background:rgba(232,86,58,.9); border-radius:var(--r); display:flex; align-items:center; justify-content:center; } .fails-icon-wrap svg { width:32px; height:32px; color:#fff; } .fails-card h3 { font-family:var(--font-display); font-size:1.45rem; font-weight:700; color:var(--white); line-height:1.3; margin:0; } .fails-card p { font-size:1.1rem; color:rgba(255,255,255,.5); line-height:1.85; margin:0; } .fails-card:hover p { color:rgba(255,255,255,.65); } /* ============================================================ DIFF SECTION */ /* ============================================================ DIFF SECTION */ @keyframes diffGlow { 0%,100%{text-shadow:0 0 8px rgba(99,102,241,.1)} 50%{text-shadow:0 0 18px rgba(99,102,241,.22)} } @keyframes diffShimmer { 0%{background-position:200% center} 100%{background-position:-200% center} } .diff-section { background:var(--navy); padding:8rem 0; position:relative; overflow:hidden; } .diff-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(99,102,241,.18) 0%, rgba(59,125,216,.08) 40%, transparent 70%); pointer-events:none; } .diff-section::after { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg, transparent, rgba(99,102,241,.5), transparent); } .diff-inner { max-width:980px; margin:0 auto; text-align:center; position:relative; z-index:1; } .diff-label { font-family:var(--font-display); font-size:clamp(1.4rem,2.8vw,2.2rem); font-weight:500; letter-spacing:-.01em; line-height:1.1; margin-bottom:2.5rem; color:rgba(255,255,255,.5); -webkit-text-fill-color:rgba(255,255,255,.5); animation:diffGlow 5s ease-in-out infinite; } .diff-label-brand { font-size:clamp(2.8rem,6vw,5rem); font-weight:900; letter-spacing:-.04em; display:block; background:linear-gradient(100deg, var(--primary) 30%, #a5b4fc 50%, var(--primary) 70%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:diffShimmer 8s linear infinite; } .diff-statement { font-family:var(--font-display); font-size:clamp(1.3rem,2.5vw,1.9rem); font-weight:500; letter-spacing:-.01em; line-height:1.6; color:rgba(255,255,255,.6); margin:0; } .diff-statement em { font-style:normal; color:var(--white); font-weight:700; } .diff-accent { position:relative; display:inline-block; color:var(--primary); font-weight:700; -webkit-text-fill-color:var(--primary); } .diff-accent::after { content:''; position:absolute; left:0; bottom:-4px; width:100%; height:2px; background:var(--primary); border-radius:2px; opacity:.5; } /* ============================================================ EVIDENCE SECTION */ .evidence-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:stretch; } .evidence-photo { position:relative; height:auto; min-height:0; border-radius:var(--r-xl); overflow:hidden; border:2px solid var(--border); } .evidence-photo img { width:100%; height:100%; object-fit:cover; } .evidence-photo-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; height:100%; } .evidence-photo-grid img { display:block; width:100%; height:100%; object-fit:cover; border-radius:0; } .evidence-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(99,102,241,.08), transparent 60%); pointer-events:none; } .evidence-left { display:flex; flex-direction:column; gap:2rem; } .evidence-left .section-title { margin-bottom:.25rem; line-height:1.15; } .evidence-left > p { font-size:1.3rem; color:var(--navy-55); line-height:2; letter-spacing:.005em; } .evidence-left > p:first-of-type { font-size:1.5rem; font-weight:600; color:var(--navy); line-height:1.7; } .evidence-right { display:flex; flex-direction:column; } .evidence-step { display:flex; gap:1.25rem; align-items:flex-start; } .evs-num { width:40px; height:40px; border-radius:10px; background:var(--primary); color:var(--navy); font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.06em; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .evs-body strong { display:block; font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.35rem; } .evs-body p { font-size:.9rem; color:var(--navy-55); line-height:1.7; margin:0; } .evidence-connector { width:2px; height:36px; background:linear-gradient(to bottom, var(--primary), rgba(99,102,241,.2)); margin-left:19px; border-radius:2px; } /* ============================================================ ZONES SECTION */ .zones-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .zones-left .section-headline { line-height:1.15; } .zones-list { list-style:none; padding:0; margin:0 0 2rem; display:flex; flex-direction:column; gap:1.1rem; } .zones-item { display:flex; align-items:flex-start; gap:1rem; } .zones-item svg { width:26px; height:26px; flex-shrink:0; color:var(--primary); background:rgba(99,102,241,.12); border-radius:6px; padding:3px; margin-top:2px; } .zones-item span { font-size:1.3rem; color:rgba(255,255,255,.72); line-height:1.7; } .zones-closer { font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:800; letter-spacing:-.02em; color:var(--primary); padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); line-height:1.5; } /* ============================================================ TAKEBACK SECTION */ .takeback-section { background:var(--white); padding:7rem 0; position:relative; overflow:hidden; } .takeback-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.08), transparent 65%); pointer-events:none; } .takeback-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.75rem; } .takeback-title { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.5rem); font-weight:900; letter-spacing:-.035em; line-height:1.1; color:var(--navy); margin:0; } .takeback-text { font-size:1.4rem; font-family:var(--font-display); font-weight:400; color:var(--navy-55); line-height:1.3; margin:0; padding:0 1.25rem; } .takeback-section--navy { background:var(--navy); } .takeback-section--navy::before { background:radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.15), transparent 65%); } .takeback-section--navy .takeback-title { color:var(--white); } .takeback-section--navy .takeback-text { color:rgba(255,255,255,.6); } /* ============================================================ USE CASES BLOCK */ /* .usecases-block { margin-top:4rem; padding-top:3.5rem; border-top:1px solid var(--border); } .usecases-label { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--primary); text-transform:uppercase; margin-bottom:2rem; } .usecases-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 3rem; margin-bottom:2.5rem; } .usecase-item { display:flex; gap:1rem; align-items:flex-start; } .uc-check { width:28px; height:28px; border-radius:8px; background:var(--primary-dim); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; } .uc-check svg { width:16px; height:16px; } .usecase-item strong { display:block; font-family:var(--font-display); font-size:.95rem; font-weight:700; color:var(--navy); margin-bottom:.25rem; } .usecase-item p { font-size:.875rem; color:var(--navy-55); line-height:1.7; margin:0; } .usecases-conclusion { display:flex; align-items:flex-start; gap:1rem; padding:1.5rem 2rem; background:var(--navy); border-radius:var(--r-lg); } .usecases-conclusion svg { width:20px; height:20px; color:var(--primary); flex-shrink:0; margin-top:2px; } .usecases-conclusion p { font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--white); line-height:1.65; margin:0; letter-spacing:-.01em; } */ /* ============================================================ STAT PANELS */ .stat-panels { display:flex; flex-direction:column; } .stat-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:500px; overflow:hidden; } .stat-panel.reverse { direction:rtl; } .stat-panel.reverse > * { direction:ltr; } .sp-text { padding:5rem clamp(2rem,5vw,6rem); background:var(--white); display:flex; flex-direction:column; } .sp-text h3 { font-family:var(--font-display); font-size:clamp(1.75rem,3.5vw,3rem); font-weight:800; letter-spacing:-.04em; color:var(--navy); margin-bottom:.75rem; order:1; } .sp-stat { display:flex; align-items:baseline; gap:.4em; margin-bottom:1.25rem; line-height:1; order:2; } .sp-text p { order:3; } .sp-more-link { order:4; display:inline-flex; align-items:center; gap:.4rem; margin-top:1.5rem; font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--primary); text-decoration:none; transition:gap .2s; } .sp-more-link:hover { gap:.7rem; } .sp-num { font-family:var(--font-display); font-size:3.2rem; font-weight:900; letter-spacing:-.02em; color:var(--navy); } .sp-unit { font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:var(--primary); } .sp-text p { font-size:1.1rem; color:var(--navy-55); line-height:1.8; max-width:380px; } .sp-img { height:100%; min-height:500px; overflow:hidden; } .sp-img img { height:100%; width:100%; object-fit:cover; filter:brightness(.9) saturate(.85); transition:transform .8s var(--ease),filter .5s; } .stat-panel:hover .sp-img img { transform:scale(1.03); filter:brightness(.95) saturate(1); } /* Panel accent colours */ .stat-panel .sp-text { background:var(--white); } .stat-panel .sp-num { color:var(--navy); } .stat-panel .sp-unit { color:var(--primary); } /* Stat panels — group + 3-col grid */ .sp-group { padding:4rem 0; border-top:1px solid var(--navy-10, rgba(0,0,40,.08)); } .sp-group:first-child { border-top:none; } .sp-group-title { font-family:var(--font-display); font-size:clamp(1.4rem,2.5vw,2rem); font-weight:800; letter-spacing:-.03em; color:var(--navy); margin-bottom:2.5rem; } .sp-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; } .sp-col { display:flex; flex-direction:column; } .sp-col-img { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:8px; margin-bottom:1.25rem; } .sp-col-img img:not(.sp-col-vignette) { width:100%; height:100%; object-fit:cover; filter:brightness(.9) saturate(.85); transition:transform .6s var(--ease, ease), filter .4s; } .sp-col:hover .sp-col-img img:not(.sp-col-vignette) { transform:scale(1.04); filter:brightness(.97) saturate(1); } .sp-col-vignette { position:absolute; bottom:12px; right:12px; width:14%; height:auto; object-fit:contain; } .sp-col h4 { font-family:var(--font-display); font-size:1.15rem; font-weight:800; letter-spacing:-.02em; color:var(--navy); margin-bottom:.15rem; } .sp-col .sp-col-subtitle { font-size:.975rem; font-style:italic; color:var(--primary); margin-bottom:.6rem; flex:none; } .sp-col h5 { font-family:var(--font-display); font-weight:600; color:var(--navy); letter-spacing:.02em; margin-bottom:.6rem; } .sp-col p { font-size:1.05rem; color:var(--navy-55); line-height:1.75; flex:1; } .sp-col .sp-more-link { margin-top:1rem; } /* ============================================================ BULLETS SECTION */ .bullets-wrap { display:grid; grid-template-columns:1fr 1.6fr; gap:6rem; align-items:center; } .bullets-title { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4.5rem); font-weight:900; letter-spacing:-.04em; color:var(--white); line-height:1.0; } .bullets-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; } .bullets-list li { display:flex; align-items:baseline; gap:1.5rem; padding:1.4rem 0; border-bottom:1px solid rgba(255,255,255,.08); position:relative; } .bullets-list li:first-child { border-top:1px solid rgba(255,255,255,.08); } .bl-num { font-family:var(--font-display); font-size:.75rem; font-weight:800; letter-spacing:.12em; color:var(--primary); flex-shrink:0; padding-top:.35rem; } .bl-body { display:flex; flex-direction:column; gap:.4rem; } .bl-text { font-family:var(--font-display); font-size:clamp(1.05rem,1.8vw,1.35rem); font-weight:700; color:var(--white); line-height:1.35; letter-spacing:-.02em; } .bl-desc { font-size:.9rem; color:rgba(255,255,255,.5); line-height:1.7; margin:0; } /* ============================================================ OUR APPROACH */ .approach-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .approach-content { display:flex; flex-direction:column; gap:1.5rem; } .approach-intro { font-size:1rem; color:var(--navy-55); line-height:1.8; } .approach-steps { display:flex; flex-direction:column; gap:1.5rem; } .approach-step { display:flex; gap:1.25rem; align-items:flex-start; } .approach-bullet { width:36px; height:36px; border-radius:10px; background:var(--primary-dim); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; } .approach-bullet svg { width:20px; height:20px; } .approach-step strong { display:block; font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.3rem; } .approach-step p { font-size:.9rem; color:var(--navy-55); line-height:1.7; margin:0; } .approach-visual { position:relative; display:flex; flex-direction:column; gap:1.1rem; } .approach-img-container { display:flex; gap:4px; position:relative; height:400px; border-radius:var(--r-xl); overflow:hidden; border:2px solid var(--border); } .approach-img-container img { flex:1; min-width:0; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .approach-img-container:hover img { transform:scale(1.03); } .approach-img-accent { position:absolute; inset:-12px; border-radius:calc(var(--r-xl) + 12px); border:2px dashed var(--primary-dim); pointer-events:none; } .approach-photo-row { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; border-radius:var(--r-lg); overflow:hidden; } .approach-photo-row img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; } .approach-quote { position:relative; padding:2rem 2rem 2rem 2.25rem; background:var(--navy); border-radius:var(--r-lg); box-shadow:0 8px 40px var(--navy-15); overflow:hidden; } .approach-quote::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 0% 50%,rgba(232,86,58,.18),transparent 65%); pointer-events:none; } .quote-icon { width:28px; height:28px; color:var(--primary); opacity:.8; margin-bottom:1rem; display:block; position:relative; z-index:1; } .approach-quote p { font-family:var(--font-display); font-size:1.2rem; font-style:italic; color:var(--white); line-height:1.7; margin:0; font-weight:600; letter-spacing:-.01em; position:relative; z-index:1; } /* ============================================================ OUTCOME */ .outcome-section { background:var(--navy); position:relative; overflow:hidden; } .outcome-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 20%,rgba(59,125,216,.12),transparent 55%),radial-gradient(ellipse at 10% 80%,rgba(232,86,58,.10),transparent 50%); pointer-events:none; } .outcome-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1.25rem; position:relative; z-index:1; } .outcome-card { grid-column:span 4; position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-xl); padding:2.25rem 2rem 2rem; overflow:hidden; transition:background .3s,border-color .3s,transform .35s var(--ease),box-shadow .35s; cursor:default; } .outcome-card.oc-wide { grid-column:span 6; } .outcome-card:hover { background:rgba(255,255,255,.08); border-color:var(--primary); transform:translateY(-4px); box-shadow:0 20px 60px rgba(99,102,241,.15); } /* ghost number */ .oc-num { position:absolute; top:-0.15em; right:.35rem; font-family:var(--font-display); font-size:7rem; font-weight:900; line-height:1; color:rgba(255,255,255,.04); letter-spacing:-.05em; pointer-events:none; transition:color .3s; } .outcome-card:hover .oc-num { color:rgba(232,86,58,.08); } /* top accent bar */ .outcome-card::before { content:''; position:absolute; top:0; left:2rem; right:2rem; height:2px; background:linear-gradient(90deg,var(--primary),transparent); border-radius:0 0 2px 2px; opacity:0; transition:opacity .3s; } .outcome-card:hover::before { opacity:1; } .oc-body { position:relative; z-index:1; display:flex; flex-direction:column; gap:1rem; height:100%; } .oc-icon { width:44px; height:44px; border-radius:12px; background:var(--primary-dim); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s,color .3s; } .oc-icon svg { width:28px; height:28px; } .outcome-card:hover .oc-icon { background:var(--primary); color:var(--navy); } .outcome-card h3 { font-family:var(--font-display); font-size:1.35rem; font-weight:800; letter-spacing:-.025em; color:var(--white); line-height:1.2; margin:0; } .outcome-card p { font-size:.9rem; color:rgba(255,255,255,.5); line-height:1.75; margin:0; flex:1; } .outcome-card:hover p { color:rgba(255,255,255,.7); } /* ============================================================ SERVICES GRID */ .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-xl); overflow:hidden; } .service-card { display:flex; flex-direction:column; background:rgba(255,255,255,.04); padding:2.25rem 2rem; text-decoration:none; cursor:pointer; transition:background .25s; position:relative; overflow:hidden; } .service-card:hover { background:rgba(255,255,255,.10); } .service-card:hover .sc-link { color:var(--primary); } .sc-num { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.25); margin-bottom:1.25rem; } .sc-icon { width:42px; height:42px; color:rgba(255,255,255,.45); margin-bottom:1.25rem; transition:color .25s; } .service-card:hover .sc-icon { color:var(--primary); } .service-card h3 { font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.6rem; color:var(--white); } .service-card p { font-size:.9rem; color:rgba(255,255,255,.55); line-height:1.7; flex:1; } .sc-link { display:inline-block; margin-top:1.25rem; font-size:13px; font-weight:600; color:rgba(255,255,255,.4); transition:color .25s; } .sc-cta { background:var(--primary) !important; cursor:pointer; } .sc-cta:hover { background:#4F46E5 !important; } .sc-cta-inner { display:flex; flex-direction:column; justify-content:center; height:100%; } .sc-cta p { font-size:13px; color:rgba(255,255,255,.75); margin-bottom:.5rem; flex:0; } .sc-cta h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--white); margin-bottom:1.5rem; letter-spacing:-.02em; } /* ============================================================ SECTORS */ .sectors-scroll { overflow-x:auto; padding-bottom:1rem; scrollbar-width:none; margin-bottom:3rem; } .sectors-scroll::-webkit-scrollbar { display:none; } .sectors-track { display:flex; gap:.6rem; width:max-content; } .sector-pill { padding:.5rem 1rem; border:2px solid var(--border); border-radius:100px; font-size:13px; font-weight:600; color:var(--navy-55); white-space:nowrap; cursor:pointer; transition:all .2s var(--ease); background:var(--white); } .sector-pill:hover { border-color:var(--navy-35); color:var(--navy); transform:translateY(-2px); } .sector-pill.active { border-color:var(--primary); color:var(--primary); background:var(--primary-dim); } .sector-display { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; } .sector-img-wrap { height:420px; border-radius:var(--r-xl); overflow:hidden; border:2px solid var(--border); } .sector-img-wrap img { width:100%; height:100%; object-fit:cover; } .sector-info h3 { font-family:var(--font-display); font-size:1.9rem; font-weight:800; letter-spacing:-.025em; margin-bottom:1rem; color:var(--navy); } .sector-info p { color:var(--navy-55); line-height:1.8; margin-bottom:1.5rem; } .sector-features { display:flex; flex-direction:column; gap:.6rem; margin-bottom:2rem; } .sector-features li { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--navy); font-weight:600; } .sector-features li::before { content:''; width:20px; height:2px; background:var(--primary); flex-shrink:0; border-radius:2px; } /* ============================================================ TESTIMONIALS */ .testimonials-wrap { position:relative; margin-top:2.5rem; } .testimonial { display:none; animation:fadeUp .5s var(--ease); } .testimonial.active { display:block; } @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } .testimonial blockquote { font-family:var(--font-display); font-size:clamp(1.35rem,3vw,2rem); font-weight:700; line-height:1.35; letter-spacing:-.02em; color:var(--navy); max-width:820px; margin:0 auto 2.5rem; text-align:center; } .testimonial blockquote::before { content:'\201C'; color:var(--primary); } .testimonial blockquote::after { content:'\201D'; color:var(--primary); } .t-author { display:flex; align-items:center; gap:1rem; justify-content:center; text-align:left; } .t-av { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--sky)); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; } .t-author strong { display:block; font-weight:700; font-size:14px; color:var(--navy); } .t-author span { font-size:13px; color:var(--navy-35); } .t-nav { display:flex; justify-content:center; gap:.75rem; margin-top:2.5rem; } .t-dot { width:8px; height:8px; border-radius:50%; background:var(--off2); border:none; cursor:pointer; transition:background .2s,transform .2s; } .t-dot.active { background:var(--primary); transform:scale(1.3); } /* ============================================================ CTA BAND */ .cta-band { background:var(--navy); padding:5rem 0; position:relative; overflow:hidden; } .cta-band::before { content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px; background:radial-gradient(circle,rgba(59,125,216,.2),transparent); border-radius:50%; } .cta-inner { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:3rem; flex-wrap:wrap; } .cta-inner h2 { font-family:var(--font-display); font-size:clamp(1.7rem,3.5vw,2.7rem); font-weight:800; letter-spacing:-.025em; color:var(--white); margin-bottom:.5rem; } .cta-inner p { font-size:.95rem; color:rgba(255,255,255,.5); font-weight:500; } .cta-actions { display:flex; gap:1rem; flex-wrap:wrap; flex-shrink:0; } /* ============================================================ PAGE HERO */ .page-hero { position:relative; overflow:hidden; display:flex; align-items:center; background:var(--navy); min-height:300px; padding-top:calc(var(--nav-h) + var(--event-banner-h)); } .page-hero-content { position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:4rem 2rem 4rem clamp(2rem,5vw,3rem); } .page-hero-content .section-label { margin-bottom:.5rem; } .page-hero-content h1 { font-family:var(--font-display); font-size:clamp(2.4rem,5.5vw,4.2rem); font-weight:900; letter-spacing:-.035em; margin:.5rem 0 .75rem; color:var(--white); line-height:1.05; } .page-hero-content p { color:rgba(255,255,255,.6); font-size:1rem; max-width:480px; } /* ============================================================ DELIVERS SECTION */ .delivers-section { background:var(--off); padding:5rem 0; position:relative; overflow:hidden; } .delivers-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 50%, rgba(232,86,58,.07), transparent 60%); pointer-events:none; } .delivers-inner { position:relative; z-index:1; } .delivers-header { margin-bottom:3rem; } .delivers-header h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; letter-spacing:-.03em; color:var(--navy); margin-top:.5rem; } .delivers-list { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 4rem; list-style:none; padding:0; margin:0; } .delivers-list li { display:flex; align-items:flex-start; gap:.9rem; } .delivers-list li svg { width:22px; height:22px; flex-shrink:0; color:var(--primary); margin-top:2px; } .delivers-list li span { font-size:.95rem; color:var(--navy-55); line-height:1.75; } .delivers-list li strong { color:var(--navy); font-weight:700; } .delivers-conclusion { margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); font-family:var(--font-display); font-size:1.3rem; font-weight:500; color:var(--navy-55); line-height:1.75; font-style:italic; } /* ============================================================ DEPLOYMENT GALLERY */ .section:has(.deployment-gallery) { padding-top:2rem; margin-top:-4rem; } .deployment-gallery { display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; } .gallery-item { position:relative; border-radius:var(--r-lg); overflow:hidden; } .gallery-item a { display:block; } .gallery-item img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform .4s var(--ease),filter .3s; filter:brightness(.92) saturate(.85); } .gallery-item:hover img { transform:scale(1.02); filter:brightness(1) saturate(1); } .gallery-label { position:absolute; bottom:.6rem; left:.6rem; padding:.25rem .6rem; background:rgba(255,255,255,.92); color:var(--primary); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:4px; pointer-events:none; } /* ============================================================ PRIVACY POLICY */ .policy-wrap { max-width:760px; margin:0 auto; } .policy-updated { font-size:.8rem; color:var(--navy-35); margin-bottom:3rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600; } .policy-section { margin-bottom:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--border); } .policy-section:last-child { border-bottom:none; } .policy-section h2 { font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--navy); margin-bottom:1rem; display:flex; align-items:baseline; gap:.6rem; } .policy-num { font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--primary); } .policy-section p { font-size:.95rem; color:var(--navy-55); line-height:1.85; margin-bottom:.75rem; } .policy-section p:last-child { margin-bottom:0; } .policy-section ul { margin:.5rem 0 .75rem 1.25rem; display:flex; flex-direction:column; gap:.4rem; } .policy-section ul li { font-size:.95rem; color:var(--navy-55); line-height:1.75; } .policy-section a { color:var(--primary); text-decoration:none; } .policy-section a:hover { text-decoration:underline; } /* ============================================================ FULL SERVICES */ .full-services { display:flex; flex-direction:column; gap:6rem; } .fs-item { display:grid; grid-template-columns:1fr 1.35fr; gap:4rem; align-items:center; } .fs-item.reverse { direction:rtl; } .fs-item.reverse > * { direction:ltr; } .fs-img { height:400px; border-radius:var(--r-xl); overflow:hidden; border:2px solid var(--border); } .fs-tag { font-family:var(--font-display); font-size:3rem; font-weight:900; color:var(--primary-dim); line-height:1; margin-bottom:.5rem; } .fs-content h2 { font-family:var(--font-display); font-size:2.2rem; font-weight:800; letter-spacing:-.03em; margin-bottom:1rem; color:var(--navy); } .fs-content p { color:var(--navy-55); line-height:1.8; margin-bottom:1.5rem; } .fs-content ul { display:flex; flex-direction:column; gap:.6rem; margin-bottom:2rem; } .fs-content li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--navy); font-weight:600; } .fs-content li::before { content:'→'; color:var(--primary); font-weight:700; } /* ============================================================ SECTORS GRID */ .sectors-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; } .sec-card { position:relative; height:280px; border-radius:var(--r-xl); overflow:hidden; border:2px solid var(--border); cursor:pointer; transition:transform .4s var(--ease),box-shadow .4s,opacity .4s var(--ease),filter .4s var(--ease),border-color .3s; } .sec-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px var(--navy-15); } .sec-card img { filter:brightness(.68) saturate(.75); transition:transform .6s var(--ease),filter .4s; } .sec-card:hover img { transform:scale(1.04); filter:brightness(.78) saturate(.95); } .sec-over { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.75rem; background:linear-gradient(to top,rgba(15,27,53,.88) 0%,transparent 55%); } .sec-over span { font-size:1.5rem; margin-bottom:.4rem; } .sec-over h3 { font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--white); margin-bottom:.35rem; } .sec-over p { font-size:13px; color:rgba(255,255,255,.65); line-height:1.5; } /* ── Sector card interaction states ── */ .sec-card.sec-hide-anim { opacity:0; transform:scale(.86) translateY(8px); filter:blur(2px); pointer-events:none; } .sec-card.sec-active { border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-dim),0 24px 60px var(--navy-15); grid-column:1/-1; height:360px; } .sec-card.sec-active:hover { transform:none; } /* ── Sector detail panel ── */ .sec-detail { display:none; margin-top:3rem; padding-top:3rem; border-top:2px solid var(--off2); } .sec-detail-inner { opacity:0; transform:translateY(24px); transition:opacity .55s var(--ease),transform .55s var(--ease); } .sec-detail.open .sec-detail-inner { opacity:1; transform:translateY(0); } .sec-detail-back { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--navy-55); cursor:pointer; padding:.45rem 1rem .45rem .75rem; border:2px solid var(--border2); border-radius:100px; background:none; font-family:var(--font-body); margin-bottom:2.5rem; transition:color .2s,border-color .2s,background .2s; } .sec-detail-back:hover { color:var(--primary); border-color:var(--primary); background:var(--primary-dim); } .sec-detail-back svg { width:16px; height:16px; flex-shrink:0; } .sec-detail-tag { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); margin-bottom:.75rem; } .sec-detail-header { margin-bottom:2rem; } .sec-detail-header h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; color:var(--navy); letter-spacing:-.03em; line-height:1.1; } .sec-detail-body p { font-size:15px; line-height:1.85; color:var(--navy-80); margin-bottom:2rem; max-width:760px; } .sec-detail-imgs-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2rem; } .sec-detail-imgs-2 > div { height:260px; border-radius:var(--r-lg); overflow:hidden; } .sec-detail-img-full { height:400px; border-radius:var(--r-xl); overflow:hidden; margin-bottom:2rem; } .sec-detail-img-narrow { height:300px; max-width:680px; border-radius:var(--r-lg); overflow:hidden; margin-bottom:2rem; } /* ============================================================ ABOUT */ .about-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; margin-bottom:6rem; } .about-img-col { position:relative; } .about-img-col > img { height:460px; border-radius:var(--r-xl); border:2px solid var(--border); } .about-img2 { position:absolute; bottom:-2rem; right:-2rem; width:45%; height:180px; border-radius:var(--r-lg); overflow:hidden; border:2px solid var(--white); box-shadow:0 8px 32px var(--navy-15); } .about-img3 { position:absolute; top:-2rem; right:-2rem; width:45%; height:180px; border-radius:var(--r-lg); overflow:hidden; border:2px solid var(--white); box-shadow:0 8px 32px var(--navy-15); } .about-text h2 { font-family:var(--font-display); font-size:2.3rem; font-weight:800; letter-spacing:-.03em; margin-bottom:1.25rem; color:var(--navy); } .about-text p { color:var(--navy-55); line-height:1.8; margin-bottom:1rem; font-size:1.1rem; } .about-text .delivers { margin:2rem 0 1.5rem; padding:1.5rem 1.75rem; background:var(--secondary-dim); border-left:4px solid var(--secondary); border-radius:0 var(--r) var(--r) 0; } .about-text .delivers p { margin-bottom:.5rem; color:var(--navy); } .about-text .delivers p:first-child { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--secondary); margin-bottom:.6rem; } .about-text .delivers p:last-child { font-family:var(--font-display); font-size:1.15rem; font-weight:700; line-height:1.6; color:var(--navy); margin-bottom:0; letter-spacing:-.02em; } .about-brand-row { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; margin-top:2rem; } .about-logos { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; } .about-brand-by { font-size:9px; font-weight:500; letter-spacing:.06em; color:var(--navy-35); margin:0; } .about-brand-by a { color:var(--navy-35); text-decoration:none; border-bottom:1px solid var(--navy-15); transition:color .2s, border-color .2s; } .about-brand-by a:hover { color:var(--primary); border-color:var(--primary); } .about-wl-logo { height:36px; width:auto; } .about-ct-logo { height:80px; width:auto; } .about-badges { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:2rem; } .ab-item { display:flex; align-items:center; gap:10px; padding:1rem; background:var(--white); border:2px solid var(--border); border-radius:var(--r); font-size:13px; font-weight:700; transition:border-color .2s,transform .2s; } .ab-item:hover { border-color:var(--primary); transform:translateY(-2px); } .ab-item span { font-size:1.1rem; } .timeline { padding-top:4rem; border-top:2px solid var(--off2); } .timeline .section-headline { margin-bottom:3rem; } .tl-items { display:flex; position:relative; } .tl-items::before { content:''; position:absolute; top:20px; left:0; right:0; height:2px; background:var(--off2); } .tl-item { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; } .tl-year { font-family:var(--font-display); font-size:.8rem; font-weight:700; color:var(--primary); letter-spacing:.08em; margin-bottom:.75rem; } .tl-dot { width:12px; height:12px; border-radius:50%; background:var(--primary); margin-bottom:1rem; flex-shrink:0; border:3px solid var(--white); box-shadow:0 0 0 2px var(--primary); } .tl-item p { font-size:12px; color:var(--navy-55); line-height:1.6; padding:0 .5rem; font-weight:500; } /* ============================================================ CONTACT */ .contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:5rem; } .contact-info h2 { font-family:var(--font-display); font-size:2.2rem; font-weight:800; letter-spacing:-.03em; margin-bottom:1rem; color:var(--navy); line-height:1.1; } .contact-info > p { color:var(--navy-55); line-height:1.8; margin-bottom:2rem; } .contact-details { display:flex; flex-direction:column; gap:1.25rem; margin-bottom:2rem; } .cd-row { display:flex; gap:1rem; align-items:flex-start; } .cd-icon { width:40px; height:40px; background:var(--primary-dim); border:2px solid var(--primary-dim); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; } .cd-row strong { display:block; font-size:11px; color:var(--navy-35); letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; font-weight:700; } .cd-row a, .cd-row span { color:var(--navy); font-size:15px; font-weight:600; } .cd-row a:hover { color:var(--primary); } .ipc-badge { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; background:var(--off); border:2px solid var(--border); border-radius:var(--r); } .ipc-icon { width:36px; height:36px; border-radius:50%; background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:700; flex-shrink:0; } .ipc-badge strong { display:block; font-size:13px; font-weight:700; color:var(--navy); } .ipc-badge span { font-size:12px; color:var(--navy-55); } .contact-form-wrap { background:var(--white); border:2px solid var(--border); border-radius:var(--r-xl); padding:2.5rem; } .contact-form { display:flex; flex-direction:column; gap:1.25rem; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .form-group { display:flex; flex-direction:column; gap:6px; } .form-group label { font-size:12px; font-weight:700; color:var(--navy-55); letter-spacing:.06em; text-transform:uppercase; } .form-group input, .form-group select, .form-group textarea { background:var(--off); border:2px solid var(--border); border-radius:var(--r); padding:.8rem 1rem; color:var(--navy); font-family:var(--font-body); font-size:14px; font-weight:500; transition:border-color .2s,box-shadow .2s; resize:none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--primary); background:var(--white); box-shadow:0 0 0 3px var(--primary-dim); } .form-group input.invalid, .form-group textarea.invalid { border-color:#e53e3e !important; box-shadow:0 0 0 3px rgba(229,62,62,.15) !important; } .form-group input::placeholder, .form-group textarea::placeholder { color:var(--navy-35); } .form-group select option { background:var(--white); } .hp-field { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .form-note { font-size:12px; color:var(--navy-35); text-align:center; font-weight:500; } .form-success { font-size:14px; color:#2f855a; background:#f0fff4; border:1px solid #9ae6b4; border-radius:8px; padding:12px 16px; margin-bottom:12px; } .form-error { font-size:14px; color:#c53030; background:#fff5f5; border:1px solid #feb2b2; border-radius:8px; padding:12px 16px; margin-bottom:12px; } /* ============================================================ FOOTER */ footer { background:var(--navy); padding:5rem 0 2rem; position:relative; } .footer-rainbow { height:4px; background:linear-gradient(90deg, var(--primary) 0%, var(--primary) 50%, var(--sky) 80%, #A78BFA 100%); } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:2rem; } .footer-brand p { font-size:13px; color:rgba(255,255,255,.4); line-height:1.7; margin-top:1rem; max-width:260px; } .footer-reg { font-size:11px; color:rgba(255,255,255,.2); margin-top:.5rem; } .footer-linkedin { display:inline-flex; align-items:center; justify-content:center; margin-top:1.25rem; color:rgba(255,255,255,.35); transition:color .2s; } .footer-linkedin:hover { color:var(--white); } .footer-brand img.logo { height:28px; width:auto; } .footer-communithings-logo { width:110px; height:auto; margin-top:1.25rem; opacity:.82; } .footer-col h4 { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.3); text-transform:uppercase; margin-bottom:1rem; } .footer-col ul { display:flex; flex-direction:column; gap:.5rem; } .footer-col a { font-size:15px; color:rgba(255,255,255,.5); transition:color .2s; cursor:pointer; font-weight:500; } .footer-col a:hover { color:var(--primary); } .footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } .footer-bottom p { font-size:12px; color:rgba(255,255,255,.2); } .footer-bottom a { color:rgba(255,255,255,.35); text-decoration:underline; } .footer-bottom a:hover { color:var(--primary); } /* ============================================================ SCROLL PROGRESS BAR */ #scroll-progress { position:fixed; top:0; left:0; width:0; height:3px; background:var(--primary); z-index:9999; pointer-events:none; border-radius:0 2px 2px 0; } /* ============================================================ REVEAL */ .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); } .reveal.in-view { opacity:1; transform:translateY(0); } .sec-fade { opacity:0; transition:opacity .9s ease; } .sec-fade.in-view { opacity:1; } .delay-1 { transition-delay:.1s; } .delay-2 { transition-delay:.2s; } .delay-3 { transition-delay:.32s; } .delay-4 { transition-delay:.44s; } /* ============================================================ HERO SHAPE DRIFT */ @keyframes shapeDrift { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-15px,25px) scale(.96)} 100%{transform:translate(0,0) scale(1)} } .s1 { animation:shapeDrift 18s ease-in-out infinite; } .s2 { animation:shapeDrift 24s ease-in-out 6s infinite reverse; } /* ============================================================ SP-COL HOVER LIFT */ .sp-col { transition:transform .35s var(--ease); } .sp-col:hover { transform:translateY(-5px); } /* ============================================================ FAILS ICON POP */ .fails-icon-wrap { transition:transform .3s var(--ease),box-shadow .3s; } .fails-card:hover .fails-icon-wrap { transform:scale(1.15); box-shadow:0 8px 24px rgba(232,86,58,.4); } /* ============================================================ WHY-ITEM HOVER SLIDE */ .why-item { transition:transform .3s var(--ease); } .why-item:hover { transform:translateX(6px); } .why-item:hover .why-icon { background:var(--primary); color:var(--navy); transition:background .3s,color .3s; } /* ============================================================ EVIDENCE GRID ZOOM */ .evidence-photo-grid .cell { overflow:hidden; position:relative; } .evidence-photo-grid .cell img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .evidence-photo-grid .cell:hover img { transform:scale(1.07); } .evidence-photo-grid .cell:nth-child(1) img, .evidence-photo-grid .cell:nth-child(4) img { object-fit:contain; object-position:center; background:#fff; transform:none !important; } #evidence-photo-grid .cell img { object-fit:cover; } .cell-tag { position:absolute; bottom:10px; right:10px; background:#ff7f50; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:4px; border:none; pointer-events:none; } /* Hero title animation */ @keyframes heroLine { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} } .hero-title-line { display:block; } .hero-title > span { animation:heroLine .75s var(--ease) both; } .hero-title > span:nth-child(1) { animation-delay:.25s; } .hero-title > span:nth-child(2) { animation-delay:.60s; } .hero-title > span:nth-child(3) { animation-delay:.95s; } /* ============================================================ THE PROBLEM */ .problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.25rem; margin-bottom:3rem; } .problem-card { display:flex; gap:1.75rem; align-items:flex-start; background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:2.25rem 2rem; transition:border-color .3s,transform .35s var(--ease),box-shadow .35s; position:relative; overflow:hidden; } .problem-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),rgba(99,102,241,0)); opacity:0; transition:opacity .3s; border-radius:var(--r-xl) var(--r-xl) 0 0; } .problem-card:hover { border-color:var(--primary); transform:translateY(-5px); box-shadow:0 24px 64px var(--navy-08); } .problem-card:hover::before { opacity:1; } .problem-num { flex-shrink:0; width:12px; height:12px; border-radius:50%; background:var(--primary); margin-top:6px; position:relative; font-size:0; } .problem-num::before { content:''; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid rgba(232,86,58,.25); } .problem-card-body { flex:1; } .problem-card h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:600; letter-spacing:-.02em; color:var(--navy); margin-bottom:.55rem; line-height:1.25; } .problem-card p { font-size:.9rem; color:var(--navy-55); line-height:1.75; margin:0; } .problem-conclusion { position:relative; overflow:hidden; padding:2.5rem 3rem; background:var(--navy); border-radius:var(--r-xl); border-left:4px solid var(--primary); margin-top:.5rem; } .problem-conclusion::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 0% 50%,rgba(232,86,58,.18),transparent 60%); pointer-events:none; } .problem-conclusion svg { display:none; } .problem-conclusion p { position:relative; z-index:1; font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--white); line-height:1.6; margin:0; letter-spacing:-.015em; } .problem-conclusion p::before { content:'\201C'; font-size:3rem; line-height:0; vertical-align:-.55em; margin-right:.2em; color:var(--primary); font-weight:900; } /* ============================================================ WHY SOLUTIONS FAIL */ .fail-layout { display:grid; grid-template-columns:280px 1fr; gap:3rem; margin-bottom:2.5rem; align-items:start; } .fail-images { display:flex; flex-direction:column; gap:1rem; position:sticky; top:2rem; } .fail-images img { width:100%; height:180px; object-fit:cover; border-radius:var(--r-lg); display:block; } .fail-list { display:flex; flex-direction:column; gap:0; } .fail-item { display:flex; gap:1.5rem; align-items:flex-start; padding:1.75rem 0; border-bottom:1px solid var(--border); } .fail-item:first-child { padding-top:0; } .fail-item:last-child { border-bottom:none; } .fail-icon { width:42px; height:42px; border-radius:10px; background:var(--primary-dim); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; } .fail-icon svg { width:18px; height:18px; } .fail-item strong { display:block; font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--navy); margin-bottom:.35rem; } .fail-item > div { display:flex; align-items:flex-start; gap:.75rem; } .fail-bullet { flex-shrink:0; display:inline-block; width:10px; height:10px; background:var(--primary); border-radius:2px; transform:rotate(45deg); margin-top:.55rem; font-size:0; color:transparent; } .fail-item p { font-size:1.1rem; color:var(--navy-55); line-height:1.75; margin:0; } .fail-conclusion { padding:1.75rem 2.25rem; background:linear-gradient(135deg,var(--navy),#1a2d52); border-radius:var(--r-lg); border-left:3px solid var(--primary); } .fail-conclusion p { font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--white); line-height:1.65; margin:0; letter-spacing:-.01em; } /* ============================================================ THE SOLUTION */ .sol-row { display:grid; grid-template-columns:1fr 1.1fr; gap:5rem; align-items:center; margin-bottom:6rem; } .sol-row:last-child { margin-bottom:0; } .sol-row-reverse { direction:rtl; } .sol-row-reverse > * { direction:ltr; } .sol-img-outer { position:relative; flex-shrink:0; } .sol-img-duo { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; align-self:center; } .sol-img-duo img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-lg); border:2px solid var(--border); transition:transform .4s var(--ease); } .sol-img-duo img:hover { transform:scale(1.02); } .sol-img-wrap { position:relative; height:440px; border-radius:var(--r-xl); overflow:hidden; border:2px solid var(--border); } .sol-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .sol-img-outer:hover .sol-img-wrap img { transform:scale(1.03); } .sol-img-accent { position:absolute; inset:-10px; border-radius:calc(var(--r-xl) + 10px); border:2px dashed var(--primary-dim); pointer-events:none; z-index:-1; } .sol-text-wrap { display:flex; flex-direction:column; gap:2rem; } .sol-text-wrap > h3 { font-family:var(--font-display); font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:800; letter-spacing:-.03em; color:var(--navy); margin-bottom:.75rem; line-height:1.2; } .sol-text-wrap > p { font-size:1rem; color:var(--navy-55); line-height:1.8; margin:0; } .sol-text-stack { gap:2.5rem; } .sol-point { display:flex; gap:1.5rem; align-items:flex-start; } .sol-point-badge { position:relative; flex-shrink:0; width:52px; height:52px; border-radius:14px; background:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(15,27,53,.25); margin-top:4px; } .sol-point-badge::before { content:''; position:absolute; inset:-4px; border-radius:18px; border:1.5px solid rgba(15,27,53,.15); } .sol-point-num { font-family:var(--font-display); font-size:1rem; font-weight:900; letter-spacing:.02em; color:var(--primary); line-height:1; } .sol-point-body { flex:1; } .sol-point-body h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:800; letter-spacing:-.025em; color:var(--navy); margin-bottom:.6rem; line-height:1.2; } .sol-point-body p { font-size:.95rem; color:var(--navy-55); line-height:1.8; margin:0 0 .5rem; } .sol-point-body p:last-child { margin-bottom:0; } .sol-lorem { font-size:.875rem !important; color:var(--navy-35) !important; } .sol-text-stack .sol-point { padding-top:1.75rem; border-top:1px solid var(--border); } .sol-text-stack .sol-point:first-child { padding-top:0; border-top:none; } /* ============================================================ RESPONSIVE */ @media(max-width:1100px) { .hero { grid-template-columns:1fr; padding:calc(var(--nav-h) + var(--event-banner-h) + 3rem) 2rem 4rem; } .hero-visual { display:none; } .stat-panel, .stat-panel.reverse { grid-template-columns:1fr; direction:ltr; } .sp-img { min-height:320px; order:1; } .sp-text { order:2; } .sp-cols { grid-template-columns:1fr; } .bullets-wrap { grid-template-columns:1fr; gap:3rem; } .why-wrap { grid-template-columns:1fr; gap:3rem; } .why-badge-float { right:1rem; } .why-img-container { height:360px; } .sector-display, .about-grid, .contact-grid, .fs-item, .fs-item.reverse { grid-template-columns:1fr; direction:ltr; gap:2.5rem; } .about-img2, .about-img3 { display:none; } .tl-items { flex-direction:column; gap:2rem; } .tl-items::before { display:none; } .tl-item { align-items:flex-start; text-align:left; flex-direction:row; gap:1rem; } .tl-dot { flex-shrink:0; margin-top:4px; } .footer-grid { grid-template-columns:1fr 1fr; } .cta-inner { flex-direction:column; } .services-grid { grid-template-columns:1fr 1fr; } .sectors-grid { grid-template-columns:1fr 1fr; } .problem-grid { grid-template-columns:1fr 1fr; } .sol-row, .sol-row.sol-row-reverse { grid-template-columns:1fr; direction:ltr; gap:2.5rem; } .sol-img-wrap { height:320px; } .sol-row { margin-bottom:4rem; } .sol-img-accent { z-index:0; } } @media(max-width:900px) { .sp-cols { grid-template-columns:repeat(2,1fr); } } @media(max-width:768px) { .fails-grid { grid-template-columns:1fr; } .evidence-wrap { grid-template-columns:1fr; gap:3rem; } .evidence-photo { min-height:280px; } .zones-wrap { grid-template-columns:1fr; gap:3rem; } .nav-links,.btn-pay,.btn-cta:not(.mob-actions .btn-cta) { display:none; } .burger { display:flex; } .logo-icon { height:16px; } .footer-brand img.logo { height:20px; } .services-grid { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; } .about-badges { grid-template-columns:1fr; } .section { padding:5rem 0; } .problem-grid { grid-template-columns:1fr; } .sol-point-badge { width:44px; height:44px; border-radius:12px; } .sol-point-num { font-size:.875rem; } .sol-img-wrap { height:260px; } .sec-detail-imgs-2 { grid-template-columns:1fr; } .sec-detail-imgs-2 > div { height:200px; } .sec-detail-img-full { height:240px; } .sec-detail-img-narrow { height:200px; max-width:100%; } } /* ============================================================ LIGHTBOX */ .lightbox-overlay { position:fixed; inset:0; background:rgba(10,16,32,.92); backdrop-filter:blur(8px); z-index:10000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; } .lightbox-overlay.open { opacity:1; pointer-events:all; } .lightbox-overlay img { max-width:90vw; max-height:88vh; object-fit:contain; border-radius:var(--r-lg); box-shadow:0 32px 80px rgba(0,0,0,.6); transform:scale(.94); transition:transform .3s var(--ease); } .lightbox-overlay.open img { transform:scale(1); } .lightbox-close { position:absolute; top:1.5rem; right:1.5rem; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); border:none; cursor:pointer; color:var(--white); display:flex; align-items:center; justify-content:center; transition:background .2s; } .lightbox-close:hover { background:rgba(255,255,255,.25); } .lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.12); border:none; cursor:pointer; color:var(--white); display:flex; align-items:center; justify-content:center; transition:background .2s; } .lightbox-prev { left:1.5rem; } .lightbox-next { right:1.5rem; } .lightbox-prev:hover, .lightbox-next:hover { background:rgba(255,255,255,.25); } .deployment-gallery img, .gallery-item a { cursor:pointer !important; } .section img:not(.logo):not(.logo-icon):not(.footer-communithings-logo), .page-hero img, .why-visual img, .sol-img-wrap img, .sol-img-duo img { cursor:zoom-in; } /* ============================================================ GDPR BANNER */ .gdpr-overlay { position:fixed; inset:0; background:rgba(15,27,53,.55); backdrop-filter:blur(4px); z-index:9998; opacity:0; pointer-events:none; transition:opacity .35s; } .gdpr-overlay.visible { opacity:1; pointer-events:all; } .gdpr-banner { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px); width:min(680px,calc(100vw - 2rem)); background:var(--white); border-radius:var(--r-xl); box-shadow:0 32px 80px rgba(15,27,53,.22),0 0 0 1px rgba(15,27,53,.06); z-index:9999; opacity:0; pointer-events:none; transition:opacity .4s var(--ease),transform .4s var(--ease); } .gdpr-banner.visible { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); } .gdpr-inner { padding:2rem 2.25rem; } .gdpr-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; } .gdpr-icon { width:44px; height:44px; border-radius:12px; background:var(--primary-dim); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .gdpr-icon svg { width:24px; height:24px; } .gdpr-title { font-family:var(--font-display); font-size:1.15rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; margin:0 0 .15rem; } .gdpr-subtitle { font-size:.8rem; color:var(--navy-55); margin:0; } .gdpr-body { font-size:.875rem; color:var(--navy-55); line-height:1.75; margin:0 0 1.25rem; } .gdpr-body strong { color:var(--navy); font-weight:700; } .gdpr-link { color:var(--primary); text-decoration:underline; text-underline-offset:2px; } /* toggles */ .gdpr-toggles { display:flex; flex-direction:column; gap:.6rem; background:var(--off); border-radius:var(--r); padding:1rem 1.25rem; margin-bottom:1.5rem; } .gdpr-toggle { display:flex; align-items:center; gap:.75rem; cursor:pointer; } .gdpr-toggle input[type=checkbox] { display:none; } .gt-info { flex:1; } .gt-info strong { display:block; font-family:var(--font-display); font-size:.85rem; font-weight:700; color:var(--navy); } .gt-info span { font-size:.78rem; color:var(--navy-55); line-height:1.4; } .gt-switch { width:42px; height:24px; border-radius:100px; background:var(--off2); border:1.5px solid var(--border2); flex-shrink:0; position:relative; transition:background .2s,border-color .2s; } .gt-switch::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--white); box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform .2s var(--ease); } .gdpr-toggle input:checked + .gt-info + .gt-switch, .gdpr-toggle input:checked ~ .gt-switch { background:var(--primary); border-color:var(--primary); } .gdpr-toggle input:checked + .gt-info + .gt-switch::after, .gdpr-toggle input:checked ~ .gt-switch::after { transform:translateX(18px); } .gt-switch.disabled { background:var(--navy); border-color:var(--navy); opacity:.35; cursor:not-allowed; } .gt-switch.disabled::after { transform:translateX(18px); } /* actions */ .gdpr-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; } .gdpr-btn-primary { flex:1; min-width:140px; padding:.7rem 1.5rem; background:var(--primary); color:var(--navy); border:none; border-radius:100px; font-family:var(--font-display); font-size:.875rem; font-weight:700; cursor:pointer; transition:background .2s,transform .15s; } .gdpr-btn-primary:hover { background:#4F46E5; transform:translateY(-1px); } .gdpr-btn-secondary { flex:1; min-width:120px; padding:.7rem 1.25rem; background:transparent; color:var(--navy); border:1.5px solid var(--border2); border-radius:100px; font-family:var(--font-display); font-size:.875rem; font-weight:600; cursor:pointer; transition:border-color .2s,background .2s; } .gdpr-btn-secondary:hover { border-color:var(--navy); background:var(--off); } .gdpr-note { font-size:.72rem; color:var(--navy-35); line-height:1.55; margin:0; text-align:center; } @media(max-width:600px) { .gdpr-inner { padding:1.5rem; } .gdpr-actions { flex-direction:column; } .gdpr-btn-primary,.gdpr-btn-secondary { width:100%; } } @media(max-width:480px) { .sectors-grid { grid-template-columns:1fr; } .sp-num { font-size:4.5rem; } .hero-title { font-size:3rem; } } /* ============================================================ CLAIM SECTION */ .claim-section { position: relative; padding: 7rem 2rem; background: var(--navy); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Mot décoratif en arrière-plan */ .claim-deco-word { position: absolute; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 13vw; color: rgba(255,255,255,.04); letter-spacing: .08em; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; width: 100%; text-align: center; pointer-events: none; user-select: none; } /* Points décoratifs */ .claim-dot { position: absolute; border-radius: 50%; pointer-events: none; } .claim-dot-1 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%); top: -80px; right: -60px; } .claim-dot-2 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%); bottom: -40px; left: 8%; } .claim-dot-3 { width: 120px; height: 120px; background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%); bottom: 20%; right: 12%; } .claim-inner { position: relative; text-align: center; max-width: 960px; z-index: 1; } .claim-badge { display: inline-block; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .12em; color: var(--primary); text-transform: uppercase; margin-bottom: 1.5rem; } .claim-text { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 5.5vw, 4.8rem); font-weight: 800; line-height: 1.15; color: #fff; margin: 0; letter-spacing: -.02em; } .claim-strike { position: relative; display: inline-block; white-space: nowrap; } .claim-strike::after { content: ''; position: absolute; left: -2px; right: -2px; top: 54%; height: 4px; background: var(--primary); border-radius: 2px; transform: rotate(-1.5deg); } /* ============================================================ SP-COL DURATION */ .sp-col-duration { font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; line-height: 1; color: var(--navy); margin: 0 0 1rem; opacity: 0; transform: translateY(40px) scale(.75); transition: opacity 1.4s cubic-bezier(.23,1,.32,1), transform 1.4s cubic-bezier(.23,1,.32,1); } .sp-group.in-view .sp-col-duration { opacity: 1; transform: translateY(0) scale(1); } .sp-group-title .hl { transition: color .8s ease; } .sp-group-title .hl.hl-counting { color: #FF6B47; } .sp-count-coral { color: #FF6B47; font-size: 1.3rem; transition: font-size .4s cubic-bezier(.23,1,.32,1); } .sp-count-coral.counting { font-size: 2rem; } .sp-group.in-view .sp-col:nth-child(1) .sp-col-duration { transition-delay: 1.2s; } .sp-group.in-view .sp-col:nth-child(2) .sp-col-duration { transition-delay: 1.7s; } .sp-group.in-view .sp-col:nth-child(3) .sp-col-duration { transition-delay: 2.2s; } /* ============================================================ BULLETS READ MORE */ .bl-read-more { display: none; } /* ============================================================ BULLETS TOOLTIP */ .bl-text { cursor: default; } .bl-tooltip-card { position: fixed; z-index: 9000; background: #fff; border-radius: 12px; padding: 1.5rem 1.75rem; width: 300px; box-shadow: 0 16px 48px rgba(10,15,30,.22), 0 0 0 1px rgba(10,15,30,.06); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; transform: translateX(-8px); } .bl-tooltip-card.visible { opacity: 1; pointer-events: auto; transform: translateX(0); } .bl-tooltip-text { font-size: 1.1rem; color: #4b5563; line-height: 1.65; margin: 0; } /* ============================================================ CLIENTS MARQUEE */ .clients-section { padding:5rem 0 4rem; background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .clients-title { font-family:var(--font-display); font-size:clamp(.85rem,1.2vw,1rem); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-55); text-align:center; margin:0 0 3rem; } .clients-marquee { overflow:hidden; position:relative; } .clients-marquee::before, .clients-marquee::after { content:''; position:absolute; top:0; bottom:0; width:8rem; z-index:2; pointer-events:none; } .clients-marquee::before { left:0; background:linear-gradient(to right, var(--white), transparent); } .clients-marquee::after { right:0; background:linear-gradient(to left, var(--white), transparent); } .clients-track { display:flex; width:max-content; animation:clients-marquee 35s linear infinite; } .clients-track:hover { animation-play-state:paused; } .clients-list { display:flex; align-items:center; gap:0; padding:0; list-style:none; margin:0; } .clients-list li { flex-shrink:0; height:60px; display:flex; align-items:center; padding:0 2rem; } .clients-list li.cl-sm { height:40px; } .clients-list li.cl-sm img { height:40px; } .clients-list li.cl-md { height:75px; } .clients-list li.cl-md img { height:75px; } .clients-list li.cl-lg { height:100px; } .clients-list li.cl-lg img { height:100px; } .clients-list li.cl-xl { height:150px; } .clients-list li.cl-xl img { height:150px; } .clients-list img { height:60px; width:auto; max-width:220px; object-fit:contain; display:block; transition:transform .35s ease; } .clients-list img:hover { transform:scale(1.08); } .clients-section--grey .clients-list img { filter:grayscale(1) opacity(.45); } .clients-section--grey .clients-list img:hover { filter:grayscale(0) opacity(1); } @keyframes clients-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }