/* ========================================================================= SOLAR REVOLUTION — FEUILLE DE STYLE PARTAGÉE ========================================================================= Ce fichier contrôle le design de TOUTES les pages du site en même temps. Pour changer une couleur ou une police partout, modifiez uniquement le bloc ":root" ci-dessous — inutile de toucher aux fichiers .html. ========================================================================= */ :root{ /* ====== CHARTE GRAPHIQUE ====== */ --color-primary: #00A86B; /* Vert de la marque (logo) — couleur principale */ --color-primary-dark: #00814F; /* Vert plus foncé (survol des boutons) */ --color-secondary: #0A0F0E; /* Noir/vert très foncé du logo — texte, header, footer */ --color-accent: #3FC98A; /* Vert clair — accents secondaires */ --color-bg: #F6F8F7; /* Fond de page clair, légèrement teinté vert */ --color-bg-alt: #FFFFFF; /* Fond blanc (cartes) */ --color-text: #12181A; /* Texte principal */ --color-text-light: #5C6663; /* Texte secondaire / gris */ --color-border: #E6EAE8; --font-heading: 'Playfair Display', serif; --font-body: 'Inter', sans-serif; --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 30px rgba(16, 35, 63, 0.08); --shadow-hover: 0 16px 40px rgba(16, 35, 63, 0.14); --container: 1180px; /* Motif "losange" discret repris du logo, utilisé en texture de fond */ --pattern-diamonds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 6 L58 32 L32 58 L6 32 Z' fill='none' stroke='%2300A86B' stroke-opacity='0.14' stroke-width='1.4'/%3E%3C/svg%3E"); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height:1.6; overflow-x:hidden; animation: page-fade-in .5s ease; } @keyframes page-fade-in{ from{ opacity:0; } to{ opacity:1; } } /* ===== Révélation douce au défilement (progressive enhancement) ===== Sans JavaScript, tout reste normalement visible (voir règle de base ".reveal" ci-dessous) : l'effet ne s'active que si main.js a pu ajouter la classe "js-reveal" sur . */ .reveal{ opacity:1; transform:none; } html.js-reveal .reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } html.js-reveal .reveal.in-view{ opacity:1; transform:none; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } section{ padding: 96px 24px; } .container{ max-width: var(--container); margin: 0 auto; } h1,h2,h3,h4{ font-family: var(--font-heading); color: var(--color-secondary); line-height:1.2; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-heading); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color: var(--color-primary); background: rgba(0,168,107,0.1); padding:6px 14px; border-radius:999px; margin-bottom:18px; } .eyebrow svg{ width:14px; height:14px; } .section-title{ font-size: clamp(28px, 4vw, 40px); font-weight:700; margin-bottom:16px; } .section-sub{ color: var(--color-text-light); font-size:17px; max-width:620px; } .section-head{ text-align:center; margin: 0 auto 56px; max-width:720px; } .section-head.left{ text-align:left; margin:0 0 56px; } /* ===== Buttons ===== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family: var(--font-heading); font-weight:600; font-size:15px; padding:15px 28px; border-radius: 999px; border:2px solid transparent; cursor:pointer; transition: all .25s ease; white-space:nowrap; } .btn-primary{ position:relative; overflow:hidden; background: var(--color-primary); color:#fff; box-shadow: 0 8px 20px rgba(0,168,107,.35); } .btn-primary::before{ content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); pointer-events:none; } .btn-primary:hover{ background: var(--color-primary-dark); transform: translateY(-2px); } .btn-primary:hover::before{ animation: btn-shine .85s ease; } @keyframes btn-shine{ from{ left:-75%; } to{ left:125%; } } .btn-outline{ background: transparent; border-color: rgba(255,255,255,.5); color:#fff; } .btn-outline:hover{ background: rgba(255,255,255,.12); } .btn-dark-outline{ background: transparent; border-color: var(--color-secondary); color: var(--color-secondary); } .btn-dark-outline:hover{ background: var(--color-secondary); color:#fff; } .btn-block{ width:100%; } /* ===== Header ===== */ header{ position:fixed; top:0; left:0; right:0; z-index:1000; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--color-border); transition: box-shadow .3s ease; } header.scrolled{ box-shadow: 0 8px 26px rgba(10,15,14,.10); } .nav-wrap{ max-width: var(--container); margin:0 auto; padding: 14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .logo{ display:flex; align-items:center; gap:10px; } .logo .logo-mark{ width:34px; height:34px; flex:none; object-fit:contain; } .logo-word{ font-family: var(--font-heading); font-weight:700; font-size:17px; letter-spacing:.05em; text-transform:uppercase; color: var(--color-secondary); } .logo-dot{ color: var(--color-primary); } nav.main-nav ul{ display:flex; gap:26px; align-items:center; flex-wrap:nowrap; } nav.main-nav li{ flex:none; } nav.main-nav a{ font-family:var(--font-heading); font-weight:600; font-size:14.5px; color:var(--color-secondary); transition: color .2s; white-space:nowrap; position:relative; } nav.main-nav a:hover{ color: var(--color-primary); } nav.main-nav a.active{ color: var(--color-primary); } nav.main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background: var(--color-primary); border-radius:2px; transform: scaleX(0); transform-origin:left; transition: transform .25s ease; } nav.main-nav a:hover::after, nav.main-nav a.active::after{ transform: scaleX(1); } .header-actions{ display:flex; align-items:center; gap:18px; } .header-phone{ display:flex; align-items:center; gap:8px; font-family:var(--font-heading); font-weight:600; font-size:15px; color:var(--color-secondary); } .header-phone svg{ width:18px; height:18px; color: var(--color-primary); } .burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; } .burger span{ width:26px; height:3px; background: var(--color-secondary); border-radius:2px; } /* ===== Hero (page d'accueil) ===== */ .hero{ position:relative; padding: 180px 24px 120px; background-image: linear-gradient(160deg, rgba(54,30,14,.74) 0%, rgba(24,15,8,.84) 55%, rgba(12,8,5,.93) 100%), url('images/realisation-1-facade-apres.jpg'); background-size: cover; background-position: center 28%; background-repeat: no-repeat; color:#fff; overflow:hidden; } .hero::before{ content:""; position:absolute; top:-120px; right:-120px; width:420px; height:420px; background: radial-gradient(circle, rgba(0,168,107,.55) 0%, rgba(0,168,107,0) 70%); border-radius:50%; } .hero::after{ content:""; position:absolute; bottom:-160px; left:-100px; width:360px; height:360px; background: radial-gradient(circle, rgba(63,201,138,.35) 0%, rgba(63,201,138,0) 70%); border-radius:50%; } .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:center; max-width: var(--container); margin:0 auto; } .hero h1{ color:#fff; font-size: clamp(34px, 5vw, 54px); font-weight:800; margin-bottom:22px; letter-spacing:-0.01em; text-shadow: 0 8px 30px rgba(0,0,0,.3); } .hero h1 .accent{ color: var(--color-primary); } .hero p.lead{ font-size:18px; color: rgba(255,255,255,.82); max-width:520px; margin-bottom:34px; } .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px; } .hero-badges{ display:flex; gap:26px; flex-wrap:wrap; } /* Entrée en fondu/translation au chargement (pas besoin de JS ni de défilement, la section hero étant déjà visible dès l'ouverture de la page) */ @keyframes hero-in{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } } .hero .eyebrow{ animation: hero-in .7s ease both; } .hero h1{ animation: hero-in .7s ease .12s both; } .hero p.lead{ animation: hero-in .7s ease .22s both; } .hero-ctas{ animation: hero-in .7s ease .32s both; } .hero-badges{ animation: hero-in .7s ease .42s both; } .hero-visual{ animation: hero-in .8s ease .3s both; } .hero-badge{ display:flex; align-items:center; gap:10px; font-size:14px; color: rgba(255,255,255,.85); font-family:var(--font-heading); font-weight:500; } .hero-badge svg{ width:20px; height:20px; color: var(--color-accent); flex:none; } .hero-visual{ position:relative; z-index:2; } .hero-visual::before, .hero-visual::after{ content:""; position:absolute; border:2px solid rgba(0,168,107,.45); border-radius:6px; transform: rotate(45deg); z-index:-1; animation: float-diamond 6s ease-in-out infinite; } .hero-visual::before{ width:26px; height:26px; top:-16px; right:36px; } .hero-visual::after{ width:16px; height:16px; bottom:14px; left:-14px; border-color: rgba(63,201,138,.55); animation-delay:1.4s; } @keyframes float-diamond{ 0%, 100%{ transform: rotate(45deg) translateY(0); } 50%{ transform: rotate(45deg) translateY(-14px); } } .hero-card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding:34px; backdrop-filter: blur(6px); } .hero-card .sun-icon{ width:64px; height:64px; margin-bottom:18px; } .hero-card h3{ color:#fff; font-size:22px; margin-bottom:10px; } .hero-card p{ color: rgba(255,255,255,.75); font-size:15px; } .hero-stat-row{ display:flex; gap:20px; margin-top:24px; } .hero-stat{ flex:1; background: rgba(255,255,255,.08); border-radius: var(--radius-sm); padding:16px; text-align:center; } .hero-stat strong{ display:block; font-family:var(--font-heading); font-size:20px; color: var(--color-primary); } .hero-stat span{ font-size:12px; color: rgba(255,255,255,.7); } .hero-photo{ position:relative; border-radius: var(--radius-sm); overflow:hidden; aspect-ratio: 4/3; } .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; animation: hero-photo-zoom 16s ease-in-out infinite alternate; } @keyframes hero-photo-zoom{ from{ transform: scale(1); } to{ transform: scale(1.08); } } .hero-photo-tag{ position:absolute; left:14px; bottom:14px; background: rgba(5,8,7,.72); backdrop-filter: blur(4px); color:#fff; font-size:12px; font-weight:600; font-family:var(--font-heading); letter-spacing:.02em; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.18); } /* ===== Jauge PEB (page d'accueil) ===== */ .peb-section{ padding:90px 24px; background: var(--color-bg); } .peb-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:70px; align-items:center; max-width: var(--container); margin:0 auto; } .peb-gauge-wrap{ background: var(--color-bg-alt); border-radius: var(--radius); padding:38px 34px 30px; box-shadow: var(--shadow-hover); position:relative; } .peb-marker-track{ position:relative; height:34px; margin-bottom:6px; } .peb-marker{ position:absolute; left:7.14%; top:0; transform: translateX(-50%); width:34px; height:34px; border-radius:50%; background: var(--color-secondary); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: left 1.6s cubic-bezier(.16,1,.3,1) .3s; } .peb-marker svg{ width:16px; height:16px; } .peb-marker::after{ content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid var(--color-secondary); } .peb-gauge-wrap.in-view .peb-marker{ left:92.86%; } .peb-bars{ display:flex; border-radius:10px; overflow:hidden; } .peb-bar{ flex:1; text-align:center; padding:14px 0; font-family:var(--font-heading); font-weight:800; font-size:17px; color:#fff; } .peb-bar.peb-g{ background:#E53935; } .peb-bar.peb-f{ background:#F4511E; } .peb-bar.peb-e{ background:#FB8C00; } .peb-bar.peb-d{ background:#FBC02D; color:#3a2e00; } .peb-bar.peb-c{ background:#C0CA33; color:#2c3200; } .peb-bar.peb-b{ background:#7CB342; } .peb-bar.peb-a{ background: var(--color-primary); } .peb-gauge-caption{ text-align:center; margin-top:18px; font-size:14px; color: var(--color-text-light); } .peb-gauge-caption strong{ color: var(--color-secondary); font-family:var(--font-heading); } /* ===== FAQ ===== */ .faq-section{ padding:90px 24px; background: var(--color-bg-alt); } .faq-list{ max-width: 860px; margin: 40px auto 0; display:flex; flex-direction:column; gap:14px; } .faq-item{ background: var(--color-bg); border:1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 24px; transition: box-shadow .2s ease, border-color .2s ease; } .faq-item[open]{ box-shadow: var(--shadow); border-color: transparent; } .faq-item summary{ list-style:none; cursor:pointer; padding:18px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-heading); font-weight:700; font-size:17px; color: var(--color-secondary); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-icon{ flex-shrink:0; position:relative; width:20px; height:20px; } .faq-icon::before, .faq-icon::after{ content:""; position:absolute; background: var(--color-primary); border-radius:2px; transition: transform .25s ease; } .faq-icon::before{ left:0; top:9px; width:20px; height:2px; } .faq-icon::after{ left:9px; top:0; width:2px; height:20px; } .faq-item[open] .faq-icon::after{ transform: rotate(90deg); } .faq-item p{ margin:0 0 20px; color: var(--color-text-light); line-height:1.7; } /* ===== Page header (bannière des pages secondaires) ===== */ .page-header{ position:relative; padding: 170px 24px 70px; text-align:center; background-image: linear-gradient(160deg, rgba(54,30,14,.76) 0%, rgba(24,15,8,.86) 55%, rgba(12,8,5,.94) 100%), url('images/realisation-1-facade-apres.jpg'); background-size: cover; background-position: center 28%; background-repeat: no-repeat; color:#fff; overflow:hidden; } .page-header::before{ content:""; position:absolute; top:-120px; right:-80px; width:340px; height:340px; background: radial-gradient(circle, rgba(0,168,107,.4) 0%, rgba(0,168,107,0) 70%); border-radius:50%; } .page-header .container{ position:relative; z-index:2; } .page-header h1{ color:#fff; font-size: clamp(30px, 4.5vw, 46px); margin-bottom:14px; } .page-header p{ color: rgba(255,255,255,.78); font-size:17px; max-width:620px; margin:0 auto; } .breadcrumb{ display:flex; justify-content:center; gap:8px; font-size:13.5px; color: rgba(255,255,255,.55); margin-bottom:18px; } .breadcrumb a{ color: rgba(255,255,255,.75); } .breadcrumb a:hover{ color: var(--color-primary); } /* ===== Trust bar ===== */ .trust-bar{ background: var(--color-bg-alt); border-bottom:1px solid var(--color-border); padding: 28px 24px; } .trust-bar .container{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:22px; } .trust-item{ display:flex; align-items:center; gap:12px; font-family:var(--font-heading); font-weight:600; font-size:14.5px; color: var(--color-secondary); } .trust-item svg{ width:22px; height:22px; color: var(--color-primary); flex:none; } /* ===== Services (grille compacte / teaser) ===== */ .services{ background: var(--color-bg); } .services-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; } .service-card{ position:relative; background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius: var(--radius); padding: 34px 28px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; } .service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); } .service-icon{ width:56px; height:56px; border-radius: 14px; background: rgba(0,168,107,.12); display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .service-icon svg{ width:28px; height:28px; color: var(--color-primary); } .service-card h3{ font-size:19px; margin-bottom:10px; } .service-card p{ color: var(--color-text-light); font-size:15px; margin-bottom:16px; } .service-card a.more{ font-family:var(--font-heading); font-weight:600; font-size:14px; color: var(--color-primary); display:inline-flex; align-items:center; gap:6px; } .service-card a.more svg{ width:14px; height:14px; transition: transform .2s; } .service-card a.more:hover svg{ transform: translateX(3px); } /* ===== Services détaillés (page Nos services) ===== */ .service-detail-list{ display:flex; flex-direction:column; gap:24px; } .service-detail{ scroll-margin-top: 110px; display:grid; grid-template-columns: auto 1fr auto; gap:28px; align-items:center; background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); } .service-detail.featured{ border-color: var(--color-primary); background: linear-gradient(135deg, rgba(0,168,107,.05), var(--color-bg-alt) 40%); } .service-detail-icon{ width:72px; height:72px; border-radius: 18px; background: rgba(0,168,107,.12); display:flex; align-items:center; justify-content:center; flex:none; } .service-detail-icon svg{ width:34px; height:34px; color: var(--color-primary); } .service-detail-badge{ display:inline-block; background: var(--color-primary); color:#fff; font-family: var(--font-heading); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em; padding:4px 10px; border-radius:999px; margin-bottom:10px; } .service-detail h3{ font-size:23px; margin-bottom:10px; } .service-detail p{ color: var(--color-text-light); font-size:15px; margin-bottom:14px; } .service-detail-tags{ display:flex; flex-wrap:wrap; gap:10px; } .service-detail-tags span{ font-size:13px; color: var(--color-secondary); background: var(--color-bg); border:1px solid var(--color-border); padding:5px 12px; border-radius:999px; } .service-detail-cta{ flex:none; } /* ===== Comment ça se passe (processus) ===== */ .process{ background: var(--color-bg-alt); } .process-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; position:relative; } .process-grid::before{ content:""; position:absolute; top:36px; left:12.5%; right:12.5%; height:2px; z-index:0; background: repeating-linear-gradient(90deg, var(--color-border) 0 8px, transparent 8px 16px); } .process-step{ text-align:center; position:relative; padding: 10px; z-index:1; } .process-num{ width:52px; height:52px; border-radius:50%; background: var(--color-secondary); color: var(--color-primary); font-family: var(--font-heading); font-weight:700; font-size:19px; display:flex; align-items:center; justify-content:center; margin: 0 auto 18px; } .process-step h3{ font-size:17px; margin-bottom:8px; } .process-step p{ color: var(--color-text-light); font-size:14.5px; } /* ===== Why us ===== */ .why{ background: var(--color-bg-alt); } .why-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; } .why-card{ text-align:center; padding: 20px; } .why-icon{ width:72px; height:72px; border-radius:50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); display:flex; align-items:center; justify-content:center; margin: 0 auto 20px; box-shadow: 0 10px 24px rgba(0,168,107,.3); } .why-icon svg{ width:32px; height:32px; color:#fff; } .why-card h3{ font-size:17px; margin-bottom:8px; } .why-card p{ color: var(--color-text-light); font-size:14.5px; } /* ===== Spécialité Toiture & Façade (spotlight accueil) ===== */ .specialty-section{ background-image: var(--pattern-diamonds), linear-gradient(var(--color-secondary), var(--color-secondary)); background-repeat: repeat, no-repeat; color:#fff; position:relative; overflow:hidden; } .specialty-section::before{ content:""; position:absolute; top:-140px; right:-100px; width:380px; height:380px; background: radial-gradient(circle, rgba(0,168,107,.35) 0%, rgba(0,168,107,0) 70%); border-radius:50%; } .specialty-section .section-head p{ color: rgba(255,255,255,.75); } .specialty-section .section-title{ color:#fff; } .specialty-grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1fr 1fr; gap:28px; margin-bottom:44px; } .specialty-card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius: var(--radius); padding:36px; } .specialty-card .service-icon{ background: rgba(0,168,107,.18); } .specialty-card h3{ color:#fff; font-size:22px; margin-bottom:14px; } .specialty-card ul{ margin-bottom:0; } .specialty-card ul li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color: rgba(255,255,255,.82); margin-bottom:13px; } .specialty-card ul li svg{ width:18px; height:18px; color: var(--color-primary); flex:none; margin-top:2px; } .specialty-cta{ position:relative; z-index:2; text-align:center; } /* ===== Réalisations ===== */ .gallery{ background: var(--color-bg-alt); } .gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; } .gallery-item{ position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 1/1; background-image: var(--pattern-diamonds), linear-gradient(135deg, #00A86B22, #0A0F0E11); background-repeat: repeat, no-repeat; display:flex; align-items:center; justify-content:center; border:1px solid var(--color-border); transition: transform .3s ease, box-shadow .3s ease; } .gallery-item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); } .gallery-item .ph-inner{ text-align:center; color: var(--color-text-light); padding:20px; transition: transform .35s ease; } .gallery-item:hover .ph-inner{ transform: scale(1.06); } .gallery-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s ease; } .gallery-item:hover img{ transform: scale(1.06); } .gallery-item .gallery-photo-label{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 16px 12px; background: linear-gradient(to top, rgba(10,15,14,.82), rgba(10,15,14,0)); color:#fff; font-family: var(--font-heading); font-weight:600; font-size:14px; } .gallery-item img{ cursor: zoom-in; } /* ===== Lightbox (agrandir une photo au clic) ===== */ .lightbox-overlay{ position:fixed; inset:0; z-index:9999; background: rgba(5,8,7,.92); display:flex; align-items:center; justify-content:center; padding:40px; opacity:0; visibility:hidden; transition: opacity .25s ease; } .lightbox-overlay.open{ opacity:1; visibility:visible; } .lightbox-overlay .lightbox-img{ max-width:100%; max-height:100%; border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0,0,0,.5); display:block; } .lightbox-close{ position:absolute; top:22px; right:26px; width:44px; height:44px; border-radius:50%; border:none; background: rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background .2s; } .lightbox-close:hover{ background: rgba(255,255,255,.26); } @media (max-width: 560px){ .lightbox-overlay{ padding:20px; } .lightbox-close{ top:14px; right:14px; width:38px; height:38px; font-size:20px; } } /* ===== Bloc avant / après (chantiers réels) ===== */ .compare-list{ display:flex; flex-direction:column; gap:28px; margin-bottom:56px; } .compare-card{ background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); transition: box-shadow .3s ease; } .compare-card:hover{ box-shadow: var(--shadow-hover); } .compare-grid{ display:grid; grid-template-columns: 1fr 1fr; } .compare-side{ position:relative; aspect-ratio: 3/4; overflow:hidden; background: var(--color-bg); } .compare-side img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; } .compare-card:hover .compare-side img{ transform: scale(1.04); } .compare-label{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--font-heading); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; padding:5px 13px; border-radius:999px; background: rgba(10,15,14,.78); color:#fff; } .compare-label-after{ background: var(--color-primary); } .compare-caption{ padding:26px 28px; } .compare-caption h3{ font-size:20px; margin-bottom:8px; } .compare-caption p{ color: var(--color-text-light); font-size:14.5px; margin:0; } /* ===== Curseur avant / après (glisser pour comparer) ===== */ .ba-slider{ position:relative; width:100%; aspect-ratio: 4/3; overflow:hidden; cursor: ew-resize; user-select:none; background: var(--color-bg); touch-action: pan-y; } .ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; } .ba-after{ z-index:1; } .ba-before-wrap{ position:absolute; inset:0; z-index:2; overflow:hidden; width:50%; } .ba-before-wrap img{ width:200%; max-width:none; } /* recalculé précisément en JS ; repli propre à 50% sans JS */ .ba-handle{ position:absolute; top:0; bottom:0; left:50%; z-index:3; width:0; display:flex; align-items:center; justify-content:center; } .ba-handle-line{ position:absolute; top:0; bottom:0; left:0; width:3px; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); transform: translateX(-50%); } .ba-handle-grip{ position:relative; width:44px; height:44px; border-radius:50%; background:#fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; transform: translateX(-50%); } .ba-handle-grip svg{ width:19px; height:19px; color: var(--color-secondary); } .ba-tag{ position:absolute; z-index:4; bottom:16px; font-family:var(--font-heading); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:#fff; background: rgba(10,15,14,.78); padding:5px 13px; border-radius:999px; pointer-events:none; } .ba-tag-before{ left:16px; } .ba-tag-after{ right:16px; background: var(--color-primary); } @media (max-width: 560px){ .ba-handle-grip{ width:38px; height:38px; } .ba-handle-grip svg{ width:16px; height:16px; } } .gallery-item svg{ width:36px; height:36px; color: var(--color-primary); margin: 0 auto 10px; } .gallery-item .ph-label{ font-family: var(--font-heading); font-weight:600; font-size:13px; color: var(--color-secondary); } .gallery-item .ph-sub{ font-size:12px; color: var(--color-text-light); margin-top:4px; } .gallery-tag{ position:absolute; top:12px; left:12px; background: var(--color-secondary); color:#fff; font-size:11px; font-family: var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.02em; padding:4px 10px; border-radius:999px; z-index:2; } .gallery-caption{ text-align:center; margin-top:34px; color: var(--color-text-light); font-size:14.5px; } /* ===== CTA banner ===== */ .cta-banner{ background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark)); color:#fff; text-align:center; padding: 70px 24px; } .cta-banner h2{ color:#fff; font-size: clamp(24px, 4vw, 34px); margin-bottom:14px; } .cta-banner p{ color: rgba(255,255,255,.9); margin-bottom:28px; } .cta-banner .btn-outline{ border-color:#fff; color:#fff; } .cta-banner .btn-outline:hover{ background:#fff; color: var(--color-primary-dark); } /* ===== Contact ===== */ .contact{ background: var(--color-bg); } .contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:50px; } .contact-info h2{ margin-bottom:16px; } .contact-info > p{ color: var(--color-text-light); margin-bottom:30px; } .contact-item{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; } .contact-item .ci-icon{ width:46px; height:46px; border-radius:12px; background: rgba(0,168,107,.12); display:flex; align-items:center; justify-content:center; flex:none; } .contact-item .ci-icon svg{ width:22px; height:22px; color: var(--color-primary); } .contact-item h4{ font-size:15px; margin-bottom:4px; } .contact-item a, .contact-item span{ color: var(--color-text-light); font-size:14.5px; } .contact-item a:hover{ color: var(--color-primary); } .social-row{ display:flex; gap:12px; margin-top:26px; } .social-row a{ width:42px; height:42px; border-radius:50%; background: var(--color-bg-alt); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; transition: all .2s; } .social-row a:hover{ background: var(--color-primary); border-color: var(--color-primary); } .social-row a svg{ width:18px; height:18px; color: var(--color-secondary); transition: color .2s; } .social-row a:hover svg{ color:#fff; } .contact-form{ background: var(--color-bg-alt); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); border:1px solid var(--color-border); } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:18px; } .form-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; } .form-group label{ font-family: var(--font-heading); font-weight:600; font-size:13.5px; color: var(--color-secondary); } .form-group input, .form-group textarea, .form-group select{ border:1.5px solid var(--color-border); border-radius: var(--radius-sm); padding:13px 16px; font-family: var(--font-body); font-size:14.5px; color: var(--color-text); background: var(--color-bg); outline:none; transition: border-color .2s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ border-color: var(--color-primary); } .form-note{ font-size:13px; color: var(--color-text-light); margin-top:14px; text-align:center; } #form-status{ margin-top:14px; font-size:14px; font-family: var(--font-heading); font-weight:600; text-align:center; } #form-status.success{ color: var(--color-accent); } #form-status.error{ color:#D64545; } .contact-map-section{ padding: 0 24px 90px; background: var(--color-bg); } .contact-map-wrap{ max-width: var(--container); margin: 40px auto 0; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-hover); border:1px solid var(--color-border); line-height:0; } /* ===== Contenu légal (mentions légales / confidentialité) ===== */ .legal-content{ max-width:760px; margin:0 auto; } .legal-content h2{ font-size:22px; margin: 40px 0 14px; } .legal-content h2:first-child{ margin-top:0; } .legal-content p{ color: var(--color-text-light); font-size:15px; margin-bottom:14px; } .legal-content ul{ margin: 0 0 14px 0; } .legal-content ul li{ color: var(--color-text-light); font-size:15px; margin-bottom:8px; padding-left:20px; position:relative; } .legal-content ul li::before{ content:"—"; position:absolute; left:0; color: var(--color-primary); } .legal-content .placeholder{ background: rgba(0,168,107,.1); color: var(--color-primary-dark); padding:2px 6px; border-radius:6px; font-weight:600; } .legal-note{ background: var(--color-bg-alt); border:1px dashed var(--color-border); border-radius: var(--radius-sm); padding:18px 20px; font-size:14px; color: var(--color-text-light); margin-bottom:34px; } /* ===== Footer ===== */ footer{ background-image: var(--pattern-diamonds), linear-gradient(var(--color-secondary), var(--color-secondary)); background-repeat: repeat, no-repeat; color: rgba(255,255,255,.75); padding: 70px 24px 26px; position:relative; } .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; } .footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:16px; } .footer-logo .logo-mark{ width:30px; height:30px; object-fit:contain; } .footer-logo .logo-word{ font-size:16px; color:#fff; } .footer-logo .logo-dot{ color: var(--color-primary); } .footer-col p{ font-size:14.5px; margin-bottom:20px; color: rgba(255,255,255,.6); } .footer-col h4{ color:#fff; font-size:15px; margin-bottom:18px; } .footer-col ul li{ margin-bottom:12px; } .footer-col ul a{ font-size:14.5px; color: rgba(255,255,255,.65); transition: color .2s; } .footer-col ul a:hover{ color: var(--color-primary); } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13.5px; color: rgba(255,255,255,.5); } .footer-bottom a{ color: rgba(255,255,255,.5); } .footer-bottom a:hover{ color:#fff; } /* ===== Boutons flottants (appel + WhatsApp, mobile) ===== */ .float-call{ display:none; position:fixed; bottom:22px; right:22px; z-index:900; width:58px; height:58px; border-radius:50%; background: var(--color-primary); align-items:center; justify-content:center; box-shadow: 0 10px 24px rgba(0,168,107,.45); } .float-call svg{ width:26px; height:26px; color:#fff; } .float-whatsapp{ display:none; position:fixed; bottom:92px; right:22px; z-index:900; width:58px; height:58px; border-radius:50%; background:#25D366; align-items:center; justify-content:center; box-shadow: 0 10px 24px rgba(37,211,102,.45); } .float-whatsapp svg{ width:28px; height:28px; color:#fff; } /* ===== Bandeau cookies ===== */ .cookie-banner{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:1200; background: var(--color-secondary); color: rgba(255,255,255,.85); padding: 18px 24px; box-shadow: 0 -8px 24px rgba(0,0,0,.2); } .cookie-banner.visible{ display:flex; } .cookie-banner-inner{ max-width: var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .cookie-banner p{ font-size:13.5px; margin:0; max-width:720px; } .cookie-banner a{ color: var(--color-primary); text-decoration:underline; } .cookie-banner-actions{ display:flex; gap:12px; flex:none; } .cookie-banner .btn{ padding:10px 20px; font-size:13.5px; } /* ===== Responsive ===== */ @media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } .peb-grid{ grid-template-columns: 1fr; gap:40px; } .specialty-grid{ grid-template-columns: 1fr; } .services-grid{ grid-template-columns: repeat(2, 1fr); } .why-grid{ grid-template-columns: repeat(2, 1fr); } .process-grid{ grid-template-columns: repeat(2, 1fr); gap:36px; } .process-grid::before{ display:none; } .gallery-grid{ grid-template-columns: repeat(2, 1fr); } .contact-grid{ grid-template-columns: 1fr; } .footer-grid{ grid-template-columns: 1fr 1fr; } .service-detail{ grid-template-columns: auto 1fr; } .service-detail-cta{ grid-column: 1 / -1; } } @media (max-width: 760px){ nav.main-nav, .header-phone{ display:none; } .header-actions .btn-primary{ display:none; } .burger{ display:flex; } nav.main-nav.open{ display:flex; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; padding:20px 24px; border-bottom:1px solid var(--color-border); box-shadow: var(--shadow); } nav.main-nav.open ul{ flex-direction:column; gap:16px; align-items:flex-start; width:100%; } section{ padding: 70px 20px; } .page-header{ padding: 150px 20px 56px; } .services-grid{ grid-template-columns: 1fr; } .why-grid{ grid-template-columns: 1fr; } .process-grid{ grid-template-columns: 1fr; } .gallery-grid{ grid-template-columns: 1fr; } .form-row{ grid-template-columns: 1fr; } .footer-grid{ grid-template-columns: 1fr; gap:30px; } .float-call{ display:flex; } .float-whatsapp{ display:flex; } .hero-stat-row{ flex-direction:column; } .service-detail{ grid-template-columns: 1fr; text-align:center; } .service-detail-icon{ margin: 0 auto; } .service-detail-tags{ justify-content:center; } .cookie-banner-inner{ flex-direction:column; align-items:flex-start; } .compare-grid{ grid-template-columns: 1fr; } .compare-side{ aspect-ratio: 4/3; } .peb-gauge-wrap{ padding:28px 16px 24px; } .peb-bar{ font-size:12px; padding:10px 0; } .peb-marker{ width:28px; height:28px; } .peb-marker svg{ width:13px; height:13px; } } /* ===== Respect de la préférence "mouvement réduit" ===== */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } html.js-reveal .reveal{ opacity:1; transform:none; } } /* ========================================================================= SIMULATEUR PEB (page simulateur.html) Ajouté pour le bilan énergétique en ligne. Ces styles ne servent que sur la page simulateur.html — ils n'affectent aucune autre page. ========================================================================= */ .sim-section{ background: var(--color-bg); padding: 70px 24px 96px; } .sim-card{ max-width: 820px; margin:0 auto; background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 38px 40px; } .sim-prog{ height:6px; background: var(--color-border); border-radius:999px; overflow:hidden; } .sim-prog i{ display:block; height:100%; width:14%; background: var(--color-primary); border-radius:999px; transition: width .35s ease; } .sim-count{ font-size:13px; color: var(--color-text-light); margin:10px 0 26px; font-family: var(--font-heading); font-weight:600; letter-spacing:.04em; text-transform:uppercase; } .sim-step{ display:none; } .sim-step.is-active{ display:block; animation: sim-in .28s ease; } @keyframes sim-in{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} } .sim-q{ font-family: var(--font-heading); font-weight:700; font-size:22px; color: var(--color-secondary); margin-bottom:6px; } .sim-hint{ color: var(--color-text-light); font-size:14.5px; margin-bottom:22px; } .sim-opts{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } .sim-opt{ position:relative; } .sim-opt input{ position:absolute; inset:0; opacity:0; cursor:pointer; } .sim-opt span{ display:block; border:1.5px solid var(--color-border); border-radius: var(--radius-sm); padding:16px 14px; text-align:center; cursor:pointer; background: var(--color-bg); font-family: var(--font-heading); font-weight:600; font-size:15px; color: var(--color-secondary); transition: border-color .18s, background .18s, transform .18s; } .sim-opt span small{ display:block; font-family: var(--font-body); font-weight:400; font-size:12.5px; color: var(--color-text-light); margin-top:4px; } .sim-opt input:hover + span{ border-color: var(--color-accent); transform: translateY(-2px); } .sim-opt input:checked + span{ border-color: var(--color-primary); background: rgba(0,168,107,.08); } .sim-field{ margin-bottom:20px; } .sim-field label{ display:block; font-family: var(--font-heading); font-weight:600; font-size:14px; color: var(--color-secondary); margin-bottom:10px; } .sim-field input[type=text], .sim-field input[type=email], .sim-field input[type=tel]{ width:100%; border:1.5px solid var(--color-border); border-radius: var(--radius-sm); padding:13px 16px; font-family: var(--font-body); font-size:14.5px; color: var(--color-text); background: var(--color-bg); outline:none; transition: border-color .2s; } .sim-field input:focus{ border-color: var(--color-primary); } .sim-val{ font-family: var(--font-heading); font-weight:800; font-size:21px; color: var(--color-primary); } .sim-range{ width:100%; accent-color: var(--color-primary); } .sim-nav{ display:flex; gap:12px; margin-top:30px; } .sim-nav .btn{ flex:1; } .sim-nav .btn-dark-outline{ flex:0 0 auto; } .sim-check{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color: var(--color-text-light); margin-top:6px; } .sim-check input{ margin-top:3px; accent-color: var(--color-primary); flex:none; } .sim-err{ display:none; color:#D64545; font-size:14px; margin-top:12px; font-family: var(--font-heading); font-weight:600; } .sim-result{ display:none; border-top:1px solid var(--color-border); margin-top:34px; padding-top:34px; } .sim-result.visible{ display:block; animation: sim-in .4s ease; } .sim-peb{ display:flex; align-items:flex-start; justify-content:center; gap:22px; margin: 6px 0 26px; } .sim-letter{ width:82px; height:82px; border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; font-family: var(--font-heading); font-weight:800; font-size:38px; color:#fff; box-shadow: var(--shadow); } .sim-pebcap{ text-align:center; font-size:12.5px; color: var(--color-text-light); margin-top:8px; width:82px; } .sim-arrow{ font-size:26px; color: var(--color-text-light); line-height:82px; } .sim-kpis{ display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); margin-bottom:30px; } .sim-kpi{ background: var(--color-bg); border:1px solid var(--color-border); border-radius: var(--radius-sm); padding:20px 16px; text-align:center; } .sim-kpi b{ display:block; font-family: var(--font-heading); font-weight:800; font-size:24px; color: var(--color-primary); margin-bottom:4px; } .sim-kpi span{ font-size:13px; color: var(--color-text-light); } .sim-reco{ display:flex; gap:16px; align-items:flex-start; border:1px solid var(--color-border); border-radius: var(--radius-sm); padding:18px 20px; margin-bottom:12px; background: var(--color-bg); } .sim-rank{ flex:none; width:30px; height:30px; border-radius:50%; background: var(--color-secondary); color: var(--color-primary); font-family: var(--font-heading); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; } .sim-reco h4{ font-size:16.5px; margin-bottom:4px; } .sim-reco p{ font-size:14px; color: var(--color-text-light); margin:0; } .sim-reco em{ font-style:normal; font-family: var(--font-heading); font-weight:700; color: var(--color-primary); } .sim-note{ font-size:12.5px; color: var(--color-text-light); border-top:1px solid var(--color-border); margin-top:26px; padding-top:18px; line-height:1.7; } .sim-done{ display:none; text-align:center; padding:10px 0 0; } .sim-done.visible{ display:block; } .sim-done h3{ font-size:22px; margin-bottom:10px; color: var(--color-primary); } .sim-done p{ color: var(--color-text-light); font-size:15px; margin-bottom:20px; } @media (max-width: 760px){ .sim-card{ padding: 26px 20px; } .sim-q{ font-size:19px; } .sim-letter{ width:66px; height:66px; font-size:30px; } .sim-pebcap{ width:66px; } .sim-arrow{ line-height:66px; } .sim-nav{ flex-wrap:wrap; } } /* ========================================================================= AVIS CLIENTS (carrousel animé — page d'accueil) ========================================================================= */ .reviews{ background: var(--color-bg); overflow:hidden; } .rv-viewport{ position:relative; overflow:hidden; padding: 6px 0 4px; } .rv-track{ display:flex; gap:24px; transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; } .rv-card{ flex: 0 0 calc((100% - 48px) / 3); background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius: var(--radius); padding: 30px 28px 26px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:16px; transition: transform .3s ease, box-shadow .3s ease; } .rv-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); } .rv-quote{ width:34px; height:34px; color: var(--color-primary); opacity:.28; flex:none; } .rv-stars{ display:flex; gap:3px; } .rv-stars svg{ width:17px; height:17px; color:#F5A524; } .rv-text{ color: var(--color-text); font-size:15px; line-height:1.7; flex:1; } .rv-person{ display:flex; align-items:center; gap:13px; border-top:1px solid var(--color-border); padding-top:16px; } .rv-avatar{ width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color:#fff; font-family: var(--font-heading); font-weight:700; font-size:16px; } .rv-name{ font-family: var(--font-heading); font-weight:700; font-size:15px; color: var(--color-secondary); } .rv-meta{ font-size:13px; color: var(--color-text-light); } .rv-source{ margin-left:auto; font-size:11.5px; font-family: var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.03em; color: var(--color-text-light); border:1px solid var(--color-border); border-radius:999px; padding:4px 10px; } .rv-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:34px; } .rv-arrow{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--color-border); background: var(--color-bg-alt); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .2s; flex:none; } .rv-arrow svg{ width:19px; height:19px; color: var(--color-secondary); } .rv-arrow:hover{ background: var(--color-primary); border-color: var(--color-primary); } .rv-arrow:hover svg{ color:#fff; } .rv-dots{ display:flex; gap:9px; } .rv-dot{ width:9px; height:9px; border-radius:50%; background: var(--color-border); border:none; padding:0; cursor:pointer; transition: all .25s; } .rv-dot.active{ background: var(--color-primary); width:26px; border-radius:999px; } .rv-footer-note{ text-align:center; margin-top:30px; font-size:14.5px; color: var(--color-text-light); } .rv-footer-note a{ color: var(--color-primary); font-weight:600; } @media (max-width: 980px){ .rv-card{ flex: 0 0 calc((100% - 24px) / 2); } } @media (max-width: 760px){ .rv-card{ flex: 0 0 100%; } .rv-track{ gap:16px; } } /* ========================================================================= CERTIFICATIONS & MARQUES (page d'accueil) ========================================================================= */ .creds{ background: var(--color-bg-alt); border-top:1px solid var(--color-border); } .creds-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; margin-bottom:64px; } .cred-card{ background: var(--color-bg); border:1px solid var(--color-border); border-radius: var(--radius); padding: 28px 24px; text-align:center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .cred-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--color-primary); } .cred-icon{ width:56px; height:56px; margin: 0 auto 16px; border-radius:16px; background: rgba(0,168,107,.12); display:flex; align-items:center; justify-content:center; } .cred-icon svg{ width:27px; height:27px; color: var(--color-primary); } .cred-card h3{ font-size:16px; margin-bottom:7px; } .cred-card p{ font-size:13.5px; color: var(--color-text-light); line-height:1.6; } .creds-sep{ text-align:center; margin-bottom:34px; } .creds-sep h3{ font-family: var(--font-heading); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color: var(--color-text-light); } .brands-viewport{ position:relative; overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .brands-track{ display:flex; gap:18px; width:max-content; animation: brands-scroll 34s linear infinite; } .brands-viewport:hover .brands-track{ animation-play-state: paused; } @keyframes brands-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } .brand-chip{ flex:none; display:flex; align-items:center; justify-content:center; gap:10px; min-width:190px; height:82px; padding: 0 28px; background: var(--color-bg); border:1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight:700; font-size:17px; letter-spacing:.02em; color: var(--color-text-light); transition: color .25s, border-color .25s, background .25s; } .brand-chip:hover{ color: var(--color-secondary); border-color: var(--color-primary); background: var(--color-bg-alt); } .brand-chip img{ max-height:38px; width:auto; object-fit:contain; } .brand-chip small{ display:block; font-family: var(--font-body); font-weight:400; font-size:11.5px; letter-spacing:0; color: var(--color-text-light); margin-top:2px; } .creds-note{ text-align:center; margin-top:36px; font-size:13px; color: var(--color-text-light); } @media (prefers-reduced-motion: reduce){ .brands-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; } .brands-viewport{ -webkit-mask-image:none; mask-image:none; } } @media (max-width: 980px){ .creds-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .creds-grid{ grid-template-columns: 1fr; } .brand-chip{ min-width:158px; height:74px; font-size:15px; } }