/* * Site custom styles that must persist across Tailwind rebuilds. * Keep this file loaded after /dist/style.css. */ /* Sticky-header fix: overflow-x:hidden on makes overflow-y compute to auto, turning body into a scroll container and breaking the sticky header. `clip` clips horizontal overflow without establishing a scroll box. */ html { overflow-x: clip; } body.overflow-x-hidden { overflow-x: clip; } /* Global Table Unified Redesign v2026-02 (Hibiki Standard) */ .table-panel, main .overflow-x-auto:has(> table), main .overflow-x-auto.is-table-wrap { position: relative; overflow: hidden; border-radius: 1.25rem; border: 1px solid #dbe6e2 !important; background: linear-gradient(165deg, #ffffff 0%, #f5faf8 100%) !important; box-shadow: 0 16px 34px rgba(15, 42, 35, 0.08); } .table-panel:before, main .overflow-x-auto:has(> table):before, main .overflow-x-auto.is-table-wrap:before { content: ""; position: absolute; right: -72px; top: -72px; width: 220px; height: 220px; border-radius: 9999px; background: radial-gradient(circle, rgba(179, 146, 83, 0.16) 0%, rgba(179, 146, 83, 0) 70%); pointer-events: none; } .table-scroll { position: relative; overflow: auto; } /* Desktop goal: no horizontal scrollbars for tables. Why this happens: - The unified table panel adds a decorative ::before bubble positioned partly outside the panel (right/top negative offsets). - When the panel is also set to overflow:auto, that decoration becomes part of the scrollable overflow box and forces a horizontal scrollbar even if the table itself fits. Fix: - Keep table panels clipped (overflow hidden) so decoration never triggers scrollbars. - Force table layout + wrapping so real content also stays within the panel. */ @media (min-width: 1024px) { main .overflow-x-auto:has(> table), main .overflow-x-auto.is-table-wrap { overflow-x: hidden !important; overflow-y: visible !important; } main .overflow-x-auto:has(> table) > table, main .overflow-x-auto.is-table-wrap > table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: fixed; } main .overflow-x-auto:has(> table) > table th, main .overflow-x-auto:has(> table) > table td, main .overflow-x-auto.is-table-wrap > table th, main .overflow-x-auto.is-table-wrap > table td { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; min-width: 0; } main .overflow-x-auto:has(> table) img, main .overflow-x-auto:has(> table) svg, main .overflow-x-auto.is-table-wrap img, main .overflow-x-auto.is-table-wrap svg { max-width: 100%; height: auto; } } .table-redesign, main .overflow-x-auto:has(> table) > table, main .overflow-x-auto.is-table-wrap > table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; color: #2f3c38; background: transparent; } .table-redesign th, .table-redesign td, main .overflow-x-auto:has(> table) > table th, main .overflow-x-auto:has(> table) > table td, main .overflow-x-auto.is-table-wrap > table th, main .overflow-x-auto.is-table-wrap > table td { padding: 0.92rem 1rem; vertical-align: top; text-align: left; } .table-redesign thead th, main .overflow-x-auto:has(> table) > table thead th, main .overflow-x-auto.is-table-wrap > table thead th { position: sticky; top: 0; z-index: 5; background: #163e35 !important; color: #f1f8f4 !important; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; border-bottom: 0 !important; } .table-redesign tbody tr, main .overflow-x-auto:has(> table) > table tbody tr, main .overflow-x-auto.is-table-wrap > table tbody tr { border-top: 0 !important; } .table-redesign tbody td, main .overflow-x-auto:has(> table) > table tbody td, main .overflow-x-auto.is-table-wrap > table tbody td { border-bottom: 1px solid #e1ece7; } .table-redesign tbody tr:nth-child(odd), main .overflow-x-auto:has(> table) > table tbody tr:nth-child(odd), main .overflow-x-auto.is-table-wrap > table tbody tr:nth-child(odd) { background: rgba(246, 250, 248, 0.9); } .table-redesign tbody tr:hover, main .overflow-x-auto:has(> table) > table tbody tr:hover, main .overflow-x-auto.is-table-wrap > table tbody tr:hover { background: #eef7f2; } .table-redesign tbody tr:last-child td, main .overflow-x-auto:has(> table) > table tbody tr:last-child td, main .overflow-x-auto.is-table-wrap > table tbody tr:last-child td { border-bottom: 0; } /* Tables not wrapped in .overflow-x-auto: auto-upgrade via JS adds .table-redesign */ main table.table-redesign { background: transparent; } .table-redesign.is-sticky-first th:first-child, .table-redesign.is-sticky-first td:first-child { position: sticky; left: 0; z-index: 4; } .table-redesign.is-sticky-first thead th:first-child { z-index: 7; background: #12342d !important; } .table-redesign.is-sticky-first tbody td:first-child { background: inherit; box-shadow: 10px 0 16px -14px rgba(10, 30, 25, 0.25); } .table-redesign .cell-strong { font-weight: 700; color: #173229; } .table-redesign .price-tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.62rem; border-radius: 999px; background: #fff6df; color: #6e4f0b; font-weight: 800; white-space: nowrap; border: 1px solid #f0ddab; } .table-redesign .price-tag-neutral { background: #ebf3ff; color: #1e4f9e; border-color: #cde0ff; } .table-caption-note { margin-top: 0.8rem; color: #5b6b66; font-size: 0.82rem; } @media (max-width: 900px) { .table-panel, main .overflow-x-auto:has(> table), main .overflow-x-auto.is-table-wrap { border-radius: 1rem; overflow-x: hidden; } .table-redesign th, .table-redesign td, main .overflow-x-auto:has(> table) > table th, main .overflow-x-auto:has(> table) > table td, main .overflow-x-auto.is-table-wrap > table th, main .overflow-x-auto.is-table-wrap > table td { padding: 0.68rem 0.82rem; font-size: 0.86rem; } .table-redesign thead th, main .overflow-x-auto:has(> table) > table thead th, main .overflow-x-auto.is-table-wrap > table thead th { font-size: 0.76rem; } .table-redesign, main .overflow-x-auto:has(> table) > table, main .overflow-x-auto.is-table-wrap > table { width: 100% !important; min-width: 0 !important; } .table-redesign.responsive-stack { min-width: 100%; border-spacing: 0 0.72rem; } .table-redesign.responsive-stack thead { display: none; } .table-redesign.responsive-stack tbody, .table-redesign.responsive-stack tr, .table-redesign.responsive-stack td { display: block; width: 100%; } .table-redesign.responsive-stack tbody tr { background: #fff !important; border: 1px solid #dfebe5; border-radius: 0.9rem; overflow: hidden; box-shadow: 0 8px 16px rgba(15, 42, 35, 0.06); margin-bottom: 0.8rem; } .table-redesign.responsive-stack tbody td { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 0.5rem; padding: 0.68rem 0.82rem; border-bottom: 1px dashed #e4ede9; } .table-redesign.responsive-stack tbody td:last-child { border-bottom: 0; } .table-redesign.responsive-stack tbody td:before { content: attr(data-label); font-size: 0.76rem; font-weight: 800; color: #38524b; letter-spacing: 0.02em; } .table-redesign.responsive-stack .mobile-key { grid-template-columns: 1fr; padding: 0.8rem 0.82rem; background: linear-gradient(90deg, #163e35 0%, #1d5246 100%) !important; color: #fff !important; font-weight: 800; } .table-redesign.responsive-stack .mobile-key, .table-redesign.responsive-stack .mobile-key * { color: #fff !important; } .table-redesign.responsive-stack .mobile-key:before { content: none; } .table-redesign.responsive-stack .mobile-key .cell-strong { color: #fff; } .table-redesign.responsive-stack.is-sticky-first td:first-child { position: static; left: auto; box-shadow: none; } } /* Valuation Insight Redesign v2026-02 */ .valuation-insight-redesign { position: relative; overflow: hidden; background: radial-gradient(75% 130% at 8% 6%, rgba(194, 163, 101, 0.14) 0%, rgba(194, 163, 101, 0) 58%), radial-gradient(70% 120% at 95% 86%, rgba(29, 90, 76, 0.08) 0%, rgba(29, 90, 76, 0) 62%), linear-gradient(180deg, #f7f4ed 0%, #fbf8f1 100%); } .valuation-insight-redesign::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(90deg, rgba(129, 112, 76, 0.09) 1px, transparent 1px), linear-gradient(rgba(129, 112, 76, 0.09) 1px, transparent 1px); background-size: 38px 38px; } .valuation-insight-redesign > .container { position: relative; z-index: 1; } .valuation-insight-redesign h2 { color: #2f2f35; font-family: "Noto Serif TC", "PMingLiU", serif; font-weight: 800; letter-spacing: 0.01em; line-height: 1.22; } .valuation-insight-redesign .grid.lg\:grid-cols-2 { align-items: start; gap: 1.5rem; } .valuation-insight-redesign .mt-6.space-y-5 > div, .valuation-insight-redesign .fade-in-up.delay-1.h-full > div, .valuation-insight-redesign .fade-in-up.delay-1 > div, .valuation-insight-redesign .grid.grid-cols-1.lg\:grid-cols-2 > div { border: 1px solid #ddd7c9 !important; border-radius: 1.2rem !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(251, 248, 241, 0.98) 100%) !important; box-shadow: 0 14px 28px rgba(62, 55, 42, 0.09); } .valuation-insight-redesign .mt-6.space-y-5 > div:hover, .valuation-insight-redesign .fade-in-up.delay-1.h-full > div:hover, .valuation-insight-redesign .fade-in-up.delay-1 > div:hover, .valuation-insight-redesign .grid.grid-cols-1.lg\:grid-cols-2 > div:hover { transform: translateY(-2px); box-shadow: 0 20px 34px rgba(62, 55, 42, 0.14); transition: transform 0.24s ease, box-shadow 0.24s ease; } .valuation-insight-redesign h3 { color: #2f3b50; font-weight: 800; letter-spacing: 0.01em; } .valuation-insight-redesign .grid.sm\:grid-cols-2 > div, .valuation-insight-redesign .space-y-3 > li { border-radius: 0.8rem; } .valuation-insight-redesign .grid.sm\:grid-cols-2 > div { padding: 0.1rem 0.25rem; } .valuation-insight-redesign .grid.sm\:grid-cols-2 > div i, .valuation-insight-redesign .space-y-3 > li i { color: #7f6330 !important; } .valuation-insight-redesign .flex.flex-wrap.gap-2 > span { border: 1px solid #d8cfbc; background: #f0ece3 !important; color: #3c3f49 !important; font-weight: 700; border-radius: 9999px; padding: 0.36rem 0.82rem !important; font-size: 0.88rem; } .valuation-insight-redesign .inline-flex.items-center.justify-center.bg-brand-gold, .valuation-insight-redesign .inline-flex.items-center.justify-center.bg-white.border.border-gray-200, .valuation-insight-redesign .bg-green-500.text-white.px-7.py-3.rounded-full, .valuation-insight-redesign .bg-green-500.text-white.px-6.py-3.rounded-full, .valuation-insight-redesign .rounded-xl.border.border-gray-100.p-4 { border-radius: 9999px !important; font-weight: 800; letter-spacing: 0.01em; } .valuation-insight-redesign .inline-flex.items-center.justify-center.bg-brand-gold, .valuation-insight-redesign .rounded-xl.border.border-gray-100.p-4:hover { box-shadow: 0 10px 20px rgba(141, 120, 74, 0.2); } .valuation-insight-redesign .font-bold.brand-dark.mb-2 i.fab.fa-whatsapp { color: #1f8f4f !important; } .valuation-insight-redesign .mt-6.p-5.rounded-2xl, .valuation-insight-redesign .mt-6.p-4.rounded-xl, .valuation-insight-redesign .mt-5.text-xs.text-gray-500 { background: linear-gradient(140deg, #f3f0e9 0%, #ece6d9 100%) !important; border: 1px solid #dad1bf; border-radius: 1rem !important; } @media (max-width: 1024px) { .valuation-insight-redesign .grid.lg\:grid-cols-2 { gap: 1.1rem; } } @media (max-width: 768px) { .valuation-insight-redesign { background: radial-gradient(85% 130% at 8% 8%, rgba(194, 163, 101, 0.14) 0%, rgba(194, 163, 101, 0) 58%), linear-gradient(180deg, #f8f5ee 0%, #fcf8f1 100%); } .valuation-insight-redesign::before { background-size: 28px 28px; opacity: 0.35; } .valuation-insight-redesign h2 { line-height: 1.3; } .valuation-insight-redesign .mt-6.space-y-5 > div, .valuation-insight-redesign .fade-in-up.delay-1.h-full > div, .valuation-insight-redesign .fade-in-up.delay-1 > div, .valuation-insight-redesign .grid.grid-cols-1.lg\:grid-cols-2 > div { border-radius: 1rem !important; } .valuation-insight-redesign .flex.flex-wrap.gap-2 > span { font-size: 0.8rem; padding: 0.3rem 0.7rem !important; } } /* Contrast fixes for CTA and valuation action buttons */ .global-bottom-cta h2 { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32); } .global-bottom-cta p { color: rgba(255, 255, 255, 0.9) !important; } .valuation-insight-redesign a.bg-gray-900 { background-color: #1f2937 !important; color: #ffffff !important; } .valuation-insight-redesign a.bg-gray-100 { background-color: #eef2f7 !important; color: #1f3448 !important; border: 1px solid #d9e1ea; } .valuation-insight-redesign a.bg-white.border.border-gray-200 { background-color: #ffffff !important; color: #1f3448 !important; border-color: #d2dae4 !important; } /* whisky-recovery specific color hardening */ .whisky-recovery-page .valuation-insight-redesign .valuation-link-dark { background-color: #1f2937 !important; color: #ffffff !important; } .whisky-recovery-page .valuation-insight-redesign .valuation-link-light { background-color: #eef2f7 !important; color: #1f3448 !important; border: 1px solid #d9e1ea !important; } .whisky-recovery-page .valuation-insight-redesign .valuation-call-btn { background-color: #1f2937 !important; color: #ffffff !important; border: 1px solid #1f2937 !important; } .whisky-recovery-page .global-bottom-cta #get-quote { color: #ffffff !important; } .whisky-recovery-page .global-bottom-cta p { color: rgba(255, 255, 255, 0.9) !important; } /* -------------------------------------------------- Unified Primary CTA Buttons v2026-02 Goal: make WhatsApp / Phone CTAs visually consistent across all pages (without changing per-page Tailwind class strings). -------------------------------------------------- */ /* WhatsApp main CTA (exclude floating round button by width/height utility classes) */ a[href^="https://wa.me/85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]) { background-color: #22c55e !important; color: #ffffff !important; border-radius: 9999px !important; padding: 1rem 2.25rem !important; font-weight: 800 !important; letter-spacing: 0.01em; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; box-shadow: 0 16px 32px rgba(34, 197, 94, 0.25) !important; text-decoration: none !important; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important; } a[href^="https://wa.me/85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]):hover { background-color: #16a34a !important; transform: translateY(-1px) scale(1.01) !important; box-shadow: 0 20px 40px rgba(34, 197, 94, 0.3) !important; } a[href^="https://wa.me/85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]):active { transform: translateY(0) scale(0.99) !important; } /* Phone main CTA (exclude plain footer links) */ a[href^="tel:+85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]) { background-color: rgb(142, 120, 74) !important; /* brand-gold */ color: #ffffff !important; border-radius: 9999px !important; padding: 1rem 2.25rem !important; font-weight: 800 !important; letter-spacing: 0.01em; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; box-shadow: 0 16px 32px rgba(142, 120, 74, 0.22) !important; text-decoration: none !important; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important; } a[href^="tel:+85265061479"][class*="rounded"]:not([class*="w-14"]):not([class*="h-14"]):not([class*="w-12"]):not([class*="h-12"]):hover { background-color: #5c4a2e !important; /* brand-dark */ transform: translateY(-1px) scale(1.01) !important; box-shadow: 0 20px 40px rgba(92, 74, 46, 0.25) !important; } /* Make icon spacing consistent (covers pages that forgot mr-2 etc.) */ a[href^="https://wa.me/85265061479"] i.fab.fa-whatsapp, a[href^="tel:+85265061479"] i.fas.fa-phone-alt { margin-right: 0.25rem !important; } /* Floating WhatsApp buttons only contain an icon, so CTA text spacing must not offset it. */ #floating-whatsapp i.fab.fa-whatsapp, .floating-actions a[href^="https://wa.me/85265061479"] i.fab.fa-whatsapp, a[aria-label="WhatsApp Us"] i.fab.fa-whatsapp { margin-right: 0 !important; line-height: 1 !important; } /* Safety: avoid unexpected underline on CTAs */ a[href^="https://wa.me/85265061479"][class*="rounded"], a[href^="tel:+85265061479"][class*="rounded"] { text-decoration: none !important; } /* purchase-process / purchase-price-list optimization v2026-03 */ .purchase-hero-shell { position: relative; overflow: hidden; border-radius: 1.75rem; border: 1px solid #e7e0d0; background: radial-gradient(90% 110% at 0% 0%, rgba(197, 160, 89, 0.16) 0%, rgba(197, 160, 89, 0) 52%), radial-gradient(80% 100% at 100% 100%, rgba(28, 86, 73, 0.10) 0%, rgba(28, 86, 73, 0) 54%), linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(249,246,240,0.98) 100%); box-shadow: 0 24px 56px rgba(56, 45, 24, 0.12); padding: 2rem; } .purchase-hero-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(155, 127, 70, 0.06) 1px, transparent 1px), linear-gradient(rgba(155, 127, 70, 0.06) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.35; } .purchase-hero-shell > * { position: relative; z-index: 1; } .section-kicker, .jump-chip { display: inline-flex; align-items: center; border-radius: 9999px; font-weight: 800; letter-spacing: 0.01em; } .section-kicker { padding: 0.42rem 0.82rem; background: rgba(22, 62, 53, 0.08); color: #21473f; border: 1px solid rgba(22, 62, 53, 0.14); } .jump-chip { padding: 0.46rem 0.86rem; background: rgba(255, 255, 255, 0.82); border: 1px solid #e4ddce; color: #4a3f35; font-size: 0.85rem; } .process-kpi-card, .info-pillar-card, .category-check-card, .scenario-card, .price-note-card, .value-note-card, .flow-step-card { border: 1px solid #e7e1d6; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,247,241,0.98) 100%); box-shadow: 0 14px 28px rgba(56, 45, 24, 0.08); } .process-kpi-card, .info-pillar-card, .category-check-card, .scenario-card, .price-note-card, .flow-step-card { border-radius: 1.35rem; } .process-kpi-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.15rem; } .process-kpi-icon, .info-pillar-icon, .category-check-icon { width: 2.9rem; height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: linear-gradient(135deg, #21473f 0%, #355f55 100%); color: #fff; box-shadow: 0 10px 18px rgba(33, 71, 63, 0.22); flex-shrink: 0; } .info-pillar-card, .category-check-card, .scenario-card, .price-note-card { padding: 1.35rem; } .value-note-card { border-radius: 1rem; padding: 0.95rem 1rem; } .flow-step-card { position: relative; padding: 1.35rem; } .flow-step-no { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem; height: 3.2rem; border-radius: 9999px; background: linear-gradient(135deg, #8e784a 0%, #c5a059 100%); color: #fff; font-size: 1rem; font-weight: 900; margin-bottom: 1rem; box-shadow: 0 12px 22px rgba(142, 120, 74, 0.28); } .flow-step-meta { margin-top: 1rem; font-size: 0.86rem; font-weight: 700; color: #3f544d; } .category-check-icon { margin-bottom: 1rem; } .price-note-card .info-pillar-icon, .info-pillar-card .info-pillar-icon { margin-bottom: 1rem; } .scenario-card { min-height: 100%; } .price-tabs-shell { background: rgba(255,255,255,0.68); border: 1px solid #e8e2d5; border-radius: 1.35rem; padding: 1.25rem 1rem; box-shadow: 0 12px 24px rgba(56, 45, 24, 0.06); } #price-table-container .price-result-shell { display: grid; gap: 1rem; } #price-table-container .price-summary-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } #price-table-container .price-summary-card { border-radius: 1rem; border: 1px solid #e5ddce; background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,244,236,0.98) 100%); padding: 1rem; box-shadow: 0 10px 20px rgba(56, 45, 24, 0.06); } #price-table-container .price-summary-label { display: block; margin-bottom: 0.35rem; color: #53655f; font-size: 0.8rem; font-weight: 800; } #price-table-container .price-summary-value { color: #21352f; font-size: 1.1rem; font-weight: 800; } @media (max-width: 1024px) { .purchase-hero-shell { padding: 1.5rem; border-radius: 1.4rem; } #price-table-container .price-summary-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .purchase-hero-shell { padding: 1.15rem; border-radius: 1.2rem; } .section-kicker, .jump-chip { font-size: 0.78rem; } .process-kpi-card, .info-pillar-card, .category-check-card, .scenario-card, .price-note-card, .flow-step-card { border-radius: 1rem; } } /* Footer redesign v2026-03 */ .footer-shell { position: relative; overflow: hidden; background: radial-gradient(circle at top left, rgba(197, 160, 89, 0.18), transparent 30%), radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.08), transparent 24%), linear-gradient(180deg, #15120d 0%, #0f0c09 100%); color: #f6efe5; } .footer-shell::before, .footer-shell::after { content: ""; position: absolute; border-radius: 9999px; pointer-events: none; } .footer-shell::before { right: -120px; top: -110px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(197, 160, 89, 0.18) 0%, rgba(197, 160, 89, 0) 70%); } .footer-shell::after { left: -140px; bottom: -160px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 72%); } .footer-wrap { position: relative; max-width: 1280px; margin: 0 auto; padding: 3.75rem 1rem 2.4rem; } .footer-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1.5rem; margin-bottom: 1.2rem; } .footer-topbar-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9999px; background: rgba(255, 255, 255, 0.06); color: #f6d79e; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .footer-topbar-text { margin: 0; max-width: 48rem; color: rgba(246, 239, 229, 0.78); font-size: 0.96rem; line-height: 1.75; } .footer-card { position: relative; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 2rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); backdrop-filter: blur(14px); overflow: hidden; } .footer-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); pointer-events: none; } .footer-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 0.85fr)); gap: 2rem; padding: 2rem; } .footer-brand { padding-right: 1.25rem; } .footer-logo-row { display: flex; align-items: center; gap: 0.95rem; margin-bottom: 1rem; } .footer-logo { width: 4rem; height: 4rem; object-fit: cover; border-radius: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); } .footer-eyebrow { margin: 0 0 0.4rem; color: rgba(246, 215, 158, 0.86); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .footer-title { margin: 0; color: #fffdf8; font-family: "Noto Serif TC", serif; font-size: 1.6rem; line-height: 1.2; } .footer-copy { margin: 0; color: rgba(246, 239, 229, 0.8); font-size: 0.95rem; line-height: 1.9; } .footer-pill-list { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 0; padding: 0; list-style: none; } .footer-pill-list li { padding: 0.58rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9999px; background: rgba(255, 255, 255, 0.05); color: #f3e6cd; font-size: 0.84rem; } .footer-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.35rem; } .footer-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0.75rem 1.15rem; border-radius: 9999px; font-size: 0.92rem; font-weight: 700; text-decoration: none; transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease; } .footer-cta:hover { transform: translateY(-1px); } .footer-cta-primary { background: linear-gradient(135deg, #d8b271 0%, #b49257 100%); color: #241b10 !important; box-shadow: 0 12px 24px rgba(180, 146, 87, 0.22); } .footer-cta-primary:hover { box-shadow: 0 16px 28px rgba(180, 146, 87, 0.3); } .footer-cta-secondary { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #fff7ea !important; } .footer-section-title { margin: 0 0 1rem; color: #fffaf2; font-size: 1rem; font-weight: 700; } .footer-link-list, .footer-contact-list { margin: 0; padding: 0; list-style: none; } .footer-link-list li + li, .footer-contact-list li + li { margin-top: 0.72rem; } .footer-link-list a, .footer-bottom-links a { color: rgba(246, 239, 229, 0.76); text-decoration: none; transition: color 0.18s ease, transform 0.18s ease; } .footer-link-list a:hover, .footer-bottom-links a:hover { color: #f6d79e; } .footer-contact-item { display: flex; align-items: flex-start; gap: 0.85rem; width: 100%; padding: 0.82rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; background: rgba(255, 255, 255, 0.05); color: #f7f0e5; text-decoration: none; transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease; } .footer-contact-item:hover { transform: translateY(-1px); border-color: rgba(246, 215, 158, 0.28); background: rgba(255, 255, 255, 0.08); color: #fff9ef; } .footer-contact-button { appearance: none; cursor: pointer; text-align: left; font: inherit; } .footer-contact-button:focus-visible, .footer-social-link:focus-visible, .footer-cta:focus-visible, .footer-link-list a:focus-visible, .footer-bottom-links a:focus-visible { outline: 2px solid rgba(246, 215, 158, 0.9); outline-offset: 3px; } .footer-contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.45rem; height: 2.45rem; flex: 0 0 2.45rem; border-radius: 9999px; background: linear-gradient(135deg, rgba(216, 178, 113, 0.22) 0%, rgba(216, 178, 113, 0.08) 100%); color: #f6d79e; } .footer-contact-item strong, .footer-contact-item small { display: block; } .footer-contact-item strong { margin-top: 0.05rem; color: #fff9f1; font-size: 0.93rem; } .footer-contact-item small { margin-top: 0.24rem; color: rgba(246, 239, 229, 0.68); font-size: 0.8rem; line-height: 1.5; } .footer-social-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.15rem; } .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9999px; background: rgba(255, 255, 255, 0.05); color: #f7efe1; text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease; } .footer-social-link:hover { transform: translateY(-1px); border-color: rgba(246, 215, 158, 0.28); background: rgba(255, 255, 255, 0.08); color: #f6d79e; } .footer-bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1rem; padding: 1.15rem 2rem 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.09); color: rgba(246, 239, 229, 0.7); font-size: 0.86rem; } .footer-bottom p { margin: 0; } .footer-bottom-links { display: flex; flex-wrap: wrap; gap: 0.85rem 1.1rem; } @media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { padding-right: 0; } } @media (max-width: 760px) { .footer-wrap { padding-top: 3rem; } .footer-topbar { margin-bottom: 1rem; } .footer-topbar-text { font-size: 0.9rem; } .footer-card { border-radius: 1.5rem; } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.35rem; } .footer-logo { width: 3.3rem; height: 3.3rem; } .footer-title { font-size: 1.35rem; } .footer-cta-row { flex-direction: column; } .footer-cta { width: 100%; } .footer-bottom { padding: 1rem 1.35rem 1.25rem; flex-direction: column; align-items: flex-start; } } /* === Compatibility utilities for classes that are used in HTML but not generated by Tailwind build === */ .text-md { font-size: 1rem; line-height: 1.625rem; } .transition-all-300 { transition: all .3s ease; } .aspect-ratio-3-4 { aspect-ratio: 3 / 4; } .bg-FDFBF5 { background-color: #FDFBF5; } .left-1\/6 { left: 16.666667%; } .right-1\/6 { right: 16.666667%; } .brand-gold\/30 { color: rgba(142, 120, 74, 0.3); } .border-brand-gold\/30 { border-color: rgba(142, 120, 74, 0.3); } .hover\:border-brand-gold\/30:hover { border-color: rgba(142, 120, 74, 0.3); } .via-brand-gold\/30 { --tw-gradient-to: rgb(142 120 74 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(142, 120, 74, 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to); } .shadow-\[0_10px_40px_-10px_rgba\(0\,0\,0\,0\.08\)\] { --tw-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08); --tw-shadow-colored: 0 10px 40px -10px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .delay-5 { transition-delay: 0.5s; } .delay-6 { transition-delay: 0.6s; } .delay-7 { transition-delay: 0.7s; } .delay-8 { transition-delay: 0.8s; } .delay-9 { transition-delay: 0.9s; } .delay-10 { transition-delay: 1s; } .delay-11 { transition-delay: 1.1s; } .delay-12 { transition-delay: 1.2s; } @media (min-width: 768px) { .md\:py-18 { padding-top: 4.5rem; padding-bottom: 4.5rem; } } @media (min-width: 1024px) { .lg\:grid-cols-\[minmax\(0\,1\.2fr\)_420px\] { grid-template-columns: minmax(0, 1.2fr) 420px; } .lg\:grid-cols-\[minmax\(0\,1\.05fr\)_minmax\(0\,0\.95fr\)\] { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } .lg\:grid-cols-\[minmax\(0\,\.95fr\)_minmax\(0\,1\.05fr\)\], .lg\:grid-cols-\[minmax\(0\,0\.95fr\)_minmax\(0\,1\.05fr\)\] { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } .lg\:grid-cols-\[minmax\(0\,1\.15fr\)_minmax\(320px\,\.85fr\)\], .lg\:grid-cols-\[minmax\(0\,1\.15fr\)_minmax\(320px\,0\.85fr\)\] { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); } .lg\:grid-cols-\[minmax\(0\,1\.1fr\)_minmax\(320px\,\.9fr\)\] { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); } .lg\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(320px\,\.8fr\)\], .lg\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(320px\,0\.8fr\)\] { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); } .lg\:grid-cols-\[minmax\(0\,1fr\)_auto\] { grid-template-columns: minmax(0, 1fr) auto; } .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 1280px) { .xl\:grid-cols-\[minmax\(0\,1\.05fr\)_minmax\(0\,\.95fr\)\], .xl\:grid-cols-\[minmax\(0\,1\.05fr\)_minmax\(0\,0\.95fr\)\] { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } } /* === Header mega-menu component styles === .mega-link / .mobile-mega-link are custom component classes used in the nav dropdowns. They are not Tailwind utilities, so they live here permanently (not in dist/style.css). */ .mega-link { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0.5rem; border-radius: 0.5rem; color: #1f2937; font-size: 0.9rem; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .mega-link > span { font-weight: 500; } .mega-link > em { font-style: normal; color: #9ca3af; font-size: 0.78rem; white-space: nowrap; } .mega-link:hover { background-color: #f9f5ec; color: #8e784a; } .mega-link:hover > em { color: #b39253; } .mobile-mega-link { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 1rem; color: #374151; font-size: 0.95rem; text-decoration: none; border-radius: 0.5rem; transition: background-color 0.15s ease; } .mobile-mega-link > span { font-weight: 500; } .mobile-mega-link > em { font-style: normal; color: #9ca3af; font-size: 0.8rem; white-space: nowrap; } .mobile-mega-link:hover, .mobile-mega-link:active { background-color: #f3f4f6; } /* ============================================================================ * 補完 fallback：Tailwind JIT 偶爾掃唔到嘅 class 同 * 純 JS hook / 命名空間 class 嘅 baseline 樣式。 * 全部寫喺呢度，唔受 dist/style.css 重 build 影響。 * ========================================================================= */ /* 動畫 delay：custom.css 已有 .delay-1、.delay-5～.delay-12，補返中間 2/3/4 */ .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } /* Header / 全站 nav hook —— 真正樣式由 Tailwind utility 同 inline 提供，呢度只做 namespace */ .site-header { z-index: 50; } .top-news { line-height: 1.5; } /* 手機選單滾動容器：iOS 慣性滾動 + 滾動條收細 */ .mobile-menu-scroll { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: thin; } .mobile-menu-scroll::-webkit-scrollbar { width: 4px; } .mobile-menu-scroll::-webkit-scrollbar-thumb { background: rgba(142, 120, 74, 0.35); border-radius: 4px; } /* Nav link / mega-link / mobile-mega-link：JS 用嚟 toggle，加少量 fallback */ .nav-link { transition: color 0.2s ease; } .nav-link:hover { color: var(--brand-gold); } .mega-link, .mobile-mega-link { display: block; transition: color 0.2s ease, background-color 0.2s ease; } .mega-link:hover, .mobile-mega-link:hover { color: var(--brand-gold); } /* Accordion：accordion-content / accordion-arrow 已喺 input.css，呢度補返 header / item baseline */ .accordion-item { position: relative; } .accordion-header { cursor: pointer; -webkit-tap-highlight-color: transparent; } .accordion-header:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; } /* Section heading namespace */ .section-heading { display: block; } /* Buying-items 嘅 category-card */ .category-card { text-decoration: none; color: inherit; display: flex; } .category-card:hover { text-decoration: none; } /* Contact-us 表單：focus-ring fallback（行內已有 focus:ring，呢個係備用） */ .focus-ring-brand-gold:focus { outline: none; box-shadow: 0 0 0 3px rgba(142, 120, 74, 0.25); } /* Purchase price / process 頁面 namespace 同 hero section（樣式由 utility 提供，呢度做 hook） */ .purchase-price-page, .purchase-process-page { display: block; } .price-hero-section, .process-hero-section { position: relative; background: radial-gradient(circle at 15% 20%, rgba(142, 120, 74, 0.06), transparent 55%), radial-gradient(circle at 85% 80%, rgba(74, 63, 53, 0.05), transparent 60%), #fdfbf5; } /* 兩個 Tailwind JIT 偶爾掃唔到嘅 grid arbitrary 值 fallback */ @media (min-width: 768px) { .md\:grid-cols-\[1\.3fr\,0\.9fr\] { grid-template-columns: 1.3fr 0.9fr; } } @media (min-width: 1024px) { .lg\:grid-cols-\[minmax\(0\,1\.16fr\)_420px\] { grid-template-columns: minmax(0, 1.16fr) 420px; } } /* end of fallback block */ /* Homepage layout refinements */ .home-page .home-hero-section { min-height: calc(100svh - 110px); } .home-page .home-quote-card { max-height: none; } @media (min-width: 1024px) and (max-height: 800px) { .home-page .home-hero-inner { padding-top: 3.6rem !important; padding-bottom: 3.6rem !important; } .home-page .home-quote-card { padding: 1.2rem !important; } .home-page .home-quote-card .mt-5 { margin-top: 0.8rem !important; } .home-page .home-quote-card .rounded-2xl { padding: 0.8rem !important; } .home-page .home-quote-card .space-y-4 > div:nth-child(3) { display: none; } .home-page .home-quote-card .mt-6 { margin-top: 0.85rem !important; } } @media (max-width: 767px) { .home-page .home-hero-section { min-height: auto; } .home-page .home-hero-inner { padding-top: 2.25rem !important; padding-bottom: 2.75rem !important; } .home-page .home-hero-kicker { margin-bottom: 1.25rem !important; max-width: 100%; font-size: 0.875rem !important; line-height: 1.5 !important; } .home-page .home-hero-section h1 { font-size: clamp(2rem, 9vw, 2.55rem) !important; line-height: 1.16 !important; } .home-page .home-hero-section h1 + p { margin-top: 1rem !important; font-size: 0.95rem !important; line-height: 1.78 !important; } .home-page .home-hero-tags { margin-top: 1.1rem !important; gap: 0.65rem !important; } .home-page .home-hero-tags span { width: 100%; padding: 0.72rem 0.9rem !important; line-height: 1.45 !important; } .home-page .home-hero-tags span:nth-child(2) { display: none; } .home-page .home-hero-ctas { margin-top: 1.25rem !important; gap: 0.8rem !important; } .home-page .home-hero-ctas a { padding-top: 0.95rem !important; padding-bottom: 0.95rem !important; } .home-page .home-hero-stats { display: none !important; } .home-page .home-quote-card { margin-top: 1.5rem; border-radius: 1.5rem !important; padding: 1.25rem !important; } .home-page .home-quote-card h2 { font-size: 1.45rem !important; line-height: 1.25 !important; } .home-page .home-quote-card .mt-5 { margin-top: 0.85rem !important; } .home-page .home-quote-card .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.85rem !important; } .home-page .floating-actions { right: 0.9rem !important; bottom: max(0.9rem, env(safe-area-inset-bottom)) !important; gap: 0.55rem !important; } .home-page .floating-actions a { width: 3rem !important; height: 3rem !important; font-size: 1.25rem !important; } .home-page #floating-whatsapp.is-mobile-hidden { opacity: 0; pointer-events: none; transform: translateY(0.5rem) scale(0.92); } .home-page #back-to-top { opacity: 0.92; } }