/* ========================================================================== DAWSON — site styles Edit the CSS variables below to change the whole site's theme quickly. BRAND FONT: Neue Haas Display Pro (75 Bold) is a paid font and is not loaded from a free CDN. Drop your licensed .woff2/.woff files into the fonts/ folder (or paste your Adobe Fonts kit in index.html's ) and this @font-face block will pick it up automatically. Until then the site falls back to Helvetica Neue/Arial, which is visually very close since Haas Grotesk/Display is the basis for Helvetica. ========================================================================== */ @font-face { font-family: 'Neue Haas Display Pro'; src: url('../fonts/NeueHaasDisplayPro-Bold.woff2') format('woff2'), url('../fonts/NeueHaasDisplayPro-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Dark mode (default) — pure black & white brand, accent = white. Visitors whose OS is set to light mode get the overridden values further down instead, via `prefers-color-scheme`; everything below is written against these variables so both themes stay in sync automatically. */ --bg: #000000; --bg-alt: #0d0d0d; --fg: #ffffff; --fg-muted: #9a9a9a; --accent: #ffffff; --on-accent: #000000; /* text/icon color placed ON TOP of --accent */ --border: rgba(255, 255, 255, 0.14); --header-glass: rgba(0, 0, 0, 0.35); /* sticky nav's frosted-glass tint */ --menu-glass: rgba(0, 0, 0, 0.55); /* dropdown menu's frosted-glass tint */ --logo-filter: none; /* logo files are white wordmarks; inverted in light mode below */ --font-display: 'Neue Haas Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Neue Haas Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; --max-width: 1180px; --nav-height: 150px; --logo-height: 124px; --topbar-height: 40px; } @media (prefers-color-scheme: light) { :root { /* Same pure black & white brand, inverted — accent becomes black so buttons stay black-on-white instead of white-on-black. */ --bg: #ffffff; --bg-alt: #f4f4f4; --fg: #111111; --fg-muted: #5c5c5c; --accent: #000000; --on-accent: #ffffff; --border: rgba(0, 0, 0, 0.12); --header-glass: rgba(255, 255, 255, 0.6); --menu-glass: rgba(255, 255, 255, 0.78); --logo-filter: invert(1); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ---------- Top social bar ---------- */ .top-bar { position: relative; z-index: 95; background: transparent; } .top-bar-inner { max-width: var(--max-width); margin: 0 auto; height: var(--topbar-height); padding: 0 24px; display: flex; align-items: center; justify-content: flex-end; } .top-bar .social-row { gap: 14px; } .top-bar .social-row a { width: 18px; height: 18px; /* Always sits over the hero photo (which stays dark-toned in both themes), so this is pinned to a fixed light color rather than the theme-aware --fg-muted variable. */ color: rgba(255, 255, 255, 0.75); } .top-bar .social-row a:hover { color: #ffffff; } .top-bar .social-row svg { width: 100%; height: 100%; } /* ---------- Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; /* Transparent by default — the frosted-glass look only appears when the dropdown (.nav-links) is open, since that's its own full-width panel. */ background: transparent; } .nav-inner { position: relative; max-width: var(--max-width); margin: 0 auto; height: var(--nav-height); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; height: 100%; z-index: 1; } .logo img { height: var(--logo-height); width: auto; /* Stays white while over the (always-dark) hero photo; once scrolled past it (body.past-hero, set by wireScrollTheme() in script.js), switches to the theme-aware --logo-filter — none in dark mode, invert(1) in light mode — so it's visible against a regular section's background too. */ filter: none; transition: filter 0.2s; } body.past-hero .logo img { filter: var(--logo-filter); } .nav-links { position: fixed; /* Starts flush with the very top of the viewport (not just below the nav) so its solid background covers the transparent top-bar/nav area too — otherwise whatever's scrolled behind them shows through as a gap above the menu. padding-top pushes the actual links down below that area. */ top: 0; left: 0; right: 0; /* Frosted-glass look: a translucent tint + blur (dark in dark mode, light in light mode via --menu-glass) so whatever's behind still shows through softly instead of a flat solid bar. */ background: var(--menu-glass); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; padding: calc(var(--topbar-height) + var(--nav-height) + 24px) 24px 24px; gap: 20px; order: 1; transform: translateY(-150%); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; } .nav-links.open { transform: translateY(0); opacity: 1; } .nav-links a { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--fg-muted); transition: color 0.2s; } .nav-links a:hover { color: var(--fg); } .nav-cta { order: 3; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; /* Stays off-white while over the hero; switches to the theme-aware --fg once scrolled past it (body.past-hero) — see .logo img above. */ color: rgba(255, 255, 255, 0.85); opacity: 0.85; transition: opacity 0.2s, color 0.2s; } body.past-hero .nav-cta { color: var(--fg); } .nav-cta svg { width: 100%; height: 100%; } .nav-cta:hover { opacity: 1; } .nav-toggle { display: flex; order: 0; /* Sits above .nav-links (which paints after it, being later in flex order) so the bars stay visible/clickable — to close the menu — even while it's open, instead of getting covered by its solid background. */ z-index: 2; background: none; border: none; width: 28px; height: 20px; flex-direction: column; justify-content: space-between; cursor: pointer; padding: 0; } .nav-toggle span { display: block; height: 2px; /* Stays off-white while over the hero; switches to the theme-aware --fg once scrolled past it (body.past-hero) — see .logo img above. */ background: rgba(255, 255, 255, 0.85); border-radius: 2px; transition: background 0.2s; } body.past-hero .nav-toggle span { background: var(--fg); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; /* Pull the section up behind the transparent top bar + nav so the photo reaches the very top of the page; padding-top pushes hero-content back down so buttons/logo land in the same place as before. */ margin-top: calc(-1 * (var(--topbar-height) + var(--nav-height))); padding-top: calc(var(--topbar-height) + var(--nav-height)); } .hero-bg { position: absolute; inset: 0; z-index: 0; /* Photo background with a dark gradient overlay so the logo/buttons stay readable. Swap the url() to use a different photo any time. */ background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.8) 100%), url('../img/hero.jpg') center 42%/cover no-repeat; } .hero-content { position: relative; z-index: 1; padding: 0 24px 96px; max-width: var(--max-width); margin: 0 auto; width: 100%; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 1; font-size: 20px; /* Fixed light color (not the theme-aware --fg-muted) since it always sits over the dark-toned hero photo in both light and dark mode. */ color: rgba(255, 255, 255, 0.85); animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 15px 32px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 999px; transition: transform 0.15s ease, background 0.2s, color 0.2s, border-color 0.2s; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); } .btn-primary:hover { background: var(--on-accent); color: var(--accent); } /* Hero's "Listen Now" sits over the (always-dark) hero photo, so it's pinned to the dark-theme look (white bg, black text) regardless of light/dark mode, rather than following --accent/--on-accent like other buttons. */ .btn-hero { background: #ffffff; color: #000000; border-color: #ffffff; } .btn-hero:hover { background: #000000; color: #ffffff; border-color: #ffffff; } .btn-ghost { border: 1px solid var(--fg); color: var(--fg); } .btn-ghost:hover { background: var(--fg); color: var(--bg); } .btn-outline { border: 1px solid var(--border); color: var(--fg); } .btn-outline:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } /* Hero "Listen Now" — slightly translucent so the photo behind it shows through */ #link-listen-now { background: rgba(255, 255, 255, 0.82); } #link-listen-now:hover { background: rgba(255, 255, 255, 0.95); } /* ---------- Sections ---------- */ .section { padding: 96px 0; } .section-alt { background: var(--bg-alt); } .section-title { font-family: var(--font-display); font-size: clamp(36px, 6vw, 56px); letter-spacing: 1px; margin: 0 0 8px; } .section-sub { color: var(--fg-muted); font-size: 16px; margin: 0 0 48px; } .section-cta { margin-top: 40px; } .button-row { display: flex; gap: 16px; flex-wrap: wrap; } /* ---------- Tour ---------- */ .tour-list { border-top: 1px solid var(--border); } .tour-row { display: flex; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .tour-thumb { width: 52px; height: 52px; /* 1:1 */ object-fit: cover; border-radius: 4px; flex-shrink: 0; } .tour-date { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; width: 140px; flex-shrink: 0; color: var(--accent); } .tour-details { flex: 1; min-width: 200px; } .tour-venue { font-weight: 600; font-size: 16px; } .tour-city { color: var(--fg-muted); font-size: 14px; margin-top: 2px; } .tour-location-link:hover { text-decoration: underline; } .tour-tickets { /* Filled button using the theme-aware accent — black in light mode, white in dark mode — matching the other solid buttons on the site. */ background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); padding: 10px 22px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; transition: background 0.2s, color 0.2s, border-color 0.2s; } .tour-tickets:hover { background: var(--on-accent); color: var(--accent); } .tour-tickets-none { /* Not a real link (Free/RSVP label) — stays unfilled/muted rather than picking up the solid black/white treatment above. */ background: none; color: var(--fg-muted); border-color: transparent; cursor: default; } .tour-tickets-none:hover { opacity: 1; background: none; color: var(--fg-muted); border-color: transparent; } .tour-empty { padding: 32px 0; color: var(--fg-muted); } /* ---------- Bio ---------- */ .bio-text { /* Same width as the tickets/dates sections (.tour-list has no max-width of its own, so it just fills .container) — no max-width here either. */ font-size: 17px; line-height: 1.7; color: var(--fg-muted); } /* ---------- Music (Spotify embeds) ---------- */ .spotify-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .spotify-embed-label { margin: 0 0 12px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); } .spotify-embed { display: block; width: 100%; border-radius: 12px; } /* ---------- Store ---------- */ .store-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .store-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 28px; } .store-card-art { height: 220px; border-radius: 8px; margin-bottom: 20px; } .store-art-merch { background: linear-gradient(135deg, #2a2a2a, #000000); } .store-art-digital { background: linear-gradient(135deg, #4a4a4a, #000000); } .store-card h3 { font-size: 20px; margin: 0 0 8px; } .store-card p { color: var(--fg-muted); font-size: 14px; margin: 0 0 20px; } /* Merch card now embeds live Shopify Buy Button product widgets instead of a single "Shop Merch" link — see #store script in index.html. */ .store-buy-buttons { display: flex; gap: 24px; } .product-block { flex: 1; min-width: 0; } .product-gallery { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #0d0d0d; margin-bottom: 16px; } .gallery-image { width: 100%; height: 100%; object-fit: cover; } .gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .gallery-arrow:hover { background: rgba(0, 0, 0, 0.8); } .gallery-prev { left: 10px; } .gallery-next { right: 10px; } .pw-title { font-family: 'Neue Haas Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 600; color: #ffffff; font-size: 17px; margin-bottom: 4px; } .pw-price { color: #9a9a9a; font-size: 14px; margin-bottom: 12px; } .pw-option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .pw-option-label { color: #9a9a9a; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 2px; } .pw-swatch { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer; padding: 0; box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.15s; } .pw-swatch:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); } .pw-swatch.active { box-shadow: 0 0 0 2px #ffffff; } .pw-pill { font-family: 'Neue Haas Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all 0.15s; } .pw-pill:hover { border-color: #ffffff; } .pw-pill.active { background: #ffffff; color: #000000; border-color: #ffffff; } .pw-pill.pw-disabled, .pw-pill:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; } .pw-pill.pw-disabled:hover, .pw-pill:disabled:hover { border-color: rgba(255, 255, 255, 0.35); } .pw-add-btn { font-family: 'Neue Haas Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; background: #ffffff; color: #000000; border: none; border-radius: 999px; padding: 12px 24px; cursor: pointer; margin-top: 4px; transition: background 0.15s; } .pw-add-btn:hover:not(:disabled) { background: #e6e6e6; } .pw-add-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pw-status { margin-top: 10px; font-size: 13px; color: #9a9a9a; } .pw-cart-link { color: #ffffff; text-decoration: underline; } .pw-loading, .pw-error { color: #9a9a9a; font-size: 14px; } /* ---------- Video ---------- */ .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .video-card { } .video-thumb-wrap { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; } .video-thumb-wrap iframe { width: 100%; height: 100%; border: 0; } .video-thumb-wrap { cursor: pointer; } .video-thumb-img { width: 100%; height: 100%; object-fit: cover; } .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; pointer-events: none; transition: transform 0.15s ease; } .video-play-btn svg { width: 100%; height: 100%; } .video-thumb-wrap:hover .video-play-btn { transform: translate(-50%, -50%) scale(1.08); } .video-title { margin-top: 12px; font-size: 15px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Feed ---------- */ .insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .insta-tile { aspect-ratio: 1 / 1; border-radius: 6px; background: linear-gradient(135deg, #1c1c1c, #0a0a0a); display: flex; align-items: center; justify-content: center; color: var(--fg-muted); font-size: 20px; transition: opacity 0.2s; } .insta-tile:hover { opacity: 0.8; } /* ---------- Newsletter / Footer ---------- */ .site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 96px 0 48px; } .newsletter { text-align: center; max-width: 560px; margin: 0 auto 80px; } .newsletter-form { display: flex; gap: 12px; margin-top: 8px; } .newsletter-form input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 15px 22px; color: var(--fg); font-size: 14px; font-family: var(--font-body); } .newsletter-form input:focus { outline: none; border-color: var(--accent); } .newsletter-note { color: var(--fg-muted); font-size: 12px; margin-top: 14px; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } .footer-logo { height: 44px; width: auto; margin: 0 auto; filter: var(--logo-filter); transition: filter 0.2s; } .footer-tagline { color: var(--fg-muted); margin: 4px 0 0; font-size: 14px; } .social-row { display: flex; gap: 20px; } .social-row a { width: 20px; height: 20px; color: var(--fg-muted); transition: color 0.2s; } .social-row a:hover { color: var(--fg); } .social-row svg { width: 100%; height: 100%; } .footer-copy { color: var(--fg-muted); font-size: 13px; margin: 12px 0 0; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .store-grid { grid-template-columns: 1fr; } .spotify-grid { grid-template-columns: 1fr; } .video-grid { grid-template-columns: repeat(2, 1fr); } .insta-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .nav-cta { display: none; } .top-bar-inner { justify-content: center; } :root { --nav-height: 108px; --logo-height: 84px; } .video-grid { grid-template-columns: 1fr; } .insta-grid { grid-template-columns: repeat(3, 1fr); } .tour-date { width: 100%; } .newsletter-form { flex-direction: column; } } @media (max-width: 520px) { .store-buy-buttons { flex-direction: column; } }