/* ========================================================================== FRONT ROW BEAUTY SALON — shared design system Direction: black & gold luxury editorial — a fashion-magazine "front row" world after dark. Near-black charcoal ground with a warm grey ambience, ivory ink, foil-gold as the primary accent paired with a soft rose-blush for femininity, a high-contrast editorial serif for display type, restrained scroll reveals instead of scroll-scrubbed animation. No 3D anywhere on the site. Every page includes this file — keep tokens and components here so every page stays visually identical while each page's content differs. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Work+Sans:wght@300;400;500;600&display=swap'); :root { /* ---- color: black, grey ambience, ivory ink, gold + blush accents ---- */ --paper: #100d0e; /* base — near-black, warm charcoal */ --paper-elev: #1a1617; /* raised panels / alt sections — grey ambience */ --paper-card: #201b1c; /* cards, inputs — lifted surface */ --ink: #f6efe3; /* warm ivory — primary text */ --muted: #c3b6ab; /* warm taupe-grey — secondary text */ --muted-dim: #8a7d74; /* tertiary / captions */ --hairline: rgba(246, 239, 227, 0.14); --hairline-soft:rgba(246, 239, 227, 0.07); --rosewood: #e0a3b4; /* primary accent — soft rose-blush, the girly note */ --rosewood-soft:rgba(224, 163, 180, 0.12); --brass: #d4af6a; /* secondary accent — foil gold */ --brass-soft: rgba(212, 175, 106, 0.14); --on-accent: #17130f; /* text sitting on gold/blush fills */ --nav-bg: rgba(16, 13, 14, 0.86); /* ---- type ---- */ --font-display: 'Bodoni Moda', 'Didot', 'Georgia', serif; --font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; /* ---- layout ---- */ --wrap: 1240px; --radius: 4px; --radius-sm: 3px; --gutter: clamp(1.5rem, 5vw, 4rem); --section-y: clamp(4rem, 9vw, 7rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---- light theme: same editorial world, day-lit instead of after-dark. Toggled by adding data-theme="light" to (see shared/nav.js); defaults to the dark palette above when unset. Rosewood/brass are deepened here rather than reused verbatim — the dark-mode tints are too pale to read as text against a light ground. ---- */ :root[data-theme="light"] { --paper: #f8f3ec; --paper-elev: #f0e8db; --paper-card: #ffffff; --ink: #221a16; --muted: #5c4f47; --muted-dim: #83766c; --hairline: rgba(34, 26, 22, 0.14); --hairline-soft:rgba(34, 26, 22, 0.07); --rosewood: #a8506b; --rosewood-soft:rgba(168, 80, 107, 0.10); --brass: #9c7a2e; --brass-soft: rgba(156, 122, 46, 0.12); --nav-bg: rgba(248, 243, 236, 0.86); } /* ---------------------------------------------------------------------- */ /* reset */ /* ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, p, figure { margin: 0; } ::selection { background: var(--rosewood-soft); color: var(--ink); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--rosewood); outline-offset: 3px; border-radius: 2px; } /* ---------------------------------------------------------------------- */ /* type scale */ /* ---------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosewood); } .eyebrow::before { content: ''; width: 1.4em; height: 1px; background: currentColor; opacity: 0.8; transform-origin: left; } /* the little dash draws itself in once its section scrolls into view */ html.js-ready .reveal .eyebrow::before { transform: scaleX(0); transition: transform 0.6s var(--ease) 0.15s; } html.js-ready .reveal.is-visible .eyebrow::before { transform: scaleX(1); } h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.005em; text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; text-wrap: balance; } h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.22; } h4, .h4 { font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 300; color: var(--muted); max-width: 46ch; line-height: 1.65; } p { color: var(--ink); } .text-muted { color: var(--muted); } .italic { font-style: italic; } .serif { font-family: var(--font-display); } /* ---------------------------------------------------------------------- */ /* layout helpers */ /* ---------------------------------------------------------------------- */ .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { position: relative; padding: var(--section-y) 0; z-index: 1; } .section-alt { background: var(--paper-elev); } .section-tight { padding: clamp(2.5rem, 6vw, 4rem) 0; } .hr { border: none; height: 1px; background: var(--hairline); margin: 0; } .hr-brass { background: var(--brass); opacity: 0.55; } .grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); } .grid > * { min-width: 0; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .center { text-align: center; } .gap-md { gap: 1.25rem; } .head-block { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .head-block.center { margin-left: auto; margin-right: auto; } .head-block .eyebrow { margin-bottom: 1rem; } .head-block h2 { margin-bottom: 1rem; } /* ---------------------------------------------------------------------- */ /* buttons */ /* ---------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.8rem; border-radius: 999px; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid transparent; transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease); white-space: nowrap; } .btn-primary { background: var(--brass); color: var(--on-accent); } .btn-primary:hover { transform: translateY(-2px); background: #e6c184; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); } .btn-ghost:hover { border-color: var(--brass); color: var(--brass); transform: translateY(-2px); } .btn-sm { padding: 0.65rem 1.25rem; font-size: 0.7rem; } .btn-block { width: 100%; justify-content: center; } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rosewood); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: gap 0.4s var(--ease), border-color 0.4s var(--ease); } .link-arrow:hover { gap: 0.85rem; border-color: var(--rosewood); } /* ---------------------------------------------------------------------- */ /* header / nav — a magazine masthead */ /* ---------------------------------------------------------------------- */ #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; } .nav { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem var(--gutter); background: var(--nav-bg); backdrop-filter: blur(14px) saturate(120%); border-bottom: 1px solid var(--hairline); } .brand { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.35rem; letter-spacing: 0.01em; display: flex; align-items: center; gap: 0.65rem; background: none; border: none; color: var(--ink); padding: 0; min-width: 0; } .brand img.brand-mark { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; } /* min-width: 0 + ellipsis so a long brand name truncates instead of overlapping the theme toggle / Index button on a narrow phone screen */ .brand-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; min-width: 0; } .brand-text > span:first-child { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 560px) { .brand { font-size: 1.02rem; gap: 0.5rem; } .brand img.brand-mark { width: 28px; height: 28px; } .brand small { font-size: 0.46rem; letter-spacing: 0.14em; } .nav-actions { gap: 0.6rem; } .nav-actions .nav-book-btn { display: none; } } .brand small { font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .nav-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } .nav-toggle { display: inline-flex; align-items: center; gap: 0.6rem; background: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.55rem 1.05rem 0.55rem 0.8rem; color: var(--ink); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; transition: border-color 0.4s var(--ease), color 0.4s var(--ease); } .nav-toggle:hover { border-color: var(--rosewood); color: var(--rosewood); } .nav-toggle .bars { display: flex; flex-direction: column; gap: 3px; width: 15px; } .nav-toggle .bars span { height: 1px; background: currentColor; display: block; transition: transform 0.4s var(--ease); } .nav-toggle[aria-expanded="true"] .bars span:first-child { transform: translateY(4px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars span:last-child { transform: translateY(-4px) rotate(-45deg); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: none; border: 1px solid var(--hairline); border-radius: 50%; color: var(--ink); font-size: 1rem; line-height: 1; transition: border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease); } .theme-toggle:hover { border-color: var(--rosewood); color: var(--rosewood); transform: translateY(-2px); } /* Full-screen "Index" overlay — a magazine contents page. Numbering here is real information (this is an actual index), not decoration. */ .nav-overlay { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; overflow-y: auto; } .nav-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); } .nav-overlay-inner { width: 100%; max-width: 900px; padding: 7rem var(--gutter) 4rem; margin: auto; } .nav-overlay-list { border-top: 1px solid var(--hairline); } .nav-overlay-list a { display: flex; align-items: baseline; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hairline); transition: padding-left 0.35s var(--ease), color 0.35s var(--ease); } .nav-overlay-list a .idx { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--brass); flex-shrink: 0; width: 2.2ch; font-variant-numeric: tabular-nums; } .nav-overlay-list a .name { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-style: italic; color: var(--ink); } .nav-overlay-list a:hover { padding-left: 0.6rem; } .nav-overlay-list a:hover .name, .nav-overlay-list a[aria-current="page"] .name { color: var(--brass); } .nav-overlay-foot { margin-top: 2.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; } .nav-close { position: absolute; top: 1.5rem; right: var(--gutter); background: none; border: 1px solid var(--hairline); border-radius: 999px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ink); } .nav-close:hover { border-color: var(--rosewood); color: var(--rosewood); } .page-shell { padding-top: 84px; } /* every chapter of the continuous-scroll homepage lands correctly below the fixed header when jumped to via the Index or a direct #anchor link */ main > section[id] { scroll-margin-top: 84px; } /* ---------------------------------------------------------------------- */ /* footer */ /* ---------------------------------------------------------------------- */ #site-footer { position: relative; z-index: 1; border-top: 1px solid var(--hairline); background: var(--paper-elev); } .footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; padding: clamp(3rem, 7vw, 5rem) 0 3rem; } @media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } } .footer-brand .brand { margin-bottom: 1rem; } .footer-brand p { color: var(--muted); max-width: 32ch; font-size: 0.9rem; } .footer-col h4 { margin-bottom: 1rem; } .footer-col a, .footer-col p, .footer-col li { color: var(--muted); font-size: 0.9rem; line-height: 1.9; } .footer-col a:hover { color: var(--rosewood); } .footer-placeholder { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-dim); border: 1px dashed var(--hairline); border-radius: 999px; padding: 0.3rem 0.7rem; margin: 0.2rem 0.3rem 0.2rem 0; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1.4rem 0 2rem; border-top: 1px solid var(--hairline); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--muted-dim); flex-wrap: wrap; } .footer-legal a { color: var(--muted-dim); } .footer-legal a:hover { color: var(--brass); } /* ---------------------------------------------------------------------- */ /* page hero (interior pages) — a magazine section opener */ /* ---------------------------------------------------------------------- */ .page-hero { position: relative; padding: clamp(8rem, 15vw, 11rem) 0 clamp(3rem, 6vw, 5rem); z-index: 1; border-bottom: 1px solid var(--hairline); } .page-hero h1 { max-width: 18ch; } .page-hero .lede { margin-top: 1.25rem; } /* ---------------------------------------------------------------------- */ /* cards */ /* ---------------------------------------------------------------------- */ .card { background: var(--paper-card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--brass); box-shadow: 0 18px 32px -22px rgba(0,0,0,0.55); } .service-card .h3 { margin-bottom: 0.6rem; } .service-card p { color: var(--muted); font-size: 0.92rem; margin-bottom: 1rem; } .service-card-num { font-family: var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); font-size: 0.72rem; margin-bottom: 1rem; display: block; } .teaser-card { position: relative; overflow: hidden; } .teaser-card .media-placeholder { margin-bottom: 1.25rem; aspect-ratio: 4/3; } .teaser-card h3 { margin-bottom: 0.5rem; } .teaser-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; } /* ---------------------------------------------------------------------- */ /* media placeholders — photo & video */ /* work with zero markup changes once a real file exists at the given path */ /* ---------------------------------------------------------------------- */ .media-placeholder { position: relative; overflow: hidden; border-radius: var(--radius); background: linear-gradient(155deg, var(--paper-elev), var(--paper-card)); border: 1px solid var(--hairline); aspect-ratio: 4 / 3; } .media-placeholder::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--hairline); pointer-events: none; } .media-placeholder img, .media-placeholder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 1; transition: opacity 0.45s var(--ease); } .media-placeholder.is-loaded img, .media-placeholder.is-loaded video { opacity: 1; } .media-placeholder.is-loaded::after { border-color: rgba(246,239,227,0.35); } .ph-fallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 1.25rem; transition: opacity 0.15s linear; } .media-placeholder.is-loaded .ph-fallback { opacity: 0; pointer-events: none; } .ph-fallback .ph-icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--brass); display: flex; align-items: center; justify-content: center; color: var(--brass); } .ph-fallback .ph-label { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; } .ph-fallback .ph-file { font-family: 'Courier New', monospace; font-size: 0.66rem; letter-spacing: 0.02em; color: var(--muted-dim); background: var(--paper); border: 1px solid var(--hairline); padding: 0.2rem 0.55rem; border-radius: 999px; } .media-placeholder .play-indicator { position: absolute; bottom: 0.85rem; right: 0.85rem; width: 32px; height: 32px; border-radius: 50%; background: rgba(16,13,14,0.78); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--brass); z-index: 2; } .media-placeholder.aspect-square { aspect-ratio: 1/1; } .media-placeholder.aspect-wide { aspect-ratio: 16/9; } .media-placeholder.aspect-portrait { aspect-ratio: 3/4; } .media-placeholder.aspect-tall { aspect-ratio: 4/5; } /* ---------------------------------------------------------------------- */ /* tables — price list / hours */ /* ---------------------------------------------------------------------- */ .price-table { width: 100%; border-collapse: collapse; } .price-table th { text-align: left; font-family: var(--font-body); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--ink); } .price-table td { padding: 1.1rem 0.5rem; border-bottom: 1px solid var(--hairline); font-size: 0.98rem; vertical-align: top; } .price-table td:last-child, .price-table th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .price-table tr:hover td { background: var(--paper-elev); } .price-name { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; } .price-duration { color: var(--muted-dim); font-size: 0.8rem; display: block; margin-top: 0.15rem; } .price-amount { font-family: var(--font-display); color: var(--brass); font-size: 1.05rem; } .price-save { display: inline-block; margin-left: 0.6rem; font-size: 0.63rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent); background: var(--brass); padding: 0.15rem 0.5rem; border-radius: 999px; vertical-align: middle; } .price-note { font-size: 0.85rem; color: var(--muted); border: 1px dashed var(--hairline); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-top: 0.5rem; } .price-group { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .price-group h3 { margin-bottom: 1.25rem; } .hours-table { width: 100%; border-collapse: collapse; max-width: 520px; } .hours-table td { padding: 0.9rem 0.5rem; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; } .hours-table td:first-child { color: var(--muted); letter-spacing: 0.03em; } .hours-table td:last-child { text-align: right; font-family: var(--font-display); font-style: italic; color: var(--ink); } /* ---------------------------------------------------------------------- */ /* team */ /* ---------------------------------------------------------------------- */ .team-card { text-align: center; } .team-card .media-placeholder { aspect-ratio: 3/4; margin-bottom: 1.25rem; } .team-card h3 { margin-bottom: 0.2rem; } .team-card .role { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.6rem; } .rating-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--rosewood); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.25rem 0.75rem; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------------- */ /* reviews */ /* ---------------------------------------------------------------------- */ .review-card { display: flex; flex-direction: column; gap: 0.9rem; } .review-stars { color: var(--brass); letter-spacing: 0.18em; font-size: 0.95rem; } .review-quote { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.5; } .review-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .review-name { font-size: 0.85rem; letter-spacing: 0.02em; } .review-sub { color: var(--muted-dim); font-size: 0.78rem; } .rating-headline { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .rating-headline .big { font-family: var(--font-display); font-style: italic; font-size: clamp(3.5rem, 9vw, 6rem); line-height: 1; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------------- */ /* brands marquee */ /* ---------------------------------------------------------------------- */ .brand-marquee { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 2.25rem 0; } .brand-marquee-track { display: flex; width: max-content; gap: clamp(3rem, 8vw, 6rem); animation: marquee 34s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .brand-marquee-track span { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 3vw, 2rem); color: var(--muted); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .brand-marquee-track { animation: none; overflow-x: auto; } } .brand-tile { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 2.25rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; min-height: 130px; background: var(--paper-card); transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); } .brand-tile:hover { border-color: var(--brass); transform: translateY(-3px); } .brand-tile .name { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; } .brand-tile .use { color: var(--muted-dim); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ---------------------------------------------------------------------- */ /* product catalog */ /* ---------------------------------------------------------------------- */ .product-card { display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0; } .product-card .media-placeholder { aspect-ratio: 1/1; border-radius: 0; border-width: 0 0 1px; } .product-card .product-body { padding: clamp(1.25rem, 3vw, 1.75rem); } .product-card .product-brand { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.5rem; } .product-card h3 { margin-bottom: 0.4rem; } .product-card p { color: var(--muted); font-size: 0.88rem; margin-bottom: 1rem; } .product-card .product-price { font-family: var(--font-display); color: var(--brass); font-size: 1.05rem; } .product-coming-soon { border: 1px dashed var(--hairline); border-radius: var(--radius); padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); text-align: center; color: var(--muted); } .product-coming-soon .ph-icon { width: 44px; height: 44px; margin: 0 auto 1.25rem; border-radius: 50%; border: 1px solid var(--brass); display: flex; align-items: center; justify-content: center; color: var(--brass); font-size: 1.1rem; } /* ---------------------------------------------------------------------- */ /* forms */ /* ---------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.4rem; } .field label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .field input, .field textarea { background: var(--paper-card); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0.85rem 1rem; color: var(--ink); font-family: var(--font-body); font-size: 0.95rem; transition: border-color 0.4s var(--ease); } .field input:focus, .field textarea:focus { border-color: var(--rosewood); outline: none; } .field textarea { resize: vertical; min-height: 140px; } .form-status { display: none; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--rosewood); background: var(--rosewood-soft); color: var(--rosewood); font-size: 0.9rem; margin-top: 1rem; } .form-status.is-visible { display: flex; } /* ---------------------------------------------------------------------- */ /* faq */ /* ---------------------------------------------------------------------- */ .faq-item { border-bottom: 1px solid var(--hairline); padding: 1.5rem 0; } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-family: var(--font-body); font-style: normal; font-size: 1.3rem; color: var(--rosewood); transition: transform 0.4s var(--ease); flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { color: var(--muted); margin-top: 1rem; max-width: 60ch; } /* ---------------------------------------------------------------------- */ /* info list / policy strips */ /* ---------------------------------------------------------------------- */ .info-list { display: flex; flex-direction: column; } .info-row { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); } @media (max-width: 640px) { .info-row { grid-template-columns: 1fr; gap: 0.5rem; } } .info-row h4 { color: var(--rosewood); } .info-row p { color: var(--muted); } /* ---------------------------------------------------------------------- */ /* legal documents — privacy / terms */ /* ---------------------------------------------------------------------- */ .legal-updated { font-size: 0.78rem; color: var(--muted-dim); letter-spacing: 0.02em; margin-top: 1rem; } .legal-body { max-width: 720px; } .legal-body section { padding: 2rem 0; border-bottom: 1px solid var(--hairline); } .legal-body section:last-child { border-bottom: none; } .legal-body h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 1rem; } .legal-body p { color: var(--muted); line-height: 1.8; margin-bottom: 1rem; } .legal-body p:last-child { margin-bottom: 0; } .legal-body ul { margin: 0 0 1rem; padding-left: 1.25rem; } .legal-body li { color: var(--muted); line-height: 1.8; list-style: disc; margin-bottom: 0.4rem; } .legal-body strong { color: var(--ink); font-weight: 500; } .legal-note { font-size: 0.85rem; color: var(--muted); border: 1px dashed var(--hairline); border-radius: var(--radius-sm); padding: 1.1rem 1.35rem; margin-bottom: clamp(2rem, 5vw, 3rem); max-width: 720px; } .legal-note strong { color: var(--brass); } .legal-toc { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-bottom: clamp(2rem, 5vw, 3rem); max-width: 720px; } .legal-toc a { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--hairline); padding-bottom: 2px; } .legal-toc a:hover { color: var(--brass); border-color: var(--brass); } /* ---------------------------------------------------------------------- */ /* CTA band */ /* ---------------------------------------------------------------------- */ .cta-band { position: relative; border-radius: var(--radius); border: 1px solid var(--brass-soft); padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 6vw, 4.5rem); text-align: center; overflow: hidden; background: linear-gradient(155deg, var(--paper-elev), var(--paper-card)); } .cta-band h2 { margin-bottom: 1rem; } .cta-band .lede { margin: 0 auto 2rem; } /* ---------------------------------------------------------------------- */ /* gallery */ /* ---------------------------------------------------------------------- */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); } .gallery-grid > figure { min-width: 0; } .gallery-grid .media-placeholder { aspect-ratio: 1/1; } .gallery-grid .span-2 { grid-column: span 2; aspect-ratio: 16/9; } @media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid .span-2 { grid-column: span 2; } } @media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-grid .span-2 { grid-column: span 1; } } .gallery-caption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--muted-dim); letter-spacing: 0.02em; } /* ---------------------------------------------------------------------- */ /* affirmation page — a quiet paper card, breathing gently */ /* ---------------------------------------------------------------------- */ .affirmation-shell { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 8rem var(--gutter) 6rem; text-align: center; z-index: 1; overflow: hidden; } .affirmation-glow { position: absolute; inset: -20%; z-index: 0; background: radial-gradient(46% 40% at 50% 44%, var(--rosewood-soft), transparent 70%); animation: breathe 7s var(--ease) infinite; pointer-events: none; } @keyframes breathe { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .affirmation-glow { animation: none; opacity: 0.75; } } .affirmation-glow.is-pulsing { animation-duration: 1.6s; } .affirmation-card { position: relative; z-index: 1; max-width: 640px; } .affirmation-text { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.35; opacity: 1; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .affirmation-text.is-swapping { opacity: 0; transform: translateY(8px); } .affirmation-index { margin-top: 2.25rem; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted-dim); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------------- */ /* scroll reveal — restrained, orchestrated, respects reduced motion */ /* Scoped under html.js-ready (added by nav.js the instant it runs) so a */ /* page with JS blocked, slow, or erroring shows all content immediately */ /* instead of leaving it permanently at opacity: 0. */ /* ---------------------------------------------------------------------- */ html.js-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } html.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js-ready .reveal { opacity: 1; transform: none; transition: none; } } /* photo curtain — a gold panel sweeps off every photo inside a .reveal the moment it's uncovered, instead of the image just fading in. Uses ::before so it doesn't collide with the frame already on ::after. */ html.js-ready .reveal .media-placeholder::before { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(135deg, var(--brass), var(--rosewood)); transform: scaleX(1); transform-origin: right; transition: transform 0.9s var(--ease) 0.1s; } html.js-ready .reveal.is-visible .media-placeholder::before { transform: scaleX(0); } @media (prefers-reduced-motion: reduce) { html.js-ready .reveal .media-placeholder::before { display: none; } } /* staggered word reveal — headlines rise in word by word instead of as a single block, applied automatically by nav.js to page/hero titles */ html.js-ready .stagger-word { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } html.js-ready .stagger-word.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js-ready .stagger-word { opacity: 1; transform: none; transition: none; } } /* ---------------------------------------------------------------------- */ /* scroll progress — a thin gold line tracking how far down the page you */ /* are, pinned above everything else */ /* ---------------------------------------------------------------------- */ #frs-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--brass), var(--rosewood)); z-index: 100; transition: width 0.1s linear; } @media (prefers-reduced-motion: reduce) { #frs-scroll-progress { display: none; } } /* ---------------------------------------------------------------------- */ /* stat tiles — animated counters */ /* ---------------------------------------------------------------------- */ .stats-grid { text-align: center; } .stat-tile { padding: 1rem; } .stat-number { display: block; font-family: var(--font-display); font-style: italic; color: var(--brass); font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; } .stat-label { display: block; margin-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* ---------------------------------------------------------------------- */ /* highlight ticker — a slow, continuous strip of brand facts */ /* ---------------------------------------------------------------------- */ .highlight-ticker { overflow: hidden; border-bottom: 1px solid var(--hairline); background: var(--paper-elev); } .highlight-ticker-track { display: flex; width: max-content; animation: marquee 28s linear infinite; } .highlight-ticker-track span { display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.85rem clamp(1.25rem, 3vw, 2rem); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .highlight-ticker-track span::before { content: '\2726'; color: var(--brass); font-size: 0.8em; } @media (prefers-reduced-motion: reduce) { .highlight-ticker-track { animation: none; overflow-x: auto; } } /* ---------------------------------------------------------------------- */ /* hero cursor glow — desktop only, a faint warm light following the mouse */ /* ---------------------------------------------------------------------- */ .hero-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; background: radial-gradient(480px circle at var(--gx, 50%) var(--gy, 15%), var(--brass-soft), transparent 70%); transition: opacity 0.6s var(--ease); } .hero-glow.is-active { opacity: 1; } /* ---------------------------------------------------------------------- */ /* utility */ /* ---------------------------------------------------------------------- */ .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } .hidden { display: none !important; } .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; } /* ---------------------------------------------------------------------- */ /* chat widget — a small front-of-house assistant, bottom-right on every */ /* page. Rule-based (keyword matching over real site info), no backend. */ /* ---------------------------------------------------------------------- */ #frs-chat { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 80; } .frs-chat-fab { width: 60px; height: 60px; border-radius: 50%; background: var(--brass); color: var(--on-accent); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px -10px rgba(0,0,0,0.6); transition: transform 0.35s var(--ease), background 0.35s var(--ease); position: relative; } .frs-chat-fab:hover { transform: translateY(-2px); background: #e6c184; } .frs-chat-fab svg { width: 26px; height: 26px; } .frs-chat-fab .frs-chat-fab-close { display: none; } .frs-chat-fab[aria-expanded="true"] .frs-chat-fab-open { display: none; } .frs-chat-fab[aria-expanded="true"] .frs-chat-fab-close { display: block; } .frs-chat-ping { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--rosewood); border: 2px solid var(--paper); } .frs-chat-fab[data-seen="true"] .frs-chat-ping { display: none; } .frs-chat-panel { position: absolute; right: 0; bottom: calc(100% + 1rem); width: min(360px, calc(100vw - 2.5rem)); height: min(520px, calc(100vh - 8rem)); background: var(--paper-card); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(0.98); visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s; } .frs-chat-panel.is-open { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } @media (prefers-reduced-motion: reduce) { .frs-chat-panel { transition: opacity 0.15s linear, visibility 0s linear 0.15s; } .frs-chat-panel.is-open { transition: opacity 0.15s linear; } } .frs-chat-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--hairline); background: linear-gradient(155deg, var(--paper-elev), var(--paper-card)); flex-shrink: 0; } .frs-chat-head img { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; } .frs-chat-head-text { flex: 1; min-width: 0; } .frs-chat-head-text strong { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; display: block; } .frs-chat-head-text span { font-size: 0.7rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; } .frs-chat-head-text span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6fbf73; display: inline-block; flex-shrink: 0; } .frs-chat-head-close { background: none; border: 1px solid var(--hairline); border-radius: 50%; width: 28px; height: 28px; color: var(--muted); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .frs-chat-head-close:hover { border-color: var(--brass); color: var(--brass); } .frs-chat-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; } .frs-msg { max-width: 84%; font-size: 0.86rem; line-height: 1.55; padding: 0.6rem 0.85rem; border-radius: 12px; } .frs-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .frs-msg-bot { align-self: flex-start; background: var(--paper-elev); border: 1px solid var(--hairline); color: var(--ink); border-bottom-left-radius: 3px; } .frs-msg-user { align-self: flex-end; background: var(--brass); color: var(--on-accent); border-bottom-right-radius: 3px; } .frs-msg-typing { align-self: flex-start; display: flex; gap: 4px; padding: 0.75rem 0.9rem; background: var(--paper-elev); border: 1px solid var(--hairline); border-radius: 12px; border-bottom-left-radius: 3px; } .frs-msg-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-dim); animation: frs-bounce 1.2s infinite; } .frs-msg-typing span:nth-child(2) { animation-delay: 0.15s; } .frs-msg-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes frs-bounce { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .frs-msg-typing span { animation: none; opacity: 0.7; } } .frs-chat-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.8rem; flex-shrink: 0; } .frs-chip { font-size: 0.72rem; letter-spacing: 0.02em; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.4rem 0.75rem; background: var(--paper); color: var(--muted); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .frs-chip:hover { border-color: var(--brass); color: var(--brass); } .frs-chat-form { display: flex; gap: 0.5rem; padding: 0.85rem; border-top: 1px solid var(--hairline); flex-shrink: 0; } .frs-chat-form input { flex: 1; background: var(--paper); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.6rem 1rem; color: var(--ink); font-family: var(--font-body); font-size: 0.85rem; } .frs-chat-form input:focus { outline: none; border-color: var(--brass); } .frs-chat-form button { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--brass); color: var(--on-accent); border: none; display: flex; align-items: center; justify-content: center; } .frs-chat-form button:hover { background: #e6c184; } .frs-chat-form button svg { width: 16px; height: 16px; } @media (max-width: 420px) { .frs-chat-panel { position: fixed; right: 0.75rem; left: 0.75rem; bottom: 5.5rem; width: auto; } } /* ---------------------------------------------------------------------- */ /* before / after pairs — gallery */ /* ---------------------------------------------------------------------- */ .before-after-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gutter); } .before-after-pair figcaption { margin-top: 0.85rem; font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink); text-align: center; } .before-after-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .before-after-frames .media-placeholder { aspect-ratio: 3/4; } .before-after-tag { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; background: rgba(16,13,14,0.72); color: var(--ink); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; } /* ---------------------------------------------------------------------- */ /* floating actions — WhatsApp shortcut + mobile-only Book Now bar */ /* ---------------------------------------------------------------------- */ #frs-whatsapp { position: fixed; left: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 80; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #0b1c10; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px -10px rgba(0,0,0,0.6); transition: transform 0.35s var(--ease); } #frs-whatsapp:hover { transform: translateY(-3px); } #frs-mobile-book-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 0.75rem clamp(1rem, 4vw, 1.5rem) calc(0.75rem + env(safe-area-inset-bottom, 0px)); background: var(--nav-bg); backdrop-filter: blur(14px) saturate(120%); border-top: 1px solid var(--hairline); } #frs-mobile-book-bar .btn { display: flex; width: 100%; justify-content: center; } @media (max-width: 640px) { #frs-mobile-book-bar { display: block; } body { padding-bottom: 76px; } #frs-whatsapp { bottom: calc(76px + clamp(1rem, 3vw, 1.75rem)); } #frs-chat { bottom: calc(76px + clamp(1rem, 3vw, 1.75rem)); } } /* ---------------------------------------------------------------------- */ /* membership card — a physical card, rendered */ /* ---------------------------------------------------------------------- */ .membership-card { position: relative; aspect-ratio: 85.6 / 54; border-radius: 16px; padding: clamp(1.5rem, 3.5vw, 2.25rem); background: linear-gradient(155deg, var(--paper-elev) 0%, var(--paper) 55%, var(--paper-card) 100%); border: 1px solid var(--brass-soft); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .membership-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 8% 0%, var(--brass-soft), transparent 55%); pointer-events: none; } .membership-card-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .membership-card-eyebrow { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); } .membership-card-title { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 3vw, 1.9rem); margin-top: 0.35rem; } .membership-card-mark { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; } .membership-card-bottom { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .membership-card-value { font-family: var(--font-display); font-style: italic; color: var(--brass); font-size: clamp(1.1rem, 2.6vw, 1.5rem); } .membership-card-name { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .membership-benefit-list { display: flex; flex-direction: column; } .membership-benefit { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hairline); } .membership-benefit:last-child { border-bottom: none; } .membership-benefit .num { font-family: var(--font-display); font-style: italic; color: var(--brass); font-size: 1.1rem; } .membership-benefit h4 { color: var(--ink); font-size: 0.95rem; margin-bottom: 0.3rem; } .membership-benefit p { color: var(--muted); font-size: 0.88rem; margin: 0; } /* ---------------------------------------------------------------------- */ /* premium hover motion — restrained, applied only to interactive elements */ /* ---------------------------------------------------------------------- */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-18deg); transition: left 0.65s var(--ease); pointer-events: none; } .btn-primary:hover::after { left: 130%; } @media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } } .card:hover h3, .card:hover .h3 { color: var(--brass); transition: color 0.4s var(--ease); } h3, .h3 { transition: color 0.4s var(--ease); } .teaser-card .media-placeholder img { transition: opacity 0.45s var(--ease), transform 0.6s var(--ease); } .teaser-card:hover .media-placeholder img { transform: scale(1.06); } .brand:hover .brand-text > span:first-child { color: var(--brass); } .brand-text > span:first-child { transition: color 0.35s var(--ease); } /* ---------------------------------------------------------------------- */ /* page transition — a brief fade to paper when leaving for another page. */ /* Purely additive: the overlay is transparent and inert until JS (having */ /* already run) makes it opaque for an outgoing click, so a page never */ /* depends on this for its content to appear. */ /* ---------------------------------------------------------------------- */ #page-transition { position: fixed; inset: 0; z-index: 9999; background: var(--paper); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.38s var(--ease), visibility 0s linear 0.38s; } #page-transition.is-active { opacity: 1; visibility: visible; transition: opacity 0.38s var(--ease); } @media (prefers-reduced-motion: reduce) { #page-transition { transition: none; } }