/* ============================================================ LUMIÈRE — premium layout, modeled on lassie.ai's design language. Own type trio (Fraunces / DM Sans / DM Mono) + warm stone neutrals. The single ACCENT is driven by the salon's brand colour (var(--accent), set by main.js applyTheme), so it adapts per salon while keeping the look. ============================================================ */ /* Accent fallback on :root only — main.js applyTheme sets --accent inline on (the salon's brand colour), which overrides this. Do NOT set --accent on .lumiere or it would shadow the brand colour for the whole layout. */ :root { --accent: #07756c; } .lumiere { --l-bg:#f9f8f5; --l-surface:#ffffff; --l-muted-surface:#f3f0e9; --l-border:#e3ddcf; --l-ink:#1a1613; --l-ink-muted:#473d37; --l-dark:#120c08; --l-radius-card:16px; --l-radius-media:32px; --l-radius-pill:9999px; --l-ease:cubic-bezier(.22,1,.36,1); /* ease-out-quint */ --l-pad:clamp(6rem,10vw,15rem); --l-w:80rem; --l-measure:44rem; --font-head:"Fraunces",Georgia,serif; --font-body:"DM Sans",system-ui,sans-serif; --font-mono:"DM Mono",ui-monospace,monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body.lumiere { font-family: var(--font-body); color: var(--l-ink); background: var(--l-bg); line-height: 1.6; font-weight: 400; overflow-x: clip; -webkit-font-smoothing: antialiased; } .lumiere img { max-width: 100%; display: block; } .lumiere h1, .lumiere h2, .lumiere h3 { font-family: var(--font-head); font-weight: 500; letter-spacing: -0.017em; line-height: 1.08; } .lumiere h2 { font-size: clamp(2.6rem, 3.1vw, 4.2rem); } .lumiere a { color: inherit; } /* mono eyebrows / labels — the "designed" tell */ .lumiere .section-eyebrow, .lumiere .eyebrow { font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; } /* ---- Buttons: pill, arrow nudge ---- */ .lumiere .btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-body); font-size: .82rem; font-weight: 500; letter-spacing: .04em; padding: 1rem 1.9rem; border-radius: var(--l-radius-pill); background: var(--accent); color: #fff; text-decoration: none; border: 1px solid var(--accent); cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; } .lumiere .btn:hover { background: color-mix(in srgb, var(--accent) 82%, #000); transform: translateY(-1px); } .lumiere .btn-arrow { display: inline-block; transition: transform .15s ease; } .lumiere .btn:hover .btn-arrow { transform: translateX(4px); } .lumiere .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .lumiere .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } .lumiere .l-link { font-family: var(--font-mono); font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; display: inline-flex; gap: .5rem; align-items: center; border-bottom: 1px solid transparent; padding-bottom: 2px; } .lumiere .l-link:hover { border-bottom-color: var(--accent); } .lumiere .l-link:hover .btn-arrow { transform: translateX(4px); } /* ---- Nav ---- */ .lumiere nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.25rem,5vw,3.5rem); background: color-mix(in srgb, var(--l-bg) 86%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--l-border); } .lumiere .logo { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; } .lumiere .logo img { height: 40px; } .lumiere .nav-links { display: flex; align-items: center; gap: 2.1rem; } .lumiere .nav-links a { text-decoration: none; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--l-ink); } .lumiere .nav-links a:not(.nav-cta) { position: relative; } .lumiere .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--accent); transition: width .3s var(--l-ease); } .lumiere .nav-links a:not(.nav-cta):hover::after { width: 100%; } .lumiere .nav-cta { background: var(--accent); color: #fff !important; padding: .6rem 1.3rem; border-radius: var(--l-radius-pill); } .lumiere .nav-toggle { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; cursor: pointer; } .lumiere .nav-toggle span { position: absolute; left: 0; height: 2px; width: 100%; background: var(--l-ink); transition: .3s; } .lumiere .nav-toggle span:nth-child(1){ top: 0; } .lumiere .nav-toggle span:nth-child(2){ top: 10px; } .lumiere .nav-toggle span:nth-child(3){ top: 20px; } /* ---- Hero ---- */ .lumiere .l-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: clamp(2rem,6vw,5.5rem); overflow: hidden; } .lumiere .hero-photo { position: absolute; inset: 0; background: var(--l-muted-surface) center/cover no-repeat; clip-path: inset(0 0 0 0); animation: l-reveal-hero 1.4s var(--l-ease) both, l-kenburns 24s ease-out 1.2s infinite alternate; } @keyframes l-reveal-hero { from { clip-path: inset(14% 14% 14% 14% round 40px); } to { clip-path: inset(0 0 0 0 round 0); } } @keyframes l-kenburns { from { transform: scale(1.03); } to { transform: scale(1.12); } } .lumiere .l-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,12,8,.22) 0%, rgba(18,12,8,.05) 40%, rgba(18,12,8,.5) 100%); } .lumiere .l-hero-inner { position: relative; max-width: 960px; color: #fff; } .lumiere .l-hero .eyebrow { color: #fff; opacity: .9; } .lumiere .l-hero-h1 { font-size: clamp(3.2rem, 7vw, 7rem); line-height: 1.02; font-weight: 500; letter-spacing: -0.02em; text-shadow: 0 2px 50px rgba(0,0,0,.3); } .lumiere .l-hero-h1 em { display: block; font-style: italic; font-weight: 400; } .lumiere .l-hero-tag { font-size: clamp(1.05rem,1.7vw,1.35rem); font-weight: 300; margin-top: 1.6rem; max-width: 42ch; opacity: .95; line-height: 1.5; } .lumiere .l-hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2.4rem; } .lumiere .l-hero-rating { margin-top: 1.7rem; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; opacity: .95; } .lumiere .l-hero-rating .stars { letter-spacing: .1em; } .lumiere .l-scroll-hint { position: absolute; left: 50%; bottom: 24px; width: 1px; height: 44px; background: linear-gradient(#fff, transparent); opacity: .5; animation: l-scrollhint 2.4s ease-in-out infinite; } @keyframes l-scrollhint { 0%,100%{ transform: translateY(0); opacity:.15; } 50%{ transform: translateY(8px); opacity:.6; } } /* ---- Marquee (calm) ---- */ .lumiere .marquee { overflow: hidden; white-space: nowrap; padding: 2rem 0; border-top: 1px solid var(--l-border); border-bottom: 1px solid var(--l-border); background: var(--l-muted-surface); } .lumiere .marquee-track { display: inline-block; animation: l-marquee 42s linear infinite; } .lumiere .marquee span { font-family: var(--marquee-font, var(--font-head)); font-size: clamp(1.8rem,4.5vw,3.2rem); font-weight: 500; padding: 0 1.4rem; text-transform: none; color: color-mix(in srgb, var(--l-ink) 30%, transparent); } .lumiere .marquee span.fill { color: var(--accent); } .lumiere .marquee.is-static { text-align: center; white-space: normal; } /* Static bands fade in only - the rise/scale/blur reveal reads as a jump when there is no scrolling motion to hide it. */ .lumiere .marquee.is-static.reveal { transform: none; filter: none; transition: opacity .6s ease; } .lumiere .marquee.is-static .marquee-track { animation: none; transform: none; display: block; } .lumiere .marquee.is-static span { padding: 0; } @keyframes l-marquee { to { transform: translateX(-50%); } } /* ---- Section rhythm ---- */ .lumiere section { padding: var(--l-pad) clamp(1.25rem,5vw,3.5rem); max-width: var(--l-w); margin: 0 auto; } .lumiere .l-sec-head { max-width: var(--l-measure); margin: 0 auto clamp(3rem,5vw,5rem); text-align: center; } .lumiere .l-sec-intro { color: var(--l-ink-muted); font-size: 1.1rem; margin-top: 1rem; } /* ---- About (asymmetric split) ---- */ .lumiere .l-about { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem,6vw,7rem); align-items: center; } .lumiere .l-about-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; max-width: var(--l-measure); } .lumiere .l-lead { font-family: var(--font-head); font-size: clamp(1.5rem,2.4vw,2.1rem); line-height: 1.35; font-weight: 400; color: var(--l-ink); } /* About — sleeker, collapsible variant (opt-in via config.aboutCollapse; scoped, so no effect on other sites) */ .lumiere .l-about-copy.is-collapsible .l-lead { font-family: var(--font-body); font-size: clamp(1.02rem,1.25vw,1.18rem); line-height: 1.8; font-weight: 300; letter-spacing: .005em; color: var(--l-ink-muted); } .lumiere:not(.bs-edit) .l-about-copy.is-collapsible .l-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .lumiere:not(.bs-edit) .l-about-copy.is-collapsible.is-open .l-lead { -webkit-line-clamp: unset; overflow: visible; } .lumiere .l-about-toggle { align-self: flex-start; margin-top: -.4rem; background: none; border: 0; padding: 0 0 2px; font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--l-ink); cursor: pointer; border-bottom: 1px solid var(--l-ink); transition: opacity .2s ease; } .lumiere .l-about-toggle:hover { opacity: .55; } .lumiere.bs-edit .l-about-toggle { display: none; } .lumiere .l-about-media { aspect-ratio: 4/5; border-radius: var(--l-radius-media); background: var(--l-muted-surface) center/cover no-repeat; box-shadow: 0 40px 80px rgba(18,12,8,.14); } /* ---- Story (pinned background, chapters scroll through) ---- */ .lumiere .l-story { position: relative; max-width: none; padding: 0; margin: 0; background: var(--l-dark); } .lumiere .l-story-viz { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .lumiere .l-story-bg { position: absolute; inset: 0; background: var(--l-dark) center/cover no-repeat; transform: scale(1.06); animation: l-kenburns 26s ease-out infinite alternate; } .lumiere .l-story-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,12,8,.78) 0%, rgba(18,12,8,.4) 48%, rgba(18,12,8,.18) 100%); } .lumiere .l-story-track { position: relative; margin-top: -100vh; margin-top: -100svh; z-index: 2; } .lumiere .l-story-panel { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 0 clamp(1.5rem, 7vw, 7rem); } .lumiere .l-story-panel .inner { max-width: 40rem; color: #fff; opacity: 0; transform: translateY(2rem); transition: opacity .75s var(--l-ease), transform .75s var(--l-ease); } .lumiere .l-story-panel.in .inner { opacity: 1; transform: none; } .lumiere .l-story-panel .eyebrow { color: color-mix(in srgb, var(--accent) 65%, #fff); } .lumiere .l-story-panel h2 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); } .lumiere .l-story-text { font-family: var(--font-body); font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; margin-top: 1.1rem; opacity: .92; } @media (prefers-reduced-motion: reduce) { .lumiere .l-story-bg { animation: none; } .lumiere .l-story-panel .inner { opacity: 1; transform: none; } } /* ---- Services (spacious numbered list) ---- */ .lumiere .l-service-list { max-width: var(--l-w); margin: 0 auto; border-top: 1px solid var(--l-border); } .lumiere .svc { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.7rem .5rem; border-bottom: 1px solid var(--l-border); transition: padding-left .4s var(--l-ease), background .3s ease; } .lumiere .svc:hover { padding-left: 1.4rem; background: color-mix(in srgb, var(--accent) 5%, transparent); } .lumiere .svc-name { font-family: var(--font-head); font-size: clamp(1.3rem,2vw,1.85rem); line-height: 1.2; } .lumiere .svc-name small { display: block; font-family: var(--font-body); font-size: .85rem; color: var(--l-ink-muted); font-weight: 400; margin-top: .35rem; } .lumiere .svc-price { font-family: var(--font-mono); font-size: .95rem; color: var(--accent); white-space: nowrap; } .lumiere .l-service-list.collapsed .svc:nth-child(n+9) { display: none; } .lumiere .l-svc-toggle { text-align: center; margin-top: 2.6rem; } .lumiere .svc-toggle { display: inline-block; text-decoration: none; cursor: pointer; background: transparent; border: 1px solid var(--l-border); color: var(--l-ink); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: .85rem 1.9rem; border-radius: var(--l-radius-pill); transition: border-color .3s, color .3s; } .lumiere .svc-toggle:hover { border-color: var(--accent); color: var(--accent); } /* Category-grouped menu (services pulled from the booking link) */ .lumiere .l-service-list[data-categorized="1"] { border-top: 0; } .lumiere .svc-cat { margin-bottom: 2rem; } .lumiere .svc-cat-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: 0; border-top: 2px solid var(--l-ink); cursor: pointer; text-align: left; font-family: var(--font-mono); font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; padding: 1.6rem 0 .5rem; } .lumiere .svc-cat-meta { display: inline-flex; align-items: center; gap: .6rem; } .lumiere .svc-cat-n { font-size: .72rem; color: var(--l-ink-muted); } .lumiere .svc-cat-chev { transition: transform .25s var(--l-ease); } .lumiere .svc-cat.closed .svc-cat-chev { transform: rotate(-90deg); } .lumiere .svc-cat.closed .svc-cat-items { display: none; } /* ---- Gallery: even grid (uniform tiles, centered — no left-stacking) ---- */ .lumiere .l-gallery { max-width: 74rem; } /* Flex (not grid) so an incomplete last row CENTERS instead of leaving orphaned, left-hugging photos. --gcols (set by main.js) drives how many per row. */ .lumiere .gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; } @media (min-width: 901px) { .lumiere .gallery-grid { max-width: var(--gmax, none); margin: 0 auto; } } .lumiere .gallery-grid .gal { overflow: hidden; border-radius: var(--l-radius-card); flex: 0 1 calc((100% - (var(--gcols, 3) - 1) * 1.2rem) / var(--gcols, 3)); } .lumiere .gallery-grid img { width: 100%; aspect-ratio: 4/5; height: auto; object-fit: cover; transition: transform .9s var(--l-ease); } .lumiere .gallery-grid .gal:hover img { transform: scale(1.05); } /* ---- Videos ---- */ .lumiere .l-videos { max-width: 74rem; } .lumiere .video-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 62rem; margin: 0 auto; } .lumiere .video-grid:has(.video-embed:nth-child(2)) { grid-template-columns: repeat(2, 1fr); } .lumiere .video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--l-radius-card); overflow: hidden; background: var(--l-muted-surface); box-shadow: 0 20px 50px rgba(18,12,8,.12); } .lumiere .video-embed iframe, .lumiere .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } /* Hero background video */ .lumiere .hero-photo.has-video { background-color: var(--l-dark); } .lumiere .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; } .lumiere .hero-photo.has-video iframe.hero-video { width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 820px) { .lumiere .video-grid, .lumiere .video-grid:has(.video-embed:nth-child(2)) { grid-template-columns: 1fr; } } /* ---- Team ---- */ .lumiere .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 2.2rem; max-width: var(--l-w); margin: 0 auto; } .lumiere .team-card { text-align: center; } .lumiere .team-photo { width: 100%; aspect-ratio: 3/4; background: var(--l-muted-surface) center/cover no-repeat; border-radius: var(--l-radius-card); transition: transform .5s var(--l-ease); } .lumiere .team-card:hover .team-photo { transform: translateY(-8px); } .lumiere .team-card h3 { font-size: 1.45rem; margin-top: 1.2rem; } .lumiere .team-card p { font-family: var(--font-mono); color: var(--l-ink-muted); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .35rem; } /* Bio: prose, so it drops the role's mono uppercase micro-label treatment. */ .lumiere .team-card .team-bio { font-family: var(--font-body); font-size: .9rem; line-height: 1.65; letter-spacing: 0; text-transform: none; margin-top: .7rem; text-align: left; white-space: pre-line; } /* Awards & recognition — contain (not cover) so certificates/plaques never crop */ .lumiere .l-awards { max-width: 74rem; } .lumiere .awards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 2.2rem; max-width: var(--l-w); margin: 0 auto; } .lumiere .award-card { text-align: center; } .lumiere .award-photo { width: 100%; aspect-ratio: 4/5; background: var(--l-muted-surface) center/contain no-repeat; background-origin: content-box; padding: 1.3rem; box-sizing: border-box; border-radius: var(--l-radius-card); border: 1px solid color-mix(in srgb, var(--l-ink, #1a1613) 9%, transparent); transition: transform .5s var(--l-ease); } .lumiere .award-card:hover .award-photo { transform: translateY(-8px); } .lumiere .award-photo--empty { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--accent); } .lumiere .award-card h3 { font-size: 1.4rem; margin-top: 1.2rem; } .lumiere .award-meta { font-family: var(--font-mono); color: var(--l-ink-muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .4rem; } @media (max-width: 560px) { .lumiere .awards-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; } .lumiere .award-card h3 { font-size: 1.1rem; } } /* ---- Instagram ---- */ .lumiere .l-feed { text-align: center; } .lumiere .ig-follow { text-align: center; margin-bottom: 1.8rem; } .lumiere .ig-follow:empty { display: none; } .lumiere .ig-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; max-width: 64rem; margin: 0 auto; } .lumiere .feed-slot { margin-top: 2rem; } /* ---- Reviews (dark, pull-quotes) ---- */ .lumiere .l-reviews { max-width: none; background: var(--l-dark); color: #fff; text-align: center; } .lumiere .l-reviews .section-eyebrow { color: color-mix(in srgb, var(--accent) 70%, #fff); } .lumiere .review-stat { display: inline-flex; align-items: baseline; gap: .7rem; margin: 0 auto 3.5rem; } .lumiere .review-stat .num { font-family: var(--font-head); font-size: 3.6rem; color: #fff; line-height: 1; } .lumiere .review-stat .stars { color: var(--accent); letter-spacing: .12em; font-size: 1.3rem; } .lumiere .review-stat .count { font-family: var(--font-mono); color: rgba(255,255,255,.6); font-size: .9rem; } .lumiere .reviews-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 76rem; margin: 0 auto; text-align: left; } .lumiere .reviews-grid .review-card { flex: 1 1 300px; max-width: 360px; } .lumiere .review-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--l-radius-card); padding: 2.4rem; transition: transform .4s var(--l-ease), background .3s ease; } .lumiere .review-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.07); } .lumiere .review-card .stars { color: var(--accent); letter-spacing: .1em; margin-bottom: 1rem; } .stars-edit .star-pick { cursor: pointer; opacity: .3; transition: opacity .12s; } .stars-edit .star-pick.on, .stars-edit .star-pick:hover { opacity: 1; } .lumiere .review-card .rtext { font-family: var(--font-head); font-size: 1.3rem; line-height: 1.4; margin-bottom: 1.1rem; } .lumiere .review-card .rauthor { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); } .lumiere .review-cta { text-align: center; margin-top: 3rem; } .lumiere .review-cta:empty { display: none; } /* ---- Contact ---- */ .lumiere .l-contact { max-width: none; background: var(--l-muted-surface); } .lumiere .l-contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem); max-width: var(--l-w); margin: 0 auto; align-items: start; } .lumiere .l-contact-copy { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; } .lumiere .l-contact-copy h2 { margin-bottom: 1.1rem; } .lumiere .contact-line { font-size: 1.05rem; color: var(--l-ink-muted); } .lumiere .hours { width: 100%; max-width: 360px; margin: 1.6rem 0; } .lumiere .hours-row { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--l-border); font-size: .95rem; } .lumiere .hours-row span:last-child { color: var(--l-ink-muted); } .lumiere .l-contact-copy .btn { margin-top: 1.1rem; } .lumiere .socials { margin-top: 1.6rem; display: flex; gap: 1.3rem; } .lumiere .socials a { font-family: var(--font-mono); color: var(--l-ink); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .lumiere .socials a:hover { color: var(--accent); } .lumiere .l-contact-map { width: 100%; } .lumiere .map iframe, .lumiere .l-contact-map iframe { width: 100%; height: 440px; border: 0; border-radius: var(--l-radius-media); } /* ---- Footer ---- */ .lumiere footer { text-align: center; padding: 3.5rem 1.5rem; color: var(--l-ink-muted); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; background: var(--l-bg); border-top: 1px solid var(--l-border); } /* ---- Motion (ease-out-quint) ---- */ /* Cinematic focus-in: rise + subtle scale + blur→sharp (matches the editorial layout) */ .lumiere .reveal { opacity: 0; transform: translateY(42px) scale(.988); filter: blur(8px); transition: opacity .85s var(--l-ease), transform 1s var(--l-ease), filter .85s var(--l-ease); will-change: opacity, transform, filter; } .lumiere .reveal.in { opacity: 1; transform: none; filter: none; } .lumiere .gallery-grid .gal, .lumiere .team-card, .lumiere .review-card { opacity: 0; transform: translateY(1.6rem); transition: opacity .65s var(--l-ease), transform .65s var(--l-ease); } .lumiere .in .gal, .lumiere .in .team-card, .lumiere .in .review-card { opacity: 1; transform: none; } .lumiere .in .gal:nth-child(2), .lumiere .in .team-card:nth-child(2), .lumiere .in .review-card:nth-child(2) { transition-delay: .09s; } .lumiere .in .gal:nth-child(3), .lumiere .in .team-card:nth-child(3), .lumiere .in .review-card:nth-child(3) { transition-delay: .18s; } .lumiere .in .gal:nth-child(n+4) { transition-delay: .27s; } /* Service rows cascade in as the list reveals */ .lumiere .l-service-list .svc { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--l-ease), transform .55s var(--l-ease); } .lumiere .l-service-list.in .svc { opacity: 1; transform: none; } .lumiere .l-service-list.in .svc:nth-child(2){ transition-delay: .05s; } .lumiere .l-service-list.in .svc:nth-child(3){ transition-delay: .10s; } .lumiere .l-service-list.in .svc:nth-child(4){ transition-delay: .15s; } .lumiere .l-service-list.in .svc:nth-child(5){ transition-delay: .20s; } .lumiere .l-service-list.in .svc:nth-child(6){ transition-delay: .25s; } .lumiere .l-service-list.in .svc:nth-child(n+7){ transition-delay: .30s; } .lumiere #bs-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9998; background: var(--accent); transition: width .1s linear; } @media (prefers-reduced-motion: reduce) { .lumiere .reveal, .lumiere .reveal.in, .lumiere .gal, .lumiere .team-card, .lumiere .review-card, .lumiere .l-service-list .svc { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .lumiere .hero-photo, .lumiere .marquee-track, .lumiere .l-scroll-hint { animation: none !important; } } /* ---- Responsive ---- */ @media (max-width: 900px) { .lumiere .gallery-grid .gal { flex-basis: calc((100% - 1.2rem) / 2); } } @media (max-width: 820px) { .lumiere .l-about, .lumiere .l-contact-inner { grid-template-columns: 1fr; } .lumiere .l-about-media { aspect-ratio: 16/11; order: -1; } /* Team: 2-up so a big team stays compact (was one giant card per row) */ /* Team swipes sideways on a phone, like the gallery and reviews already do. */ .lumiere .team-grid { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: none; margin: 0 calc(-1 * clamp(1.25rem,5vw,3.5rem)); padding: 0 clamp(1.25rem,5vw,3.5rem) .5rem; } .lumiere .team-grid::-webkit-scrollbar { display: none; } .lumiere .team-card { flex: 0 0 76%; scroll-snap-align: center; } .lumiere .team-card h3 { font-size: 1.15rem; } .lumiere .team-card p { font-size: .68rem; } } @media (max-width: 640px) { .lumiere .nav-toggle { display: block; } .lumiere .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: color-mix(in srgb, var(--l-bg) 97%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--l-border); padding: .5rem 1.25rem 1.1rem; transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity .28s, transform .28s; } .lumiere nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; } .lumiere .nav-links a:not(.nav-cta) { padding: .95rem .2rem; border-bottom: 1px solid var(--l-border); } .lumiere .nav-links .nav-cta { text-align: center; margin-top: .9rem; } .lumiere .l-hero-cta { flex-direction: column; align-items: stretch; } .lumiere .l-hero-cta .btn { width: 100%; justify-content: center; } /* Gallery becomes a horizontal swipe carousel on phones (snap + peek) */ .lumiere .gallery-grid { columns: auto; display: flex; flex-wrap: nowrap; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(-1 * clamp(1.25rem,5vw,3.5rem)); padding: 0 clamp(1.25rem,5vw,3.5rem) .5rem; } .lumiere .gallery-grid::-webkit-scrollbar { display: none; } .lumiere .gallery-grid .gal { flex: 0 0 80%; scroll-snap-align: center; margin: 0; } .lumiere .gallery-grid img { width: 100%; height: 62vh; height: 62svh; max-height: 460px; object-fit: cover; } /* Instagram posts also swipe sideways on phones (was stacked vertically) */ .lumiere .ig-grid { display: flex; grid-template-columns: none; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(-1 * clamp(1.25rem,5vw,3.5rem)); padding: 0 clamp(1.25rem,5vw,3.5rem) .5rem; } .lumiere .ig-grid::-webkit-scrollbar { display: none; } .lumiere .ig-grid > * { flex: 0 0 85%; scroll-snap-align: center; margin: 0 !important; min-width: 0; } /* Reviews swipe sideways on phones too (was messily stacked) */ .lumiere .reviews-grid { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: none; margin: 0 calc(-1 * clamp(1.25rem,5vw,3.5rem)); padding: 0 clamp(1.25rem,5vw,3.5rem) .5rem; } .lumiere .reviews-grid::-webkit-scrollbar { display: none; } .lumiere .reviews-grid .review-card { flex: 0 0 85%; scroll-snap-align: center; margin: 0; } } /* Multiple booking buttons ("Book with X" / "Book with Y") */ .lumiere .book-multi { display: flex; flex-wrap: wrap; gap: .7rem; } /* Optional Education section (image + text) */ .lumiere .bs-education { padding: var(--l-pad) clamp(1.25rem,5vw,3.5rem); max-width: var(--l-w); margin: 0 auto; } .lumiere .bs-education .bs-edu-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem); align-items: center; } .lumiere .bs-education .bs-edu-inner.no-media { grid-template-columns: 1fr; max-width: 44rem; margin: 0 auto; text-align: center; } .lumiere .bs-edu-media { aspect-ratio: 4/5; border-radius: var(--l-radius-media); background: var(--l-muted-surface) center/cover no-repeat; box-shadow: 0 24px 60px rgba(0,0,0,.12); } /* Wrap+centre so an odd last tile (3 or 5 photos) centres rather than stranding left. */ .lumiere .bs-edu-media--multi { aspect-ratio: auto; background: none; box-shadow: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; } .lumiere .bs-edu-media--multi .bs-edu-tile { flex: 0 1 calc((100% - .6rem) / 2); aspect-ratio: 1; border-radius: var(--l-radius-media); background: var(--l-muted-surface) center/cover no-repeat; box-shadow: 0 16px 44px rgba(0,0,0,.12); } .lumiere .bs-edu-copy h2 { margin: .3rem 0 1.1rem; } .lumiere .bs-edu-copy p:not(.section-eyebrow) { color: var(--l-ink-muted); font-size: 1.12rem; line-height: 1.7; margin-bottom: .8rem; } /* Collection = product list: bold name, description on its own line(s). */ .lumiere .bs-products .bs-product { color: var(--l-ink-muted); font-size: 1.02rem; line-height: 1.6; margin-bottom: 1.1rem; } .lumiere .bs-products .bs-product:last-child { margin-bottom: 0; } .lumiere .bs-products .bs-product-name { display: block; font-weight: 700; color: var(--l-ink); } .lumiere .bs-products .bs-product-desc { display: block; margin-top: .15rem; } .lumiere .bs-edu-cta { margin-top: 1.6rem; } @media (max-width: 820px) { .lumiere .bs-education .bs-edu-inner { grid-template-columns: 1fr; gap: 1.8rem; } } /* FAQ accordion — JS-injected before #contact; also powers the FAQPage schema. */ .lumiere .bs-faq-list { max-width: var(--l-measure); margin: 0 auto; } .lumiere .bs-faq-item { border-top: 1px solid var(--l-border); } .lumiere .bs-faq-item:last-child { border-bottom: 1px solid var(--l-border); } .lumiere .bs-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 0; font-family: var(--font-head); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.3; color: var(--l-ink); } .lumiere .bs-faq-item summary::-webkit-details-marker { display: none; } .lumiere .bs-faq-ic { position: relative; flex: 0 0 auto; width: 18px; height: 18px; } .lumiere .bs-faq-ic::before, .lumiere .bs-faq-ic::after { content: ""; position: absolute; background: var(--accent); transition: transform .25s ease, opacity .25s ease; } .lumiere .bs-faq-ic::before { top: 8px; left: 0; width: 18px; height: 2px; } .lumiere .bs-faq-ic::after { left: 8px; top: 0; width: 2px; height: 18px; } .lumiere .bs-faq-item[open] .bs-faq-ic::after { transform: scaleY(0); opacity: 0; } .lumiere .bs-faq-a { padding: 0 0 1.7rem; color: var(--l-ink-muted); font-size: 1.08rem; line-height: 1.75; } .lumiere .bs-faq-a p { margin: 0 0 .8rem; } .lumiere .bs-faq-a p:last-child { margin-bottom: 0; } .lumiere .bs-faq-a ul { margin: 0; padding-left: 1.1rem; } .lumiere .bs-faq-a li { margin-bottom: .45rem; } /* ---- Closing CTA band (pinned just above the contact block) ---- */ .lumiere .bs-closing { position: relative; overflow: hidden; max-width: none; margin: 0; padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 3.5rem); text-align: center; background: var(--l-muted-surface); } .lumiere .bs-closing-bg { position: absolute; inset: 0; background: center/cover no-repeat; } .lumiere .bs-closing.has-photo .bs-closing-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,12,8,.45), rgba(18,12,8,.62)); } .lumiere .bs-closing-inner { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .lumiere .bs-closing h2 { font-family: var(--font-head); font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.1; letter-spacing: -.02em; margin: 0; } .lumiere .bs-closing-text { font-family: var(--font-body); color: var(--l-ink-muted); font-size: 1.05rem; line-height: 1.65; margin: 0; } .lumiere .bs-closing-btn { margin-top: .5rem; } .lumiere .bs-closing.has-photo h2, .lumiere .bs-closing.has-photo .bs-closing-text { color: #fff; } /* ---- Click-to-edit affordance (portal preview only) ------------------------ styles.css has had this since inline editing was built, but the premium layouts load lumiere.css INSTEAD of styles.css, so editable text on Lumiere, Onyx, Halo, Press, Studio, Atelier and Vitrine had no hover state at all - it looked like plain text and nobody could tell it was clickable. That is why the story wording seemed to have no source. Same behaviour as editorial. */ .bs-edit .bs-editable { outline: 1px dashed transparent; transition: outline-color .15s ease, background .15s ease; border-radius: 4px; cursor: text; } .bs-edit .bs-editable:hover { outline-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .bs-edit .bs-editable:focus { outline: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); } /* The story panels sit on a dark photo, so tint from white there instead. */ .bs-edit .l-story-panel .bs-editable:hover { outline-color: #fff; background: rgba(255,255,255,.14); } .bs-edit .l-story-panel .bs-editable:focus { outline: 1px solid #fff; background: rgba(255,255,255,.2); } .bs-colour .bs-editable { cursor: pointer; } /* Remove-this-element control, portal preview only (never on a live site) */ .bs-edit .review-cta { display: flex; align-items: center; justify-content: center; gap: .6rem; } .bs-del { border: 1px solid currentColor; background: transparent; color: var(--l-ink-muted); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: .75rem; line-height: 1; padding: 0; opacity: .45; transition: opacity .15s ease, color .15s ease; } .bs-del:hover { opacity: 1; color: #c0392b; } /* Long team bios: clamped with a Read more toggle, matching the About one. */ .lumiere .team-card.is-clamped .team-bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .lumiere .team-card.is-clamped.is-open .team-bio { -webkit-line-clamp: unset; overflow: visible; } .lumiere.bs-edit .team-card.is-clamped .team-bio { -webkit-line-clamp: unset; overflow: visible; } .lumiere .team-bio-toggle { display: block; background: none; border: 0; padding: 0 0 2px; margin-top: .5rem; cursor: pointer; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--l-ink); border-bottom: 1px solid var(--l-ink); transition: opacity .2s ease; } .lumiere .team-bio-toggle:hover { opacity: .55; } .lumiere.bs-edit .team-bio-toggle { display: none; } /* ---- Collection brands: brand + logo, then that brand's products ---- */ .lumiere .bs-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1.8rem, 3vw, 3rem); margin-top: 1.4rem; } .lumiere .bs-brands.is-single { grid-template-columns: 1fr; } .lumiere .bs-brand { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .6rem; } .lumiere .bs-brand-logo { width: 100%; max-width: 9.5rem; height: 3.6rem; background: center left/contain no-repeat; } .lumiere .bs-brand-name { font-family: var(--font-head); font-size: 1.4rem; letter-spacing: -.01em; line-height: 1.2; margin: 0; } .lumiere .bs-brand .bs-products { margin: 0; } .lumiere .bs-brand-desc { font-family: var(--font-body); color: var(--l-ink-muted); font-size: .95rem; line-height: 1.7; margin: 0; } /* Team strip arrows — only shown when the strip actually overflows */ .lumiere .team-strip { position: relative; } .lumiere .team-nav { display: none; position: absolute; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--l-border); background: var(--l-surface); color: var(--l-ink); cursor: pointer; font-size: 1.45rem; line-height: 1; padding: 0 0 3px; transform: translateY(-50%); box-shadow: 0 8px 24px rgba(18,12,8,.16); transition: opacity .15s ease, background .15s ease, color .15s ease; } .lumiere .team-strip.has-nav .team-nav { display: block; } .lumiere .team-nav.prev { left: -8px; } .lumiere .team-nav.next { right: -8px; } .lumiere .team-nav:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); } .lumiere .team-nav:disabled { opacity: .28; cursor: default; } /* ---- TikTok section ---- */ .lumiere .bs-tiktok { padding: var(--l-pad) clamp(1.25rem,5vw,3.5rem); } .lumiere .bs-tiktok .tt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.4rem; max-width: var(--l-w); margin: 0 auto; justify-items: center; } .lumiere .bs-tiktok .tt-grid > blockquote, .lumiere .bs-tiktok .tt-grid > iframe { width: 100%; max-width: 340px; margin: 0 !important; } .lumiere .bs-tiktok .tt-follow { text-align: center; margin-top: 2.4rem; } @media (max-width: 640px) { .lumiere .bs-tiktok .tt-grid { grid-template-columns: 1fr; } } /* Team photo shape - config.teamShape. Landscape staff photos were being cropped to portrait and losing their sides. */ .lumiere .team-grid[data-shape="square"] .team-photo { aspect-ratio: 1 / 1; } .lumiere .team-grid[data-shape="landscape"] .team-photo { aspect-ratio: 4 / 3; } /* Hero slideshow layers */ .lumiere .hero-slide { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity 1.4s ease-in-out; } .lumiere .hero-slide.on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .lumiere .hero-slide { transition: none; } } /* Banner: every second word in its own colour (config.marqueeAlternate) */ .lumiere .marquee.is-alt span i { font-style: normal; } .lumiere .marquee.is-alt span i.w-alt { color: var(--marquee-alt, var(--l-ink)); }