/* Site-wide styles for damianwinterbottom.com This is a placeholder for now. Next step: the full CSS from the v3.html mockup (the :root variables, nav, hero, about, music, projects, bio, contact, and footer sections) gets moved into this file so it's enqueued properly instead of living inline in a single HTML mockup. */ :root { --midnight: #080D1A; --midnight-2: #0C1224; --midnight-3: #10182E; --midnight-4: #16203A; --midnight-5: #1C2845; --teal: #2DD4A0; --teal-dim: #1DA07A; --teal-faint: rgba(45,212,160,0.07); --teal-faint2: rgba(45,212,160,0.13); --white: #F4F7FF; --white-dim: #A8B4D0; --white-muted: #5A6A8A; --nav-h: 72px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* IMPORTANT - read before adding new selectors for elements: Elementor injects a global rule `.elementor-kit-7 a { color: ...; font: ...; }` site-wide (WordPress adds the "elementor-kit-7" class to automatically). That selector's specificity is (class + element) = 0,1,1 - higher than a plain single class like `.foo { color: ... }` (0,1,0), so Elementor wins regardless of load order. Any new custom link style needs the SAME "class + element" shape to compete - write it as `a.foo` instead of `.foo` whenever the rule sets color/font on an anchor. This bit us on .nav-logo, .back-link, .sr-link, .stream-link, .next-arrow, and .btn-primary - all fixed below. Keep this pattern for front-page.php, archive-projects.php, and page-*.php templates too. SECOND PART OF THE SAME ISSUE: Elementor also defines a global `a:hover` state (color change + a "lift" transform animation). Pseudo-classes count toward specificity, so `.elementor-kit-7 a:hover` (0,2,1) beats a plain `.foo:hover` (0,1,1) too - same fix, write `a.foo:hover`. But even once the specificity is fixed, if OUR :hover rule doesn't mention `transform` at all, Elementor's transform still applies unopposed (cascade resolves color and transform as separate properties, not as a package). So every custom :hover rule below explicitly sets `transform: none;` unless the design actually wants a hover transform (e.g. .next-arrow's intentional slide). */ html { scroll-behavior: smooth; } /* !important here is intentional and narrow - only on the two properties that were getting silently overridden by Elementor/theme CSS loading after ours. This is a safety net on top of the priority-999 enqueue fix in functions.php, not a substitute for it. */ html, body { opacity: 1 !important; visibility: visible !important; } body { background: var(--midnight) !important; color: var(--white) !important; font-family: 'DM Sans', sans-serif; font-weight: 300; line-height: 1.6; overflow-x: hidden; text-align: left; } /* Hello Elementor's own base style.css defaults to centered text as its "blank canvas" starting point (it expects Elementor to set alignment per-widget). With Elementor deactivated, nothing overrides that default anymore, so we set it explicitly here instead. */ h1, h2, h3, h4, h5, h6, p, div, section, article, ul, li, a { text-align: left; } /* ── NAV (shared across all pages) ── */ nav.site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 52px; z-index: 100; background: rgba(8,13,26,0.93); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(45,212,160,0.1); } /* WordPress shows a 32px-tall admin bar at the very top of the page for logged-in users (46px on narrow screens). It's fixed to the top too, so without this our nav sits underneath/overlapping it instead of right below it. Visitors who aren't logged in never see the admin bar at all, so this only affects you while you're logged in reviewing the site. */ body.admin-bar nav.site-nav { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar nav.site-nav { top: 46px; } } a.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 10px; transform: none; z-index: 101; /* stay above the mobile menu overlay */ position: relative; } a.nav-logo:hover { color: var(--white); font-family: 'Cormorant Garamond', serif; transform: none; } .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); } /* Hamburger toggle - hidden on desktop, shown via media query below */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; z-index: 101; padding: 0; } .nav-toggle span { display: block; width: 100%; height: 1.5px; background: var(--white); transition: transform 0.25s, opacity 0.2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-links { display: flex; gap: 36px; list-style: none; align-items: center; } .nav-links a { color: var(--white-dim); text-decoration: none; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; transition: color 0.2s; transform: none; } .nav-links a:hover { color: var(--teal); transform: none; } .nav-cta { padding: 9px 22px !important; border: 1px solid var(--teal); color: var(--teal) !important; border-radius: 2px; transform: none !important; } .nav-cta:hover { background: var(--teal-faint) !important; transform: none !important; } @media screen and (max-width: 860px) { .nav-toggle { display: flex; } .nav-links { display: flex !important; position: fixed !important; top: var(--nav-h) !important; left: 0 !important; right: 0 !important; height: calc(100vh - var(--nav-h)) !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 28px !important; background: #080D1A !important; padding: 44px 32px !important; margin: 0 !important; transform: translateX(100%) !important; transition: transform 0.3s ease !important; z-index: 9999 !important; width: 100vw !important; overflow-y: auto !important; } .nav-links.nav-open { transform: translateX(0) !important; } .nav-links li { width: 100%; } .nav-links a { font-size: 18px; display: block; padding: 8px 0; } .nav-cta { display: inline-block; margin-top: 8px; } body.admin-bar .nav-links { height: calc(100vh - var(--nav-h) - 32px) !important; top: calc(var(--nav-h) + 32px) !important; } } @media screen and (max-width: 782px) { body.admin-bar .nav-links { top: calc(var(--nav-h) + 46px); } } /* ── FOOTER (shared across all pages) ── */ footer.site-footer { padding: 36px 52px; border-top: 1px solid rgba(244,247,255,0.06); display: flex; justify-content: space-between; align-items: center; background: var(--midnight); } .footer-copy { font-size: 13px; color: var(--white-muted); } .footer-name { font-family: 'Cormorant Garamond', serif; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-muted); } /* ══════════════════════════════════════ SINGLE PROJECT TEMPLATE ══════════════════════════════════════ */ .project-hero { position: relative; height: 70vh; min-height: 520px; display: flex; align-items: flex-end; padding: 0 52px 72px; overflow: hidden; margin-top: var(--nav-h); } .hero-backdrop { position: absolute; inset: 0; background-size: cover; background-position: center 20%; filter: brightness(0.55) saturate(0.85); } .hero-teal-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8,13,26,0.7) 0%, rgba(16,40,60,0.4) 100%); } .hero-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,13,26,1) 0%, rgba(8,13,26,0.5) 40%, transparent 75%), linear-gradient(to right, rgba(8,13,26,0.6) 0%, transparent 60%); } .hero-content { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 52px; max-width: 1140px; width: 100%; margin: 0 auto; } .poster-wrap { flex-shrink: 0; width: 200px; transform: translateY(60px); } .poster-img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 3px; box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(45,212,160,0.15); display: block; background: var(--midnight-3); } .poster-placeholder { width: 100%; aspect-ratio: 2/3; background: linear-gradient(135deg, var(--midnight-3), var(--midnight-5)); border-radius: 3px; border: 1px solid rgba(45,212,160,0.2); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: var(--white-muted); text-align: center; padding: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .hero-info { flex: 1; padding-bottom: 4px; } a.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-muted); text-decoration: none; margin-bottom: 20px; transition: color 0.2s; } a.back-link:hover { color: var(--teal); transform: none; } a.back-link::before { content: '←'; font-size: 14px; } .project-type-badge { display: inline-block; padding: 5px 14px; background: var(--teal-faint2); border: 1px solid rgba(45,212,160,0.3); border-radius: 2px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; } .project-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 6vw, 80px); font-weight: 300; line-height: 0.95; letter-spacing: -0.02em; color: var(--white); margin-bottom: 20px; } .project-meta-row { display: flex; gap: 32px; flex-wrap: wrap; font-size: 13px; color: var(--white-muted); } .meta-item { display: flex; flex-direction: column; gap: 3px; } .meta-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-muted); } .meta-val { color: var(--white); font-size: 14px; } .project-body { max-width: 1140px; margin: 0 auto; padding: 100px 52px 120px; display: grid; grid-template-columns: 1fr 340px; gap: 80px; align-items: start; } .content-block { margin-bottom: 64px; } .block-label { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal); margin-bottom: 20px; } .block-label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--teal); } .synopsis-text { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; font-style: italic; color: var(--white-dim); line-height: 1.65; } .score-notes-text { font-size: 15px; color: var(--white-dim); line-height: 1.85; } .screenshots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .screenshot { aspect-ratio: 16/9; background: var(--midnight-3); overflow: hidden; border-radius: 2px; cursor: pointer; position: relative; } .screenshot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s, filter 0.3s; filter: brightness(0.88); } .screenshot:hover img { transform: scale(1.04); filter: brightness(1); } .project-video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 2px; overflow: hidden; } .project-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .player-block { background: var(--midnight-3); border: 1px solid rgba(45,212,160,0.12); border-radius: 4px; overflow: hidden; } .player-header { padding: 24px 28px; border-bottom: 1px solid rgba(244,247,255,0.06); display: flex; align-items: center; gap: 18px; } .player-album-art { width: 56px; height: 56px; background: var(--midnight-5); background-size: cover; background-position: center; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(45,212,160,0.15); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--white-muted); } .player-album-title { font-size: 15px; font-weight: 400; color: var(--white); margin-bottom: 3px; } .player-album-sub { font-size: 12px; color: var(--white-muted); } .player-tracks { padding: 8px 0; } .project-sidebar { position: sticky; top: 100px; } .sidebar-block { background: var(--midnight-2); border: 1px solid rgba(244,247,255,0.06); border-radius: 4px; overflow: hidden; margin-bottom: 20px; } .sidebar-block-title { padding: 16px 22px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white-muted); border-bottom: 1px solid rgba(244,247,255,0.06); } .sidebar-row { padding: 14px 22px; border-bottom: 1px solid rgba(244,247,255,0.05); display: flex; flex-direction: column; gap: 4px; } .sidebar-row:last-child { border-bottom: none; } .sr-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white-muted); } .sr-val { font-size: 14px; color: var(--white); } a.sr-link { font-size: 14px; color: var(--teal); text-decoration: none; transition: color 0.2s; } a.sr-link:hover { color: #38E8B0; transform: none; } .stream-links { display: flex; flex-direction: column; gap: 2px; } a.stream-link { display: flex; align-items: center; gap: 14px; padding: 14px 22px; color: var(--white-dim); text-decoration: none; font-size: 14px; transition: background 0.2s, color 0.2s; border-left: 2px solid transparent; } a.stream-link:hover { background: var(--midnight-3); color: var(--teal); border-left-color: var(--teal); transform: none; } .stream-icon { width: 28px; height: 28px; border: 1px solid rgba(244,247,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--white-muted); flex-shrink: 0; transition: border-color 0.2s, color 0.2s; } a.stream-link:hover .stream-icon { border-color: var(--teal); color: var(--teal); } .stream-arrow { margin-left: auto; font-size: 12px; opacity: 0; transition: opacity 0.2s; } a.stream-link:hover .stream-arrow { opacity: 1; } .sidebar-cta { background: var(--teal-faint); border: 1px solid rgba(45,212,160,0.18); border-radius: 4px; padding: 28px 24px; text-align: center; } .cta-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; color: var(--white); line-height: 1.3; margin-bottom: 10px; } .cta-body { font-size: 13px; color: var(--white-muted); line-height: 1.7; margin-bottom: 22px; } .btn-primary, a.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 24px; background: var(--teal); color: var(--midnight); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-decoration: none; border-radius: 2px; transition: background 0.2s; } .btn-primary:hover, a.btn-primary:hover { background: #38E8B0; transform: none; } .next-project { border-top: 1px solid rgba(244,247,255,0.06); background: var(--midnight-2); } .next-inner { max-width: 1140px; margin: 0 auto; padding: 64px 52px; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .next-label { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--white-muted); margin-bottom: 10px; } .next-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--white); margin-bottom: 6px; } .next-meta { font-size: 13px; color: var(--white-muted); } a.next-arrow { width: 56px; height: 56px; border: 1px solid rgba(45,212,160,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--teal); text-decoration: none; flex-shrink: 0; transition: background 0.2s, transform 0.2s; } a.next-arrow:hover { background: var(--teal-faint2); transform: translateX(4px); } @media (max-width: 900px) { .project-body { grid-template-columns: 1fr; gap: 40px; padding-top: 60px; } .screenshots-grid { grid-template-columns: 1fr; } .hero-content { flex-direction: column; align-items: flex-start; } .poster-wrap { transform: none; width: 140px; } } /* ══════════════════════════════════════ SHARED SECTION STYLES (home, about, music, projects archive, contact) ══════════════════════════════════════ */ .section-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; } .section-eyebrow::before { content: ''; display: block; width: 20px; height: 1px; background: var(--teal); } .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 4.2vw, 56px); font-weight: 300; line-height: 1.1; color: var(--white); margin-bottom: 32px; } /* ── HERO (homepage) ── */ .hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: flex-end; padding: 0 52px 88px; overflow: hidden; } .hero-photo { position: absolute; inset: 0; background-size: cover; background-position: var(--hero-pos-x, 50%) var(--hero-pos-y, 20%); transform: scale(1.03); transition: transform 8s ease-out; } .hero-photo.loaded { transform: scale(1); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,13,26,0.88) 45%, rgba(8,13,26,0.3) 100%), linear-gradient(to top, rgba(8,13,26,0.75) 0%, transparent 55%); } .hero-teal-wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(45,212,160,0.05) 0%, transparent 60%); } #waveCanvas { position: absolute; bottom: 0; left: 0; right: 0; height: 180px; width: 100%; opacity: 0.45; } .home-hero-content { position: relative; z-index: 2; max-width: 680px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal); margin-bottom: 24px; } .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--teal); } .hero-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(58px, 8vw, 118px); font-weight: 300; line-height: 0.92; letter-spacing: -0.02em; color: var(--white); margin-bottom: 30px; text-shadow: 0 2px 40px rgba(8,13,26,0.5); } .hero-name span { display: block; font-style: italic; color: rgba(244,247,255,0.75); } .hero-tagline { font-size: 15px; font-weight: 300; color: var(--white-dim); max-width: 440px; line-height: 1.8; margin-bottom: 44px; } .hero-tagline strong { color: var(--white); font-weight: 400; } .hero-ctas { display: flex; gap: 14px; align-items: center; } a.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border: 1px solid rgba(244,247,255,0.22); color: var(--white-dim); font-size: 13px; font-weight: 400; text-decoration: none; border-radius: 2px; transition: border-color 0.2s, color 0.2s; transform: none; } a.btn-ghost:hover { border-color: var(--teal); color: var(--teal); transform: none; } .hero-scroll { position: absolute; bottom: 36px; right: 52px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--white-muted); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; } .scroll-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--teal), transparent); animation: scrollDrop 2s ease-in-out infinite; } @keyframes scrollDrop { 0%, 100% { opacity: 0.3; transform: scaleY(0.7) translateY(-4px); } 50% { opacity: 1; transform: scaleY(1) translateY(0); } } /* ── ABOUT (homepage teaser + reel) ── */ .about-section { background: var(--midnight-2); padding: 120px 52px; } .about-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .reel-col { position: relative; } .reel-still { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center 30%; display: block; border-radius: 3px; filter: brightness(0.85); } .reel-play-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(8,13,26,0.3); border-radius: 3px; cursor: pointer; transition: background 0.25s; border: 1px solid rgba(45,212,160,0.2); } .reel-play-overlay:hover { background: rgba(8,13,26,0.15); } .play-ring { width: 68px; height: 68px; border: 1px solid var(--teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.25s, background 0.25s; background: rgba(8,13,26,0.4); } .reel-play-overlay:hover .play-ring { transform: scale(1.1); background: var(--teal-faint2); } .play-tri { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 18px solid var(--teal); margin-left: 4px; } .reel-tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244,247,255,0.7); } /* ── Video lightbox (About section showreel) ── */ .video-lightbox { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 40px; } .video-lightbox.open { display: flex; } .video-lightbox-backdrop { position: absolute; inset: 0; background: rgba(8,13,26,0.92); cursor: pointer; } .video-lightbox-inner { position: relative; z-index: 1; width: 100%; max-width: 960px; } .video-lightbox-embed { position: relative; width: 100%; aspect-ratio: 16/9; } .video-lightbox-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 4px; } .video-lightbox-close { position: absolute; top: -44px; right: 0; background: none; border: none; color: var(--white); font-size: 32px; line-height: 1; cursor: pointer; padding: 4px 10px; transition: color 0.2s; } .video-lightbox-close:hover { color: var(--teal); } .about-body { font-size: 15px; color: var(--white-dim); line-height: 1.88; margin-bottom: 20px; } .about-body strong { color: var(--white); font-weight: 400; } .stats-row { display: flex; gap: 0; margin-top: 40px; border-top: 1px solid rgba(244,247,255,0.07); padding-top: 36px; } .stat { flex: 1; padding-right: 28px; margin-right: 28px; border-right: 1px solid rgba(244,247,255,0.07); } .stat:last-child { border-right: none; margin-right: 0; padding-right: 0; } .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 44px; font-weight: 300; color: var(--teal); line-height: 1; margin-bottom: 6px; } .stat-label { font-size: 12px; color: var(--white-muted); } /* ── MUSIC (homepage + full /music/ page) ── */ .music-section { padding: 120px 52px; background: var(--midnight); } .music-inner { max-width: 1140px; margin: 0 auto; } .music-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; flex-wrap: wrap; gap: 20px; } .genre-tabs { display: flex; gap: 4px; background: var(--midnight-3); padding: 4px; border-radius: 4px; flex-wrap: wrap; } .genre-tab { padding: 8px 18px; font-size: 12px; font-weight: 400; letter-spacing: 0.05em; color: var(--white-muted); background: transparent; border: none; border-radius: 2px; cursor: pointer; transition: all 0.2s; font-family: 'DM Sans', sans-serif; } .genre-tab:hover { color: var(--white); } .genre-tab.active { background: var(--midnight-5); color: var(--teal); } .tracks-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .playlist-panel { display: none; } .playlist-panel.active { display: block; } .genre-sections-wrap { display: flex; flex-direction: column; gap: 56px; } .genre-section-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 300; font-style: italic; color: var(--white); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(244,247,255,0.08); } .track-row { display: flex; align-items: center; gap: 18px; padding: 18px 24px; background: var(--midnight-2); cursor: pointer; transition: background 0.2s; border-left: 2px solid transparent; border-radius: 2px; } .track-row:hover { background: var(--midnight-3); border-left-color: rgba(45,212,160,0.4); } .track-row.playing { background: var(--midnight-3); border-left-color: var(--teal); } .track-num-wrap { position: relative; width: 24px; flex-shrink: 0; } .track-num { font-size: 13px; color: var(--white-muted); font-variant-numeric: tabular-nums; transition: opacity 0.2s; } .track-row:hover .track-num { opacity: 0; } .track-play-btn { position: absolute; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; transition: opacity 0.2s; } .track-row:hover .track-play-btn { opacity: 1; } .mini-tri { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid var(--teal); margin-left: 2px; } .mini-pause { display: none; gap: 3px; } .mini-pause span { width: 3px; height: 11px; background: var(--teal); display: block; } /* Playing row: keep its button visible without needing hover, and swap the triangle for a pause icon. */ .track-row.playing .track-num { opacity: 0; } .track-row.playing .track-play-btn { opacity: 1; } .track-row.playing .mini-tri { display: none; } .track-row.playing .mini-pause { display: flex; } .track-info { flex: 1; min-width: 0; } .track-name { font-size: 15px; font-weight: 400; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .track-row.playing .track-name { color: var(--teal); } .track-genre { font-size: 12px; color: var(--white-muted); } .track-waveform { display: flex; align-items: center; gap: 2px; height: 28px; flex-shrink: 0; } .wbar { width: 2px; border-radius: 1px; background: rgba(45,212,160,0.22); transition: background 0.2s; } .track-row.playing .wbar { background: var(--teal); } .track-row.playing .wbar.ab { animation: wbPulse 0.7s ease-in-out infinite alternate; } @keyframes wbPulse { from { opacity: 0.3; transform: scaleY(0.35); } to { opacity: 1; transform: scaleY(1); } } .track-dur { font-size: 13px; color: var(--white-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; } .platforms { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(244,247,255,0.07); display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .platforms-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white-muted); white-space: nowrap; } .platform-links { display: flex; gap: 32px; flex-wrap: wrap; } a.platform-link { font-size: 13px; color: var(--white-muted); text-decoration: none; transition: color 0.2s; transform: none; } a.platform-link:hover { color: var(--teal); transform: none; } /* ── PROJECTS (homepage preview grid) ── */ .projects-section { padding: 120px 52px; background: var(--midnight-2); } .projects-inner { max-width: 1140px; margin: 0 auto; } .projects-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; flex-wrap: wrap; gap: 20px; } .projects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .project-card { position: relative; aspect-ratio: 2/3; background: var(--midnight-3); overflow: hidden; border-radius: 2px; display: block; text-decoration: none; } .project-img, .poster-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: rgba(164,180,208,0.18); text-align: center; padding: 16px; transition: transform 0.4s; background-size: cover; background-position: center; } .project-card:hover .project-img, .project-card:hover .poster-bg { transform: scale(1.04); } .project-overlay, .card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,13,26,0.96) 0%, rgba(8,13,26,0.55) 40%, transparent 100%); opacity: 0; transition: opacity 0.3s; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 18px; } .project-card:hover .project-overlay, .project-card:hover .card-overlay { opacity: 1; } .card-title { font-size: 15px; font-weight: 400; color: var(--white); margin-bottom: 5px; line-height: 1.3; } .project-type, .card-type { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); } .card-director { font-size: 12px; color: var(--white-muted); } .card-year { position: absolute; top: 14px; left: 14px; padding: 4px 10px; background: rgba(8,13,26,0.7); border: 1px solid rgba(244,247,255,0.1); border-radius: 2px; font-size: 11px; color: var(--white-muted); backdrop-filter: blur(4px); } .card-arrow { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border: 1px solid rgba(45,212,160,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--teal); opacity: 0; transform: translateY(-4px); transition: opacity 0.3s, transform 0.3s; } .project-card:hover .card-arrow { opacity: 1; transform: translateY(0); } /* ── PROJECTS ARCHIVE (/projects/ page) ── */ .page-header { padding: calc(var(--nav-h) + 80px) 52px 64px; max-width: 1140px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .page-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; } .page-eyebrow::before { content: ''; display: block; width: 20px; height: 1px; background: var(--teal); } .page-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(44px, 6vw, 80px); font-weight: 300; line-height: 0.95; letter-spacing: -0.02em; color: var(--white); } .page-title span { display: block; font-style: italic; color: var(--white-dim); } .project-count { font-size: 13px; color: var(--white-muted); margin-top: 18px; } .project-count strong { color: var(--teal); font-weight: 400; } .filter-bar { padding: 0 52px 52px; max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .filter-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-muted); margin-right: 4px; } .filter-tabs { display: flex; gap: 4px; background: var(--midnight-3); padding: 4px; border-radius: 4px; flex-wrap: wrap; } .filter-tab { padding: 8px 18px; font-size: 12px; font-weight: 400; color: var(--white-muted); background: transparent; border: none; border-radius: 2px; cursor: pointer; transition: all 0.2s; font-family: 'DM Sans', sans-serif; letter-spacing: 0.04em; } .filter-tab:hover { color: var(--white); } .filter-tab.active { background: var(--midnight-5); color: var(--teal); } .view-toggle { margin-left: auto; display: flex; gap: 2px; background: var(--midnight-3); padding: 4px; border-radius: 4px; } .view-btn { width: 36px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 2px; cursor: pointer; color: var(--white-muted); transition: all 0.2s; } .view-btn:hover { color: var(--white); } .view-btn.active { background: var(--midnight-5); color: var(--teal); } .view-btn svg { width: 14px; height: 14px; fill: currentColor; } .projects-container { padding: 0 52px 120px; max-width: 1140px; margin: 0 auto; } .grid-view { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .grid-view.hidden { display: none; } .list-view { display: none; flex-direction: column; gap: 2px; } .list-view.visible { display: flex; } .list-row { display: grid; grid-template-columns: 80px 1fr 160px 120px 80px; align-items: center; gap: 24px; padding: 20px 24px; background: var(--midnight-2); border-radius: 2px; cursor: pointer; transition: background 0.2s; text-decoration: none; border-left: 2px solid transparent; } .list-row:hover { background: var(--midnight-3); border-left-color: var(--teal); } .list-poster { width: 56px; height: 80px; background-size: cover; background-position: center; border-radius: 2px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 10px; color: var(--white-muted); text-align: center; padding: 4px; border: 1px solid rgba(244,247,255,0.06); } .list-title { font-size: 16px; font-weight: 400; color: var(--white); margin-bottom: 4px; transition: color 0.2s; } .list-row:hover .list-title { color: var(--teal); } .list-director { font-size: 13px; color: var(--white-muted); } .list-type { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); } .list-year { font-size: 14px; color: var(--white-muted); } .list-arrow { font-size: 16px; color: var(--white-muted); text-align: right; transition: color 0.2s; } .list-row:hover .list-arrow { color: var(--teal); } .list-header { display: grid; grid-template-columns: 80px 1fr 160px 120px 80px; gap: 24px; padding: 0 24px 14px; border-bottom: 1px solid rgba(244,247,255,0.07); margin-bottom: 2px; } .lh-cell { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-muted); } /* ── BIO TEASER (homepage, between Projects and Contact) ── */ .bio-teaser-section { padding: 100px 52px; background: var(--midnight); border-top: 1px solid rgba(244,247,255,0.06); border-bottom: 1px solid rgba(244,247,255,0.06); } .bio-teaser-inner { max-width: 760px; margin: 0 auto; text-align: center; } .bio-teaser-quote { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 3vw, 32px); font-weight: 300; font-style: italic; color: var(--white); line-height: 1.5; margin-bottom: 28px; } .bio-teaser-text { font-size: 15px; color: var(--white-dim); line-height: 1.8; margin-bottom: 32px; } .bio-teaser-section .btn-ghost { display: inline-flex; } /* ── BIO (full /about/ page) ── */ .bio-section { padding: 0; background: var(--midnight); overflow: hidden; } .bio-hero { position: relative; height: 70vh; min-height: 500px; display: flex; align-items: flex-end; padding: 0 52px 72px; overflow: hidden; } .bio-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center 15%; } .bio-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,13,26,0.95) 0%, rgba(8,13,26,0.4) 50%, rgba(8,13,26,0.2) 100%), linear-gradient(to right, rgba(8,13,26,0.3) 0%, transparent 60%); } .bio-hero-content { position: relative; z-index: 2; max-width: 700px; } .bio-hero-quote { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 3vw, 38px); font-weight: 300; font-style: italic; color: var(--white); line-height: 1.45; margin-bottom: 20px; } .bio-hero-attr { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); } .bio-body-section { padding: 100px 52px; } .bio-body-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 360px 1fr; gap: 90px; align-items: start; } .bio-photo-portrait { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top; border-radius: 3px; display: block; filter: brightness(0.92); } .bio-credentials { margin-top: 20px; border: 1px solid rgba(244,247,255,0.07); border-radius: 3px; overflow: hidden; } a.credential { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid rgba(244,247,255,0.06); font-size: 13px; text-decoration: none; transition: background 0.2s; transform: none; } a.credential:last-child { border-bottom: none; } a.credential:hover { background: var(--midnight-3); transform: none; } .credential-name { color: var(--white); } .credential-val { font-size: 12px; color: var(--teal); } .bio-text-col .section-title { margin-bottom: 24px; } .bio-body-text { font-size: 15px; color: var(--white-dim); line-height: 1.9; margin-bottom: 22px; } .bio-body-text strong { color: var(--white); font-weight: 400; } /* ── CONTACT (homepage + full /contact/ page) ── */ .contact-section { padding: 120px 52px; background: var(--midnight-2); } .contact-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; } .contact-body { font-size: 15px; color: var(--white-dim); line-height: 1.8; margin-bottom: 40px; } .contact-items { display: flex; flex-direction: column; } .contact-item { display: flex; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(244,247,255,0.06); font-size: 14px; } .contact-item:first-child { border-top: 1px solid rgba(244,247,255,0.06); } .contact-key { width: 90px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white-muted); flex-shrink: 0; } a.contact-val { color: var(--white); text-decoration: none; transition: color 0.2s; transform: none; } a.contact-val:hover { color: var(--teal); transform: none; } .socials { display: flex; gap: 10px; margin-top: 36px; } a.social-btn { width: 40px; height: 40px; border: 1px solid rgba(244,247,255,0.14); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--white-dim); text-decoration: none; transition: all 0.2s; transform: none; } a.social-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-faint); transform: none; } .contact-form { padding-top: 4px; } .form-group { margin-bottom: 22px; } .form-label { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white-muted); margin-bottom: 10px; } .form-input, .form-textarea { width: 100%; background: var(--midnight-3); border: 1px solid rgba(244,247,255,0.1); border-radius: 2px; color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 300; padding: 13px 16px; outline: none; transition: border-color 0.2s, background 0.2s; } .form-input:focus, .form-textarea:focus { border-color: var(--teal); background: var(--midnight-4); } .form-input::placeholder, .form-textarea::placeholder { color: var(--white-muted); } .form-textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .form-submit { width: 100%; padding: 15px; background: var(--teal); color: var(--midnight); border: none; border-radius: 2px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; transition: background 0.2s, transform 0.2s; } .form-submit:hover { background: #38E8B0; transform: none; } .form-success { background: var(--teal-faint2); border: 1px solid rgba(45,212,160,0.3); border-radius: 3px; padding: 16px 20px; color: var(--white); font-size: 14px; margin-bottom: 24px; } .form-error { background: rgba(220,80,80,0.1); border: 1px solid rgba(220,80,80,0.3); border-radius: 3px; padding: 16px 20px; color: var(--white); font-size: 14px; margin-bottom: 24px; } .grecaptcha-badge { visibility: hidden; } .recaptcha-disclosure { font-size: 11px; color: var(--white-muted); line-height: 1.6; margin-top: 16px; } .recaptcha-disclosure a { color: var(--white-muted); text-decoration: underline; } .recaptcha-disclosure a:hover { color: var(--teal); } @media (max-width: 900px) { .about-inner, .contact-inner, .bio-body-inner { grid-template-columns: 1fr; } .tracks-two-col, .projects-grid { grid-template-columns: 1fr 1fr; } .grid-view { grid-template-columns: 1fr 1fr; } .list-row, .list-header { grid-template-columns: 60px 1fr 90px; } .list-type, .lh-cell:nth-child(4) { display: none; } } /* ══════════════════════════════════════ PHONE-WIDTH BREAKPOINT (~phones, narrow tablets) Tighter padding, single-column grids, smaller headline sizing. ══════════════════════════════════════ */ @media (max-width: 600px) { .hero, .about-section, .music-section, .projects-section, .contact-section, .bio-teaser-section, .page-header, .filter-bar, .projects-container, .bio-body-section, .next-inner, .project-hero, .project-body { padding-left: 20px !important; padding-right: 20px !important; } nav.site-nav { padding: 0 20px; } footer.site-footer { padding: 28px 20px; flex-direction: column; gap: 8px; text-align: center; } /* Headline sizing - clamp() floors were tuned for tablet/desktop; these are explicit smaller sizes so nothing crowds a narrow phone screen. */ .hero-name { font-size: 44px; } .hero-photo { background-position: var(--hero-pos-x-mobile, var(--hero-pos-x, 50%)) var(--hero-pos-y-mobile, var(--hero-pos-y, 20%)); } .section-title { font-size: 28px; } .page-title { font-size: 40px; } .project-title { font-size: 32px; } .bio-hero-quote, .bio-teaser-quote { font-size: 20px; } /* Single-column everywhere a grid previously held 2+ columns, except the homepage/archive project cards which stay 2-up even on phones. */ .tracks-two-col, .screenshots-grid { grid-template-columns: 1fr; } .projects-grid { grid-template-columns: 1fr 1fr; gap: 2px; } /* Safety net: the track list was bleeding past the right edge on some screens - constrain every layer explicitly rather than relying on the parent's padding alone. */ .music-inner, .tracks-two-col, .playlist-panel, .genre-tabs, .track-row { max-width: 100%; overflow-x: hidden; box-sizing: border-box; } .stats-row { flex-direction: column; gap: 20px; } .stat { border-right: none; margin-right: 0; padding-right: 0; } /* Hero CTAs and music/projects headers stack instead of crowding a row */ .hero-ctas { flex-direction: column; align-items: stretch; } .hero-ctas a { justify-content: center; } .music-header, .projects-header { flex-direction: column; align-items: flex-start; } .genre-tabs { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 4px; } .genre-tab { text-align: center; } /* Project page hero: poster shrinks further, sits above the title info */ .hero-content { gap: 24px; } .poster-wrap { width: 110px; } .project-meta-row { gap: 18px; } /* Sidebar CTA/contact form breathing room on narrow screens */ .sidebar-cta, .contact-form { padding: 22px 18px; } /* Filter bar / view toggle wrap cleanly instead of overflowing */ .filter-bar { gap: 12px; } .view-toggle { margin-left: 0; } } @media (max-width: 420px) { /* Decorative waveform bars crowd the row at very narrow widths - title and duration are what actually matter here. */ .track-waveform { display: none; } } @media (max-width: 600px) { /* Homepage only (body.home is added automatically by WordPress for the site's front page) - cap the visible track list to 10 rows so the "All" tab doesn't turn into an endless scroll on a phone. The full list is still there underneath; rows past the 10th are just hidden. */ body.home .music-section .track-row:nth-child(n+11) { display: none; } }