/* * Complete style.css for JN Studio website * Includes: * - Basic reset and base styles * - Ambient studio light effect (subtly reactive base + visible reactive box-shadows) * - Visual elements (guitar pick, vinyl, visualizer, slider) * - Navigation styles (desktop/mobile, active state) * - Page layout and transition * - Card styles (base, album/track specifics, animation) * - Form elements (contact page) * - Utilities */ :root { --shadow: rgba(0,0,0,0.15); /* Base shadow for elements */ /* --- Reactive Variables derived from JS analysis (Set by script.js on ) --- */ /* JS sets --light-pulse-raw-strength on :root (or html element) from 0 (silence) to approx 1 (max sound amplitude mapped to 1) */ --light-pulse-raw-strength: 0; /* Initial/resting value set by JS stopAnimationLoop */ /* Map raw strength (0-1) to visual properties for shadows/effects */ /* Adjusted values for better visibility assuming raw_strength might go up to ~0.3-0.5, but formula works for 0-1 range */ /* Shadow blur/spread size: from 2px (quiet) to 20px (peak at raw_strength=~0.3) */ /* Calc: 2px + var(...) * (20-2)/0.3 = 2 + var * 60 */ --shadow-reactive-size: calc(2px + var(--light-pulse-raw-strength, 0) * 60px); --shadow-reactive-size-subtle: calc(1px + var(--light-pulse-raw-strength, 0) * 40px); /* Slightly smaller multiplier */ /* Shadow opacity: from 0.2 (quiet) to 0.8 (peak at raw_strength=~0.3) */ /* Calc: 0.2 + var(...) * (0.8-0.2)/0.3 = 0.2 + var * 2.0 */ --shadow-reactive-opacity-amplified: calc(0.2 + var(--light-pulse-raw-strength, 0) * 2.0); /* Clamp the amplified opacity to be between 0 (or minimal) and 1 */ --shadow-reactive-opacity-clamped: max(0.05, min(1, var(--shadow-reactive-opacity-amplified, 0.05))); /* Min opacity at least 0.05 */ /* Variables for the static base shadows (distinct from reactive glow) */ --card-base-shadow-blur: 10px; --card-base-shadow-spread: 0px; --card-base-shadow-color: rgba(0, 0, 0, 0.4); /* Variables for Header Static Shadow Size - using generic reactive ones for pulsing part */ --header-static-shadow-size: 5px; --header-static-shadow-color: rgba(0, 0, 0, 0.5); --header-static-shadow-blur: 8px; /* Base blur for header static shadow */ --header-static-shadow-spread: 0px; /* Base spread for header static shadow */ } /* Reset & base */ * { margin:0; padding:0; box-sizing:border-box; } body { background: #111827; /* gray-900 - Main background behind everything */ color: #f3f4f6; /* gray-100 */ position: relative; /* Needed for ambient light positioning */ min-height: 100vh; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; overflow-x: hidden; padding-bottom: 8rem; /* Add padding bottom to body equal to player height */ } .nav-link { font-family: 'Tagesschrift', sans-serif; /* Optionnel : Ajuster la graisse si besoin */ /* font-weight: 700; */ /* Optionnel : Ajuster la taille si la police est trop grande/petite */ /* font-size: 1.1rem; */ } header h1, /* Titre "ROCK STUDIO" dans l'en-tête */ #landing-page h1, /* Titre sur la page d'accueil */ #home-page .text-3xl, /* Titre "Bienvenue au..." */ main h2.glow, /* Titres de page principaux (Discographie, À propos, Contact) */ main h3.glow /* Titres de section (Dernières sorties, Photos Wall, Le Studio, Équipement...) */ { font-family: 'Tagesschrift', sans-serif; /* Optionnel : Ajuster la graisse (souvent les titres sont déjà en gras via Tailwind 'font-bold') */ font-weight: 700; /* Optionnel : Ajuster l'espacement des lettres */ letter-spacing: 0.05em; } /* Ambient studio light (Base layer - subtle fixed visual effect behind content) */ .studio-light { position:absolute; top:0; left:0; right:0; bottom:0; background: radial-gradient(circle at 50% 0%, rgba(239,68,68,0.15), transparent 60%); /* Subtle base red glow */ opacity: 1; /* Fixed opacity, reactivity via box-shadows on other elements */ pointer-events:none; z-index:-1; transition: none; } /* Guitar pick icon */ .guitar-pick { width:30px; height:30px; background:#f59e0b; clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); } /* Glow & pulse */ .glow { text-shadow:0 0 10px rgba(245,158,11,0.7), 0 0 15px rgba(239,68,68,0.5); } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; }} .pulse { animation: pulse 2s infinite; } /* Page fade animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }} .page-transition { animation: fadeIn 0.5s ease; } /* Vintage border effect */ .vintage-border { position: relative; border: 1px solid rgba(239,68,68,0.2); } /* Vinyl & visualizer styles */ .vinyl { position:relative; width:200px; height:200px; border-radius:50%; background:linear-gradient(45deg,#111827 0%, #1f2937 100%); box-shadow:0 0 20px rgba(0,0,0,0.8), inset 0 0 15px rgba(0,0,0,0.5), 0 8px 15px rgba(0,0,0,0.4); transition:transform .5s ease-in-out; border: 8px solid #000; overflow: hidden; } .vinyl::before { content:''; position:absolute; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; background:#ef4444; border:8px solid #1f2937; z-index:1;} .vinyl::after { content:''; position:absolute; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; background:#111827; z-index:2;} .vinyl-label { position:absolute; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; color:white; display:flex; align-items:center; justify-content:center; font:bold 16px 'Impact', sans-serif; text-align:center; line-height:1.2; z-index:3; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);} @keyframes rotate { from{transform:translate(-50%,-50%) rotate(0);} to{transform:translate(-50%,-50%) rotate(360deg);} } .playing .vinyl { animation: rotate 2s linear infinite; } .audio-visualizer { display:flex; align-items:flex-end; gap:2px; height:30px;} .visualizer-bar { width:4px; background:linear-gradient(to top,#f59e0b,#ef4444); border-radius:1px; transition:height .1s ease-out;} /* Custom EQ slider */ .eq-slider { -webkit-appearance:none; appearance: none; width:100%; height:6px; background:#374151; border-radius:3px; outline:none; opacity: 0.8; transition: opacity 0.2s ease;} .eq-slider:hover { opacity: 1; } .eq-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance: none; width:16px; height:16px; background:#f59e0b; border-radius:50%; cursor:pointer; border: 2px solid #111827; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: transform 0.2s ease;} .eq-slider::-moz-range-thumb { width:16px; height:16px; background:#f59e0b; border-radius:50%; cursor:pointer; border: 2px solid #111827; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: transform 0.2s ease;} .eq-slider::-webkit-slider-thumb:hover { transform: scale(1.1); } .eq-slider::-moz-range-thumb:hover { transform: scale(1.1); } .eq-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid #ef4444; outline-offset: 3px; } .eq-slider:focus-visible::-moz-range-thumb { outline: 2px solid #ef4444; outline-offset: 3px; } /* Navigation Styles */ .nav-link { transition: color 0.2s ease;} .nav-link:hover { color: #d97706; } .nav-link.active-nav { color:#f59e0b; border-bottom: 2px solid #f59e0b; font-weight: bold; } /* Lyrics container */ .lyrics-container { max-height:300px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#f59e0b #374151; background: #1f2937; padding: 1rem; border-radius: 0.5rem; transition: opacity 0.3s ease; } .lyrics-container::-webkit-scrollbar { width:8px; } .lyrics-container::-webkit-scrollbar-track { background:#374151; border-radius:4px;} .lyrics-container::-webkit-scrollbar-thumb { background:#f59e0b; border-radius:4px; } .lyrics-container::-webkit-scrollbar-thumb:hover { background:#d97706; } /* --- Card Styles - Base appearance + reactive shadows --- */ /* Keyframes for JS-controlled animation */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }} .animated-fade-up { opacity: 0; animation: fadeUp 0.6s forwards; } /* Base card appearance (Applied to any element with class="card") */ /* This background is OPAQUE and covers the light behind it */ .card { background: #1f2937; /* Gray-800 */ border-radius: 0.5rem; overflow: hidden; /* Crucial for border-radius */ padding: 1.5rem; /* Default card padding */ /* --- Box-Shadows Applied to all .card elements --- */ /* Combined static and reactive box-shadows. Reactive listed first to be "on top". */ box-shadow: /* Reactive Amber Shadow */ 0 0 var(--shadow-reactive-size) var(--shadow-reactive-size-subtle) rgba(245, 158, 11, var(--shadow-reactive-opacity-clamped)), /* Reactive Red Shadow */ 0 0 calc(var(--shadow-reactive-size) * 0.8) calc(var(--shadow-reactive-size-subtle) * 0.8) rgba(239, 68, 68, calc(var(--shadow-reactive-opacity-clamped) * 0.7)), /* Base Static Shadow */ 0 4px var(--card-base-shadow-blur) var(--card-base-shadow-spread) var(--card-base-shadow-color); /* Transition property for the box-shadow and transform for hover effect */ transition: transform 0.3s ease, box-shadow 0.1s ease-out; /* box-shadow transition matches JS update freq */ } /* Card Hover State - Reactive shadow keeps pulsing, static shadow gets stronger */ /*.card:hover { transform: scale(1.03); / * Slightly larger on hover * / /*box-shadow: / * Reactive shadows remain the same, using the updated variable * / 0 0 var(--shadow-reactive-size) var(--shadow-reactive-size-subtle) rgba(245, 158, 11, var(--shadow-reactive-opacity-clamped)), 0 0 calc(var(--shadow-reactive-size) * 0.8) calc(var(--shadow-reactive-size-subtle) * 0.8) rgba(239, 68, 68, calc(var(--shadow-reactive-opacity-clamped) * 0.7)), / * Stronger static shadow on hover for visual pop-out * / 0 8px 15px rgba(0,0,0,0.6); }*/ /* --- Specific Card Types / Layout Overrides --- */ /* Style for album/EP/single cards in Discography lists (#album-list, #ep-single-list) */ /* These elements MUST have BOTH '.card' and '.album-item' classes in HTML */ .album-item.card { /* Inherits base card appearance (background, border-radius, reactive shadow, transition) from .card */ /* Adds specific layout for these grid items: max-width and centering */ max-width: 300px; /* --- HERE IS THE WIDTH LIMIT --- */ margin-left: auto; /* Center within the grid column */ margin-right: auto; cursor: pointer; /* Indicates the card itself is clickable (for navigation) */ /* Can override padding if needed differently than .card base padding */ /* padding: 1rem; */ /* Ensure no conflicts or unwanted styles. Reactive shadow already comes from .card. */ /* If a *different* reactive shadow intensity/color/spread is wanted for these specific cards, it would be redefined here. */ /* Example if wanting slightly less pulse only on album-items: */ box-shadow: 0 0 var(--shadow-reactive-size) var(--shadow-reactive-size-subtle) rgba(245, 158, 11, calc(var(--shadow-reactive-opacity-clamped) * 0.8)), /* Slightly reduced multiplier */ 0 0 calc(var(--shadow-reactive-size) * 0.8) calc(var(--shadow-reactive-size-subtle) * 0.8) rgba(239, 68, 68, calc(var(--shadow-reactive-opacity-clamped) * 0.6)), /* Reduced */ 0 4px var(--card-base-shadow-blur) var(--card-base-shadow-spread) var(--card-base-shadow-color); /* Static remains */ } /* Style for 'Latest Releases' cards on the Home page */ /* These elements should have BOTH '.card' and '.album-card' classes in HTML */ .album-card.card { /* Inherits base .card styles */ padding: 1rem; /* Adjust padding as needed for layout on home page */ text-align: center; position: relative; /* Needed for the absolute play button positioning */ padding-bottom: 3rem; /* Space for the absolute button */ /* Reactive shadow is inherited from .card */ } .album-item.card:hover, .album-card.card:hover { /* background-color: red !important; */ /* Commente/supprime le test de fond rouge */ transform: translateY(-20px) rotate(2deg) !important; /* Valeurs fortes + !important */ /* Garde l'ombre pour voir si elle change */ box-shadow: 0 0 var(--shadow-reactive-size) var(--shadow-reactive-size-subtle) rgba(245, 158, 11, var(--shadow-reactive-opacity-clamped)), 0 0 calc(var(--shadow-reactive-size) * 0.8) calc(var(--shadow-reactive-size-subtle) * 0.8) rgba(239, 68, 68, calc(var(--shadow-reactive-opacity-clamped) * 0.7)), 0 8px 15px rgba(0,0,0,0.6); } /* Style for Track List rows (in 'All Tracks' and Album Detail page) */ /* These elements should have BOTH '.card' and '.track-row' classes in HTML */ .track-row.card { /* Override .card default background if a different semi-transparent bg is wanted for rows */ background: rgba(31, 41, 55, 0.8); /* Slightly more transparent gray */ border-radius: 0.5rem; margin-bottom: 0.5rem; padding: 0.75rem; cursor: pointer; /* Standard row spacing/padding */ /* Inherits base .card styles */ /* Optionally redefine box-shadow if you want a different reactive effect JUST for track rows */ /* Example to only show reactive shadow on hover or with less intensity: */ box-shadow: /* Base Static Shadow might not be needed/wanted on rows */ /* Base reactive pulse with reduced opacity compared to generic .card? */ 0 0 var(--shadow-reactive-size) var(--shadow-reactive-size-subtle) rgba(245, 158, 11, calc(var(--shadow-reactive-opacity-clamped) * 0.5)), /* Reduce peak opacity */ 0 0 calc(var(--shadow-reactive-size) * 0.8) calc(var(--shadow-reactive-size-subtle) * 0.6) rgba(239, 68, 68, calc(var(--shadow-reactive-opacity-clamped) * 0.3)); /* Reduce more */ transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.1s ease-out; } /* Track Row Hover State */ .track-row.card:hover { background-color: rgba(55, 65, 81, 0.6); transform: translateX(5px); /* Static shadow on hover + Reactive */ box-shadow: 0 0 var(--shadow-reactive-size) var(--shadow-reactive-size-subtle) rgba(245, 158, 11, var(--shadow-reactive-opacity-clamped)), 0 0 calc(var(--shadow-reactive-size) * 0.8) calc(var(--shadow-reactive-size-subtle) * 0.8) rgba(239, 68, 68, calc(var(--shadow-reactive-opacity-clamped) * 0.7)), 3px 3px 8px rgba(0,0,0,0.3); /* Subtle static shadow on hover */ } /* Form Elements (Contact page) */ input[type="text"], input[type="email"], select, textarea { background-color: rgba(55, 65, 81, 0.5); border: 1px solid #4b5563; border-radius: 0.5rem; padding: 0.5rem 1rem; color: #f3f4f6; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Focus State with reactive glow */ input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus { outline: none; border-color: #f59e0b; /* Base fixed focus ring + Reactive glow */ box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5), 0 0 var(--shadow-reactive-size-subtle) 0px rgba(245, 158, 11, calc(var(--shadow-reactive-opacity-clamped) * 0.8)); transition: border-color 0.2s ease, box-shadow 0.1s ease-out; /* Fast transition for shadow pulse */ } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%2D%22292.4%22%3E%3Cpath%20fill%3D%22%23f3f4f6%22%20d%3D%22M287%2C197.9L145.2%2C56.4c-3.5-3.5-8-5.4-12.5-5.4s-9.1%2C1.8-12.6%2C5.3L5.5%2C197.9c-3.5%2C3.5-5.4%2C8-5.5%2C12.5s1.8%2C9%2C5.3%2C12.5c3.5%2C3.5%2C8%2C5.4%2C12.5%2C5.4s9-1.9%2C12.5-5.5l109.3-109L262%2C225.5c3.5%2C3.5%2C8%2C5.4%2C12.5%2C5.4c4.5%2C0%2C9.1-1.8%2C12.6-5.3%C2%B0c3.5-3.5%2C5.4-8%2C5.5-12.5S290.5%2C201.5%2C287%2C197.9z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 0.7rem top 50%; background-size: 0.65rem auto;} /* Fixed Player Bar at Bottom */ .fixed.bottom-0.left-0.right-0.bg-gray-800.border-t.border-gray-700 { background: #1f2937; border-top: 1px solid #4b5563; z-index: 40; /* Static shadow on top + Reactive shadow */ box-shadow: 0 -5px 15px rgba(0,0,0,0.3), 0 0 var(--shadow-reactive-size) var(--shadow-reactive-size-subtle) rgba(245, 158, 11, calc(var(--shadow-reactive-opacity-clamped) * 0.7)), 0 0 calc(var(--shadow-reactive-size) * 0.8) calc(var(--shadow-reactive-size-subtle) * 0.8) rgba(239, 68, 68, calc(var(--shadow-reactive-opacity-clamped) * 0.5)); transition: box-shadow 0.1s ease-out; } /* --- Header Style with Reactive Shadow --- */ header { /* Your existing Tailwind/base styles for background, border, padding etc. */ position: sticky; top: 0; z-index: 50; background: rgba(31, 41, 55, 0.9); /* bg-gray-800 at 90% opacity */ border-bottom: 1px solid #4b5563; /* border-gray-700 */ /* Box-Shadow for Header */ box-shadow: /* Static shadow below header for visual lift */ 0 var(--header-static-shadow-size) var(--header-static-shadow-blur) var(--header-static-shadow-spread) var(--header-static-shadow-color), /* Reactive Glow Below Header - Uses reactive variables */ 0 10px var(--shadow-reactive-size) var(--shadow-reactive-size-subtle) rgba(245, 158, 11, calc(var(--shadow-reactive-opacity-clamped) * 0.6)), 0 8px calc(var(--shadow-reactive-size) * 0.8) calc(var(--shadow-reactive-size-subtle) * 0.6) rgba(239, 68, 68, calc(var(--shadow-reactive-opacity-clamped) * 0.4)); /* Add Transition to box-shadow */ transition: box-shadow 0.1s ease-out; } /* Utility - Hidden Class */ .hidden { display:none !important; } /* Media Queries */ .desktop-nav { display: none; } .mobile-nav { display: block; } @media (min-width: 768px) { .desktop-nav { display: flex !important; } .mobile-nav { display: none !important; } /* Tailwind md: utility recreation if needed globally */ .flex-col.md\:flex-row { flex-direction: row; } .md\:w-1\/2 { width: 50%; } .md\:w-1\/3 { width: 33.333%; } .md\:w-2\/3 { width: 66.666%; } .grid.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gap-8 { gap: 2rem; } .mb-12 { margin-bottom: 3rem; } } /* Mobile Specific Adjustments */ @media (max-width: 767px) { /* Adjust reactive shadow intensity for smaller screens */ :root { --shadow-reactive-size: calc(1px + var(--light-pulse-raw-strength, 0) * 40px); --shadow-reactive-size-subtle: calc(0.5px + var(--light-pulse-raw-strength, 0) * 30px); /* Maintain a good visible range for opacity on mobile */ --shadow-reactive-opacity-amplified: calc(0.15 + var(--light-pulse-raw-strength, 0) * 2.2); /* Adjusted slightly */ --shadow-reactive-opacity-clamped: max(0.1, min(1, var(--shadow-reactive-opacity-amplified, 0.1))); /* Min opacity slightly higher */ } /* Player specific padding bottom adjustment on mobile */ body { padding-bottom: 10rem; } /* Header Mobile Adjustments if needed (adjust offsets/spread if base values too big) */ header { box-shadow: 0 calc(var(--header-static-shadow-size) * 0.8) calc(var(--shadow-reactive-size) * 0.5) calc(var(--shadow-reactive-size-subtle) * 0.3) rgba(0,0,0,0.3), /* Adjusted static + pulse base */ 0 8px calc(var(--shadow-reactive-size) * 0.8) calc(var(--shadow-reactive-size-subtle) * 0.6) rgba(245, 158, 11, calc(var(--shadow-reactive-opacity-clamped) * 0.6)), 0 6px calc(var(--shadow-reactive-size) * 0.6) calc(var(--shadow-reactive-size-subtle) * 0.4) rgba(239, 68, 68, calc(var(--shadow-reactive-opacity-clamped) * 0.4)); transition: box-shadow 0.1s ease-out; } }