/* =================================================================== Hanna Beauty Room — design tokens 5 themes: each swaps the whole ink/paper/gold/rose/plum set plus 12 decorative swatch colors, picked via the floating dots (.theme-switcher). Default theme "gold" keeps the site's original palette. gold (default) — metallic gold, matches the real "Hanna" signage rose Rose Quartz — warm terracotta rose, echoes the pink/beige gel shelf emerald Emerald Noir — deep luxe green with antique gold accent lavender Lavender Dusk — soft lavender dusk with warm bronze accent azure Azure Blue — Microsoft Azure Portal's signature blue-to-cyan Each theme also has a light/dark mode, toggled independently via [data-mode="dark"] on (see the "Dark mode" block further down). --ink/--paper/etc flip per mode; --deep/--deep-text do NOT — they anchor the hero/gallery/info-card "dark accent band" so it stays the darkest, richest element on the page in both modes instead of inverting to light. =================================================================== */ :root{ --ink: #211E1C; --ink-soft: #34302C; --paper: #F7F2EA; --paper-dim: #EFE7D8; /* Near-white but tinted with the theme hue — used for cards sitting on --paper, so an "elevated" surface never reads as a flat, disconnected pure white patch against a tinted page. */ --surface: #FDFAF3; --gold: #B8902E; --gold-lt: #D9B15C; --rose: #B98277; --plum: #4B2A35; --line: rgba(33,30,28,0.12); --line-light: rgba(247,242,234,0.18); /* Fixed anchors for the hero / .section--ink / .info-card "dark accent band" — always this theme's original ink/paper pair, regardless of --ink/--paper being redefined by [data-mode="dark"] below. */ --deep: #211E1C; --deep-text: #F7F2EA; --deep-rgb: 33,30,28; --deep-text-rgb: 247,242,234; --paper-rgb: 247,242,234; /* 12 decorative swatch colors — shared by the hero/footer strips and service cards */ --sw1: #C1897C; --sw2: #B8902E; --sw3: #4B2A35; --sw4: #E3C089; --sw5: #8B5E63; --sw6: #D9B8A3; --sw7: #6B4A3D; --sw8: #A9724F; --sw9: #E8D9C0; --sw10:#703B4B; --sw11: #C79A4B; --sw12: #D9B15C; --font-display: "Fraunces", "Times New Roman", serif; --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* "Hanna" signature — picked to echo the gold handwritten shop signage */ --font-script: "Alex Brush", cursive; --container: 1120px; } /* ---------- Theme: Rose Quartz ---------- */ [data-theme="rose"]{ --ink: #2B1E22; --ink-soft: #3E2B30; --paper: #FBF0EC; --paper-dim: #F5E1DA; --surface: #FFF8F5; --gold: #B5654F; --gold-lt: #DE9A80; --rose: #8C4A5C; --plum: #5C2A3D; --line: rgba(43,30,34,0.12); --line-light: rgba(251,240,236,0.18); --deep: #2B1E22; --deep-text: #FBF0EC; --deep-rgb: 43,30,34; --deep-text-rgb: 251,240,236; --paper-rgb: 251,240,236; --sw1: #DE9A80; --sw2: #B5654F; --sw3: #5C2A3D; --sw4: #EFC7B3; --sw5: #8C4A5C; --sw6: #F3DCD2; --sw7: #723A46; --sw8: #C68468; --sw9: #F6E7DF; --sw10:#431F30; --sw11: #CB9877; --sw12: #DE9A80; } /* ---------- Theme: Emerald Noir ---------- */ [data-theme="emerald"]{ --ink: #10201B; --ink-soft: #1C302A; --paper: #F3F1E7; --paper-dim: #E9E4D2; --surface: #FAF8EE; --gold: #8C6F2E; --gold-lt: #C6A257; --rose: #4F6E5C; --plum: #0F2921; --line: rgba(16,32,27,0.14); --line-light: rgba(243,241,231,0.18); --deep: #10201B; --deep-text: #F3F1E7; --deep-rgb: 16,32,27; --deep-text-rgb: 243,241,231; --paper-rgb: 243,241,231; --sw1: #7FA089; --sw2: #8C6F2E; --sw3: #0F2921; --sw4: #C6A257; --sw5: #3F5C4F; --sw6: #B8C9BC; --sw7: #1C302A; --sw8: #6E8F79; --sw9: #E4E0CB; --sw10:#123028; --sw11: #8E9F62; --sw12: #C6A257; } /* ---------- Theme: Lavender Dusk ---------- */ [data-theme="lavender"]{ --ink: #211E2B; --ink-soft: #332C42; --paper: #F6F2F7; --paper-dim: #ECE3EE; --surface: #FCFAFD; --gold: #8D6F49; --gold-lt: #C7A876; --rose: #6E5D95; --plum: #453760; --line: rgba(33,30,43,0.13); --line-light: rgba(246,242,247,0.18); --deep: #211E2B; --deep-text: #F6F2F7; --deep-rgb: 33,30,43; --deep-text-rgb: 246,242,247; --paper-rgb: 246,242,247; --sw1: #A895C9; --sw2: #8D6F49; --sw3: #453760; --sw4: #C7A876; --sw5: #6E5D95; --sw6: #D8CDE5; --sw7: #332C42; --sw8: #9682B8; --sw9: #E8E0EF; --sw10:#362A4D; --sw11: #7D6BA3; --sw12: #C7A876; } /* ---------- Theme: Azure Blue ---------- */ [data-theme="azure"]{ --ink: #0F1B2D; --ink-soft: #1E3350; --paper: #EFF6FC; --paper-dim: #DCEEFB; --surface: #F8FBFE; --gold: #0078D4; --gold-lt: #2899F5; --rose: #0B5FA5; --plum: #08283A; --line: rgba(15,27,45,0.14); --line-light: rgba(239,246,252,0.18); --deep: #0F1B2D; --deep-text: #EFF6FC; --deep-rgb: 15,27,45; --deep-text-rgb: 239,246,252; --paper-rgb: 239,246,252; --sw1: #2899F5; --sw2: #0078D4; --sw3: #08283A; --sw4: #50E6FF; --sw5: #0B5FA5; --sw6: #BFE3FB; --sw7: #1E3350; --sw8: #106EBE; --sw9: #DCEEFB; --sw10:#051625; --sw11: #00B7C3; --sw12: #2899F5; } /* =================================================================== Dark mode — one block per theme, toggled independently via [data-mode="dark"] on (see .mode-toggle in script.js). Only the "page" tokens flip here (--ink/--paper/--paper-dim/--surface/ --line/--gold/--gold-lt/--rose). --deep/--deep-text/--plum stay fixed (defined above, per theme) so the hero/gallery/info-card/footer bands stay the darkest, richest element on the page in both modes. =================================================================== */ /* ---------- Dark: Gold (default theme, no [data-theme]) ---------- */ [data-mode="dark"]{ --ink: #F7F2EA; --ink-soft: #C9BFAE; /* Deliberately lighter than the fixed --deep (#211E1C) — otherwise .section--paper and .section--ink/.info-card converge to the same near-black and sections stop reading as visually separate. */ --paper: #2E2822; --paper-dim: #26211B; --surface: #29231D; --line: rgba(247,242,234,0.10); --gold: #D9B15C; --gold-lt: #E8C787; --rose: #C1897C; --paper-rgb: 46,40,34; } /* ---------- Dark: Rose Quartz ---------- */ [data-theme="rose"][data-mode="dark"]{ --ink: #FBF0EC; --ink-soft: #D9BFB8; --paper: #3A2A2F; --paper-dim: #322428; --surface: #2C1B20; --line: rgba(251,240,236,0.10); --gold: #DE9A80; --gold-lt: #EAB69F; --rose: #F3DCD2; --paper-rgb: 58,42,47; } /* ---------- Dark: Emerald Noir ---------- */ [data-theme="emerald"][data-mode="dark"]{ --ink: #F3F1E7; --ink-soft: #C7C2AC; --paper: #1C2E27; --paper-dim: #162620; --surface: #182420; --line: rgba(243,241,231,0.10); --gold: #C6A257; --gold-lt: #D9BC7C; --rose: #7FA089; --paper-rgb: 28,46,39; } /* ---------- Dark: Lavender Dusk ---------- */ [data-theme="lavender"][data-mode="dark"]{ --ink: #F6F2F7; --ink-soft: #CFC3D6; --paper: #2E2A3A; --paper-dim: #262331; --surface: #26202E; --line: rgba(246,242,247,0.10); --gold: #C7A876; --gold-lt: #D9C093; --rose: #A895C9; --paper-rgb: 46,42,58; } /* ---------- Dark: Azure Blue (Azure Portal-style dark surface) ---------- */ [data-theme="azure"][data-mode="dark"]{ --ink: #EFF6FC; --ink-soft: #B9CBDA; --paper: #1A2A40; --paper-dim: #142236; --surface: #1E2731; --line: rgba(239,246,252,0.10); --gold: #2899F5; --gold-lt: #5AB3F8; --rose: #66B8F0; --paper-rgb: 26,42,64; } *{ box-sizing:border-box; margin:0; padding:0; } /* Smooth theme switch instead of a hard cut — auto-disabled under prefers-reduced-motion below */ *{ transition:background-color .35s ease, color .35s ease, border-color .35s ease; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } } body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--gold); color:var(--deep); padding:12px 20px; font-weight:600; } .skip-link:focus{ left:16px; top:16px; } a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; } .eyebrow{ font-family:var(--font-body); font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--rose); margin-bottom:14px; } .eyebrow--light{ color:var(--gold-lt); } .section-title{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.22; max-width:20ch; margin-bottom:28px; } .section-title--light{ color:var(--deep-text); } .card-group-title{ font-family:var(--font-body); font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; } .card-group-title + .cards{ margin-bottom:40px; } /* ---------- Nav ---------- */ .nav{ position:sticky; top:0; z-index:100; background:rgba(var(--paper-rgb),0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav-inner{ max-width:var(--container); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav-mark{ display:flex; align-items:baseline; gap:8px; } .nav-mark-script{ font-family:var(--font-script); font-size:2.1rem; color:var(--ink); } .nav-mark-sub{ font-size:0.62rem; letter-spacing:0.18em; font-weight:600; color:var(--rose); } .nav-links{ display:flex; gap:32px; } .nav-links a{ font-size:0.92rem; font-weight:500; color:var(--ink-soft); position:relative; padding-bottom:3px; } .nav-links a:hover{ color:var(--ink); } .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right 0.25s ease; } .nav-links a:hover::after{ right:0; } /* Real link to the other language's URL (not a JS toggle — see plan notes on crawlable, hreflang-backed i18n). Sits before .nav-cta so both stay together as one trailing group on mobile (see the 900px breakpoint). Shows a flag glyph — title/aria-label on the element itself supply the "switch language" tooltip and screen-reader text. */ .nav-lang{ display:flex; align-items:center; justify-content:center; width:34px; height:26px; flex-shrink:0; border:1px solid var(--line); border-radius:6px; transition:border-color 0.2s ease, transform 0.2s ease; } .nav-lang:hover{ border-color:var(--gold-lt); transform:translateY(-1px); } .nav-lang svg{ width:20px; height:14px; border-radius:2px; display:block; } .nav-cta{ display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; line-height:1.2; border-left:1px solid var(--line); padding-left:20px; } .nav-cta-label{ font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--rose); } .nav-cta-phone{ font-weight:600; font-size:0.98rem; white-space:nowrap; } /* ---------- Hero ---------- */ .hero{ background: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(185,130,119,0.18), transparent 60%), var(--deep); color:var(--deep-text); padding:88px 24px 0; text-align:center; overflow:hidden; } .hero-inner{ max-width:720px; margin:0 auto; padding-bottom:56px; } .hero-mark{ margin-bottom:22px; } .hero-mark-script{ display:block; font-family:var(--font-script); font-size:clamp(4.6rem, 13vw, 8rem); line-height:1; color:var(--gold-lt); } .hero-mark-sub{ display:block; margin-top:10px; font-size:0.9rem; letter-spacing:0.42em; font-weight:600; color:var(--deep-text); opacity:0.82; } .hero-tag{ font-size:clamp(1rem, 1.6vw, 1.15rem); color:rgba(var(--deep-text-rgb),0.86); max-width:46ch; margin:0 auto 34px; } .hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; } .hero-hours{ font-size:0.85rem; letter-spacing:0.04em; color:rgba(var(--deep-text-rgb),0.6); } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 30px; font-weight:600; font-size:0.95rem; border-radius:2px; transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; border:1px solid transparent; } .btn--gold{ background:var(--gold); color:var(--deep); } .btn--gold:hover{ background:var(--gold-lt); transform:translateY(-1px); } .btn--ghost{ border-color:rgba(var(--deep-text-rgb),0.4); color:var(--deep-text); } .btn--ghost:hover{ border-color:var(--gold-lt); color:var(--gold-lt); } .btn--block{ display:flex; width:100%; margin-top:22px; } /* Signature element: swatch strip, echoing the salon's own polish-shelf display */ .swatch-strip{ display:flex; width:100%; height:14px; } .swatch-strip span{ flex:1; } .swatch-strip--hero span:nth-child(12n+1){ background:var(--sw1); } .swatch-strip--hero span:nth-child(12n+2){ background:var(--sw2); } .swatch-strip--hero span:nth-child(12n+3){ background:var(--sw3); } .swatch-strip--hero span:nth-child(12n+4){ background:var(--sw4); } .swatch-strip--hero span:nth-child(12n+5){ background:var(--sw5); } .swatch-strip--hero span:nth-child(12n+6){ background:var(--sw6); } .swatch-strip--hero span:nth-child(12n+7){ background:var(--sw7); } .swatch-strip--hero span:nth-child(12n+8){ background:var(--sw8); } .swatch-strip--hero span:nth-child(12n+9){ background:var(--sw9); } .swatch-strip--hero span:nth-child(12n+10){ background:var(--sw10); } .swatch-strip--hero span:nth-child(12n+11){ background:var(--sw11); } .swatch-strip--hero span:nth-child(12n+12){ background:var(--sw12); } /* Footer strip reuses the same 12-color cycle as the hero — was 16 colors declared separately, merged into one shared swatch set so every theme only has to define it once. */ .swatch-strip--footer{ height:10px; opacity:0.9; } .swatch-strip--footer span:nth-child(12n+1){ background:var(--sw1); } .swatch-strip--footer span:nth-child(12n+2){ background:var(--sw2); } .swatch-strip--footer span:nth-child(12n+3){ background:var(--sw3); } .swatch-strip--footer span:nth-child(12n+4){ background:var(--sw4); } .swatch-strip--footer span:nth-child(12n+5){ background:var(--sw5); } .swatch-strip--footer span:nth-child(12n+6){ background:var(--sw6); } .swatch-strip--footer span:nth-child(12n+7){ background:var(--sw7); } .swatch-strip--footer span:nth-child(12n+8){ background:var(--sw8); } .swatch-strip--footer span:nth-child(12n+9){ background:var(--sw9); } .swatch-strip--footer span:nth-child(12n+10){ background:var(--sw10); } .swatch-strip--footer span:nth-child(12n+11){ background:var(--sw11); } .swatch-strip--footer span:nth-child(12n+12){ background:var(--sw12); } /* ---------- Trust strip ---------- */ .trust{ background:var(--paper-dim); border-bottom:1px solid var(--line); } .trust-inner{ max-width:var(--container); margin:0 auto; padding:22px 24px; display:flex; justify-content:center; gap:0; flex-wrap:wrap; } .trust-item{ font-size:0.86rem; font-weight:500; color:var(--ink-soft); padding:0 28px; border-left:1px solid var(--line); display:flex; align-items:center; gap:8px; } .trust-item:first-child{ border-left:none; } .trust-num{ font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--gold); font-size:1.1rem; } /* ---------- Intro lede (sits right below the Hero, before the Trust strip) ---------- */ .lede-section{ text-align:center; } .lede-section .section-inner{ max-width:720px; } .lede-text{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(1.2rem, 2.2vw, 1.5rem); line-height:1.5; color:var(--ink-soft); max-width:44ch; margin:0 auto 32px; } .service-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; list-style:none; } .service-tag{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:0.85rem; font-weight:500; color:var(--ink-soft); } .service-tag-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; } /* Cycles through the same 12 swatch colors as the hero/footer strips, so the tag row reads as an extension of that signature nail-polish-shelf motif. */ .service-tags .service-tag:nth-child(6n+1) .service-tag-dot{ background:var(--sw2); } .service-tags .service-tag:nth-child(6n+2) .service-tag-dot{ background:var(--sw1); } .service-tags .service-tag:nth-child(6n+3) .service-tag-dot{ background:var(--sw4); } .service-tags .service-tag:nth-child(6n+4) .service-tag-dot{ background:var(--sw5); } .service-tags .service-tag:nth-child(6n+5) .service-tag-dot{ background:var(--sw11); } .service-tags .service-tag:nth-child(6n+6) .service-tag-dot{ background:var(--sw3); } /* ---------- Sections ---------- */ .section{ padding:88px 24px; } .section-inner{ max-width:var(--container); margin:0 auto; } /* Keeps heading + list together as one consistent-width column, instead of a full-width heading sitting over a much narrower list and leaving a lopsided gap on the right (see .page-pricelist). */ .section-inner--narrow{ max-width:640px; } .section--paper{ background:var(--paper); } /* A third, subtly-recessed tone (same token .trust already uses) for content that deserves its own visual beat without going as dark as .section--ink — e.g. a pricing block sitting between two full .section--paper blocks. */ .section--dim{ background:var(--paper-dim); } /* Faint real-photo texture behind a .section--dim block — opacity lives on the ::before layer (not the background-image itself) so it works without knowing --paper-dim's exact RGB per theme/mode; text sits above at full opacity via z-index, so legibility never depends on the photo underneath. */ .section--photo{ position:relative; overflow:hidden; } .section--photo::before{ content:""; position:absolute; inset:0; background:url("/images/palette/03.jpg") center/cover no-repeat; opacity:0.14; } .section--photo .section-inner{ position:relative; z-index:1; } /* color set explicitly (not inherited from body) so any plain text dropped straight into an ink section — not just .eyebrow--light/.section-title--light headings — reads correctly in both light and dark mode. --deep-text is a fixed anchor, unlike --ink/--ink-soft which flip with [data-mode="dark"]. */ .section--ink{ background:var(--deep); color:var(--deep-text); } /* Services — flex instead of a fixed 3-column grid so a 5th/6th card wraps to its own row and grows to fill it, instead of leaving an empty gap next to an "orphan" last card the way a strict grid track would. */ .cards{ display:flex; flex-wrap:wrap; gap:28px; } .card{ flex:1 1 300px; background:var(--surface); border:1px solid var(--line); padding:0 0 30px; overflow:hidden; transition:transform 0.25s ease, box-shadow 0.25s ease; } .card:hover{ transform:translateY(-4px); box-shadow:0 18px 32px -20px rgba(33,30,28,0.28); } .card h3{ font-family:var(--font-display); font-weight:500; font-size:1.35rem; margin:26px 28px 10px; } .card p{ margin:0 28px 6px; color:var(--ink-soft); font-size:0.95rem; } .card-meta{ font-weight:600; color:var(--gold); font-size:0.85rem !important; margin-top:14px !important; } /* Twinkling sparkle accent (Gemini-style) — draws the eye to price tags and the booking CTA. The animation lives on this wrapping span, not on the itself — iOS Safari has a long-standing bug where CSS `transform` animations on a root element silently never run. The svg inside just fills the span and inherits currentColor, so it matches whatever text color it sits next to across every theme and both light/dark mode. */ .sparkle{ width:0.95em; height:0.95em; display:inline-block; vertical-align:-0.1em; margin-left:5px; transform-origin:center; animation:sparkle-twinkle 1.8s ease-in-out infinite; } .sparkle svg{ width:100%; height:100%; display:block; fill:currentColor; } .sparkle--d1{ animation-delay:0.3s; } .sparkle--d2{ animation-delay:0.6s; } .sparkle--d3{ animation-delay:0.9s; } @keyframes sparkle-twinkle{ 0%, 100%{ transform:scale(0.8) rotate(0deg); opacity:0.5; } 50%{ transform:scale(1.25) rotate(18deg); opacity:1; } } .card-swatch{ display:flex; height:64px; } .card-swatch span{ flex:1; } .card-swatch--gel span:nth-child(1){ background:var(--sw1); } .card-swatch--gel span:nth-child(2){ background:var(--sw12); } .card-swatch--gel span:nth-child(3){ background:var(--sw5); } .card-swatch--gel span:nth-child(4){ background:var(--sw4); } .card-swatch--gel span:nth-child(5){ background:var(--sw2); } .card-swatch--art span:nth-child(1){ background:var(--sw10); } .card-swatch--art span:nth-child(2){ background:var(--sw11); } .card-swatch--art span:nth-child(3){ background:var(--sw3); } .card-swatch--art span:nth-child(4){ background:var(--sw6); } .card-swatch--art span:nth-child(5){ background:var(--sw8); } .card-swatch--care span:nth-child(1){ background:var(--sw9); } .card-swatch--care span:nth-child(2){ background:var(--rose); } .card-swatch--care span:nth-child(3){ background:var(--sw12); } .card-swatch--care span:nth-child(4){ background:var(--sw7); } .card-swatch--care span:nth-child(5){ background:var(--sw1); } .card-swatch--lash span:nth-child(1){ background:var(--sw7); } .card-swatch--lash span:nth-child(2){ background:var(--sw3); } .card-swatch--lash span:nth-child(3){ background:var(--sw10); } .card-swatch--lash span:nth-child(4){ background:var(--sw8); } .card-swatch--lash span:nth-child(5){ background:var(--sw11); } .card-swatch--lift span:nth-child(1){ background:var(--sw6); } .card-swatch--lift span:nth-child(2){ background:var(--sw9); } .card-swatch--lift span:nth-child(3){ background:var(--sw2); } .card-swatch--lift span:nth-child(4){ background:var(--sw5); } .card-swatch--lift span:nth-child(5){ background:var(--sw4); } .card-swatch--douyin span:nth-child(1){ background:var(--sw4); } .card-swatch--douyin span:nth-child(2){ background:var(--sw11); } .card-swatch--douyin span:nth-child(3){ background:var(--sw1); } .card-swatch--douyin span:nth-child(4){ background:var(--sw6); } .card-swatch--douyin span:nth-child(5){ background:var(--sw3); } /* Row of 3 real photos per service card — opens the shared lightbox (see lightbox.js). TEMP placeholder photos until real shop photos are ready (see gallery-data.js). */ .card-gallery{ display:flex; gap:6px; margin:14px 28px 0; } .card-gallery-thumb{ flex:1; aspect-ratio:1; padding:0; border:none; cursor:pointer; overflow:hidden; border-radius:2px; background:var(--paper-dim); } .card-gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s ease; } .card-gallery-thumb:hover img{ transform:scale(1.08); } /* Gallery — each cell is a (WebP + JPG fallback), image sits inside */ .gallery{ display:grid; grid-template-columns:1.1fr 1fr 1fr; grid-template-rows:auto auto; gap:16px; padding-top:4px; } .gallery-item{ display:block; overflow:hidden; box-shadow:0 1px 2px rgba(33,30,28,0.06); } .gallery-item img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.02); transition:transform 0.4s ease, filter 0.4s ease; } .gallery-item:hover img{ transform:scale(1.015); filter:saturate(1.12); } .gallery-item--tall{ grid-row:1 / 3; height:100%; } .gallery-item:nth-child(2), .gallery-item:nth-child(3){ height:260px; } .gallery-item:nth-child(4){ grid-column:2 / 4; height:260px; } /* Color-palette block — a simple uniform grid (unlike .gallery above, which is hand-tuned for exactly 4 photos), each tile opens the shared lightbox. */ .palette-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding-top:4px; } .palette-item{ display:block; aspect-ratio:1; overflow:hidden; border:none; padding:0; cursor:pointer; box-shadow:0 1px 2px rgba(33,30,28,0.06); } .palette-item img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.02); transition:transform 0.4s ease, filter 0.4s ease; } .palette-item:hover img{ transform:scale(1.04); filter:saturate(1.12); } /* About + info */ .about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start; } .about-copy p{ color:var(--ink-soft); font-size:1.02rem; max-width:54ch; } .info-card{ background:var(--deep); color:var(--deep-text); padding:36px 32px; } .info-card-title{ font-family:var(--font-display); font-weight:500; font-size:1.15rem; margin-bottom:22px; } .info-list{ list-style:none; } .info-list li{ display:flex; flex-direction:column; gap:3px; padding:14px 0; border-top:1px solid var(--line-light); } .info-list li:first-child{ border-top:none; padding-top:0; } .info-label{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-lt); } .info-value{ font-size:0.98rem; } .info-value a:hover{ color:var(--gold-lt); } /* FAQ — native
/ accordion, no JS needed (keeps this fully outside CSP's script-src concerns). */ .faq-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); max-width:760px; } .faq-item{ background:var(--paper); } .faq-item summary{ list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-display); font-weight:500; font-size:1.02rem; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; flex:0 0 auto; font-size:1.4rem; line-height:1; color:var(--gold); transition:transform 0.25s ease; } .faq-item[open] summary::after{ transform:rotate(45deg); } .faq-item p{ margin:0 24px 22px; color:var(--ink-soft); font-size:0.95rem; max-width:68ch; } /* Evidence photo on money pages (location/tourist landing pages) — a single real shop photo, constrained smaller than the full-width homepage gallery since it's supporting content, not the page's main subject. */ .page-photo{ max-width:480px; margin:8px 0 32px; box-shadow:0 1px 2px rgba(33,30,28,0.06); } .page-photo img{ width:100%; height:auto; } /* Short inline price list on money pages — deliberately not .info-list, whose --gold-lt label color assumes the dark .info-card background it's normally nested in and would be low-contrast directly on --paper. */ .page-pricelist{ list-style:none; max-width:420px; } .page-pricelist--wide{ max-width:640px; } .page-pricelist li{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--line); } .page-pricelist li:first-child{ border-top:none; padding-top:0; } .page-pricelist strong{ font-weight:500; } .page-pricelist span{ color:var(--gold); font-weight:600; } .page-link-more{ margin-top:24px; } /* ---------- Footer ---------- */ .footer{ background:var(--plum); color:var(--deep-text); } .footer-inner{ max-width:var(--container); margin:0 auto; padding:48px 24px 0; text-align:center; } .footer-mark{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:14px; } .footer-mark-script{ font-family:var(--font-script); font-size:2.6rem; color:var(--gold-lt); } .footer-addr{ font-size:0.85rem; color:rgba(var(--deep-text-rgb),0.75); padding-bottom:28px; } .footer-copyright{ font-size:0.76rem; color:rgba(var(--deep-text-rgb),0.45); padding:18px 0; border-top:1px solid var(--line-light); } /* ---------- Hero entrance (pure CSS — never depends on JS/scroll, so content can never get stuck hidden) ---------- */ @keyframes riseIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } .hero-inner > *{ animation:riseIn 0.7s cubic-bezier(.22,.61,.36,1) both; } .hero-inner .eyebrow{ animation-delay:0.02s; } .hero-inner .hero-mark{ animation-delay:0.1s; } .hero-inner .hero-tag{ animation-delay:0.22s; } .hero-inner .hero-actions{ animation-delay:0.32s; } .hero-inner .hero-hours{ animation-delay:0.4s; } @media (prefers-reduced-motion: reduce){ .hero-inner > *{ animation:none; } } /* ---------- Quick-contact bar (mobile only) ---------- */ /* Hidden by default; enabled at the 900px breakpoint below. */ .action-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:120; background:rgba(var(--deep-rgb),0.96); backdrop-filter:blur(8px); border-top:1px solid var(--line-light); padding-bottom:env(safe-area-inset-bottom); } .action-bar-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 4px; color:var(--deep-text); font-size:0.7rem; font-weight:600; border-left:1px solid var(--line-light); } .action-bar-item:first-child{ border-left:none; } .action-bar-item svg{ width:20px; height:20px; fill:none; stroke:var(--gold-lt); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ---------- Theme switcher (light/dark toggle + 5 floating color dots, right edge) ---------- */ .theme-switcher{ position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:110; display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 8px; background:rgba(var(--paper-rgb),0.88); border:1px solid var(--line); border-radius:999px; box-shadow:0 8px 24px -12px rgba(33,30,28,0.35); backdrop-filter:blur(6px); } .theme-swatch{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; padding:2px; cursor:pointer; background:transparent; display:flex; align-items:center; justify-content:center; transition:transform 0.2s ease, border-color 0.2s ease; } .theme-swatch:hover{ transform:scale(1.14); } .theme-swatch[aria-pressed="true"]{ border-color:var(--ink); } .theme-swatch .chip{ width:100%; height:100%; border-radius:50%; display:block; } /* Each dot always shows its own theme's representative color, regardless of the active theme */ .theme-swatch--gold .chip{ background:#B98277; } .theme-swatch--rose .chip{ background:#8C4A5C; } .theme-swatch--emerald .chip{ background:#4F6E5C; } .theme-swatch--lavender .chip{ background:#6E5D95; } .theme-swatch--azure .chip{ background:#0078D4; } /* Light/dark mode toggle — sits above the color dots, separated by a hairline. Both icons always render; CSS shows the one matching the current mode so the click handler only has to flip [data-mode], never touch the icons. */ .mode-toggle{ width:26px; height:26px; border-radius:50%; border:none; padding:0; cursor:pointer; background:transparent; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:transform 0.2s ease; } .mode-toggle:hover{ transform:scale(1.14); } .mode-toggle svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .mode-toggle .icon-moon{ display:none; } [data-mode="dark"] .mode-toggle .icon-sun{ display:none; } [data-mode="dark"] .mode-toggle .icon-moon{ display:block; } .theme-switcher-divider{ width:70%; height:1px; background:var(--line); } @media (max-width:520px){ .theme-switcher{ right:8px; padding:8px 6px; gap:8px; } .mode-toggle{ width:22px; height:22px; } .mode-toggle svg{ width:14px; height:14px; } .theme-swatch{ width:22px; height:22px; } } /* ---------- Lightbox (shared photo viewer for card/palette thumbnails, see lightbox.js) ---------- */ .lightbox{ /* Explicit width, not just max-width — defaults to width:fit-content, which without this would shrink the whole dialog down to whatever width the (height-constrained) image happens to render at, instead of filling the intended box. */ width:min(92vw, 900px); max-width:min(92vw, 900px); border:none; padding:0; max-height:88vh; background:var(--deep); color:var(--deep-text); } .lightbox::backdrop{ background:rgba(0,0,0,0.72); } .lightbox-figure{ margin:0; display:flex; flex-direction:column; } .lightbox-picture{ display:block; line-height:0; } .lightbox-img{ display:block; width:100%; max-height:72vh; object-fit:contain; background:rgba(var(--deep-rgb),0.4); transition:opacity 0.18s ease; } .lightbox-img.is-fading{ opacity:0; } .lightbox-caption{ margin:0; padding:14px 56px 18px 20px; font-size:0.92rem; color:var(--deep-text); } .lightbox-title{ position:absolute; left:20px; top:16px; font-family:var(--font-display); font-size:0.95rem; font-weight:500; margin:0; pointer-events:none; } .lightbox-counter{ position:absolute; right:58px; top:20px; font-size:0.78rem; opacity:0.7; margin:0; pointer-events:none; } .lightbox-close, .lightbox-nav{ position:absolute; border:none; background:rgba(var(--deep-text-rgb),0.12); color:var(--deep-text); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background 0.2s ease; } .lightbox-close:hover, .lightbox-nav:hover{ background:rgba(var(--deep-text-rgb),0.22); } .lightbox-close{ top:12px; right:12px; width:36px; height:36px; } .lightbox-nav{ top:50%; transform:translateY(-50%); width:44px; height:44px; } .lightbox-prev{ left:12px; } .lightbox-next{ right:12px; } .lightbox-close svg, .lightbox-nav svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:520px){ .lightbox-nav{ width:36px; height:36px; } .lightbox-nav svg{ width:15px; height:15px; } .lightbox-prev{ left:6px; } .lightbox-next{ right:6px; } } /* ---------- Anchor targets don't get hidden behind the sticky header on jump ---------- */ section[id], aside[id]{ scroll-margin-top:88px; } /* ---------- Responsive ---------- */ @media (max-width: 900px){ /* Nav drops to 2 rows: logo + phone number on top, scrollable link strip below. Pure CSS — no drawer, no JS, so it can never get stuck open. */ .nav-inner{ flex-wrap:wrap; gap:10px 16px; padding-bottom:10px; } .nav-mark{ order:1; } .nav-lang{ order:2; margin-left:auto; } .nav-cta{ order:2; } .nav-links{ order:3; width:100%; /* Flex items default to min-width:auto, meaning they refuse to shrink below their content — the link strip would push the page wider and cause horizontal overflow. min-width:0 is what lets overflow-x:auto actually scroll instead. */ min-width:0; gap:24px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .nav-links::-webkit-scrollbar{ display:none; } .nav-links a{ flex:0 0 auto; font-size:0.88rem; } /* Quick-contact bar only makes sense on touch screens */ .action-bar{ display:flex; } .footer-copyright{ padding-bottom:80px; } .card{ flex-basis:100%; } .about-grid{ grid-template-columns:1fr; gap:40px; } .gallery{ grid-template-columns:1fr 1fr; grid-template-rows:auto; } .gallery-item--tall{ grid-row:auto; grid-column:1 / 3; height:280px; } .gallery-item:nth-child(4){ grid-column:1 / 3; } .palette-grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 520px){ .nav-inner{ gap:8px 10px; } .nav-lang{ width:28px; height:22px; } .nav-lang svg{ width:17px; height:12px; } /* Logo + flag no longer leave room for the phone number on the same row at this width — give it a full-width row of its own instead of shrinking it until it clips (see .nav-links order bump below). */ .nav-cta{ flex-basis:100%; flex-direction:column; align-items:flex-start; border-left:none; border-top:1px solid var(--line); padding:10px 0 0; order:3; } .nav-links{ order:4; } .hero{ padding-top:64px; } .section{ padding:64px 20px; } .gallery{ grid-template-columns:1fr; } .gallery-item--tall, .gallery-item:nth-child(4){ grid-column:1; } .palette-grid{ grid-template-columns:1fr 1fr; } .hero-actions{ flex-direction:column; align-items:stretch; } .trust-inner{ flex-direction:column; align-items:center; gap:12px; padding:20px 24px; } .trust-item{ border-left:none; padding:0; } .service-tag{ padding:8px 14px; font-size:0.8rem; } .faq-item summary{ padding:16px 18px; font-size:0.95rem; } .faq-item p{ margin:0 18px 18px; } }