/* ========================================================================== Bleu Grave — single stylesheet To re-skin this template for another artist, change the tokens in :root (colors + fonts) and the Google Fonts in each page's . ========================================================================== */ :root { /* Color — near-black ground, one ice-blue accent (matches the band's logo and stage lighting — the "Bleu" is the brand) */ --bg: #0a0c0e; --bg-raised: #10161f; --bg-line: #1f2b3a; --ink: #e9edf2; --ink-dim: #97a3b4; --accent: #6fc2ff; /* ice blue — links, highlights */ --accent-dim: #2f6ea8; /* borders, hover ground */ --accent-deep: #0d2a45; /* glows, gradients, art fills */ /* Type — xerox-flyer system, like the band's tour posters: heavy block sans for display, typewriter mono for everything else */ --font-display: "Archivo Black", "Arial Black", sans-serif; --font-body: "Space Mono", "Courier New", monospace; /* Rhythm */ --space: 1rem; --space-lg: 3rem; --space-xl: 6rem; --measure: 42rem; --page-pad: clamp(1.25rem, 5vw, 3rem); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; /* Archivo Black only ships one (very heavy) weight */ line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; } h2 { font-size: clamp(1.4rem, 4vw, 2.1rem); margin-bottom: var(--space-lg); } h3 { font-size: 1rem; letter-spacing: 0.05em; } p { max-width: var(--measure); } p + p { margin-top: var(--space); } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--ink); } img, svg { max-width: 100%; display: block; } ::selection { background: var(--accent-dim); color: var(--ink); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* -------------------------------------------------------------------------- Header / nav -------------------------------------------------------------------------- */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--space); padding: 1.25rem var(--page-pad); } .site-header .wordmark { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--bg); background: var(--ink); padding: 0.2rem 0.5rem; white-space: nowrap; } .site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; } .site-nav a { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--ink-dim); } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--accent); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 92svh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: var(--space-xl) var(--page-pad); border-bottom: 1px solid var(--bg-line); } .hero-art { position: absolute; inset: -8%; /* bleed so parallax never shows edges */ z-index: 0; pointer-events: none; } .hero-art svg { width: 100%; height: 100%; } .hero-inner { position: relative; z-index: 1; } /* Boxed band name, like the inverted block on their tour posters */ .hero-title { display: inline-block; font-size: clamp(2rem, 9vw, 5.5rem); letter-spacing: 0.03em; background: var(--ink); color: var(--bg); padding: 0.1em 0.28em 0.14em; box-shadow: 0 0 90px var(--accent-deep); } .hero-tagline { margin: 1.5rem auto 0; font-size: clamp(0.95rem, 2.2vw, 1.15rem); color: var(--ink-dim); letter-spacing: 0.04em; } .hero-city { margin-top: 2.5rem; font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); } /* Smaller page-top banner for inner pages */ .page-hero { min-height: 45svh; } .page-hero .hero-title { font-size: clamp(1.7rem, 7vw, 3.8rem); } /* -------------------------------------------------------------------------- Sections -------------------------------------------------------------------------- */ .section { padding: var(--space-xl) var(--page-pad); border-bottom: 1px solid var(--bg-line); } .section-inner { max-width: 64rem; margin: 0 auto; } .section .kicker { font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } .lede { font-size: 1.15rem; } .muted { color: var(--ink-dim); } .button { display: inline-block; margin-top: var(--space-lg); padding: 0.8rem 1.6rem; border: 1px solid var(--accent-dim); font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: transparent; transition: border-color 150ms ease, background-color 150ms ease; } .button:hover { border-color: var(--accent); background: var(--accent-deep); color: var(--ink); } /* -------------------------------------------------------------------------- Photos — the About photo on the home page and the Photos page grid. Every photo is forced to black and white so the site stays one-color (xerox flyer) no matter what gets uploaded. -------------------------------------------------------------------------- */ .about-grid { display: grid; gap: var(--space-lg); align-items: start; } @media (min-width: 720px) { .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } .band-photo { border: 1px solid var(--bg-line); background: var(--bg-raised); } .band-photo img, .photo-grid img { width: 100%; height: auto; filter: grayscale(1) contrast(1.08); } .button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-lg); } .button-row .button { margin-top: 0; } .photo-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space); } @media (min-width: 600px) { .photo-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .photo-grid { grid-template-columns: 1fr 1fr 1fr; } } .photo-grid a { display: block; border: 1px solid var(--bg-line); background: var(--bg-raised); transition: border-color 150ms ease; } .photo-grid a:hover { border-color: var(--accent); } .photo-grid img { aspect-ratio: 1; object-fit: cover; } /* -------------------------------------------------------------------------- Music page -------------------------------------------------------------------------- */ .release { border: 1px solid var(--bg-line); background: var(--bg-raised); padding: var(--space-lg); margin-bottom: var(--space-lg); } .release .embed-slot { display: grid; place-items: center; min-height: 10rem; border: 1px dashed var(--accent-dim); color: var(--ink-dim); font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; padding: var(--space); margin-top: var(--space); } .listen-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: var(--space); } /* -------------------------------------------------------------------------- Merch page -------------------------------------------------------------------------- */ .merch-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 600px) { .merch-grid { grid-template-columns: 1fr 1fr; } } .product { border: 1px solid var(--bg-line); background: var(--bg-raised); } .product-art { aspect-ratio: 1; border-bottom: 1px solid var(--bg-line); overflow: hidden; } .product-art svg { width: 100%; height: 100%; } .product-info { padding: var(--space) 1.25rem 1.5rem; } .product-info .price { color: var(--ink-dim); margin-top: 0.25rem; } /* Store: the buy slot is empty (and takes no space) until js/shop.js mounts a Shopify buy button in it, or until a .buy-link is added. */ .product-info .buy-slot { margin-top: var(--space); } .product-info .buy-slot:empty { display: none; } .product-info .buy-link { margin-top: var(--space); } /* -------------------------------------------------------------------------- Events page -------------------------------------------------------------------------- */ /* Event rows in the band's tour-poster style: DATE ······················· CITY with venue, note, and ticket link on the line below. */ .event-list { list-style: none; } .event { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--bg-line); } .event-date { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .event-leader { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--accent-dim); transform: translateY(-0.3em); } .event-city { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; } .event-detail { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.5rem; color: var(--ink-dim); font-size: 0.85rem; } .event.past { opacity: 0.55; } .event.past .event-date { color: var(--ink-dim); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { padding: var(--space-lg) var(--page-pad) var(--space-xl); text-align: center; } .footer-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; margin-bottom: var(--space-lg); } .footer-links a { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ink-dim); } .footer-links a:hover { color: var(--accent); } .mailing-list { max-width: var(--measure); margin: 0 auto var(--space-lg); color: var(--ink-dim); } .copyright { color: var(--ink-dim); font-size: 0.9rem; } /* -------------------------------------------------------------------------- Motion — everything below only applies when js/main.js has confirmed that JS is running AND the visitor allows motion (html.js-motion). With JS off or reduced motion on, all content is fully visible and still. -------------------------------------------------------------------------- */ html.js-motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; } html.js-motion .reveal.is-visible { opacity: 1; transform: none; } html.js-motion .hero-art { will-change: transform; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js-motion .reveal { opacity: 1; transform: none; transition: none; } }