/* Dionysian Industrial Complex - Main Stylesheet */ /* Font declarations */ @font-face { font-family: 'Harbour'; src: url('Harbour-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* CSS Variables */ :root { --header-font: 'Harbour', 'Courier New', monospace; --body-font: 'EB Garamond', serif; --primary-color: #A88B79; /* Muted Brown/Tan for borders */ --secondary-color: #8B4513; /* Saddle Brown for links/highlights */ --accent-color: #C06C3E; /* Copper/Orange-brown for accents */ --text-color: #43342A; /* Dark Warm Brown */ --background-color: #FAF8F0; /* Parchment */ --grid-color: rgba(67, 52, 42, 0.07); /* Subtle brown grid */ --hover-color: #C06C3E; /* Copper for interactions */ } /* Base styles */ body { font-family: var(--body-font); font-size: 18px; margin: 0; padding: 0; background-color: var(--background-color); color: var(--text-color); line-height: 1.7; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 25px 25px; } /* Language Content Visibility */ .show-en .lang-pt, .show-pt .lang-en { display: none; } /* Header styles */ header { background-color: transparent; padding: 2rem 0; border-bottom: 1px solid var(--primary-color); position: relative; text-align: center; } .logo-link { position: absolute; top: 1rem; left: 1rem; display: block; } .logo { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--primary-color); } header h1 { font-family: var(--header-font); font-size: 2.5rem; margin: 0; color: var(--secondary-color); text-transform: uppercase; letter-spacing: 0.2em; text-shadow: 1px 1px 2px rgba(168, 139, 121, 0.2); padding-top: 1rem; } /* New Language Switcher */ .language-switcher { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 1000; font-family: var(--header-font); } .language-switcher button { background: none; border: none; color: var(--primary-color); font-family: inherit; font-size: 1rem; cursor: pointer; padding: 0; text-transform: uppercase; } .language-switcher button.active { color: var(--secondary-color); text-decoration: underline; } .language-switcher span { color: var(--primary-color); margin: 0 0.25rem; } /* Navigation */ nav { background-color: transparent; padding: 1rem 0; } nav a { color: var(--secondary-color); text-decoration: none; font-family: var(--header-font); text-transform: uppercase; letter-spacing: 0.1em; position: relative; padding: 0.5rem 1rem; } nav a:hover { color: var(--hover-color); } /* Main content */ main { max-width: 1200px; margin: 0 auto; padding: 2rem; } /* Release grid */ .release-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; padding: 2rem 0; width: 100%; } .release-card { background-color: rgba(255, 255, 255, 0.5); border: 1px solid var(--primary-color); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; aspect-ratio: 1; box-shadow: 0 2px 5px rgba(67, 52, 42, 0.1); } .release-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(139, 69, 19, 0.2); } .release-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .release-card:hover img { transform: scale(1.05); } .release-card h3 { font-family: var(--header-font); margin: 0.5rem 0; color: var(--secondary-color); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; } .release-card .artist { color: var(--text-color); font-size: 0.9rem; margin: 0; text-align: center; } /* Release page specific styles */ .release-header { text-align: center; margin-bottom: 3rem; position: relative; } .release-header h2 { font-family: var(--header-font); font-size: 2.2rem; color: var(--secondary-color); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.2em; } .release-header p { font-family: var(--header-font); color: var(--primary-color); font-size: 1.2rem; margin: 0; text-transform: uppercase; letter-spacing: 0.1em; } .release-cover-image { margin-top: 2rem; } .release-cover-image img { max-width: 100%; max-height: 500px; height: auto; border: 1px solid var(--primary-color); } .release-content { max-width: 1000px; margin: 0 auto; padding: 2rem; background-color: rgba(255, 255, 255, 0.6); border: 1px solid var(--primary-color); position: relative; } .release-text { font-size: 1.15em; line-height: 1.8; } .release-content img { max-width: 100%; height: auto; margin: 2rem 0; border: 1px solid var(--primary-color); } .release-content p { margin: 1.5rem 0; } /* Bandcamp embed */ .bandcamp-embed { position: relative; padding-top: 86%; /* Approx aspect ratio for BC large embed without tracklist */ height: 0; overflow: hidden; max-width: 550px; margin: 2rem auto; background-color: rgba(255, 255, 255, 0.5); border: 1px solid var(--primary-color); } .bandcamp-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Footer */ footer { background-color: transparent; color: var(--primary-color); text-align: center; padding: 2rem 0; margin-top: 4rem; border-top: 1px solid var(--primary-color); position: relative; } /* Responsive design */ @media (max-width: 768px) { .logo-link { position: static; display: block; text-align: center; margin-bottom: 1rem; } header { padding-top: 1rem; } header h1 { font-size: 2rem; padding-top: 0; } .language-switcher { position: static; margin-bottom: 1rem; } .release-grid { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; } .release-card h3 { font-size: 1rem; } .release-card .artist { font-size: 0.8rem; } .release-header h2 { font-size: 1.8rem; } .release-content { padding: 1rem; } .release-text { font-size: 1em; } }