/* ============================================ Mickey Farmer — Actor Website Cinematic, dark, conversion-focused ============================================ */ /* Default: black + gold. To try another theme, add data-theme="slate" | "blush" | "dusk" to in index.html */ :root, [data-theme="gold"] { --bg: #080808; --bg-elevated: #0f0f0f; --surface: #141414; --text: #f5f0e8; --text-muted: #a39e94; --accent: #c9a227; --accent-hover: #ddb83a; --border: rgba(245, 240, 232, 0.08); --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Outfit", system-ui, sans-serif; --space: clamp(1rem, 4vw, 2.5rem); --container: min(92vw, 1200px); --header-h: 72px; } /* Slate — off-blue, cooler, slightly brighter mood */ [data-theme="slate"] { --bg: #0d1219; --bg-elevated: #141c26; --surface: #1a2433; --text: #e8eef4; --text-muted: #8fa3b8; --accent: #6ba3d4; --accent-hover: #8bbce0; --border: rgba(232, 238, 244, 0.1); } /* Blush — warm black with muted red/coral accent */ [data-theme="blush"] { --bg: #0c0a0a; --bg-elevated: #141212; --surface: #1c1818; --text: #f5f0ee; --text-muted: #b8a8a4; --accent: #c97b7b; --accent-hover: #d99a9a; --border: rgba(245, 240, 238, 0.09); } /* Dusk — warm blue-grey, soft coral; brighter than gold, not cold */ [data-theme="dusk"] { --bg: #12161c; --bg-elevated: #1a1f28; --surface: #222a36; --text: #ebeef2; --text-muted: #9ca8b8; --accent: #d4a574; --accent-hover: #e0b98d; --border: rgba(235, 238, 242, 0.1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--text); background: var(--bg); overflow-x: hidden; } /* Subtle film-grain noise overlay */ .noise { position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; } /* ----- Header ----- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); display: flex; align-items: center; justify-content: center; transition: background 0.4s ease, backdrop-filter 0.4s ease; } .site-header.scrolled { background: rgba(8, 8, 8, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav { width: var(--container); max-width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space); } .nav-logo { display: flex; align-items: center; text-decoration: none; line-height: 0; } .nav-logo-img { display: block; height: 36px; width: auto; max-width: 160px; object-fit: contain; } .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.03em; transition: color 0.2s ease; } .nav-links a:hover { color: var(--text); } .nav-links a:focus-visible, .nav-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .nav-cta { color: var(--accent) !important; } .nav-cta:hover { color: var(--accent-hover) !important; } /* ----- Slice dropdown (Acting / Dance / Voice / Writing) — commented out; uncomment to re-enable ----- .nav-slice-dropdown { position: relative; list-style: none; } .nav-slice-trigger { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; background: none; border: none; font-family: inherit; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.03em; color: var(--text-muted); cursor: pointer; transition: color 0.2s ease; } .nav-slice-trigger:hover { color: var(--text); } .nav-slice-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .nav-slice-dropdown:focus-within .nav-slice-trigger, .nav-slice-dropdown.is-open .nav-slice-trigger { color: var(--accent); } .nav-slice-chevron { flex-shrink: 0; transition: transform 0.2s ease; } .nav-slice-dropdown:hover .nav-slice-chevron, .nav-slice-dropdown:focus-within .nav-slice-chevron, .nav-slice-dropdown.is-open .nav-slice-chevron { transform: rotate(180deg); } .nav-slice-menu { position: absolute; top: 100%; left: 0; margin: 0.5rem 0 0; padding: 0.5rem 0; min-width: 140px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; list-style: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; z-index: 100; } .nav-slice-dropdown:hover .nav-slice-menu, .nav-slice-dropdown:focus-within .nav-slice-menu, .nav-slice-dropdown.is-open .nav-slice-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-slice-menu li { margin: 0; padding: 0; } .nav-slice-menu a { display: block; padding: 0.5rem 1rem; font-size: 0.9rem; color: var(--text-muted); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .nav-slice-menu a:hover { background: var(--surface); color: var(--text); } .nav-slice-menu a.nav-slice-active { color: var(--accent); font-weight: 500; } ----- */ .nav-toggle { display: none; flex-direction: column; gap: 6px; background: none; border: none; padding: 8px; cursor: pointer; color: var(--text); } .nav-toggle span { width: 24px; height: 2px; background: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ----- Hero ----- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--header-h) var(--space) 4rem; } .hero-bg { position: absolute; inset: 0; } .hero-image { position: absolute; inset: 0; background: var(--surface) center center / cover no-repeat; background-image: url("../assets/acting/hero.jpg"); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,0.35) 0%, rgba(8,8,8,0.65) 45%, var(--bg) 100%); } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 720px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hero-logo { display: inline-block; margin-bottom: 2rem; line-height: 0; opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease forwards; } .hero-logo img { display: block; height: clamp(80px, 22vw, 160px); width: auto; max-width: 420px; object-fit: contain; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease 0.35s forwards; } .hero-content .hero-buttons .btn { margin: 0; } .hero-scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0; animation: fadeUp 0.8s ease 0.5s forwards; } .scroll-line { width: 1px; height: 40px; background: linear-gradient(180deg, var(--text-muted), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes scrollPulse { 0%, 100% { opacity: 0.5; transform: scaleY(0.8); } 50% { opacity: 1; transform: scaleY(1); } } /* ----- Buttons ----- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.75rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.05em; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn:hover { transform: translateY(-2px); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn-primary { background: var(--accent); color: var(--bg); box-shadow: 0 4px 20px rgba(201, 162, 39, 0.2); } .btn-primary:hover { background: var(--accent-hover); color: var(--bg); box-shadow: 0 6px 28px rgba(201, 162, 39, 0.28); } .btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } /* ----- Container & Sections ----- */ .container { width: var(--container); max-width: 100%; margin: 0 auto; padding: 0 var(--space); } section { padding: 5rem 0; } .section-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; } .section-label + h3 { margin-top: 0; } /* ----- About ----- */ .about { background: var(--bg); } .about-grid { display: grid; grid-template-columns: 0.95fr 1fr; gap: 4rem; align-items: center; } .about-image-wrap { position: relative; aspect-ratio: 3/4; max-height: 85vh; } .about-image { position: absolute; inset: 0; background: var(--surface) center center / cover no-repeat; background-image: url("../assets/acting/about.jpg"); border: 1px solid var(--border); } .about-headline { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.2; margin: 0 0 1.5rem; color: var(--text); } .about-bio p { margin: 0 0 1rem; color: var(--text-muted); max-width: 52ch; } .about-production-note { margin: 1.25rem 0 0; padding-left: 1rem; border-left: 2px solid var(--border); font-size: 0.9rem; color: var(--text-muted); max-width: 52ch; line-height: 1.5; } .about-production-note strong { color: var(--text); } .about-text .btn { margin-top: 1.5rem; } /* Reveal animation (JS will add .revealed) */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } [data-reveal].revealed { opacity: 1; transform: translateY(0); } /* ----- Reel ----- */ .reel { position: relative; background: var(--bg-elevated); overflow: hidden; } .reel-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(201, 162, 39, 0.06), transparent); pointer-events: none; } .reel-headline { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 2rem; } .reel-player-wrap { max-width: 900px; margin: 0 auto 1rem; } .reel-aspect { position: relative; aspect-ratio: 16/9; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .reel-video.playing + .reel-placeholder { opacity: 0; pointer-events: none; } .reel-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--bg); color: var(--text-muted); transition: opacity 0.3s ease; } .reel-play { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; transition: transform 0.2s ease, color 0.2s ease; } .reel-play:hover { transform: scale(1.05); color: var(--accent-hover); } .reel-note, .credits-note, .photos-note { font-size: 0.85rem; color: var(--text-muted); margin: 0; } .reel-note code, .credits-note code, .photos-note code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } /* ----- Audio demos (Voice page) ----- */ .demos { background: var(--bg); } .demos-headline { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 1rem; } .demos-intro { color: var(--text-muted); margin: 0 0 2rem; max-width: 52ch; } .demos-intro code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } .demos-list { display: flex; flex-direction: column; gap: 1.5rem; max-width: 640px; } .demo-item { padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; } .demo-title { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--accent); margin: 0 0 0.75rem; } .demo-player { width: 100%; height: 40px; accent-color: var(--accent); } .demos-note { color: var(--text-muted); font-size: 0.9rem; margin: 1.5rem 0 0; max-width: 52ch; } .demos-note code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } /* ----- Credits ----- */ .credits-headline, .photos-headline { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 1rem; } .credits-intro { color: var(--text-muted); margin: 0 0 1.5rem; max-width: 44ch; } .credits-actions { margin-bottom: 0; } .credits-list { display: flex; flex-direction: column; gap: 0; max-width: 640px; } .credit-item { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 1.5rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; } .credit-item:last-child { border-bottom: none; } .credit-role { color: var(--accent); font-weight: 500; } .credit-title { color: var(--text); } .credit-type { color: var(--text-muted); font-size: 0.85rem; } /* ----- Photos / Gallery ----- */ .photos { background: var(--bg); } /* Tabbed photos (Headshots | Feed) */ .photos-tabs .photos-headline { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .photos-tab { padding: 0.75rem 1.25rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; margin-bottom: -1px; } .photos-tab:hover { color: var(--text); } .photos-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } .photos-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .photos-panel { display: none; } .photos-panel.is-active { display: block; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; } .gallery-item { aspect-ratio: 2/3; overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: border-color 0.25s ease, transform 0.25s ease; } .gallery-item:hover { border-color: rgba(201, 162, 39, 0.3); transform: scale(1.02); } .gallery-img { width: 100%; height: 100%; background: center center / cover no-repeat; transition: transform 0.4s ease; } .gallery-item:hover .gallery-img { transform: scale(1.06); } [data-gallery-img="1"] .gallery-img { background-image: url("../assets/acting/headshot-1.jpg"); } [data-gallery-img="2"] .gallery-img { background-image: url("../assets/acting/headshot-2.jpg"); } [data-gallery-img="3"] .gallery-img { background-image: url("../assets/acting/headshot-3.jpg"); } [data-gallery-img="4"] .gallery-img { background-image: url("../assets/acting/headshot-4.jpg"); } [data-gallery-img="5"] .gallery-img { background-image: url("../assets/acting/headshot-5.jpg"); } [data-gallery-img="6"] .gallery-img { background-image: url("../assets/acting/headshot-6.jpg"); } /* ----- Instagram ----- */ .instagram { background: var(--bg); } .instagram-headline { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 0.5rem; } .instagram-intro { margin: 0 0 1.5rem; } .instagram-handle { color: var(--accent); text-decoration: none; font-weight: 500; } .instagram-handle:hover { color: var(--accent-hover); text-decoration: underline; } .instagram-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .instagram-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: border-color 0.25s ease, transform 0.25s ease; } .instagram-item:hover { border-color: rgba(201, 123, 123, 0.4); transform: scale(1.02); } .instagram-item-bg { position: absolute; inset: 0; background: var(--surface) center center / cover no-repeat; transition: transform 0.4s ease; } .instagram-item:hover .instagram-item-bg { transform: scale(1.06); } /* Optional: add instagram-1.jpg … instagram-6.jpg to assets/instagram/ */ .instagram-item-bg[data-insta="1"] { background-image: url("../assets/instagram/instagram-1.jpg"); } .instagram-item-bg[data-insta="2"] { background-image: url("../assets/instagram/instagram-2.jpg"); } .instagram-item-bg[data-insta="3"] { background-image: url("../assets/instagram/instagram-3.jpg"); } .instagram-item-bg[data-insta="4"] { background-image: url("../assets/instagram/instagram-4.jpg"); } .instagram-item-bg[data-insta="5"] { background-image: url("../assets/instagram/instagram-5.jpg"); } .instagram-item-bg[data-insta="6"] { background-image: url("../assets/instagram/instagram-6.jpg"); } .instagram-widget-wrap { margin-bottom: 1.5rem; min-height: 200px; } .instagram-cta { margin: 0; } /* ----- Movement (Dance & Aerial) ----- */ .movement { position: relative; background: var(--bg); overflow: hidden; } .movement-page-hero { padding-top: calc(var(--header-h) + 4rem); } .movement-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201, 162, 39, 0.05), transparent); pointer-events: none; } .movement-headline { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 1rem; } .movement-intro { color: var(--text-muted); margin: 0 0 2rem; max-width: 52ch; } .movement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1rem; } .movement-item { position: relative; aspect-ratio: 16/10; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .movement-placeholder { width: 100%; height: 100%; background: var(--bg-elevated) center center / cover no-repeat; } .movement-caption { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 0.75rem 1rem; font-size: 0.9rem; color: var(--text); background: linear-gradient(transparent, rgba(8,8,8,0.9)); } .movement-note { font-size: 0.85rem; color: var(--text-muted); margin: 0; } .movement-note code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } /* ----- Contact ----- */ .contact { position: relative; padding: 6rem 0; background: var(--bg-elevated); } .contact-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(201, 162, 39, 0.08), transparent); pointer-events: none; } .contact-headline { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; margin: 0 0 1rem; } .contact-content p { color: var(--text-muted); margin: 0 0 1rem; max-width: 44ch; } .contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0; } .contact-link { color: var(--accent); font-weight: 500; text-decoration: none; transition: color 0.2s ease; } .contact-link:hover { color: var(--accent-hover); } .contact-link-with-icon { display: inline-flex; align-items: center; gap: 0.4rem; } .contact-icon { flex-shrink: 0; color: currentColor; } .contact-icon-instagram, .contact-icon-imdb { width: 1.15em; height: 1.15em; } .contact-rep { font-size: 0.9rem; margin-top: 1.5rem !important; } .contact-rts-logo { display: inline-block; margin-top: 1.5rem; padding: 0.75rem 1rem; line-height: 0; background: #fff; border-radius: 6px; transition: opacity 0.2s ease; } .contact-rts-logo:hover { opacity: 0.9; } .contact-rts-logo img { display: block; max-width: 180px; height: auto; width: auto; max-height: 64px; object-fit: contain; } /* ----- Footer ----- */ .site-footer { padding: 2.5rem var(--space); border-top: 1px solid var(--border); text-align: center; background: var(--bg); } .footer-logo { display: inline-block; margin-bottom: 1rem; line-height: 0; opacity: 0.9; transition: opacity 0.2s ease; } .footer-logo:hover { opacity: 1; } .footer-logo img { display: block; height: 28px; width: auto; max-width: 120px; object-fit: contain; } .site-footer p { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .contact-link:focus-visible, .contact-rts-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ----- Sticky CTA pills ----- */ .cta-pills { position: fixed; bottom: 1rem; right: 1rem; z-index: 999; display: flex; flex-direction: column; gap: 0.5rem; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .cta-pills.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .cta-pill { display: inline-block; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 500; font-family: var(--font-body); letter-spacing: 0.04em; text-decoration: none; border-radius: 999px; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .cta-pill:hover { transform: scale(1.03); } .cta-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .cta-pill-primary { background: var(--accent); color: var(--bg); border: none; } .cta-pill-primary:hover { background: var(--accent-hover); color: var(--bg); } .cta-pill-outline { background: transparent; color: var(--text); border: 1px solid var(--border); } .cta-pill-outline:hover { border-color: var(--accent); color: var(--accent); } /* ----- Splash (split landing) ----- */ .splash { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } .splash-panel { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; text-decoration: none; color: inherit; transition: filter 0.3s ease; } .splash-panel:hover { filter: brightness(1.05); } .splash-panel:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .splash-panel-bg { position: absolute; inset: 0; background: var(--surface) center center / cover no-repeat; } .splash-panel-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 10, 0.5) 0%, rgba(12, 10, 10, 0.85) 100%); } .splash-panel-content { position: relative; z-index: 2; text-align: center; max-width: 320px; } .splash-panel h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 600; margin: 0 0 0.5rem; color: var(--text); } .splash-panel p { font-size: 1rem; color: var(--text-muted); margin: 0 0 1.5rem; line-height: 1.5; } .splash-panel .btn { margin-top: 0; } .splash-panel-acting .splash-panel-bg { background-image: url("../assets/acting/hero.jpg"); } .splash-panel-dance .splash-panel-bg { background: var(--bg-elevated); } @media (max-width: 768px) { .splash { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .splash-panel { min-height: 50vh; } } /* ----- Splash four (vertical columns) — commented out; use index-splash.off to re-enable ----- .splash-four { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 100vh; overflow: hidden; } .splash-four .splash-bar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 2rem 1rem; text-decoration: none; color: inherit; transition: filter 0.3s ease, background-color 0.3s ease; border-right: 1px solid var(--border); } .splash-four .splash-bar:last-child { border-right: none; } .splash-four .splash-bar:hover { filter: brightness(1.08); } .splash-four .splash-bar:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .splash-bar-bg { position: absolute; inset: 0; background: var(--surface) center center / cover no-repeat; } .splash-bar-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 10, 0.7) 0%, rgba(12, 10, 10, 0.4) 50%, rgba(12, 10, 10, 0.8) 100%); } .splash-bar-label { position: relative; z-index: 2; font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); text-align: center; line-height: 1.1; margin-bottom: 0.75rem; } .splash-bar-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; } .splash-bar-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } .splash-bar-acting .splash-bar-bg { background-image: url("../assets/acting/hero.jpg"); } .splash-bar-dance .splash-bar-bg, .splash-bar-voice .splash-bar-bg, .splash-bar-writing .splash-bar-bg { background: var(--bg-elevated); } @media (max-width: 768px) { .splash-four { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } .splash-four .splash-bar { flex-direction: row; justify-content: center; gap: 1rem; padding: 1.5rem 1rem; border-right: none; border-bottom: 1px solid var(--border); } .splash-four .splash-bar:last-child { border-bottom: none; } .splash-bar-label { margin-bottom: 0; font-size: clamp(1.5rem, 8vw, 2.5rem); } .splash-bar-content { flex-direction: row; gap: 0.75rem; text-align: left; } } ----- */ /* ----- Voice page hero ----- */ .voice-hero { position: relative; padding-top: calc(var(--header-h) + 4rem); background: var(--bg); overflow: hidden; } .voice-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201, 123, 123, 0.06), transparent); pointer-events: none; } .voice-headline { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 1rem; } .voice-intro { color: var(--text-muted); margin: 0 0 2rem; max-width: 52ch; } .voice-intro code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } /* ----- Writing page ----- */ .writing-hero { position: relative; padding-top: calc(var(--header-h) + 4rem); background: var(--bg); overflow: hidden; } .writing-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201, 123, 123, 0.06), transparent); pointer-events: none; } .writing-headline { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 1rem; } .writing-intro { color: var(--text-muted); margin: 0 0 2rem; max-width: 52ch; } .writing-samples { background: var(--bg); } .writing-samples-headline { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 1rem; } .writing-samples-intro { color: var(--text-muted); margin: 0 0 1.5rem; max-width: 52ch; } .writing-samples-intro code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } .writing-placeholder { padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); margin-bottom: 1.5rem; } /* ----- Slice nav: highlight current section ----- */ .nav-slice-active { color: var(--accent) !important; font-weight: 500; } /* ----- Responsive ----- */ @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 2rem; } .about-image-wrap { max-height: 60vh; } .credits-list .credit-item { grid-template-columns: 1fr auto; } .credit-role { grid-column: 1 / -1; } .gallery, .instagram-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-links { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0; padding: 1rem; background: rgba(8, 8, 8, 0.98); border-bottom: 1px solid var(--border); } .nav-links.is-open { display: flex; } /* Slice dropdown mobile — commented out .nav-slice-dropdown { flex-direction: column; align-items: stretch; } .nav-slice-trigger { justify-content: space-between; padding: 0.75rem 0; width: 100%; } .nav-slice-menu { position: static; margin: 0 0 0 1rem; padding: 0.25rem 0 0.5rem; min-width: 0; box-shadow: none; border: none; border-radius: 0; border-left: 2px solid var(--border); background: transparent; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .nav-slice-dropdown.is-open .nav-slice-menu { max-height: 12rem; } .nav-slice-menu a { padding: 0.4rem 0.75rem; } */ .nav-toggle { display: flex; } section { padding: 3.5rem 0; } } @media (max-width: 480px) { .gallery, .instagram-grid { grid-template-columns: 1fr; } .contact-links { flex-direction: column; align-items: flex-start; } }