/* ========================================================================== Beauty Aesthetics by Elisa — Components Nav, footer, buttons, cards, badges, accordion, gallery, lightbox, forms. Mobile-first base rules; breakpoint overrides live in responsive.css. ========================================================================== */ /* ========================================================================== Intro loader Plays once per browsing session; scripts/loader.js sets .loader-done on for repeat views so the overlay never flashes. Dismissal is a pure CSS animation rather than a JS timer, so a script failure can never leave the overlay covering the site. The reduced-motion backstop in base.css collapses the delay to 0, which skips the intro entirely. ========================================================================== */ .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--color-cream-50); animation: loader-dismiss 500ms ease 3400ms forwards; } .loader-done .loader { display: none; } /* Set by loader.js only while the intro plays; both the lock and its removal live in JS, so no-JS visitors never get a stuck scrollbar. */ .loader-active { overflow: hidden; } .loader__bokeh { position: absolute; inset: -30%; pointer-events: none; will-change: transform; } .loader__bokeh--a { background-image: radial-gradient(circle 26vmax at 22% 26%, var(--bokeh-loader-core) 0%, var(--bokeh-loader-soft) 45%, transparent 72%), radial-gradient(circle 18vmax at 80% 18%, var(--bokeh-loader-core) 0%, var(--bokeh-loader-soft) 45%, transparent 72%), radial-gradient(circle 30vmax at 68% 82%, var(--bokeh-loader-core) 0%, var(--bokeh-loader-soft) 45%, transparent 72%); animation: loader-bokeh-a 5s ease-in-out infinite alternate; } .loader__bokeh--b { background-image: radial-gradient(circle 22vmax at 12% 78%, var(--bokeh-loader-core) 0%, var(--bokeh-loader-soft) 45%, transparent 72%), radial-gradient(circle 16vmax at 90% 56%, var(--bokeh-loader-core) 0%, var(--bokeh-loader-soft) 45%, transparent 72%), radial-gradient(circle 20vmax at 46% 8%, var(--bokeh-loader-core) 0%, var(--bokeh-loader-soft) 45%, transparent 72%); animation: loader-bokeh-b 6.5s ease-in-out infinite alternate; } .loader__logo { position: relative; width: min(200px, 46vw); max-height: 62vh; object-fit: contain; animation: loader-logo-in 1100ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes loader-logo-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes loader-dismiss { to { opacity: 0; visibility: hidden; } } @keyframes loader-bokeh-a { from { transform: translate3d(-8%, -6%, 0) scale(1); } to { transform: translate3d(9%, 7%, 0) scale(1.18); } } @keyframes loader-bokeh-b { from { transform: translate3d(8%, 6%, 0) scale(1.15); } to { transform: translate3d(-9%, -7%, 0) scale(1); } } /* ---- Icon sprite (hidden, source of every reference) ---- */ .sprite { display: none; } /* ---- Skip link ---- */ .skip-link { position: absolute; top: -100%; left: var(--space-sm); z-index: var(--z-modal); padding: var(--space-2xs) var(--space-sm); background: var(--color-charcoal-900); color: var(--color-white); border-radius: var(--radius-sm); transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-sm); } /* ---- Container ---- */ .container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--space-md); } /* ---- Section ---- */ .section { padding-block: var(--space-2xl); } .section--alt { background-color: var(--color-blush-100); } /* Gradient colours can't be interpolated directly, so the band is painted oversized and its background-position is panned instead — the visible window slides along the blush-to-champagne axis for a slow colour shift. The 50% 50% base is the midpoint the reduced-motion backstop settles on. */ .featured-services-section { background-image: linear-gradient(135deg, var(--color-blush-300) 0%, var(--color-blush-300) 55%, var(--color-champagne-500) 100%); background-size: 165% 165%; background-position: 50% 50%; animation: featured-gradient-drift 28s ease-in-out infinite alternate; } @keyframes featured-gradient-drift { from { background-position: 12% 24%; } to { background-position: 88% 76%; } } .section--cream { background-color: var(--color-cream-100); } .section__intro { max-width: 640px; margin-bottom: var(--space-xl); } .section__intro--center { margin-inline: auto; text-align: center; } .section__eyebrow { display: block; font-family: var(--font-script); font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); color: var(--color-rose-600); margin-bottom: var(--space-2xs); } .section__title { margin-bottom: var(--space-sm); } .section__lead { font-size: var(--font-size-md); color: var(--color-charcoal-700); line-height: var(--line-height-relaxed); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); padding: var(--space-xs) var(--space-lg); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-pill); border: 1.5px solid transparent; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; } .btn--primary { background-color: var(--color-charcoal-900); color: var(--color-white); } .btn--primary:hover, .btn--primary:focus-visible { background-color: var(--color-rose-700); transform: translateY(-2px); box-shadow: var(--shadow-hover), var(--shadow-glow-gold); } .btn--secondary { background-color: transparent; border-color: var(--color-charcoal-900); color: var(--color-charcoal-900); } .btn--secondary:hover, .btn--secondary:focus-visible { background-color: var(--color-charcoal-900); color: var(--color-white); transform: translateY(-2px); } .btn--sm { padding: var(--space-3xs) var(--space-md); font-size: var(--font-size-xs); } .btn--block { width: 100%; } .text-link { display: inline-flex; align-items: center; gap: var(--space-3xs); font-weight: 700; color: var(--color-rose-600); border-bottom: 1px solid transparent; transition: border-color var(--transition-fast), gap var(--transition-fast), color var(--transition-fast); } .text-link:hover, .text-link:focus-visible { border-color: currentColor; gap: var(--space-2xs); } .text-link .icon { width: 16px; height: 16px; flex-shrink: 0; } /* ---- Icon helper ---- */ .icon { width: 24px; height: 24px; flex-shrink: 0; } /* ========================================================================== Header / Nav ========================================================================== */ .header { position: sticky; top: 0; z-index: var(--z-header); background-color: var(--color-cream-50); border-bottom: 1px solid var(--color-border); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); } .header__logo { display: flex; align-items: center; gap: var(--space-2xs); flex-shrink: 0; } .header__logo-img { width: 44px; height: 44px; border-radius: var(--radius-circle); object-fit: cover; } .header__wordmark { display: flex; flex-direction: column; line-height: 1; } .header__wordmark-script { font-size: 1.25rem; color: var(--color-charcoal-900); } .header__wordmark-caps { font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: var(--tracking-widest); color: var(--color-charcoal-700); } .nav { display: flex; align-items: center; } .nav__toggle { position: relative; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-charcoal-900); } .nav__toggle-icon { width: 26px; height: 26px; } .nav__menu { position: fixed; inset: 0 0 0 30%; z-index: calc(var(--z-dropdown) + 1); display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); padding: var(--space-2xl) var(--space-xl); background-color: var(--color-cream-50); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--transition-base); } .nav__menu.is-open { transform: translateX(0); } .nav__link { font-family: var(--font-serif); font-size: var(--font-size-lg); color: var(--color-charcoal-900); position: relative; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1.5px; background-color: var(--color-rose-600); transition: width var(--transition-fast); } .nav__link:hover::after, .nav__link:focus-visible::after, .nav__link--active::after { width: 100%; } .nav__link--active { color: var(--color-rose-600); } .nav__cta { margin-top: var(--space-sm); } .nav-overlay { position: fixed; inset: 0; z-index: var(--z-dropdown); background-color: var(--color-overlay); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .nav-overlay.is-open { opacity: 1; pointer-events: auto; } body.nav-open { overflow: hidden; } /* ========================================================================== Hero ========================================================================== */ .hero__inner { display: flex; flex-direction: column-reverse; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-lg); } .hero__media-wrap { position: relative; } .hero__media { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 48px rgba(58, 46, 42, 0.20), 0 8px 20px rgba(58, 46, 42, 0.12); } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__badge { position: absolute; left: -12px; bottom: -16px; z-index: 2; max-width: 260px; padding: var(--space-md) var(--space-lg); background-color: var(--color-white); border: 1px solid var(--color-champagne-500); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .hero__badge p { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: var(--font-size-lg); line-height: var(--line-height-snug); color: var(--color-charcoal-900); text-align: center; max-width: none; } .hero__eyebrow, .hero__title { animation: hero-float-in 700ms ease-out both; } .hero__subhead { animation: hero-float-in 700ms ease-out both; animation-delay: 180ms; } .hero__cta-group { animation: hero-float-in 700ms ease-out both; animation-delay: 360ms; } @keyframes hero-float-in { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } } .hero__eyebrow { font-family: var(--font-script); font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); color: var(--color-rose-600); display: block; margin-bottom: var(--space-2xs); } .hero__title { font-size: var(--font-size-display); margin-bottom: var(--space-md); } .hero__subhead { font-size: var(--font-size-md); color: var(--color-charcoal-700); line-height: var(--line-height-relaxed); margin-bottom: var(--space-lg); max-width: 52ch; } .hero__cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); } /* Smaller page-intro hero used on interior pages */ .page-intro { padding-block: var(--space-xl) var(--space-lg); text-align: center; } .page-intro__lead { max-width: 60ch; margin-inline: auto; color: var(--color-charcoal-700); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); } /* ========================================================================== Testimonials ========================================================================== */ .stars { display: inline-flex; gap: 2px; color: var(--color-champagne-700); } .stars .icon { width: 16px; height: 16px; } .testimonial-rating { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); margin-top: var(--space-sm); } .testimonial-rating__text { font-size: var(--font-size-sm); color: var(--color-charcoal-700); } .section.trust-strip-section { padding-top: var(--space-md); padding-bottom: var(--space-md); } .section.testimonial-section { padding-top: var(--space-md); } .testimonial-carousel { max-width: 720px; margin-inline: auto; } .testimonial-carousel__track { position: relative; } .testimonial-slide { display: none; flex-direction: column; align-items: center; text-align: center; padding: var(--space-lg); } .testimonial-slide.is-active { display: flex; animation: testimonial-fade-in var(--transition-slow); } @keyframes testimonial-fade-in { from { opacity: 0; } to { opacity: 1; } } .testimonial-slide__quote { width: 32px; height: 32px; color: var(--color-blush-500); margin-bottom: var(--space-sm); } .testimonial-slide__text { font-family: var(--font-serif); font-size: var(--font-size-md); font-style: italic; line-height: var(--line-height-relaxed); color: var(--color-charcoal-900); max-width: 56ch; margin-bottom: var(--space-md); } .testimonial-slide__stars { margin-bottom: var(--space-sm); } .testimonial-slide__author { font-weight: 700; color: var(--color-charcoal-900); } .testimonial-slide__meta { font-size: var(--font-size-sm); color: var(--color-charcoal-500); } .testimonial-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-sm); } .testimonial-carousel__btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-circle); background-color: var(--color-white); color: var(--color-charcoal-900); box-shadow: var(--shadow-sm); transition: background-color var(--transition-fast), transform var(--transition-fast); } .testimonial-carousel__btn:hover, .testimonial-carousel__btn:focus-visible { background-color: var(--color-blush-100); transform: translateY(-1px); } .testimonial-carousel__btn .icon { width: 18px; height: 18px; } .testimonial-carousel__dots { display: flex; align-items: center; gap: var(--space-2xs); } .testimonial-carousel__dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background-color: var(--color-border-strong); transition: background-color var(--transition-fast), transform var(--transition-fast); } .testimonial-carousel__dot.is-active { background-color: var(--color-rose-600); transform: scale(1.3); } .testimonial-section__link { display: flex; align-items: center; justify-content: center; margin-top: var(--space-lg); } /* ========================================================================== Trust strip ========================================================================== */ .trust-strip { display: grid; grid-template-columns: 1fr; gap: var(--space-md); padding-block: var(--space-lg); } .trust-strip__item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background-color: var(--glass-bg); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-sm); } .trust-strip__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-circle); background-color: var(--color-blush-100); color: var(--color-rose-600); } .trust-strip__icon .icon { width: 28px; height: 28px; } .trust-strip__text { font-weight: 600; font-size: var(--font-size-base); line-height: var(--line-height-snug); color: var(--color-charcoal-900); } /* ========================================================================== Card grid / Service cards ========================================================================== */ .card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .service-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); background-color: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .service-card__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-circle); background-color: var(--color-champagne-100); color: var(--color-rose-600); } .service-card__title { font-size: var(--font-size-lg); } .service-card__desc { flex: 1 1 auto; color: var(--color-charcoal-700); font-size: var(--font-size-sm); line-height: var(--line-height-body); } .service-card__price { font-family: var(--font-body); font-weight: 700; font-size: var(--font-size-sm); color: var(--color-rose-600); } .service-card__link { margin-top: auto; } /* ========================================================================== Teaser sections (about / results) ========================================================================== */ .teaser { display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; } .teaser__media { width: 100%; max-width: 420px; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .teaser__media img { width: 100%; height: 100%; object-fit: cover; } .teaser__content { max-width: 560px; text-align: center; } .teaser__body { color: var(--color-charcoal-700); line-height: var(--line-height-relaxed); margin-block: var(--space-sm) var(--space-md); } .results-teaser__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin-block: var(--space-lg); } .results-teaser__thumb { aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .results-teaser__thumb img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== CTA banner ========================================================================== */ .cta-banner { text-align: center; padding-block: var(--space-2xl); background: linear-gradient(135deg, var(--color-blush-100), var(--color-champagne-100)); } .cta-banner__eyebrow { font-family: var(--font-script); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); color: var(--color-rose-600); display: block; margin-bottom: var(--space-2xs); } .cta-banner__title { margin-bottom: var(--space-md); max-width: 24ch; margin-inline: auto; } /* ========================================================================== Badge row (pricelist-style benefit badges) ========================================================================== */ .badge-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); padding: var(--space-md); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-xl); } .badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); text-align: center; padding: var(--space-sm); } .badge__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-circle); border: 1.5px solid var(--color-champagne-500); color: var(--color-rose-600); } .badge__label { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-charcoal-700); } /* ========================================================================== Credential / philosophy / team cards ========================================================================== */ .credential-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); } .credential-badge { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-sm); background-color: var(--color-blush-100); border-radius: var(--radius-pill); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-charcoal-900); } .credential-badge .icon { width: 18px; height: 18px; color: var(--color-rose-600); } .philosophy-grid, .team-grid, .studio-gallery { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .philosophy-card { padding: var(--space-lg); text-align: center; background-color: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .philosophy-card__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-inline: auto; margin-bottom: var(--space-sm); border-radius: var(--radius-circle); background-color: var(--color-champagne-100); color: var(--color-rose-600); } .philosophy-card__desc { color: var(--color-charcoal-700); font-size: var(--font-size-sm); line-height: var(--line-height-body); } .team-card { text-align: center; } .team-card__media { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-sm); box-shadow: var(--shadow-sm); } .team-card__media img { width: 100%; height: 100%; object-fit: cover; } .team-card__name { font-size: var(--font-size-md); } .team-card__role { color: var(--color-charcoal-500); font-size: var(--font-size-sm); } .studio-gallery__item { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .studio-gallery__caption { margin-top: var(--space-2xs); color: var(--color-charcoal-500); font-size: var(--font-size-sm); text-align: center; } /* ========================================================================== Accordion (services.html) ========================================================================== */ .accordion__item { border-bottom: 1px solid var(--color-border); } .accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%; padding-block: var(--space-md); text-align: left; } .accordion__trigger-label { display: flex; align-items: center; gap: var(--space-sm); } .accordion__trigger-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-circle); background-color: var(--color-blush-100); color: var(--color-rose-600); } .accordion__trigger-title { font-family: var(--font-serif); font-size: var(--font-size-lg); } .accordion__chevron { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--transition-base); } .accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition-base); } .accordion__panel.is-open { grid-template-rows: 1fr; } .accordion__panel-inner { overflow: hidden; } .price-list__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-xs); border-bottom: 1px dashed var(--color-border); } .price-list__row:last-child { border-bottom: none; } .price-list__name { font-weight: 600; color: var(--color-charcoal-900); } .price-list__note { display: block; font-size: var(--font-size-xs); color: var(--color-rose-600); font-weight: 600; } .price-list__dots { flex: 1; border-bottom: 1px dotted var(--color-border-strong); margin-bottom: 0.3em; } .price-list__price { font-family: var(--font-serif); font-weight: 700; color: var(--color-charcoal-900); white-space: nowrap; } .price-list__desc { color: var(--color-charcoal-700); font-size: var(--font-size-sm); padding-bottom: var(--space-sm); } /* ========================================================================== GLP-1 spotlight steps ========================================================================== */ .steps { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); counter-reset: step; } .steps__item { position: relative; padding: var(--space-lg); padding-top: var(--space-3xl); background-color: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: center; } .steps__number { position: absolute; top: var(--space-md); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-circle); background-color: var(--color-rose-600); color: var(--color-white); } .steps__desc { color: var(--color-charcoal-700); font-size: var(--font-size-sm); line-height: var(--line-height-body); } /* ========================================================================== Results gallery + filter ========================================================================== */ .gallery-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xl); } .gallery-filter__label { display: flex; align-items: center; gap: var(--space-2xs); font-weight: 700; font-size: var(--font-size-sm); color: var(--color-charcoal-700); } .gallery-filter__label .icon { width: 18px; height: 18px; } .gallery-filter__btn { padding: var(--space-3xs) var(--space-md); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-charcoal-700); transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .gallery-filter__btn:hover { border-color: var(--color-rose-600); } .gallery-filter__btn[aria-pressed="true"] { background-color: var(--color-charcoal-900); border-color: var(--color-charcoal-900); color: var(--color-white); } .gallery { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .gallery__item.is-hidden { display: none; } .gallery__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; } .gallery__pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; } .gallery__tag { position: absolute; top: var(--space-2xs); padding: 2px var(--space-2xs); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; background-color: var(--color-overlay); color: var(--color-white); border-radius: var(--radius-sm); } .gallery__tag--before { left: var(--space-2xs); } .gallery__tag--after { right: var(--space-2xs); } .gallery__caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-2xs); } .gallery__caption-text { font-size: var(--font-size-sm); } .gallery__caption-title { font-weight: 700; color: var(--color-charcoal-900); } .gallery__caption-meta { display: block; color: var(--color-charcoal-500); font-size: var(--font-size-xs); } .gallery__zoom-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-circle); background-color: var(--color-blush-100); color: var(--color-rose-600); transition: background-color var(--transition-fast), transform var(--transition-fast); } .gallery__zoom-btn:hover { background-color: var(--color-champagne-300); transform: scale(1.06); } .gallery__zoom-btn .icon { width: 18px; height: 18px; } /* ---- Lightbox ---- */ .lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-md); background-color: var(--color-overlay); } .lightbox.is-open { display: flex; } .lightbox__dialog { position: relative; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; background-color: var(--color-cream-50); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-lg); } .lightbox__close { position: absolute; top: var(--space-sm); right: var(--space-sm); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-circle); background-color: var(--color-white); color: var(--color-charcoal-900); box-shadow: var(--shadow-sm); } .lightbox__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-md); } .lightbox__pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; } .lightbox__caption-title { font-family: var(--font-serif); font-size: var(--font-size-lg); } .lightbox__caption-meta { color: var(--color-charcoal-500); font-size: var(--font-size-sm); margin-top: var(--space-3xs); } .lightbox__controls { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-md); } .lightbox__nav-btn { display: flex; align-items: center; gap: var(--space-2xs); font-weight: 700; font-size: var(--font-size-sm); color: var(--color-charcoal-900); } .lightbox__nav-btn .icon { width: 18px; height: 18px; } .gallery-live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } /* ========================================================================== Disclaimer block ========================================================================== */ .disclaimer-block { display: flex; gap: var(--space-sm); padding: var(--space-md); background-color: var(--color-champagne-100); border-radius: var(--radius-md); border: 1px solid var(--color-border); margin-bottom: var(--space-xl); } .disclaimer-block .icon { flex-shrink: 0; color: var(--color-rose-600); } .disclaimer-block p { font-size: var(--font-size-sm); color: var(--color-charcoal-700); max-width: none; } /* ========================================================================== Contact page ========================================================================== */ .contact-info { display: flex; flex-direction: column; gap: var(--space-md); } .contact-info__item { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm); background-color: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .contact-info__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-circle); background-color: var(--color-blush-100); color: var(--color-rose-600); } .contact-info__label { display: block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-charcoal-500); margin-bottom: 2px; } .contact-info__value { font-weight: 600; color: var(--color-charcoal-900); } .contact-info__hours-row { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--font-size-sm); } .policy-list { display: flex; flex-direction: column; gap: var(--space-sm); } .policy-list__item { display: flex; align-items: flex-start; gap: var(--space-xs); } .policy-list__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--color-rose-600); } .policy-list__icon .icon { width: 18px; height: 18px; } .policy-list__item p { color: var(--color-charcoal-700); font-size: var(--font-size-sm); line-height: var(--line-height-body); } .section.map-section { padding-bottom: var(--space-md); } .section.booking-policy-section { padding-top: var(--space-md); } .map-embed { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .map-embed iframe { display: block; width: 100%; height: 100%; border: 0; } .map-embed__link { display: flex; justify-content: center; margin-top: var(--space-sm); } /* ---- Form (visual only, no backend) ---- */ .form { display: flex; flex-direction: column; gap: var(--space-md); } .form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } .form__group { display: flex; flex-direction: column; gap: var(--space-3xs); } .form__label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-charcoal-900); } .form__input, .form__textarea { padding: var(--space-sm); background-color: var(--color-white); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); transition: border-color var(--transition-fast); } .form__input:focus-visible, .form__textarea:focus-visible { border-color: var(--color-rose-600); } .form__textarea { min-height: 120px; resize: vertical; } .form__note { font-size: var(--font-size-xs); color: var(--color-charcoal-500); } /* ========================================================================== Footer ========================================================================== */ .footer { background-color: var(--color-blush-100); padding-top: var(--space-2xl); } .footer__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); padding-bottom: var(--space-xl); } .footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); } .footer__logo-img { width: 56px; height: 56px; border-radius: var(--radius-circle); object-fit: cover; } .footer__tagline { font-size: 1.5rem; color: var(--color-charcoal-900); } .footer__nav h2, .footer__contact h2, .footer__hours-title { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-charcoal-900); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-2xs); } .footer__nav ul, .footer__hours ul { display: flex; flex-direction: column; gap: var(--space-2xs); } .footer__nav a { color: var(--color-charcoal-700); transition: color var(--transition-fast); } .footer__nav a:hover, .footer__nav a:focus-visible { color: var(--color-rose-600); } .footer__contact { display: flex; flex-direction: column; gap: var(--space-sm); } .footer__contact-item { display: flex; align-items: center; gap: var(--space-2xs); color: var(--color-charcoal-700); font-size: var(--font-size-sm); transition: color var(--transition-fast); } .footer__contact-item:hover, .footer__contact-item:focus-visible { color: var(--color-rose-600); } .footer__contact-item .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-rose-600); } .footer__hours li { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--font-size-sm); color: var(--color-charcoal-700); } .footer__legal { border-top: 1px solid var(--color-border-strong); padding-block: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); text-align: center; } .footer__legal p { max-width: none; font-size: var(--font-size-xs); color: var(--color-charcoal-500); } /* ========================================================================== Scroll reveal ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--transition-slow), transform var(--transition-slow); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }