/* ============================================================ Anasiri Paklok — design system The structure and the variable names come from an earlier sheet of ours; the palette, the display typography and the per-language blocks at the foot are this site's own. Palette taken from the project itself — Sansiri's "European Cottage" houses are white render with slate roofs and sage-green trim, set in garden, so the sheet runs forest-green rather than Zenithy's gold: --charcoal #16211c pine, used for the nav pill and footer --espresso #2b4034 forest band --gold #96633c brick / terracotta, readable on cream --gold-soft #d9ab84 the same brick, readable on forest Typography: back to the Anchan pairing (Cormorant Garamond display + Jost text) — Zenithy's Poppins block does not suit a cottage-vernacular project. Thai and Chinese have no Cormorant or Jost coverage, so build.py adds a per-language --serif/--sans override in ; see the :lang blocks at the foot of this file. ============================================================ */ :root { --charcoal: #16211c; --espresso: #2b4034; --cream: #f6f3ec; --cream-2: #e3ddcd; --ink: #22302a; --ink-soft: #5f6d63; --gold: #96633c; /* readable copper on cream */ --gold-soft: #d9ab84; /* copper on plum */ --gold-bright: #ecc9a6; --sand: #c9bca8; --hair: rgba(34, 48, 42, 0.12); --hair-light: rgba(246, 243, 236, 0.16); --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --maxw: 1240px; --pad: clamp(1.25rem, 5vw, 4rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); font-weight: 300; color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Film-grain overlay (fixed, non-interactive) */ body::after { content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--charcoal); color: var(--cream); padding: 0.75rem 1.25rem; border-radius: 0 0 12px 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------- Typography ---------- */ /* Cormorant is a light display face; the sizes below are the Anchan ones. The Thai and SC fallbacks are much heavier at the same size, so the per-language block at the foot of this sheet trims them down. */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.06; letter-spacing: -0.01em; } .display { font-size: clamp(2.9rem, 8vw, 6.5rem); font-weight: 500; } h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); } h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); } p { font-weight: 300; } em { font-style: italic; color: var(--gold); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.66rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold); padding: 0.4rem 0.9rem; border: 1px solid var(--hair); border-radius: 999px; background: rgba(150, 99, 60, 0.05); } .eyebrow.on-dark { color: var(--gold-soft); border-color: var(--hair-light); background: rgba(217, 171, 132, 0.08); } .eyebrow svg { width: 13px; height: 13px; flex: none; } .lede { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--ink-soft); max-width: 46ch; } .on-dark .lede, .lede.on-dark { color: rgba(246, 243, 236, 0.72); } /* ---------- Layout ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } section { padding-block: clamp(5rem, 12vw, 10rem); position: relative; } .section-dark { background: var(--charcoal); color: var(--cream); } .section-espresso { background: var(--espresso); color: var(--cream); } .section-cream2 { background: var(--cream-2); } .section-head { max-width: 62rem; } .section-head h2 { margin-top: 1.4rem; } .section-head .lede { margin-top: 1.4rem; } /* The split columns are not .section-head, so they inherited no spacing between the eyebrow, the h2 and the lede that follows it. */ .split h2 { margin-top: 1.4rem; } .split h2 + .lede { margin-top: 1.4rem; } /* ---------- Buttons (island / button-in-button) ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.85rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.7rem 0.75rem 0.7rem 1.5rem; border-radius: 999px; background: var(--gold-soft); color: #16211c; border: 1px solid transparent; cursor: pointer; transition: background 0.5s var(--ease), transform 0.4s var(--ease); will-change: transform; } .btn .ic { width: 2.1rem; height: 2.1rem; border-radius: 999px; background: rgba(22, 33, 28, 0.14); display: grid; place-items: center; transition: transform 0.5s var(--ease), background 0.5s var(--ease); } .btn .ic svg { width: 15px; height: 15px; } .btn:hover { background: var(--gold-bright); } .btn:hover .ic { transform: translate(3px, -3px); background: rgba(22, 33, 28, 0.22); } .btn:active { transform: scale(0.975); } .btn-ghost { background: transparent; color: inherit; border: 1px solid var(--hair); } .btn-ghost .ic { background: rgba(34, 48, 42, 0.08); } .section-dark .btn-ghost, .hero .btn-ghost { border-color: var(--hair-light); color: var(--cream); } .section-dark .btn-ghost .ic, .hero .btn-ghost .ic { background: rgba(246, 243, 236, 0.12); } .btn-ghost:hover { background: rgba(150, 99, 60, 0.08); } .textlink { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); } .textlink svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); } .textlink:hover svg { transform: translateX(4px); } /* ---------- Navigation (floating glass pill) ---------- */ .nav-outer { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; justify-content: center; padding-top: 1.4rem; pointer-events: none; } .nav { pointer-events: auto; display: flex; align-items: center; gap: 2.4rem; padding: 0.6rem 0.6rem 0.6rem 1.6rem; border-radius: 999px; /* Solid by default: the bar sits over cream on every interior page, and a half-transparent dark pill turns muddy grey there. */ background: rgba(22, 33, 28, 0.94); border: 1px solid rgba(246, 243, 236, 0.14); box-shadow: 0 16px 36px -18px rgba(22, 33, 28, 0.55); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease); max-width: calc(100vw - 2rem); } /* Only while parked over the home hero footage does it float clear. */ .nav.is-clear { background: rgba(22, 33, 28, 0.42); box-shadow: none; } .nav-logo img { height: 34px; width: 34px; display: block; } .nav-links { display: flex; align-items: center; gap: 1.9rem; } .nav-links a { font-family: var(--sans); font-size: 0.74rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.13em; color: rgba(246, 243, 236, 0.82); position: relative; padding: 0.3rem 0; transition: color 0.4s var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--gold-soft); transition: width 0.4s var(--ease); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cream); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; } .nav .btn { padding: 0.55rem 0.6rem 0.55rem 1.15rem; font-size: 0.7rem; } .nav .btn .ic { width: 1.8rem; height: 1.8rem; } .nav-toggle { display: none; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: rgba(246, 243, 236, 0.1); border: none; cursor: pointer; position: relative; flex: none; } .nav-toggle span { position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: var(--cream); transition: transform 0.5s var(--ease), opacity 0.3s var(--ease); } .nav-toggle span:nth-child(1) { transform: translate(-50%, -5px); } .nav-toggle span:nth-child(2) { transform: translate(-50%, 0); } .nav-toggle span:nth-child(3) { transform: translate(-50%, 5px); } /* Mobile overlay menu */ .nav-overlay { position: fixed; inset: 0; z-index: 99; background: rgba(15, 26, 21, 0.9); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: var(--pad); opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease); } .nav-overlay a { font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 3.6rem); color: var(--cream); opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.3s var(--ease); } .nav-overlay a:hover { color: var(--gold-soft); } .nav-overlay .ov-cta { margin-top: 1.6rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: #16211c; } body.menu-open { overflow: hidden; } body.menu-open .nav-overlay { opacity: 1; visibility: visible; } body.menu-open .nav-overlay a { opacity: 1; transform: translateY(0); } body.menu-open .nav-overlay a:nth-child(1) { transition-delay: 0.08s; } body.menu-open .nav-overlay a:nth-child(2) { transition-delay: 0.14s; } body.menu-open .nav-overlay a:nth-child(3) { transition-delay: 0.2s; } body.menu-open .nav-overlay a:nth-child(4) { transition-delay: 0.26s; } body.menu-open .nav-overlay a:nth-child(5) { transition-delay: 0.32s; } body.menu-open .nav-toggle span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); } body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; } body.menu-open .nav-toggle span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; color: var(--cream); overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; background: var(--charcoal) center/cover no-repeat; } .hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); } .hero-media video.ready { opacity: 1; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11, 20, 16,0.72) 0%, rgba(11, 20, 16,0.42) 45%, rgba(11, 20, 16,0.12) 75%, rgba(11, 20, 16,0.05) 100%), linear-gradient(180deg, rgba(11, 20, 16,0.62) 0%, rgba(11, 20, 16,0.42) 40%, rgba(11, 20, 16,0.92) 100%); } .hero-media { filter: brightness(0.8); } .hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3.5rem, 9vw, 7rem); padding-top: 9rem; } .hero .display { max-width: 16ch; margin-top: 1.6rem; } .hero .lede { margin-top: 1.6rem; color: rgba(246, 243, 236, 0.78); } .hero-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.9rem; } .hero-meta { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 2.5rem; border-top: 1px solid var(--hair-light); padding-top: 1.6rem; } .hero-meta div { min-width: 7rem; } .hero-meta dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold-soft); } .hero-meta dd { font-family: var(--serif); font-size: 1.5rem; margin-top: 0.3rem; } .scroll-cue { position: absolute; right: var(--pad); bottom: clamp(3.5rem, 9vw, 7rem); z-index: 2; writing-mode: vertical-rl; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(246, 243, 236,0.6); } /* ---------- Pillars ---------- */ .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 4rem; } .pillar { padding: 2rem 1.6rem; border-top: 1px solid var(--hair); } .section-dark .pillar { border-top-color: var(--hair-light); } .pillar .ic-line { width: 30px; height: 30px; color: var(--gold); } .section-dark .pillar .ic-line { color: var(--gold-soft); } .pillar h3 { margin: 1.2rem 0 0.6rem; font-size: 1.35rem; } .pillar p { font-size: 0.95rem; color: var(--ink-soft); } .section-dark .pillar p { color: rgba(246, 243, 236,0.66); } /* ---------- Double-bezel project cards ---------- */ .grid-projects { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem; margin-top: 3.5rem; } .bezel { background: rgba(34, 48, 42, 0.045); border: 1px solid var(--hair); padding: 0.5rem; border-radius: 30px; transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease); } .section-dark .bezel, .section-espresso .bezel { background: rgba(246, 243, 236,0.05); border-color: var(--hair-light); } .bezel-inner { border-radius: 22px; overflow: hidden; position: relative; background: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,0.5); } .card-proj { grid-column: span 4; } .card-proj.feature { grid-column: span 8; } .card-proj.wide { grid-column: span 6; } /* Balanced 2-column grid (4-card collections) with equal-height cards */ .grid-projects.grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-projects.grid-2 .card-proj { grid-column: auto; } .grid-2 .card-proj > a, .grid-2 .bezel, .grid-2 .bezel-inner { height: 100%; } .grid-2 .bezel-inner { display: flex; flex-direction: column; } .grid-2 .card-body { flex: 1; display: flex; flex-direction: column; } .grid-2 .card-foot { margin-top: auto; } @media (max-width: 768px) { .grid-projects.grid-2 { grid-template-columns: 1fr; } } .card-proj a { display: block; height: 100%; } .bezel:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(22, 33, 28,0.4); } .card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; } .card-proj.feature .card-media { aspect-ratio: 16/10; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .bezel:hover .card-media img { transform: scale(1.05); } .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15, 26, 21,0.55) 100%); } .status-tag { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(217, 171, 132, 0.92); color: #16211c; backdrop-filter: blur(4px); } .status-tag.sold { background: rgba(22, 33, 28,0.66); color: rgba(246, 243, 236,0.9); } .card-body { padding: 1.5rem 1.4rem 1.7rem; } .bezel-inner .card-body { color: var(--ink); } .card-loc { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); display: flex; align-items: center; gap: 0.45rem; } .card-loc svg { width: 13px; height: 13px; flex: none; } .pillar .ic-line svg, .stat .ic-line svg { width: 100%; height: 100%; } .footer h4 + .ic-line { display: none; } .card-body h3 { margin: 0.7rem 0 0.7rem; } .card-body p { font-size: 0.92rem; color: var(--ink-soft); } .card-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; } .chip { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); border: 1px solid var(--hair); border-radius: 999px; padding: 0.3rem 0.7rem; } .card-foot { margin-top: 1.3rem; display: flex; align-items: center; justify-content: space-between; } /* ---------- Split / editorial ---------- */ .split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .split.reverse .split-media { order: -1; } .split-media .bezel { padding: 0.6rem; } /* height:auto matters: the carries width/height attributes for CLS, and a specified height makes the browser ignore aspect-ratio entirely — the portrait was being stretched to the full column height and side-cropped. */ .split-media img { border-radius: 20px; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; } .stat-row { display: flex; gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 2.4rem; flex-wrap: wrap; } .stat { min-width: 0; } .stat span { display: block; max-width: 14ch; } .stat b { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; display: block; color: var(--gold); } .section-dark .stat b { color: var(--gold-soft); } .stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); } .section-dark .stat span { color: rgba(246, 243, 236,0.6); } /* ---------- Gallery grid ---------- */ .gallery-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 3rem; } /* Six pictures into an auto-fill grid gave 4 + 2 on a wide screen, which reads as a row that ran out. Three columns makes it two full rows. */ @media (min-width: 1001px) { .gallery-strip { grid-template-columns: repeat(3, 1fr); } } .gallery-strip figure { min-width: 0; } .gallery-strip img { border-radius: 18px; aspect-ratio: 3/4; object-fit: cover; width: 100%; height: 100%; } @media (max-width: 560px) { .gallery-strip { grid-template-columns: repeat(2, 1fr); } } .gallery-subhead { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--ink); margin-top: 3rem; } /* The inherited sheet only ever put this subhead on cream. On a dark band it fell back to --ink and was invisible — the same defect gotchas.md records for .section-espresso body copy. */ .section-dark .gallery-subhead, .section-espresso .gallery-subhead, .gallery-subhead.on-dark { color: var(--cream); } .gallery-strip.section-gal { margin-top: 1.1rem; } /* two small sections side by side */ .gallery-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; margin-top: 3rem; } .gallery-pair .gallery-subhead { margin-top: 0; } .gallery-strip.fill { grid-template-columns: 1fr; } @media (max-width: 768px) { .gallery-pair { grid-template-columns: 1fr; gap: 0; } .gallery-pair > div:last-child .gallery-subhead { margin-top: 2.4rem; } } /* ---------- Enquiry form ---------- */ .enquiry-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .form-card { } .enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .enquiry-form .full { grid-column: 1 / -1; } .field label { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(246, 243, 236,0.6); margin-bottom: 0.5rem; } .field input, .field select, .field textarea { width: 100%; padding: 0.9rem 1rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 300; color: var(--cream); background: rgba(246, 243, 236,0.06); border: 1px solid rgba(246, 243, 236,0.16); border-radius: 12px; transition: border-color 0.4s var(--ease), background 0.4s var(--ease); } .field textarea { min-height: 120px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: rgba(246, 243, 236,0.4); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-soft); background: rgba(246, 243, 236,0.1); } .field select option { color: #111; } .hp { position: absolute; left: -9999px; } .form-note { grid-column: 1/-1; font-size: 0.85rem; min-height: 1.2em; color: rgba(246, 243, 236,0.7); } .form-note.success { color: var(--gold-bright); } .form-note.error { color: #e98b7a; } .enquiry-form .btn { grid-column: 1/-1; justify-self: start; } /* ---------- Footer ---------- */ .footer { background: var(--charcoal); color: rgba(246, 243, 236,0.7); padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } .footer-logo { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; } .footer-logo img { height: 30px; width: auto; } /* Anchan shipped a wordmark SVG here. Zenithy publishes their wordmark only as a drop-shadowed PNG lockup, so the mark is the traced SVG and the word is set in the page font — which is Poppins, the same face Zenithy use. */ .footer-wordmark { font-family: var(--serif); font-size: 1.32rem; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); } .footer h4 { font-family: var(--sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold-soft); font-weight: 500; margin-bottom: 1.2rem; } .footer a { color: rgba(246, 243, 236,0.7); transition: color 0.3s var(--ease); display: block; padding: 0.3rem 0; font-size: 0.95rem; } .footer a:hover { color: var(--cream); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid var(--hair-light); font-size: 0.8rem; letter-spacing: 0.04em; } /* ---------- Breadcrumb ---------- */ .crumb { padding-top: 8rem; } .crumb ol { list-style: none; display: flex; gap: 0.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); } .crumb a { color: var(--gold); } /* ---------- Page hero (interior pages) ---------- */ .page-hero { padding-top: 11rem; padding-bottom: clamp(3rem, 7vw, 5rem); } .page-hero .display { font-size: clamp(2.6rem, 7vw, 5rem); margin-top: 1.4rem; } /* Photo-backed section banner. The scrim is what keeps the type legible over renders that run from near-white sky to dark foliage. */ .page-hero.has-bg { position: relative; isolation: isolate; overflow: hidden; padding-top: 12.5rem; padding-bottom: clamp(4rem, 8vw, 6.5rem); } .page-hero.has-bg > .wrap { position: relative; z-index: 1; } .page-hero-media { position: absolute; inset: 0; z-index: 0; background: var(--charcoal) center/cover no-repeat; } /* Two-axis scrim, same logic as the home hero: the horizontal pass buys contrast under the left-aligned type, the vertical pass seats the band against the nav above and the section below. */ .page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 20, 16,0.82) 0%, rgba(11, 20, 16,0.58) 45%, rgba(11, 20, 16,0.24) 75%, rgba(11, 20, 16,0.14) 100%), linear-gradient(180deg, rgba(11, 20, 16,0.74) 0%, rgba(11, 20, 16,0.44) 40%, rgba(11, 20, 16,0.86) 100%); } /* Renders run bright behind the type, so lift the body copy off the image. */ .page-hero.has-bg .lede { color: rgba(246, 243, 236, 0.93); } .page-hero.has-bg .chip { color: rgba(246, 243, 236, 0.92); border-color: rgba(246, 243, 236, 0.34); background: rgba(11, 20, 16, 0.3); } .page-hero.has-bg .display, .page-hero.has-bg .lede { text-shadow: 0 1px 20px rgba(11, 20, 16, 0.55); } @media (prefers-reduced-motion: no-preference) { .page-hero-media { transform: scale(1.04); animation: heroDrift 22s var(--ease) infinite alternate; } } @keyframes heroDrift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(0, -1.2%, 0); } } /* ---------- Specs / dl ---------- */ .specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3rem; } .specs div { border-top: 1px solid var(--hair); padding-top: 1.1rem; display: flex; flex-direction: column; } /* Zenithy's nearby-amenity names are much longer than Anchan's ("British International School" vs "Layan Beach"), so one dt wraps to three lines and the rest to one. Pushing dd to the bottom of an equal-height grid cell keeps the numbers on a line instead of stepping down the row. */ .specs dd { margin-top: auto; } .specs dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); } .specs dd { font-family: var(--serif); font-size: 1.45rem; font-weight: 300; margin-top: 0.4rem; } /* ---------- Price + area plans ---------- */ .price-tag { display: inline-block; margin-top: 1.8rem; padding-top: 1.1rem; font-family: var(--serif); font-size: 1.7rem; color: var(--gold); border-top: 1px solid var(--hair); } .card-price { font-family: var(--serif); font-size: 1.1rem; color: var(--gold); } .promo-note { display: inline-block; margin-top: 0.9rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); background: rgba(150, 99, 60, 0.08); border: 1px solid var(--hair); border-radius: 999px; padding: 0.45rem 1rem; } .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 3rem; } .plan-card .bezel { padding: 0.5rem; } .plan-card .bezel-inner { background: #fff; } .plan-card img { width: 100%; height: auto; object-fit: contain; background: #fff; display: block; } .plan-card figcaption { margin-top: 0.9rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); text-align: center; } .plan-card.master { grid-column: 1 / -1; } @media (max-width: 768px) { .plan-grid { grid-template-columns: 1fr; } } /* ---------- WhatsApp float ---------- */ .wa-float { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90; width: 3.4rem; height: 3.4rem; border-radius: 999px; background: var(--gold-soft); display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(22, 33, 28,0.5); transition: transform 0.4s var(--ease); } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 22px; height: 22px; color: #16211c; } /* ---------- Lightbox ---------- The gallery lightbox lives at the foot of this sheet, with the rest of this site's own components. An older, unused copy of a lightbox used to sit here — inherited with the sheet and never wired to any markup. Its `.lightbox button { position: absolute }` silently stacked the new prev/next buttons on top of each other, so it is gone rather than left to ambush the next edit. */ /* ---------- Modal lightbox (price-list request form) ---------- */ .modal-lightbox { position: fixed; inset: 0; z-index: 160; display: none; align-items: center; justify-content: center; padding: 1.5rem; } .modal-lightbox.open { display: flex; } body.modal-open { overflow: hidden; } .modal-backdrop { position: absolute; inset: 0; background: rgba(11, 20, 16, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .modal-card { position: relative; width: 100%; max-width: 27rem; max-height: calc(100vh - 3rem); overflow-y: auto; background: var(--espresso); color: var(--cream); border: 1px solid var(--hair-light); border-radius: 18px; padding: 1.8rem clamp(1.4rem, 4vw, 2.1rem); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6); } .modal-card h3 { font-size: 1.7rem; line-height: 1.15; } .modal-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid var(--hair-light); background: rgba(246, 243, 236, 0.06); color: var(--cream); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background 0.3s var(--ease); } .modal-close:hover { background: rgba(246, 243, 236, 0.16); } .modal-form { grid-template-columns: 1fr; margin-top: 1.1rem; gap: 0.7rem; } .modal-form .field label { margin-bottom: 0.35rem; } .modal-form .field input, .modal-form .field select { padding: 0.65rem 0.85rem; font-size: 0.9rem; } .modal-form .btn { margin-top: 0.15rem; } /* ---------- Catalogue filters ---------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.5rem; } .filter-group { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; } .filter-group + .filter-group { margin-left: 1.6rem; } .filter-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); margin-right: 0.4rem; } .section-dark .filter-label { color: rgba(246, 243, 236,0.55); } .filter-chip { font-family: var(--sans); font-size: 0.68rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); border: 1px solid var(--hair); border-radius: 999px; padding: 0.4rem 0.9rem; background: transparent; cursor: pointer; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); } .filter-chip:hover { border-color: var(--gold); color: var(--gold); } .filter-chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--cream); } .section-dark .filter-chip { color: rgba(246, 243, 236,0.7); border-color: var(--hair-light); } .section-dark .filter-chip:hover { color: var(--gold-soft); border-color: var(--gold-soft); } .section-dark .filter-chip[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold-soft); color: #16211c; } .filter-count { margin-top: 1.8rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); } .section-dark .filter-count { color: rgba(246, 243, 236,0.55); } .card-proj[hidden] { display: none; } .filter-empty { margin-top: 3rem; font-family: var(--serif); font-size: 1.6rem; } @media (max-width: 768px) { .filter-group + .filter-group { margin-left: 0; } .filter-bar { flex-direction: column; align-items: flex-start; gap: 1rem; } } /* Equal-height cards for the catalogue / any 3-up grid */ .grid-projects.grid-eq .card-proj > .bezel { height: 100%; } .grid-projects.grid-eq .bezel > a { height: 100%; } .grid-projects.grid-eq .bezel-inner { height: 100%; display: flex; flex-direction: column; } .grid-projects.grid-eq .card-body { flex: 1; display: flex; flex-direction: column; } .grid-projects.grid-eq .card-foot { margin-top: auto; } /* ---------- Editorial prose (guides, about) ---------- */ .prose { max-width: 44rem; } .prose h3 { margin-top: 2.8rem; } .prose h3:first-child { margin-top: 0; } .prose p { margin-top: 1.1rem; color: var(--ink-soft); } .section-dark .prose p, .section-espresso .prose p { color: rgba(246, 243, 236,0.72); } .prose ul { margin-top: 1.1rem; padding-left: 1.1rem; color: var(--ink-soft); } .prose li { margin-top: 0.5rem; } .section-dark .prose ul, .section-espresso .prose ul { color: rgba(246, 243, 236,0.72); } .data-table { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 0.92rem; } .data-table th, .data-table td { text-align: left; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--hair); } .data-table th { font-family: var(--sans); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); font-weight: 500; } .data-table td { color: var(--ink-soft); } .table-scroll { overflow-x: auto; } .section-dark .data-table th, .section-espresso .data-table th { color: var(--gold-soft); } .section-dark .data-table td, .section-espresso .data-table td { color: rgba(246, 243, 236,0.78); border-bottom-color: var(--hair-light); } .section-dark .data-table th, .section-espresso .data-table th { border-bottom-color: var(--hair-light); } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); } .reveal.in { opacity: 1; transform: none; filter: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } /* ---------- Responsive ---------- */ @media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, 1fr); } .specs { grid-template-columns: repeat(2, 1fr); } .card-proj, .card-proj.feature, .card-proj.wide { grid-column: span 6; } } @media (max-width: 768px) { .nav-links, .nav > .btn { display: none; } .nav-toggle { display: block; } .nav { gap: 1rem; padding: 0.55rem 0.6rem 0.55rem 1.2rem; } .split { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } .split-media img { aspect-ratio: 16/11; } .enquiry-wrap { grid-template-columns: 1fr; } .enquiry-form { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 2rem; } .pillars { grid-template-columns: 1fr; gap: 0; margin-top: 2.5rem; } .card-proj, .card-proj.feature, .card-proj.wide { grid-column: 1 / -1; } .grid-projects { grid-template-columns: 1fr; } .hero-meta { gap: 1.5rem; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; filter: none; } } /* ---------- Collection tiles (single-page: name + photo only) ---------- The brief is deliberately thin: the tile carries the collection name, its sub-district and one photograph, and every tile is a form trigger. Specs, prices and plans live behind the enquiry, not on the page. */ .collections { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; margin-top: 3.5rem; } .collection { grid-column: span 2; position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--cream); font: inherit; border-radius: 24px; overflow: hidden; transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease); } /* Anchan ran five tiles; Zenithy runs two groups. `.collections` is the three-up row of what you can actually buy (two La Ville collections + Grand). `.collections--track` is the four-up row of delivered, sold-out projects — smaller, quieter, and there as evidence rather than as an offer. */ .collections--track { grid-template-columns: repeat(4, 1fr); gap: 1rem; } .collections--track .collection { grid-column: span 1; border-radius: 18px; } /* Every source photograph is pre-cropped to 16:10 at build time (960x600), so the served bytes match the frame and object-fit has nothing left to do. */ .collection img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; transition: transform 1.2s var(--ease); } /* The scrim carries the label, the title and the spec line over photographs that run from dusk sky to lit pool water. It is measured in PIXELS, not percentages: the two rows have very different heights (~250px vs ~178px at 1240px), and a percentage scrim puts the sub-district label of the short row on bare sky. Each row therefore gets its own stops. */ .collection::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 20, 16,0.95) 0, rgba(11, 20, 16,0.88) 74px, rgba(11, 20, 16,0.6) 112px, rgba(11, 20, 16,0.18) 152px, rgba(11, 20, 16,0) 190px); transition: background 0.6s var(--ease); } .collections--track .collection::after { background: linear-gradient(to top, rgba(11, 20, 16,0.95) 0, rgba(11, 20, 16,0.9) 62px, rgba(11, 20, 16,0.66) 94px, rgba(11, 20, 16,0.22) 128px, rgba(11, 20, 16,0) 162px); } .collection:hover { transform: translateY(-6px); box-shadow: 0 34px 66px -32px rgba(16,27,21,0.55); } .collection:hover img { transform: scale(1.06); } .collection:hover::after { background: linear-gradient(to top, rgba(11, 20, 16,0.96) 0, rgba(11, 20, 16,0.91) 74px, rgba(11, 20, 16,0.68) 112px, rgba(11, 20, 16,0.26) 152px, rgba(11, 20, 16,0.04) 190px); } .collections--track .collection:hover::after { background: linear-gradient(to top, rgba(11, 20, 16,0.96) 0, rgba(11, 20, 16,0.93) 62px, rgba(11, 20, 16,0.72) 94px, rgba(11, 20, 16,0.3) 128px, rgba(11, 20, 16,0.04) 162px); } .collection-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0.9rem 1.5rem 1.35rem; } .collections--track .collection-body { padding: 0.7rem 1.1rem 0.95rem; } .collection-body .loc { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold-bright); /* This label sits highest in the stack, where the scrim is weakest and the photograph is often bright sky or a pale roof. Two shadows — a tight one for edge contrast, a wide one for a local plate — hold it without darkening the whole tile further. */ text-shadow: 0 1px 3px rgba(11, 20, 16, 0.95), 0 2px 18px rgba(11, 20, 16, 0.85); } .collection-body h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 0.35rem; color: var(--cream); text-shadow: 0 1px 16px rgba(11, 20, 16, 0.7); } .collections--track .collection-body h3 { font-size: clamp(1.05rem, 1.9vw, 1.2rem); margin-top: 0.35rem; } /* `.collection-price` is the sibling sites' name for this line. Zenithy publishes no prices at all (see data/source-facts.json → gaps), so the same slot carries villa size / bedrooms instead and the markup says so. */ .collection-price, .collection-spec { display: block; margin-top: 0.45rem; font-family: var(--serif); font-size: 1rem; font-weight: 300; color: var(--gold-bright); text-shadow: 0 1px 12px rgba(11, 20, 16, 0.9); } .collections--track .collection-spec { font-size: 0.82rem; margin-top: 0.3rem; } /* Status pill. The developer badges every project Now Available / Coming Soon / Sold Out on their own /developments page; repeating it here is what keeps the page honest about the four that are gone. */ .collection-badge { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.34rem 0.8rem; border-radius: 999px; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #221a0c; background: linear-gradient(135deg, #d9ab84 0%, #b08847 100%); box-shadow: 0 6px 16px rgba(16, 27, 21, 0.45); } .collection-badge.is-soon { color: var(--gold-bright); background: rgba(11, 20, 16, 0.72); border: 1px solid rgba(217, 171, 132, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .collection-badge.is-gone { color: rgba(246, 243, 236, 0.72); background: rgba(11, 20, 16, 0.6); border: 1px solid rgba(246, 243, 236, 0.22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: none; } .collection-cue { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.65rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(246, 243, 236, 0.82); } .collections--track .collection-cue { margin-top: 0.6rem; font-size: 0.6rem; letter-spacing: 0.14em; } .collection-cue svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); } .collection:hover .collection-cue svg { transform: translateX(4px); } @media (max-width: 900px) { .collections { grid-template-columns: repeat(2, 1fr); } .collection { grid-column: span 1; } .collections--track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .collections, .collections--track { grid-template-columns: 1fr; } /* One column means the short tiles are now as wide as the tall ones, so they get the taller row's scrim back. */ .collections--track .collection::after { background: linear-gradient(to top, rgba(11, 20, 16,0.95) 0, rgba(11, 20, 16,0.88) 74px, rgba(11, 20, 16,0.6) 112px, rgba(11, 20, 16,0.18) 152px, rgba(11, 20, 16,0) 190px); } } /* ---------- Disclosure strip (we are an agency, not the developer) ------- */ .disclosure { margin-top: 2.5rem; padding: 1rem 1.2rem; border: 1px solid var(--hair-light); border-radius: 14px; font-size: 0.82rem; color: rgba(246, 243, 236, 0.66); } .disclosure a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Espresso sections need the same on-dark treatment as .section-dark The inherited sheet only ever put pillars/specs/stats on .section-dark, so on the plum "Investment" band the body copy fell back to --ink-soft (#5f6d63) over #2b4034 — a contrast ratio under 1.5:1, effectively invisible. */ .section-espresso .pillar { border-top-color: var(--hair-light); } .section-espresso .pillar p { color: rgba(246, 243, 236, 0.7); } .section-espresso .pillar .ic-line { color: var(--gold-soft); } .section-espresso .specs div { border-top-color: var(--hair-light); } .section-espresso .specs dt { color: var(--gold-soft); } .section-espresso .stat b { color: var(--gold-soft); } .section-espresso .stat span { color: rgba(246, 243, 236, 0.6); } .section-espresso .chip { color: rgba(246, 243, 236, 0.75); border-color: var(--hair-light); } /* ---------- WhatsApp hand-off (post-submit step) ---------- */ .wa-handoff { margin-top: 1.4rem; } .enquiry-wrap .wa-handoff { margin-top: 0; } .modal-card.is-done > .eyebrow, .modal-card.is-done > h3, .modal-card.is-done > .lede { display: none; } .modal-card.is-done .wa-handoff { margin-top: 0.4rem; } /* Keep the heading clear of the card's close button. */ .modal-card.is-done .wa-handoff-head { padding-right: 2.4rem; } .wa-handoff-head { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; color: var(--cream); } .wa-handoff-head em { font-style: italic; color: var(--gold-bright); } .wa-handoff-lede { margin-top: 0.7rem; color: rgba(246, 243, 236, 0.72); font-size: 0.95rem; } /* The base .btn pads asymmetrically for its trailing arrow pill; this one leads with the WhatsApp glyph instead, so it pads evenly. */ .wa-handoff-btn { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.3rem; padding: 0.75rem 1.5rem; background: #25d366; color: #0b2016; } .wa-handoff-btn:hover { background: #1fb857; color: #0b2016; } /* .enquiry-form sets display:grid, which outranks the UA [hidden] rule. */ .enquiry-form[hidden] { display: none; } .wa-handoff-ic svg { width: 1.25rem; height: 1.25rem; display: block; } .wa-handoff-note { margin-top: 1rem; font-size: 0.82rem; line-height: 1.5; color: rgba(246, 243, 236, 0.6); } .wa-handoff-note .bang { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-right: 0.4rem; border-radius: 999px; background: var(--gold-soft); color: var(--charcoal); font-size: 0.72rem; font-weight: 500; } /* ---- ZEN phone field (generated by phone_flags.py) ---------------------- */ .zen-tel { position: relative; display: flex; align-items: stretch; gap: 0; } .zen-tel > input[type="tel"] { flex: 1 1 auto; min-width: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: 0 !important; } .zen-tel__btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.9rem 0.7rem 0.9rem 0.9rem; font: inherit; font-size: 0.95rem; font-weight: 300; line-height: 1; color: inherit; cursor: pointer; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-right: 0; border-radius: 12px 0 0 12px; transition: border-color 0.4s ease, background 0.4s ease; } .zen-tel__btn:hover { background: rgba(255, 255, 255, 0.1); } .zen-tel__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } .modal-form .zen-tel__btn { padding: 0.65rem 0.55rem 0.65rem 0.75rem; font-size: 0.9rem; } /* One sprite sheet, 230 flags in a single 42px-wide column of 28px cells. At background-size 21px the sheet is shown at half scale, so a country's cell is at -index*14px — which is the only number phone_field.js needs to know. Fitted, not stretched: Switzerland is square and the padding either side of it is transparent, so it takes the panel's colour rather than a false white. */ .zen-tel__flag { width: 21px; height: 14px; flex: 0 0 21px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); background-image: url("flags.png?v=8a52ee86"); background-repeat: no-repeat; background-size: 21px auto; } .zen-tel__code { opacity: 0.85; white-space: nowrap; } .zen-tel__caret { width: 10px; height: 6px; opacity: 0.6; flex: 0 0 10px; } .zen-tel__panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(19rem, 78vw); max-height: 17rem; /* max-height is overwritten inline on open, sized to whatever the nearest scrolling ancestor actually leaves free. */ display: flex; flex-direction: column; background: var(--charcoal, #1c1b18); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); } /* display:flex above outranks the UA [hidden] rule, exactly as .enquiry-form does — without this the panel is painted over the field below it from page load, never closes after a choice, and its list is empty until first opened. */ .zen-tel__panel[hidden] { display: none; } /* Not enough room under the field — inside the price-list modal, for one. */ .zen-tel__panel.is-up { top: auto; bottom: calc(100% + 6px); } .zen-tel__search { width: 100%; padding: 0.6rem 0.8rem; font: inherit; font-size: 0.85rem; color: inherit; background: rgba(255, 255, 255, 0.06); border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0 !important; } .zen-tel__search:focus { outline: none; background: rgba(255, 255, 255, 0.1); } .zen-tel__list { overflow-y: auto; -webkit-overflow-scrolling: touch; } .zen-tel__opt { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.8rem; font: inherit; font-size: 0.85rem; font-weight: 300; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; } .zen-tel__opt:hover, .zen-tel__opt:focus-visible, .zen-tel__opt.is-on { background: rgba(255, 255, 255, 0.09); outline: none; } .zen-tel__name { flex: 1 1 auto; } .zen-tel__opt .zen-tel__code { opacity: 0.6; font-variant-numeric: tabular-nums; } .zen-tel__empty { padding: 0.9rem; margin: 0; font-size: 0.85rem; opacity: 0.6; } @media (prefers-reduced-motion: reduce) { .zen-tel__btn { transition: none; } } /* ---- end ZEN phone field ----------------------------------------------- */ /* ---------- Language switcher ---------- Four static pages (en / th / ru / zh), so the switcher is four links and no JavaScript: whichever page you are on renders its own link as [aria-current]. In the nav pill it sits between the links and the CTA; below 768px the pill drops both, so a copy lives in the mobile overlay with its own type scale (the overlay's own `a` rule is a 3.6rem serif and would swallow it). */ .lang-switch { display: flex; align-items: center; gap: 0.55rem; } .lang-switch a { font-family: var(--sans); font-size: 0.68rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(246, 243, 236, 0.55); padding: 0.25rem 0.1rem; transition: color 0.3s var(--ease); } .lang-switch a:hover { color: var(--cream); } .lang-switch a[aria-current="true"] { color: var(--gold-soft); } .lang-switch .sep { color: rgba(246, 243, 236, 0.28); font-size: 0.6rem; } @media (max-width: 768px) { .nav .lang-switch { display: none; } } .nav-overlay .lang-switch { margin-top: 2.4rem; gap: 0.9rem; } .nav-overlay .lang-switch a { font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0.12em; opacity: 1; transform: none; color: rgba(246, 243, 236, 0.6); } .nav-overlay .lang-switch a[aria-current="true"] { color: var(--gold-soft); } /* ---------- Per-language typography ---------- Cormorant Garamond and Jost cover Latin and Cyrillic, and neither has a single Thai or Han glyph — on th/ and zh/ every heading would fall back to the system UI face at Cormorant's metrics, which is why the sizes are trimmed here as well as the families swapped. The webfonts themselves are requested per page in , so an English visitor never downloads Thai. */ html[lang^="th"] { /* Cormorant first, Noto Serif Thai second: the Latin brand names (Anasiri Paklok, Sansiri, LIV-24, Quinoa) keep the display face and the Thai falls through to Noto, which is the only one of the two that has Thai at all. */ --serif: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif; --sans: "Noto Sans Thai", "Jost", -apple-system, BlinkMacSystemFont, sans-serif; } html[lang^="th"] h1, html[lang^="th"] h2, html[lang^="th"] h3, html[lang^="th"] h4 { font-weight: 500; line-height: 1.35; letter-spacing: 0; } html[lang^="th"] .display { font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.25; } html[lang^="th"] h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); } html[lang^="th"] h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); } html[lang^="th"] body, html[lang^="th"] .lede { line-height: 1.85; } html[lang^="th"] .eyebrow, html[lang^="th"] .nav-links a { letter-spacing: 0.04em; } html[lang^="zh"] { /* Same ordering rationale as Thai above. */ --serif: "Cormorant Garamond", "Noto Serif SC", Georgia, serif; --sans: "Noto Sans SC", "Jost", -apple-system, BlinkMacSystemFont, sans-serif; } html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] h4 { font-weight: 500; line-height: 1.25; letter-spacing: 0.01em; } html[lang^="zh"] .display { font-size: clamp(2.4rem, 6.5vw, 5rem); } html[lang^="zh"] h2 { font-size: clamp(1.8rem, 4.2vw, 2.8rem); } html[lang^="zh"] h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); } html[lang^="zh"] .eyebrow, html[lang^="zh"] .nav-links a { letter-spacing: 0.06em; } html[lang^="zh"] body { line-height: 1.8; } /* Russian sets in Cormorant/Jost Cyrillic, which are noticeably wider than the Latin — the hero headline is the only place it overflows, so only it moves. */ html[lang^="ru"] .display { font-size: clamp(2.4rem, 6.4vw, 5.2rem); } html[lang^="ru"] .eyebrow { letter-spacing: 0.1em; } /* ---------- Amenity grid ---------- New in this site: the four siblings all list amenities as text pillars, but Sansiri publishes a photograph of each facility, so they run as picture tiles. Deliberately not `.collection` — those are clickable enquiry triggers, and a gym photo is not something to ask a price for. */ .amenities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3.5rem; } .amenity { min-width: 0; } .amenity img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 18px; } .amenity h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: 1.1rem; } .amenity p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink-soft); } .section-dark .amenity p, .section-espresso .amenity p { color: rgba(246, 243, 236, 0.66); } @media (max-width: 1000px) { .amenities { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .amenities { grid-template-columns: 1fr; gap: 2rem; } } /* ---------- Tick list ---------- Used for the engineering and security specs, which are lists of facts rather than prose. Sits on the espresso band, so it takes the same on-dark treatment .section-espresso body copy needs (see gotchas.md). */ .tick-list { list-style: none; margin-top: 1.6rem; display: grid; gap: 0.7rem; } .tick-list li { position: relative; padding-left: 1.6rem; font-size: 0.95rem; font-weight: 300; color: var(--ink-soft); } .tick-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid var(--gold); } .section-dark .tick-list li, .section-espresso .tick-list li { color: rgba(246, 243, 236, 0.72); } .section-dark .tick-list li::before, .section-espresso .tick-list li::before { border-color: var(--gold-soft); } .built-sub { margin-top: 2.2rem; font-size: clamp(1.15rem, 2vw, 1.35rem); } .section-espresso .built-sub, .section-dark .built-sub { color: var(--cream); } /* ---------- Gallery lightbox ---------- The tiles are buttons (keyboard reachability), so they need the