/* ========================================================================== Mike Skultety Photography — Global Styles style.css : variables, reset, typography, navigation, hero, sections, footer ========================================================================== */ /* ===== CUSTOM PROPERTIES ================================================== */ :root { /* Backgrounds — warm near-blacks */ --bg-primary: #15120e; --bg-secondary: #1e1a14; --bg-card: #262019; /* Warm accents */ --accent-gold: #d9a441; --accent-amber: #b9712f; --accent-ember: #eccf94; --accent-cool: #8aa0a2; /* Text */ --text-primary: #f3ebdd; --text-secondary: #b3a896; --text-muted: #7d7565; /* Utility */ --overlay: rgba(14, 11, 7, 0.92); --border: rgba(243, 235, 221, 0.08); --border-strong: rgba(243, 235, 221, 0.16); --scrim-bottom: linear-gradient(to top, rgba(10, 8, 5, 0.85) 0%, rgba(10, 8, 5, 0.4) 35%, transparent 70%); /* Fonts */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Layout */ --container: 1280px; --container-wide: 1600px; --nav-height: 76px; /* Transitions */ --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.8s cubic-bezier(0.33, 1, 0.68, 1); color-scheme: dark; } /* ===== RESET / BASE ======================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* overflow-x lives on rather than . Putting it on makes a scroll container, which on iOS Safari breaks position:fixed for descendant modals (they end up anchored to the body's scroll position instead of the viewport). */ overflow-x: hidden; } body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Lock scroll on BOTH html and body when the mobile menu is open. On iOS Safari overflow:hidden on alone doesn't actually stop the page from scrolling underneath — the page kept moving while the fixed menu stayed put, which read as "half the menu sticks around". Same pattern we use for .lightbox-open. */ html.nav-open, body.nav-open { overflow: hidden; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; } input { font-family: inherit; font-size: inherit; } section { scroll-margin-top: var(--nav-height); } /* ===== TYPOGRAPHY ========================================================= */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.012em; font-optical-sizing: auto; } h1 { font-size: clamp(2.9rem, 7.2vw, 5.6rem); font-weight: 400; } h2 { font-size: clamp(2rem, 4vw, 3.2rem); } h3 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); } p { color: var(--text-secondary); } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-gold); } .section-head { max-width: 640px; margin-bottom: clamp(1rem, 2.5vw, 2rem); } .section-head .eyebrow { margin-bottom: 1rem; } .section-head p { margin-top: 1rem; } .section-head--center { margin-inline: auto; text-align: center; } /* ===== FAQ ACCORDION (faq.html) =========================================== */ .faq-list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--border); padding: 0; } .faq-item summary { cursor: pointer; font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 500; line-height: 1.35; list-style: none; position: relative; padding: 1.4rem 2.5rem 1.4rem 0; color: var(--text-primary); transition: color var(--transition); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { display: none; content: ''; } .faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.6rem; line-height: 1; color: var(--accent-gold); font-weight: 300; transition: transform var(--transition), color var(--transition); } .faq-item[open] summary::after { content: '−'; } .faq-item summary:hover, .faq-item summary:focus-visible { color: var(--accent-gold); outline: none; } .faq-answer { padding: 0 0 1.4rem 0; color: var(--text-secondary); font-size: 0.97rem; line-height: 1.7; } .faq-answer p { margin-bottom: 0.8rem; } .faq-answer p:last-child { margin-bottom: 0; } /* Inline link with animated underline */ .text-link { position: relative; display: inline-block; font-weight: 500; color: var(--accent-gold); padding-bottom: 3px; } .text-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--transition); } .text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* Button */ .btn { display: inline-block; font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.03em; padding: 0.95rem 1.9rem; background: var(--accent-amber); color: #fff8ee; border-radius: 2px; transition: background var(--transition), transform var(--transition); } .btn:hover { background: var(--accent-gold); color: var(--bg-primary); transform: translateY(-2px); } /* ===== LAYOUT HELPERS ===================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .container-wide { max-width: var(--container-wide); } .section { padding-block: clamp(1.5rem, 3.5vw, 3rem); } .section + .section { padding-top: clamp(0.5rem, 1vw, 1rem); } .bg-secondary { background: var(--bg-secondary); } /* ===== PAGE HERO (used by about, contact, prints, privacy, faq, thank-you) === Padding-top: just enough to clear the fixed nav (76px desktop / 68px mobile) plus a small breathing margin. Going much tighter than this would risk content peeking under the transparent navbar at the top of the page. */ .page-hero { padding-top: clamp(4.5rem, 5.5vw, 5.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .page-hero h1 { margin: 1rem 0 1rem; font-size: clamp(2.6rem, 5.5vw, 4.6rem); } .page-hero p { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text-primary); opacity: 0.92; max-width: 56ch; } /* ===== CONTACT FORM ======================================================= */ .contact-form { display: flex; flex-direction: column; gap: 1.2rem; max-width: 32rem; } .contact-form label { display: block; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.45rem; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; background: var(--bg-secondary); border: 1px solid var(--border-strong); color: var(--text-primary); padding: 0.95rem 1.1rem; border-radius: 2px; font-family: inherit; font-size: 1rem; transition: border-color var(--transition); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent-gold); } .contact-form textarea { resize: vertical; min-height: 160px; line-height: 1.55; } .contact-form .botcheck { position: absolute; left: -9999px; } .contact-form button { align-self: flex-start; margin-top: 0.5rem; } .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .contact-info dl { display: grid; gap: 1.5rem; margin-top: 1.2rem; } .contact-info dt { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem; } .contact-info dd { color: var(--text-primary); font-size: 1.02rem; } .contact-info dd a { color: var(--accent-gold); } .contact-info dd a:hover, .contact-info dd a:focus-visible { text-decoration: underline; } .contact-info .footer-social { margin-top: 0.4rem; } /* ===== 404 PAGE =========================================================== */ .not-found-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: clamp(8rem, 14vw, 12rem) clamp(3rem, 6vw, 5rem); background: var(--bg-primary); position: relative; } .not-found-num { font-family: var(--font-display); font-weight: 400; font-size: clamp(7rem, 18vw, 14rem); line-height: 1; color: var(--accent-gold); letter-spacing: -0.04em; font-optical-sizing: auto; opacity: 0.95; } .not-found-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 1.2rem 0 1rem; } .not-found-hero p { max-width: 44ch; margin: 0 auto 2.5rem; color: var(--text-secondary); } /* ===== PROSE (privacy, plain content) ===================================== */ .prose { max-width: 64ch; } .prose h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); margin: 2.8rem 0 0.9rem; } .prose p { margin-bottom: 1.2rem; } .prose ul { margin: 0 0 1.2rem 1.5rem; list-style: disc; } .prose ul li { color: var(--text-secondary); margin-bottom: 0.4rem; } .prose a { color: var(--accent-gold); } .prose a:hover, .prose a:focus-visible { text-decoration: underline; } .prose strong { color: var(--text-primary); } .prose .updated { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; } /* Responsive contact grid */ @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } } /* ===== ACCESSIBILITY ====================================================== */ .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: var(--accent-gold); color: var(--bg-primary); padding: 0.7rem 1.2rem; border-radius: 2px; font-weight: 600; transition: top var(--transition); } .skip-link:focus { top: 1rem; } :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== NAVIGATION ========================================================= */ .site-nav { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); z-index: 1000; display: flex; align-items: center; background: transparent; transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition); border-bottom: 1px solid transparent; } .site-nav.scrolled { background: rgba(21, 18, 14, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--border); } /* Open menu state: solid background, NO backdrop-filter. backdrop-filter on the navbar would make it a containing block for the fixed-positioned .nav-links child, trapping the menu inside the navbar's 68px height instead of filling the viewport. Keep this rule filter-free. */ body.nav-open .site-nav { background: #15120e; border-bottom-color: var(--border); } .nav-inner { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav-logo { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; letter-spacing: 0.01em; color: var(--text-primary); white-space: nowrap; line-height: 1; } .nav-logo span { color: var(--accent-gold); } .nav-logo img { display: block; height: 38px; width: auto; object-fit: contain; /* drop-shadow filter is the image equivalent of text-shadow — keeps the signature logo readable over bright hero photos. */ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)); } .footer-brand .nav-logo img { height: 48px; margin-bottom: 0.5rem; /* Footer is on a solid dark background — no shadow needed there. */ filter: none; } .nav-cta { color: var(--accent-gold) !important; border: 1px solid var(--accent-gold); padding: 0.45rem 0.95rem !important; border-radius: 2px; transition: background var(--transition), color var(--transition), border-color var(--transition); } .nav-cta::after { display: none !important; } .nav-cta:hover, .nav-cta:focus-visible { background: var(--accent-gold); color: var(--bg-primary) !important; } .nav-links { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.8rem); } .nav-link { position: relative; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); padding: 0.5rem 0; /* Three-layer shadow stack for nav readability over the brightest possible hero photos (autumn foliage, white water, sunlit cascades): 1. Crisp tight shadow for edge definition 2. Medium glow for soft separation 3. Wide diffuse shadow for "halo" effect against bright backgrounds */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.4); transition: color var(--transition); } .nav-link:hover, .nav-link:focus-visible { color: var(--accent-gold); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent-gold); transform: scaleX(0); transform-origin: right; transition: transform var(--transition); } .nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* Gallery dropdown */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 0.4rem; } .nav-dropdown-toggle .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--transition); } .nav-dropdown:hover .caret, .nav-dropdown:focus-within .caret { transform: rotate(-135deg) translateY(-2px); } .nav-dropdown-menu { position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 240px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px; padding: 0.6rem; opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown-menu a { display: block; padding: 0.7rem 0.9rem; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--text-secondary); border-radius: 2px; transition: background var(--transition), color var(--transition); } .nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { background: var(--bg-secondary); color: var(--accent-gold); } /* Hamburger */ .nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-primary); transition: transform var(--transition), opacity var(--transition); } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===== HERO =============================================================== */ .hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); /* Transitions on BOTH directions so the slide smoothly zooms out as it appears AND smoothly zooms back in as it disappears. Without the transform transition on the base state, the scale would snap from 1.0 -> 1.08 the instant .active is removed — Mike saw this as a "pop" right before each crossfade. */ transition: opacity 2.4s ease-in-out, transform 8s ease-out; } .hero-slide.active { opacity: 1; transform: scale(1); } .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10, 8, 5, 0.55) 0%, transparent 22%, transparent 55%, rgba(10, 8, 5, 0.82) 100%); } .hero-content { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); padding-bottom: clamp(6.5rem, 11vh, 9rem); } .hero-content .eyebrow { margin-bottom: 1.4rem; color: var(--accent-ember); } .hero-title { margin-bottom: 1.2rem; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45); } .hero-title img { display: block; height: clamp(64px, 11vw, 130px); width: auto; max-width: 100%; filter: drop-shadow(0 2px 30px rgba(0, 0, 0, 0.5)); } .hero-tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--text-primary); opacity: 0.92; max-width: 30ch; } /* Hero entrance — pure CSS so hero text never depends on JS */ .hero-content .eyebrow { animation: heroRise 1s cubic-bezier(0.33, 1, 0.68, 1) 0.35s both; } .hero-title { animation: heroRise 1.1s cubic-bezier(0.33, 1, 0.68, 1) 0.5s both; } .hero-tagline { animation: heroRise 1.1s cubic-bezier(0.33, 1, 0.68, 1) 0.68s both; } /* Mobile: shrink the long-quote tagline and pull the hero content lower toward the bottom edge so the quote sits closer to the viewport bottom. */ @media (max-width: 880px) { .hero-content { padding-bottom: clamp(3rem, 7vh, 5rem); } .hero-tagline { font-size: 0.92rem; line-height: 1.5; max-width: 36ch; } } @keyframes heroRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .scroll-cue { position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-secondary); } .scroll-cue .line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--accent-gold), transparent); animation: scrollPulse 2.4s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } /* ===== STATEMENT STRIP ==================================================== */ .statement { text-align: center; padding-block: clamp(2rem, 5vw, 4rem); } .statement-inner { max-width: 40rem; margin-inline: auto; } .statement::before { content: ''; display: block; width: 54px; height: 2px; background: var(--accent-gold); margin: 0 auto 2.4rem; } .statement-text { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.4; color: var(--text-primary); } .statement-attr { display: block; margin-top: 2rem; font-family: var(--font-body); font-style: normal; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } /* ===== FEATURED WORK ====================================================== */ .featured-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.85rem, 1.6vw, 1.6rem); } .featured-item { position: relative; display: block; overflow: hidden; background: var(--bg-card); } .featured-item:nth-child(1) { grid-column: span 8; } .featured-item:nth-child(2) { grid-column: span 4; } .featured-item:nth-child(3) { grid-column: span 4; } .featured-item:nth-child(4) { grid-column: span 8; } .featured-item:nth-child(5) { grid-column: span 12; } .featured-item:nth-child(1), .featured-item:nth-child(2) { height: clamp(340px, 58vh, 600px); } .featured-item:nth-child(3), .featured-item:nth-child(4) { height: clamp(320px, 54vh, 560px); } .featured-item:nth-child(5) { height: clamp(360px, 64vh, 680px); } .featured-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow), filter var(--transition); filter: brightness(1); } .featured-item:hover img, .featured-item:focus-visible img { transform: scale(1.045); filter: brightness(1); } .featured-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.2rem, 2.4vw, 2.2rem); background: var(--scrim-bottom); display: flex; flex-direction: column; gap: 0.4rem; } .featured-caption .eyebrow { font-size: 0.68rem; letter-spacing: 0.2em; transform: translateY(6px); opacity: 0; transition: transform var(--transition), opacity var(--transition); } .featured-item:hover .featured-caption .eyebrow, .featured-item:focus-visible .featured-caption .eyebrow { transform: none; opacity: 1; } .featured-caption h3 { color: var(--text-primary); } /* ===== GALLERY BANDS ====================================================== */ .gallery-bands { display: flex; flex-direction: column; gap: 6px; } .gallery-band { position: relative; display: flex; align-items: center; height: clamp(300px, 44vh, 470px); overflow: hidden; } .gallery-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1); transition: transform var(--transition-slow), filter var(--transition); } .gallery-band:hover .gallery-band-img, .gallery-band:focus-visible .gallery-band-img { transform: scale(1.06); filter: brightness(1); } /* Light-touch gradient — used to be 78% dark on the left half (which made the bands look "dim"). Now just a thin shadow behind the text area: 35% dark at the edge, fading to transparent by 45%. Text readability is mostly handled by the text-shadow stack on .gallery-band-content elements below. */ .gallery-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10, 8, 5, 0.35) 0%, rgba(10, 8, 5, 0.08) 30%, transparent 50%); transition: background var(--transition); } .gallery-band:nth-child(even)::after { background: linear-gradient(to left, rgba(10, 8, 5, 0.35) 0%, rgba(10, 8, 5, 0.08) 30%, transparent 50%); } .gallery-band:hover::after, .gallery-band:focus-visible::after { background: linear-gradient(to right, rgba(10, 8, 5, 0.15) 0%, rgba(10, 8, 5, 0.03) 30%, transparent 50%); } .gallery-band:nth-child(even):hover::after, .gallery-band:nth-child(even):focus-visible::after { background: linear-gradient(to left, rgba(10, 8, 5, 0.15) 0%, rgba(10, 8, 5, 0.03) 30%, transparent 50%); } .gallery-band-content { position: relative; z-index: 1; width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: clamp(1.5rem, 6vw, 5rem); } .gallery-band:nth-child(even) .gallery-band-content { text-align: right; } /* Strong text-shadow stack on all band text — without it, the gallery title / description / link wouldn't read on bright photos now that the heavy left gradient is reduced. Three layers: crisp + medium + diffuse halo. */ .gallery-band-content h3, .gallery-band-content p, .gallery-band-content .gallery-band-link { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.65), 0 0 24px rgba(0, 0, 0, 0.35); } .gallery-band-content h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); margin: 0 0 0.6rem; } .gallery-band-content p { max-width: 38ch; color: var(--text-primary); } .gallery-band:nth-child(even) .gallery-band-content p { margin-left: auto; } .gallery-band-link { display: inline-block; margin-top: 1.1rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-gold); position: relative; padding-bottom: 4px; } .gallery-band-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0.001); transform-origin: left; transition: transform var(--transition); } .gallery-band:nth-child(even) .gallery-band-link::after { transform-origin: right; } .gallery-band:hover .gallery-band-link::after, .gallery-band:focus-visible .gallery-band-link::after { transform: scaleX(1); } /* ===== ABOUT TEASER ======================================================= */ .about-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: start; } .about-portrait { position: relative; overflow: hidden; max-width: 380px; } .about-portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* The about-teaser is the last content section before the footer — tighter bottom padding so the seam to the newsletter feels close */ #about-teaser { padding-bottom: clamp(0.5rem, 1vw, 1rem); } .about-portrait::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--border-strong); pointer-events: none; } .about-text .eyebrow { margin-bottom: 1.1rem; } .about-text h2 { margin-bottom: 1.6rem; } .about-text p { margin-bottom: 1.3rem; max-width: 46ch; } .about-text .text-link { margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; } /* ===== FOOTER ============================================================= */ .site-footer { background: var(--bg-card); border-top: 1px solid var(--border); } /* Newsletter band */ .newsletter { border-bottom: 1px solid var(--border); padding-block: clamp(2rem, 4vw, 3rem); } .newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .newsletter-copy .eyebrow { margin-bottom: 1rem; } .newsletter-copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 0.8rem; } .newsletter-copy p { max-width: 42ch; } .newsletter-copy em { color: var(--accent-ember); font-style: italic; } .newsletter-form { display: flex; gap: 0.7rem; flex-wrap: wrap; } .newsletter-form input[type="email"] { flex: 1; min-width: 200px; background: var(--bg-secondary); border: 1px solid var(--border-strong); color: var(--text-primary); padding: 0.95rem 1.1rem; border-radius: 2px; transition: border-color var(--transition); } .newsletter-form input[type="email"]::placeholder { color: var(--text-muted); } .newsletter-form input[type="email"]:focus { outline: none; border-color: var(--accent-gold); } .newsletter-note { margin-top: 0.9rem; font-size: 0.78rem; color: var(--text-muted); } /* Footer columns */ .footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(1.8rem, 4vw, 3rem); } .footer-brand .nav-logo { font-size: 1.6rem; margin-bottom: 1rem; display: inline-block; } .footer-brand p { max-width: 34ch; font-size: 0.92rem; } .footer-col-title { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.3rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.8rem; } .footer-col a { font-size: 0.92rem; color: var(--text-secondary); transition: color var(--transition); } .footer-col a:hover, .footer-col a:focus-visible { color: var(--accent-gold); } .footer-social { display: flex; gap: 1rem; margin-top: 0.3rem; } .footer-social a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text-secondary); transition: color var(--transition), border-color var(--transition), transform var(--transition); } .footer-social a:hover, .footer-social a:focus-visible { color: var(--accent-gold); border-color: var(--accent-gold); transform: translateY(-3px); } .footer-social svg { width: 18px; height: 18px; } /* Footer bottom bar */ .footer-bottom { border-top: 1px solid var(--border); padding-block: 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .footer-bottom p { font-size: 0.8rem; color: var(--text-muted); } .footer-bottom .copyright-note { max-width: 52ch; } /* ===== SCROLL REVEAL ====================================================== */ .reveal { opacity: 0; transition: opacity 0.55s ease; transition-delay: var(--reveal-delay, 0s); } .reveal.visible { opacity: 1; } .featured-item:nth-child(2) { --reveal-delay: 0.08s; } .featured-item:nth-child(3) { --reveal-delay: 0.04s; } .featured-item:nth-child(4) { --reveal-delay: 0.1s; } .gallery-band:nth-child(2) { --reveal-delay: 0.06s; } .gallery-band:nth-child(3) { --reveal-delay: 0.1s; } .gallery-band:nth-child(4) { --reveal-delay: 0.14s; } /* ===== RESPONSIVE ========================================================= */ @media (max-width: 1024px) { .featured-item:nth-child(1) { grid-column: span 7; } .featured-item:nth-child(2) { grid-column: span 5; } .featured-item:nth-child(3) { grid-column: span 5; } .featured-item:nth-child(4) { grid-column: span 7; } } @media (max-width: 880px) { :root { --nav-height: 68px; } /* Scroll cue is a desktop affordance — it crowds the hero text on small screens */ .scroll-cue { display: none; } /* Smaller logo on mobile to keep the nav balanced with the hamburger */ .nav-logo img { height: 32px; } /* Mobile navigation */ .nav-toggle { display: flex; } .nav-links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 2rem; background: #15120e; z-index: 999; transform: translateX(100%); transition: transform var(--transition-slow); padding: 2rem; /* Prevent horizontal pan / pinch-zoom from drifting menu items off-center. Allow vertical pan in case the menu ever overflows on a short viewport. */ overflow-x: hidden; touch-action: pan-y; } body.nav-open .nav-links { transform: translateX(0); } /* Reset default