/* ========================================================================== ALOHA BABY MEMORY STUDIO — Design System Concept: "Hộp nhạc ký ức" (The Memory Music Box) Mobile-first. Warm ivory canvas, champagne hairlines, photography-led. ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root { /* Surfaces */ --ivory: #FBF7F2; --warm-white: #FFFCF8; --cream: #F4EBE0; --sand: #EADFD1; --espresso: #33241D; --espresso-2: #241914; /* Ink */ --ink: #33241D; --ink-soft: #6B564A; --ink-faint: #7D6A5A; /* 4.8:1 on ivory — secondary, still AA at 15px */ --on-dark: #F7F1E8; --on-dark-soft: #CBBBAC; /* Accents */ --gold: #C2A06A; --gold-deep: #A5854F; --gold-text: #7E6033; /* AA-safe gold for small text on ivory */ --gold-veil: rgba(194, 160, 106, .28); /* CHỈ CÒN 3 HỌ MÀU. Trước đây có 34 màu rải khắp 4 vùng sắc: vàng, nâu, coral và XANH DƯƠNG — mà xanh dương không hề tồn tại trong logo lẫn video. Đó chính là chỗ làm trang trông mỗi thứ một màu. Giờ: 1. Trung tính ấm — lấy từ video (#D3A971 · #D6B38C · #B38D50) 2. Vàng champagne — điểm nhấn nền, cũng từ video 3. Coral — điểm nhấn duy nhất, đo từ logo Không còn baby blue. Không còn hồng-đất. */ --coral: #EB7472; /* đo từ logo — chỉ trang trí (2.7:1) */ --coral-deep: #B4453F; /* khi cần chữ nhỏ (5.1:1 trên ivory) */ --coral-tint: #F7E6E3; /* nền rất nhạt */ /* Ba bậc nền ảnh, cùng một tông ấm, chỉ khác độ sáng — thay cho blush/blue/sand vốn là ba SẮC khác nhau. Bé gái / bé trai đã được phân biệt bằng CHỮ trên thẻ. */ --tone-1: #F4E8DA; --tone-2: #EADCC8; --tone-3: #DFCEB5; /* Type */ --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Rhythm — 8pt base */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 5.5rem; --s10: 7.5rem; --gutter: 1.25rem; --maxw: 1240px; --narrow: 640px; /* Header height incl. its 1px bottom border. The full-screen hero pulls itself up by exactly this so 100svh really is one screen. */ --hdr-h: 63px; /* Section rhythm: generous on mobile, luxurious on desktop */ --section-y: 4.5rem; --radius: 999px; /* nút luôn bo tròn hết cỡ */ --radius-card: 1.125rem; /* thẻ/ảnh bo mềm, hợp tông "gần gũi" */ --hit: 48px; /* > 44px minimum touch target */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --shadow-soft: 0 1px 2px rgba(51, 36, 29, .04), 0 12px 32px -12px rgba(51, 36, 29, .12); --shadow-lift: 0 2px 4px rgba(51, 36, 29, .05), 0 24px 56px -20px rgba(51, 36, 29, .20); } @media (min-width: 768px) { :root { --gutter: 2.5rem; --section-y: 6.5rem; } } @media (min-width: 900px) { :root { --hdr-h: 85px; } } @media (min-width: 1100px) { :root { --gutter: 3.5rem; --section-y: 8.5rem; } } /* --- 2. Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 16px; /* never below 16 on mobile */ font-weight: 400; line-height: 1.7; letter-spacing: .005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } /* Focus: visible, warm, never removed */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 200; background: var(--espresso); color: var(--on-dark); padding: .75rem 1.25rem; font-size: .875rem; border-radius: 0 0 4px 4px; transition: transform .2s var(--ease); } .skip-link:focus { transform: translate(-50%, 0); } /* --- 3. Layout primitives ----------------------------------------------- */ /* Reserves the fixed header's space. Constant, so the header's shrink-on-scroll never shifts layout. The full-screen hero cancels it with a negative margin. */ main { padding-top: var(--hdr-h); } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: calc(var(--section-y) * .68); } /* Nối liền với khối chữ ngay trên: trên điện thoại khách thấy ảnh sớm hơn, không phải lướt qua một mảng trống. */ .section--flush-top { padding-top: 0; } @media (min-width: 900px) { .section--flush-top { padding-top: calc(var(--section-y) * .34); } } .section--cream { background: var(--cream); } .section--warm { background: var(--warm-white); } .section--dark { background: var(--espresso); color: var(--on-dark); } .section--dark .lede, .section--dark p { color: var(--on-dark-soft); } /* --- 4. Type scale ------------------------------------------------------- */ .eyebrow { font-size: .6875rem; /* 11px — decorative, paired with a real heading */ font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); display: flex; align-items: center; gap: .625rem; } .eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); flex: none; } .eyebrow--center { justify-content: center; } .eyebrow--center::after { content: ""; width: 1.75rem; height: 1px; background: linear-gradient(270deg, transparent, var(--gold)); flex: none; } .section--dark .eyebrow { color: var(--gold); } h1, .h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 7.4vw, 3.9rem); line-height: 1.14; letter-spacing: -.015em; text-wrap: balance; } h2, .h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 7.2vw, 3rem); line-height: 1.16; letter-spacing: -.012em; text-wrap: balance; } h3, .h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.125rem, 3.4vw, 1.375rem); line-height: 1.3; letter-spacing: -.005em; } .h4 { font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.45; letter-spacing: 0; } .lede { font-size: 1rem; line-height: 1.75; color: var(--ink-soft); max-width: 34ch; } .lede--wide { max-width: 46ch; } @media (min-width: 768px) { .lede { font-size: 1.0625rem; max-width: 48ch; } } .small { font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); } .tiny { font-size: .875rem; line-height: 1.55; color: var(--ink-faint); letter-spacing: .01em; } .serif-quote { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(1.125rem, 4.4vw, 1.5rem); line-height: 1.5; letter-spacing: -.005em; } /* Gold hairline — the "music box" motif, reused as a section joint */ .rule { width: 100%; height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--gold-veil) 18%, var(--gold-veil) 82%, transparent); } .rule--short { width: 2.5rem; height: 1px; background: var(--gold); opacity: .55; } /* Section header block */ .shead { display: grid; gap: var(--s4); } .shead .lede { margin-top: -.25rem; } .shead--center { justify-items: center; text-align: center; } .shead--center .lede { text-align: center; } @media (min-width: 900px) { .shead--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: var(--s6) var(--s8); } .shead--split > .eyebrow { grid-column: 1 / -1; } } /* Headline luôn dùng mực đậm nhất của thang — trước đây trùng màu với body (--ink), nên tiêu đề và chữ thường gần như cùng độ đậm. */ h1, h2, .h1, .h2, .dip__line { color: var(--espresso-2); } .section--dark h1, .section--dark h2, .section--dark .h1, .section--dark .h2 { color: var(--on-dark); } /* --- 5. Buttons --------------------------------------------------------- */ .btn { --btn-bg: var(--espresso); --btn-fg: var(--on-dark); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--hit); padding: .875rem 1.5rem; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid transparent; border-radius: var(--radius); font-size: .9375rem; font-weight: 500; letter-spacing: .01em; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease), border-color .3s var(--ease); -webkit-tap-highlight-color: transparent; } /* gold sweep on hover */ .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--gold-deep), var(--gold)); transform: translateY(101%); transition: transform .45s var(--ease-out); } .btn:hover::after, .btn:focus-visible::after { transform: translateY(0); } .btn:hover { box-shadow: var(--shadow-soft); } .btn:active { transform: translateY(1px); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: rgba(51,36,29,.22); } .btn--ghost:hover { --btn-fg: var(--espresso); border-color: transparent; } .btn--light { --btn-bg: var(--warm-white); --btn-fg: var(--ink); border-color: rgba(51,36,29,.10); } .btn--light:hover { --btn-fg: #fff; } .btn--onDark { --btn-bg: var(--on-dark); --btn-fg: var(--espresso); } .btn--onDark:hover { --btn-fg: #fff; } .btn--outlineDark { --btn-bg: transparent; --btn-fg: var(--on-dark); border-color: rgba(247,241,232,.32); } .btn--outlineDark:hover { --btn-fg: #fff; border-color: transparent; } .btn--block { width: 100%; } .btn--lg { min-height: 54px; padding-inline: 1.75rem; font-size: 1rem; } /* --- Liquid glass ------------------------------------------------------- Port của .liquid-glass / .liquid-glass-strong. Bản gốc là trắng-trên-#000 có video phía sau; trên nền ivory thì lớp nền 1% trắng gần như vô hình, nên phần NỀN được chỉnh lại theo từng biến thể — còn kỹ thuật thì giữ đúng: viền gradient 1.4px dựng bằng mask-composite, backdrop blur, inset highlight. */ .liquid-glass, .liquid-glass-strong { position: relative; overflow: hidden; border: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1); } .liquid-glass-strong { backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); box-shadow: 4px 4px 4px rgba(0, 0, 0, .05), inset 0 1px 1px rgba(255, 255, 255, .15); } .liquid-glass::before, .liquid-glass-strong::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } .liquid-glass::before { background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%); } .liquid-glass-strong::before { background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.5) 100%); } /* Hai biến thể nút kính. Nền đủ đặc để chữ vẫn đạt AA khi khung phim tối trôi qua. */ .btn--glass { --btn-bg: rgba(51, 36, 29, .82); --btn-fg: #fff; border-radius: 999px; } .btn--glass-light { --btn-bg: rgba(255, 252, 248, .5); --btn-fg: var(--ink); border-radius: 999px; } .btn--glass:hover, .btn--glass-light:hover { --btn-fg: #fff; } /* Quiet text link with an animated gold underline */ .tlink { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: .9375rem; font-weight: 500; color: var(--ink); position: relative; } .tlink > span { position: relative; } .tlink > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold-deep); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); } .tlink:hover > span::after, .tlink:focus-visible > span::after { transform: scaleX(1); } .tlink .arrow { transition: transform .35s var(--ease-out); color: var(--gold-deep); } .tlink:hover .arrow { transform: translateX(4px); } .section--dark .tlink { color: var(--on-dark); } .section--dark .tlink > span::after, .section--dark .tlink .arrow { color: var(--gold); background: var(--gold); } .section--dark .tlink .arrow { background: none; } /* --- 6. Header ---------------------------------------------------------- */ /* Transparent at rest so it floats over the hero video; solid once scrolled. At scrollY 0 on inner pages the canvas is ivory anyway, so this reads the same. */ /* FIXED, not sticky. The header shrinks on scroll (85→71px); while it sat in normal flow that shrink reflowed everything below it upward by 14px on the first scroll. Out of flow, the shrink costs nothing — `main` reserves the space instead, and the hero reclaims it to reach a true 100svh. */ .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: border-color .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease); } .hdr.is-stuck { border-bottom-color: rgba(194,160,106,.24); background: rgba(251,247,242,.94); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); } .hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: 62px; transition: height .4s var(--ease); } .hdr.is-stuck .hdr__in { height: 56px; } @media (min-width: 900px) { .hdr__in { height: 84px; } .hdr.is-stuck .hdr__in { height: 70px; } } .logo { display: flex; align-items: center; gap: .5rem; flex: none; min-height: 44px; } .logo img { height: 34px; width: auto; } @media (min-width: 900px) { .logo img { height: 42px; } } .logo__txt { display: none; } @media (min-width: 1100px) { .logo__txt { display: block; padding-left: .75rem; margin-left: .25rem; border-left: 1px solid var(--gold-veil); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.45; max-width: 8.5rem; } } .nav { display: none; } @media (min-width: 900px) { .nav { display: flex; align-items: center; gap: 2rem; margin-left: auto; margin-right: 2rem; } .nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--ink-soft); position: relative; transition: color .3s var(--ease); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px; background: var(--gold-deep); transform: scaleX(0); transform-origin: center; transition: transform .4s var(--ease-out); } .nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); } } .hdr__cta { display: inline-flex; } .hdr__cta .btn { min-height: 44px; padding: .5rem 1.15rem; font-size: .875rem; } @media (min-width: 900px) { .hdr__cta .btn { padding: .625rem 1.35rem; } } /* --- Header thu gọn (port của ) ---------------------- Bản gốc là một thanh pill nổi, cuộn xuống thì co về `width: 3rem` hiện icon Menu. Ở đây header giữ nguyên cấu trúc (logo + nav + burger) và CO LẠI thành viên tròn mang logo Aloha — thu về icon Menu chung chung sẽ mất hẳn thương hiệu ở đúng lúc người xem đang cuộn sâu nhất. Header là position:fixed nên đổi chiều cao không làm xô lệch nội dung. */ .hdr__in { position: relative; transition: max-width .55s cubic-bezier(.22, 1.1, .36, 1), height .45s var(--ease), padding-inline .45s var(--ease), border-radius .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); } .hdr.is-collapsed { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .hdr.is-collapsed .hdr__in { max-width: 58px; height: 58px; padding-inline: 0; border-radius: 999px; background: rgba(251, 247, 242, .92); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 8px 26px -10px rgba(51, 36, 29, .3), inset 0 1px 1px rgba(255, 255, 255, .6); } .hdr.is-collapsed .logo, .hdr.is-collapsed .nav, .hdr.is-collapsed .burger { opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); } .hdr__peek { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; background: none; cursor: pointer; opacity: 0; scale: .8; pointer-events: none; transition: opacity .25s var(--ease), scale .4s var(--ease-out); } .hdr__peek img { width: 32px; height: auto; } .hdr.is-collapsed .hdr__peek { opacity: 1; scale: 1; pointer-events: auto; transition-delay: .15s; } .hdr.is-collapsed .hdr__peek:hover { scale: 1.08; } .hdr.is-collapsed .hdr__peek:active { scale: .94; } /* Mobile menu */ .burger { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -.4rem; background: none; border: 0; cursor: pointer; } .burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; } .burger span + span { margin-top: 5px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (min-width: 900px) { .burger { display: none; } } .msheet { position: fixed; inset: var(--hdr-h) 0 auto; z-index: 99; background: var(--ivory); border-bottom: 1px solid var(--gold-veil); padding: var(--s4) var(--gutter) var(--s6); display: grid; gap: .25rem; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .4s var(--ease-out), opacity .3s var(--ease), visibility .3s; max-height: calc(100svh - var(--hdr-h)); overflow-y: auto; } .msheet.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .msheet a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding-block: .5rem; font-family: var(--serif); font-size: 1.125rem; font-weight: 500; border-bottom: 1px solid rgba(51,36,29,.07); } .msheet a .arrow { color: var(--gold-deep); } .msheet__foot { margin-top: var(--s4); display: grid; gap: .625rem; } @media (min-width: 900px) { .msheet { display: none; } } /* --- 7. Hero — full-screen video, everything centred ------------------- */ /* The music box footage runs full-bleed behind an ivory haze. Text sits on the haze, never on a face — the subject here is an object, not a baby. */ .hero { position: relative; /* The sticky header sits in normal flow, so the hero must reclaim that height to actually fill one screen — pull up by --hdr-h, pad it back inside. */ margin-top: calc(var(--hdr-h) * -1); min-height: 100vh; min-height: 100svh; /* no jump when mobile browser chrome hides */ display: grid; align-items: center; padding-block: calc(var(--hdr-h) + var(--s6)) var(--s9); overflow: hidden; background: var(--cream); /* shows while the poster decodes */ isolation: isolate; } /* Landscape phones: full height would squash the copy — let it size to content. */ @media (max-height: 560px) { .hero { min-height: 0; padding-block: calc(var(--hdr-h) + var(--s5)) var(--s7); } } /* -- background layers -- */ .hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; } /* FULL SCREEN. `cover` để khung hình phủ kín màn ở mọi tỉ lệ. scale(1.02) chỉ để che mép bị nhoè do filter blur — bản trước dùng 1.05, tức xén thừa 3% hoàn toàn không cần thiết. Trên desktop 16:9 thì cover trùng khít, không cắt gì; trên máy dọc thì hai bên bị xén — đó là hình học, muốn vừa full màn vừa nguyên khung thì phải render bản dọc 9:16. */ .hero__bg > video, .hero__fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: blur(1.5px) brightness(1.03) saturate(.97); transform: scale(1.02); } /* Ảnh poster đứng ngay dưới video, cùng khung hình — nên lúc video chưa tải xong khách đã thấy đúng bố cục đó rồi, không bị nhảy. */ /* NOTE — mobile crop. The source is 16:9, so a portrait phone shows a ~25%-wide vertical slice (canopy → pillar → the engraved "Baby Aloha" plate). That reads well as ambient texture, which is this layer's job now. For a fuller mobile frame, render a 9:16 cut and add it as a first in index.html: */ .hero__vid { opacity: 0; transition: opacity 1.1s var(--ease); } .hero__vid.is-ready { opacity: 1; } /* The ivory haze. Sized so the WHOLE copy column sits on a light field, not just the middle: ~92% white at centre, ~81% at the eyebrow, ~66% at the meta row. Worst case (copy over the darkest greenery in frame) still clears AA. */ .hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 95% 80% at 50% 46%, rgba(255,252,248,.68), rgba(255,252,248,.36) 58%, rgba(255,252,248,.18) 100%), linear-gradient(180deg, rgba(251,247,242,.26) 0%, rgba(251,247,242,.20) 45%, rgba(251,247,242,.46) 100%); } /* -- Elegant floating shapes ------------------------------------------------ Port of the HeroGeometric effect, minus framer-motion. Two nested layers because entry and float both animate `transform`: .shape = entry (opacity + translateY(-150px) + rotate offset by -15deg) .shape__i = the 12s float loop .shape__f = the visual capsule Recoloured to the Aloha palette (champagne / blush / baby blue / sand) — indigo-rose-violet-amber-cyan would fight the brand. */ .hero__shapes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .shape { position: absolute; animation: shapeIn 2.4s cubic-bezier(.23, .86, .39, .96) var(--delay, 0s) both; } @keyframes shapeIn { from { opacity: 0; transform: translateY(-150px) rotate(calc(var(--r) - 15deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--r)); } } .shape__i { position: relative; width: 100%; height: 100%; animation: shapeFloat 12s ease-in-out infinite; } @keyframes shapeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(15px); } } /* The original's `border-white/[0.15]` glows against #030303. Over ivory the same idea has to invert: a light border becomes a highlight rather than an outline, and the tint carries the shape. Otherwise these read as hard grey pills. */ .shape__f { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c), transparent 88%); border: 1px solid rgba(255, 252, 248, .55); box-shadow: 0 8px 32px rgba(255, 252, 248, .4), inset 0 1px 0 rgba(255, 252, 248, .65); } .shape__f::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 50%, rgba(255, 252, 248, .3), transparent 72%); } /* Kept quiet on purpose — the brief asks for "tối giản, không nhiều hiệu ứng". */ .hero__shapes { opacity: .68; } /* Sizes use clamp() instead of the original fixed px so a 600px capsule does not swallow a 375px screen. Positions follow the original composition. */ /* Tông lấy thẳng từ khung hình video (đo được: #D3A971 · #D6B38C · #B38D50 · #CA9655). Trước đây shape 2 là hồng và shape 3 là baby blue — hai nốt màu KHÔNG có trong video, nên trên nền vàng ấm chúng đọc thành vệt bẩn chứ không phải dải sáng. Giờ cả 5 đều nằm trong họ vàng–kem của chính đoạn phim. */ .shape--1 { --c: rgba(179,141,80,.34); width: clamp(320px, 46vw, 600px); height: clamp(76px, 11vw, 140px); left: -10%; top: 15%; } .shape--2 { --c: rgba(214,179,140,.44); width: clamp(260px, 38vw, 500px); height: clamp(64px, 9vw, 120px); right: -5%; top: 70%; } .shape--3 { --c: rgba(211,169,113,.34); width: clamp(170px, 24vw, 300px); height: clamp(48px, 6vw, 80px); left: 5%; bottom: 5%; } .shape--4 { --c: rgba(234,223,209,.60); width: clamp(120px, 16vw, 200px); height: clamp(38px, 4.6vw, 60px); right: 15%; top: 10%; } .shape--5 { --c: rgba(255,252,248,.62); width: clamp(90px, 12vw, 150px); height: clamp(28px, 3vw, 40px); left: 20%; top: 5%; } @media (min-width: 768px) { .shape--1 { left: -5%; top: 20%; } .shape--2 { right: 0; top: 75%; } .shape--3 { left: 10%; bottom: 10%; } .shape--4 { right: 20%; top: 15%; } .shape--5 { left: 25%; top: 10%; } } /* -- Badge pill (replaces the eyebrow in the hero only) -------------------- */ .hbadge { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 999px; background: rgba(255, 252, 248, .62); border: 1px solid rgba(194, 160, 106, .34); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } /* The one place the brand coral earns a spot outside the logo. */ .hbadge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; } /* -- centred content -- */ .hero__in { position: relative; z-index: 1; /* Explicit full-width column: an `auto` column would size to the h1's own intrinsic width, making `width:100%` on the h1 resolve circularly. */ display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--s5); /* +gutter*2 because this element also carries `.wrap`, whose padding-inline would otherwise eat into the measure. */ max-width: calc(46rem + var(--gutter) * 2); margin-inline: auto; } /* Capped at 3.5rem (not 3.9) so "Tuổi thơ thì không quay lại." holds one line on desktop. The italic clause is its own block that balances internally, so it never strands a single word — the
is redundant once it's a block. */ /* width:100% — under `justify-items:center` the h1 would otherwise shrink to a `balance`-influenced intrinsic width and wrap earlier than it needs to. */ .hero h1 { width: 100%; max-width: 26ch; font-size: clamp(1.55rem, 7.6vw, 3.9rem); } .hero h1 br { display: none; } .hero h1 .ln1 { display: block; color: var(--ink); } .hero h1 .em { display: block; text-wrap: balance; font-style: italic; color: var(--gold-text); } /* Gradient-clipped headline, as in HeroGeometric — but running through the brand's own tones. Solid colours above stay as the fallback. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { .hero h1 .ln1, .hero h1 .em { -webkit-background-clip: text; background-clip: text; color: transparent; } .hero h1 .ln1 { background-image: linear-gradient(180deg, #2A1E19, rgba(51, 36, 29, .82)); } /* Stops kept dark enough that the lightest one still clears 3:1 for display text. */ .hero h1 .em { background-image: linear-gradient(100deg, var(--gold-text), #5E4526 46%, var(--gold-text)); } /* Khi gắn .shimmer, vệt quét thay cho gradient tĩnh. Cần đủ specificity để thắng `.hero h1 .em` ở trên, và trả `color` về màu nền (không phải transparent) vì gradient của shimmer dựa trên currentColor. */ .hero h1 .em.shimmer { color: var(--shimmer-base); background-image: linear-gradient(to right, currentColor 0%, var(--shimmer-hi) 40%, var(--shimmer-hi) 60%, currentColor 100%); -webkit-text-fill-color: transparent; } } /* Darker than the default lede — it sits over moving footage. */ .hero .lede { max-width: 38ch; color: var(--ink); } /* Over video, small copy needs the extra help: a deeper bronze for the eyebrow (5.1:1 worst case vs 3.9:1 for --gold-text) and full ink for the meta row. */ /* Full ink: the meta row sits lowest, where the veil is thinnest (~66%). --ink-soft only reached 3.6:1 there; --ink gives 7.4:1. */ .hero .hero__meta { color: var(--ink); } /* A soft ivory halo lifts every glyph off the footage. Invisible on a light field, decisive when a dark frame drifts behind the text. */ .hero__in > * { text-shadow: 0 0 14px rgba(255,252,248,.85), 0 1px 2px rgba(255,252,248,.7); } .hero__in > .hero__ctas { text-shadow: none; } /* buttons have their own fills */ /* The h1 is background-clipped, so its glyphs are transparent — a text-shadow would show through as a blurred silhouette. drop-shadow() haloes the painted gradient instead, which is what we actually want. */ .hero__in > h1 { text-shadow: none; filter: drop-shadow(0 0 12px rgba(255, 252, 248, .9)) drop-shadow(0 1px 1px rgba(255, 252, 248, .8)); } .hero__ctas { display: grid; gap: .625rem; width: 100%; max-width: 380px; } @media (min-width: 560px) { .hero__ctas { display: flex; justify-content: center; max-width: none; } } @media (min-width: 560px) { .hero__ctas .btn { white-space: nowrap; } } /* A plain transparent ghost button would disappear over video. */ .hero__ctas .btn--ghost { --btn-bg: rgba(255,252,248,.78); border-color: rgba(51,36,29,.16); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* -- sound toggle -- */ /* Browsers refuse autoplay with audio, so the video starts muted and ba mẹ turns sound on here. Without this the video would simply never play. */ /* Cố định theo màn hình, không nằm trong hero: nhạc chạy suốt trang nên khách cuộn tới đâu cũng phải tắt được (WCAG 1.4.2). */ .soundBtn { position: fixed; z-index: 94; left: var(--gutter); bottom: calc(68px + .75rem + env(safe-area-inset-bottom)); /* trên thanh CTA dính đáy */ display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem .5rem .7rem; background: rgba(255,252,248,.8); color: var(--ink); border: 1px solid rgba(194,160,106,.42); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .8125rem; letter-spacing: .04em; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .soundBtn:hover { background: var(--espresso); color: var(--on-dark); border-color: transparent; } .soundBtn__ico { display: grid; place-items: center; width: 22px; height: 22px; color: var(--gold-deep); flex: none; } .soundBtn:hover .soundBtn__ico { color: var(--gold); } .soundBtn .ico-on { display: none; } .soundBtn[aria-pressed="true"] .ico-on { display: block; } .soundBtn[aria-pressed="true"] .ico-off { display: none; } @media (max-width: 419px) { .soundBtn { padding: .5rem; width: 44px; justify-content: center; } .soundBtn__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* Desktop không có thanh CTA dính đáy nên hạ nút xuống sát góc. Góc phải dành cho FAB Messenger/gọi, nên nút tiếng ở góc trái. */ @media (min-width: 900px) { .soundBtn { left: 1.25rem; bottom: 1.25rem; } } /* -- scroll cue -- */ .hero__scroll { position: absolute; z-index: 2; left: 50%; translate: -50% 0; bottom: calc(var(--s6) + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: .5rem; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); } .hero__scroll i { display: block; width: 1px; height: 2.25rem; background: linear-gradient(180deg, var(--gold-veil), var(--gold)); overflow: hidden; position: relative; } .hero__scroll i::after { content: ""; position: absolute; left: -1px; width: 3px; height: 40%; background: var(--gold-deep); border-radius: 2px; animation: cue 2.6s var(--ease) infinite; } @keyframes cue { 0% { top: -40%; } 60%, 100% { top: 100%; } } @media (max-height: 620px) { .hero__scroll { display: none; } } .hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem 1.125rem; color: var(--ink-faint); font-size: .9375rem; letter-spacing: .01em; } .hero__meta li { display: flex; align-items: center; gap: .45rem; } .hero__meta li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); } .hero__meta--rot { gap: .1rem .4rem; align-items: center; } /* --- 8. Story diptych — the Big Idea rendered as layout ----------------- */ .diptych { display: grid; gap: 0; border-block: 1px solid var(--gold-veil); } .dip { padding-block: var(--s6); display: grid; gap: var(--s3); align-content: start; } .dip + .dip { border-top: 1px solid var(--gold-veil); } .dip__label { font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); } .dip__line { font-family: var(--serif); font-size: clamp(1.5rem, 6.6vw, 2.4rem); line-height: 1.2; font-weight: 500; } .dip--then .dip__line { font-style: italic; } @media (min-width: 800px) { .diptych { grid-template-columns: 1fr 1fr; } .dip { padding-block: var(--s7); padding-right: var(--s7); } .dip + .dip { border-top: 0; border-left: 1px solid var(--gold-veil); padding-left: var(--s7); padding-right: 0; } } /* --- Rotating word (port của animated-hero) ---------------------- Bản gốc: mỗi từ là một motion.span xếp chồng, từ đang hiện ở y=0, từ đã qua bay lên -150, từ chưa tới nằm dưới +150, spring stiffness 50. Ở đây bản gốc để từ xoay trên MỘT DÒNG RIÊNG (`flex w-full justify-center`). Aloha giữ nó nằm cùng dòng và cho khung tự co giãn theo bề rộng từ đang hiện, nên hero không cao thêm một dòng nào. */ /* height + line-height khớp nhau để chữ nằm giữa hộp. Hộp có overflow:hidden nên baseline của nó là mép dưới — căn baseline sẽ đẩy chữ lên cao hơn dòng bên cạnh, vì vậy dòng cha dùng align-items:center. */ .rotw { position: relative; display: inline-block; width: var(--w, auto); height: 1.4em; overflow: hidden; transition: width .5s cubic-bezier(.22, 1, .36, 1); } .rotw__w { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1.4; color: #52391F; /* đồng vàng đậm — vẫn khác tông chữ dẫn, và đạt AA */ font-weight: 500; transform: translateY(150%); opacity: 0; /* Xấp xỉ spring(stiffness 50, damping 10): hơi vọt nhẹ rồi ổn định. */ transition: transform .85s cubic-bezier(.22, 1.08, .36, 1), opacity .45s var(--ease); } .rotw__w.is-prev { transform: translateY(-150%); opacity: 0; } .rotw__w.is-on { transform: translateY(0); opacity: 1; } /* Không có JS, hoặc người dùng tắt chuyển động: về đúng dãy chữ tĩnh như cũ. */ .rotw--static { width: auto; height: auto; overflow: visible; } .rotw--static .rotw__w { position: static; transform: none; opacity: 1; display: inline; transition: none; } .rotw--static .rotw__w + .rotw__w::before { content: " · "; color: var(--gold); } /* --- Shimmer text (port của ) ------------------------------ Bản gốc quét `rgba(255,255,255,.6)` — đúng cho chữ trắng trên nền tối. Trên hero nền sáng của Aloha, vệt trắng đó chỉ còn 1.23:1: chữ biến mất mỗi lần quét. Nên highlight được ĐẢO thành vàng cổ đậm hơn nền (3.56:1) — vẫn thấy rõ vệt sáng chạy qua mà không tụt dưới ngưỡng 3:1 của chữ lớn. Trên nền tối thì dùng .shimmer--onDark, giữ đúng vệt trắng của bản gốc. */ .shimmer { --shimmer-base: #6B5029; /* 6.1:1 */ --shimmer-hi: #7C6440; /* đậm lại vì lớp sương đã nhạt đi */ color: var(--shimmer-base); background-color: currentColor; background-image: linear-gradient(to right, currentColor 0%, var(--shimmer-hi) 40%, var(--shimmer-hi) 60%, currentColor 100%); background-repeat: no-repeat; background-size: 50% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Chu kỳ 3s = 1.5s quét + 1.5s nghỉ, thay cho repeatDelay của Framer Motion, thứ mà CSS animation không có sẵn. */ animation: shimmer 3s linear 1.5s infinite; } .shimmer--onDark { --shimmer-base: #F7F1E8; --shimmer-hi: rgba(255, 255, 255, .55); } @keyframes shimmer { 0% { background-position-x: -100%; } 50% { background-position-x: 250%; } 100% { background-position-x: 250%; } } @media (prefers-reduced-motion: reduce) { .shimmer { animation: none; background-image: none; -webkit-text-fill-color: currentColor; } } /* --- Scroll-converge text (port của CharacterV1) ------------------------ Bản gốc: mỗi ký tự lệch `distanceFromCenter * 50px` + xoay `* 50deg`, tụ về 0 theo scrollYProgress [0 → 0.5]. Ở đây biên độ hạ xuống nhiều (16px / 2deg) — ±450px của bản gốc sẽ ném chữ ra khỏi màn hình và đọc như demo kỹ thuật, không hợp một thương hiệu ấm và tối giản. */ .sc { display: inline-block; perspective: 500px; /* rotateX cần perspective ở cha */ } .sc__w { display: inline-block; white-space: nowrap; } /* không cho ngắt giữa từ */ .sc__c { display: inline-block; transform: translateX(calc(var(--i) * var(--sc-x, 7) * (1 - var(--p, 1)) * 1px)) translateY(calc(var(--a) * var(--sc-y, 3) * (1 - var(--p, 1)) * 1px)) rotateX(calc(var(--i) * var(--sc-r, 2) * (1 - var(--p, 1)) * 1deg)); will-change: transform; } @media (prefers-reduced-motion: reduce) { .sc__c { transform: none; } } /* Story beats — 3 short reading pulses, never a wall of text */ .beats { display: grid; gap: var(--s5); counter-reset: b; } .beat { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; } .beat__n { counter-increment: b; width: 1.75rem; height: 1.75rem; flex: none; display: grid; place-items: center; border: 1px solid var(--gold-veil); border-radius: 50%; font-family: var(--serif); font-size: .8125rem; color: var(--gold-text); } .beat__n::before { content: counter(b); } .beat p { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 40ch; } .beat p strong { color: var(--ink); font-weight: 600; } @media (min-width: 900px) { .beats { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } } /* Mobile reads the words first, then the pictures. Desktop puts frames on the left. */ .story__grid { display: grid; gap: var(--s6); } @media (min-width: 900px) { .story__grid { grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: var(--s8); align-items: center; } .story__grid > .ph-pair { order: -1; } } /* --- 9. Photo placeholder ("hanging frame" from the music box) ---------- */ /* Drop real Aloha photography in place of .ph — the caption is the shot brief. */ .ph { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-card); background: radial-gradient(120% 90% at 50% 0%, rgba(255,252,248,.9), transparent 60%), linear-gradient(160deg, var(--tone-1) 0%, var(--cream) 46%, var(--tone-2) 100%); display: grid; place-items: center; isolation: isolate; } .ph--blush { background: linear-gradient(160deg, var(--tone-1), var(--warm-white) 72%, var(--tone-1)); } .ph--blue { background: linear-gradient(160deg, var(--tone-2), var(--cream) 72%, var(--tone-2)); } .ph--sand { background: linear-gradient(160deg, var(--tone-3), var(--sand) 72%, var(--tone-3)); } .ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(194,160,106,.42); border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -24px 48px -24px rgba(51,36,29,.10); } .ph__note { display: grid; gap: .5rem; justify-items: center; text-align: center; padding: var(--s5) var(--s4); max-width: 26ch; } .ph__note svg { opacity: .5; color: var(--gold-deep); } .ph__note span { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); opacity: .95; line-height: 1.6; } .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ph--45 { aspect-ratio: 4 / 5; } .ph--11 { aspect-ratio: 1; } .ph--34 { aspect-ratio: 3 / 4; } .ph--32 { aspect-ratio: 3 / 2; } .ph--169 { aspect-ratio: 16 / 9; } .ph--tall { aspect-ratio: 2 / 3; } /* Stacked pair — mimics two frames hanging at different heights */ .ph-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; } .ph-pair > :nth-child(2) { margin-top: var(--s6); } @media (min-width: 900px) { .ph-pair { gap: var(--s4); } .ph-pair > :nth-child(2) { margin-top: var(--s8); } } .ph-pair figure { margin: 0; } /* Story pair carries real photography, so it stacks full-width on phones — at 2 columns a 3:2 family shot lands ~160px wide and the faces disappear. */ .ph-pair--story { grid-template-columns: 1fr; gap: var(--s4); } .ph-pair--story > :nth-child(2) { margin-top: 0; } @media (min-width: 600px) { /* Centred, not top-aligned: the album (3:4) is twice the height of the family shot (3:2), so `align-items:start` left a ~245px hole under the short one. */ .ph-pair--story { grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: center; } .ph-pair--story > :nth-child(2) { margin-top: 0; } } @media (min-width: 900px) { .ph-pair--story { gap: var(--s4); } } /* --- 10. Carousel (swipe on mobile, arrows on desktop) ------------------ */ .carousel { position: relative; } .carousel__track { display: grid; grid-auto-flow: column; gap: var(--s4); grid-auto-columns: 78%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-block: .25rem var(--s2); margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track > * { scroll-snap-align: start; } @media (min-width: 560px) { .carousel__track { grid-auto-columns: 46%; } } @media (min-width: 900px) { .carousel__track { grid-auto-columns: 31.5%; gap: var(--s5); } } @media (min-width: 1240px) { .carousel__track { grid-auto-columns: 30%; } } .carousel__nav { display: none; } @media (min-width: 900px) { .carousel__nav { display: flex; gap: .5rem; } .cbtn { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(51,36,29,.18); border-radius: 50%; background: transparent; cursor: pointer; color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s; } .cbtn:hover { background: var(--espresso); color: var(--on-dark); border-color: transparent; } .cbtn[disabled] { opacity: .3; cursor: default; } .cbtn[disabled]:hover { background: transparent; color: var(--ink); border-color: rgba(51,36,29,.18); } } .carousel__dots { display: flex; gap: .375rem; justify-content: center; margin-top: var(--s4); } .carousel__dots button { width: 30px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .carousel__dots button::before { content: ""; width: 100%; height: 2px; background: rgba(51,36,29,.16); transition: background .3s var(--ease); } .carousel__dots button[aria-current="true"]::before { background: var(--gold-deep); } @media (min-width: 900px) { .carousel__dots { display: none; } } .swipe-hint { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .swipe-hint svg { animation: nudge 2.4s var(--ease) infinite; } @keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } } @media (min-width: 900px) { .swipe-hint { display: none; } } /* --- 10b. Photo fan ("PhotoGallery" port) ------------------------------- */ /* The effect without framer-motion: five photos start stacked, then spring out into an overlapping fan, staggered 0.15s apart. Each can be tugged and springs back. Sizes are fluid so the fan fits a 375px phone — the original's fixed ±320px offsets need ~860px and overflow on mobile. */ .pgal { --ph: clamp(116px, 29vw, 220px); /* photo size */ --step: clamp(44px, 11.6vw, 160px); /* horizontal gap between photos */ --yf: .5; /* vertical jitter multiplier */ position: relative; display: grid; place-items: center; min-height: calc(var(--ph) * 1.6); margin-block: var(--s6); } @media (min-width: 768px) { .pgal { --yf: 1; } } /* Faint champagne graph paper, radially masked — the original's grid, warmed up. */ .pgal__grid { position: absolute; inset: auto 0 auto 0; top: 12%; height: 300px; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(to right, rgba(194,160,106,.30) 1px, transparent 1px), linear-gradient(to bottom, rgba(194,160,106,.30) 1px, transparent 1px); background-size: 3rem 3rem; -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%); mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%); } @media (max-width: 767px) { .pgal__grid { display: none; } } .pgal__stage { position: relative; z-index: 1; width: var(--ph); height: var(--ph); } /* Outer layer = position only (so drag/rotate can own the inner transform). */ .pgal__item { position: absolute; left: 0; top: 0; width: var(--ph); height: var(--ph); z-index: var(--z); transform: translate3d(0, 0, 0); /* collapsed: all five stacked */ /* Overshooting bezier stands in for spring(stiffness 70, damping 12). */ transition: transform .95s cubic-bezier(.34, 1.4, .64, 1); transition-delay: calc(var(--order) * .15s); } .pgal.is-fanned .pgal__item { transform: translate3d(calc(var(--step) * var(--i)), calc(var(--y) * var(--yf)), 0); } .pgal__item:hover, .pgal__item:focus-within { z-index: 9999; } /* Inner layer = rotation + hover scale + drag offset. */ .pgal__ph { position: relative; display: block; width: 100%; height: 100%; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border-radius: 18px; } .pgal__ph:active { cursor: grabbing; } .pgal__ph.is-dragging { transition: none; cursor: grabbing; --sc: 1.08; } @media (hover: hover) { /* whileHover in the original replaces the random tilt with a fixed ±2deg. */ .pgal__ph:hover { --sc: 1.1; --rot: calc(2deg * var(--dir)); } } .pgal__ph:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; } .pgal__ph .ph { height: 100%; border-radius: 18px; box-shadow: 0 2px 6px rgba(51,36,29,.06), 0 18px 40px -18px rgba(51,36,29,.28); } .pgal__ph .ph::after { border-radius: 18px; } /* Navigation lives BELOW the fan, not inside the photos. At every viewport the overlap is wider than a label ("Baby bé trai" needs ~100px, the step is 44–160), so in-photo captions get clipped — and each photo's exposed sliver would be a 44px tap target. Pills solve legibility, hit area and keyboard order at once. */ .pgal__names { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: var(--s5); } .pgal__names a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(51,36,29,.16); background: rgba(255,252,248,.6); font-size: .875rem; color: var(--ink-soft); white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .pgal__names a:hover { background: var(--espresso); color: var(--on-dark); border-color: transparent; } .pgal__hint { display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--s3); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .pgal__hint svg { color: var(--gold-deep); } /* Gradient-clipped section title, as in the original's

. */ .gtitle .accent { color: var(--coral-deep); } @supports ((background-clip: text) or (-webkit-background-clip: text)) { .gtitle { background-image: linear-gradient(90deg, #2A1E19, #4A3529 50%, #2A1E19); -webkit-background-clip: text; background-clip: text; color: transparent; } .gtitle .accent { background-image: linear-gradient(90deg, var(--coral-deep), #8E3B36); -webkit-background-clip: text; background-clip: text; color: transparent; } } /* --- 11. Collection card ------------------------------------------------ */ .ccard { display: grid; gap: var(--s4); } .ccard__media { position: relative; overflow: hidden; border-radius: var(--radius-card); } .ccard__media .ph, .ccard__media img { transition: transform 1.1s var(--ease-out); } .ccard:hover .ccard__media .ph, .ccard:hover .ccard__media img { transform: scale(1.035); } .ccard__idx { position: absolute; top: .75rem; left: .75rem; z-index: 2; font-family: var(--serif); font-size: .75rem; letter-spacing: .1em; padding: .3rem .55rem; background: rgba(255,252,248,.86); color: var(--gold-text); border-radius: 2px; } .ccard__body { display: grid; gap: .5rem; } .ccard__name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); } .ccard h3 { font-style: italic; } .ccard p { font-size: .9375rem; color: var(--ink-soft); line-height: 1.6; } /* --- 12. Concept — age ruler + cards ------------------------------------ */ /* Parents self-select by where their child is right now, not by reading a grid. */ .ruler { position: relative; margin-block: var(--s6) var(--s5); } .ruler__line { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-veil) 22%, var(--gold-veil) 78%, transparent); } .ruler__marks { display: flex; justify-content: space-between; margin-top: .625rem; } .ruler__marks span { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } /* --- Card fan (port của card-fan-carousel) ----------------- Thẻ xếp thành hình quạt: thẻ giữa thẳng scale 1, hai bên nghiêng dần ±21° và nhỏ lại. Vị trí do JS tính rồi ghi vào --tx/--ty/--rot/--sc. Bản gốc CHỈ tương tác bằng hover nên trên điện thoại là một khối tĩnh — ở đây có thêm mũi tên, chấm và bấm-vào-thẻ để cả 6 nhóm đều tới được. */ .fan { margin-top: var(--s6); } .fan__stage { position: relative; height: calc(var(--fan-w) * 4 / 3 + var(--fan-extra, 4rem)); --fan-w: clamp(132px, 42vw, 240px); perspective: 1200px; } .fan__card { position: absolute; left: 50%; top: 0; width: var(--fan-w); margin-left: calc(var(--fan-w) / -2); border-radius: 1rem; overflow: hidden; transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); z-index: var(--z, 1); transition: transform .55s cubic-bezier(.34, 1.3, .5, 1), opacity .4s var(--ease); box-shadow: 0 10px 34px -12px rgba(51, 36, 29, .35); will-change: transform; } .fan__card .ph { border-radius: 1rem; } .fan__card .ph::after { border-radius: 1rem; } /* Brief chỉ hiện trên thẻ đang chọn — trên các thẻ nghiêng phía sau, chữ nhỏ xoay chồng lên nhau đọc rất rối. */ .fan__card .ph__note { padding: var(--s4) var(--s3); opacity: 0; transition: opacity .35s var(--ease); } .fan__card.is-on .ph__note { opacity: 1; } .fan__card .ph__note span { font-size: .5625rem; letter-spacing: .1em; } .fan__age { position: absolute; top: .6rem; left: .6rem; z-index: 2; padding: .2rem .5rem; border-radius: 999px; background: rgba(255, 252, 248, .9); color: var(--gold-text); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .fan__name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.6rem .7rem .6rem; background: linear-gradient(180deg, transparent, rgba(255, 252, 248, .95) 55%); font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink); text-align: center; } /* Thẻ chưa được chọn mờ nhẹ để mắt biết đang xem thẻ nào. */ .fan__card { opacity: .82; } .fan__card.is-on { opacity: 1; } .fan__card.is-on .fan__name { font-size: 1.0625rem; } .fan__nav { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-top: var(--s5); } .fan__btn { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 1.5px solid rgba(51, 36, 29, .14); border-radius: 50%; background: rgba(255, 252, 248, .6); color: var(--ink-soft); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .fan__btn:hover { border-color: rgba(51, 36, 29, .34); color: var(--ink); } .fan__btn:active { opacity: .7; } .fan__dots { display: flex; align-items: center; gap: .5rem; } .fan__dots button { width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .fan__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(51, 36, 29, .16); transition: background .3s var(--ease), scale .3s var(--ease); } .fan__dots button[aria-current="true"]::before { background: rgba(51, 36, 29, .7); scale: 1.3; } .fan__info { position: relative; margin-top: var(--s5); text-align: center; } .fan__panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease); display: grid; justify-items: center; gap: var(--s4); } .fan__panel.is-on { position: relative; opacity: 1; pointer-events: auto; transform: none; } .fan__panel p { font-size: 1rem; color: var(--ink-soft); max-width: 34ch; } @media (prefers-reduced-motion: reduce) { .fan__card, .fan__panel { transition: none; } } .cgrid { display: grid; gap: var(--s5); } @media (min-width: 620px) { .cgrid { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); } } @media (min-width: 1000px) { .cgrid { grid-template-columns: repeat(3, 1fr); gap: var(--s7) var(--s5); } } .gcard { display: grid; gap: var(--s4); align-content: start; min-height: var(--hit); position: relative; } .gcard__media { position: relative; overflow: hidden; border-radius: var(--radius-card); } .gcard__media .ph { transition: transform 1.1s var(--ease-out); } .gcard:hover .gcard__media .ph { transform: scale(1.04); } .gcard__tag { position: absolute; bottom: .75rem; left: .75rem; z-index: 2; padding: .3rem .6rem; border-radius: 999px; background: rgba(255,252,248,.9); color: var(--gold-text); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; } .gcard__body { display: grid; gap: .375rem; } .gcard p { font-size: .9375rem; color: var(--ink-soft); } .gcard .tlink { margin-top: .25rem; } /* whole card is the hit area, but the link keeps the accessible name */ .gcard__hit { position: absolute; inset: 0; z-index: 3; border-radius: var(--radius-card); } /* --- 13. Trust / experience -------------------------------------------- */ .tgrid { display: grid; gap: 0; } .titem { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid rgba(194,160,106,.22); } .titem:first-child { border-top: 1px solid rgba(194,160,106,.22); } .titem__ico { width: 2.25rem; height: 2.25rem; flex: none; display: grid; place-items: center; color: var(--gold-deep); border: 1px solid var(--gold-veil); border-radius: 50%; } .section--dark .titem { border-color: rgba(247,241,232,.14); } .section--dark .titem:first-child { border-top-color: rgba(247,241,232,.14); } .section--dark .titem__ico { color: var(--gold); border-color: rgba(194,160,106,.4); } .titem__body { display: grid; gap: .3rem; } .titem p { font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); max-width: 44ch; } @media (min-width: 700px) { .tgrid { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } .titem:nth-child(2) { border-top: 1px solid rgba(194,160,106,.22); } .section--dark .titem:nth-child(2) { border-top-color: rgba(247,241,232,.14); } } @media (min-width: 1100px) { .tgrid { grid-template-columns: repeat(3, 1fr); } .titem:nth-child(3) { border-top: 1px solid rgba(194,160,106,.22); } .section--dark .titem:nth-child(3) { border-top-color: rgba(247,241,232,.14); } } .trust__layout { display: grid; gap: var(--s6); } @media (min-width: 1000px) { .trust__layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s8); align-items: start; } .trust__layout .shead { position: sticky; top: 110px; } } /* --- 14. Value / service (progressive disclosure) ---------------------- */ .acc { border-top: 1px solid rgba(194,160,106,.22); } .acc__item { border-bottom: 1px solid rgba(194,160,106,.22); } .acc__btn { width: 100%; min-height: 64px; padding: var(--s4) 0; display: flex; align-items: center; gap: var(--s4); background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); } .acc__btn:hover .acc__ttl { color: var(--gold-text); } .acc__num { font-family: var(--serif); font-size: .8125rem; color: var(--gold-text); flex: none; width: 1.5rem; } .acc__ttl { font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.45; flex: 1; transition: color .3s var(--ease); } .acc__ico { flex: none; width: 1.25rem; height: 1.25rem; position: relative; } .acc__ico::before, .acc__ico::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--gold-deep); transition: transform .4s var(--ease-out), opacity .3s; } .acc__ico::after { transform: rotate(90deg); } .acc__btn[aria-expanded="true"] .acc__ico::after { transform: rotate(0); opacity: 0; } .acc__panel { overflow: hidden; height: 0; transition: height .45s var(--ease-out); } .acc__panel > div { padding: 0 0 var(--s5) calc(1.5rem + var(--s4)); } .acc__panel p { font-size: .9375rem; line-height: 1.7; color: var(--ink-soft); max-width: 52ch; } @media (min-width: 900px) { .acc__btn { min-height: 76px; } .acc__ttl { font-size: 1.0625rem; } } .value__layout { display: grid; gap: var(--s6); } @media (min-width: 1000px) { .value__layout { grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: var(--s8); align-items: center; } } /* --- 15. Process timeline ---------------------------------------------- */ .steps { display: grid; gap: 0; position: relative; } .step { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); padding-bottom: var(--s6); position: relative; } .step:last-child { padding-bottom: 0; } .step__rail { position: relative; width: 2.25rem; display: grid; justify-items: center; } .step__dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ivory); border: 1px solid var(--gold-veil); font-family: var(--serif); font-size: .875rem; color: var(--gold-text); position: relative; z-index: 1; } .section--cream .step__dot { background: var(--cream); } .step__rail::after { content: ""; position: absolute; top: 2.25rem; bottom: calc(var(--s6) * -1 + 0px); width: 1px; background: var(--gold-veil); } .step:last-child .step__rail::after { display: none; } .step__body { display: grid; gap: .35rem; padding-top: .3rem; } .step__body p { font-size: .9375rem; color: var(--ink-soft); max-width: 42ch; } @media (min-width: 1000px) { .steps { grid-template-columns: repeat(5, 1fr); gap: var(--s5); } .step { grid-template-columns: 1fr; padding-bottom: 0; gap: var(--s4); } .step__rail { width: 100%; justify-items: start; } .step__rail::after { top: 1.125rem; left: 2.25rem; right: calc(var(--s5) * -1); bottom: auto; width: auto; height: 1px; } .step:last-child .step__rail::after { display: none; } .step__body { padding-top: 0; } } .process__layout { display: grid; gap: var(--s7); } /* --- 16. Testimonials -------------------------------------------------- */ .quote { background: var(--warm-white); border: 1px solid rgba(194,160,106,.24); border-radius: var(--radius-card); padding: var(--s5); display: grid; gap: var(--s4); align-content: start; height: 100%; } .section--cream .quote { background: var(--ivory); } .quote__mark { font-family: var(--serif); font-size: 2.5rem; line-height: .6; color: var(--gold-veil); } .quote__txt { font-size: .9375rem; line-height: 1.75; color: var(--ink); } .quote__txt .clamp { display: block; } .quote.is-collapsed .quote__more { display: none; } .quote__toggle { align-self: start; background: none; border: 0; padding: .5rem 0; min-height: 44px; font-size: .8125rem; letter-spacing: .06em; color: var(--gold-text); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; } .quote__toggle:hover { text-decoration: underline; text-underline-offset: 3px; } .quote__by { display: flex; align-items: center; gap: var(--s3); margin-top: auto; padding-top: var(--s2); } .quote__by .ph { width: 44px; height: 44px; border-radius: 50%; flex: none; } .quote__by .ph::after { border-radius: 50%; } .quote__by div { display: grid; gap: .1rem; } .quote__who { font-size: .875rem; font-weight: 600; } .quote__what { font-size: .75rem; color: var(--ink-faint); letter-spacing: .04em; } /* --- 16b. Circular testimonials (port của ) -------- Ảnh xếp chồng trong không gian 3D: tấm đang xem ở giữa, hai tấm kề nhô lên và nghiêng ±15°. Bản gốc dùng gap 60–86px cố định cho khung ~448px; ở đây gap co theo viewport, nếu không thì trên máy 375px hai tấm bên bị đẩy hẳn ra ngoài màn hình. */ .ctest { --ctest-gap: clamp(26px, 8vw, 60px); --ctest-up: calc(var(--ctest-gap) * .8); display: grid; gap: var(--s7); margin-top: var(--s7); } @media (min-width: 900px) { .ctest { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s8); align-items: center; } } .ctest__media { position: relative; perspective: 1000px; aspect-ratio: 4 / 5; } .ctest__card { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.4, 2, .3, 1), opacity .8s cubic-bezier(.4, 2, .3, 1); opacity: 0; z-index: 1; pointer-events: none; } .ctest__card .ph { height: 100%; border-radius: 1.25rem; box-shadow: 0 10px 30px rgba(51, 36, 29, .2); } .ctest__card .ph::after { border-radius: 1.25rem; } /* Ảnh ba mẹ đăng kèm đánh giá: khung 4:5, ảnh vuông hay dọc đều lấp đầy. */ .ctest__card img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 1.25rem; box-shadow: 0 10px 30px rgba(51, 36, 29, .2); background: var(--tone-1); } .ctest__card.is-on { z-index: 3; opacity: 1; pointer-events: auto; transform: translateX(0) translateY(0) scale(1) rotateY(0deg); } .ctest__card.is-left { z-index: 2; opacity: 1; transform: translateX(calc(var(--ctest-gap) * -1)) translateY(calc(var(--ctest-up) * -1)) scale(.85) rotateY(15deg); } .ctest__card.is-right { z-index: 2; opacity: 1; transform: translateX(var(--ctest-gap)) translateY(calc(var(--ctest-up) * -1)) scale(.85) rotateY(-15deg); } .ctest__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); } .ctest__panels { position: relative; transition: min-height .4s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .ctest__panels { transition: none; } } .ctest__panel { margin: 0; opacity: 0; transform: translateY(20px); transition: opacity .3s var(--ease), transform .3s var(--ease); position: absolute; inset: 0; pointer-events: none; } .ctest__panel.is-on { opacity: 1; transform: none; position: relative; pointer-events: auto; } .ctest__quote { font-size: 1.0625rem; line-height: 1.75; color: var(--ink); margin-bottom: var(--s5); } @media (min-width: 900px) { .ctest__quote { font-size: 1.25rem; } } /* Cắt bớt đánh giá dài — chữ đầy đủ vẫn nằm trong HTML, bấm "Xem thêm" là mở. */ .ctest__quote.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; margin-bottom: var(--s2); } @media (min-width: 900px) { .ctest__quote.is-clamped { -webkit-line-clamp: 6; } } .ctest__more { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: var(--s3); padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .8125rem; color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; } .ctest__more:hover { color: var(--gold-deep); } .ctest__more:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; } /* Chữ hiện lên theo từng từ — port của phần motion.span trong quote. */ .ctest__quote span { display: inline-block; } .ctest__panel.is-on .ctest__quote span { animation: ctestWord .22s ease-in-out both; animation-delay: calc(var(--wi) * 25ms); } @keyframes ctestWord { from { filter: blur(10px); opacity: 0; transform: translateY(5px); } to { filter: blur(0); opacity: 1; transform: none; } } .ctest__name { display: block; font-family: var(--serif); font-style: italic; font-size: 1.375rem; color: var(--ink); } .ctest__role { display: block; font-size: .875rem; color: var(--ink-faint); margin-top: .15rem; } .ctest__nav { display: flex; align-items: center; gap: .75rem; } .ctest__btn { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 1px solid rgba(51, 36, 29, .18); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .ctest__btn:hover { background: var(--espresso); color: var(--on-dark); border-color: transparent; } .ctest__count { margin-left: .5rem; font-size: .8125rem; color: var(--ink-faint); letter-spacing: .06em; } @media (prefers-reduced-motion: reduce) { .ctest__card, .ctest__panel { transition: none; } .ctest__panel.is-on .ctest__quote span { animation: none; } } /* --- 17. Locations ----------------------------------------------------- */ .locs { display: grid; gap: var(--s5); } @media (min-width: 860px) { .locs { grid-template-columns: 1fr 1fr; gap: var(--s5); } } .loc { background: var(--warm-white); border: 1px solid rgba(194,160,106,.24); border-radius: var(--radius-card); overflow: hidden; display: grid; } .loc__media { position: relative; } .loc__media .ph { border-radius: 0; } .loc__media .ph::after { border-radius: 0; border-width: 0 0 1px; } .loc__body { padding: var(--s5); display: grid; gap: var(--s4); } .loc__top { display: grid; gap: .35rem; } .loc__chip { justify-self: start; padding: .25rem .55rem; border-radius: 999px; background: var(--cream); color: var(--gold-text); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; } .loc dl { display: grid; gap: .625rem; margin: 0; } .loc dl > div { display: grid; grid-template-columns: 1.25rem 1fr; gap: .625rem; align-items: start; } .loc dt { color: var(--gold-deep); display: grid; place-items: center; padding-top: .15rem; } .loc dd { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-soft); } .loc dd a { color: var(--ink); border-bottom: 1px solid var(--gold-veil); } .loc dd a:hover { border-bottom-color: var(--gold-deep); } .loc__ctas { display: grid; gap: .625rem; grid-template-columns: 1fr; } @media (min-width: 420px) { .loc__ctas { grid-template-columns: 1fr 1fr; } } /* --- 18. Final CTA + form --------------------------------------------- */ .final { position: relative; overflow: hidden; } .final__glow { position: absolute; left: 50%; bottom: -30%; translate: -50% 0; width: min(160vw, 1200px); aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(194,160,106,.20), transparent 62%); } .final__layout { position: relative; z-index: 1; display: grid; gap: var(--s6); } @media (min-width: 1000px) { .final__layout { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: var(--s8); align-items: start; } } .form { background: rgba(255,252,248,.06); border: 1px solid rgba(247,241,232,.18); border-radius: var(--radius-card); padding: var(--s5); display: grid; gap: var(--s4); } @media (min-width: 700px) { .form { padding: var(--s6); } } .field { display: grid; gap: .5rem; } .field label { font-size: .875rem; letter-spacing: .04em; color: var(--on-dark-soft); } .field label .req { color: var(--gold); } .field input, .field select, .field textarea { width: 100%; min-height: var(--hit); padding: .75rem .875rem; background: rgba(36,25,20,.35); border: 1px solid rgba(247,241,232,.22); border-radius: var(--radius); color: var(--on-dark); font-size: 1rem; transition: border-color .3s var(--ease), background .3s var(--ease); appearance: none; } .field textarea { min-height: 84px; resize: vertical; line-height: 1.6; } .field input::placeholder, .field textarea::placeholder { color: rgba(203,187,172,.72); } .field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(194,160,106,.5); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(36,25,20,.55); box-shadow: 0 0 0 3px rgba(194,160,106,.16); } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C2A06A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .field select option { background: var(--espresso); color: var(--on-dark); } .field__err { font-size: .8125rem; color: #F0A9A2; display: none; } .field.has-err input, .field.has-err select { border-color: #E0857C; } .field.has-err .field__err { display: block; } .form__row { display: grid; gap: var(--s4); } @media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } } .form__note { font-size: .75rem; line-height: 1.6; color: rgba(203,187,172,.8); } .form__note a { border-bottom: 1px solid rgba(194,160,106,.5); } /* success state */ .form__done { display: none; text-align: center; padding: var(--s6) var(--s4); gap: var(--s4); justify-items: center; } .form.is-done .form__body { display: none; } .form.is-done .form__done { display: grid; } .form__done .seal { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(194,160,106,.5); animation: sealIn .7s var(--ease-out) both; } @keyframes sealIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .form__done h3 { color: var(--on-dark); font-style: italic; } .form__done p { color: var(--on-dark-soft); font-size: .9375rem; max-width: 34ch; } /* --- 18a. Teaser band (nhịp ngắn dẫn sang trang riêng) ----------------- */ .teaser { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: var(--s4); max-width: calc(40rem + var(--gutter) * 2); margin-inline: auto; } .teaser .lede { text-align: center; } .teaser__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: var(--s2); } .teaser__chips li { padding: .4rem .85rem; border-radius: 999px; border: 1px solid rgba(194,160,106,.4); font-size: .8125rem; color: var(--on-dark-soft); white-space: nowrap; } /* --- 18b. Chat CTA (thay cho form — tư vấn chạy ở Pancake) ------------- */ .chatcta { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: var(--s4); max-width: calc(38rem + var(--gutter) * 2); margin-inline: auto; } .chatcta .lede { text-align: center; } .chatcta__btns { display: grid; gap: .625rem; width: 100%; max-width: 380px; margin-top: var(--s2); } @media (min-width: 560px) { .chatcta__btns { display: flex; justify-content: center; max-width: none; } } .chatcta__btns .btn { white-space: nowrap; } /* --- 19. Sticky bottom CTA (mobile) ----------------------------------- */ .sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom)); background: rgba(251,247,242,.9); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid var(--gold-veil); display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; transform: translateY(115%); transition: transform .45s var(--ease-out); } .sticky.is-on { transform: translateY(0); } .sticky .btn { min-height: 46px; font-size: .875rem; padding-inline: .75rem; } @media (min-width: 900px) { .sticky { display: none; } } /* Reserve room so the sticky bar never covers the last row of the footer. */ @media (max-width: 899px) { .ftr { padding-bottom: calc(var(--s5) + 68px); } } /* --- 20. Footer ------------------------------------------------------- */ /* Port của