/* ============================================================ SUPRADRAMA — GLOBAL.CSS Thème par défaut : CRIMSON ROSE (cohérent avec studio/merch) ============================================================ */ /* ------------------------------- RESET & TYPO --------------------------------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ font-size:16px; scroll-behavior:smooth; } body{ font-family:'Poppins', sans-serif; color: var(--text); min-height:100vh; line-height:1.6; overflow-x:hidden; padding-top: var(--header-h); /* Fond moderne en CSS pur */ background: radial-gradient(1200px 800px at 20% 15%, color-mix(in srgb, var(--g1) 30%, transparent), transparent 60%), radial-gradient(900px 700px at 80% 30%, color-mix(in srgb, var(--g2) 26%, transparent), transparent 65%), radial-gradient(700px 600px at 50% 80%, rgba(255,255,255,.08), transparent 70%), linear-gradient(160deg, var(--g3) 10%, color-mix(in srgb,var(--g2) 22%, black) 40%, #0b0b10 100%); background-attachment:fixed; } /* ------------------------------- THEME TOKENS --------------------------------- */ :root{ --header-h: calc(72px + env(safe-area-inset-top)); /* Couleurs (Crimson Rose) */ --g1:#ff7a9e; /* lumière (rose corail) */ --g2:#ff4d6d; /* accent (rouge-rose) */ --g3:#1a0b0f; /* base/profondeur (bordeaux/noir rosé) */ --text:#fff6f8; /* UI */ --accent-color:#ff4d6d; --accent-hover:#ff7a9e; --menu-bg-color: rgba(15,10,15,.95); --menu-text-color:#fff6f8; --burger-color:#fff; /* Layout */ body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.9; mix-blend-mode:soft-light; background: radial-gradient(900px 560px at 55% 45%, color-mix(in srgb,var(--g1) 22%, transparent), transparent 78%), radial-gradient(700px 480px at 20% 70%, color-mix(in srgb,var(--g2) 16%, transparent), transparent 80%); } /* Option: thèmes alternatifs (ajouter la classe sur ) */ .theme--midnight{ --g1:#4ef2ff; --g2:#7a7aff; --g3:#0b1426; --text:#e7faff; --accent-color:#4ef2ff; --accent-hover:#a9b6ff; } .theme--amber{ --g1:#ffcf91; --g2:#ff9d57; --g3:#2a1510; --text:#fff9f0; --accent-color:#ff9d57; --accent-hover:#ffd0a4; } /* ------------------------------- CONTAINER --------------------------------- */ .container{ width:min(92%,1200px); margin-inline:auto; position:relative; z-index:1; } /* ------------------------------- HEADER / NAV --------------------------------- */ /* Logo centrée */ /* Burger (sans bordure, même rendu partout) */ /* état X */ /* Overlay pour fermeture externe */ /* Menu plein écran */ /* ------------------------------- LINKS & BUTTONS --------------------------------- */ a{ color: var(--accent-color); text-decoration:none; transition: color .2s ease; } a:hover{ color: var(--accent-hover); } /* Boutons globaux alignés au style Merch (“Collection”) */ .btn, .cta{ display:inline-block; color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background: linear-gradient(90deg, var(--g1), var(--g2)); padding:.8rem 1.6rem; border-radius:999px; border:none; box-shadow: 0 6px 20px rgba(255,77,109,.35); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn:hover, .cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,77,109,.45); filter:brightness(1.04); } /* Variante contour (optionnel) */ .btn--ghost, .cta--ghost{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.32); box-shadow:none; } .btn--ghost:hover{ border-color: rgba(255,255,255,.6); } /* ------------------------------- FOOTER --------------------------------- */ footer{ width:100%; background:#000; color:rgba(255,255,255,.65); text-align:center; font-size:.75rem; padding:20px; position:relative; z-index:1; } footer::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background: linear-gradient(90deg, var(--accent-color), var(--accent-hover)); } footer .follow-us{ margin-top:10px; } footer .follow-us a{ color:#fff; font-weight:700; margin-left:10px; } footer .follow-us a:hover{ color: var(--accent-hover); } /* ------------------------------- UTILITAIRES --------------------------------- */ .container--narrow{ width:min(92%,900px); } .text-center{ text-align:center; } .mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; } .mb-1{ margin-bottom:1rem; } .mb-2{ margin-bottom:2rem; } .mb-3{ margin-bottom:3rem; } .p-1{ padding:1rem; } .p-2{ padding:2rem; } .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ------------------------------- RESPONSIVE --------------------------------- */ @media (max-width:768px){ .btn,.cta{ font-size:.9rem; padding:.7rem 1.3rem; } } /* ------------------------------- ACCESSIBILITÉ / MOTION --------------------------------- */ :focus-visible{ outline:2px dashed rgba(255,255,255,.6); outline-offset:3px; } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }