/* ===================================================================== PAYA Nail Services — design system (site v2) Style source: business card "Design sans titre (26)" (blush satin + rose-gold roses) and the price menus (cream satin, cocoa serif titles). Mobile-first. Breakpoints: 600 / 960 / 1200 px. No framework. Fonts: self-hosted WOFF2 in fonts/ (same families, weights and styles as the former Google Fonts request; OFL), latin + latin-ext subsets below, font-display: swap. Thai pages (and the EN service pages, for the "ไทย" switch) add Prompt with an inline @font-face block in their . Every page preloads the two faces of its first screen: EN jost-latin + cormorant-garamond-latin, TH prompt-400-thai + prompt-400-latin, plus the satin texture of the hero (img/satin-blush.webp; prices pages also satin-ivory.webp): ===================================================================== */ /* Metric-matched fallback for Cormorant Garamond: limits the re-wrap (CLS) of the H1 when the web font swaps in. Overrides are divided by size-adjust (net ascent ~92%, descent ~29%, as in Cormorant). */ @font-face { font-family: "Cormorant Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"); size-adjust: 88%; ascent-override: 105%; descent-override: 33%; line-gap-override: 0%; } /* Self-hosted web fonts (downloaded from Google Fonts, unhinted woff2; variable files carry a weight range) */ @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/cinzel-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/cinzel-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-500-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-500-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/cormorant-garamond-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/cormorant-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Parisienne"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/parisienne-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Parisienne"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/parisienne-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- 1. Tokens ---------- */ :root { /* Satin backgrounds */ --blush-50: #FBF3F5; --blush-100: #F5E7EB; --blush-200: #EEDBE2; /* card satin, main background */ --blush-300: #E4C7D0; --ivory-50: #FFFCF8; --ivory-100: #FAF4EC; /* menu cream satin */ --ivory-200: #F1E6DA; /* Cocoa (logo + text) */ --cocoa-300: #A9786A; --cocoa-500: #7C4A38; /* logo colour, headings */ --cocoa-700: #5A3427; /* solid buttons */ --cocoa-800: #4E2E24; /* body text, footer bg */ --cocoa-900: #3E2219; /* text on gold */ /* Rose gold / copper */ --rg-200: #F3D3BE; --rg-300: #E6B79A; --rg-400: #D9A07E; --rg-500: #C88A64; /* main accent (decoration only, not text) */ --rg-700: #A65A38; --copper: #93371A; /* deep copper, small text accents (AA on blush) */ --copper-ink: #8A4A2F; /* eyebrow labels (AA on blush & ivory) */ /* Gradients */ --rg-metal: linear-gradient(135deg, #93371A 0%, #C88A64 22%, #F3D3BE 48%, #C88A64 72%, #A65A38 100%); --rg-btn: linear-gradient(135deg, #D9A07E 0%, #F2D2BC 42%, #E6B79A 60%, #D49A76 100%); --rg-btn-hover: linear-gradient(135deg, #E3AE8C 0%, #F7DECB 42%, #ECC2A6 60%, #DCA684 100%); --rg-rule: linear-gradient(90deg, transparent 0%, #C88A64 18%, #F3D3BE 50%, #C88A64 82%, transparent 100%); /* Semantic */ --bg: var(--blush-200); --surface: rgba(255, 251, 248, .78); --text: var(--cocoa-800); --text-soft: #6B4537; /* AA on blush (6.3:1) */ --heading: var(--cocoa-500); --line: rgba(200, 138, 100, .45); --seam: #FBF3F5; /* colour every satin band fades to at its edges */ --focus: var(--copper); /* Type */ --font-display: "Cormorant Garamond", "Cormorant", "Cormorant Fallback", Garamond, "Times New Roman", serif; --font-caps: "Cinzel", "Trajan Pro", "Cormorant Garamond", serif; --font-script: "Parisienne", "Great Vibes", cursive; --font-body: "Jost", "Prompt", system-ui, -apple-system, "Segoe UI", sans-serif; --font-thai: "Prompt", "Noto Sans Thai", "Leelawadee UI", "Tahoma", sans-serif; --fs-xs: .8125rem; --fs-sm: 1rem; /* running text never below 16px */ --fs-btn: .9375rem; /* uppercase button labels */ --fs-base: 1.0625rem; --fs-lg: 1.1875rem; --fs-h3: clamp(1.35rem, 1.2rem + .6vw, 1.6rem); --fs-h2: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem); --fs-h1: clamp(2.15rem, 1.6rem + 2.6vw, 3.4rem); /* Spacing scale (4px base) */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --gutter: 1rem; --container: 1160px; --container-narrow: 760px; --header-h: 72px; --bar-h: 64px; --radius-sm: 6px; --radius: 14px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(78, 46, 36, .06), 0 2px 8px rgba(78, 46, 36, .06); --shadow: 0 6px 24px rgba(78, 46, 36, .10), 0 2px 6px rgba(78, 46, 36, .06); --shadow-lg: 0 18px 50px rgba(78, 46, 36, .16); --ease: cubic-bezier(.2, .7, .2, 1); } @media (min-width: 600px) { :root { --gutter: 1.5rem; } } @media (min-width: 960px) { :root { --gutter: 2rem; --header-h: 84px; } } /* ---------- 2. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400; line-height: 1.65; color: var(--text); background: var(--blush-100); /* sections opt in to satin with .bg-blush / .bg-ivory */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); /* room for action bar */ } @media (min-width: 960px) { body { padding-bottom: 0; } } img, svg, video { display: block; max-width: 100%; height: auto; } img { border: 0; } a { color: var(--cocoa-500); text-decoration-color: var(--rg-500); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .2s var(--ease); } a:hover { color: var(--copper); } p, ul, ol, dl, figure, blockquote { margin: 0 0 var(--s-4); } ul[class], ol[class] { list-style: none; padding: 0; margin: 0; } strong, b { font-weight: 500; } small { font-size: var(--fs-xs); } hr { border: 0; height: 1px; background: var(--rg-rule); margin: var(--s-6) 0; } address { font-style: normal; } button { font: inherit; color: inherit; cursor: pointer; } table { border-collapse: collapse; width: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--heading); line-height: 1.12; letter-spacing: .005em; margin: 0 0 var(--s-4); text-wrap: balance; font-variant-numeric: lining-nums; /* Cormorant defaults to old-style figures ("1" looks like "I") */ } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: 1.2; } h4 { font-size: var(--fs-lg); } /* Thai: Prompt for body; headings keep Cormorant for Latin glyphs, Prompt for Thai */ :lang(th) body, body:lang(th) { font-family: var(--font-thai); font-weight: 400; line-height: 1.8; } /* Thai headings: one family (Prompt) for Thai AND Latin glyphs, regular weight, no synthetic italic */ :lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) h4 { font-family: var(--font-thai); font-weight: 400; line-height: 1.4; letter-spacing: 0; } :lang(th) h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); } :lang(th) h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); } :lang(th) h1 em, :lang(th) h2 em { font-style: normal; font-weight: 400; color: var(--copper); } :lang(th) .lede { font-weight: 300; } :lang(th) strong, :lang(th) b { font-weight: 500; } /* ---------- 3. Accessibility helpers ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 200; background: var(--cocoa-800); color: var(--ivory-50); padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm); text-decoration: none; } .skip-link:focus { top: var(--s-3); color: var(--ivory-50); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .action-bar :focus-visible, .on-dark :focus-visible { outline-color: var(--rg-200); } /* ---------- 4. Layout ---------- */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); } .section { position: relative; isolation: isolate; padding-block: var(--s-8); overflow: hidden; } @media (min-width: 960px) { .section { padding-block: var(--s-9); } } .section--tight { padding-block: var(--s-7); } /* Section backgrounds */ /* Every band is satin and fades into --seam at its top and bottom edges, so the page reads as one continuous piece of fabric with lighter and darker areas (no hard horizontal cuts). */ .bg-blush { background: linear-gradient(var(--seam), rgba(251, 243, 245, 0) 96px, rgba(251, 243, 245, 0) calc(100% - 96px), var(--seam)), var(--blush-200) url("img/satin-blush.jpg") center / cover no-repeat; background: linear-gradient(var(--seam), rgba(251, 243, 245, 0) 96px, rgba(251, 243, 245, 0) calc(100% - 96px), var(--seam)), var(--blush-200) image-set(url("img/satin-blush.webp") type("image/webp"), url("img/satin-blush.jpg") type("image/jpeg")) center / cover no-repeat; } .bg-blush-soft { background: linear-gradient(var(--seam), rgba(251, 243, 245, 0) 96px, rgba(251, 243, 245, 0) calc(100% - 96px), var(--seam)), linear-gradient(rgba(251, 243, 245, .62), rgba(251, 243, 245, .62)), var(--blush-200) url("img/satin-blush.jpg") center / cover no-repeat; background: linear-gradient(var(--seam), rgba(251, 243, 245, 0) 96px, rgba(251, 243, 245, 0) calc(100% - 96px), var(--seam)), linear-gradient(rgba(251, 243, 245, .62), rgba(251, 243, 245, .62)), var(--blush-200) image-set(url("img/satin-blush.webp") type("image/webp"), url("img/satin-blush.jpg") type("image/jpeg")) center / cover no-repeat; } .bg-ivory { background: linear-gradient(var(--seam), rgba(251, 243, 245, 0) 96px, rgba(251, 243, 245, 0) calc(100% - 96px), var(--seam)), linear-gradient(rgba(255, 252, 248, .45), rgba(255, 252, 248, .45)), var(--ivory-100) url("img/satin-ivory.jpg") center / cover no-repeat; background: linear-gradient(var(--seam), rgba(251, 243, 245, 0) 96px, rgba(251, 243, 245, 0) calc(100% - 96px), var(--seam)), linear-gradient(rgba(255, 252, 248, .45), rgba(255, 252, 248, .45)), var(--ivory-100) image-set(url("img/satin-ivory.webp") type("image/webp"), url("img/satin-ivory.jpg") type("image/jpeg")) center / cover no-repeat; } .bg-plain { background: linear-gradient(var(--seam), rgba(251, 243, 245, 0) 80px, rgba(251, 243, 245, 0) calc(100% - 80px), var(--seam)), linear-gradient(rgba(251, 243, 245, .8), rgba(251, 243, 245, .8)), var(--blush-50) url("img/satin-blush.jpg") center / cover no-repeat; background: linear-gradient(var(--seam), rgba(251, 243, 245, 0) 80px, rgba(251, 243, 245, 0) calc(100% - 80px), var(--seam)), linear-gradient(rgba(251, 243, 245, .8), rgba(251, 243, 245, .8)), var(--blush-50) image-set(url("img/satin-blush.webp") type("image/webp"), url("img/satin-blush.jpg") type("image/jpeg")) center / cover no-repeat; } .bg-cocoa { background: radial-gradient(120% 90% at 15% 0%, #6A3E30 0%, var(--cocoa-800) 55%, #3C231B 100%); color: #F6E9E4; } .bg-cocoa h2, .bg-cocoa h3 { color: var(--ivory-50); } .grid { display: grid; gap: var(--s-5); } @media (min-width: 600px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--gap-lg { gap: var(--s-7); } } .stack > * + * { margin-top: var(--s-4); } .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } /* ---------- 5. Typographic accents ---------- */ .eyebrow { font-family: var(--font-caps); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--copper-ink); margin: 0 0 var(--s-3); } :lang(th) .eyebrow { font-family: var(--font-thai); letter-spacing: .02em; text-transform: none; font-weight: 500; font-size: .875rem; } .script { font-family: var(--font-script); font-weight: 400; color: var(--cocoa-500); font-size: 1.6em; line-height: 1.1; letter-spacing: 0; } .lede { font-size: var(--fs-lg); color: var(--text-soft); max-width: 60ch; } .muted { color: var(--text-soft); } .price { font-family: var(--font-display); font-weight: 600; color: var(--cocoa-500); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } /* Baht sign: Cormorant has no "฿" glyph -> wrap it: ฿1,150 */ .cur { font-family: var(--font-body); font-weight: 400; font-size: .78em; margin-right: .08em; vertical-align: .04em; } /* Thin rose-gold rule */ .rule { height: 1px; border: 0; background: var(--rg-rule); margin: var(--s-5) auto; max-width: 320px; } /* Ornament: line — crown — line */ .ornament { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-3) auto var(--s-5); max-width: 280px; } .ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: var(--rg-rule); } .ornament::before { background: linear-gradient(90deg, transparent, var(--rg-500) 40%, var(--rg-300)); } .ornament::after { background: linear-gradient(90deg, var(--rg-300), var(--rg-500) 60%, transparent); } .ornament > span { width: 26px; height: 26px; flex: none; background: var(--rg-metal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 16.5 4.6 8.2l4.3 3.9L12 5.6l3.1 6.5 4.3-3.9L21 16.5z'/%3E%3Crect x='3.2' y='18' width='17.6' height='2' rx='1'/%3E%3Ccircle cx='4.5' cy='6.6' r='1.4'/%3E%3Ccircle cx='12' cy='3.9' r='1.4'/%3E%3Ccircle cx='19.5' cy='6.6' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 16.5 4.6 8.2l4.3 3.9L12 5.6l3.1 6.5 4.3-3.9L21 16.5z'/%3E%3Crect x='3.2' y='18' width='17.6' height='2' rx='1'/%3E%3Ccircle cx='4.5' cy='6.6' r='1.4'/%3E%3Ccircle cx='12' cy='3.9' r='1.4'/%3E%3Ccircle cx='19.5' cy='6.6' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; } .ornament--dot > span { width: 7px; height: 7px; -webkit-mask: none; mask: none; transform: rotate(45deg); border-radius: 1px; } .ornament--left { margin-inline: 0; justify-content: flex-start; } .ornament--left::before { display: none; } /* Section header */ .section-head { text-align: center; max-width: 720px; margin: 0 auto var(--s-7); } .section-head .lede { margin-inline: auto; margin-bottom: 0; } .section-head h2 { margin-bottom: 0; } .section-head--left { text-align: left; margin-inline: 0; } .section-head--left .ornament { margin-inline: 0; justify-content: flex-start; } .section-head--left .ornament::before { display: none; } .section-head--left .lede { margin-inline: 0; } /* ---------- 6. Buttons ---------- */ .btn { --btn-h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: var(--btn-h); padding: 0 1.6em; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-btn); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; line-height: 1.1; border-radius: var(--radius-pill); border: 1px solid transparent; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease); cursor: pointer; white-space: nowrap; } :lang(th) .btn { font-family: var(--font-thai); letter-spacing: .02em; text-transform: none; font-size: var(--fs-base); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn svg { width: 1.25em; height: 1.25em; flex: none; } /* Primary: rose-gold metal, deep cocoa text (6:1 on darkest stop) */ .btn--gold { background: var(--rg-btn); color: var(--cocoa-900); border-color: rgba(166, 90, 56, .45); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -1px 0 rgba(147, 55, 26, .18) inset, 0 6px 18px rgba(147, 55, 26, .18); } .btn--gold:hover { background: var(--rg-btn-hover); color: var(--cocoa-900); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 26px rgba(147, 55, 26, .24); } /* Secondary: solid cocoa, ivory text (11:1) */ .btn--cocoa { background: var(--cocoa-700); color: var(--ivory-50); box-shadow: 0 6px 18px rgba(78, 46, 36, .22); } .btn--cocoa:hover { background: var(--cocoa-800); color: var(--ivory-50); } /* Ghost: outline on satin */ .btn--ghost { background: rgba(255, 252, 248, .55); color: var(--cocoa-700); border-color: var(--rg-500); } .btn--ghost:hover { background: var(--ivory-50); color: var(--copper); } .on-dark .btn--ghost, .bg-cocoa .btn--ghost { background: transparent; color: var(--ivory-50); border-color: var(--rg-300); } .btn--sm { --btn-h: 42px; padding: 0 1.15em; font-size: var(--fs-xs); } .btn--block { display: flex; width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); } .btn-row--stack > .btn { flex: 1 1 100%; } @media (min-width: 600px) { .btn-row--stack > .btn { flex: 0 1 auto; } } /* Text link with arrow ("See all gel prices →") */ /* inline-block (not inline-flex): the arrow is an inline ::after, so it follows the last word when the label wraps */ .link-arrow { display: inline-block; font-family: var(--font-caps); font-weight: 600; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--copper); padding-block: .35em; border-bottom: 1px solid var(--rg-500); } :lang(th) .link-arrow { font-family: var(--font-thai); letter-spacing: .02em; text-transform: none; font-size: var(--fs-sm); font-weight: 500; } .link-arrow::after { content: "\2192"; margin-left: .45em; position: relative; left: 0; font-family: var(--font-body); transition: left .2s var(--ease); } .link-arrow:hover::after { left: 3px; } /* ---------- 7. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(245, 231, 235, .88); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; border-image: var(--rg-rule) 1; } .site-header__inner { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; flex: none; margin-right: auto; } .brand img { height: 56px; width: auto; } @media (min-width: 960px) { .brand img { height: 64px; } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 252, 248, .6); color: var(--cocoa-700); } .nav-toggle svg { width: 20px; height: 20px; } .nav-toggle .icon-close { display: none; } .site-header.is-open .nav-toggle .icon-open { display: none; } .site-header.is-open .nav-toggle .icon-close { display: block; } .lang-switch { font-family: var(--font-caps); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-decoration: none; color: var(--cocoa-700); display: inline-flex; align-items: center; gap: .35em; min-height: 44px; padding-inline: .25em; } .lang-switch [aria-current], .lang-switch .is-current { color: var(--copper); } .lang-switch .sep { color: var(--rg-500); } .lang-switch .th { font-family: var(--font-thai); letter-spacing: 0; font-weight: 500; } .header-cta { display: none; } @media (min-width: 600px) { .header-cta { display: inline-flex; } } /* Navigation — mobile panel */ .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--ivory-100) url("img/satin-ivory.jpg") center / cover; background: var(--ivory-100) image-set(url("img/satin-ivory.webp") type("image/webp"), url("img/satin-ivory.jpg") type("image/jpeg")) center / cover; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: var(--s-5) var(--gutter) var(--s-6); max-height: calc(100vh - var(--header-h)); overflow-y: auto; display: none; } .site-header.is-open .nav { display: block; } .nav__quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-5); } .nav__list > li { border-bottom: 1px solid rgba(200, 138, 100, .25); } .nav__link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--cocoa-500); text-decoration: none; } :lang(th) .nav__link { font-family: var(--font-thai); font-weight: 400; font-size: 1.1rem; } .nav__link[aria-current="page"] { color: var(--copper); } @media (max-width: 959px) { .nav__link[aria-current="page"]::after { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--copper); } } .nav__sub { padding: 0 0 var(--s-3) var(--s-4); } .nav__sub a { display: flex; min-height: 44px; align-items: center; color: var(--text-soft); text-decoration: none; } .nav__sub a:hover { color: var(--copper); } .nav__caret { width: 12px; height: 12px; display: none; } /* Navigation — desktop inline */ @media (min-width: 960px) { .nav-toggle { display: none; } .nav { position: static; display: block; background: none; border: 0; box-shadow: none; padding: 0; max-height: none; overflow: visible; order: 0; } .nav__quick { display: none; } .nav__list { display: flex; align-items: center; gap: var(--s-1); } .nav__list > li { border: 0; position: relative; } .nav__link { min-height: 44px; padding: 0 .8em; font-family: var(--font-caps); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cocoa-700); gap: .4em; position: relative; } :lang(th) .nav__link { font-family: var(--font-thai); font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 400; } .nav__link::after { content: ""; position: absolute; left: .8em; right: .8em; bottom: 8px; height: 1px; background: var(--rg-rule); transform: scaleX(0); transition: transform .25s var(--ease); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__caret { display: block; } .nav__sub { position: absolute; top: 100%; left: 0; min-width: 240px; padding: var(--s-3); background: var(--ivory-50); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; } .has-sub:hover .nav__sub, .has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; } .nav__sub a { padding: 0 var(--s-3); border-radius: var(--radius-sm); min-height: 40px; font-size: var(--fs-sm); } .nav__sub a:hover { background: var(--blush-100); } } /* ---------- 8. Hero ---------- */ .hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(rgba(251, 243, 245, 0) calc(100% - 110px), var(--seam)), var(--blush-200) url("img/satin-blush.jpg") center / cover no-repeat; background: linear-gradient(rgba(251, 243, 245, 0) calc(100% - 110px), var(--seam)), var(--blush-200) image-set(url("img/satin-blush.webp") type("image/webp"), url("img/satin-blush.jpg") type("image/jpeg")) center / cover no-repeat; padding: var(--s-8) 0 var(--s-7); } @media (min-width: 960px) { .hero { padding: var(--s-9) 0; min-height: min(760px, calc(100vh - var(--header-h))); display: flex; align-items: center; } } /* Rose-gold corner decorations: jpg crops faded into the satin */ .deco { position: absolute; z-index: -1; pointer-events: none; user-select: none; height: auto; max-width: none; } .deco--roses { top: 0; left: 0; width: clamp(150px, 40vw, 440px); -webkit-mask-image: radial-gradient(125% 100% at 0 0, #000 34%, rgba(0, 0, 0, .55) 52%, transparent 68%); mask-image: radial-gradient(125% 100% at 0 0, #000 34%, rgba(0, 0, 0, .55) 52%, transparent 68%); opacity: .96; } .deco--leaves { right: 0; bottom: 0; width: clamp(130px, 28vw, 340px); -webkit-mask-image: radial-gradient(100% 100% at 100% 100%, #000 38%, rgba(0, 0, 0, .5) 56%, transparent 74%); mask-image: radial-gradient(100% 100% at 100% 100%, #000 38%, rgba(0, 0, 0, .5) 56%, transparent 74%); } /* cream/white-gold roses (price menus) for ivory sections */ .deco--roses-cream { top: 0; left: 0; width: clamp(150px, 36vw, 400px); -webkit-mask-image: radial-gradient(110% 100% at 0 0, #000 34%, rgba(0, 0, 0, .5) 52%, transparent 66%); mask-image: radial-gradient(110% 100% at 0 0, #000 34%, rgba(0, 0, 0, .5) 52%, transparent 66%); } .deco--leaf-cream { right: 0; bottom: 0; width: clamp(90px, 18vw, 200px); -webkit-mask-image: radial-gradient(110% 100% at 100% 100%, #000 40%, transparent 78%); mask-image: radial-gradient(110% 100% at 100% 100%, #000 40%, transparent 78%); } .deco--flip { transform: scaleX(-1); left: auto; right: 0; } @media (max-width: 599px) { .deco--roses { opacity: .7; } .deco--leaves { opacity: .75; } } .hero__grid { display: grid; gap: var(--s-7); align-items: center; position: relative; } @media (min-width: 960px) { .hero__grid { grid-template-columns: 1.2fr .8fr; gap: var(--s-7); } } .hero__content { text-align: center; padding-top: clamp(56px, 18vw, 120px); } @media (min-width: 600px) { .hero__content { padding-top: var(--s-6); } } @media (min-width: 960px) { .hero__content { text-align: left; padding-top: 0; padding-left: clamp(0px, calc(250px - (100vw - var(--container)) / 2), 130px); } /* clear the rose corner */ .deco--roses { width: clamp(300px, 28vw, 420px); } } .hero__logo { width: min(260px, 70%); margin: 0 auto var(--s-5); } @media (min-width: 960px) { .hero__logo { margin-left: 0; } } .hero h1 { margin-bottom: var(--s-4); } .hero h1 em { font-style: italic; font-weight: 500; color: var(--copper); } .hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .35em 1em; font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--s-5); } .hero__meta li { display: inline-flex; align-items: center; gap: .45em; } .hero__meta li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--rg-500); margin-right: .55em; } @media (min-width: 960px) { .hero__meta { justify-content: flex-start; } } .hero__prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-5); } @media (min-width: 600px) { .hero__prices { max-width: 520px; margin-inline: auto; gap: var(--s-3); } } @media (min-width: 960px) { .hero__prices { margin-inline: 0; } } .price-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-3) var(--s-2); border-radius: var(--radius); background: rgba(255, 252, 248, .7); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } a.price-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); } .price-chip__label { font-family: var(--font-caps); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-ink); line-height: 1.3; } :lang(th) .price-chip__label { font-family: var(--font-thai); letter-spacing: 0; text-transform: none; font-size: .8125rem; font-weight: 500; } .price-chip__value { font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); color: var(--cocoa-500); line-height: 1.15; } .price-chip__value small { font-family: var(--font-body); font-size: .65em; font-weight: 400; color: var(--text-soft); margin-right: .15em; } .hero__ctas { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); } @media (min-width: 600px) { .hero__ctas { grid-template-columns: 1fr 1fr; max-width: 520px; margin-inline: auto; } } @media (min-width: 960px) { .hero__ctas { margin-inline: 0; } } .hero__address { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; } .hero__address a { color: var(--cocoa-500); } /* A8-07: >= 44px tap area for the hero "Directions" link. It stays inline (Thai text still wraps the same way): vertical padding on an inline box does not move the lines, the negative side margins cancel the side padding */ .hero__address a { padding: 12px 6px; margin: 0 -6px; } /* Arched photo frame (desktop hero, about blocks) */ .arch { position: relative; margin: 0 auto; width: min(100%, 400px); aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); padding: 8px; background: var(--rg-metal); box-shadow: var(--shadow-lg); } .arch img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px calc(var(--radius-lg) - 6px) calc(var(--radius-lg) - 6px); } .arch__caption { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); background: var(--ivory-50); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .45em 1.2em; font-family: var(--font-script); font-size: 1.35rem; color: var(--cocoa-500); white-space: nowrap; box-shadow: var(--shadow-sm); } .hero__media { display: none; } @media (min-width: 960px) { .hero__media { display: block; } } /* Reduced photo strip under the hero (mobile) */ .photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .photo-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); } @media (min-width: 960px) { .photo-strip--mobile { display: none; } } /* ---------- 9. Breadcrumb ---------- */ .breadcrumb { font-size: var(--fs-xs); color: var(--text-soft); padding-block: var(--s-4) 0; } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4em; } .breadcrumb li + li::before { content: "\203A"; margin-right: .4em; color: var(--rg-500); } .breadcrumb a { color: var(--text-soft); } .breadcrumb [aria-current] { color: var(--cocoa-500); } /* Page hero (service pages, prices) */ .page-hero { position: relative; overflow: hidden; isolation: isolate; padding: var(--s-6) 0 var(--s-7); text-align: center; } .page-hero .lede { margin-inline: auto; } .page-hero .breadcrumb { padding-top: 0; margin-bottom: var(--s-6); display: flex; justify-content: center; } @media (min-width: 960px) { .page-hero { padding: var(--s-7) 0 var(--s-8); } } /* ---------- 10. Service cards ---------- */ .cards { display: grid; gap: var(--s-5); grid-template-columns: 1fr; } @media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .cards { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .cards--5 { grid-template-columns: repeat(6, 1fr); } .cards--5 > .card { grid-column: span 2; } .cards--5 > .card:nth-child(n+4) { grid-column: span 3; } } .card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: 0; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .card:hover .card__media img { transform: scale(1.04); } .card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--rg-metal); } .card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; } .card__title { margin: 0; font-size: var(--fs-h3); } .card__title a { color: inherit; text-decoration: none; } .card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */ .card__text { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); } .card__from { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); } .card__from .price { font-size: 1.6rem; margin-left: .2em; } .card__foot { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .card__foot .link-arrow { position: relative; z-index: 2; } /* Price badge on photos (as on the lash menu: "1,150.-") */ .badge-price { position: absolute; right: 10px; bottom: 10px; z-index: 1; background: rgba(78, 46, 36, .92); color: var(--ivory-50); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1; font-variant-numeric: lining-nums; padding: .45em .8em; border-radius: var(--radius-pill); box-shadow: 0 2px 10px rgba(0, 0, 0, .2); } /* Lash style grid (menu-like tiles) */ .style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } @media (min-width: 600px) { .style-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } } @media (min-width: 1200px) { .style-grid { grid-template-columns: repeat(4, 1fr); } } .style-tile { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; } .style-tile__img { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; box-shadow: var(--shadow-sm); } .style-tile__img img { width: 100%; height: 100%; object-fit: cover; } .style-tile__label { text-align: center; background: rgba(255, 252, 248, .85); border: 1px solid var(--rg-400); border-radius: var(--radius); padding: var(--s-2) var(--s-3); } .style-tile__label strong { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--cocoa-500); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; } .style-tile__label span { font-size: var(--fs-xs); color: var(--text-soft); } /* ---------- 11. Facts ("Why PAYA" — facts only) ---------- */ .facts { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } @media (min-width: 600px) { .facts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .facts { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } } .fact { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .fact__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--rg-btn); color: var(--cocoa-800); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); } .fact__icon svg { width: 22px; height: 22px; } .fact h3 { font-size: 1.3rem; margin-bottom: var(--s-1); } .fact p { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); } /* ---------- 12. Price tables — menu style ---------- */ .menu { position: relative; isolation: isolate; overflow: hidden; font-variant-numeric: lining-nums; background: linear-gradient(rgba(255, 252, 248, .5), rgba(255, 252, 248, .5)), var(--ivory-100) url("img/satin-ivory.jpg") center / cover; background: linear-gradient(rgba(255, 252, 248, .5), rgba(255, 252, 248, .5)), var(--ivory-100) image-set(url("img/satin-ivory.webp") type("image/webp"), url("img/satin-ivory.jpg") type("image/jpeg")) center / cover; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--s-6) var(--s-5); } @media (min-width: 600px) { .menu { padding: var(--s-7) var(--s-7); } } .menu--columns { display: grid; gap: var(--s-7); } @media (min-width: 960px) { .menu--columns { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } .menu--columns::before { content: ""; position: absolute; top: var(--s-7); bottom: var(--s-7); left: 50%; width: 1px; background: linear-gradient(transparent, var(--cocoa-300), transparent); opacity: .6; } } .menu__group + .menu__group { margin-top: var(--s-7); } .menu--columns .menu__group + .menu__group { margin-top: 0; } .menu__col > .menu__group + .menu__group { margin-top: var(--s-7); } .menu__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cocoa-800); font-size: clamp(1.45rem, 1.25rem + .8vw, 1.9rem); text-align: center; margin: 0 auto var(--s-4); padding-bottom: var(--s-2); position: relative; width: fit-content; min-width: 60%; } :lang(th) .menu__title { text-transform: none; font-family: var(--font-thai); font-weight: 500; letter-spacing: 0; } .menu__title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--cocoa-500) 12%, #B07858 50%, var(--cocoa-500) 88%, transparent); } .menu__note { text-align: center; font-size: var(--fs-xs); color: var(--text-soft); margin: calc(-1 * var(--s-2)) 0 var(--s-4); } /* Rows: name ........ price (dotted leader via flex ::after) */ .price-list { margin: 0; padding: 0; list-style: none; } .price-row { display: flex; align-items: baseline; gap: 0; padding: .42em 0; } .price-row__name { order: 1; flex: 0 1 auto; color: var(--cocoa-800); font-size: var(--fs-base); line-height: 1.35; } .price-row__name small { display: block; color: var(--text-soft); font-size: var(--fs-xs); } .price-row::after { content: ""; order: 2; flex: 1 1 24px; min-width: 24px; margin: 0 .55em; border-bottom: 2px dotted rgba(124, 74, 56, .5); transform: translateY(-.3em); } .price-row__price { order: 3; flex: none; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--cocoa-800); font-variant-numeric: lining-nums tabular-nums; } .price-row__price .cur { color: var(--cocoa-500); } .price-row--addon .price-row__price { color: var(--cocoa-500); } /* Same look for a real (Offer markup, CMS output) */ .price-table { width: 100%; } .price-table caption { caption-side: top; } .price-table th, .price-table td { padding: .5em 0; text-align: left; vertical-align: baseline; font-weight: 400; border-bottom: 1px dotted rgba(124, 74, 56, .35); } .price-table td:last-child, .price-table th:last-child { text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; white-space: nowrap; padding-left: var(--s-4); } .price-table thead th { font-family: var(--font-caps); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--copper-ink); border-bottom: 1px solid var(--rg-500); } /* Payment chips */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .85em; border-radius: var(--radius-pill); border: 1px solid var(--line); background: rgba(255, 252, 248, .6); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .04em; color: var(--cocoa-700); } .bg-cocoa .chip { background: rgba(255, 255, 255, .06); border-color: rgba(230, 183, 154, .4); color: #F6E9E4; } /* ---------- 13. Gallery ---------- */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 600px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (min-width: 960px) { .gallery { grid-template-columns: repeat(4, 1fr); } .gallery__item--wide { grid-column: span 2; } } .gallery__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--blush-300); } .gallery__item a { display: block; } .gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--ease), filter .3s; } .gallery__item:hover img { transform: scale(1.05); } .gallery__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-5) var(--s-3) var(--s-2); background: linear-gradient(transparent, rgba(62, 34, 25, .72)); color: var(--ivory-50); font-size: var(--fs-xs); letter-spacing: .03em; } /* Minimal lightbox (optional JS adds .lightbox[open]) */ .lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1000px); } .lightbox::backdrop { background: rgba(40, 22, 16, .86); } .lightbox img { max-height: 86vh; width: auto; margin: auto; border-radius: var(--radius); } .lightbox__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ivory-50); color: var(--cocoa-800); font-size: 1.4rem; line-height: 1; } /* ---------- 14. Visit / how to find us ---------- */ .visit { display: grid; gap: var(--s-6); align-items: start; } @media (min-width: 960px) { .visit { grid-template-columns: 1fr 1fr; gap: var(--s-8); } } .visit__photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 6px solid var(--ivory-50); outline: 1px solid var(--line); } .visit__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .visit__photo figcaption { padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); color: var(--text-soft); background: var(--ivory-50); } .steps { counter-reset: step; display: grid; gap: var(--s-4); margin-bottom: var(--s-5); } .steps li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; gap: var(--s-3); align-items: start; } .steps li::before { content: counter(step); font-variant-numeric: lining-nums; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--cocoa-800); background: var(--rg-btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); } .steps strong { display: block; color: var(--cocoa-500); } .steps p { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); } .info-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); } .info-list > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid rgba(200, 138, 100, .25); } .info-list dt { font-family: var(--font-caps); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-ink); padding-top: .2em; } :lang(th) .info-list dt { font-family: var(--font-thai); letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); font-weight: 500; } .info-list dd { margin: 0; } /* Map loaded on click: button with the entrance photo as poster */ .map-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--blush-300); box-shadow: var(--shadow); } .map-facade img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.82); transition: filter .3s; } .map-facade:hover img { filter: saturate(1) brightness(.9); } .map-facade__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .map-frame { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--radius-lg); } /* ---------- 15. Reviews CTA (no fake ratings) ---------- */ .reviews-cta { text-align: center; padding: var(--s-6) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .quote { margin: 0; padding: var(--s-5); background: var(--surface); border-left: 3px solid var(--rg-500); border-radius: 0 var(--radius) var(--radius) 0; } .quote p { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--cocoa-700); } .quote footer { font-size: var(--fs-xs); color: var(--text-soft); } /* ---------- 16. FAQ accordion (details/summary) ---------- */ .faq { max-width: var(--container-narrow); margin-inline: auto; } .faq__item { border-bottom: 1px solid rgba(200, 138, 100, .35); } .faq__item:first-child { border-top: 1px solid rgba(200, 138, 100, .35); } .faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 60px; padding: var(--s-3) 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--cocoa-500); line-height: 1.3; } :lang(th) .faq__item summary { font-family: var(--font-thai); font-weight: 400; font-size: 1.1rem; line-height: 1.5; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rg-500); background: linear-gradient(var(--copper), var(--copper)) center / 11px 1.5px no-repeat, linear-gradient(var(--copper), var(--copper)) center / 1.5px 11px no-repeat; transition: transform .25s var(--ease); } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item summary:hover { color: var(--copper); } .faq__answer { padding: 0 0 var(--s-5); color: var(--text); max-width: 65ch; } .faq__answer p:last-child { margin-bottom: 0; } /* ---------- 17. CTA band ---------- */ .cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; } .cta-band .btn-row { justify-content: center; } /* ---------- 18. Footer ---------- */ /* Contact strip in the style of the printed menus (metallic gold band with phone / LINE / Instagram) */ .footer-strip { background: var(--rg-btn); color: var(--cocoa-900); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(147, 55, 26, .2); } .footer-strip__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-6); padding-block: var(--s-2); } .footer-strip a { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; color: var(--cocoa-900); text-decoration: none; font-weight: 500; font-size: .9375rem; letter-spacing: .03em; } .footer-strip a:hover { color: var(--copper); } .footer-strip svg { width: 20px; height: 20px; flex: none; } @media (min-width: 960px) { .footer-strip__inner { gap: var(--s-8); } } /* Footer: light ivory satin with cocoa text, like the card and the menus (no dark block) */ .site-footer { position: relative; background: linear-gradient(rgba(255, 252, 248, .4), rgba(255, 252, 248, .4)), var(--ivory-100) url("img/satin-ivory.jpg") center / cover no-repeat; background: linear-gradient(rgba(255, 252, 248, .4), rgba(255, 252, 248, .4)), var(--ivory-100) image-set(url("img/satin-ivory.webp") type("image/webp"), url("img/satin-ivory.jpg") type("image/jpeg")) center / cover no-repeat; color: var(--text); font-size: var(--fs-sm); } .site-footer a { color: var(--cocoa-500); text-decoration-color: var(--rg-500); } .site-footer a:hover { color: var(--copper); } .footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); padding-block: var(--s-7) var(--s-6); } .footer__brand { grid-column: 1 / -1; } @media (min-width: 960px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-7); padding-block: var(--s-8) var(--s-7); } .footer__brand { grid-column: auto; } } .footer__brand img { width: 200px; height: auto; margin-bottom: var(--s-4); } .footer__title { font-family: var(--font-caps); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--copper-ink); margin: 0 0 var(--s-2); } :lang(th) .footer__title { font-family: var(--font-thai); letter-spacing: .02em; text-transform: none; font-size: var(--fs-sm); font-weight: 500; } .footer__list a { text-decoration: none; display: flex; min-height: 44px; align-items: center; line-height: 1.3; } .footer__list a:hover { text-decoration: underline; } .footer__nap { line-height: 1.7; margin-bottom: var(--s-3); } .footer__nap strong { color: var(--cocoa-500); font-weight: 500; } .footer__legal { border-top: 1px solid rgba(200, 138, 100, .35); padding-block: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); justify-content: space-between; font-size: var(--fs-xs); color: var(--text-soft); } .footer__legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); list-style: none; padding: 0; margin: 0; } .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; } /* ---------- 19. Sticky mobile action bar ---------- */ .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(78, 46, 36, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 24px rgba(62, 34, 25, .22); transition: transform .3s var(--ease); } .action-bar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rg-metal); } .action-bar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--bar-h); padding: 6px 4px; text-decoration: none; color: #F6E9E4; font-size: .8125rem; font-weight: 500; letter-spacing: .03em; } .action-bar__btn + .action-bar__btn { border-left: 1px solid rgba(230, 183, 154, .18); } .action-bar__btn:hover, .action-bar__btn:active { color: var(--ivory-50); background: rgba(255, 255, 255, .06); } .action-bar__btn svg { width: 24px; height: 24px; color: var(--rg-300); } .action-bar__btn--primary { background: var(--rg-btn); color: var(--cocoa-900); } .action-bar__btn--primary svg { color: var(--cocoa-800); } .action-bar__btn--primary:hover, .action-bar__btn--primary:active { background: var(--rg-btn-hover); color: var(--cocoa-900); } :lang(th) .action-bar__btn { font-family: var(--font-thai); font-size: .875rem; letter-spacing: 0; } /* Pages with [data-hero] ship the bar with .is-hidden; site.js shows it as soon as the hero buttons leave the screen (and at once if IntersectionObserver is missing). A