/* Việt Tín Hotel — Aman-inspired minimal luxury */ /* Note: switched the display serif from Cormorant Garamond to Playfair Display — Cormorant Garamond mis-renders Vietnamese double diacritics (ế, ộ, ặ, etc.), showing the tone mark as a floating separate glyph instead of stacked correctly. Playfair Display keeps a similarly elegant high-contrast look and renders Vietnamese correctly. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;700&display=swap'); :root { --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Montserrat', system-ui, sans-serif; --header-h: 72px; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Light (default) — white + navy #213059 + warm gold #b8956b. The bare :root selector here means this also applies as the fallback any time data-theme isn't (yet) set to "dark" — e.g. the instant before theme-init.js runs, or if it fails to load. IMPORTANT: :root matches the element UNCONDITIONALLY, regardless of its data-theme attribute — it does NOT mean "only when no theme is set". That's exactly why this block must come BEFORE [data-theme="dark"] below: with equal-specificity selectors, the later rule in source order wins a tie, so if this block were placed after [data-theme="dark"] (as it briefly was — a bug caught after a live phone/desktop test showed dark mode stuck rendering light colors with the toggle icon still saying "dark"), its declarations would override the dark theme's on every element, even ones explicitly marked data-theme="dark", and dark mode could never render at all. Same pattern the original dark-default version of this file used, just with the two themes' roles swapped: :root bundled with the CURRENT default theme, placed first; the other theme's override placed second so it can win. */ :root, [data-theme="light"] { --color-bg: #ffffff; --color-bg-soft: #f4f1eb; --color-text: #15243d; --color-text-muted: #1f3352; --color-accent: #15243d; --color-accent-warm: #6b542f; --color-accent-hover: #2d4278; --color-price: #8a5a1f; --color-on-accent: #ffffff; --color-border: rgba(33, 48, 89, 0.14); --color-header-fade: rgba(255, 255, 255, 0.92); --color-header-scrolled: rgba(255, 255, 255, 0.97); /* No overlay on hero banners in light mode, per explicit request — was the navy gradient below (kept commented for reference/rollback): linear-gradient(to top, rgba(33, 48, 89, 0.72) 0%, rgba(33, 48, 89, 0.2) 50%, rgba(33, 48, 89, 0.35) 100%) */ --color-hero-overlay: none; --color-card-overlay: linear-gradient(to top, rgba(33, 48, 89, 0.88), transparent 60%); --color-on-hero: #ffffff; --color-on-hero-muted: rgba(255, 255, 255, 0.9); /* Hero banners no longer have a colored scrim in light mode (see --color-hero-overlay above), but text stays white per explicit request rather than switching to dark — relies on the hero photos themselves being dark/moody enough for white text to read without a scrim. Kept as its own variable (not shared with --color-on-hero) so it's easy to retune independently of .card__overlay, which keeps its own dark scrim and is unaffected either way. */ --color-hero-text: #ffffff; --color-hero-text-muted: rgba(255, 255, 255, 0.9); } /* Dark — must stay AFTER the light/:root block above so it wins the equal-specificity tie on elements explicitly marked data-theme="dark". See the long comment on that block for exactly why. */ [data-theme="dark"] { --color-bg: #0f0f0f; --color-bg-soft: #1a1a1a; --color-text: #f5f2ed; --color-text-muted: #a8a29e; --color-accent: #8b7355; --color-accent-warm: #8b7355; --color-accent-hover: #9d8468; --color-price: #d9a85c; --color-on-accent: #f5f2ed; --color-border: rgba(245, 242, 237, 0.12); --color-header-fade: rgba(15, 15, 15, 0.9); --color-header-scrolled: rgba(15, 15, 15, 0.95); /* Lightened slightly from an earlier, darker version (0.85/0.2/0.4) per explicit request — hero photos read as too dim in dark mode. Kept the same shape (darkest at the bottom, where .hero's flex-end-aligned title/subtitle text sits, needing the most contrast; lightest in the middle, where the photo itself should show through clearest). */ --color-hero-overlay: linear-gradient(to top, rgba(15, 15, 15, 0.68) 0%, rgba(15, 15, 15, 0.12) 50%, rgba(15, 15, 15, 0.28) 100%); --color-card-overlay: linear-gradient(to top, rgba(15, 15, 15, 0.9), transparent 60%); --color-on-hero: #f5f2ed; --color-on-hero-muted: #a8a29e; /* Hero banner title/subtitle text only (kept separate from --color-on-hero, which .card__overlay also uses over its own always-on dark scrim) — dark theme keeps the same white-on-dark-overlay look as everywhere else. */ --color-hero-text: #f5f2ed; --color-hero-text-muted: #a8a29e; } /* Light: darker, slightly heavier type on white & sand */ [data-theme="light"] body { font-weight: 400; color: var(--color-text); } [data-theme="light"] .nav-desktop, [data-theme="light"] .section-label, [data-theme="light"] .footer-info, [data-theme="light"] .footer-copy, [data-theme="light"] .form-group label, [data-theme="light"] .form-note, [data-theme="light"] .amenities li, [data-theme="light"] .section p, [data-theme="light"] .split__text p, [data-theme="light"] .split__text .price, [data-theme="light"] .room-meta, [data-theme="light"] .price-table__sub, [data-theme="light"] .policy-group li, [data-theme="light"] .room-policies__note, [data-theme="light"] .footer-col a, [data-theme="light"] .faq-item p, [data-theme="light"] .text-accent-warm { color: var(--color-text-muted); font-weight: 500; } [data-theme="light"] .nav-desktop a.active { color: var(--color-text); font-weight: 500; } [data-theme="light"] .section-label, [data-theme="light"] .split__text .price, [data-theme="light"] .text-accent-warm { color: var(--color-accent-warm); } [data-theme="light"] .logo, [data-theme="light"] .section h2, [data-theme="light"] .split__text h3 { color: var(--color-text); } [data-theme="light"] .card__overlay h3 { color: var(--color-on-hero); font-weight: 400; } [data-theme="light"] .card__overlay p, [data-theme="light"] .card__overlay .price { color: var(--color-on-hero-muted); font-weight: 400; } [data-theme="light"] a:hover { opacity: 1; } [data-theme="light"] .btn-book { color: var(--color-text); border-color: var(--color-text); background: transparent; font-weight: 500; } [data-theme="light"] .btn-book:hover { background: var(--color-text); color: var(--color-bg); opacity: 1; } [data-theme="light"] .btn:not(.btn--primary) { color: var(--color-text); border-color: var(--color-border); font-weight: 500; } [data-theme="light"] .btn:not(.btn--primary):hover { color: var(--color-text); border-color: var(--color-accent); } [data-theme="light"] .btn--primary, [data-theme="light"] .btn--primary:hover { color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); font-weight: 500; } [data-theme="light"] .btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; /* Playfair Display (--font-serif) defaults to old-style figures — digits with varying height/baseline (e.g. "3"/"7" dip below the baseline, "6" rises above x-height) instead of sitting evenly like the rest of the text. Fine for a page number in a novel, but it reads as broken/uneven wherever the serif font wraps real data — phone numbers, prices. Set once here and inherited everywhere (including every --font-serif element) rather than patched per-selector; a global reset like this is safe because it's a no-op on --font-sans (Montserrat), which already renders lining figures by default. */ font-variant-numeric: lining-nums; } /* Avoid orphaned single words on the last line of any heading */ h1, h2, h3, h4 { text-wrap: balance; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: opacity 0.3s var(--ease); } a:hover { opacity: 0.7; } /* Header */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.5rem, 4vw, 3rem); background: linear-gradient(to bottom, var(--color-header-fade), transparent); transition: background 0.4s var(--ease); } .site-header.scrolled { background: var(--color-header-scrolled); backdrop-filter: blur(8px); } [data-theme="light"] .site-header { background: #ffffff; border-bottom: 1px solid var(--color-border); } [data-theme="light"] .site-header.scrolled { background: #ffffff; backdrop-filter: none; box-shadow: 0 1px 0 var(--color-border); } .logo { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } /* Image logo (uploaded via Cài đặt chung → Logo). Height is capped relative to --header-h so it always fits the fixed-height header without growing the header itself; width follows naturally so non-square logos aren't distorted. */ .logo--image { display: inline-flex; align-items: center; } .logo--image img { display: block; height: calc(var(--header-h) * 0.8); width: auto; max-width: 260px; object-fit: contain; } .nav-desktop { display: none; gap: 2rem; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; } .nav-desktop a.active { opacity: 1; border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; } .header-actions { display: flex; align-items: center; gap: 0.5rem; } .header-dropdown { position: relative; } .header-icon-btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; background: none; color: var(--color-text); cursor: pointer; border-radius: 50%; transition: background 0.3s var(--ease), opacity 0.3s var(--ease); } .header-icon-btn:hover { opacity: 1; background: var(--color-border); } .header-icon { width: 1.15rem; height: 1.15rem; } .header-popup { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 150; min-width: 8.5rem; padding: 0.35rem 0; background: var(--color-bg-soft); border: 1px solid var(--color-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; } [data-theme="light"] .header-popup { background: #ffffff; box-shadow: 0 8px 24px rgba(21, 36, 61, 0.12); } .header-dropdown.is-open .header-popup { opacity: 1; visibility: visible; transform: translateY(0); } .header-popup__list { list-style: none; margin: 0; padding: 0; } .header-popup__item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 1rem; font-family: inherit; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--color-text-muted); background: none; border: none; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .header-popup__item .header-icon { width: 1rem; height: 1rem; flex-shrink: 0; } .header-popup__item:hover { opacity: 1; background: var(--color-border); color: var(--color-text); } .header-popup__item.is-active { color: var(--color-text); background: var(--color-border); } .header-popup__item.is-soon { cursor: default; opacity: 0.45; } .header-popup__item.is-soon:hover { background: none; color: var(--color-text-muted); } .header-popup__flag { font-size: 1rem; line-height: 1; flex-shrink: 0; } .header-popup__abbr { flex: 1; text-align: left; } [data-theme="light"] .header-icon-btn { color: var(--color-text); } [data-theme="light"] .header-popup__item { color: var(--color-text-muted); font-weight: 500; } [data-theme="light"] .header-popup__item.is-active, [data-theme="light"] .header-popup__item:hover { color: var(--color-text); } .btn-book { margin-left: 0.5rem; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.65rem 1.25rem; border: 1px solid var(--color-text); transition: background 0.3s var(--ease), color 0.3s var(--ease); } .btn-book:hover { opacity: 1; background: var(--color-text); color: var(--color-bg); } .menu-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .menu-toggle span { width: 22px; height: 1px; background: var(--color-text); } .nav-mobile { position: fixed; inset: 0; z-index: 99; background: var(--color-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; } .nav-mobile.open { opacity: 1; visibility: visible; } .nav-mobile a { font-family: var(--font-serif); font-size: 2rem; letter-spacing: 0.1em; } /* Compact header on small screens — logo + language/theme icons + book button + hamburger all compete for one row, so scale everything down to fit on one line instead of letting the logo wrap and collide with the hero below it. */ @media (max-width: 640px) { .site-header { padding: 0 1.1rem; } .logo { font-size: clamp(0.7rem, 3.6vw, 0.95rem); letter-spacing: 0.08em; } .logo--image img { height: calc(var(--header-h) * 0.62); max-width: 170px; } .header-actions { gap: 0.15rem; } .header-icon-btn { width: 1.9rem; height: 1.9rem; } .header-icon { width: 1rem; height: 1rem; } .btn-book { margin-left: 0.15rem; padding: 0.5rem 0.7rem; font-size: 0.55rem; letter-spacing: 0.1em; } .menu-toggle { padding: 4px 2px; } } /* Hero */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; justify-content: center; padding-bottom: clamp(4rem, 12vh, 8rem); overflow: hidden; } /* Shared placeholder look for any photo area (hero, split, card) before a real image loads — a soft branded gradient instead of a flat void that reads as a broken image. Once JS successfully loads a photo it sets background-image inline, which paints over this. */ .hero-bg, .split__image, .card__img, .experience-card__img, .experience-modal__img, .testimonial-slide__img, .pillar-card__img, .gallery-strip__item, .about-host__avatar, .contact-layout__image, .booking-room-summary__img { background-color: var(--color-bg-soft); background-image: radial-gradient(120% 120% at 50% 15%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 60%), linear-gradient(160deg, var(--color-bg-soft), var(--color-bg)); } .img-pending { animation: imgPulse 1.8s ease-in-out infinite; } @keyframes imgPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); animation: heroZoom 20s ease-out forwards; } @keyframes heroZoom { to { transform: scale(1); } } .hero-overlay { position: absolute; inset: 0; background: var(--color-hero-overlay); } .hero-content { position: relative; z-index: 1; text-align: center; padding: 0 1.5rem; max-width: 900px; color: var(--color-hero-text); } /* Light mode only: no overlay sits over the photo (see .hero-overlay above, --color-hero-overlay: none) and the photos themselves can be bright/vivid, so white text needs its own contrast instead of relying on the image being dark underneath it. A soft shadow directly on the letters — not a layer over the photo — keeps every hero image's true color fully visible while still guaranteeing the text reads. Dark theme keeps its overlay and doesn't need this. */ [data-theme="light"] .hero-content { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45), 0 8px 30px rgba(0, 0, 0, 0.3); } /* The subtitle line is small and thin (uppercase, wide letter-spacing) — noticeably weaker than the bold serif h1 under the same shadow, so it gets a slightly stronger one rather than inheriting the h1's. */ [data-theme="light"] .hero-content p { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.35); } .hero-content h1 { font-family: var(--font-serif); font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.75rem; text-wrap: balance; } /* Optional image/wordmark swapped in for the h1 text above (CMS: "Cài đặt chung" → "Ảnh thay cho dòng chữ..."). Sized to roughly fill the same footprint the big serif h1 would take (clamp mirrors its font-size range) so the hero's overall balance doesn't shift depending on which is shown. Hidden via [hidden] when no image is set — see renderHome() in main.js. */ .hero-title-image { display: block; width: auto; height: clamp(3.5rem, 9vw, 6.5rem); max-width: 90%; margin: 0 auto 0.75rem; object-fit: contain; } .hero-title-image[hidden] { display: none; } /* Short hero (inner pages) titles are often full phrases ("Yêu cầu đặt phòng", "Câu chuyện của chúng tôi") rather than the single short word the homepage's huge display size assumes — scale it down so longer Vietnamese titles don't wrap into an unbalanced two-liner. */ .hero--short .hero-content h1 { font-size: clamp(1.75rem, 5.5vw, 3rem); letter-spacing: 0.1em; } .hero-content p { font-size: 0.75rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--color-hero-text-muted); } /* Small overline above the hero title (About page) — same treatment as the tagline below the title, just placed first so it reads as "Our story / ABOUT US / where every moment is cared for" top to bottom. */ .hero-content__label { display: block; font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--color-hero-text-muted); margin-bottom: 1rem; } [data-theme="light"] .hero-content__label { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.35); } /* Dark mode was relying entirely on .hero-overlay's dark scrim for contrast (no shadow at all), which was fine until the overlay was lightened above (per explicit request — photos were reading too dim). The bold white h1 still holds up on its own, but the subtitle/label lines use the dimmer --color-hero-text-muted at a small size, thin uppercase letters — exactly the combination that gets hard to read once the scrim is lighter. Same fix as light mode above, just a lighter shadow since dark mode still has the overlay doing part of the work. */ [data-theme="dark"] .hero-content p, [data-theme="dark"] .hero-content__label { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); } .hero--short { min-height: 55vh; } /* No mobile-specific override here on purpose. Several fixed-ratio/contain treatments were tried on this block below 640px (a 3:4 band, a 3:2 band, a per-photo dynamic ratio via JS) to avoid cropping the photo on narrow screens — each fixed one problem but introduced another (empty letterbox, title overlapping the header, title overflowing off-screen). Per explicit request, mobile now falls back to exactly the same rule as desktop/tablet above: min-height: 100vh (55vh for --short) + background-size: cover on .hero-bg — the photo crops to fill the viewport-relative box, same as it always did before any mobile-only styling was added. */ /* Sections */ .section { padding: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 5vw, 4rem); } .section--narrow { max-width: 720px; margin: 0 auto; text-align: center; } /* Optional small mark above the homepage intro's label/heading (CMS: "Cài đặt chung" → "Ảnh/logo phía trên..."). Hidden entirely via [hidden] when no image is set (see renderHomeIntroLogo() in main.js) rather than collapsing to 0 height, so there's no leftover empty gap either way. */ .intro-logo { display: block; max-height: 9rem; width: auto; max-width: 400px; margin: 0 auto 1.5rem; object-fit: contain; } .intro-logo[hidden] { display: none; } .section-label { font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-accent-warm); margin-bottom: 1rem; } .section h2 { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; margin-bottom: 1.5rem; line-height: 1.2; } .section p { color: var(--color-text-muted); max-width: 560px; margin: 0 auto 2rem; } .section--compact { padding-top: 0; padding-bottom: clamp(3rem, 6vw, 5rem); } .section--flush { padding-top: 0; padding-bottom: 0; } /* Home — seasonal promo banner (clickable image linking to Booking). CMS-editable from the "Trang chủ" tab's "Mục khuyến mãi" card (photo, optional mobile-portrait variant, and display position — not through IMAGE_MANIFEST/"Quản lý ảnh" like most images, see the comment above GET /home in adminContent.ts) so the admin can swap/remove/reposition the campaign graphic without a code deploy. Hidden via [hidden] on the whole
(not just the ) when no image is set — see renderHome() in main.js — so an inactive promotion leaves no empty gap. .section--compact zeroes the top padding so it reads as an extension of whichever section it currently sits right after (position is admin-controlled and can move via applyPromoPosition() in main.js — this padding still reads fine at any of its anchor points, since every one of them is itself a normal .section/.section--flush boundary). */ .promo-section { padding-top: clamp(1.5rem, 4vw, 2.5rem); } .promo-section[hidden] { display: none; } .promo-banner { display: block; max-width: 1100px; margin: 0 auto; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .promo-banner img { width: 100%; height: auto; } @media (hover: hover) { .promo-banner:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16); } } /* Home — highlights */ .highlights { display: grid; gap: 2rem; max-width: 1100px; margin: 0 auto; } @media (min-width: 640px) { .highlights { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .highlights { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } } .highlight { text-align: center; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .highlight__title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.75rem; color: var(--color-text); } .highlight__text { font-size: 0.85rem; line-height: 1.6; color: var(--color-text-muted); margin: 0 auto; max-width: 16rem; } /* Home — section title row. Used above the Rooms and Experiences teasers only — deliberately full-width (no max-width/auto-margin centering) so its left edge lines up exactly with the photo grid/strip below it rather than sitting inset from it (per explicit request; the old 1200px cap centered this row inside the section's padded width, which is wider than 1200px on most desktop viewports, creating a visible left-edge gap against the images). The heading itself is also sized down from the generic .section h2 (per explicit request: "đang để quá to"). */ .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin: 0 0 2.5rem; text-align: left; } .section-head__text h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 0; } .section-head__link { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent-warm); opacity: 1; flex-shrink: 0; } .section-head__link:hover { opacity: 0.75; } .card--link { display: block; color: inherit; } .card--link:hover { opacity: 1; } /* Home — CTA band */ .cta-band { background: var(--color-bg-soft); padding: clamp(4rem, 10vw, 6rem) clamp(1.5rem, 5vw, 4rem); text-align: center; } .cta-band__inner { max-width: 560px; margin: 0 auto; } .cta-band h2 { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; margin-bottom: 1rem; color: var(--color-text); } .cta-band p { margin: 0 auto 2rem; max-width: 480px; } [data-theme="light"] .highlight__title, [data-theme="light"] .section-head__text h2, [data-theme="light"] .cta-band h2 { color: var(--color-text); } [data-theme="light"] .highlight__text, [data-theme="light"] .cta-band p { color: var(--color-text-muted); font-weight: 500; } /* Split block */ .split { display: grid; gap: 0; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } /* Homepage's own location block only (.home-location) — not About's (.about-location) or Contact's (.contact-location), which keep the default even split — image column wider than the text column at desktop width, per explicit request (6:4 instead of 5:5). */ .home-location { grid-template-columns: 6fr 4fr; } } .split__image { min-height: 400px; background-size: cover; background-position: center; } .split__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 5rem); background: var(--color-bg-soft); } .split__text h3 { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); margin-bottom: 1rem; } .split__text p { margin: 0 0 1rem; text-align: left; } /* Cards grid — generous gutters between photos (rather than the old hairline 1px separator) so the grid reads as airy/uncrowded, closer to how a site like Aman lets each room/experience photo breathe. */ .grid-cards { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); } @media (min-width: 768px) { /* 2 columns first so cards stay wide enough for titles like "Executive Suite" to fit on one line; bumped to 3 only once there's enough room per card. */ .grid-cards { grid-template-columns: repeat(2, 1fr); } .grid-cards--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } /* Re-assert after the rule above: .grid-cards--2 must always stay 2 columns, regardless of viewport, since it marks grids with exactly 2 items. */ .grid-cards--2 { grid-template-columns: repeat(2, 1fr); } } /* Homepage — Trải nghiệm teaser strip. Shows every experience (not just a handful) as a horizontally scrollable row instead of a fixed grid, so the count can grow without needing a taller and taller homepage. Scrolls natively via touch/trackpad; initDragStrip() in main.js adds mouse-drag support. No edge fades or ‹ › buttons here (removed per explicit request) — just the strip itself, drag/scroll only. Deliberately NO scroll-behavior:smooth and NO scroll-snap-type on the strip itself (per explicit "vuốt không mượt" report): setting scrollLeft directly every pointermove frame (mouse-drag) while scroll-behavior is smooth makes the browser re-animate/ease toward a new target on every single frame, which fights the drag and feels laggy/rubbery instead of 1:1 with the pointer; scroll-snap-type also has no is-dragging exception for touch (only mouse gets that class), so it was fighting touch swipes too. .is-dragging (added in main.js for the duration of a mouse-drag) also turns off text/image selection and the tiles' hover-lift transform below — with several tiles' worth of hover targets sliding under the pointer during a fast drag, that transform kept re-triggering per tile and read as stutter even once the scroll position itself was moving smoothly (see initDragStrip()'s rAF-throttled scrollLeft writes in main.js for the other half of that fix). */ .exp-strip-wrap { position: relative; } .exp-strip { --exp-gap: clamp(1.25rem, 2.5vw, 2rem); display: flex; gap: var(--exp-gap); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; } .exp-strip::-webkit-scrollbar { display: none; } .exp-strip.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; } .exp-strip.is-dragging .exp-tile { pointer-events: none; } /* Aman-style tile: photo on top, caption below with NO horizontal padding — the caption text's left/right edges line up exactly with the photo's edges (per explicit request, referencing aman.com's own listing tiles, where the caption text block is flush with its photo rather than inset). This intentionally differs from .experience-card on the dedicated Experiences page (which insets its caption in a padded card body) — this strip is a plainer, closer match to the Aman reference. Sizing shows exactly 3 tiles per view on desktop (per explicit request), scaling up notably from the old fixed 340px cap; 2 on tablet, ~1 (with a peek of the next) on mobile to hint the strip is draggable — same 768px/1024px breakpoints as .grid-cards elsewhere on the site. */ .exp-tile { display: block; flex: 0 0 82%; color: inherit; transition: transform 0.3s var(--ease); } @media (min-width: 768px) { .exp-tile { flex: 0 0 calc((100% - var(--exp-gap)) / 2); } } @media (min-width: 1024px) { .exp-tile { flex: 0 0 calc((100% - 2 * var(--exp-gap)) / 3); } } .exp-tile:hover, .exp-tile:focus-visible { transform: translateY(-6px); } .exp-tile__img { aspect-ratio: 1 / 1; background-size: cover; background-position: center; } .exp-tile__body { padding-top: 1.1rem; } .exp-tile__body h3 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; margin-bottom: 0.5rem; color: var(--color-text); } .exp-tile__body p { font-size: 0.85rem; line-height: 1.7; color: var(--color-text-muted); margin: 0; } /* Experiences page — Aman-style tile grid: photo on top, caption below in a soft neutral card body, instead of the overlay-on-photo .card pattern used for room/dining teasers. Referenced from aman.com's Amanoi "Accommodation" listing page (image + heading + short text, generous whitespace, calm neutral tone) per explicit request. */ .experience-grid { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem); max-width: 1320px; margin: 0 auto; } @media (min-width: 640px) { .experience-grid { grid-template-columns: repeat(2, 1fr); } } /* 3 photos per row on desktop, matching the Amanoi reference. */ @media (min-width: 1024px) { .experience-grid { grid-template-columns: repeat(3, 1fr); } } /* Each tile is a real