/* Theme Name: Jordan McCullough Theme URI: https://jordanmcculloughofficial.com Author: Jeremy Marshall Author URI: https://jwm.nyc Description: Custom WordPress theme for Jordan McCullough. Gospel and worship vocalist, American Idol Season 24 Top 20 contestant. Multi-page artist site with hero video, Spotify embed, performance videos, booking inquiry form, and email capture. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: jordan-mccullough Tags: artist, music, custom, dark */ /* ==================================================================== JORDAN MCCULLOUGH: WordPress Theme Stylesheet Originally built as a static HTML prototype, ported to WordPress. Platform: WordPress 6.x with custom theme (no page builder required). ==================================================================== TABLE OF CONTENTS 01. Fonts 02. Design tokens (custom properties) 03. Reset & base 04. Typography base 05. Layout utilities (container, sections) 06. Reveal-on-scroll utility 07. Buttons 08. Forms 09. Eyebrow + utility text 10. Navigation (sticky, transparent-to-solid) 11. Hero (home + interior pages) 12. Streaming callout 13. Bio teaser + editorial split 14. Featured video block 15. Tour dates list 16. Photo grid 17. Release / album cards 18. Press quotes 19. EPK download block 20. Email capture band 21. Booking inquiry form 22. Contact form 23. Coming soon block (Shows/Shop) 24. Footer 25. Mobile menu overlay 26. Responsive breakpoints ==================================================================== */ /* ==================================================================== 01. FONTS Google Fonts loaded via in for performance. Fraunces: variable serif for display only Inter: variable sans for everything UI/body ==================================================================== */ /* ==================================================================== 02. DESIGN TOKENS All design decisions live here. Change a value, the whole site updates. ==================================================================== */ :root { /* ---- Color ---- Dark cinematic base + warm amber accent. Calibrated to feel like golden-hour stage lighting rather than digital blue. */ --color-bg: #0E0E10; /* Page background. Near-black with warm undertone. */ --color-surface: #18181B; /* Alternate sections, footer */ --color-surface-2: #232326; /* Cards, form inputs */ --color-border: rgba(255, 255, 255, 0.08); /* Hairline dividers only */ --color-border-strong:rgba(255, 255, 255, 0.16); --color-text: #F4F1EC; /* Body text. Warm off-white, not pure white. */ --color-text-muted: #A8A39B; /* Secondary text */ --color-text-subtle: #6B6660; /* Helper / captions */ --color-accent: #D4A574; /* Warm amber. CTAs, links, active state. */ --color-accent-hover: #E8B988; --color-accent-soft: rgba(212, 165, 116, 0.12); /* Soft accent backgrounds */ /* ---- Typography ---- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, sans-serif; /* ---- Type scale ---- Display sizes use clamp() for fluid responsive typography. */ --text-eyebrow: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: clamp(2rem, 4vw, 3rem); --text-4xl: clamp(2.5rem, 5vw, 4rem); --text-display: clamp(3rem, 8vw, 6rem); /* ---- Spacing ---- Set to reference median, not minimum. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-section: clamp(4rem, 8vw, 6rem); /* Vertical section padding */ --space-gutter: clamp(1.5rem, 4vw, 3rem); /* Horizontal page gutter */ /* ---- Layout ---- */ --max-width: 1280px; --max-text-width: 65ch; --nav-height: 76px; /* ---- Border radius ---- */ --radius-sm: 2px; /* Buttons, inputs. Sharp on purpose. */ --radius-md: 4px; --radius-lg: 8px; /* ---- Transitions ---- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --transition-fast: 0.15s var(--ease-out); --transition-base: 0.3s var(--ease-out); --transition-slow: 0.6s var(--ease-out); } /* ==================================================================== 03. RESET & BASE ==================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--color-bg); /* Prevents white flash before CSS loads */ } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* Prevent horizontal scroll from any rogue full-bleed element */ } img, video { max-width: 100%; display: block; height: auto; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-hover); } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ::selection { background-color: var(--color-accent); color: var(--color-bg); } /* ==================================================================== 04. TYPOGRAPHY BASE Display uses Fraunces. Body uses Inter. Weights deliberately light. ==================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.1; font-weight: 500; color: var(--color-text); letter-spacing: -0.01em; } h1 { font-size: var(--text-4xl); font-weight: 400; /* Display headings stay light per ref calibration */ line-height: 1.05; } h2 { font-size: var(--text-3xl); font-weight: 500; } h3 { font-size: var(--text-xl); font-weight: 500; font-family: var(--font-body); /* H3 drops to sans for hierarchy */ } p { max-width: var(--max-text-width); margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } em { font-style: italic; } /* ==================================================================== 05. LAYOUT UTILITIES Single source of truth: .container defines the gutter that ALL readable text aligns to. Full-bleed sections use .container inside. ==================================================================== */ .container { width: 100%; max-width: var(--max-width); margin-left: auto; margin-right: auto; padding-left: var(--space-gutter); padding-right: var(--space-gutter); } .section { padding-top: var(--space-section); padding-bottom: var(--space-section); } .section--alt { background-color: var(--color-surface); } /* Modifier: make a section 70% taller than standard. Use for hero-adjacent feature blocks that need extra breathing room (quotes, highlights, etc.). */ .section--tall { padding-top: calc(var(--space-section) * 1.7); padding-bottom: calc(var(--space-section) * 1.7); } .section__header { margin-bottom: var(--space-12); max-width: 720px; } .section__header--centered { text-align: center; margin-left: auto; margin-right: auto; } .section__title { margin-bottom: var(--space-4); } .section__lede { color: var(--color-text-muted); font-size: var(--text-lg); } /* Generic grid utilities. Used where a named component (e.g. .photo-grid) doesn't apply. Responsive behavior (further down): .grid--3 drops to 2-col at 1024px and 1-col at 768px; .grid--2 drops to 1-col at 768px. */ .grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } /* ==================================================================== 06. REVEAL-ON-SCROLL Subtle entry animation. Set on elements via class="reveal" and JS toggles data-revealed="true" when 15% in view. Per brief: subtle motion only. ==================================================================== */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .reveal[data-revealed="true"] { opacity: 1; transform: translateY(0); } /* Stagger for siblings inside a .reveal-stagger parent */ .reveal-stagger > .reveal:nth-child(2)[data-revealed="true"] { transition-delay: 80ms; } .reveal-stagger > .reveal:nth-child(3)[data-revealed="true"] { transition-delay: 160ms; } .reveal-stagger > .reveal:nth-child(4)[data-revealed="true"] { transition-delay: 240ms; } .reveal-stagger > .reveal:nth-child(5)[data-revealed="true"] { transition-delay: 320ms; } .reveal-stagger > .reveal:nth-child(6)[data-revealed="true"] { transition-delay: 400ms; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ==================================================================== 07. BUTTONS Primary: solid amber on dark. Secondary: outline. Ghost: text + arrow. Sharp corners (2px) on purpose. ==================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.875rem 1.75rem; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); border: 1px solid transparent; text-decoration: none; white-space: nowrap; } .btn:active { transform: translateY(1px); } /* Primary: main CTA */ .btn--primary { background-color: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } .btn--primary:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-bg); } /* Secondary: outline */ .btn--secondary { background-color: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .btn--secondary:hover { background-color: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } /* Ghost: minimal text + arrow */ .btn--ghost { background-color: transparent; color: var(--color-accent); padding: 0.5rem 0; border: none; border-radius: 0; } .btn--ghost::after { content: '→'; transition: transform var(--transition-fast); } .btn--ghost:hover { color: var(--color-accent-hover); } .btn--ghost:hover::after { transform: translateX(4px); } /* Sizing */ .btn--sm { padding: 0.625rem 1.25rem; font-size: 0.75rem; } .btn--lg { padding: 1.125rem 2.25rem; font-size: var(--text-base); } /* ==================================================================== 08. FORMS Dark inputs on dark bg. Hairline border. Amber on focus. ==================================================================== */ .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .form-field__label { font-family: var(--font-ui); font-size: var(--text-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); } .form-field__label .required { color: var(--color-accent); margin-left: 2px; } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 0.875rem 1rem; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), background-color var(--transition-fast); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--color-accent); background-color: var(--color-bg); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-text-subtle); } .form-field textarea { min-height: 140px; resize: vertical; font-family: var(--font-body); } .form-field--checkbox { flex-direction: row; align-items: flex-start; gap: var(--space-3); } .form-field--checkbox input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--color-accent); } .form-field--checkbox label { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; cursor: pointer; } /* ==================================================================== 09. EYEBROW + UTILITY TEXT ==================================================================== */ .eyebrow { display: inline-block; font-family: var(--font-ui); font-size: var(--text-eyebrow); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: var(--space-4); } .eyebrow--accent { color: var(--color-accent); } .text-muted { color: var(--color-text-muted); } .text-center { text-align: center; } /* ==================================================================== 10. NAVIGATION Sticky top. Transparent over hero, solid on scroll past 80px. Active state: amber text + underline. ==================================================================== */ .nav { position: fixed; /* fixed not sticky so the hero can sit underneath it */ top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); background-color: transparent; transition: background-color var(--transition-base), backdrop-filter var(--transition-base); } .nav[data-scrolled="true"] { background-color: rgba(14, 14, 16, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .nav__container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .nav__logo { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--color-text); text-decoration: none; letter-spacing: 0; line-height: 1; } .nav__logo:hover { color: var(--color-text); } .nav__menu { display: flex; align-items: center; gap: var(--space-8); } .nav__links { display: flex; align-items: center; gap: var(--space-6); } .nav__links a { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--color-text); text-decoration: none; letter-spacing: 0.02em; padding: var(--space-2) 0; position: relative; transition: color var(--transition-fast); } .nav__links a:hover { color: var(--color-accent); } /* Active state: amber text + thin underline */ .nav__links a.is-active { color: var(--color-accent); } .nav__links a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background-color: var(--color-accent); } .nav__socials { display: flex; align-items: center; gap: var(--space-4); } .nav__socials a { color: var(--color-text-muted); font-size: 1rem; line-height: 1; transition: color var(--transition-fast); } .nav__socials a:hover { color: var(--color-accent); } /* Hamburger toggle, hidden on desktop */ .nav__toggle { display: none; color: var(--color-text); font-size: 1.25rem; padding: var(--space-2); } /* ==================================================================== 11. HERO ==================================================================== */ /* HOME hero: full-bleed video, name + email signup overlay */ .hero { position: relative; min-height: 100vh; min-height: 100svh; /* small viewport unit, accounts for mobile chrome */ display: flex; align-items: flex-end; overflow: hidden; background-color: var(--color-bg); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* Overlay gradient for text legibility on top of video */ .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(14,14,16,0.5) 0%, rgba(14,14,16,0.2) 30%, rgba(14,14,16,0.85) 100%); } .hero__content { position: relative; z-index: 2; width: 100%; padding-bottom: var(--space-16); padding-top: calc(var(--nav-height) + var(--space-12)); } .hero__eyebrow { color: var(--color-accent); margin-bottom: var(--space-6); } .hero__name { font-family: var(--font-display); font-size: var(--text-display); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; margin-bottom: var(--space-6); max-width: 14ch; } .hero__tagline { font-size: var(--text-lg); color: var(--color-text); max-width: 36ch; margin-bottom: var(--space-10); line-height: 1.5; } .hero__signup { display: flex; gap: var(--space-3); max-width: 480px; margin-bottom: var(--space-8); } .hero__signup input { flex: 1; padding: 0.875rem 1rem; font-family: var(--font-body); font-size: var(--text-base); background-color: rgba(255, 255, 255, 0.08); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); backdrop-filter: blur(4px); } .hero__signup input::placeholder { color: var(--color-text-muted); } .hero__signup input:focus { outline: none; border-color: var(--color-accent); } .hero__scroll-affordance { position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%); z-index: 2; color: var(--color-text-muted); font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; } .hero__scroll-line { width: 1px; height: 32px; background: linear-gradient(to bottom, transparent, var(--color-text-muted)); } /* INTERIOR PAGE hero: shorter, just title and lede */ .page-hero { padding-top: calc(var(--nav-height) + var(--space-20)); padding-bottom: var(--space-16); background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); } .page-hero__eyebrow { color: var(--color-accent); } .page-hero__title { font-size: var(--text-4xl); font-weight: 400; margin-bottom: var(--space-6); max-width: 16ch; } .page-hero__lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 60ch; } /* ==================================================================== 12. STREAMING CALLOUT ==================================================================== */ .streaming { text-align: center; } .streaming__platforms { /* Desktop: flex row with justify-content: space-between. Buttons size to content, but first and last sit at the edges of a 720px container (matching .spotify-embed), with the remaining space distributed evenly between them. On mobile this collapses to a 2-column equal-width grid (see responsive section). */ display: flex; flex-wrap: nowrap; justify-content: space-between; gap: var(--space-3); max-width: 720px; margin-left: auto; margin-right: auto; margin-top: var(--space-8); } .streaming__platform { display: flex; align-items: center; justify-content: center; gap: var(--space-3); /* Horizontal padding bumped from 1.5rem to 2.25rem so desktop buttons are wider and the space-between gaps shrink to ~30-40% of what they were, while the row still spans the full 720px (matching .spotify-embed). Mobile is unaffected visually since buttons fill 1fr grid cells on that breakpoint. */ padding: 0.875rem 2.25rem; background-color: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-sm); font-weight: 500; transition: border-color var(--transition-fast), background-color var(--transition-fast); text-align: center; white-space: nowrap; } .streaming__platform:hover { border-color: var(--color-accent); color: var(--color-accent); background-color: var(--color-surface-2); } /* Spotify embed wrapper */ .spotify-embed { max-width: 720px; margin: 0 auto; border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-surface-2); border: 1px solid var(--color-border); } /* ==================================================================== 13. BIO TEASER + EDITORIAL SPLIT ==================================================================== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } /* Reverse variant: image moves to column 1 (left), text to column 2 (right). order: -1 pulls the media before the text in grid auto-placement. */ .split--reverse .split__media { order: -1; } .split__text > * + * { margin-top: var(--space-6); } .split__media { aspect-ratio: 4 / 5; background-color: var(--color-surface-2); border: 1px solid var(--color-border); overflow: hidden; position: relative; } .split__media img { width: 100%; height: 100%; object-fit: cover; } /* Modifier: anchor the image to the top of the container (face-preserving crop). Use when the default center crop cuts off something important at the top. */ .split__media--top img { object-position: center top; } /* ==================================================================== 14. FEATURED VIDEO BLOCK ==================================================================== */ .featured-video { position: relative; aspect-ratio: 16 / 9; width: 100%; background-color: var(--color-surface-2); overflow: hidden; display: block; /* so an variant fills the aspect-ratio box */ text-decoration: none; color: inherit; } .featured-video video, .featured-video iframe, .featured-video img { width: 100%; height: 100%; border: none; object-fit: cover; transition: transform var(--transition-base); } .featured-video:hover img { transform: scale(1.03); } /* Play-button overlay for click-through video thumbnails (used when a video cannot be embedded, e.g. American Idol clips with licensing restrictions, so we link out to YouTube instead). */ .featured-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: rgba(14, 14, 16, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 1.75rem; line-height: 1; padding-left: 4px; /* nudge the ▶ glyph so it looks optically centered */ transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .featured-video:hover .featured-video__play { background: var(--color-accent); color: var(--color-bg); transform: translate(-50%, -50%) scale(1.05); } .featured-video__caption { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); } /* ==================================================================== 15. TOUR DATES LIST Hairline-bordered rows, no card containers. ==================================================================== */ .tour-list { border-top: 1px solid var(--color-border); } .tour-list__row { display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--space-8); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); align-items: center; } .tour-list__date { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; color: var(--color-text); } .tour-list__date small { display: block; font-family: var(--font-ui); font-size: var(--text-eyebrow); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-top: var(--space-1); } .tour-list__venue { color: var(--color-text); font-weight: 500; } .tour-list__venue small { display: block; color: var(--color-text-muted); font-weight: 400; margin-top: var(--space-1); font-size: var(--text-sm); } /* ==================================================================== 16. PHOTO GRID ==================================================================== */ .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } .photo-grid__item { aspect-ratio: 1 / 1; background-color: var(--color-surface-2); overflow: hidden; position: relative; display: block; /* anchors used as grid tiles; ensure block-level */ transition: opacity var(--transition-fast); } .photo-grid__item:hover { opacity: 0.85; /* subtle hover feedback for clickable tiles */ } .photo-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); } .photo-grid__item:hover img { transform: scale(1.04); } /* ==================================================================== 17. RELEASE / ALBUM CARDS ==================================================================== */ .release-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .release { display: flex; flex-direction: column; gap: var(--space-4); } .release__cover { aspect-ratio: 1 / 1; background-color: var(--color-surface-2); border: 1px solid var(--color-border); overflow: hidden; position: relative; } .release__cover img { width: 100%; height: 100%; object-fit: cover; } .release__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--color-text); } .release__meta { color: var(--color-text-muted); font-size: var(--text-sm); } /* ==================================================================== 18. PRESS QUOTES ==================================================================== */ .quote { max-width: 800px; margin: 0 auto; /* center the block in the viewport */ /* text defaults to left-aligned within the block */ } .quote__text { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; line-height: 1.3; color: var(--color-text); margin-bottom: var(--space-6); font-style: italic; } .quote__attribution { font-family: var(--font-ui); font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-accent); } /* ==================================================================== 19. EPK DOWNLOAD BLOCK ==================================================================== */ .epk { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); } .epk__item { padding: var(--space-6); border: 1px solid var(--color-border); background-color: var(--color-surface-2); transition: border-color var(--transition-fast), transform var(--transition-fast); } .epk__item:hover { border-color: var(--color-accent); transform: translateY(-2px); color: var(--color-text); } .epk__item h4 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); } .epk__item p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); } .epk__item__hint { font-size: var(--text-eyebrow); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } /* ==================================================================== 20. EMAIL CAPTURE BAND ==================================================================== */ .email-band { /* Full-bleed photo background with dark overlay so text stays readable. Solid color fallback for unsupported browsers or slow loads. Padding is 1.7x the standard section padding (per feedback: make the band 70% taller). Borders removed: the photo + overlay already provide visual separation, and the 1px borders were rendering as faint stripes above/below the image. */ background-color: var(--color-surface); background-image: linear-gradient(rgba(14, 14, 16, 0.30), rgba(14, 14, 16, 0.40)), url('assets/img/webp/get-on-the-list.webp'); background-size: cover; background-position: center top; /* anchor image to top of container per feedback */ background-repeat: no-repeat; padding-top: calc(var(--space-section) * 1.7); padding-bottom: calc(var(--space-section) * 1.7); text-align: center; } .email-band__title { margin-bottom: var(--space-4); } .email-band__form { display: flex; gap: var(--space-3); max-width: 540px; margin: var(--space-8) auto 0; } .email-band__form input { flex: 1; padding: 0.875rem 1rem; background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); } .email-band__form input:focus { outline: none; border-color: var(--color-accent); } /* ==================================================================== 21. BOOKING INQUIRY FORM ==================================================================== */ .booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: 880px; margin: 0 auto; } .booking-form .form-field--full { grid-column: 1 / -1; } .booking-form__submit-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-4); padding-top: var(--space-8); border-top: 1px solid var(--color-border); } .booking-form__note { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 40ch; } /* ==================================================================== 22. CONTACT FORM (simpler than booking) ==================================================================== */ .contact-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-16); align-items: start; } .contact-form { display: flex; flex-direction: column; gap: var(--space-6); } .contact-aside h3 { margin-bottom: var(--space-4); color: var(--color-text); } .contact-aside p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); } .contact-aside ul { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .contact-aside ul a { color: var(--color-text); font-size: var(--text-sm); text-decoration: none; } .contact-aside ul a:hover { color: var(--color-accent); } /* ==================================================================== 23. COMING SOON BLOCK (Shows page placeholder, Shop page hold) ==================================================================== */ .coming-soon { text-align: center; padding: var(--space-section) 0; max-width: 600px; margin: 0 auto; } .coming-soon__icon { font-family: var(--font-display); font-size: var(--text-display); color: var(--color-accent); line-height: 1; margin-bottom: var(--space-6); } .coming-soon__title { margin-bottom: var(--space-4); } .coming-soon__text { color: var(--color-text-muted); font-size: var(--text-lg); margin-bottom: var(--space-8); margin-left: auto; margin-right: auto; } /* ==================================================================== 24. FOOTER ==================================================================== */ .footer { background-color: var(--color-surface); border-top: 1px solid var(--color-border); padding-top: var(--space-section); padding-bottom: var(--space-12); } .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-border); } .footer__brand-name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; color: var(--color-text); display: block; margin-bottom: var(--space-3); } .footer__brand p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 36ch; } .footer__col h5 { font-family: var(--font-ui); font-size: var(--text-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-text-muted); margin-bottom: var(--space-5); } .footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); } .footer__col a { color: var(--color-text); font-size: var(--text-sm); text-decoration: none; transition: color var(--transition-fast); } .footer__col a:hover { color: var(--color-accent); } .footer__icons { display: flex; flex-wrap: wrap; gap: var(--space-4); } .footer__icons a { color: var(--color-text-muted); font-size: 1.125rem; } .footer__icons a:hover { color: var(--color-accent); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-8); color: var(--color-text-subtle); font-size: var(--text-sm); } .footer__legal { display: flex; gap: var(--space-6); } .footer__legal a { color: var(--color-text-subtle); font-size: var(--text-sm); } .footer__legal a:hover { color: var(--color-text-muted); } /* ==================================================================== 25. MOBILE MENU OVERLAY Toggled by hamburger icon. Full-screen, vertical-stacked links. ==================================================================== */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background-color: var(--color-bg); padding-top: var(--nav-height); transform: translateY(-100%); transition: transform var(--transition-base); display: flex; flex-direction: column; align-items: center; justify-content: center; } .mobile-menu[data-open="true"] { transform: translateY(0); } .mobile-menu ul { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .mobile-menu a { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; color: var(--color-text); text-decoration: none; } .mobile-menu a.is-active { color: var(--color-accent); } .mobile-menu__socials { display: flex; gap: var(--space-4); margin-top: var(--space-12); } .mobile-menu__socials a { font-size: 1.25rem; color: var(--color-text-muted); } /* ==================================================================== 26. RESPONSIVE Breakpoints: lg=1024px, md=768px, sm=520px Mobile-first considerations applied within component blocks above. ==================================================================== */ @media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; } .release-grid { grid-template-columns: repeat(2, 1fr); } .photo-grid { grid-template-columns: repeat(3, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { /* Nav: hide desktop links, show hamburger */ .nav__menu { display: none; } .nav__toggle { display: block; } /* Hero typography scales down via clamp() already, but tighten signup row */ .hero__signup { flex-direction: column; } /* Splits collapse to single column */ .split { grid-template-columns: 1fr; gap: var(--space-8); } .split--reverse .split__media { order: 0; } /* Booking form collapses */ .booking-form { grid-template-columns: 1fr; } .booking-form__submit-row { flex-direction: column; align-items: stretch; } /* Tour rows stack */ .tour-list__row { grid-template-columns: 1fr; gap: var(--space-3); } /* Release grid */ .release-grid { grid-template-columns: 1fr; } /* Photo grid */ .photo-grid { grid-template-columns: repeat(2, 1fr); } /* Generic grid utilities collapse to single column on mobile. */ .grid--3, .grid--2 { grid-template-columns: 1fr; } /* Email band stacks */ .email-band__form { flex-direction: column; } /* Streaming buttons: 2-column grid on mobile. 5 items → rows of 2, 2, 1. Each button keeps an equal width (1fr of 2 columns), so the lone fifth button matches the width of a button in the 2-column rows. Overrides the desktop flex layout. */ .streaming__platforms { display: grid; grid-template-columns: 1fr 1fr; } /* Footer stacks */ .footer__top { grid-template-columns: 1fr; gap: var(--space-8); } .footer__bottom { flex-direction: column; text-align: center; } /* Contact grid stacks */ .contact-grid { grid-template-columns: 1fr; gap: var(--space-12); } } @media (max-width: 520px) { /* Hero scroll affordance hidden on tiny screens */ .hero__scroll-affordance { display: none; } } /* ==================================================================== FLUENT FORMS OVERRIDES + LAYOUTS All form styling is anchored to the wrapper classes we put around each [fluentform] shortcode in PHP. This sidesteps any uncertainty about Fluent Forms' own form/wrapper class names and gives us a stable selector that the plugin can't out-specify. !important is used liberally on visual properties because Fluent Forms ships its own CSS that loads after the theme stylesheet. ==================================================================== */ /* Booking + Contact: dark surface inputs. (Email-signup and hero are handled separately below to preserve the glass effect; including them here would let the catch-all's higher specificity defeat the glass rule.) */ .booking-form-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]), .booking-form-wrapper textarea, .booking-form-wrapper select, .contact-form-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]), .contact-form-wrapper textarea, .contact-form-wrapper select { box-sizing: border-box !important; width: 100% !important; padding: 0.875rem 1rem !important; font-family: var(--font-body) !important; font-size: var(--text-base) !important; color: var(--color-text) !important; background-color: var(--color-surface-2) !important; background-image: none !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; line-height: 1.5 !important; transition: border-color var(--transition-fast), background-color var(--transition-fast); } /* Single-line booking/contact fields get a fixed height. */ .booking-form-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]), .booking-form-wrapper select, .contact-form-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]), .contact-form-wrapper select { height: 3.25rem !important; min-height: 3.25rem !important; } /* Email signup placements (hero + email band): translucent glass input with backdrop blur. ALL the input styling lives in this single block so a single source-order rule wins, and there's no specificity war with a catch-all that includes white-bg styling. */ .email-signup-wrapper input[type="email"], .hero__signup-wrapper input[type="email"] { box-sizing: border-box !important; width: 100% !important; height: 3.25rem !important; min-height: 3.25rem !important; padding: 0.875rem 1rem !important; font-family: var(--font-body) !important; font-size: var(--text-base) !important; color: var(--color-text) !important; background-color: rgba(255, 255, 255, 0.08) !important; background-image: none !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; line-height: 1.5 !important; flex: 1 1 auto !important; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .email-signup-wrapper input[type="email"]:focus, .hero__signup-wrapper input[type="email"]:focus { background-color: rgba(255, 255, 255, 0.12) !important; border-color: var(--color-accent) !important; outline: none !important; } .email-signup-wrapper input[type="email"]::placeholder, .hero__signup-wrapper input[type="email"]::placeholder { color: var(--color-text-muted) !important; opacity: 1 !important; } /* Submit button height matches input height for clean horizontal alignment */ .email-signup-wrapper button[type="submit"], .hero__signup-wrapper button[type="submit"] { height: 3.25rem !important; min-height: 3.25rem !important; } /* Selects: replace the native arrow (which ignores padding-right) with a custom SVG arrow positioned with comfortable gutter on the right. */ .booking-form-wrapper select, .contact-form-wrapper select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A8A39B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 18px !important; padding-right: 2.75rem !important; } /* Focus state */ .booking-form-wrapper input:focus, .booking-form-wrapper textarea:focus, .booking-form-wrapper select:focus, .contact-form-wrapper input:focus, .contact-form-wrapper textarea:focus, .contact-form-wrapper select:focus { outline: none !important; border-color: var(--color-accent) !important; background-color: var(--color-bg) !important; box-shadow: none !important; } /* Placeholders */ .booking-form-wrapper input::placeholder, .booking-form-wrapper textarea::placeholder, .contact-form-wrapper input::placeholder, .contact-form-wrapper textarea::placeholder, .email-signup-wrapper input::placeholder, .hero__signup-wrapper input::placeholder { color: var(--color-text-subtle) !important; opacity: 1 !important; } /* Textarea sizing */ .booking-form-wrapper textarea, .contact-form-wrapper textarea { min-height: 140px !important; resize: vertical !important; } /* Field labels: small caps eyebrow style matching .form-field__label */ .booking-form-wrapper label, .contact-form-wrapper label { font-family: var(--font-ui) !important; font-size: var(--text-eyebrow) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: var(--color-text-muted) !important; margin-bottom: var(--space-2) !important; display: block !important; } /* Required asterisk: amber, not red */ .booking-form-wrapper .ff_required, .booking-form-wrapper label span, .contact-form-wrapper .ff_required, .contact-form-wrapper label span { color: var(--color-accent) !important; margin-left: 2px; } /* Hidden inputs (Fluent Forms emits these alongside checkboxes) stay hidden */ .booking-form-wrapper input[type="hidden"], .contact-form-wrapper input[type="hidden"], .email-signup-wrapper input[type="hidden"], .hero__signup-wrapper input[type="hidden"] { display: none !important; width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; } /* Checkbox / radio: native rendering with accent color */ .booking-form-wrapper input[type="checkbox"], .booking-form-wrapper input[type="radio"], .contact-form-wrapper input[type="checkbox"], .contact-form-wrapper input[type="radio"] { appearance: auto !important; -webkit-appearance: auto !important; -moz-appearance: auto !important; width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; margin: 2px var(--space-2) 0 0 !important; padding: 0 !important; accent-color: var(--color-accent) !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; flex-shrink: 0 !important; vertical-align: middle; cursor: pointer; } /* Checkbox row layout: input + label inline */ .booking-form-wrapper .ff-el-form-check, .booking-form-wrapper .ff_list_buttons, .contact-form-wrapper .ff-el-form-check, .contact-form-wrapper .ff_list_buttons { display: flex !important; align-items: flex-start !important; gap: var(--space-2) !important; flex-wrap: wrap; } /* The label INSIDE a checkbox row should be plain text, not eyebrow */ .booking-form-wrapper .ff-el-form-check label, .booking-form-wrapper .ff-el-form-check-label, .booking-form-wrapper label.ff-el-form-check-label, .booking-form-wrapper .ff_list_buttons label, .contact-form-wrapper .ff-el-form-check label, .contact-form-wrapper .ff-el-form-check-label, .contact-form-wrapper label.ff-el-form-check-label, .contact-form-wrapper .ff_list_buttons label { font-family: var(--font-body) !important; font-size: var(--text-sm) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; color: var(--color-text-muted) !important; line-height: 1.5 !important; margin: 0 !important; cursor: pointer; display: inline !important; } /* Submit button: amber, uppercase, matches .btn .btn--primary exactly */ .booking-form-wrapper button[type="submit"], .booking-form-wrapper input[type="submit"], .contact-form-wrapper button[type="submit"], .contact-form-wrapper input[type="submit"], .email-signup-wrapper button[type="submit"], .email-signup-wrapper input[type="submit"], .hero__signup-wrapper button[type="submit"], .hero__signup-wrapper input[type="submit"] { display: inline-flex !important; width: auto !important; align-items: center !important; justify-content: center !important; gap: var(--space-2) !important; padding: 0.875rem 1.75rem !important; font-family: var(--font-ui) !important; font-size: var(--text-sm) !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; color: var(--color-bg) !important; background-color: var(--color-accent) !important; background-image: none !important; border: 1px solid var(--color-accent) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .booking-form-wrapper button[type="submit"]:hover, .contact-form-wrapper button[type="submit"]:hover, .email-signup-wrapper button[type="submit"]:hover, .hero__signup-wrapper button[type="submit"]:hover { background-color: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important; color: var(--color-bg) !important; } .booking-form-wrapper button[type="submit"]:active, .contact-form-wrapper button[type="submit"]:active, .email-signup-wrapper button[type="submit"]:active, .hero__signup-wrapper button[type="submit"]:active { transform: translateY(1px); } /* Validation error messages: replace red with brand-aware salmon */ .booking-form-wrapper .text-danger, .booking-form-wrapper .error, .contact-form-wrapper .text-danger, .contact-form-wrapper .error, .email-signup-wrapper .text-danger, .email-signup-wrapper .error, .hero__signup-wrapper .text-danger, .hero__signup-wrapper .error { color: #E5746A !important; font-size: var(--text-sm) !important; margin-top: var(--space-1) !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 400 !important; } /* Success message after submit */ .booking-form-wrapper .ff-message-success, .contact-form-wrapper .ff-message-success, .email-signup-wrapper .ff-message-success, .hero__signup-wrapper .ff-message-success { padding: var(--space-4) !important; background-color: var(--color-accent-soft) !important; border: 1px solid var(--color-accent) !important; color: var(--color-text) !important; border-radius: var(--radius-sm) !important; text-align: center; } /* ==================================================================== FLUENT FORMS LAYOUT GRIDS Each placement-wrapper sets up its own layout so the form looks exactly like the static prototype. ==================================================================== */ /* ----- Booking form: 2-col grid, max 880px, full-width long fields - */ .booking-form-wrapper { max-width: 880px; margin: 0 auto; } .booking-form-wrapper form { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: var(--space-6) !important; row-gap: var(--space-5) !important; margin: 0 !important; } /* Pass-through the
Fluent Forms wraps every form's fields in (added for accessibility). Without display:contents on the fieldset it becomes the only direct child of
, defeating the grid. */ .booking-form-wrapper form fieldset, .contact-form-wrapper form fieldset, .email-signup-wrapper form fieldset, .hero__signup-wrapper form fieldset { display: contents !important; } /* Hide the screen-reader legend so it doesn't take a grid/flex slot */ .booking-form-wrapper form fieldset > legend, .contact-form-wrapper form fieldset > legend, .email-signup-wrapper form fieldset > legend, .hero__signup-wrapper form fieldset > legend { display: none !important; } /* Pass-through any other wrapper divs (some Fluent Forms versions add .ff_form_wrapper / .ff_t_container / .ff_t_row inside the fieldset) */ .booking-form-wrapper .ff_form_wrapper, .booking-form-wrapper .ff_t_container, .booking-form-wrapper .ff_t_row, .booking-form-wrapper .ff_t_cell { display: contents !important; } .booking-form-wrapper form .ff-el-group { margin-bottom: 0 !important; min-width: 0; } /* Long fields (details/opt_in) and submit span both columns */ .booking-form-wrapper form .ff-el-group.jm_col_full, .booking-form-wrapper form .ff_submit_btn_wrapper, .booking-form-wrapper form .ff-el-group--submit { grid-column: 1 / -1 !important; } /* Submit row: hairline separator above, like the prototype */ .booking-form-wrapper form .ff_submit_btn_wrapper, .booking-form-wrapper form .ff-el-group--submit { margin-top: var(--space-4) !important; padding-top: var(--space-8) !important; border-top: 1px solid var(--color-border); text-align: left; } /* ----- Contact form: 2-col grid, name+email side-by-side, rest full-width */ .contact-form-wrapper form { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: var(--space-6) !important; row-gap: var(--space-5) !important; margin: 0 !important; } /* Pass-through any inner wrapper divs (matching the booking pattern) */ .contact-form-wrapper .ff_form_wrapper, .contact-form-wrapper .ff_t_container, .contact-form-wrapper .ff_t_row, .contact-form-wrapper .ff_t_cell { display: contents !important; } .contact-form-wrapper form .ff-el-group { margin-bottom: 0 !important; min-width: 0; } /* Span the full row for fields after position 2 (Reason, Message, Opt-in) plus the submit. Uses nth-of-type because the fieldset's children include the legend and several hidden inputs before the .ff-el-group divs, so nth-child counting would be off. nth-of-type counts only among
siblings, which is what we want. */ .contact-form-wrapper form fieldset > div:nth-of-type(n+3), .contact-form-wrapper form > div:nth-of-type(n+3), .contact-form-wrapper form .ff_submit_btn_wrapper, .contact-form-wrapper form .ff-el-group--submit { grid-column: 1 / -1 !important; } /* ----- Email signup band: inline row, max 540px, centered ---------- */ .email-signup-wrapper { max-width: 540px; margin: var(--space-8) auto 0; } .email-signup-wrapper form { display: flex !important; gap: var(--space-3) !important; align-items: stretch !important; margin: 0 !important; } .email-signup-wrapper form > * { margin: 0 !important; } .email-signup-wrapper form .ff-el-input--label, .email-signup-wrapper form > label { display: none !important; } /* (Email signup input styling consolidated above with glass effect) */ .email-signup-wrapper form > div:has(input[type="email"]), .email-signup-wrapper form .ff-el-group { flex: 1 1 auto !important; min-width: 0; } .email-signup-wrapper button[type="submit"] { flex: 0 0 auto !important; } /* ----- Hero email signup: same inline shape, max 480px, translucent input over the video (matches the prototype's .hero__signup spec) - */ .hero__signup-wrapper { max-width: 480px; margin: 0 0 var(--space-8) 0; /* left-aligned, not centered */ } .hero__signup-wrapper form { display: flex !important; gap: var(--space-3) !important; align-items: stretch !important; margin: 0 !important; } .hero__signup-wrapper form > * { margin: 0 !important; } .hero__signup-wrapper form .ff-el-input--label, .hero__signup-wrapper form > label { display: none !important; } /* (Hero signup input styling consolidated above with glass effect) */ .hero__signup-wrapper form > div:has(input[type="email"]), .hero__signup-wrapper form .ff-el-group { flex: 1 1 auto !important; min-width: 0; } .hero__signup-wrapper button[type="submit"] { flex: 0 0 auto !important; } /* ----- Mobile collapse ----- */ @media (max-width: 720px) { .booking-form-wrapper form { grid-template-columns: 1fr !important; } } @media (max-width: 520px) { .email-signup-wrapper form, .hero__signup-wrapper form { flex-direction: column !important; } .email-signup-wrapper button[type="submit"], .hero__signup-wrapper button[type="submit"] { width: 100% !important; } }