/* ======================================================= L U C I E N — One-Page Theme (Folsom + Saira) ======================================================= */ /* ------------------ Palette / Tokens ------------------ */ :root{ --cyan: #50F5E6; --pink: #FF70E9; --violet: #6D4AFF; --text: #F2F6FA; --muted: #C7D0DE; --page-w: 1100px; --img-max: 520px; --iframe-max: 1080px; /* large players */ /* Décalage H2 (gauche) & H3 (droite) */ --h-shift: clamp(10px, 1.4vw, 22px); --h3-indent: clamp(12px, 1.4vw, 28px); /* Bandcamp heights */ --bc-chip-h: 46px; --bc-card-h: 120px; --bc-album-h: 208px; /* Voile (film assombrissant global) */ --veil: rgba(11, 13, 23, 0.22); /* Background image (global) */ --bg-image: url("https://dl.dropboxusercontent.com/scl/fi/xzdqsfwpq8syhahtaiasy/background.png?rlkey=fqdqxtquhxqy9mrdrviyx93si&raw=1"); } /* ---------------------- Reset ------------------------- */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* ---------------------- Fonts ------------------------- */ /* Folsom (local) pour titres, navbar, footer */ @font-face{ font-family: "Folsom"; src: url("fonts/folsom-black-web.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; font-synthesis: none; } /* ---------------------- Typography -------------------- */ /* Titres, navbar, footer en Folsom */ h1, h2, h3, #navbar, #navbar a, footer{ font-family: "Folsom", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 900; letter-spacing: .3px; line-height: 1.1; } .section h2{ margin-left: calc(-1 * var(--h-shift)); } .section h3{ padding-left: var(--h3-indent); } @media (max-width: 720px){ .section h2{ margin-left: 0; } .section h3{ padding-left: 0; } } /* Corps du texte en Saira (chargée via Google Fonts dans le ) */ p, li{ font-family: "Saira", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 400; letter-spacing: 0.1px; line-height: 1.6; font-size: 1.64rem; /* “Stroke” bleu électrique + léger relief */ text-shadow: 0 0.5px 0 rgba(80,245,230,.60), 0 -0.5px 0 rgba(80,245,230,.60), 0.5px 0 0 rgba(80,245,230,.60), -0.5px 0 0 rgba(80,245,230,.60), 0 3px 10px rgba(0,0,0,.28); } @supports (-webkit-text-stroke: 1px black){ p, li{ -webkit-text-stroke: 0.3px rgba(80,245,230,.75); text-shadow: 0 0 0.6px rgba(0,0,0,.22), 0 3px 10px rgba(0,0,0,.22); } } strong{ font-weight:700; } /* ------------------- Base elements ------------------- */ body{ margin:0; color:var(--text); line-height:1.65; /* Global background (image + veil) */ background: linear-gradient(var(--veil), var(--veil)), var(--bg-image); background-size: cover, cover; background-position: center center, center center; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; } img{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; } /* Containers */ .container{ width:min(var(--page-w), 92vw); margin-inline:auto; } .skip{ position:absolute; left:-10000px; } .skip:focus{ position:fixed; left:16px; top:16px; background:#fff; color:#000; padding:8px 12px; border-radius:8px; z-index:1001; } /* ----------------- Fixed Black Header ----------------- */ #navbar{ position:fixed; inset:0 0 auto 0; z-index:1000; background:#000; border-bottom:1px solid #1b1b1b; padding:14px 22px; } #navbar ul{ display:flex; gap:22px; justify-content:flex-end; list-style:none; margin:0; } #navbar a{ color:#f0f0f0; text-transform:uppercase; letter-spacing:.4px; padding:6px 8px; border-radius:8px; font-size:1rem; } #navbar a:hover{ color:var(--cyan); } #navbar a[aria-current="page"]{ color:var(--cyan); text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 620px){ #navbar ul{ overflow-x:auto; white-space:nowrap; padding-bottom:4px; } #navbar li{ display:inline-block; } } /* ----------------------- Hero ------------------------- */ .hero{ min-height:60vh; display:flex; align-items:center; justify-content:center; padding:110px 40px 40px; background: transparent; } @media (min-width:1400px){ .hero{ min-height:52vh; } } .hero .container, .hero .hero-inner{ width:min(var(--page-w), 92vw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; } .title-img,.lucien{ width: clamp(420px, 44vw, 820px); filter: drop-shadow(0 0 24px color-mix(in srgb, var(--cyan) 40%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--pink) 25%, transparent)); } .profile-img,.profile-pic{ width: min(30vw, 380px); height:auto; border:0; border-radius:12px; background:transparent; box-shadow:none; padding:0; } /* --------------------- Sections ----------------------- */ section{ padding:72px 0; scroll-margin-top:90px; } section + section{ border-top:0; } /* Grids */ .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 28px); } /* Wider media column when a player is present */ @supports(selector(.grid:has(.media-embed))){ .grid:has(.media-embed){ grid-template-columns: 1.62fr 1fr; } } /* Mobile */ @media (max-width:900px){ .grid{ grid-template-columns: 1fr; } } /* Titles + spacing (readability shadow) */ h2{ margin: 0 0 clamp(24px, 2.4vw, 40px); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); text-shadow: 0 2px 8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.35); } h3{ margin: 32px 0 clamp(24px, 2.4vw, 40px); font-size: clamp(1.15rem, 1.02rem + .8vw, 1.7rem); text-shadow: 0 2px 8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.35); } /* ------------------ Media (images) -------------------- */ .media{ display:flex; align-items:center; justify-content:center; } .media-img{ width:100%; max-width:var(--img-max); height:auto; margin:0 auto 20px; background:transparent; border:0; border-radius:12px; box-shadow:none; } .media-img--console{ max-width: 380px; width: min(58%, 380px); } /* ------------------ Media (iframes) ------------------- */ .bc-embed{ width: 100%; margin: 0; } .bc-embed iframe{ display:block !important; width:100% !important; border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:10px !important; } .bc-embed--chip iframe{ height: var(--bc-chip-h) !important; } .bc-embed--card iframe{ height: var(--bc-card-h) !important; } .bc-embed--album iframe{ height: var(--bc-album-h) !important; } .media-embed iframe, .embed iframe{ display:block !important; width:150% !important; max-width: var(--iframe-max) !important; aspect-ratio:16 / 9 !important; height:auto !important; margin:0 auto 20px !important; border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:8px !important; } /* ====== Techno layout & Bandcamp grid ====== */ .bc-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px 22px; align-items: start; margin: 6px 0 18px; } #techno .grid{ gap: clamp(28px, 4vw, 48px); align-items: start; } #techno h3{ margin: 40px 0 clamp(24px, 2.4vw, 40px); } /* -------------------- Gallery ------------------------ */ .gallery{ display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width:720px){ .gallery{ grid-template-columns: 1fr 1fr; } } .gallery img{ width:100%; height:auto; border-radius:12px; border:0; box-shadow:none; } /* ------------------- Contact / Links ------------------ */ #contact{ padding: 92px 0; } #contact .contact-lead{ font-size: 1.64rem; text-shadow: 0 3px 12px rgba(0,0,0,.45); } .links{ display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:0; margin:16px 0 0; } .links a{ color:var(--text); padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.12); font-size:1.96rem; } .links a:hover{ color:var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, rgba(255,255,255,.12)); } /* Bouton lien */ .btn-link{ display:inline-block; padding:12px 18px; border-radius: 14px; border:1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, var(--cyan), var(--pink)); color:#0b0d17; font-weight: 900; /* Folsom not applied here on purpose */ font-size: 1.24rem; text-shadow: none; box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18); transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; } .btn-link:hover{ transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 3px 10px rgba(0,0,0,.2); } .btn-link:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; } /* ----------------------- Footer ---------------------- */ footer,.footer{ text-align:center; padding:32px 0; color:var(--muted); border-top:1px solid rgba(255,255,255,.10); background:black; } /* ------------------ Small screens -------------------- */ @media (max-width:768px){ .hero{ padding: 90px 20px 30px; min-height:auto; } .hero .container,.hero .hero-inner{ flex-direction:column; align-items:flex-start; } .profile-img,.profile-pic{ width:min(85vw, 420px); } section{ padding:56px 0; } } /* -------------------- Reduced motion ----------------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .title-img,.lucien{ filter:none; } } /* ===================== SECTION BACKGROUNDS ===================== */ #services{ position: relative; padding: 120px 0; --services-img: url("https://dl.dropboxusercontent.com/scl/fi/kflmqr7hn8yvmwwkklq7t/emma_1D4.png?rlkey=7uz1wqai35i081kkhy61fvlf1&raw=1"); background-image: var(--services-img); background-size: cover; background-position: center 40%; background-repeat: no-repeat; } #services::before{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.46), rgba(0,0,0,.72)); } #services .container{ position: relative; z-index: 1; } #services h2, #services h3, #services p{ text-shadow: 0 3px 14px rgba(0,0,0,.70), 0 1px 2px rgba(0,0,0,.5); } #composition{ position: relative; background-image: url("https://dl.dropboxusercontent.com/scl/fi/bmif0et3ip5d9bppxjnf5/ns.jpg?rlkey=jo5by5149q9eovmrumvx09mwg&raw=1"); background-size: cover; background-position: center 45%; background-repeat: no-repeat; } #composition::before{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.50), rgba(0,0,0,.78)); } #composition .container{ position: relative; z-index: 1; } #composition h2, #composition h3, #composition p{ text-shadow: 0 3px 14px rgba(0,0,0,.70), 0 1px 2px rgba(0,0,0,.5); } /* ===== Captations (cards d’images cliquables) ===== */ /* ===== Captations (version sobre) ===== */ .capta-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; margin: 8px 0 18px; } /* ===== Captations — images statiques, sans crop ni animation ===== */ .capta-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; margin: 8px 0 18px; } .capta-card{ display: block; background: transparent; border: 0; border-radius: 0; /* remets 12px si tu veux des coins arrondis */ overflow: visible; /* aucune découpe */ box-shadow: none; /* pas d'ombre */ transition: none; /* pas d'animation */ } .capta-card img{ display: block; width: 84%; height: auto; /* respecte le ratio natif */ aspect-ratio: auto !important;/* force la suppression d'un éventuel ratio précédent */ object-fit: initial !important; } /* États interactifs : totalement neutres */ .capta-card:hover, .capta-card:focus, .capta-card:focus-visible{ outline: none; border: 0; box-shadow: none; filter: none; } /* ===== Contact — boutons image (Email/Instagram) ===== */ .contact-buttons{ display:flex; gap: clamp(14px, 3vw, 28px); flex-wrap:wrap; justify-content:center; align-items:center; margin-top: 22px; } .contact-btn{ display:inline-block; line-height:0; border: 0; background: transparent; border-radius: 12px; /* mets 0 si tu veux vraiment carré */ } .contact-btn img{ display:block; width: clamp(200px, 28vw, 300px); /* responsive, même “gabarit” */ height: auto; border-radius: 12px; } /* Aucune animation/effet : sobre */ .contact-btn:hover, .contact-btn:focus, .contact-btn:focus-visible{ outline: none; border: 0; box-shadow: none; filter: none; }