/* ===================================================== Michael Bloemeke. Award-Winning Magician. Local rebuild. No build step, no framework. ===================================================== */ :root { /* ===== NEUTRAL RAMP — shared by every style pack ===== */ --ink: #0a0a0a; /* one black: all text + dark sections */ --paper: #ffffff; /* base background */ --cream: #f7f5f1; /* warm section background */ --stone: #e8e6e1; /* deeper warm background */ --slate: #6b6b6b; /* muted / secondary text */ --hairline: rgba(10,10,10,0.10); /* ===== ACCENT — the theme color a style pack changes ===== */ --accent: #c9a961; /* Gold (default pack) */ --accent-bright: #e3c279; /* accent ON dark */ --accent-deep: #a8842f; /* accent as text/links ON light */ /* ===== MEDAL — ALWAYS gold, every theme. ===== */ /* Stars, award laurels, and quote marks are physically gold objects, so they stay gold even when the theme color is copper or blue. */ --medal: #c9a961; --medal-bright: #e3c279; /* Back-compat aliases so the whole stylesheet follows the accent. Everything that says var(--gold) now tracks the active style pack. */ --gold: var(--accent); --gold-bright: var(--accent-bright); --gold-deep: var(--accent-deep); --muted: var(--slate); --muted-light: rgba(255,255,255,0.7); --line: var(--hairline); --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --container: 1200px; --gutter: clamp(14px, 3vw, 28px); --radius: 4px; --radius-pill: 999px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ========================================================= STYLE PACKS — full redesigns, not accent swaps. "Gold" is the default (light/cream, defined in :root above). Each alternate pack is a complete DARK + WARM treatment: it redefines the surface + text + metal tokens, and a shared block further down restyles every section to suit them. Switch with etc. ========================================================= */ /* EMBER — after-dark espresso & copper */ [data-theme="ember"] { /* NEUTRAL near-black (warm) — the DOMINANT background */ --bg-neutral: #14110e; --bg-neutral-deep: #0d0b09; --bg-grey: #241f1a; /* raised warm charcoal — the alternating "grey" */ /* SATURATED espresso — reserved for brand-moment sections + cards */ --bg: #1a1512; /* page base, warm near-black */ --bg-warm: #2e2017; /* espresso brand panel */ --bg-deep: #130f0c; /* deepest sections / footer */ --card: #322318; /* cards, form panel (lifted, distinct) */ --text: #f4efe8; /* warm off-white (text) */ --text-soft: #ded3c6; --hairline: rgba(255,255,255,0.09); --accent: #c9783f; /* copper */ --accent-bright: #e89f63; /* copper on dark (glow) */ --accent-deep: #b0673a; --slate: #b3a99c; /* warm-neutral muted text */ --form-surface: #f6f1e9; /* warm cream — form cards read light, not dark */ } /* FISM — deep royal blue & gold (from the FISM award artwork) */ [data-theme="fism"] { /* NEUTRAL near-black (whisper of blue) — the DOMINANT background */ --bg-neutral: #0c0f16; --bg-neutral-deep: #08090e; --bg-grey: #1c2030; /* raised charcoal — the alternating "grey" */ /* SATURATED royal blue — reserved for brand-moment sections + cards */ --bg: #0c1638; /* deep navy base */ --bg-warm: #18295f; /* royal-blue brand panel */ --bg-deep: #070d24; /* deepest navy / footer */ --card: #1d2c63; /* cards, form panel (lifted, distinct) */ --text: #f4f5f7; /* near-white, neutral (no blue tint) */ --text-soft: #d3d5da; --hairline: rgba(255,255,255,0.12); /* accent stays GOLD — the FISM artwork is blue with gold light beams */ --accent: #c9a961; --accent-bright: #e3c279; --accent-deep: #a8842f; --slate: #b0b3bd; /* neutral grey muted text (no blue tint) */ --form-surface: #ffffff; /* white — form cards read light, not blue */ /* TWO background colors only — these alternate across sections. Every other blue + gold is for accents/cards/quote boxes, never backgrounds. */ --surface-light: #ecedf2; /* off-white with a hint of cool grey */ --surface-blue: #18295f; /* the single background blue (the reviews blue) */ } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); } /* Global SVG noise overlay. Fixed, non-interactive, blends with content. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.05; background-image: url('../assets/graphics/noise-overlay.svg'); mix-blend-mode: multiply; } @media (prefers-reduced-motion: reduce) { body::before { opacity: 0.03; } } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } /* ---------- Typography ---------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 0.4em; } h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); } h2 { font-size: clamp(2rem, 4vw, 3.4rem); } h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 600; } p { margin: 0 0 1em; } .eyebrow { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin: 0 0 1rem; } .eyebrow-light { color: rgba(255,255,255,0.7); } .eyebrow-gold { color: var(--gold); } .section-head { max-width: 800px; margin: 0 0 3rem; } .section-head h2 { margin-bottom: 0.6rem; } .section-lede { color: var(--muted); font-size: 1.1rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 1.7rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius); transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .btn:hover { transform: translateY(-2px); background: var(--gold); border-color: var(--gold); color: var(--ink); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn-light:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } .btn-pill { border-radius: var(--radius-pill); padding: 0.6rem 1.2rem; font-size: 0.76rem; } .btn-large { padding: 1.15rem 2.4rem; font-size: 0.95rem; } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 22px 0; border-bottom: 1px solid transparent; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), padding 0.3s var(--ease); } .site-header[data-state="top"] { background: transparent; } .site-header[data-state="scrolled"] { background: rgba(13,18,32,0.92); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-color: rgba(255,255,255,0.08); padding: 10px 0; } /* Scrolled bar is dark now (2026-06-26, to carry the logo), so nav text + controls go light. */ .site-header[data-state="scrolled"] .nav-link { color: var(--paper); } .site-header[data-state="scrolled"] .nav-toggle span { background: var(--paper); } .site-header[data-state="scrolled"] .nav-cta { background: var(--paper); color: var(--ink); border-color: var(--paper); } .site-header[data-state="scrolled"] .nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { font-family: var(--font-display); font-size: clamp(1.32rem, 1rem + 1.2vw, 1.55rem); font-weight: 700; letter-spacing: 0.01em; display: inline-flex; align-items: center; } .brand-logo { display: block; height: 77px; width: auto; } @media (max-width: 720px) { .brand-logo { height: 58px; } } .primary-nav { display: flex; align-items: center; gap: 1.8rem; } .nav-link { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; position: relative; padding: 0.35rem 0.15rem; transition: color 0.2s var(--ease); } .nav-link::after { content: ""; position: absolute; left: 0.15rem; right: 0.15rem; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav-cta { padding: 0.85rem 2rem; } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); } .nav-ig { display: inline-flex; align-items: center; line-height: 1; } .nav-ig::after { display: none; } .nav-ig:hover { color: var(--gold); } .nav-ig svg { display: block; } .nav-toggle { display: none; background: none; border: 0; padding: 8px; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.3s var(--ease); } /* Pages with image hero: header sits over dark imagery when at top. Blog index has a page-hero image too (but individual posts don't, so we scope the blog rule with :not(.page-blog-post)). */ .page-home .site-header[data-state="top"] .brand, .page-home .site-header[data-state="top"] .nav-link, .page-about .site-header[data-state="top"] .brand, .page-about .site-header[data-state="top"] .nav-link, .page-faqs .site-header[data-state="top"] .brand, .page-faqs .site-header[data-state="top"] .nav-link, .page-contact .site-header[data-state="top"] .brand, .page-contact .site-header[data-state="top"] .nav-link, .page-blog:not(.page-blog-post) .site-header[data-state="top"] .brand, .page-blog:not(.page-blog-post) .site-header[data-state="top"] .nav-link, .page-service .site-header[data-state="top"] .brand, .page-service .site-header[data-state="top"] .nav-link { color: var(--paper); } .page-home .site-header[data-state="top"] .nav-toggle span, .page-about .site-header[data-state="top"] .nav-toggle span, .page-faqs .site-header[data-state="top"] .nav-toggle span, .page-contact .site-header[data-state="top"] .nav-toggle span, .page-blog:not(.page-blog-post) .site-header[data-state="top"] .nav-toggle span, .page-service .site-header[data-state="top"] .nav-toggle span { background: var(--paper); } .page-home .site-header[data-state="top"] .nav-cta, .page-about .site-header[data-state="top"] .nav-cta, .page-faqs .site-header[data-state="top"] .nav-cta, .page-contact .site-header[data-state="top"] .nav-cta, .page-blog:not(.page-blog-post) .site-header[data-state="top"] .nav-cta, .page-service .site-header[data-state="top"] .nav-cta { background: var(--paper); color: var(--ink); border-color: var(--paper); } .page-home .site-header[data-state="top"] .nav-cta:hover, .page-about .site-header[data-state="top"] .nav-cta:hover, .page-faqs .site-header[data-state="top"] .nav-cta:hover, .page-contact .site-header[data-state="top"] .nav-cta:hover, .page-blog:not(.page-blog-post) .site-header[data-state="top"] .nav-cta:hover, .page-service .site-header[data-state="top"] .nav-cta:hover { background: var(--gold); border-color: var(--gold); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; color: var(--paper); isolation: isolate; } .hero-media { position: absolute; inset: 0; background: url('../assets/photos/homepage-hero.webp') center 30% / cover no-repeat; z-index: -2; will-change: transform; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.4) 100%), linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); z-index: -1; } .hero-inner { padding: 9rem 0 6rem; max-width: 920px; width: 100%; } .hero-title { margin: 0 0 1.4rem; letter-spacing: -0.02em; } .hero-lede { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 300; margin-bottom: 2.5rem; color: rgba(255,255,255,0.85); } /* Hero award laurels (festival-style, replaced the standalone credentials strip 2026-06-12). Laurels stay gold in every theme (--medal). */ .hero-laurels { list-style: none; padding: 0; margin: 0 0 2.8rem; display: flex; flex-wrap: wrap; gap: 1.4rem clamp(1.6rem, 4vw, 3.2rem); } .hero-laurel { display: flex; align-items: center; gap: 0.45rem; } .laurel-branch { width: auto; height: 64px; flex: none; display: block; } .laurel-text { display: grid; gap: 3px; text-align: center; } .laurel-top { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--medal-bright, #e3c279); } .laurel-main { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: #fff; white-space: nowrap; } .laurel-sub { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); } .hero-cta { display: flex; align-items: center; gap: 1.7rem; flex-wrap: wrap; } .hero-reviews { display: grid; gap: 3px; } .hero-stars { color: var(--medal-bright, #e3c279); font-size: 1.02rem; letter-spacing: 3px; line-height: 1; } .hero-reviews-text { font-size: 0.86rem; color: rgba(255,255,255,0.85); } .hero-sticker img { width: 100%; height: auto; display: block; } .hero .hero-inner { position: relative; } .hero-sticker { position: absolute; /* anchored to the text column's left edge, bottom-aligned with the CTA row: reads as part of the content band, clear of faces */ bottom: 0; left: 0; width: clamp(160px, 17vw, 235px); transform: rotate(-7deg); filter: drop-shadow(0 8px 22px rgba(0,0,0,0.4)); z-index: 1; } @media (max-width: 920px) { .hero-cta { display: flex; align-items: center; gap: 1.7rem; flex-wrap: wrap; } .hero-reviews { display: grid; gap: 3px; } .hero-stars { color: var(--medal-bright, #e3c279); font-size: 1.02rem; letter-spacing: 3px; line-height: 1; } .hero-reviews-text { font-size: 0.86rem; color: rgba(255,255,255,0.85); } .hero-sticker { display: none; } } @media (max-width: 640px) { .laurel-branch { height: 50px; } .laurel-main { font-size: 0.98rem; } } .promise-list { list-style: none; padding: 0; margin: 0 0 3rem; display: grid; gap: 0.8rem; max-width: 640px; } .promise-list li { font-size: 1.05rem; color: rgba(255,255,255,0.85); } .promise-list strong { color: var(--gold); font-family: var(--font-display); font-weight: 600; font-style: italic; margin-right: 0.4rem; } .hero-scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.6); animation: bob 2.5s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ---------- Credentials strip ---------- */ .credentials { padding: 6rem 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,169,97,0.18), transparent 60%), linear-gradient(180deg, #fbf8f1 0%, #f3ecd9 100%); border-top: 1px solid rgba(201,169,97,0.3); border-bottom: 1px solid rgba(201,169,97,0.3); position: relative; overflow: hidden; } .credentials::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--gold); } .credentials .cred-line { color: #2a1f10; } .credentials .cred-sub { color: rgba(58,40,18,0.7); } .cred-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; position: relative; } .cred-list li { display: grid; gap: 0.5rem; text-align: center; justify-items: center; padding: 0 1rem; position: relative; } .cred-list li + li::before { content: ""; position: absolute; left: -1.25rem; top: 25%; bottom: 25%; width: 1px; background: linear-gradient(180deg, transparent, rgba(201,169,97,0.4), transparent); } .cred-laurel { width: 72px; height: 50px; color: var(--gold); margin-bottom: 0.4rem; display: block; } .cred-eyebrow { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); } .cred-line { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.15; color: var(--ink); } .cred-sub { color: var(--muted); font-size: 0.95rem; max-width: 300px; } /* Credentials list (about page) */ .credentials.full { padding: 7rem 0; background: var(--cream); border-bottom: 0; } .cred-stack { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); } .cred-stack li { display: grid; grid-template-columns: 140px 1fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); align-items: baseline; } .cred-year { font-family: var(--font-display); font-size: 1.9rem; color: var(--gold); font-style: italic; } .cred-stack h3 { margin-bottom: 0.35rem; } .cred-stack p { margin: 0; color: var(--muted); } /* ---------- Book Your Event (form section) ---------- */ .book-form { padding: 7rem 0; background: var(--paper); position: relative; } .book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: stretch; } @media (min-width: 961px) { .book-form-wrap { order: -1; } } .book-info header { margin-bottom: 1.2rem; } .book-info h2 { margin-bottom: 0.7rem; } .book-lede { font-size: 1.02rem; color: var(--ink); line-height: 1.45; margin: 0 0 1rem; max-width: 560px; } .check-list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 0.5rem; } .check-list li { position: relative; padding-left: 1.7rem; font-size: 1rem; line-height: 1.4; color: var(--ink); } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.32rem; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0.5 L9.3 6.7 L15.5 8 L9.3 9.3 L8 15.5 L6.7 9.3 L0.5 8 L6.7 6.7 Z' fill='%23c9a961'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .check-list strong { font-family: var(--font-display); font-style: italic; font-weight: 700; color: var(--gold); margin-right: 0.15rem; } .book-closer { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; font-weight: 700; color: var(--ink); margin: 0.5rem 0 1.5rem; } .book-media { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .book-video { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; position: relative; } .book-photo { border-radius: var(--radius); overflow: hidden; position: relative; } .book-photo img { width: 100%; height: auto; display: block; } .yt-facade { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: #000; cursor: pointer; position: relative; overflow: hidden; border-radius: var(--radius); } .yt-poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease), filter 0.3s var(--ease); pointer-events: none; } .yt-play, .yt-label { pointer-events: none; } .yt-facade:hover .yt-poster { transform: scale(1.02); filter: brightness(1.05); } .yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); transition: transform 0.25s var(--ease); } .yt-facade:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); } .yt-label { position: absolute; left: 1rem; bottom: 0.9rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .book-form-wrap { background: var(--paper); border-radius: var(--radius); padding: 2.5rem; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(10,10,10,0.06); } .book-form-wrap:has([class^="hb-p-"]) { padding: 0; overflow: hidden; } /* The homepage booking form is a copy of the contact-page form, but it sits in the narrower book-form-wrap column, so keep it single-column (the contact page's 2-up grid is cramped at this width). */ .book-form-wrap .contact-form-grid { display: flex; flex-direction: column; } .book-form-header { margin-bottom: 1.5rem; } .book-form-header h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 700; margin: 0 0 0.35rem; } .book-form-header p { font-size: 0.95rem; color: var(--muted); margin: 0; } .book-contact-form { display: flex; flex-direction: column; gap: 1.2rem; flex: 1; } .book-contact-form label, .book-contact-form legend { font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 0.4rem; padding: 0; } .book-contact-form input[type="text"], .book-contact-form input[type="email"], .book-contact-form input[type="tel"], .book-contact-form input[type="date"], .book-contact-form input[type="time"], .book-contact-form select { background: transparent; border: 0; border-bottom: 1px solid rgba(10,10,10,0.2); border-radius: 0; padding: 0.65rem 0; box-shadow: none; font-size: 1rem; width: 100%; color-scheme: light; /* keep the native calendar/clock pickers light to match the form card */ } .book-contact-form textarea { background: var(--paper); border: 1px solid rgba(10,10,10,0.2); border-radius: 4px; padding: 0.8rem 1rem; box-shadow: none; font-size: 1rem; min-height: 110px; resize: vertical; } .book-contact-form input:focus, .book-contact-form select:focus, .book-contact-form textarea:focus { outline: none; border-color: var(--ink); border-bottom-color: var(--ink); background: transparent; box-shadow: none; } .book-contact-form textarea:focus { background: var(--paper); } .book-contact-form input::placeholder, .book-contact-form textarea::placeholder { color: rgba(10,10,10,0.4); font-style: italic; } .req { color: #d23a3a; margin-left: 2px; font-weight: 400; } .form-checks { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .form-checks legend { margin-bottom: 0.8rem; } .check-row { display: flex; align-items: center; gap: 0.7rem; font-size: 0.98rem; color: var(--ink); cursor: pointer; font-weight: 400; margin: 0; } .check-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid rgba(10,10,10,0.3); border-radius: 3px; background: var(--paper); cursor: pointer; position: relative; flex-shrink: 0; margin: 0; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); } .check-row input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); } .check-row input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); } .book-contact-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%230a0a0a'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 20px; padding-right: 28px; cursor: pointer; } .book-send { margin-top: 1rem; align-self: stretch; } .form-recaptcha { font-size: 0.75rem; color: var(--muted); margin: 0.8rem 0 0; line-height: 1.5; } .form-recaptcha a { color: var(--muted); text-decoration: underline; } .form-recaptcha a:hover { color: var(--ink); } .form-disclaimer { font-size: 0.76rem; color: var(--muted); margin: 1.2rem 0 0; font-style: italic; text-align: center; opacity: 0.8; } @media (max-width: 960px) { .book-grid { grid-template-columns: 1fr; gap: 3rem; } } @media (max-width: 720px) { .book-form-wrap { padding: 1.5rem; } .book-form { padding: 4.5rem 0; } } /* ---------- Services ---------- */ .services { padding: 7rem 0; background: var(--cream); } .services-title { text-align: center; margin: 0 0 1.2rem; } .services-lede { text-align: center; max-width: 760px; margin: 0 auto 4rem; font-size: 1.1rem; line-height: 1.6; color: var(--muted); } /* Services stacked vertically; each card is a horizontal row: text on left, image on right, with a small gold ornament between cards. */ .service-grid { display: grid; grid-template-columns: 1fr; gap: 5rem; margin: 0 auto 4rem; max-width: 1080px; } .service-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .service-card .service-content { grid-column: 1; grid-row: 1; } .service-card .service-media { grid-column: 2; grid-row: 1; } /* Small gold decorative separator between cards (not full width). */ .service-card:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -2.5rem; transform: translateX(-50%); width: 96px; height: 1px; background: var(--accent); opacity: 0.55; } .service-media { aspect-ratio: 4/3; background: var(--ink); border-radius: var(--radius); position: relative; overflow: hidden; } .service-media::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; color: rgba(255,255,255,0.35); font-size: 1.05rem; } .service-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); } .service-media:hover img { transform: scale(1.03); } .service-media:has(img)::after { content: none; } .service-content { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-inline: 0.2rem; } .service-content h3 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.01em; } .service-content p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; max-width: 65ch; } .service-content .btn { margin-top: 0.4rem; } .services-cta { text-align: center; } @media (max-width: 720px) { .service-grid { gap: 4rem; } .service-card { grid-template-columns: 1fr; gap: 1.5rem; } .service-card .service-media { grid-column: 1; grid-row: 1; } .service-card .service-content { grid-column: 1; grid-row: 2; } .service-card:not(:last-child)::after { bottom: -2rem; width: 72px; } } /* ---------- Service detail pages (placeholder shell) ---------- */ .page-service .page-hero { min-height: clamp(280px, 42vh, 420px); } .service-detail { padding: 6rem 0; text-align: center; } .placeholder-note { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.6; color: var(--muted); max-width: 640px; margin: 0 auto; } .service-back { padding: 1rem 0 7rem; text-align: center; } /* ---------- Event coverage (SEO content block) ---------- */ .event-coverage { padding: 7rem 0; background: var(--paper); } .event-coverage-head { text-align: center; max-width: 720px; margin: 0 auto 4rem; } .event-coverage-head h2 { margin: 0 0 1rem; } .event-coverage-head p { color: var(--muted); font-size: 1.1rem; line-height: 1.6; margin: 0; } .event-coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1040px; margin: 0 auto; } .event-coverage-block h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); margin: 0 0 1rem; letter-spacing: -0.01em; } .event-coverage-block p { font-size: 1rem; line-height: 1.7; margin: 0 0 1rem; } .event-coverage-block p:last-child { margin-bottom: 0; } @media (max-width: 720px) { .event-coverage-grid { grid-template-columns: 1fr; gap: 3rem; } } /* ---------- FISM ---------- */ .fism { padding: 8rem 0; background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.45)), url('../assets/graphics/fism-velvet-texture.webp') center/cover no-repeat, var(--ink); color: var(--paper); position: relative; overflow: hidden; isolation: isolate; } .fism::before { content: ""; position: absolute; inset: -50% -10% auto auto; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(201,169,97,0.22), transparent 60%); z-index: -1; filter: blur(10px); } .fism-inner { max-width: 1000px; } .fism-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: center; } .fism h2 { font-size: clamp(2rem, 4vw, 3.4rem); color: var(--paper); } .fism em { font-style: italic; color: var(--gold); } .fism-sub { font-size: 1.1rem; color: rgba(255,255,255,0.65); margin-top: 1.5rem; } .fism-award { display: flex; justify-content: center; } .fism-award img { width: 100%; max-width: 460px; height: auto; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,0.5); } /* ---------- Promo reel ---------- */ .promo { padding: 7rem 0; background: var(--ink); color: var(--paper); } .promo-head { max-width: 760px; margin: 0 auto 3.5rem; text-align: center; } .promo-head h2 { color: var(--paper); margin: 0 0 1rem; } .promo-head p { color: rgba(255,255,255,0.7); font-size: 1.1rem; line-height: 1.55; margin: 0; } .promo-video { max-width: 1100px; margin: 0 auto; aspect-ratio: 16/9; display: block; box-shadow: 0 30px 80px rgba(0,0,0,0.5); } /* ---------- Clients ---------- */ .clients { padding: 7rem 0; background: linear-gradient(180deg, #4582DC 0%, #2A5AA8 100%); position: relative; text-align: center; } .clients-title { font-family: var(--font-display); font-style: italic; font-weight: 400; max-width: 820px; margin: 0 auto 3rem; color: var(--paper); font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.25; } .clients-image { max-width: 1100px; margin: 0 auto; } .clients-image img { width: 100%; height: auto; display: block; } /* Animated client-logo marquee: two identical .logo-track sets scroll left in an infinite loop. Each set translates by its own full width + one gap, so the loop point is seamless. Hover pauses; reduced-motion gets a static wrapped grid (second set hidden). Edge fade via mask-image. */ .logo-marquee { --marquee-gap: clamp(2.5rem, 5vw, 4.5rem); --marquee-duration: 50s; display: flex; overflow: hidden; /* full-bleed: the strip runs edge to edge across the viewport */ max-width: none; margin: 0; padding: 0.5rem 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .logo-track { display: flex; align-items: center; gap: var(--marquee-gap); /* Trailing gap baked into the track so the spacing across the loop seam equals the spacing between logos. Combined with a clean translateX(-100%) (one full track width, padding included), the first logo follows the last with no visible jump -> reads as a true infinite loop. */ padding-right: var(--marquee-gap); flex: none; animation: logo-scroll var(--marquee-duration, 70s) linear infinite; } .logo-track img { height: 60px; width: auto; max-width: 190px; object-fit: contain; flex: none; } /* Marquee runs continuously: no hover/tap pause (a tap on touch devices triggers sticky :hover and would freeze the strip until you tap elsewhere). */ @keyframes logo-scroll { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .logo-marquee { -webkit-mask-image: none; mask-image: none; } .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; padding-right: 0; row-gap: 2rem; } .logo-track[aria-hidden="true"] { display: none; } } @media (max-width: 640px) { .logo-track img { height: 44px; max-width: 150px; } } /* VARIANT A (2026-06-12 experiment): thin logo strip directly below the hero. Reuses .logo-marquee / .logo-track wholesale. */ .clients-strip { padding: 2.4rem 0 2.8rem; background: var(--stone, #efece6); border-bottom: 1px solid var(--hairline, rgba(10,10,10,0.08)); } .clients-strip-label { text-align: center; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted, #6b6b6b); margin: 0 0 1.6rem; } [data-theme="fism"] .clients-strip { background: var(--surface-light); border-color: rgba(10,10,10,0.08); } [data-theme="fism"] .clients-strip-label { color: #5a6170; } /* VARIANT B (2026-06-12 experiment): scattered multi-row logo wall in the clients section. Three .logo-wall-row marquees at different speeds and phases; each logo carries inline --h (size), --ty (vertical jitter), and --mx (extra horizontal spacing) so the drift reads as a loose scatter, not clean rows. */ .logo-wall { --marquee-gap: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; gap: 0.6rem; max-width: 1100px; margin: 0 auto; padding: 0.8rem 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .logo-wall-row { display: flex; gap: var(--marquee-gap); padding-block: 16px; } .logo-wall .logo-track { animation-duration: var(--row-duration, 90s); animation-delay: var(--row-delay, 0s); } .logo-wall .logo-track img { height: calc(var(--h, 72px) * var(--logo-scale, 1)); max-width: none; transform: translateY(var(--ty, 0px)); margin-inline: calc(var(--mx, 0px) * var(--logo-scale, 1)); } .logo-wall:hover .logo-track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .logo-wall { -webkit-mask-image: none; mask-image: none; } .logo-wall .logo-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 1.6rem; } .logo-wall .logo-track img { transform: none; margin-inline: 0; } .logo-wall .logo-track[aria-hidden="true"] { display: none; } } @media (max-width: 640px) { .logo-wall { --logo-scale: 0.62; } .logo-wall-row { padding-block: 8px; } } /* ---------- About preview / About page ---------- */ .about-preview { padding: 7rem 0; background: var(--cream); } .about-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 4rem; align-items: center; } .about-photo, .about-photo-large { aspect-ratio: 4/5; background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%); border-radius: var(--radius); position: relative; overflow: hidden; } .about-photo::after, .about-photo-large::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; color: rgba(255,255,255,0.3); } .about-photo img, .about-photo-large img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .about-photo:has(img), .about-photo-large:has(img) { background: none; } .about-photo:has(img)::after, .about-photo-large:has(img)::after { content: none; } /* About-preview photo container matches the natural portrait aspect so nothing crops */ .about-preview .about-photo { aspect-ratio: 2/3; } .about-intro .about-photo-large { aspect-ratio: 2/3; } .about-copy h2 { margin-bottom: 1rem; } .about-copy p { color: var(--muted); margin-bottom: 1.2rem; font-size: 1.05rem; } .page-hero { position: relative; min-height: clamp(380px, 66vh, 660px); display: flex; align-items: flex-end; padding: 11rem 0 4rem; background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; } .page-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; z-index: -2; } @media (max-width: 768px), (prefers-reduced-motion: reduce) { .page-hero-media { background-attachment: scroll; } } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 100%), linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.35) 100%); z-index: -1; } .page-hero h1 { color: var(--paper); margin-bottom: 1rem; } .page-hero .eyebrow { color: rgba(255,255,255,0.78); } .page-hero .page-lede { color: rgba(255,255,255,0.88); } /* FAQ hero: the guest reacting is on the LEFT of this photo and Michael on the right. On narrow/mobile crops, default center framing shows only Michael, so pin the crop to the left to keep the delighted guest in frame. Harmless on desktop (the full landscape shows with no horizontal overflow). */ body.page-faqs .page-hero-media { background-position: left center; } .page-lede { font-size: 1.25rem; color: var(--muted); max-width: 700px; } .about-intro { padding: 4rem 0 7rem; background: var(--paper); } .about-photo-band { padding: 0 0 7rem; background: var(--paper); } .band-photo { aspect-ratio: 21/9; background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%); border-radius: var(--radius); position: relative; overflow: hidden; } .band-photo::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; color: rgba(255,255,255,0.3); font-size: 1.2rem; } .band-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .band-photo:has(img) { background: none; } .band-photo:has(img)::after { content: none; } /* ---------- Testimonials ---------- */ .testimonials { padding: 7rem 0; background: var(--stone); } .quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; /* stretch so the two cards in each pair are equal height -> the blue quote boxes match within the pair (each grid/pair sizes to its own tallest card, so the two pairs don't have to match each other) */ align-items: stretch; } .quote-card { position: relative; /* bottom margin removed 2026-06-12: nothing hangs below the card since the stacked-quote redesign; the grid gap is the spacing */ margin: 0 2rem 0 0; /* flex column so the photo stays fixed and the blue box grows to fill, equalizing the box height across the pair (see .quote-grid stretch) */ display: flex; flex-direction: column; } .quote-photo { aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; background: var(--ink); flex: none; } .quote-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .quote-content { position: relative; /* stacked card system (unified 2026-06-12): quote box flows below the photo and pulls up over its bottom strip */ margin: -2.5rem -2rem 0 2rem; background: var(--ink); color: var(--paper); padding: 1.7rem 1.9rem 1.4rem; border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0,0,0,0.28); /* grow to fill the (equal-height) card; caption pins to the bottom so the shorter quote's extra room sits between the text and the name */ flex: 1; display: flex; flex-direction: column; } .quote-mark { position: absolute; top: -1.6rem; left: 1.4rem; font-family: var(--font-display); font-size: 4.5rem; color: var(--gold); line-height: 1; pointer-events: none; } .quote-content blockquote { margin: 0 0 1rem; font-family: var(--font-body); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.92); } .quote-content figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: auto; } .quote-name { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--paper); } .quote-stars { color: var(--gold); font-size: 1rem; letter-spacing: 0.08em; } /* ---------- Gallery ---------- */ .gallery { padding: 0; background: var(--ink); } /* Gallery: 3-column grid, each photo shows at its NATURAL aspect ratio (no square crop, no object-fit: cover, no hover zoom). align-items: start keeps short photos at their real height rather than stretching to match the tallest item in the row. */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; align-items: start; } .gallery-item { position: relative; cursor: default; } .gallery-item img { width: 100%; height: auto; display: block; } /* Empty gallery slot. Off-white block with centered "Placeholder" text while Michael finalizes the photo lineup. Uses a 4:3 aspect-ratio so it has reasonable visible height even without an image inside. */ .gallery-placeholder { background: var(--surface-light); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; } .gallery-placeholder span { font-family: var(--font-display); font-style: italic; font-size: clamp(0.9rem, 1.5vw, 1.1rem); letter-spacing: 0.18em; text-transform: uppercase; color: #6b6b6b; } /* ---------- Reviews callout ---------- */ .reviews-callout { padding: 7rem 0; background: var(--ink); color: var(--paper); text-align: center; } .reviews-title { color: var(--paper); font-family: var(--font-body); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(2rem, 3.5vw, 2.8rem); margin: 0 0 3.5rem; } .review-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 0 0 3rem; text-align: left; } .review-card { border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); padding: 1.8rem 1.6rem 1.6rem; display: flex; flex-direction: column; background: rgba(255,255,255,0.02); transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .review-card:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); } .review-card-placeholder blockquote { color: rgba(255,255,255,0.45); font-style: italic; } .review-stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 0.18em; margin-bottom: 1.4rem; } .review-card blockquote { margin: 0 0 1.1rem; font-family: var(--font-body); font-style: normal; font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,0.88); flex: 1; } .review-name { margin: 0 0 1rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.65); } .review-source { font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; margin-top: auto; display: inline-flex; } .review-source .g-b { color: #4285F4; } .review-source .g-r { color: #DB4437; } .review-source .g-y { color: #F4B400; } .review-source .g-gr { color: #0F9D58; } /* ---------- Final CTA ---------- */ .final-cta { position: relative; /* same total height as the original 10rem/10rem, but weighted top-heavy so the content shifts DOWN and the "Make..." heading lands at the section's vertical center (more top padding, less bottom, sum unchanged) */ padding: 14rem 0 6rem; color: var(--paper); text-align: center; overflow: hidden; isolation: isolate; } .final-media { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.8) 100%), url('../assets/photos/guest-shock-reaction.webp') center/cover no-repeat; z-index: -1; } .final-cta h2 { color: var(--paper); font-size: clamp(2.4rem, 5vw, 4.2rem); margin-bottom: 2rem; } /* ---------- Contact ---------- */ .contact-hero { padding-bottom: 3rem; } .form-row { display: grid; gap: 0.45rem; } .form-note { margin: 0; padding: 1rem 1.2rem; background: var(--cream); border-left: 3px solid var(--gold); color: var(--ink); font-size: 0.95rem; line-height: 1.5; border-radius: var(--radius); } .contact-intro { padding: 4rem 0 1rem; background: var(--stone); } .contact-intro-text { max-width: 760px; margin: 0 auto; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.5; color: var(--ink); } .contact-form-section { padding: 2rem 0 7rem; background: var(--stone); } .contact-form-wrap { max-width: 920px; margin: 0 auto; background: var(--paper); border-radius: var(--radius); padding: 2.5rem; box-shadow: 0 8px 30px rgba(10,10,10,0.06); } /* Two-column grid layout for the contact page form. */ @media (min-width: 720px) { .contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; row-gap: 1.4rem; } .contact-form-grid .form-row { margin: 0; } .contact-form-grid .form-row--full { grid-column: 1 / -1; } .contact-form-grid .form-row--submit { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 0.4rem; } .contact-form-grid .book-send { align-self: flex-start; } } .contact-form-grid.book-contact-form { gap: 1.2rem; } .contact-form-grid .form-row--submit .book-send { margin-top: 0; } /* ---------- About page: welcome + bio (live-site flow) ---------- */ .about-welcome { background: var(--paper); padding: 6rem 0 2rem; /* Left-aligned text (block stays centered on the page): a clean left edge reads faster than centered multi-line body copy, and the first-person "Hello! I'm Michael..." note feels more personal this way. (2026-06-14) */ text-align: left; } .about-welcome-inner { max-width: 760px; margin: 0 auto; } .about-welcome-head { margin-bottom: 2rem; } .about-welcome-head .eyebrow { color: var(--muted); } .about-welcome-head h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -0.01em; margin: 0.5rem 0 0; } .about-welcome-copy p { font-size: 1.15rem; line-height: 1.7; color: var(--ink); margin: 0 0 1.2rem; } /* Book Now CTA below the welcome paragraph. */ .about-welcome-cta { margin: 2rem 0 0; } .about-bio { background: var(--stone); padding: 6rem 0 7rem; } .about-bio-inner { max-width: 1080px; margin: 0 auto; } .about-bio-head { text-align: center; margin-bottom: 3rem; } .about-bio-head .eyebrow { color: var(--muted); } .about-bio-head h2 { font-size: clamp(2.2rem, 4.5vw, 3rem); letter-spacing: -0.01em; margin: 0.5rem 0 0; } /* Two-column bio layout: prose + bullets on the left, headshot on the right. align-items: stretch makes the two columns match height end to end: text top lines up with photo top, text bottom lines up with photo bottom. The photo container fills its grid row; the img inside uses object-fit: cover to crop instead of distort. */ .about-bio-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 3.5rem; align-items: stretch; } .about-bio-content { display: flex; flex-direction: column; justify-content: space-between; } .about-bio-copy p { font-size: 1.05rem; line-height: 1.75; color: var(--ink); margin: 0 0 1.4rem; } .about-bio-copy p:last-child { margin-bottom: 0; } .about-awards { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 1rem; } .about-awards li { font-size: 1rem; line-height: 1.55; color: var(--ink); padding-left: 1.5rem; position: relative; } .about-awards li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; } .about-awards strong { color: var(--ink); font-weight: 600; } .about-bio-photo { /* No aspect-ratio on desktop: the photo container stretches to match the height of the text column (set by .about-bio-grid align-items: stretch). Mobile breakpoint below restores a fixed aspect ratio. */ border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 88px rgba(0,0,0,0.6), 0 14px 32px rgba(0,0,0,0.45); min-height: 320px; /* floor so the photo never collapses on very short text */ } .about-bio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 880px) { .about-bio-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-bio-photo { /* Mobile: show the full portrait uncropped. Drop the desktop stretch (the fixed aspect-ratio box + min-height floor) so the container hugs the image's natural 2:3 instead of cropping it. */ aspect-ratio: auto; min-height: 0; max-width: 380px; margin: 0 auto; } .about-bio-photo img { height: auto; object-fit: contain; object-position: center; } } /* ---------- About: Awards and recognition section ---------- */ .about-awards-section { padding: 6rem 0 7rem; background: var(--paper); } .about-awards-section-head { text-align: center; margin-bottom: 4rem; } .about-awards-section-head .eyebrow { color: var(--muted); } .about-awards-section-head h2 { font-size: clamp(2.2rem, 4.5vw, 3rem); letter-spacing: -0.01em; margin: 0.5rem 0 0; display: flex; justify-content: center; align-items: center; gap: clamp(0.8rem, 2.5vw, 1.6rem); flex-wrap: wrap; } .awards-laurel { width: clamp(56px, 7vw, 84px); height: auto; flex-shrink: 0; display: block; } .award-grid { display: grid; grid-template-columns: 1fr; gap: 4.5rem; max-width: 1040px; margin: 0 auto; } .award-card { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; } /* Cards without an image AND without an action collapse to full-width content */ .award-card:not(:has(.award-media)):not(:has(.award-action)) { grid-template-columns: 1fr; } .award-card .award-content { grid-column: 1; grid-row: 1; } .award-card .award-media { grid-column: 2; grid-row: 1; } .award-card .award-action { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; } .award-content h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); margin: 0 0 0.5rem; letter-spacing: -0.01em; } .award-meta { font-size: 0.92rem; color: var(--muted); margin: 0 0 1rem; font-style: italic; } .award-content > p:not(.award-meta) { color: var(--ink); line-height: 1.65; margin: 0; font-size: 1.02rem; } .award-content > p:not(.award-meta) + p:not(.award-meta) { margin-top: 0.8rem; } .award-media { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--ink); box-shadow: 0 30px 70px rgba(0,0,0,0.58), 0 12px 28px rgba(0,0,0,0.42); } .award-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Small gold ornament between cards (matches the services section). */ .award-card:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -2.25rem; transform: translateX(-50%); width: 96px; height: 1px; background: var(--accent); opacity: 0.55; } @media (max-width: 720px) { .award-grid { gap: 3.5rem; } .award-card { grid-template-columns: 1fr; gap: 1.5rem; } .award-card .award-media { grid-column: 1; grid-row: 1; } .award-card .award-content { grid-column: 1; grid-row: 2; } /* For action cards (button instead of image), keep text on top and button below */ .award-card:has(.award-action) .award-content { grid-row: 1; } .award-card .award-action { grid-column: 1; grid-row: 2; justify-content: center; } .award-card:not(:last-child)::after { bottom: -1.75rem; width: 72px; } /* The gold corner ornaments are sized for the wide desktop card. On a narrow phone card they crowd the text into the corners, so shrink them and give the content a little more breathing room from the frame. */ :is([data-theme="ember"], [data-theme="fism"]) .award-card { background-size: 54px 54px; padding: 2rem 1.6rem 2.2rem; } } /* ---------- FAQs page ---------- */ .faqs-hero-title { font-size: clamp(3rem, 8vw, 6rem); letter-spacing: -0.02em; margin: 0 0 0.6rem; } .faqs-container { max-width: 820px; } .faqs-section { padding: 4rem 0 7rem; background: var(--paper); } .faq-list { display: grid; border-bottom: 1px solid rgba(10,10,10,0.12); } .faq-item { border-top: 1px solid rgba(10,10,10,0.12); } .faq-item > summary { list-style: none; cursor: pointer; padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; gap: 2rem; font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 600; line-height: 1.3; color: var(--ink); transition: color 0.2s var(--ease); } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::marker { display: none; } .faq-item > summary:hover { color: var(--gold); } .faq-item > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; } .faq-q { flex: 1; } .faq-toggle { position: relative; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid rgba(10,10,10,0.25); border-radius: 50%; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.3s var(--ease); } .faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; transition: transform 0.3s var(--ease); } .faq-toggle::before { top: 50%; left: 9px; right: 9px; height: 1.5px; margin-top: -0.75px; } .faq-toggle::after { top: 9px; bottom: 9px; left: 50%; width: 1.5px; margin-left: -0.75px; } .faq-item[open] .faq-toggle::after { transform: scaleY(0); } .faq-item[open] .faq-toggle { background: var(--ink); border-color: var(--ink); color: var(--paper); } .faq-item > summary:hover .faq-toggle { border-color: var(--gold); color: var(--gold); } .faq-item[open] > summary:hover .faq-toggle { background: var(--gold); border-color: var(--gold); color: var(--ink); } .faq-answer { padding: 0 0 1.8rem; max-width: 760px; animation: faq-fade 0.35s ease-out; } .faq-answer p { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0; } .faq-answer p + p { margin-top: 0.9rem; } .faq-answer p.faq-fine-print { font-size: 0.82rem; margin-top: 1rem; opacity: 0.78; } @keyframes faq-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Homepage mini-FAQ: reuses the .faqs-section accordion styles (background, accordion, hover, toggle) and adds a centered head block + a "See all FAQs" CTA below the three items. */ .faqs-mini { padding: 6rem 0; } .faqs-mini-head { text-align: center; margin: 0 auto 3rem; max-width: 760px; } .faqs-mini-head .eyebrow { margin: 0 0 0.5rem; } .faqs-mini-head h2 { font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -0.01em; margin: 0; } .faqs-mini-cta { text-align: center; margin-top: 3rem; } /* ---------- Footer ---------- */ .site-footer { padding: 4rem 0 2rem; background: var(--ink); color: rgba(255,255,255,0.7); } .footer-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; margin-bottom: 2.5rem; } .footer-brand { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; color: var(--paper); margin: 0; letter-spacing: -0.01em; } .footer-nav-block { text-align: center; } .footer-nav-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 0.7rem; } .footer-nav { display: flex; flex-direction: row; justify-content: center; gap: 1.8rem; align-items: center; } .footer-nav a { color: rgba(255,255,255,0.85); font-size: 0.95rem; letter-spacing: 0.02em; transition: color 0.2s var(--ease); } .footer-nav a:hover { color: var(--gold); } .footer-ig { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); transition: color 0.2s var(--ease); } .footer-ig:hover { color: var(--gold); } .footer-line { border: 0; height: 1px; background: rgba(255,255,255,0.5); margin: 0 0 1.5rem; } .footer-areas { text-align: center; font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.55; max-width: 760px; margin: 1.6rem auto 1.6rem; } .footer-meta { text-align: center; font-size: 0.78rem; color: rgba(255,255,255,0.45); margin: 0; } .final-tagline { font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255,255,255,0.85); margin: -0.4rem 0 1.8rem; font-style: italic; font-family: var(--font-display); } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; } .hero-scroll { animation: none; } html { scroll-behavior: auto; } } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .service-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto 1fr auto auto 1fr; } .quote-grid, .review-card-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); } .cred-list { grid-template-columns: 1fr; gap: 3rem; } .cred-list li + li::before { display: none; } .logo-row { grid-template-columns: repeat(3, 1fr); } .about-grid, .contact-grid, .fism-grid { grid-template-columns: 1fr; gap: 2.5rem; } .fism-award img { max-width: 360px; } .footer-top { grid-template-columns: 1fr; gap: 2rem; text-align: center; justify-items: center; } .footer-ig { justify-self: center; } .cred-stack li { grid-template-columns: 100px 1fr; gap: 1.2rem; } .cred-year { font-size: 1.5rem; } } @media (max-width: 720px) { body { font-size: 16px; } .nav-toggle { display: flex; } .primary-nav { position: fixed; inset: 0 0 0 auto; width: min(82vw, 380px); background: var(--ink); color: var(--paper); flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem; padding: 5rem 2rem 2rem; transform: translateX(100%); transition: transform 0.4s var(--ease-out); box-shadow: -20px 0 50px rgba(0,0,0,0.3); } .primary-nav.is-open { transform: translateX(0); } /* When scrolled, the header gains a backdrop-filter, which makes it the containing block for its position:fixed descendants. That trapped the open menu inside the ~50px header box (only the bottom links showed, panel misaligned). Dropping the filter while the menu is open lets the fixed panel anchor to the viewport again. */ .site-header:has(.primary-nav.is-open) { backdrop-filter: none; -webkit-backdrop-filter: none; } .primary-nav .nav-link { color: var(--paper); font-size: 1.3rem; } .primary-nav .nav-cta { background: var(--paper); color: var(--ink); border-color: var(--paper); align-self: flex-start; } .nav-toggle.is-open { position: relative; z-index: 60; } .nav-toggle.is-open span { background: var(--paper); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .cred-list, .quote-grid, .review-card-grid, .gallery-grid { grid-template-columns: 1fr; } .service-grid { grid-template-columns: 1fr; grid-template-rows: none; } .service-card { grid-template-rows: none; grid-row: auto; } .quote-card { margin: 0 1rem 0 0; } .quote-content { margin: -1.8rem -1rem 0 1rem; padding: 1.4rem 1.5rem 1.2rem; } .logo-row { grid-template-columns: repeat(2, 1fr); } .form-row-split { grid-template-columns: 1fr; gap: 1rem; } .hero-inner { padding: 8rem 0 5rem; } .credentials, .services, .clients, .testimonials, .gallery, .about-preview, .about-intro, .contact-form-section { padding: 4.5rem 0; } .fism, .reviews-callout { padding: 5rem 0; } /* Same total height as 6rem/6rem, weighted top-heavy so the headline shifts DOWN toward the section's vertical center (mirrors the desktop treatment). */ .final-cta { padding: 8.5rem 0 3.5rem; } .page-hero { padding-top: 9rem; } } /* ---------- Blog ---------- */ .blog-index { padding: 5rem 0 7rem; background: var(--paper); } .post-list { max-width: 820px; margin: 0 auto; display: grid; gap: 0; border-top: 1px solid rgba(10,10,10,0.12); } .post-card { border-bottom: 1px solid rgba(10,10,10,0.12); } .post-card-link { display: block; padding: 2.2rem 0; color: inherit; transition: transform 0.2s var(--ease); } .post-card-link:hover { transform: translateX(4px); } .post-card-date { margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .post-card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.7rem; } .post-card-link:hover .post-card-title { color: var(--gold); } .post-card-excerpt { margin: 0 0 0.9rem; font-size: 1.02rem; line-height: 1.55; color: var(--ink); max-width: 720px; } .post-card-cta { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 2px; } .post-list-empty { padding: 4rem 0; text-align: center; color: var(--muted); } .blog-post { padding: 4rem 0 5rem; background: var(--paper); } .blog-post-header, .blog-post-content, .blog-post-footer { max-width: 720px; margin-left: auto; margin-right: auto; padding-inline: var(--gutter); } .blog-post-header { padding-top: 7rem; padding-bottom: 2rem; } .breadcrumbs { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; } .breadcrumbs a { color: var(--muted); border-bottom: 1px solid transparent; } .breadcrumbs a:hover { color: var(--ink); border-bottom-color: var(--gold); } .breadcrumbs span[aria-hidden] { margin: 0 0.5em; color: rgba(10,10,10,0.3); } .blog-post-header h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 1rem; } .blog-post-meta { font-size: 0.92rem; color: var(--muted); margin: 0; } .blog-post-meta a { color: var(--ink); border-bottom: 1px solid var(--gold); } .blog-post-content { font-size: 1.08rem; line-height: 1.75; color: var(--ink); padding-top: 1.5rem; padding-bottom: 2rem; } .blog-post-content p { margin: 0 0 1.3rem; } .blog-post-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.5rem 0 1rem; color: var(--ink); letter-spacing: -0.01em; } .blog-post-content h3 { font-size: 1.25rem; margin: 2rem 0 0.8rem; color: var(--ink); } .blog-post-content ul, .blog-post-content ol { padding-left: 1.4rem; margin: 0 0 1.4rem; } .blog-post-content li { margin-bottom: 0.6rem; } .blog-post-content a { color: var(--ink); border-bottom: 1px solid var(--gold); transition: color 0.2s var(--ease); } .blog-post-content a:hover { color: var(--gold); } .blog-post-content blockquote { margin: 1.8rem 0; padding: 0.6rem 1.4rem; border-left: 3px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--ink); } .blog-post-content img { margin: 2rem auto; border-radius: var(--radius); } .blog-post-content strong { color: var(--ink); font-weight: 600; } .blog-post-footer { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; padding-top: 1rem; padding-bottom: 2rem; border-top: 1px solid rgba(10,10,10,0.08); margin-top: 2rem; } @media (max-width: 720px) { .blog-post-header { padding-top: 6rem; } .blog-post-content { font-size: 1.02rem; line-height: 1.7; } } /* ===================================================== STYLING REFINEMENT LAYER (added in design review) Everything below tunes the existing system. It does not change markup. Safe to read top to bottom, easy to revert by deleting this block. Grouped by section. ===================================================== */ :root { /* shadow tokens so elevation is consistent everywhere (accent + neutral tokens now live in the main :root at the top) */ --shadow-sm: 0 2px 8px rgba(10,10,10,0.06); --shadow-md: 0 14px 40px rgba(10,10,10,0.10); --shadow-lg: 0 30px 80px rgba(10,10,10,0.22); } /* ---- Global type: tighten display headings, warm the body ---- */ h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } .hero-lede, .section-lede, .promo-head p, .book-lede { text-wrap: pretty; } /* ---- HERO: more theatrical, stronger focal hierarchy ---- */ .hero-overlay { /* add a soft vignette + a touch of warmth so the gold pops */ background: linear-gradient(rgba(13, 23, 54, 0.30), rgba(13, 23, 54, 0.30)), radial-gradient(120% 90% at 82% 60%, transparent 30%, rgba(0,0,0,0.30) 100%), linear-gradient(270deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.24) 50%, rgba(0,0,0,0.12) 100%), linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.58) 100%); } /* mirrored hero (2026-06-12): content sits right so the laughing guests on the photo's left side stay visible. The hero escapes the 1200px container cap so the column rides toward the true right edge of wide screens, BUT the column itself keeps the same 1144px width as the centered layout so the headline and lede wrap exactly as before. A thin fixed cushion keeps it from touching the edge. */ .hero .container { max-width: none; padding-right: clamp(24px, 3vw, 48px); } /* hero ends just below the CTA row: no full-viewport stretch, bottom cushion matches the thin right margin */ .hero { min-height: 0; padding-bottom: clamp(24px, 3vw, 48px); } .hero .hero-inner { padding-bottom: 0; } .hero-scroll { display: none; } .hero .hero-inner { max-width: 1144px; margin-left: auto; margin-right: 0; text-align: right; } .hero-laurels { justify-content: flex-end; } .hero-cta { justify-content: flex-end; } .hero .eyebrow-light { flex-direction: row-reverse; } .hero .eyebrow-light { display: inline-flex; align-items: center; gap: 0.85rem; color: rgba(255,255,255,0.82); } .hero .eyebrow-light::before { content: ""; width: 34px; height: 1px; background: var(--gold-bright); } .hero-title { font-size: clamp(2.9rem, 7vw, 6rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; text-shadow: 0 2px 30px rgba(0,0,0,0.35); } .hero-lede { font-style: italic; font-family: var(--font-display); font-weight: 400; color: var(--gold-bright); font-size: clamp(1.25rem, 2.1vw, 1.7rem); letter-spacing: 0.01em; } .promise-list li { font-size: 1.08rem; line-height: 1.4; color: rgba(255,255,255,0.9); } .hero .btn-light { box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 1.05rem 2.2rem; } /* ---- Mobile hero: stack the FULL photo above the content (2026-06-14). The desktop overlay design crops the 16:9 scene to a dark vertical slice on a phone, losing Michael and most of the reacting guests. On mobile we drop the overlay, place the whole uncropped photo in a 16:9 band at the top, and run the headline / award laurels / CTA below on the brand navy. ---- */ @media (max-width: 720px) { .hero { display: flex; flex-direction: column; min-height: 0; padding: 0 0 3.6rem; background: var(--ink); } .hero-media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; /* box is 16:9 and the photo is 16:9, so cover = the entire image, no crop. Top scrim keeps the floating header legible over the photo. */ background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 26%), url('../assets/photos/homepage-hero.webp') center / cover no-repeat; transform: none !important; will-change: auto; z-index: 0; } .hero-overlay { display: none; } .hero .hero-inner { max-width: none; width: 100%; margin: 0; text-align: center; padding: 2.6rem 1.4rem 0; } .hero .eyebrow-light { flex-direction: row; justify-content: center; } .hero-laurels { justify-content: center; margin-bottom: 2.2rem; } .hero-cta { flex-direction: column; justify-content: center; gap: 1.1rem; } } /* ---- Buttons: a hair more refined, springier hover ---- */ .btn { transition: transform 0.25s var(--ease-out), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .btn:hover { box-shadow: 0 8px 22px rgba(201,169,97,0.35); } .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } /* ---- Credentials: warmer ground, refined laurels ---- */ .cred-laurel { filter: drop-shadow(0 1px 2px rgba(168,132,47,0.35)); } .cred-eyebrow { color: var(--gold-deep); } .cred-line { letter-spacing: -0.01em; } /* ---- Section headings: simple gold kicker under centered titles ---- */ .services-title, .reviews-title { position: relative; } .services-title::after, .reviews-title::after { content: ""; display: block; width: 54px; height: 2px; margin: 1.1rem auto 0; background: var(--gold); } .reviews-title::after { background: var(--gold-bright); opacity: 0.85; } /* Homepage section headers in italics (Playfair italic reads as editorial). Hero is

, untouched. Cards use

, untouched. Two h2 exceptions kept upright: FISM big-statement (already mixes its own emphasis), and the final-CTA headline (stays declarative). */ body.page-home main h2 { font-style: italic; } body.page-home .fism h2, body.page-home .final-cta h2 { font-style: normal; } /* ---- Drop shadows on key photo containers. Michael's preference: shadows should be visibly present. Tuned heavy enough to read clearly on the dark FISM surfaces (the original subtle values were washing out against navy/blue). Uses pure black so it reads on light and dark themes alike. ---- */ .service-media { box-shadow: 26px 26px 56px rgba(0,0,0,0.78), 10px 10px 22px rgba(0,0,0,0.58); transition: box-shadow 0.35s var(--ease); } .service-media:hover { box-shadow: 32px 32px 76px rgba(0,0,0,0.88), 14px 14px 30px rgba(0,0,0,0.68); } .service-card h3 { letter-spacing: -0.01em; } /* Homepage photos */ .about-preview .about-photo { box-shadow: 0 30px 66px rgba(0,0,0,0.55), 0 10px 26px rgba(0,0,0,0.4); } .book-photo { box-shadow: 0 28px 64px rgba(0,0,0,0.55), 0 10px 24px rgba(0,0,0,0.4); } .quote-photo { box-shadow: 0 28px 64px rgba(0,0,0,0.55), 0 10px 24px rgba(0,0,0,0.4); } .yt-facade { box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 12px 28px rgba(0,0,0,0.45); transition: box-shadow 0.35s var(--ease); } .yt-facade:hover { box-shadow: 0 40px 88px rgba(0,0,0,0.68), 0 16px 36px rgba(0,0,0,0.5); } /* ---- Testimonials: richer quote cards ---- */ .quote-content { background: linear-gradient(165deg, #141414 0%, #0a0a0a 100%); box-shadow: var(--shadow-lg); border: 1px solid rgba(201,169,97,0.14); } .quote-name { color: var(--gold-bright); } /* ---- Reviews callout: warmer dark, gold top hairline on cards ---- */ .review-card { position: relative; overflow: hidden; } .review-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); opacity: 0; transition: opacity 0.25s var(--ease); } .review-card:hover::before { opacity: 1; } .review-card:hover { transform: translateY(-3px); } .review-card { transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease); } /* ---- Final CTA: deepen the cinematic fade ---- */ .final-cta h2 { font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0,0,0,0.4); } /* ---- Footer: brand gets a gold underline accent ---- */ .footer-brand { position: relative; display: inline-block; } /* ---- Past Clients: brought ON-BRAND (was a rogue blue gradient) ---- The blue (#4582DC → #2A5AA8) was the only off-palette color on the site. Recolored to warm Stone so it sits in the brand, between the dark promo reel above and the cream about-preview below (a gradual dark→light step). To revert to Michael's blue, delete this .clients block. */ .clients { background: var(--stone); border-top: 1px solid var(--hairline, rgba(10,10,10,0.08)); border-bottom: 1px solid var(--hairline, rgba(10,10,10,0.08)); } .clients-title { color: var(--ink); font-style: italic; } .clients-title::after { content: ""; display: block; width: 54px; height: 2px; margin: 1.2rem auto 0; background: var(--gold); } /* ===================================================================== SHARED DARK-THEME TREATMENT Applies to every dark style pack (Ember, FISM, …). Each pack only supplies the tokens above; this block does the actual restyle so the work is written once. The default Gold theme is untouched by all of this (none of these selectors match when no data-theme is set). Uses :is() to target all dark packs at once. ===================================================================== */ :is([data-theme="ember"], [data-theme="fism"]) body { background: var(--bg-neutral); color: var(--text); } /* Headings + body text follow the warm off-white */ :is([data-theme="ember"], [data-theme="fism"]) :where(h1, h2, h3, h4) { color: var(--text); } /* CONTENT text (anything the visitor is meant to read) uses the readable --text-soft tier in dark themes. Reserve --slate for ORIENTING metadata only (dates, bylines, breadcrumbs, fine print, meta labels). */ :is([data-theme="ember"], [data-theme="fism"]) .section-lede, :is([data-theme="ember"], [data-theme="fism"]) .cred-sub, :is([data-theme="ember"], [data-theme="fism"]) .service-card p, :is([data-theme="ember"], [data-theme="fism"]) .about-copy p, :is([data-theme="ember"], [data-theme="fism"]) .book-lede, :is([data-theme="ember"], [data-theme="fism"]) .cred-stack p, :is([data-theme="ember"], [data-theme="fism"]) .faq-answer p, :is([data-theme="ember"], [data-theme="fism"]) .placeholder-note { color: var(--text-soft); } /* Services lede sits on royal blue; needs the brighter readable tier (text-soft) rather than the muted grey default so visitors actually read it. */ :is([data-theme="ember"], [data-theme="fism"]) .services-lede { color: var(--text-soft); } /* Award laurels, stars, and quote marks stay GOLD (medal) in every theme — they are physically gold objects, independent of the theme color. */ :is([data-theme="ember"], [data-theme="fism"]) .cred-laurel, :is([data-theme="ember"], [data-theme="fism"]) .quote-mark, :is([data-theme="ember"], [data-theme="fism"]) .quote-stars, :is([data-theme="ember"], [data-theme="fism"]) .review-stars { color: var(--medal-bright); } /* Text flourishes follow the theme accent */ :is([data-theme="ember"], [data-theme="fism"]) .cred-eyebrow, :is([data-theme="ember"], [data-theme="fism"]) .cred-year, :is([data-theme="ember"], [data-theme="fism"]) .fism em, :is([data-theme="ember"], [data-theme="fism"]) .promise-list strong { color: var(--accent-bright); } /* Michael prefers these phrases without italic styling for scannability; keep the for semantic emphasis (and the FISM gold color above), drop italics. */ .fism em { font-style: normal; } /* ---- Header: dark when scrolled, light links ---- */ :is([data-theme="ember"], [data-theme="fism"]) .site-header[data-state="scrolled"] { background: color-mix(in srgb, var(--bg) 92%, transparent); border-color: var(--hairline); } :is([data-theme="ember"], [data-theme="fism"]) .site-header[data-state="scrolled"] .brand, :is([data-theme="ember"], [data-theme="fism"]) .site-header[data-state="scrolled"] .nav-link { color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .site-header[data-state="scrolled"] .nav-toggle span { background: var(--text); } /* ---- BACKGROUND RHYTHM (alternating, distinct sections) ---- Neighbours never share a background, so each section reads as separate. Three neutral levels (near-black, grey, deepest) rotate between the image sections, and the saturated theme color marks 3 spaced "brand moments". 2 Awards/credentials .... BRAND (gradient, below) 3 Contact form .......... near-black 4 Testimonials .......... GREY 5 Services .............. near-black 6 FISM .................. image 7 Promo ................. GREY 8 Past clients .......... BRAND 9 About ................. near-black 10 Testimonials .......... GREY 11 Gallery ............... image 12 Reviews ............... BRAND 14 Footer ................ deepest */ /* near-black sections */ :is([data-theme="ember"], [data-theme="fism"]) .book-form, :is([data-theme="ember"], [data-theme="fism"]) .services, :is([data-theme="ember"], [data-theme="fism"]) .about-preview { background: var(--bg-neutral); } /* GREY sections — testimonials (both) + promo + event-coverage */ :is([data-theme="ember"], [data-theme="fism"]) .testimonials, :is([data-theme="ember"], [data-theme="fism"]) .promo, :is([data-theme="ember"], [data-theme="fism"]) .event-coverage { background: var(--bg-grey); } :is([data-theme="ember"], [data-theme="fism"]) .event-coverage-head p, :is([data-theme="ember"], [data-theme="fism"]) .event-coverage-block p { color: var(--text-soft); } /* deepest neutral — gallery backdrop + footer */ :is([data-theme="ember"], [data-theme="fism"]) .gallery, :is([data-theme="ember"], [data-theme="fism"]) .site-footer { background: var(--bg-neutral-deep); } /* BRAND MOMENT 1 — Credentials keeps its saturated gradient (defined below) */ /* BRAND MOMENT 2 — Past clients: saturated theme-color band + light logo panel */ :is([data-theme="ember"], [data-theme="fism"]) .clients { background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); border-color: var(--hairline); } :is([data-theme="ember"], [data-theme="fism"]) .clients-title { color: var(--text); } /* BRAND MOMENT 3 — Reviews callout: saturated theme color */ :is([data-theme="ember"], [data-theme="fism"]) .reviews-callout { /* warm top separates from the near-black event-coverage photo above (order swapped 2026-06-12) */ background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); } /* Credentials: dark warm gradient with an accent glow on top */ :is([data-theme="ember"], [data-theme="fism"]) .credentials { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); } :is([data-theme="ember"], [data-theme="fism"]) .credentials .cred-line { color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .credentials .cred-sub { color: var(--text-soft); } :is([data-theme="ember"], [data-theme="fism"]) .credentials::after, :is([data-theme="ember"], [data-theme="fism"]) .credentials .cred-list > li::after { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent); } /* ---- Form panels read as clean LIGHT cards (white in FISM, cream in Ember) ---- The booking form was navy/espresso ("blue"); a light card is more legible to fill in and reads as premium on the dark page. The SECTION behind each form stays dark, so the alternating page rhythm is completely unaffected. */ :is([data-theme="ember"], [data-theme="fism"]) .book-form-wrap, :is([data-theme="ember"], [data-theme="fism"]) .contact-form-wrap { background: var(--form-surface); border: 1px solid rgba(10,10,10,0.10); box-shadow: 0 30px 70px rgba(0,0,0,0.45); } :is([data-theme="ember"], [data-theme="fism"]) .book-form-wrap :where(h1,h2,h3) { color: #0a0a0a; } :is([data-theme="ember"], [data-theme="fism"]) .book-form-header p { color: #5e5e5e; } :is([data-theme="ember"], [data-theme="fism"]) .contact-form label, :is([data-theme="ember"], [data-theme="fism"]) .form-checks legend, :is([data-theme="ember"], [data-theme="fism"]) .check-row span { color: #1a1a1a; } :is([data-theme="ember"], [data-theme="fism"]) .contact-form input, :is([data-theme="ember"], [data-theme="fism"]) .contact-form textarea, :is([data-theme="ember"], [data-theme="fism"]) .contact-form select { background: #ffffff; color: #1a1a1a; border-color: rgba(10,10,10,0.22); } :is([data-theme="ember"], [data-theme="fism"]) .contact-form input::placeholder, :is([data-theme="ember"], [data-theme="fism"]) .contact-form textarea::placeholder { color: rgba(10,10,10,0.40); } :is([data-theme="ember"], [data-theme="fism"]) .contact-form input:focus, :is([data-theme="ember"], [data-theme="fism"]) .contact-form textarea:focus, :is([data-theme="ember"], [data-theme="fism"]) .contact-form select:focus { border-color: var(--accent-deep); outline: none; } :is([data-theme="ember"], [data-theme="fism"]) .form-recaptcha, :is([data-theme="ember"], [data-theme="fism"]) .form-recaptcha a { color: #888; } /* Quote cards: lift off the page with an accent edge */ :is([data-theme="ember"], [data-theme="fism"]) .quote-content { background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); box-shadow: 0 26px 60px rgba(0,0,0,0.55); } /* ---- Buttons: accent is now PRESENT, not just on hover ---- */ :is([data-theme="ember"], [data-theme="fism"]) .btn, :is([data-theme="ember"], [data-theme="fism"]) .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); } :is([data-theme="ember"], [data-theme="fism"]) .btn:hover, :is([data-theme="ember"], [data-theme="fism"]) .btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--bg); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent); } :is([data-theme="ember"], [data-theme="fism"]) .btn-ghost { background: transparent; color: var(--accent-bright); border-color: var(--accent); } :is([data-theme="ember"], [data-theme="fism"]) .btn-ghost:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); } /* Light buttons (on hero / final CTA images) keep their cream fill but gain accent hover */ :is([data-theme="ember"], [data-theme="fism"]) .btn-light:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } /* Header CTA pill at top of page uses the accent */ :is([data-theme="ember"], [data-theme="fism"]) .site-header[data-state="scrolled"] .nav-cta { background: var(--accent); border-color: var(--accent); color: var(--bg); } /* ===================================================================== SHARED DARK-THEME TREATMENT — OTHER PAGES The pack persists site-wide (localStorage), so About / FAQs / Contact / Blog must convert too, or light text lands on light backgrounds. Same :is() grouping, same tokens. ===================================================================== */ /* About page (FISM/Ember): welcome on white, bio on pale blue, both with dark text. Hero and final-cta keep their photo backgrounds. The reason it's done here instead of in the base sheet: dark themes default the body to light text, so any light surface needs an explicit dark-text override. */ :is([data-theme="ember"], [data-theme="fism"]) .about-intro, :is([data-theme="ember"], [data-theme="fism"]) .about-photo-band, :is([data-theme="ember"], [data-theme="fism"]) .credentials.full { background: var(--bg-neutral); } /* Surface rhythm on About: blue welcome -> white bio -> blue awards -> photo cta. The blue is the same royal-blue gradient as the homepage clients band and reviews callout (the "saturated brand moment" treatment) for visual consistency. Pending experiment: swap "Royal" for "Muted" brand color for a softer feel. See TODO.md "Michael's working notes". */ :is([data-theme="ember"], [data-theme="fism"]) .about-welcome { background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .about-bio { background: var(--paper); color: var(--ink); } /* FISM-only: match the homepage testimonials/clients off-white (cooler than pure paper). */ [data-theme="fism"] .about-bio { background: var(--surface-light); } /* Welcome (royal-blue surface): light text with gold accents */ :is([data-theme="ember"], [data-theme="fism"]) .about-welcome-head h2 { color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .about-welcome-copy p { color: var(--text-soft); } :is([data-theme="ember"], [data-theme="fism"]) .about-welcome-head .eyebrow { color: var(--accent-bright); } :is([data-theme="ember"], [data-theme="fism"]) .about-welcome-copy a { color: var(--text); border-bottom-color: var(--accent-bright); } :is([data-theme="ember"], [data-theme="fism"]) .about-welcome-copy a:hover { color: var(--accent-bright); } /* Bio (white surface): dark text. Body paragraphs and bullets share the same tone for visual consistency; bold tags pop slightly. */ :is([data-theme="ember"], [data-theme="fism"]) .about-bio-head h2 { color: var(--ink); } :is([data-theme="ember"], [data-theme="fism"]) .about-bio-copy p, :is([data-theme="ember"], [data-theme="fism"]) .about-awards li { color: #1d242e; } :is([data-theme="ember"], [data-theme="fism"]) .about-awards strong { color: var(--ink); } :is([data-theme="ember"], [data-theme="fism"]) .about-bio-head .eyebrow { color: #5a6173; } :is([data-theme="ember"], [data-theme="fism"]) .page-lede { color: var(--text-soft); } :is([data-theme="ember"], [data-theme="fism"]) .cred-stack { border-top-color: var(--hairline); } :is([data-theme="ember"], [data-theme="fism"]) .cred-stack li { border-bottom-color: var(--hairline); } /* Awards section: royal-blue section background, with each award card rendering as an off-white panel (same --surface-light treatment as the homepage services cards, testimonials section, and blog post card). Section head text stays light (it's on the blue surface); card content reverts to dark (it's on the off-white card). */ :is([data-theme="ember"], [data-theme="fism"]) .about-awards-section { background: url("../assets/graphics/damask-texture.webp") top left / 360px 360px repeat, linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .about-awards-section-head h2 { color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .about-awards-section-head .eyebrow { color: var(--accent-bright); } :is([data-theme="ember"], [data-theme="fism"]) .award-card { background-color: var(--surface-light); /* Gold corner appliques: Victorian baroque scrollwork ornament generated in Canva (see corner-ornament.png), then locally mirrored into four orientations (TL/TR/BL/BR) via PIL. Each PNG is positioned at its respective corner of the card's padding box, so the ornaments sit INSIDE the gold border rather than underneath it. */ background-image: url("../assets/graphics/corner-ornament-tl.webp"), url("../assets/graphics/corner-ornament-tr.webp"), url("../assets/graphics/corner-ornament-bl.webp"), url("../assets/graphics/corner-ornament-br.webp"); background-position: top left, top right, bottom left, bottom right; background-size: 100px 100px; background-origin: padding-box; background-repeat: no-repeat; border: 5px solid var(--medal); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.30); } /* Inner gold hairline 10px inside the outer border. Classic double-frame "moulding" feel without literal corner brackets. */ :is([data-theme="ember"], [data-theme="fism"]) .award-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--medal); border-radius: max(0px, calc(var(--radius) - 10px)); pointer-events: none; } :is([data-theme="ember"], [data-theme="fism"]) .award-content h3 { color: var(--ink); } :is([data-theme="ember"], [data-theme="fism"]) .award-content > p:not(.award-meta) { color: #1d242e; } :is([data-theme="ember"], [data-theme="fism"]) .award-meta { color: #6b6b6b; } /* Contact page */ :is([data-theme="ember"], [data-theme="fism"]) .contact-intro, :is([data-theme="ember"], [data-theme="fism"]) .contact-form-section { background: var(--bg-neutral); } :is([data-theme="ember"], [data-theme="fism"]) .contact-intro-text { color: var(--text-soft); } /* form-note sits inside the light form card now */ :is([data-theme="ember"], [data-theme="fism"]) .form-note { background: rgba(10,10,10,0.05); color: #1a1a1a; border-left-color: var(--accent-deep); } /* FAQs page */ /* FAQs page on FISM/Ember: royal-blue surface (matching About welcome/awards, Blog index/post, clients band, reviews callout) with light text and gold accents on hover and the open-state toggle. */ :is([data-theme="ember"], [data-theme="fism"]) .faqs-section { background: url("../assets/graphics/damask-texture.webp") top left / 360px 360px repeat, linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); } /* Thank-you page hero: same royal-blue + damask surface as the FAQs section (instead of the default dark page-hero). White heading/lede from .page-hero rules still apply; the lede's phone/email links go gold. */ :is([data-theme="ember"], [data-theme="fism"]) .page-hero.thanks-hero { background: url("../assets/graphics/damask-texture.webp") top left / 360px 360px repeat, linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); } .thanks-hero .page-lede a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Thank-you variant pages (nav = standard site behavior) ---------- */ /* Portrait version: full-bleed 50/50 split. Left half = damask + message; right half = the photo edge-to-edge (top to bottom), covering the damask. */ .page-hero.thanks-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: 0; min-height: clamp(520px, 82vh, 780px); } .thanks-split-text { display: flex; align-items: center; padding: 7rem clamp(1.5rem, 5vw, 5rem) 4rem; } .thanks-split-inner { max-width: 540px; } .thanks-split-photo { position: relative; overflow: hidden; } .thanks-split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; } /* Gif version: centered message flanked by a (gloriously bad) wizard on each side. */ .thanks-hero.thanks-wizards { align-items: center; } .thanks-wizard-row { display: flex; align-items: center; justify-content: center; gap: clamp(0.75rem, 4vw, 3rem); width: 100%; } .thanks-wizards .thanks-text { text-align: center; max-width: 640px; } .thanks-wizards .thanks-actions { justify-content: center; } .thanks-wiz { flex: none; width: 130px; height: 200px; image-rendering: pixelated; } .thanks-wiz--right { transform: scaleX(-1); } @media (max-width: 820px) { .page-hero.thanks-split { grid-template-columns: 1fr; min-height: 0; } .thanks-split-text { padding: 7rem 1.25rem 2.5rem; } .thanks-split-photo { min-height: 340px; } .thanks-wiz { width: 80px; height: 123px; } .thanks-wizard-row { gap: 0.5rem; } } :is([data-theme="ember"], [data-theme="fism"]) .faq-list { border-bottom-color: rgba(255,255,255,0.18); } :is([data-theme="ember"], [data-theme="fism"]) .faq-item { border-top-color: rgba(255,255,255,0.18); } :is([data-theme="ember"], [data-theme="fism"]) .faq-item > summary { color: var(--text); } /* Expanded FAQ answer: off-white card so the answer pops out from the blue section. Only renders when the
is open, so the closed state is unaffected — the section looks the same as before until the user clicks. */ :is([data-theme="ember"], [data-theme="fism"]) .faq-answer { background: var(--surface-light); padding: 1.25rem 1.5rem 1.5rem; margin: 0.5rem 0 1.5rem; border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.20); max-width: none; } :is([data-theme="ember"], [data-theme="fism"]) .faq-answer p, :is([data-theme="ember"], [data-theme="fism"]) .faq-answer li { color: var(--ink); } :is([data-theme="ember"], [data-theme="fism"]) .faq-answer strong { color: var(--ink); font-weight: 700; } :is([data-theme="ember"], [data-theme="fism"]) .faq-item > summary:hover, :is([data-theme="ember"], [data-theme="fism"]) .faq-item > summary:hover .faq-toggle { color: var(--accent-bright); border-color: var(--accent); } :is([data-theme="ember"], [data-theme="fism"]) .faq-toggle { border-color: var(--hairline); color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .faq-item[open] .faq-toggle { background: var(--accent); border-color: var(--accent); color: var(--bg); } /* Blog (royal-blue surface in FISM, matching the about welcome / about awards treatment). Light text with gold accents. */ :is([data-theme="ember"], [data-theme="fism"]) .blog-index, :is([data-theme="ember"], [data-theme="fism"]) .blog-post { background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); } /* Blog index post list: light text, light hairline borders, gold hover */ :is([data-theme="ember"], [data-theme="fism"]) .post-list { border-top-color: rgba(255,255,255,0.18); } :is([data-theme="ember"], [data-theme="fism"]) .post-card { border-bottom-color: rgba(255,255,255,0.18); } :is([data-theme="ember"], [data-theme="fism"]) .post-card-date { color: var(--slate); } :is([data-theme="ember"], [data-theme="fism"]) .post-card-title { color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .post-card-link:hover .post-card-title { color: var(--accent-bright); } :is([data-theme="ember"], [data-theme="fism"]) .post-card-excerpt { color: var(--text-soft); } :is([data-theme="ember"], [data-theme="fism"]) .post-card-cta { color: var(--text); border-bottom-color: var(--accent-bright); } :is([data-theme="ember"], [data-theme="fism"]) .post-list-empty { color: var(--slate); } /* Blog post page: title, meta line, body prose, footer */ :is([data-theme="ember"], [data-theme="fism"]) .blog-post-header h1 { color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .blog-post-meta { color: var(--slate); } :is([data-theme="ember"], [data-theme="fism"]) .blog-post-content p, :is([data-theme="ember"], [data-theme="fism"]) .blog-post-content li { color: var(--text-soft); } :is([data-theme="ember"], [data-theme="fism"]) .blog-post-content blockquote { border-left-color: var(--accent-bright); color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .blog-post-footer { border-top-color: rgba(255,255,255,0.18); } :is([data-theme="ember"], [data-theme="fism"]) .breadcrumbs, :is([data-theme="ember"], [data-theme="fism"]) .breadcrumbs a { color: var(--slate); } :is([data-theme="ember"], [data-theme="fism"]) .breadcrumbs a:hover { color: var(--accent-bright); } /* ===================================================================== READABLE-TEXT OVERRIDES (dark packs) These elements hard-code color:var(--ink) in the base sheet and sit in sections that go dark, so without this they'd be near-black on near-black. ===================================================================== */ :is([data-theme="ember"], [data-theme="fism"]) .check-list li, :is([data-theme="ember"], [data-theme="fism"]) .book-closer, :is([data-theme="ember"], [data-theme="fism"]) .faq-item > summary, :is([data-theme="ember"], [data-theme="fism"]) .blog-lede, :is([data-theme="ember"], [data-theme="fism"]) .blog-post-content, :is([data-theme="ember"], [data-theme="fism"]) .blog-post-content :where(h2,h3,strong,blockquote) { color: var(--text); } /* underlined inline links keep text color but gold underline. .about-welcome-cta-line a is handled in the About page block above (sits on a light surface, needs dark text). */ :is([data-theme="ember"], [data-theme="fism"]) .blog-post-meta a, :is([data-theme="ember"], [data-theme="fism"]) .blog-post-content a { color: var(--text); border-bottom-color: var(--accent); } :is([data-theme="ember"], [data-theme="fism"]) .breadcrumbs a:hover { color: var(--text); } :is([data-theme="ember"], [data-theme="fism"]) .book-form-note, :is([data-theme="ember"], [data-theme="fism"]) .blog-pullquote { background: var(--card); color: var(--text); border-left-color: var(--accent); } /* Client-logo wall: on dark themes, float it on a light panel so ANY logo (dark, light, or color) stays legible. On the light Gold theme the band is already light, so this only applies to the dark packs. */ :is([data-theme="ember"], [data-theme="fism"]) .clients-image { background: var(--cream); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: 0 24px 60px rgba(0,0,0,0.35); } /* ===================================================================== FISM — TWO-COLOR BACKGROUND SYSTEM (overrides the shared dark treatment) Backgrounds use ONLY two colors that alternate: off-white and royal blue. All other blues + gold are reserved for accents / cards / quote boxes. The Awards (credentials) section is intentionally NOT part of this rhythm — it's left as-is so it can be moved or merged later without consequence. hero ......... photo promo ........ BLUE contact ...... BLUE clients ...... WHITE testimonials . WHITE about ........ BLUE services ..... BLUE testimonials . WHITE fism ......... photo (below: unchanged) ===================================================================== */ /* Event coverage: photo background (about-band.jpg) with a dark gradient overlay stacked on top. Photo provides live-performance texture; the overlay keeps headings and body text legible at the readable tier. */ [data-theme="fism"] .event-coverage { background: linear-gradient(180deg, rgba(8,9,14,0.78) 0%, rgba(8,9,14,0.86) 100%), url('../assets/photos/michael-intimate-theater.webp') center / cover no-repeat; } /* ============================================================ BLOG POST PAGE: off-white card on the blue page background ============================================================ Whole article (header + content + footer) renders as one off-white card centered on a royal-blue page. Same surface color (--surface-light #ecedf2) as the homepage services cards and the testimonials section for site-wide consistency. Body bg gets the blue gradient previously on .blog-post. ============================================================ */ [data-theme="fism"] body.page-blog-post { background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); } [data-theme="fism"] .blog-post { background: var(--surface-light); max-width: 820px; margin: 4rem auto 5rem; padding: 1rem clamp(1.75rem, 4vw, 3.5rem) 2.5rem; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.30); } /* The three children had their own max-width/gutter rules so each was independently centered. Inside the card they should fill it. */ [data-theme="fism"] .blog-post-header, [data-theme="fism"] .blog-post-content, [data-theme="fism"] .blog-post-footer { max-width: none; margin-left: 0; margin-right: 0; padding-inline: 0; } [data-theme="fism"] .blog-post-header { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* Text colors revert to dark variants now that the surface is light. These override the earlier FISM rules that set everything light for the blue-surface treatment. */ [data-theme="fism"] .blog-post-header h1 { color: var(--ink); } [data-theme="fism"] .blog-post-meta { color: #6b6b6b; } [data-theme="fism"] .blog-post-content, [data-theme="fism"] .blog-post-content p, [data-theme="fism"] .blog-post-content li, [data-theme="fism"] .blog-post-content :where(h2, h3, strong), [data-theme="fism"] .blog-post-content blockquote { color: var(--ink); } [data-theme="fism"] .blog-post-content blockquote { border-left-color: var(--gold); } [data-theme="fism"] .blog-post-footer { border-top-color: rgba(10,10,10,0.12); } [data-theme="fism"] .breadcrumbs, [data-theme="fism"] .breadcrumbs a { color: #6b6b6b; } [data-theme="fism"] .breadcrumbs a:hover { color: var(--ink); border-bottom-color: var(--gold); } [data-theme="fism"] .blog-post-meta a, [data-theme="fism"] .blog-post-content a { color: var(--ink); border-bottom-color: var(--gold); } [data-theme="fism"] .blog-post-content a:hover { color: var(--gold); } /* ============================================================ SERVICE DETAIL PAGES: page-hero on top (as on About / FAQs), then a .service-body section in royal-blue with an off-white .service-page card centered inside it (same surface as the blog post card + the homepage services cards + the awards cards). Title + lede live in the page-hero; the card holds the body content + footer actions. ============================================================ */ /* Service pages: shorter hero + tighter top padding so the white card is visible above the fold without scrolling (the card also must NOT carry the .reveal class: at its height the reveal threshold only fires after heavy scrolling, which left it invisible on load). */ body.page-service .page-hero { min-height: clamp(320px, 52vh, 540px); padding: 8rem 0 3rem; } /* No parallax on service heroes: with background-attachment fixed the position is viewport-relative, which makes per-page background-position crops unpredictable. Scroll attachment makes "center 40%" mean 40% of the photo, deterministically, on every screen. */ body.page-service .page-hero-media { background-attachment: scroll; } [data-theme="fism"] .service-body { background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); padding: 3.2rem var(--gutter) 6rem; } [data-theme="fism"] .service-page { background: var(--surface-light); /* match the homepage services-card width: container minus its side gutters */ max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto; padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.30); } [data-theme="fism"] .service-page-content { padding: 1rem 0 2rem; color: var(--ink); font-size: 1.08rem; line-height: 1.75; display: flow-root; /* contain the floated article figures */ } [data-theme="fism"] .service-page-content .placeholder-note { font-family: var(--font-display); font-style: italic; color: #6b6b6b; text-align: center; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6; max-width: 600px; margin: 0 auto; } [data-theme="fism"] .service-page-content p { margin: 0 0 1.3rem; color: var(--ink); } [data-theme="fism"] .service-page-content .service-page-lede { font-size: clamp(1.1rem, 1.9vw, 1.25rem); line-height: 1.6; color: var(--ink); margin-bottom: 1.8rem; } [data-theme="fism"] .service-page-content h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 2.6rem 0 1rem; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; } [data-theme="fism"] .service-page-content h3 { font-size: 1.2rem; margin: 1.8rem 0 0.7rem; color: var(--ink); } [data-theme="fism"] .service-page-content ul, [data-theme="fism"] .service-page-content ol { padding-left: 1.4rem; margin: 0 0 1.4rem; } [data-theme="fism"] .service-page-content li { margin-bottom: 0.5rem; color: var(--ink); } [data-theme="fism"] .service-page-content strong { color: var(--ink); font-weight: 600; } [data-theme="fism"] .service-page-content a { color: var(--ink); border-bottom: 1px solid var(--gold); transition: color 0.2s var(--ease); } [data-theme="fism"] .service-page-content a:hover { color: var(--gold); } /* Article figures FLOAT on desktop so the body copy wraps around them instead of each photo taking a full-width block (the tall 2:3 portrait especially). Alternating sides gives the article rhythm. Mobile resets to full-width on its own line (see the <=720px override below). (2026-06-14, Michael's req.) */ [data-theme="fism"] .service-page-figure { float: right; width: clamp(240px, 36%, 360px); margin: 0.4rem 0 1.5rem 2.2rem; clear: both; /* never let two figures sandwich a sliver of text */ } [data-theme="fism"] .service-page-figure:nth-of-type(even) { float: left; margin: 0.4rem 2.2rem 1.5rem 0; } /* the tall portrait shot runs narrower so it doesn't tower over its section */ [data-theme="fism"] .service-page-figure--portrait { width: clamp(220px, 28%, 300px); } @media (max-width: 720px) { [data-theme="fism"] .service-page-figure, [data-theme="fism"] .service-page-figure:nth-of-type(even), [data-theme="fism"] .service-page-figure--portrait { float: none; width: 100%; margin: 2.2rem 0; } } [data-theme="fism"] .service-page-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,0.32); } [data-theme="fism"] .service-page-figure figcaption { margin-top: 0.7rem; font-size: 0.92rem; color: #6b6b6b; font-style: italic; text-align: center; } [data-theme="fism"] .service-page-content .service-page-callout { margin: 2rem 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--gold); background: rgba(201,169,97,0.07); border-radius: 0 6px 6px 0; } [data-theme="fism"] .service-page-content .service-page-callout p { margin: 0; } [data-theme="fism"] .service-page-footer { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; padding-top: 1.75rem; border-top: 1px solid rgba(10,10,10,0.12); margin-top: 0; } /* this footer sits on the OFF-WHITE service card, so the secondary ghost button uses dark ink (the theme's default light-gold ghost is unreadable here). The primary "Book Michael" stays the gold btn-primary. */ [data-theme="fism"] .service-page-footer .btn-ghost { color: #1d242e; border-color: rgba(10,10,10,0.28); } [data-theme="fism"] .service-page-footer .btn-ghost:hover { background: #1d242e; color: #fff; border-color: #1d242e; } /* BLUE sections (light text — already light from the dark theme) */ [data-theme="fism"] .book-form, [data-theme="fism"] .services, [data-theme="fism"] .about-preview { background: var(--surface-blue); } /* promo sits directly after the (blue) book-form since the 2026-06-12 reorder: charcoal keeps the sections visually separate */ /* promo = warm "intimate venue": deep warm charcoal with a soft amber pool behind the strip (low room light), so the warm/social highlight-reel footage harmonizes with its surround instead of sitting in a cold void */ [data-theme="fism"] .promo { /* off-white aged-plaster wall (texture from Canva "Website Background" p.10) — on-brand with the site's other off-white surfaces; warm-amber version (promo-bg.jpg) kept on disk if we revert. fixed attachment = the "window" treatment. */ background: #ecedf2 url("../assets/graphics/promo-bg-light.webp") center / cover no-repeat fixed; } /* dark text on the light wall */ .promo > .promo-head h2 { color: #0f1320; } .promo > .promo-head p { color: #333a4a; } /* iOS ignores fixed attachment; small screens + reduced-motion get a static wall (same fallback as the About window) */ @media (max-width: 880px), (prefers-reduced-motion: reduce) { [data-theme="fism"] .promo { background-attachment: scroll; } } /* WHITE (off-white) sections (dark text) */ [data-theme="fism"] .testimonials, [data-theme="fism"] .clients { background: var(--surface-light); } /* dark text on the off-white sections */ [data-theme="fism"] .testimonials :where(h2, h3), [data-theme="fism"] .clients-title { color: #0f1320; } /* the clients logo panel isn't needed on an already-light section */ [data-theme="fism"] .clients-image { background: transparent; box-shadow: none; padding: 0; } /* ============================================================ SERVICES SECTION (dark themes only) ============================================================ Entire card row sits on one off-white paper panel: text and photo are both children inside the same card, layout unchanged (text on left, photo on right). ============================================================ */ :is([data-theme="ember"], [data-theme="fism"]) .service-card { background: var(--surface-light); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.30); } :is([data-theme="ember"], [data-theme="fism"]) .service-content h3 { color: var(--ink); } :is([data-theme="ember"], [data-theme="fism"]) .service-card p { color: #1d242e; } /* TESTIMONIAL CARDS: the quote box stays BLUE (light text), and both the photo and the quote box get a deep shadow so they FLOAT off the off-white. */ [data-theme="fism"] .testimonials .quote-content { background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); box-shadow: 0 40px 80px rgba(12,22,63,0.34), 0 12px 28px rgba(12,22,63,0.22); } [data-theme="fism"] .testimonials .quote-photo { box-shadow: 0 40px 80px rgba(12,22,63,0.30), 0 12px 26px rgba(12,22,63,0.18); } [data-theme="fism"] .testimonials blockquote { color: var(--text); } [data-theme="fism"] .testimonials .quote-name { color: var(--text); } /* stars + opening quote mark stay GOLD on the blue card */ [data-theme="fism"] .testimonials .quote-stars, [data-theme="fism"] .testimonials .quote-mark { color: var(--medal-bright); } /* Full-bleed standalone photo band (experiment 2026-06-12): the entire photo, no crop, no content, edge to edge. */ .photo-band { padding: 0; line-height: 0; } .photo-band img { width: 100%; height: auto; display: block; } /* ===== ABOUT-PREVIEW COMPARISON VARIANTS (2026-06-12, pick one) ===== */ /* V2: same copy on a full-photo background (the standalone photo-band image moved here), dark overlay for readability */ /* THE about section: "window" effect via fixed background attachment. The portrait is anchored to the VIEWPORT; as the page scrolls, the section's window slides over it, so the picture appears to travel through the frame. Normal document flow: no pinning, no runway bands. (Final mechanism 2026-06-12 after the sticky-pin attempt produced letterbox bands Michael disliked.) */ .about-preview.about-window-wrap, [data-theme="fism"] .about-preview.about-window-wrap { padding: 0; background: none; position: relative; } .about-window { position: relative; overflow: hidden; padding: 7rem 0; } .about-window-media { position: absolute; left: 0; right: 0; top: 0; /* full-bleed window pan (FINAL): the div holds the whole photo at true aspect, full page width; main.js slides it through the window as the section crosses the viewport. Edge to edge, nothing cropped, whole photo height traverses the frame. */ aspect-ratio: 2400 / 1735; height: auto; background: url("../assets/photos/michael-portrait-hero-dark.webp") top center / cover no-repeat; will-change: transform; z-index: 0; } .about-window .container { position: relative; z-index: 2; } .about-preview-v2-overlay { z-index: 1; } /* iOS ignores fixed attachment; small screens + reduced-motion get a plain photo background */ @media (max-width: 880px), (prefers-reduced-motion: reduce) { .about-window-media { aspect-ratio: auto; height: 100%; background-position: center; transform: none !important; } } } .about-preview-v2-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,18,0.82) 0%, rgba(8,10,18,0.55) 55%, rgba(8,10,18,0.35) 100%); } .about-preview-v2 .container { position: relative; } .about-copy-v2 { max-width: 620px; } .about-copy-v2 h2 { color: var(--paper); } .about-copy-v2 p { color: var(--text-soft, #d3d5da); } /* Promo: the two studio shots flank the video, each photo shown WHOLE (they are exactly 2:3, the frames are exactly 2:3, zero crop) and flush to the section's top and bottom. Video sits between them, overlapping nothing. (2026-06-12) */ .promo { position: relative; overflow: hidden; padding: 0; } /* top bar above the photo/video strip (light text on the near-black section) */ .promo > .promo-head { text-align: center; max-width: 760px; margin: 0 auto; padding: 5.5rem var(--gutter) 3rem; } /* bottom bar below the strip: a CTA at the high-intent post-video moment */ .promo-foot { text-align: center; padding: 3rem var(--gutter) 5.5rem; } .promo-stage { /* equal-height band: photos are 2:3, video is 16:9, video touches both photos -> H = W / (2*(2/3) + 16/9) = 32.15% of page width. Everything locks to the same height by construction. */ --stage-h: 32.15vw; height: var(--stage-h); display: flex; } .promo-side { height: 100%; aspect-ratio: 2 / 3; flex: none; } .promo-side img { width: 100%; height: 100%; object-fit: cover; display: block; } .promo-center { flex: 1; min-width: 0; display: flex; padding: 0; } .promo-center .yt-facade { width: 100%; height: 100%; max-width: none; border-radius: 0; } .promo-center .yt-poster { height: 100%; object-fit: cover; } @media (max-width: 1080px) { .promo-center .yt-facade { border-radius: var(--radius); max-height: none; } } @media (max-width: 1080px) { .promo { padding: 0 0 4.5rem; } .promo-stage { height: auto; display: block; } .promo-side { display: none; } .promo-center { padding: 0 var(--gutter); } } /* MOBILE ONLY (2026-06-14, Michael's request): bring the two studio photos back, side by side, directly beneath the full-width video and above the "Book Michael" CTA. Desktop and the 720-1080 range are untouched. */ @media (max-width: 720px) { .promo-stage { display: flex; flex-wrap: wrap; height: auto; gap: 0.6rem; padding: 0 var(--gutter); } .promo-center { order: 0; flex: 0 0 100%; padding: 0; } .promo-side { display: block; order: 1; flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: 2 / 3; border-radius: var(--radius); overflow: hidden; } } }