/* Golden Hour Weddings & Events — shared stylesheet. Loaded by every page. Edit once here and the whole site follows. */ /* ── Foundations ─────────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { background: #f6f1e7; color: #2e2a22; font-family: Jost, sans-serif; font-weight: 300; overflow-x: hidden; } ::selection { background: #dcc4a1; color: #39402a; } /* Slim, brand-tinted scrollbar */ ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background: #f6f1e7; } ::-webkit-scrollbar-thumb { background: #dcc4a1; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: #c7a177; } /* ── Scroll-reveal: fade + slight rise ───────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } .reveal-slow { transition-duration: 1.5s; } /* Hairline rule that draws itself in */ .rule { height: 1px; background: currentColor; opacity: .35; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.22,1,.36,1); } .is-visible .rule, .rule.is-visible { transform: scaleX(1); } /* ── Buttons: background sweeps up from the baseline ─────────── */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1.05rem 2.6rem; font-size: .72rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; border: 1px solid currentColor; overflow: hidden; isolation: isolate; transition: color .55s cubic-bezier(.22,1,.36,1); } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .55s cubic-bezier(.22,1,.36,1); } .btn:hover::before, .btn:focus-visible::before { transform: translateY(0); } .btn-dark { color: #39402a; } .btn-dark::before { background: #39402a; } .btn-dark:hover, .btn-dark:focus-visible { color: #f6f1e7; } .btn-light { color: #f6f1e7; } .btn-light::before { background: #f6f1e7; } .btn-light:hover, .btn-light:focus-visible { color: #39402a; } .btn-gold { color: #f6f1e7; border-color: #b98f55; background: #b98f55; } .btn-gold::before { background: #39402a; } .btn-gold:hover, .btn-gold:focus-visible { color: #f6f1e7; } /* ── Underline that grows from the left ──────────────────────── */ .link-line { position: relative; } .link-line::after { content: ''; position: absolute; left: 0; bottom: -.35em; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.22,1,.36,1); } .link-line:hover::after, .link-line:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* ── Imagery: slow, quiet scale on hover ─────────────────────── */ .img-frame { overflow: hidden; background: #e8eadd; } .img-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.4s cubic-bezier(.22,1,.36,1), filter 1.4s ease; } .group:hover .img-frame img, .img-frame:hover img { transform: scale(1.06); } /* Hero: barely-there drift, so the first frame feels alive */ @keyframes heroDrift { from { transform: scale(1.04); } to { transform: scale(1.13); } } .hero-img { animation: heroDrift 24s ease-out forwards; } @keyframes scrollCue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* Keeps hero type legible over the brightest part of a photograph */ .on-photo { text-shadow: 0 1px 24px rgba(46,42,34,.45); } .scroll-cue span { display: block; width: 1px; height: 64px; background: currentColor; animation: scrollCue 2.6s cubic-bezier(.65,0,.35,1) infinite; } /* ── Navigation ──────────────────────────────────────────────── */ /* Padding + colour live here (not in utilities) so the state swap survives a production Tailwind build, where runtime-added classes would be purged. */ .nav { color: #f6f1e7; padding-top: 1.5rem; padding-bottom: 1.5rem; transition: background-color .6s ease, color .6s ease, box-shadow .6s ease, padding .6s ease; } @media (min-width: 768px) { .nav { padding-top: 2rem; padding-bottom: 2rem; } } .nav.nav-solid { background-color: rgba(246,241,231,.94); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(74,82,51,.12); color: #39402a; padding-top: .95rem; padding-bottom: .95rem; } @media (min-width: 768px) { .nav.nav-solid { padding-top: 1.15rem; padding-bottom: 1.15rem; } } body.menu-open .nav { color: #f6f1e7; background-color: transparent; box-shadow: none; } .menu-panel { clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.76,0,.24,1); } .menu-open .menu-panel { clip-path: inset(0 0 0 0); } .menu-open .burger-top { transform: translateY(4px) rotate(45deg); } .menu-open .burger-bottom { transform: translateY(-4px) rotate(-45deg); } .burger-top, .burger-bottom { transition: transform .45s cubic-bezier(.76,0,.24,1); } /* Current page: a permanent version of the hover underline, so you always know where you are without the link looking like it's stuck mid-hover. */ .nav-active::after { transform: scaleX(1); transform-origin: left; opacity: .55; } .menu-link[aria-current="page"] { color: #dcc4a1; } .menu-link { transition: color .4s ease, letter-spacing .5s cubic-bezier(.22,1,.36,1); } .menu-link:active, .menu-link:hover { color: #dcc4a1; letter-spacing: .03em; } /* Booking-process steps: the hairline brightens as the eye lands on one */ .step .rule { transition: transform 1.4s cubic-bezier(.22,1,.36,1), opacity .5s ease; } .step:hover .rule { opacity: .75; } /* ── Service inclusion lists ─────────────────────────────────── */ .incl li { position: relative; padding-left: 1.4rem; } .incl li::before { content: ''; position: absolute; left: 0; top: .72em; width: .5rem; height: 1px; background: #b98f55; } /* ── Form fields: a single hairline that lights up ───────────── */ .field input, .field select, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(74,82,51,.28); padding: .7rem 0; font-family: Jost, sans-serif; font-weight: 300; font-size: 1rem; color: #2e2a22; outline: none; border-radius: 0; transition: border-color .5s ease; appearance: none; -webkit-appearance: none; } .field input:focus, .field select:focus, .field textarea:focus { border-color: #b98f55; } .field label { display: block; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: #6f6653; margin-bottom: .2rem; } .field select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .2rem center; } .field textarea { resize: vertical; min-height: 110px; } /* ── Contact-preference checkboxes ───────────────────────────── */ .field fieldset { border: 0; padding: 0; margin: 0; } .field legend { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: #6f6653; margin-bottom: .2rem; padding: 0; } .check-row { display: flex; flex-wrap: wrap; gap: 1.1rem 2.4rem; padding: .7rem 0; border-bottom: 1px solid rgba(74,82,51,.28); transition: border-color .5s ease; } .check-row:focus-within { border-color: #b98f55; } .check { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-family: Jost, sans-serif; font-weight: 300; font-size: 1rem; color: #2e2a22; } .check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; flex: none; border: 1px solid rgba(74,82,51,.45); background: transparent; border-radius: 0; outline: none; cursor: pointer; transition: border-color .35s ease, background-color .35s ease; } .check input[type="checkbox"]:checked { background: #b98f55; border-color: #b98f55; } .check input[type="checkbox"]:focus-visible { border-color: #b98f55; box-shadow: 0 0 0 2px rgba(185,143,85,.3); } .field-error { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: #b3261e; margin-top: .5rem; } /* Honeypot — off-screen rather than display:none, which some bots detect */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } ::placeholder { color: rgba(111,102,83,.5); } /* ── Portfolio gallery ─────────────────────────────────────── One large frame with a strip of thumbnails beneath it. Photographs are mixed portrait and landscape, so the frame keeps a fixed height and contains rather than crops — the soft backdrop is what makes the letterboxing read as a mount rather than a mistake. */ .gallery-stage { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(340px, 62vh, 660px); background: #e8eadd; } .gallery-frame { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .gallery-frame:focus-visible { outline: 2px solid #b98f55; outline-offset: 4px; } .gallery-photo { width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity .45s cubic-bezier(.22,1,.36,1); } .gallery.is-swapping .gallery-photo { opacity: 0; } .gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 0; background: rgba(246,241,231,.82); color: #39402a; cursor: pointer; opacity: .85; transition: opacity .35s ease, background-color .35s ease; } .gallery-arrow:hover, .gallery-arrow:focus-visible { opacity: 1; background: #f6f1e7; } .gallery-arrow:focus-visible { outline: 1px solid #b98f55; outline-offset: 2px; } .gallery-prev { left: 0; } .gallery-next { right: 0; } @media (min-width: 768px) { .gallery-prev { left: 1rem; } .gallery-next { right: 1rem; } } .gallery-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-top: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(199,161,119,.3); } .gallery-caption { max-width: 62ch; font-size: .78rem; font-weight: 300; line-height: 1.9; letter-spacing: .03em; color: #6f6653; } .gallery-count { flex: none; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: #b98f55; } .gallery-strip { display: flex; gap: .55rem; margin-top: 1.5rem; padding-bottom: .75rem; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .gallery-strip::-webkit-scrollbar { height: 3px; } .gallery-strip::-webkit-scrollbar-track { background: rgba(199,161,119,.15); } .gallery-strip::-webkit-scrollbar-thumb { background: #dcc4a1; } .gallery-thumb { position: relative; flex: 0 0 auto; width: 4.25rem; height: 5.25rem; padding: 0; border: 0; background: #e8eadd; cursor: pointer; opacity: .4; transition: opacity .4s ease; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumb:hover { opacity: .75; } .gallery-thumb[aria-current="true"] { opacity: 1; } .gallery-thumb[aria-current="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.45rem; height: 1px; background: #b98f55; } .gallery-thumb:focus-visible { opacity: 1; outline: 1px solid #b98f55; outline-offset: 3px; } @media (min-width: 768px) { .gallery-thumb { width: 5rem; height: 6.25rem; } } .viewer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.25rem; background: rgba(46,42,34,.95); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .5s cubic-bezier(.22,1,.36,1), visibility .5s; } .viewer.is-open { opacity: 1; visibility: visible; } body.viewer-open { overflow: hidden; } .viewer figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; max-height: 100%; } .viewer img { max-height: calc(100vh - 11rem); max-width: 100%; width: auto; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,.55); opacity: 0; transform: scale(.985); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .viewer.is-ready img { opacity: 1; transform: none; } .viewer figcaption { max-width: 46ch; text-align: center; font-size: .62rem; line-height: 2; letter-spacing: .28em; text-transform: uppercase; color: rgba(246,241,231,.6); } .viewer button { position: absolute; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 0; background: none; color: #f6f1e7; cursor: pointer; opacity: .65; transition: opacity .35s ease; } .viewer button:hover, .viewer button:focus-visible { opacity: 1; } .viewer button:focus-visible { outline: 1px solid rgba(246,241,231,.5); outline-offset: 2px; } .viewer-close { top: 1.25rem; right: 1.25rem; } .viewer-prev { left: .5rem; top: 50%; transform: translateY(-50%); } .viewer-next { right: .5rem; top: 50%; transform: translateY(-50%); } .viewer-count { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-size: .6rem; letter-spacing: .28em; color: rgba(246,241,231,.45); } @media (min-width: 768px) { .viewer-close { top: 2rem; right: 2rem; } .viewer-prev { left: 1.75rem; } .viewer-next { right: 1.75rem; } } /* ── Respect reduced-motion preferences ──────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .rule { transform: scaleX(1); } .viewer img { opacity: 1; transform: none; } .gallery.is-swapping .gallery-photo { opacity: 1; } .gallery-strip { scroll-behavior: auto; } }