/*================================================== ATX MOTORSPORT Version : 1.0 ==================================================*/ /*========================= GOOGLE FONTS =========================*/ /* Polices chargées via dans le de chaque page (voir modèle head.html) — ne pas remettre le @import ici, cela chargerait les polices deux fois. */ /*========================= VARIABLES =========================*/ :root{ /* Couleurs */ --background:#090909; --surface:#121212; --surface-hover:#1B1B1B; --primary:#7E2323; --primary-light:#A03030; --text:#F3EFE7; --text-light:#D0CCC5; --border:#2A2A2A; --success:#2ECC71; --warning:#E67E22; --danger:#C0392B; /* Typographie */ --title-font:'Orbitron',sans-serif; --text-font:'Inter',sans-serif; /* Dimensions */ --container:1400px; --radius:12px; --transition:.30s ease; --shadow: 0 12px 30px rgba(0,0,0,.35); } /*========================= RESET =========================*/ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background:var(--background); color:var(--text); font-family:var(--text-font); font-size:16px; line-height:1.7; } /*========================= SCROLLBAR =========================*/ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:#0A0A0A; } ::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:50px; } ::-webkit-scrollbar-thumb:hover{ background:var(--primary-light); } /*========================= TYPOGRAPHIE =========================*/ h1,h2,h3,h4,h5{ font-family:var(--title-font); color:var(--text); letter-spacing:1px; margin-bottom:20px; } h1{ font-size:3.4rem; } h2{ font-size:2.5rem; } h3{ font-size:1.8rem; } p{ color:var(--text-light); margin-bottom:20px; } strong{ color:var(--text); } /*========================= WORDMARK (marque texte, utilisé dans header et footer) =========================*/ .wordmark{ display:inline-flex; align-items:baseline; gap:12px; font-family:'Anton',sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--text); transform:skewX(-8deg); transition:var(--transition); } .wordmark-accent{ color:var(--primary); } .wordmark-sub{ font-family:var(--title-font); font-weight:700; letter-spacing:3px; color:var(--text-light); text-transform:uppercase; } /*========================= LIENS =========================*/ a{ color:inherit; text-decoration:none; transition:var(--transition); } a:hover{ color:var(--primary-light); } /*========================= LISTES =========================*/ ul{ list-style:none; } /*========================= IMAGES =========================*/ img{ display:block; max-width:100%; } /*========================= CONTAINER =========================*/ .container{ width:min(95%,var(--container)); margin:auto; } /*========================= SECTIONS =========================*/ section{ padding:90px 0; } /*========================= BOUTON PRINCIPAL =========================*/ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 32px; border-radius:50px; background:var(--primary); color:white; font-weight:700; transition:var(--transition); border:none; cursor:pointer; } .btn:hover{ background:var(--primary-light); transform:translateY(-3px); box-shadow:var(--shadow); } /*========================= BOUTON OUTLINE =========================*/ .btn-outline{ background:none; border:2px solid var(--primary); color:var(--text); } .btn-outline:hover{ background:var(--primary); } /*========================= CARTE =========================*/ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; transition:var(--transition); } .card:hover{ transform:translateY(-5px); background:var(--surface-hover); border-color:var(--primary); } /*========================= TITRES DE SECTION =========================*/ .section-title{ text-align:center; margin-bottom:60px; } .section-title span{ color:var(--primary); } /*========================= SELECTION TEXTE =========================*/ ::selection{ background:var(--primary); color:white; } /*========================= RESPONSIVE =========================*/ @media(max-width:992px){ h1{ font-size:2.7rem; } h2{ font-size:2rem; } } @media(max-width:768px){ section{ padding:70px 0; } h1{ font-size:2.2rem; } h2{ font-size:1.8rem; } } /*================================================== HERO ==================================================*/ .hero{ min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:90px; background: radial-gradient(circle at top right, rgba(126,35,35,.20), transparent 40%), linear-gradient(180deg,#090909,#111111); } .hero-content{ display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:80px; } .hero-text h1{ font-size:4rem; line-height:1.2; margin:25px 0; } .hero-text h1 span{ color:var(--primary); } .hero-text p{ max-width:700px; font-size:1.15rem; } .tag{ display:inline-block; background:rgba(126,35,35,.15); border:1px solid var(--primary); color:var(--text); padding:8px 18px; border-radius:30px; text-transform:uppercase; font-size:.8rem; letter-spacing:1px; } .hero-buttons{ display:flex; gap:20px; margin-top:40px; flex-wrap:wrap; } .hero-logo{ display:flex; justify-content:center; } .hero-logo img{ width:420px; filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)); transition:.4s; } .hero-logo img:hover{ transform:scale(1.03); } /*================================================== VALEURS ==================================================*/ .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .icon{ font-size:3rem; margin-bottom:20px; } .card h3{ margin-bottom:15px; } /*================================================== VIDEO ==================================================*/ .video-box{ border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); } .video-box iframe{ width:100%; aspect-ratio:16/9; } /*================================================== CALL TO ACTION ==================================================*/ .cta{ background:linear-gradient(140deg,#161616,#101010); border:1px solid var(--border); border-radius:20px; padding:70px; text-align:center; } .cta h2{ margin-bottom:20px; } .cta p{ max-width:700px; margin:auto; margin-bottom:40px; } /*================================================== BANDE SLOGAN ==================================================*/ .tagline-strip{ padding:35px 0; background:var(--primary); } .tagline-strip p{ margin:0; text-align:center; color:white; font-family:var(--title-font); font-size:1.2rem; letter-spacing:1px; text-transform:uppercase; } /*================================================== RESPONSIVE INDEX ==================================================*/ @media(max-width:1100px){ .hero-content{ grid-template-columns:1fr; text-align:center; } .hero-logo{ order:-1; } .hero-text p{ margin:auto; } .hero-buttons{ justify-content:center; } .cards{ grid-template-columns:repeat(2,1fr); } } @media(max-width:700px){ .cards{ grid-template-columns:1fr; } .hero-text h1{ font-size:2.8rem; } .hero-logo img{ width:260px; } .cta{ padding:40px 25px; } }