/* ============================================================ DRL Diagnostics & Laboratory — design system v2 Identity: "Clinical calm" — warm paper, deep pine, serif soul ============================================================ */ :root { /* surfaces */ --paper: #F5F4F0; --paper-2: #FBFBF8; --white: #FFFFFF; /* ink */ --ink: #10201E; --ink-2: #42514F; --ink-3: #6B7A76; /* lines */ --line: rgba(16, 32, 30, 0.10); --line-2: rgba(16, 32, 30, 0.20); /* brand — extracted from the DRL logo itself: main blue #1A5C8F · navy #0A3975 · teal #219198 · green #6A9F46 */ --pine-50: #EFF5FB; --pine-100: #DEEAF6; --pine-200: #BFD6EC; --pine-300: #8FB7DB; --pine-500: #1A5C8F; --pine-600: #16507D; --pine-700: #11446A; --pine-800: #0D3A5C; --pine-900: #0A3975; /* accents — logo teal + green */ --amber: #219198; --amber-100: #DCEFEF; --coral: #6A9F46; --coral-100: #E7F0DC; /* status */ --ok: #2E6B45; --ok-100: #E1F0E5; --warn: #A85A08; --warn-100: #F9ECD9; --danger: #B3261E; --danger-100: #F9E4E2; /* geometry */ --radius-s: 10px; --radius-m: 16px; --radius-l: 22px; --radius-xl: 32px; --radius-pill: 999px; /* elevation */ --shadow-s: 0 1px 2px rgba(16, 32, 30, 0.05); --shadow-m: 0 12px 32px -16px rgba(16, 32, 30, 0.16); --shadow-l: 0 32px 64px -28px rgba(16, 32, 30, 0.28); --shadow-pine: 0 10px 24px -12px rgba(var(--brand-rgb), 0.45); /* rgb triplets for brand-tinted glows/shadows — override with the experimental theme block below (body.orange) */ --brand-rgb: 26, 92, 143; /* motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur: 220ms; --dur-slow: 500ms; --container: 1200px; --header-h: 72px; --tab-h: 4.75rem; } /* ============================================================ EXPERIMENTAL THEME — "Orange Lab" (body.orange) Default brand is the blue/teal logo palette above. To preview this orange variant site-wide, add class="orange" to in src/build.mjs; revert by removing the class. The blue palette stays in :root untouched. ============================================================ */ body.orange { --pine-50: #FFF6EC; --pine-100: #FFEAD4; --pine-200: #FFD6AC; --pine-300: #FFBA7D; --pine-500: #F26B0F; --pine-600: #DE5C08; --pine-700: #C24E07; --pine-800: #A34206; --pine-900: #7F3305; --shadow-pine: 0 10px 24px -12px rgba(242, 107, 15, 0.45); --brand-rgb: 242, 107, 15; } /* ---------- reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; min-width: 0; min-height: 100dvh; } html { overflow-x: clip; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } html, body { max-width: 100%; } img, svg, iframe, video, canvas { max-width: 100%; } #mainNav { max-width: 100%; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } em { font-style: italic; } ::selection { background: var(--pine-700); color: #fff; } body.nav-locked { overflow: hidden; } /* touch-first: no tap flash, instant taps, native momentum scroll */ html { -webkit-tap-highlight-color: transparent; } .btn, .nav-link, .chip, .cat-btn, .cal-day, .cal-nav, .tp-opt, .rv-star, .branch-btn, .gallery-item, .tile, .cart-remove, .sheet-close, .menu-toggle, .mobile-nav a, .wa-fab, .blog-card, .pkg-card .btn, .link-arrow, .fab-btn, .book-bar .btn, .modal-x, .view-all, .wa-link { touch-action: manipulation; } #mainNav, .sheet-body, .tp-col { overscroll-behavior: contain; } @media (hover: none) { .btn, .nav-link, .chip, .cat-btn, .cal-day, .tp-opt, .mobile-nav a, .tile, .branch-btn, .rv-star, .cart-remove, .sheet-close, .wa-fab, .pkg-ribbon, .gallery-item, .menu-toggle, .link-arrow { -webkit-user-select: none; user-select: none; } } .font-display { font-family: 'Playfair Display', Georgia, serif; } .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; } .icon { width: 1em; height: 1em; flex-shrink: 0; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .container { max-width: var(--container); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } .hide-sm { display: none; } .hide-xs { display: none; } @media (min-width: 480px) { .hide-xs { display: inline-flex; } } /* ---------- accessibility ---------- */ :focus-visible { outline: 3px solid rgba(var(--brand-rgb), 0.40); outline-offset: 2px; border-radius: 6px; } .btn:focus-visible, .nav-link:focus-visible, .chip:focus-visible, .form-input:focus-visible, .form-select:focus-visible, .cat-btn:focus-visible, .cal-day:focus-visible, .cal-nav:focus-visible, .cart-remove:focus-visible, .branch-btn:focus-visible, .modal-x:focus-visible, .menu-toggle:focus-visible, .wa-fab:focus-visible, .link-arrow:focus-visible, .wa-link:focus-visible, .gallery-item:focus-visible, .blog-card:focus-visible, .tp-opt:focus-visible, .rv-star:focus-visible, .footer-link:focus-visible, .mobile-nav a:focus-visible, .sheet-close:focus-visible, .fab-btn:focus-visible, .tile:focus-visible { outline: 3px solid rgba(var(--brand-rgb), 0.40); outline-offset: 2px; } .skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 300; background: var(--pine-800); color: #fff; font-size: 0.875rem; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0 0 var(--radius-s) var(--radius-s); transition: top var(--dur) var(--ease-out); } .skip-link:focus-visible { top: 0; outline-color: #fff; } /* ---------- typography ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pine-600); margin-bottom: 1rem; } .eyebrow::before { content: ''; width: 1.5rem; height: 1px; background: var(--pine-500); display: inline-block; } .eyebrow-light { color: rgba(255, 255, 255, 0.85); } .eyebrow-light::before { background: rgba(255, 255, 255, 0.7); } h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.02em; line-height: 1.15; font-weight: 600; color: var(--ink); } .h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); } .h2-light { color: #fff; } .h3 { font-size: 1.25rem; } .page-hero { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(2rem, 4vw, 3rem); position: relative; } .page-hero::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 100%; pointer-events: none; background: radial-gradient(900px 300px at 12% -10%, rgba(var(--brand-rgb), 0.08), transparent 60%), radial-gradient(700px 260px at 88% 110%, rgba(217, 89, 62, 0.05), transparent 60%); } .page-hero > .container { position: relative; z-index: 1; } .page-title { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 600; max-width: 18ch; } .page-text { color: var(--ink-2); max-width: 52ch; margin-top: 0.875rem; font-size: 1.0625rem; line-height: 1.7; } .section { padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); } .section-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-head { max-width: 46rem; margin-bottom: 2.75rem; } .section-head .page-text { margin-top: 0.625rem; } .split-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; max-width: none; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-pill); padding: 0.75rem 1.75rem; min-height: 3rem; border: 1px solid transparent; cursor: pointer; text-align: center; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .btn .icon { width: 1.125rem; height: 1.125rem; } .btn:active { transform: translateY(1px) scale(0.985); } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-primary { background: var(--pine-700); color: #fff; box-shadow: var(--shadow-pine); } .btn-primary:hover { background: var(--pine-800); transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(var(--brand-rgb), 0.55); } .btn-primary:disabled:hover { transform: none; } .btn-outline { background: var(--white); border-color: var(--line-2); color: var(--ink); } .btn-outline:hover { border-color: var(--pine-600); color: var(--pine-700); background: var(--pine-50); } .btn-light { background: #fff; color: var(--pine-800); } .btn-light:hover { background: var(--pine-50); transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.35); } .btn-ghost { background: transparent; color: var(--ink-2); border-color: transparent; } .btn-ghost:hover { color: var(--pine-700); background: var(--pine-50); } .btn-sm { min-height: 2.5rem; padding: 0.5rem 1.25rem; font-size: 0.875rem; } .btn-lg { min-height: 3.5rem; padding: 0.875rem 2.25rem; font-size: 1rem; } .btn-block { width: 100%; } .btn.is-loading { pointer-events: none; } .btn.is-loading::before { content: ''; width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } .btn-outline.is-loading::before { border-color: rgba(var(--brand-rgb), 0.3); border-top-color: var(--pine-700); } @keyframes spin { to { transform: rotate(360deg); } } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; color: var(--pine-700); padding: 0.5rem 0; transition: gap var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .link-arrow:hover { gap: 0.875rem; color: var(--pine-900); } .link-arrow .icon { width: 1.125rem; height: 1.125rem; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 90; background: rgba(245, 244, 240, 0.97); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px -18px rgba(16, 32, 30, 0.25); } .topbar { background: var(--pine-900); color: rgba(255, 255, 255, 0.85); font-size: 0.8125rem; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.25rem; } .topbar-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .topbar-left a { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; } .topbar-left a:hover { color: #fff; } .topbar-left .icon { width: 0.8125rem; height: 0.8125rem; opacity: 0.75; } .topbar-sep { opacity: 0.35; } .topbar-right { letter-spacing: 0.06em; opacity: 0.75; white-space: nowrap; } .nav-wrap { border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); max-width: 1340px; } .logo-link { display: inline-flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .logo-img { width: 2.625rem; height: 2.625rem; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow-s); } .logo-text { line-height: 1.15; } .logo-name { font-size: 1.1875rem; font-weight: 700; font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; } .logo-sub { font-size: 0.5625rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .main-nav { display: none; align-items: center; gap: 0.125rem; } .nav-link { position: relative; display: inline-flex; align-items: center; padding: 0.5rem 0.75rem; border-radius: var(--radius-pill); font-size: 0.9063rem; font-weight: 500; color: var(--ink-2); transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); } .nav-link::after { content: ''; position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.125rem; height: 2px; border-radius: 2px; background: var(--pine-600); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .nav-link:hover { color: var(--pine-700); } .nav-link:hover::after { transform: scaleX(0.55); } .nav-link.active { color: var(--pine-800); font-weight: 600; } .nav-link.active::after { transform: scaleX(1); } .nav-actions { display: flex; align-items: center; gap: 0.5rem; } .nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); color: var(--ink); transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .nav-cart:hover { background: var(--pine-100); transform: translateY(-1px); } .nav-cart .icon { width: 1.3125rem; height: 1.3125rem; } .nav-cart-count { position: absolute; top: 0.25rem; right: 0.125rem; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: var(--radius-pill); background: var(--coral); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 2px 6px rgba(217, 89, 62, 0.4); } .cart-count.empty { display: none; } .cart-count.pop { animation: cart-pop 0.4s var(--ease-out); } @keyframes cart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); color: var(--ink); position: relative; z-index: 95; transition: background-color var(--dur) var(--ease-out); } .menu-toggle:hover { background: var(--pine-100); } .menu-toggle .icon { width: 1.375rem; height: 1.375rem; } /* header CTA: short label on phones, full label on desktop */ .book-short { display: inline; } .book-full { display: none; } .book-btn { padding: 0.5rem 0.9375rem; } @media (min-width: 900px) { .book-short { display: none; } .book-full { display: inline; } .book-btn { padding: 0.5rem 1.375rem; } } @media (max-width: 399px) { .book-btn { padding: 0.5rem 0.75rem; } } /* mobile drawer — app-style sheet with header, links and contact actions */ #mainNav { position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh; width: min(320px, 86vw); background: var(--paper-2); flex-direction: column; align-items: stretch; box-shadow: -24px 0 60px -24px rgba(16, 32, 30, 0.35); transform: translateX(105%); visibility: hidden; transition: transform 320ms var(--ease-out), visibility 0s linear 320ms; z-index: 150; display: flex; overflow-y: auto; overscroll-behavior: contain; } #mainNav.open { transform: translateX(0); visibility: visible; transition: transform 320ms var(--ease-out); } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 1rem 0.875rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(251, 251, 248, 0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 1; } .drawer-close { width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .drawer-close:hover { background: var(--pine-100); color: var(--pine-700); } .drawer-close:active { transform: rotate(90deg); } .drawer-close .icon { width: 1.125rem; height: 1.125rem; } .drawer-links { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 1rem; flex: 1; } .drawer-foot { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white); } .drawer-act { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; font-weight: 600; color: var(--pine-700); padding: 0.6875rem 0.25rem; border-radius: var(--radius-m); min-height: 2.75rem; transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); } .drawer-act:hover { color: var(--pine-900); background: var(--pine-50); } .drawer-act .icon { width: 1.125rem; height: 1.125rem; } #mainNav .nav-link { padding: 0.9375rem 1.125rem; font-size: 1.0625rem; border-radius: var(--radius-m); color: var(--ink); min-height: 3rem; } #mainNav .nav-link::after { display: none; } #mainNav .nav-link:hover { background: var(--pine-50); } #mainNav .nav-link.active { background: var(--pine-100); color: var(--pine-800); } #mainNav .nav-link.active::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--pine-600); margin-right: 0.625rem; } .nav-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(16, 32, 30, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 280ms var(--ease-out); } .nav-backdrop.show { opacity: 1; } .nav-backdrop[hidden] { display: none; } /* ---------- mobile bottom navigation ---------- */ .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: flex; background: rgba(251, 251, 248, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(16, 32, 30, 0.25); padding-bottom: env(safe-area-inset-bottom); } .mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5625rem 0 0.625rem; font-size: 0.6875rem; font-weight: 500; line-height: 1.15; color: var(--ink-3); position: relative; transition: color var(--dur) var(--ease-out); } .mobile-nav a .icon { width: 1.375rem; height: 1.375rem; } .mobile-nav a.active { color: var(--pine-800); font-weight: 600; } .mobile-nav .cart-count { position: absolute; top: 0.375rem; right: calc(50% - 1.125rem); } @media (min-width: 1024px) { .mobile-nav { display: none; } } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hero-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(16, 32, 30, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 32, 30, 0.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 60% 20%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 90% 80% at 60% 20%, #000 30%, transparent 75%); } .hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; } .hero-blob-a { width: 34rem; height: 34rem; top: -12rem; right: -8rem; background: radial-gradient(circle, rgba(var(--brand-rgb), 0.22), transparent 65%); } .hero-blob-b { width: 26rem; height: 26rem; bottom: -10rem; left: -6rem; background: radial-gradient(circle, rgba(217, 89, 62, 0.12), transparent 65%); } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--pine-700); background: var(--pine-100); border: 1px solid var(--pine-200); padding: 0.4375rem 1rem; border-radius: var(--radius-pill); margin-bottom: 1.5rem; } .hero-badge .icon { width: 0.9375rem; height: 0.9375rem; } .hero-title { font-size: clamp(2.5rem, 6.5vw, 4.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin-bottom: 1.375rem; max-width: 13ch; } .hero-title em { font-style: italic; background: linear-gradient(90deg, #1e6bd6 0%, #0e7c7b 35%, #38bdf8 70%, #1e6bd6 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; position: relative; white-space: nowrap; animation: hero-em-flow 6s linear infinite; } @keyframes hero-em-flow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @media (prefers-reduced-motion: reduce) { .hero-title em { animation: none; } } .hero-sub { font-size: 1.125rem; color: var(--ink-2); max-width: 38rem; margin-bottom: 1.875rem; line-height: 1.7; } .hero-search { display: flex; align-items: center; gap: 0.5rem; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 0.375rem 0.375rem 0.375rem 1.25rem; box-shadow: var(--shadow-m); max-width: 34rem; margin-bottom: 1.375rem; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .hero-search:focus-within { border-color: var(--pine-500); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.15), var(--shadow-m); } .hero-search .icon { width: 1.125rem; height: 1.125rem; color: var(--ink-3); } .hero-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 1rem; color: var(--ink); min-width: 0; min-height: 2.625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-search input::placeholder { color: var(--ink-3); } .hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 2.25rem; } .chip-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.06em; margin-right: 0.25rem; } .chip { display: inline-flex; align-items: center; min-height: 2.375rem; font-size: 0.8438rem; font-weight: 500; padding: 0.375rem 1rem; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--line-2); color: var(--ink-2); transition: all var(--dur) var(--ease-out); } .chip:hover { border-color: var(--pine-500); color: var(--pine-700); background: var(--pine-50); transform: translateY(-1px); } .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 30rem; } .hero-stat dt { font-size: 1.375rem; font-weight: 600; color: var(--ink); line-height: 1.2; } .hero-stat dd { font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.125rem; } .hero-visual { position: relative; min-width: 0; } .hero-frame { position: relative; aspect-ratio: 4 / 4.6; max-height: 560px; border-radius: 40% 40% 24px 24px / 34% 34% 24px 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-l); background: var(--pine-100); } .hero-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 32, 30, 0) 55%, rgba(16, 32, 30, 0.28)); } .hero-img { width: 100%; height: 100%; object-fit: cover; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .hero-slide.active { opacity: 1; } .hero-float { position: absolute; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.875rem 1.125rem; box-shadow: var(--shadow-m); display: flex; align-items: center; gap: 0.75rem; animation: floaty 7s ease-in-out infinite; } .hero-float-1 { bottom: 1.75rem; left: -1rem; } .hero-float-2 { top: 1.75rem; right: -0.75rem; animation-delay: -3.5s; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-icon { width: 2.625rem; height: 2.625rem; border-radius: var(--radius-s); background: var(--pine-100); color: var(--pine-700); display: flex; align-items: center; justify-content: center; } .float-icon .icon { width: 1.25rem; height: 1.25rem; } .float-num { font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .float-label { font-size: 0.75rem; color: var(--ink-3); } .float-pulse { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(46, 107, 69, 0.5); animation: pulse-ring 2.4s var(--ease-out) infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(46, 107, 69, 0.45); } 70% { box-shadow: 0 0 0 9px rgba(46, 107, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 107, 69, 0); } } /* ---------- hero banner (campaign image + search bar) ---------- */ .hero-campaign { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--pine-100); box-shadow: 0 24px 48px -24px rgba(16, 32, 30, 0.18); } .hero-campaign-copy { position: relative; z-index: 2; padding: clamp(1.5rem, 5vw, 3rem); } .hero-campaign-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine-600); margin-bottom: 1rem; } .hero-campaign-title { font-family: 'Inter', 'Outfit', system-ui, sans-serif; font-size: clamp(2.25rem, 8vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; color: #221B12; max-width: 14ch; } .hero-campaign-sub { font-family: 'Inter', system-ui, sans-serif; font-size: clamp(1.0625rem, 3.5vw, 1.25rem); color: var(--ink-2); line-height: 1.55; margin: 0.875rem 0 1.5rem; max-width: 36ch; } .hero-campaign-start { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; } .hero-campaign-start-label { font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; color: var(--pine-600); } .hero-campaign-price { font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; color: #221B12; line-height: 1; } .hero-campaign-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; background: var(--pine-700); color: #fff; font-weight: 700; font-size: 1.0625rem; padding: 0.9375rem 2.5rem; border-radius: 14px; box-shadow: 0 12px 28px -10px rgba(17, 68, 106, 0.5); transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .hero-campaign-btn:hover { background: var(--pine-800); transform: translateY(-2px); } .hero-campaign-img { width: 100%; height: auto; max-height: 52vh; object-fit: cover; object-position: center; display: block; } .hero-searchbar { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 0.625rem; max-width: 58rem; margin: 1.5rem auto 1rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.97); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 40px -24px rgba(16, 32, 30, 0.28); } .hs-input { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; } .hs-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 1.0625rem; color: var(--ink); padding: 0.9375rem 1.25rem; } .hs-input input::placeholder { color: var(--ink-3); } .hs-input .icon { width: 1.25rem; height: 1.25rem; color: var(--ink-3); margin-right: 1.25rem; flex-shrink: 0; } .hs-btn { display: flex; align-items: center; justify-content: center; gap: 0.625rem; color: #fff; font-weight: 700; font-size: 1rem; padding: 0.9375rem 1.5rem; border-radius: 16px; text-decoration: none; white-space: nowrap; transition: filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .hs-btn .icon { width: 1.125rem; height: 1.125rem; } .hs-btn-tests { background: linear-gradient(135deg, #2E6FA4 0%, #11446A 100%); box-shadow: 0 10px 22px -10px rgba(17, 68, 106, 0.55); } .hs-btn-checks { background: linear-gradient(135deg, #62A93F 0%, #4C7E2F 100%); box-shadow: 0 10px 22px -10px rgba(76, 126, 47, 0.55); } .hs-btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .hs-btns { display: flex; flex-direction: column; gap: 0.625rem; } /* popular search chips row under the hero search bar */ .hero-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; max-width: 52rem; margin: 0.625rem auto 0.75rem; } .hero-popular .chip-label { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0.06em; margin-right: 0.125rem; } .hero-popular .chip { min-height: 2.5rem; padding: 0.5rem 1.25rem; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line-2); color: var(--ink); } .hero-promo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); text-align: center; margin-bottom: 0.25rem; } .hero-promo strong { color: var(--ink); } .promo-badge { background: var(--pine-700); color: #fff; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.03em; padding: 0.3125rem 0.875rem; border-radius: var(--radius-pill); } /* floats sit over the hero slideshow */ .hero-gallery-frame .hero-float-1 { left: 1.25rem; bottom: 1.25rem; } .hero-gallery-frame .hero-float-2 { right: 1.25rem; top: auto; bottom: 1.25rem; } @media (max-width: 639px) { .hero-gallery-frame .hero-float { padding: 0.625rem 0.875rem; } .hero-gallery-frame .hero-float .float-icon { width: 2rem; height: 2rem; } .hero-gallery-frame .hero-float-1 { left: 0.75rem; bottom: 0.75rem; } .hero-gallery-frame .hero-float-2 { display: none; } } @media (min-width: 640px) { .hero-gallery-frame .hero-float { gap: 0.75rem; padding: 0.875rem 1.125rem; } .hero-gallery-frame .hero-float .float-icon { width: 2.625rem; height: 2.625rem; } } @media (min-width: 640px) and (max-height: 720px) { .hero-gallery-frame .hero-float-2 { display: none; } } /* trust stats + popular chips under the hero */ .hero-stats-row { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; margin: 1.75rem auto 1.25rem; } .hero-chips-row { justify-content: center; margin: 0 auto 0.5rem; } @media (min-width: 900px) { .hero-stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 64rem; } } /* lab photo slideshow band under the popular chips */ .hero-gallery { margin: 1.75rem 0 0.5rem; } .hero-gallery-frame { position: relative; aspect-ratio: auto; height: clamp(300px, 52vh, 460px); border-radius: 46% 46% 16px 16px / 30% 30% 16px 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-m); background: var(--pine-100); } @media (min-width: 900px) { .hero-gallery-frame { aspect-ratio: auto; height: clamp(340px, 42vw, 480px); border-radius: 46% 46% 18px 18px / 30% 30% 18px 18px; } } /* home hero: trust badge + headline + subtext sit on the LEFT of the slideshow on desktop; on mobile they stack below the search bar */ .hero-home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: center; } .hero-home-copy { min-width: 0; padding-top: 0.75rem; } .hero-home-copy .hero-badge { margin-bottom: 1.125rem; } .hero-home-copy .hero-title { font-size: clamp(2rem, 8.5vw, 2.75rem); font-weight: 700; max-width: none; margin-bottom: 1rem; } .hero-home-copy .hero-sub { font-size: 1rem; max-width: 34rem; margin-bottom: 0; } .hero-home-grid .hero-gallery { margin: 0.5rem 0 0.25rem; } @media (min-width: 900px) { .hero-home-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; padding: 1rem 0 0.25rem; } .hero-home-copy .hero-title { font-size: clamp(3rem, 4.6vw, 5rem); } .hero-home-copy .hero-sub { font-size: 1.1875rem; } .hero-home-grid .hero-gallery { margin: 0; display: flex; align-items: center; justify-content: center; } .hero-home-grid .hero-gallery-frame { width: 100%; height: 80vh; border-radius: 50% 50% 18px 18px / 30% 30% 18px 18px; } } @media (min-width: 1200px) { .hero-home-copy .hero-title { font-size: clamp(3.5rem, 5vw, 5.75rem); } .hero-home-copy .hero-sub { font-size: 1.25rem; max-width: 40rem; } } /* desktop: wider campaign card with the image on the right */ @media (min-width: 900px) { .hero-campaign { border-radius: 28px; } .hero-campaign-title { font-size: clamp(2.75rem, 4.6vw, 4.25rem); } .hero-campaign-sub { font-size: 1.375rem; } .hero-campaign-price { font-size: clamp(2.25rem, 3.5vw, 3.25rem); } .hero-campaign-img { height: clamp(340px, 42vw, 480px); max-height: none; } .hero-searchbar { flex-direction: row; align-items: center; margin-top: 1.5rem; padding: 0.625rem; border-radius: 18px; max-width: 52rem; } .hs-input input { font-size: 1rem; padding: 0.625rem 1.125rem; } .hs-btns { display: flex; flex-direction: row; align-items: center; gap: 0.625rem; flex: 0 0 auto; } .hs-btn { flex: 0 0 auto; padding: 0.75rem 1.5rem; font-size: 0.9375rem; border-radius: var(--radius-pill); } .hs-btn .icon { width: 1rem; height: 1rem; } } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); } .reveal.in-view { opacity: 1; transform: none; } /* ---------- tiles (quick links) ---------- */ .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.75rem 1.5rem; position: relative; overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pine-600), var(--pine-300)); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--pine-200); } .tile:hover::before { transform: scaleX(1); } .tile-icon { width: 3rem; height: 3rem; border-radius: var(--radius-m); background: var(--pine-50); color: var(--pine-700); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .tile:hover .tile-icon { background: var(--pine-700); color: #fff; transform: scale(1.05); } .tile-icon .icon { width: 1.5rem; height: 1.5rem; } .tile-title { font-size: 1.1875rem; font-weight: 600; } .tile-text { font-size: 0.875rem; color: var(--ink-3); line-height: 1.5; } .tile-link { margin-top: 0.625rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--pine-600); transition: gap var(--dur) var(--ease-out); } .tile-link .icon { width: 0.875rem; height: 0.875rem; } .tile:hover .tile-link { gap: 0.625rem; } /* ---------- why choose (editorial split) ---------- */ .why-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; } .why-aside { position: relative; } .why-note { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; font-size: 0.875rem; color: var(--ink-2); padding: 0.875rem 1.125rem; background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: var(--radius-m); } .why-note .icon { width: 1.125rem; height: 1.125rem; color: var(--pine-600); } .why-list { display: grid; gap: 1rem; } .why-item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.125rem; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .why-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--pine-200); } .why-num { width: 3rem; height: 3rem; border-radius: var(--radius-m); background: var(--pine-100); color: var(--pine-700); font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .why-item h3 { font-size: 1.1875rem; margin-bottom: 0.375rem; } .why-item p { font-size: 0.9063rem; color: var(--ink-2); line-height: 1.65; } /* ---------- cards (generic) ---------- */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } /* ---------- packages ---------- */ .pkg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .pkg-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--pine-200); } .pkg-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pine-500), transparent); opacity: 0; transition: opacity var(--dur) var(--ease-out); } .pkg-card:hover::before { opacity: 1; } .pkg-ribbon { position: absolute; top: 1.25rem; right: -2.125rem; transform: rotate(38deg); background: var(--coral); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3125rem 2.5rem; box-shadow: 0 4px 12px -4px rgba(217, 89, 62, 0.5); } .pkg-ribbon.ribbon-star { background: var(--pine-700); box-shadow: 0 4px 12px -4px rgba(var(--brand-rgb), 0.5); } .pkg-ribbon.ribbon-amber { background: var(--amber); box-shadow: 0 4px 12px -4px rgba(33, 145, 152, 0.5); } .pkg-tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.6563rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine-600); background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: var(--radius-pill); padding: 0.3125rem 0.8125rem; margin-bottom: 0.625rem; align-self: flex-start; } .pkg-name { font-size: 1.375rem; font-weight: 600; margin-bottom: 0.3125rem; } .pkg-meta { font-size: 0.7813rem; color: var(--ink-3); margin-bottom: 0.625rem; } .pkg-desc { font-size: 0.9063rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 0.875rem; } .pkg-includes { display: grid; gap: 0.375rem; margin-bottom: 0.875rem; } .pkg-includes li { display: flex; align-items: center; gap: 0.5625rem; font-size: 0.8438rem; color: var(--ink-2); } .pkg-includes .tick { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--pine-100); color: var(--pine-700); font-size: 0.625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .pkg-includes .pkg-extra[hidden] { display: none; } .pkg-more { padding-top: 0.1875rem; } .pkg-toggle { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; color: var(--pine-600); background: transparent; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .pkg-toggle:hover, .pkg-toggle:focus-visible { color: var(--pine-700); outline: none; } .pkg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; margin-bottom: 0.625rem; padding-top: 0.5rem; border-top: 1px dashed var(--line-2); } .pkg-now { font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; } .pkg-old { font-size: 0.875rem; color: var(--ink-3); text-decoration: line-through; } .pkg-off { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; font-weight: 600; color: var(--ok); background: var(--ok-100); border-radius: var(--radius-pill); padding: 0.1875rem 0.5625rem; } .pkg-count { font-size: 0.8125rem; color: var(--ink-3); margin-top: 1rem; } .pkg-search { display: flex; align-items: center; gap: 0.625rem; max-width: 34rem; margin: 1.25rem 0 0; padding: 0.75rem 1.125rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .pkg-search:focus-within { border-color: var(--pine-400); box-shadow: 0 0 0 3px rgba(14, 116, 96, 0.12); } .pkg-search .icon { width: 1.125rem; height: 1.125rem; color: var(--ink-3); flex: none; } .pkg-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.9375rem; color: var(--ink); } .pkg-search input::placeholder { color: var(--ink-3); } /* ---------- campaign banners (top strip) ---------- */ .banner-strip { position: relative; background: var(--pine-900); overflow: hidden; } .banner-strip[hidden] { display: none; } .banner-strip-viewport { overflow: hidden; } .banner-strip-track { position: relative; height: auto; display: flex; transition: transform 0.6s var(--ease-out); will-change: transform; touch-action: pan-y; } .banner-slide { position: relative; flex: 0 0 100%; min-width: 100%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--pine-800), var(--pine-900)); } .banner-slide-media picture { display: block; width: 100%; height: 100%; } .banner-slide-img { display: block; position: relative; inset: auto; width: 100%; height: auto; object-fit: cover; object-position: center; } .banner-slide-media { position: relative; inset: auto; width: 100%; display: block; } .banner-slide-fallback { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); background: radial-gradient(560px 300px at 12% 0%, rgba(255, 255, 255, 0.12), transparent 60%), linear-gradient(135deg, var(--pine-800), var(--pine-900)); } .banner-slide-shade { position: absolute; inset: 0; display: none; background: linear-gradient(90deg, rgba(10, 57, 117, 0.88) 0%, rgba(10, 57, 117, 0.45) 55%, rgba(10, 57, 117, 0.06) 100%); } .banner-slide-copy { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 0 clamp(1.25rem, 4vw, 4rem); max-width: 52rem; z-index: 1; display: none; } .banner-slide-tag { display: inline-block; background: rgba(255, 255, 255, 0.92); color: var(--pine-700); font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 0.3125rem 0.8125rem; margin-bottom: 0.75rem; } .banner-slide-title { font-size: clamp(1.375rem, 3.4vw, 2.25rem); font-weight: 600; line-height: 1.15; color: #fff; margin-bottom: 0.625rem; max-width: 24ch; } .banner-slide-desc { display: none; } .banner-slide-chips { display: none; } .banner-slide-cta { display: inline-flex; align-items: center; gap: 0.375rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.55); padding-bottom: 0.25rem; } .banner-slide-cta .icon { width: 1rem; height: 1rem; } .banner-slide-off { position: absolute; top: 1.25rem; right: clamp(1.25rem, 4vw, 4rem); display: none; background: var(--coral); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; border-radius: var(--radius-pill); padding: 0.375rem 1rem; box-shadow: 0 8px 20px -8px rgba(var(--brand-rgb), 0.65); z-index: 1; } .banner-strip-dots { position: absolute; bottom: 0.875rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 2; } .banner-strip-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.35); border: 0; padding: 0; cursor: pointer; transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .banner-strip-dot.active { background: #fff; transform: scale(1.25); } .banner-strip-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(8, 28, 26, 0.45); color: #fff; font-size: 1.375rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); } .banner-strip-arrow:hover { background: rgba(8, 28, 26, 0.7); } .banner-strip-arrow[hidden] { display: none; } .banner-strip-prev { left: 1rem; } .banner-strip-next { right: 1rem; } @media (max-width: 639px) { .banner-strip-arrow { width: 2.125rem; height: 2.125rem; font-size: 1.125rem; } .banner-strip-prev { left: 0.625rem; } .banner-strip-next { right: 0.625rem; } } /* ---------- banner info page ---------- */ .banner-back { display: inline-flex; align-items: center; gap: 0.375rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); margin-bottom: 1.5rem; } .banner-back:hover { color: var(--pine-600); } .banner-detail-grid { display: grid; grid-template-columns: minmax(0, 44%) 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .banner-detail-media { position: sticky; top: calc(var(--header-h) + 1.5rem); border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); background: var(--pine-900); box-shadow: var(--shadow-m); } .banner-detail-img { display: block; width: 100%; height: 100%; min-height: 20rem; object-fit: cover; } .banner-detail-media-pic { display: block; width: 100%; height: 100%; min-height: 20rem; } .banner-detail-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; color: rgba(255, 255, 255, 0.85); background: radial-gradient(560px 320px at 15% 0%, rgba(255, 255, 255, 0.12), transparent 60%), linear-gradient(135deg, var(--pine-800), var(--pine-900)); } .banner-detail-main { padding-bottom: 1rem; } .banner-detail-title { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 600; margin-bottom: 1rem; } .banner-detail-desc { font-size: 1.0625rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 1.5rem; } .banner-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.75rem; } .banner-fact { background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: var(--radius-m); padding: 0.875rem 1rem; } .banner-fact dt { font-size: 0.9375rem; font-weight: 600; color: var(--pine-700); } .banner-fact dd { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.125rem; } .banner-detail-sub { font-size: 1.375rem; font-weight: 600; margin-bottom: 0.875rem; } .banner-detail-includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4375rem; margin-bottom: 1.75rem; } .banner-detail-includes li { display: flex; align-items: center; gap: 0.5625rem; font-size: 0.9063rem; color: var(--ink-2); } .banner-detail-includes .tick { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--pine-100); color: var(--pine-700); font-size: 0.625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .banner-detail-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; padding-top: 1.125rem; border-top: 1px dashed var(--line-2); } .banner-detail-price .pkg-now { font-size: 2rem; } .banner-detail-price .pkg-old { font-size: 1rem; } .banner-detail-note { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.875rem; text-align: center; } /* more campaigns */ .banner-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .banner-more-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .banner-more-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--pine-200); } .banner-more-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--pine-900); } .banner-more-img { width: 100%; height: 100%; object-fit: cover; display: block; } .banner-more-fallback { height: 100%; background: radial-gradient(300px 180px at 20% 0%, rgba(255, 255, 255, 0.12), transparent 60%), linear-gradient(135deg, var(--pine-800), var(--pine-900)); } .banner-more-body { padding: 1.25rem; } .banner-more-tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.6563rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine-600); background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; margin-bottom: 0.625rem; } .banner-more-title { font-size: 1.1875rem; font-weight: 600; margin-bottom: 0.625rem; } .banner-more-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; } .banner-more-price .pkg-now { font-size: 1.25rem; } @media (max-width: 899px) { .banner-detail-grid { grid-template-columns: 1fr; } .banner-detail-media { position: static; } .banner-detail-img { min-height: 14rem; } .banner-detail-media-pic { min-height: 14rem; } .banner-detail-includes { grid-template-columns: 1fr; } .banner-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .banner-strip-track { transition: none; } } @media (min-width: 900px) { /* desktop: centered rounded card like a featured offer */ .banner-strip { background: transparent; padding-top: 1.25rem; width: min(60%, calc(max(22rem, 100vh - 19.5rem) * 1.5)); margin: 0 auto; overflow: hidden; } .banner-strip-track { height: auto; padding: 0; } .banner-slide { display: flex; justify-content: center; max-width: none; min-width: 100%; border-radius: var(--radius-l); overflow: hidden; min-height: 0; box-shadow: none; border: 0; background: transparent; } .banner-slide-tag { background: var(--pine-50); color: var(--pine-600); border: 1px solid var(--pine-100); } .banner-slide-copy { display: none; } .banner-slide-title { font-size: clamp(1.625rem, 2.5vw, 2.5rem); margin-bottom: 0.75rem; color: var(--ink); } .banner-slide-desc { display: block; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; margin-bottom: 1.125rem; } .banner-slide-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .banner-slide-chip { background: var(--pine-50); border: 1px solid var(--pine-100); color: var(--pine-600); border-radius: var(--radius-pill); padding: 0.3125rem 0.8125rem; font-size: 0.75rem; font-weight: 500; } .banner-slide-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--pine-500); color: #fff; font-family: inherit; font-size: 0.9375rem; font-weight: 600; text-transform: none; letter-spacing: 0; border-radius: var(--radius-pill); padding: 0.75rem 1.5rem; border: 0; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out); } .banner-slide-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); background: var(--pine-600); } .banner-slide-media { position: relative; inset: auto; flex: 1 1 100%; min-width: 0; width: 100%; height: auto; min-height: 0; margin-left: 0; } .banner-slide-media .banner-slide-img { position: relative; inset: auto; width: 100%; height: auto; object-fit: cover; object-position: center; } .banner-slide-fallback { position: relative; inset: auto; flex: 1 1 100%; width: auto; height: auto; min-height: 17rem; margin-left: 0; } .banner-slide-shade { display: none; } .banner-slide-off { display: none; } .banner-strip-dots { position: static; transform: none; margin: 0.875rem auto 1.25rem; justify-content: center; } .banner-strip-dot { background: rgba(16, 32, 30, 0.2); } .banner-strip-dot.active { background: var(--pine-500); transform: scale(1.25); } } @media (max-width: 639px) { .banner-slide-copy { padding: 0 1rem; } .banner-slide-off { top: 0.875rem; right: 0.875rem; } .banner-facts { grid-template-columns: 1fr; } .banner-more-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* banner: full-width rounded card, image defines the height */ .banner-strip { width: 100%; margin: 0; background: transparent; border-radius: var(--radius-l); } /* compact search bar + side-by-side pill buttons */ .hero-searchbar { gap: 0.5rem; padding: 0.5rem; border-radius: 16px; margin: 1rem auto 0.625rem; } .hs-input input { font-size: 0.9375rem; padding: 0.625rem 0.875rem; } .hs-input .icon { margin-right: 0.875rem; } .hs-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .hs-btn { padding: 0.625rem 0.875rem; font-size: 0.875rem; border-radius: var(--radius-pill); gap: 0.375rem; } .hs-btn .icon { width: 0.875rem; height: 0.875rem; } } /* ---------- home collection banner ---------- */ .hc-banner { background: radial-gradient(800px 300px at 85% -20%, rgba(255, 255, 255, 0.09), transparent 60%), radial-gradient(600px 300px at -10% 120%, rgba(var(--brand-rgb), 0.35), transparent 60%), var(--pine-900); color: #fff; position: relative; overflow: hidden; } .hc-banner::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000 20%, transparent 75%); } .hc-banner-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); } .hc-banner-copy h2 { margin-bottom: 0.875rem; } .hc-banner-copy p { color: rgba(255, 255, 255, 0.72); max-width: 32rem; line-height: 1.7; margin-bottom: 1.75rem; } .hc-banner-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; } .hc-stat { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-m); padding: 1.125rem; background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .hc-stat-num { font-size: 1.1875rem; font-weight: 600; color: #fff; line-height: 1.3; } .hc-stat-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); margin-top: 0.1875rem; } /* ---------- testimonials ---------- */ .testi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .testi-card { padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; } .testi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--pine-200); } .stars { color: var(--amber); letter-spacing: 0.25em; font-size: 0.8125rem; } .testi-text { font-size: 0.9688rem; color: var(--ink); line-height: 1.7; flex: 1; } .testi-author { display: flex; align-items: center; gap: 0.75rem; } .testi-avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--pine-100); color: var(--pine-700); font-weight: 600; display: flex; align-items: center; justify-content: center; } .testi-name { font-weight: 600; font-size: 0.9375rem; } .testi-role { font-size: 0.8125rem; color: var(--ink-3); } /* ---------- final CTA ---------- */ .cta-card { background: radial-gradient(700px 260px at 90% -30%, rgba(255, 255, 255, 0.1), transparent 60%), radial-gradient(500px 240px at 0% 130%, rgba(var(--brand-rgb), 0.4), transparent 60%), var(--pine-900); color: #fff; border-radius: var(--radius-xl); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; position: relative; overflow: hidden; } .cta-card h2 { color: #fff; font-size: clamp(1.75rem, 3.6vw, 2.5rem); max-width: 22ch; margin: 0 auto 0.875rem; } .cta-card p { color: rgba(255, 255, 255, 0.7); max-width: 40ch; margin: 0 auto 2rem; } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem; } /* ---------- footer ---------- */ .site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.72); } .footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: 2.5rem; } .foot-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.125rem; } .foot-logo .logo-img { border-radius: 12px; box-shadow: none; } .foot-name { font-size: 1.25rem; font-weight: 700; color: #fff; } .foot-sub { font-size: 0.5625rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .footer-brand p { font-size: 0.9063rem; line-height: 1.7; color: rgba(255, 255, 255, 0.6); max-width: 24rem; } .footer-title { font-size: 0.8125rem; font-weight: 600; color: #fff; letter-spacing: 0.02em; margin-bottom: 1rem; } .footer-col { min-width: 0; } .blog-author { font-weight: 500; color: var(--ink-2); } .footer-links li { margin-bottom: 0.5625rem; } .footer-link { font-size: 0.875rem; color: rgba(255, 255, 255, 0.66); transition: color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out); } .footer-link:hover { color: #fff; padding-left: 0.25rem; } .footer-contact li { font-size: 0.875rem; color: rgba(255, 255, 255, 0.66); line-height: 1.65; margin-bottom: 0.5625rem; display: flex; align-items: flex-start; gap: 0.5625rem; } .footer-contact .icon { width: 0.9375rem; height: 0.9375rem; margin-top: 0.1875rem; color: rgba(255, 255, 255, 0.4); } .footer-contact a { color: rgba(255, 255, 255, 0.72); } .footer-contact a:hover { color: #fff; } .footer-bar { border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-bar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding-top: 1.375rem; padding-bottom: 1.375rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); } /* ---------- whatsapp fab ---------- */ .wa-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 84; background: #1FAE5C; color: #fff; width: 3.5rem; height: 3.5rem; border-radius: 50%; box-shadow: 0 12px 28px -8px rgba(31, 174, 92, 0.55); display: flex; align-items: center; justify-content: center; transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); } .wa-fab:hover { background: #17944C; transform: translateY(-3px) scale(1.04); } .wa-fab .icon { width: 1.5rem; height: 1.5rem; } @media (max-width: 899px) { .wa-fab { bottom: calc(var(--tab-h) + 0.5rem + env(safe-area-inset-bottom)); } } @media (min-width: 900px) { .wa-fab { right: 1.5rem; bottom: 1.5rem; } } /* ---------- toasts ---------- */ .toast-wrap { position: fixed; bottom: calc(var(--tab-h) + 1rem); left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 0.625rem; width: min(92vw, 26rem); pointer-events: none; } @media (min-width: 900px) { .toast-wrap { bottom: 1.5rem; left: auto; right: 1.5rem; transform: none; align-items: flex-end; } .wa-fab.mobile-nav-open { bottom: 4.5rem; } } .toast { display: flex; align-items: center; gap: 0.75rem; background: var(--ink); color: #fff; border-radius: var(--radius-m); padding: 0.875rem 1.125rem; box-shadow: var(--shadow-l); font-size: 0.9063rem; font-weight: 500; opacity: 0; transform: translateY(14px) scale(0.97); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); pointer-events: auto; } .toast.show { opacity: 1; transform: none; } .toast-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; } .toast-success .toast-dot { background: #57C785; } .toast-error .toast-dot { background: #FF8B85; } .toast-info .toast-dot { background: #8FC5B7; } /* ---------- empty state ---------- */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.625rem; padding: 3.5rem 1.5rem; background: var(--white); border: 1px dashed var(--line-2); border-radius: var(--radius-l); color: var(--ink-3); font-size: 0.9375rem; } .empty-state .icon { width: 2.5rem; height: 2.5rem; color: var(--pine-300); margin-bottom: 0.375rem; } .empty-state a { color: var(--pine-600); font-weight: 600; } .empty-state a:hover { text-decoration: underline; } /* ---------- skeleton ---------- */ .skeleton { position: relative; overflow: hidden; background: var(--paper); border-radius: var(--radius-s); } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } .skeleton-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; display: grid; gap: 0.875rem; } .skeleton-line { height: 0.875rem; } .skeleton-line.w60 { width: 60%; } .skeleton-line.w40 { width: 40%; } .skeleton-line.w90 { width: 90%; } .skeleton-line.w30 { width: 30%; } /* ============================================================ TESTS CATALOG PAGE ============================================================ */ .tests-search { display: flex; align-items: center; gap: 0.75rem; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 0.375rem 0.375rem 0.375rem 1.25rem; box-shadow: var(--shadow-m); max-width: 34rem; margin-top: 1.5rem; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .tests-search:focus-within { border-color: var(--pine-500); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.15), var(--shadow-m); } .tests-search .search-icon { width: 1.125rem; height: 1.125rem; color: var(--ink-3); } .search-input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 1rem; min-width: 0; min-height: 2.625rem; } .search-input::placeholder { color: var(--ink-3); } .tests-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; } .cat-rail { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; position: sticky; top: calc(var(--header-h) + 2.5rem); } .cat-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 1rem; } .cat-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: min(30rem, calc(100vh - var(--header-h) - 8rem)); overflow-y: auto; padding-right: 0.25rem; scrollbar-width: thin; scrollbar-color: var(--pine-200) transparent; } .cat-list::-webkit-scrollbar { width: 0.375rem; } .cat-list::-webkit-scrollbar-track { background: transparent; } .cat-list::-webkit-scrollbar-thumb { background: var(--pine-200); border-radius: 999px; } .cat-list::-webkit-scrollbar-thumb:hover { background: var(--pine-500); } .cat-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; text-align: left; font-size: 0.9063rem; font-weight: 500; color: var(--ink-2); border-radius: var(--radius-m); padding: 0.625rem 0.875rem; min-height: 2.75rem; transition: all var(--dur) var(--ease-out); } .cat-btn::after { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--pine-200); transition: background-color var(--dur) var(--ease-out); } .cat-btn:hover { background: var(--pine-50); color: var(--pine-700); } .cat-btn.active { background: var(--pine-100); color: var(--pine-800); font-weight: 600; } .cat-btn.active::after { background: var(--pine-600); } .cat-rail-foot { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--line-2); font-size: 0.8125rem; color: var(--ink-3); line-height: 1.6; } .cat-rail-foot a { color: var(--pine-600); font-weight: 600; } .tests-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: 0.8125rem; color: var(--ink-3); } .test-list { display: grid; gap: 0.875rem; } .test-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .test-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); border-color: var(--pine-200); } .test-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; } .test-name { font-size: 1.1875rem; font-weight: 600; } .test-code { font-size: 0.7188rem; color: var(--ink-3); } .test-cat { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.6563rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pine-600); background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: var(--radius-pill); padding: 0.25rem 0.6875rem; margin-top: 0.5rem; } .test-desc { font-size: 0.9063rem; color: var(--ink-2); line-height: 1.65; margin-top: 0.75rem; max-width: 60ch; } .test-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.875rem; } .test-chip { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.7813rem; font-weight: 500; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.3125rem 0.75rem; } .test-chip .icon { width: 0.8125rem; height: 0.8125rem; color: var(--ink-3); } .test-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.875rem; padding-top: 1rem; border-top: 1px dashed var(--line-2); } .test-price { font-size: 1.3125rem; font-weight: 600; color: var(--ink); } .test-mrp { font-size: 0.8125rem; color: var(--ink-3); text-decoration: line-through; margin-right: 0.25rem; } .test-off { font-size: 0.6875rem; font-weight: 600; color: var(--ok); background: var(--ok-100); border-radius: var(--radius-pill); padding: 0.1875rem 0.5625rem; margin-left: 0.5rem; vertical-align: middle; } .test-actions { display: flex; gap: 0.5rem; } /* cart rail (desktop) */ .cart-rail { position: sticky; top: calc(var(--header-h) + 2.5rem); } .cart-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; box-shadow: var(--shadow-s); } .cart-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.125rem; } .cart-title { font-size: 1.125rem; font-weight: 600; } .cart-badge { min-width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); background: var(--pine-100); color: var(--pine-700); font-size: 0.8125rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .cart-body { font-size: 0.875rem; color: var(--ink-3); } .cart-list { display: grid; gap: 0.625rem; } .cart-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.625rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.625rem 0.75rem; } .cart-item-name { font-size: 0.8438rem; font-weight: 600; line-height: 1.35; } .cart-item-code { font-size: 0.6563rem; color: var(--ink-3); } .cart-item-price { font-size: 0.8125rem; font-weight: 600; } .cart-remove { width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--ink-3); font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease-out); } .cart-remove:hover { background: var(--danger-100); color: var(--danger); } .cart-total { display: flex; align-items: center; justify-content: space-between; font-size: 0.9375rem; font-weight: 600; padding: 0.875rem 0 0; margin-top: 0.875rem; border-top: 1px dashed var(--line-2); } .cart-total .mono { font-size: 1.0625rem; } .cart-panel .btn { margin-top: 1rem; } .cart-empty { font-size: 0.875rem; color: var(--ink-3); line-height: 1.6; } /* floating cart bar (mobile) */ .cart-fab-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); z-index: 80; padding: 0.75rem 1rem; background: linear-gradient(180deg, transparent, rgba(245, 244, 240, 0.95) 30%); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); } .cart-fab-bar[hidden] { display: none; } .cart-fab-bar.ready { animation: fab-rise 340ms var(--ease-out); } @keyframes fab-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } .fab-btn { width: 100%; max-width: 30rem; margin: 0 auto; box-shadow: 0 16px 40px -12px rgba(var(--brand-rgb), 0.6); } @media (min-width: 900px) { .cart-fab-bar { display: none; } .book-bar { display: none; } } /* bottom sheet (mobile cart) */ .sheet-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(16, 32, 30, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 280ms var(--ease-out); } .sheet-backdrop.show { opacity: 1; } .sheet-backdrop[hidden] { display: none; } .bottom-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; background: var(--paper-2); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 -24px 60px -24px rgba(16, 32, 30, 0.35); padding: 0.75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); max-height: 78vh; display: flex; flex-direction: column; transform: translateY(105%); visibility: hidden; transition: transform 340ms var(--ease-out), visibility 0s linear 340ms; } .bottom-sheet.open { transform: translateY(0); visibility: visible; transition: transform 340ms var(--ease-out); } .sheet-handle { width: 2.75rem; height: 0.3125rem; border-radius: var(--radius-pill); background: var(--line-2); margin: 0 auto 0.875rem; } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .sheet-close { width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--dur) var(--ease-out); } .sheet-close:hover { background: var(--pine-100); } .sheet-close .icon { width: 1.125rem; height: 1.125rem; } .sheet-body { overflow-y: auto; padding-right: 0.25rem; } /* ---------- modal ---------- */ .modal { position: fixed; inset: 0; z-index: 120; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(16, 32, 30, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 240ms var(--ease-out); } .modal.show .modal-backdrop { opacity: 1; } .modal-card { position: relative; margin: auto; max-width: min(560px, calc(100vw - 2rem)); max-height: min(88vh, 720px); overflow-y: auto; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); padding: 2rem; opacity: 0; transform: translateY(16px) scale(0.97); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); } .modal.show .modal-card { opacity: 1; transform: none; } .modal-x { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--paper); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .modal-x:hover { background: var(--pine-100); color: var(--pine-700); transform: rotate(90deg); } .modal-x .icon { width: 1.125rem; height: 1.125rem; } .modal-title { font-size: 1.5rem; margin-bottom: 0.375rem; padding-right: 2.5rem; } .modal-code { font-size: 0.75rem; color: var(--ink-3); margin-bottom: 1rem; } .modal-desc { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 1.5rem; } .modal-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .meta-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.875rem; } .meta-label { display: block; font-size: 0.6875rem; color: var(--ink-3); margin-bottom: 0.25rem; } .meta-value { font-size: 0.9375rem; font-weight: 600; } .modal .btn-block { margin-top: 0.25rem; } .modal-includes { display: grid; gap: 0.4375rem; margin-bottom: 1.25rem; padding: 1rem 1.125rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); } .modal-includes li { display: flex; align-items: center; gap: 0.5625rem; font-size: 0.8438rem; color: var(--ink-2); } .modal-includes .tick { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--pine-100); color: var(--pine-700); font-size: 0.625rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .modal-actions { display: flex; gap: 0.75rem; } .review-modal .modal-card { max-width: min(480px, calc(100vw - 2rem)); } .review-modal .modal-card .form-input { margin-bottom: 0.875rem; } .review-modal .modal-card .form-note { margin-top: 0.875rem; } /* ============================================================ BOOKING / HOME COLLECTION ============================================================ */ .steps-ind { display: flex; align-items: center; gap: 0; margin: 1.75rem 0 2.5rem; max-width: 30rem; } .step-ind { display: flex; align-items: center; gap: 0.625rem; flex: 1; } .step-ind .si-num { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--white); border: 1.5px solid var(--line-2); color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur) var(--ease-out); } .step-ind .si-label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; } .step-ind.done .si-num { background: var(--pine-700); border-color: var(--pine-700); color: #fff; } .step-ind.done .si-label { color: var(--ink-2); } .step-ind.active .si-num { border-color: var(--pine-600); color: var(--pine-700); box-shadow: 0 0 0 5px var(--pine-100); } .step-ind.active .si-label { color: var(--pine-800); font-weight: 600; } .step-ind .si-line { flex: 1; height: 1.5px; background: var(--line-2); margin: 0 0.75rem; } .step-ind.done .si-line { background: var(--pine-500); } .booking-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; } .summary-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.75rem; position: sticky; top: calc(var(--header-h) + 2rem); } .summary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .summary-items { display: grid; gap: 0.625rem; } .summary-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.625rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.6875rem 0.8125rem; } .summary-item-name { font-size: 0.875rem; font-weight: 600; line-height: 1.35; } .summary-item-code { font-size: 0.6563rem; color: var(--ink-3); } .summary-item-price { font-size: 0.8438rem; font-weight: 600; } .summary-total { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1.0625rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px dashed var(--line-2); } .summary-total .mono { font-size: 1.25rem; } .summary-note { font-size: 0.8125rem; color: var(--ink-3); margin-top: 1.25rem; line-height: 1.6; display: flex; gap: 0.5rem; align-items: flex-start; } .summary-note .icon { width: 0.9375rem; height: 0.9375rem; margin-top: 0.1875rem; color: var(--pine-500); flex-shrink: 0; } .next-steps { display: grid; gap: 0.875rem; margin-top: 1.5rem; } .next-step { display: flex; gap: 0.875rem; align-items: flex-start; font-size: 0.8438rem; color: var(--ink-2); line-height: 1.55; } .next-step .ns-num { width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--pine-100); color: var(--pine-700); font-family: 'JetBrains Mono', monospace; font-size: 0.6563rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.125rem; } .form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: var(--shadow-s); } .form-section { padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px dashed var(--line-2); } .form-section:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .form-section-title { display: flex; align-items: center; gap: 0.75rem; font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 600; margin-bottom: 1.125rem; } .fs-num { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; font-weight: 600; color: var(--pine-700); background: var(--pine-100); border-radius: var(--radius-pill); padding: 0.25rem 0.625rem; } .form-label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--ink); } .form-input, .form-select { width: 100%; min-height: 3.125rem; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--radius-m); padding: 0.75rem 1rem; font-size: 0.9375rem; color: var(--ink); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); } textarea.form-input { min-height: 7.5rem; resize: vertical; line-height: 1.6; } .form-input::placeholder { color: var(--ink-3); } .form-input:focus, .form-select:focus { outline: none; border-color: var(--pine-500); background: var(--white); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.14); } .form-input.has-error { border-color: var(--danger); } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; cursor: pointer; } .form-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; } .form-grid-2 > * { min-width: 0; } .form-note { font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.875rem; line-height: 1.6; } .field-error { display: none; font-size: 0.7813rem; color: var(--danger); margin-top: 0.4375rem; font-weight: 500; } .field-error.show { display: block; } /* upload box */ .upload-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3125rem; width: 100%; min-height: 7.5rem; background: var(--paper-2); border: 1.5px dashed var(--line-2); border-radius: var(--radius-m); padding: 1rem; text-align: center; cursor: pointer; transition: all var(--dur) var(--ease-out); } .upload-box:hover { border-color: var(--pine-500); background: var(--pine-50); } .upload-box .icon { width: 1.5rem; height: 1.5rem; color: var(--pine-500); } .upload-main { font-size: 0.9063rem; font-weight: 600; } .upload-sub { font-size: 0.75rem; color: var(--ink-3); } .upload-box.has-file { border-color: var(--pine-500); border-style: solid; background: var(--pine-50); } /* calendar */ .calendar { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem; min-width: 0; } .calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .calendar-title { font-size: 0.8438rem; font-weight: 600; } .cal-nav { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem; color: var(--ink-2); transition: all var(--dur) var(--ease-out); } .cal-nav:hover { background: var(--pine-100); color: var(--pine-700); } .calendar-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .calendar-table th { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; font-weight: 500; color: var(--ink-3); padding: 0.375rem 0; text-align: center; } .calendar-table td { text-align: center; padding: 0.125rem; min-width: 0; } .cal-day { width: 100%; max-width: 2.75rem; aspect-ratio: 1 / 1; border-radius: 50%; font-size: 0.8438rem; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease-out); } .cal-day:not(.disabled):hover { background: var(--pine-100); color: var(--pine-700); } .cal-day.disabled { color: var(--ink-3); opacity: 0.35; } .cal-day.sel { background: var(--pine-700); color: #fff; box-shadow: 0 6px 14px -6px rgba(var(--brand-rgb), 0.6); } /* time picker */ .time-picker { --tp-col-h: 7.5rem; --tp-opt-h: 2.375rem; display: flex; align-items: center; justify-content: center; gap: 0.375rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.75rem 0.5rem; position: relative; overflow: hidden; user-select: none; min-width: 0; } .tp-center { position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); height: var(--tp-opt-h); border-radius: var(--radius-m); background: var(--pine-100); pointer-events: none; } .tp-col { position: relative; flex: 1 1 0; min-width: 0; max-width: 4.5rem; height: var(--tp-col-h); overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; text-align: center; z-index: 1; } .tp-col::-webkit-scrollbar { display: none; } .tp-col::before, .tp-col::after { content: ''; display: block; height: calc((var(--tp-col-h) - var(--tp-opt-h)) / 2); flex-shrink: 0; } .tp-opt { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--tp-opt-h); scroll-snap-align: center; font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--ink-3); transition: color var(--dur) var(--ease-out); } .tp-opt.sel { color: var(--pine-800); font-weight: 700; } .tp-div { font-family: 'JetBrains Mono', monospace; color: var(--ink-3); font-size: 1.125rem; z-index: 1; flex-shrink: 0; } /* wa link */ .wa-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; width: 100%; min-height: 3rem; border-radius: var(--radius-pill); border: 1px solid rgba(31, 174, 92, 0.45); background: rgba(31, 174, 92, 0.07); color: #147A43; font-weight: 600; font-size: 0.9063rem; transition: all var(--dur) var(--ease-out); } .wa-link:hover { background: rgba(31, 174, 92, 0.14); transform: translateY(-1px); } .wa-link .icon { width: 1.125rem; height: 1.125rem; } /* home collection features strip */ .hc-feats { display: grid; gap: 0.875rem; margin-top: 1.75rem; } .hc-feat { display: flex; align-items: center; gap: 0.875rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.125rem; } .hc-feat-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-s); background: var(--pine-100); color: var(--pine-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hc-feat-icon .icon { width: 1.25rem; height: 1.25rem; } .hc-feat-text .mono { font-size: 0.9375rem; font-weight: 600; color: var(--ink); display: block; line-height: 1.3; } .hc-feat-text span { font-size: 0.7813rem; color: var(--ink-3); } .form-status { font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-m); padding: 0.75rem 1rem; margin-bottom: 1rem; } .form-status.success { background: var(--ok-100); color: var(--ok); } .form-status.error { background: var(--danger-100); color: var(--danger); } /* facts overlay */ .facts-overlay { position: fixed; inset: 0; z-index: 130; } .facts-overlay[hidden] { display: none; } .facts-backdrop { position: absolute; inset: 0; background: rgba(8, 42, 36, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 260ms var(--ease-out); } .facts-card { position: relative; margin: auto; max-width: min(460px, calc(100vw - 2rem)); background: radial-gradient(400px 200px at 100% 0%, rgba(var(--brand-rgb), 0.25), transparent 60%), var(--pine-900); color: #fff; border-radius: var(--radius-l); padding: 2.25rem; text-align: center; box-shadow: var(--shadow-l); opacity: 0; transform: translateY(18px) scale(0.96); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); } .facts-overlay.show .facts-backdrop { opacity: 1; } .facts-overlay.show .facts-card { opacity: 1; transform: none; } .facts-status { display: flex; align-items: center; gap: 0.875rem; text-align: left; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-m); padding: 0.875rem 1rem; margin-bottom: 1.375rem; } .facts-spinner { width: 1.375rem; height: 1.375rem; flex-shrink: 0; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: facts-spin 0.8s linear infinite; } @keyframes facts-spin { to { transform: rotate(360deg); } } .facts-status-title { font-weight: 700; font-size: 0.9375rem; color: #fff; } .facts-status-sub { font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); margin-top: 0.125rem; } .facts-sep { height: 1px; background: rgba(255, 255, 255, 0.12); margin-bottom: 1.375rem; } .facts-icon { width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; border-radius: var(--radius-m); background: rgba(255, 255, 255, 0.1); color: #8FC5B7; display: flex; align-items: center; justify-content: center; } .facts-icon .icon { width: 1.5rem; height: 1.5rem; } .facts-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8FC5B7; margin-bottom: 0.75rem; } .facts-text { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1875rem; line-height: 1.5; min-height: 3.5rem; } .facts-text.anim { animation: fact-in 420ms var(--ease-out); } @keyframes fact-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .facts-footer { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-top: 1.25rem; } /* ============================================================ REPORTS / TRACK ============================================================ */ .track-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; } .track-side { display: grid; gap: 0.875rem; } .track-side-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; } .track-side-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 600; margin-bottom: 0.875rem; } .track-steps-list { display: grid; gap: 0.75rem; } .track-steps-list li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; color: var(--ink-2); line-height: 1.55; } .track-steps-list .tick { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--pine-100); color: var(--pine-700); font-size: 0.625rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.125rem; } .track-side-help p { font-size: 0.8438rem; color: var(--ink-3); margin-bottom: 0.875rem; } .track-side-help .btn { margin-bottom: 0.625rem; } @media (min-width: 900px) { .track-layout { grid-template-columns: 19rem minmax(0, 1fr); gap: 2rem; } .track-side { position: sticky; top: calc(var(--header-h) + 2.5rem); } } .report-form-card { max-width: 34rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: var(--shadow-m); display: grid; gap: 0.875rem; } .report-result { margin-top: 2.5rem; display: grid; gap: 1.5rem; } .report-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.5rem, 3.5vw, 2rem); box-shadow: var(--shadow-s); } .report-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); } .report-brand { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 600; } .report-sub { font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.25rem; } .report-meta { display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--ink-2); text-align: right; } .report-meta strong { color: var(--pine-700); } .track-steps { display: flex; align-items: flex-start; gap: 0; margin: 0.25rem 0 1.25rem; } .track-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .track-dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--white); border: 1.5px solid var(--line-2); color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur) var(--ease-out); } .track-step.done .track-dot { background: var(--pine-700); border-color: var(--pine-700); color: #fff; } .track-step.current .track-dot { border-color: var(--pine-600); color: var(--pine-700); box-shadow: 0 0 0 5px var(--pine-100); animation: current-pulse 2s var(--ease-out) infinite; } @keyframes current-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--pine-100); } 50% { box-shadow: 0 0 0 7px rgba(var(--brand-rgb), 0.18); } } .track-label { font-size: 0.6875rem; color: var(--ink-3); text-align: center; white-space: nowrap; } .track-step.done .track-label, .track-step.current .track-label { color: var(--ink-2); font-weight: 600; } .track-line { flex: 1; height: 1.5px; background: var(--line-2); margin-top: 1.0625rem; min-width: 0.75rem; transition: background-color var(--dur) var(--ease-out); } .track-line.done { background: var(--pine-500); } .track-item { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.25rem; margin-bottom: 0.875rem; } .track-item-pkg { background: transparent; } .track-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.625rem; } .track-item-name { font-weight: 600; font-size: 0.9688rem; } .track-item-code { font-size: 0.6875rem; color: var(--ink-3); } .track-turnaround { margin-left: auto; font-size: 0.75rem; color: var(--ink-3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; } .track-sub { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.125rem; margin-top: 0.75rem; } .track-result { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--pine-300); border-radius: var(--radius-m); padding: 0.875rem 1.125rem; margin-top: 0.75rem; } .track-result-item { font-size: 0.875rem; color: var(--ink-2); } .track-result-label { display: block; font-size: 0.6875rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .track-result-item strong { color: var(--ink); } .track-download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: var(--radius-m); padding: 0.875rem 1.125rem; margin-top: 0.75rem; font-size: 0.8125rem; } .track-dl-all { margin-bottom: 1.25rem; } .flag { font-family: 'JetBrains Mono', monospace; font-size: 0.6563rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 0.25rem 0.6875rem; white-space: nowrap; } .flag-high { background: var(--danger-100); color: var(--danger); } .flag-low { background: var(--warn-100); color: var(--warn); } .flag-normal { background: var(--ok-100); color: var(--ok); } .report-table-wrap { overflow-x: auto; } .report-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .report-table th { text-align: left; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; } .report-table td { padding: 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; } .report-table tr:last-child td { border-bottom: 0; } .report-test { font-weight: 600; } .report-code { display: block; font-size: 0.6875rem; color: var(--ink-3); } .report-value { font-weight: 600; font-family: 'JetBrains Mono', monospace; } .report-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.875rem; padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-3); } /* review */ .review-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 2rem; max-width: 34rem; position: relative; } .download-review { border-color: var(--pine-200); box-shadow: var(--shadow-m); animation: review-in 340ms var(--ease-out); } @keyframes review-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .review-x { position: absolute; top: 0.875rem; right: 0.875rem; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: var(--paper); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease-out); } .review-x:hover { background: var(--danger-100); color: var(--danger); } .review-x .icon { width: 1.125rem; height: 1.125rem; } .linklike { color: var(--pine-600); font-weight: 600; text-decoration: underline; padding: 0; } .linklike:hover { color: var(--pine-800); } .review-head { margin-bottom: 1.25rem; } .review-title { font-size: 1.375rem; margin-bottom: 0.375rem; } .review-sub { font-size: 0.875rem; color: var(--ink-3); } .review-stars { display: flex; gap: 0.5rem; margin-bottom: 1.125rem; } .rv-star { font-size: 1.875rem; line-height: 1; color: var(--line-2); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .rv-star:hover { transform: scale(1.15); } .rv-star.sel { color: var(--amber); } .review-card .form-input { margin-bottom: 0.875rem; } .review-error { font-size: 0.8125rem; color: var(--danger); margin-bottom: 0.75rem; min-height: 1.2em; } .review-note { font-size: 0.8125rem; color: var(--ink-3); margin-bottom: 1rem; } .review-success { color: var(--ok); font-weight: 600; } /* ============================================================ BRANCHES ============================================================ */ .branches-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; } .branch-list { display: grid; gap: 0.625rem; } .branch-btn { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.125rem; transition: all var(--dur) var(--ease-out); } .branch-btn:hover { border-color: var(--pine-300); transform: translateX(2px); } .branch-btn.selected { background: var(--pine-50); border-color: var(--pine-500); box-shadow: 0 8px 20px -12px rgba(var(--brand-rgb), 0.35); } .branch-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-s); background: var(--pine-100); color: var(--pine-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur) var(--ease-out); } .branch-btn.selected .branch-icon { background: var(--pine-700); color: #fff; } .branch-icon .icon { width: 1.25rem; height: 1.25rem; } .branch-name { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.125rem; } .branch-addr { font-size: 0.8125rem; color: var(--ink-3); line-height: 1.5; } .map-card { position: sticky; top: calc(var(--header-h) + 2rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s); } .map-frame { width: 100%; height: 380px; border: 0; display: block; background: var(--pine-50); } .map-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.875rem; padding: 1.125rem 1.25rem; } .map-branch-name { font-size: 1.0625rem; } .map-branch-addr { font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.125rem; max-width: 32ch; } /* ============================================================ BLOG ============================================================ */ .blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .blog-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); cursor: pointer; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--pine-200); } .blog-cover { width: calc(100% + 3.5rem); margin: -1.75rem -1.75rem 0; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-top-left-radius: var(--radius-l); border-top-right-radius: var(--radius-l); } .blog-modal-cover { width: 100%; height: auto; max-height: 360px; object-fit: cover; object-position: center; border-radius: var(--radius-m); margin-bottom: 1rem; } .blog-cat { align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 0.6563rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine-600); background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; } .blog-card h3 { font-size: 1.25rem; line-height: 1.3; } .blog-card h3:hover { color: var(--pine-700); } .blog-excerpt { font-size: 0.9063rem; color: var(--ink-2); line-height: 1.65; flex: 1; } .blog-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-3); } .blog-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--pine-100); color: var(--pine-700); font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .blog-dot { opacity: 0.5; } .blog-date { font-size: 0.7188rem; } .modal-body { font-size: 0.9688rem; color: var(--ink-2); line-height: 1.8; white-space: pre-line; } /* ============================================================ GALLERY ============================================================ */ .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; } .gallery-item { position: relative; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); } .gallery-item:hover img { transform: scale(1.05); } .gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(16, 32, 30, 0.45)); opacity: 0; transition: opacity var(--dur) var(--ease-out); } .gallery-item:hover::after { opacity: 1; } .gallery-lightbox { position: relative; margin: auto; max-width: min(1100px, calc(100vw - 2rem)); max-height: 86vh; } .gallery-lightbox img { width: 100%; max-height: 86vh; object-fit: contain; border-radius: var(--radius-m); background: #0b1413; } /* ============================================================ CONTACT ============================================================ */ .contact-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: end; } @media (min-width: 900px) { .contact-hero { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; } } .contact-promise { display: flex; gap: 0.875rem; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.375rem 1.5rem; box-shadow: var(--shadow-m); } .contact-promise-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-s); background: var(--pine-100); color: var(--pine-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-promise-icon .icon { width: 1.25rem; height: 1.25rem; } .contact-promise-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 600; margin-bottom: 0.25rem; } .contact-promise-text { font-size: 0.8438rem; color: var(--ink-3); line-height: 1.6; } .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; } .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; margin-top: 1.75rem; } .contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.125rem; display: flex; align-items: flex-start; gap: 0.875rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); border-color: var(--pine-200); } .contact-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-s); background: var(--pine-100); color: var(--pine-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-icon .icon { width: 1.25rem; height: 1.25rem; } .contact-kind { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 600; } .contact-value { font-size: 0.9375rem; font-weight: 600; margin-top: 0.125rem; word-break: break-word; } .contact-value a:hover { color: var(--pine-700); } .contact-sub { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.125rem; } .contact-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: var(--shadow-s); display: grid; gap: 0.875rem; } .contact-form-title { font-size: 1.375rem; margin-bottom: 0.375rem; } .contact-form .btn { justify-self: start; } /* ============================================================ ABOUT ============================================================ */ .about-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; } .about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; margin-top: 2rem; } .about-stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.25rem; } .about-stat dt { font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; font-weight: 600; color: var(--pine-700); line-height: 1.2; } .about-stat dd { font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.25rem; } .about-emblem { position: relative; aspect-ratio: 1; max-width: 30rem; margin: 0 auto; width: 100%; border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), transparent 50%), var(--pine-700); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-l); animation: emblem-float 9s ease-in-out infinite; } @keyframes emblem-float { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-10px); } } .about-emblem .icon { width: 5rem; height: 5rem; color: rgba(255, 255, 255, 0.9); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.3)); } .mv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .mv-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.75rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .mv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); } .mv-icon { width: 3rem; height: 3rem; border-radius: var(--radius-m); background: var(--pine-100); color: var(--pine-700); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .mv-icon .icon { width: 1.5rem; height: 1.5rem; } .mv-card h2 { font-size: 1.375rem; margin-bottom: 0.5rem; } .mv-card p { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.7; } .quality-list { display: grid; gap: 0.875rem; max-width: 46rem; } .quality-item { display: flex; align-items: flex-start; gap: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.25rem; font-size: 0.9375rem; font-weight: 500; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .quality-item:hover { transform: translateX(4px); box-shadow: var(--shadow-m); } .quality-item .dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--pine-100); color: var(--pine-700); font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.125rem; } .value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .value-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--pine-200); } .value-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-s); background: var(--pine-100); color: var(--pine-700); display: flex; align-items: center; justify-content: center; margin-bottom: 0.875rem; } .value-icon .icon { width: 1.25rem; height: 1.25rem; } .value-card h3 { font-size: 1.125rem; margin-bottom: 0.375rem; } .value-card p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.65; } .team-head { margin-top: 3.5rem; } .team-card { display: inline-flex; align-items: center; gap: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-s); } .team-avatar { width: 4rem; height: 4rem; border-radius: 50%; background: linear-gradient(135deg, var(--pine-600), var(--pine-800)); color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .team-name { font-size: 1.25rem; } .team-role { font-size: 0.8438rem; color: var(--ink-3); margin-top: 0.125rem; } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 640px) { .hide-sm { display: block; } .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .testi-card:last-child { grid-column: span 2; } .hc-banner-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } .value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .about-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.02fr 0.98fr; gap: 3.5rem; } .hero-title { font-size: clamp(2.75rem, 5.2vw, 4.25rem); } .hero-float-1 { left: -1.5rem; } .hero-float-2 { right: -1.25rem; } .why-layout { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } .why-aside { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; } .hc-banner-inner { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; } .tests-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; } .cart-rail { position: sticky; top: calc(var(--header-h) + 2.5rem); } .test-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .test-buy { flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.875rem; padding-top: 0; border-top: 0; padding-left: 1.5rem; border-left: 1px dashed var(--line-2); min-width: 15rem; } .booking-layout { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 2.5rem; } .branches-layout { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 1.5rem; } .map-frame { height: 480px; } .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-card:nth-child(3n) { grid-column: span 2; } .blog-card:nth-child(3n) h3 { font-size: 1.5rem; } .contact-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; } .about-layout { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* desktop nav only on real desktop widths — tablets keep the app chrome */ @media (min-width: 1024px) { .main-nav { display: flex; flex: none; } .menu-toggle { display: none; } #mainNav { position: static; transform: none; visibility: visible; height: auto; flex-direction: row; align-items: center; padding: 0; gap: 0.125rem; box-shadow: none; background: transparent; width: auto; overflow: visible; } .drawer-head, .drawer-foot { display: none; } .drawer-links { flex-direction: row; gap: 0.125rem; padding: 0; flex: none; } #mainNav .nav-link { padding: 0.5rem 0.625rem; font-size: 0.875rem; border-radius: var(--radius-pill); } #mainNav .nav-link::after { display: block; } #mainNav .nav-link.active::before { display: none; } .logo-link, .nav-actions { flex-shrink: 0; } .nav-actions { border-left: 1px solid var(--line-2); padding-left: 1rem; gap: 0.5rem; } } /* compact header for smaller desktops (1024–1279) so every link stays visible */ @media (min-width: 1024px) and (max-width: 1279px) { .logo-text { display: none; } .nav-inner { gap: 1rem; } .nav-actions { gap: 0.375rem; padding-left: 0.75rem; } .nav-actions .btn-sm { padding: 0.5rem 0.875rem; font-size: 0.8125rem; } #mainNav .nav-link { padding: 0.4375rem 0.5rem; font-size: 0.8125rem; } .nav-cart { width: 2.5rem; height: 2.5rem; } } /* slightly tighter links on mid-size desktops */ @media (min-width: 1280px) and (max-width: 1439px) { #mainNav .nav-link { padding: 0.5rem 0.5rem; font-size: 0.8438rem; } .nav-inner { gap: 1.25rem; } } @media (min-width: 1200px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .testi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .testi-card:last-child { grid-column: auto; } .tests-layout { grid-template-columns: 15.5rem minmax(0, 1fr) 19rem; gap: 1.5rem; } .pkg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .blog-card:nth-child(3n) { grid-column: auto; } .blog-card:nth-child(3n) h3 { font-size: 1.25rem; } } /* ============================================================ MOBILE APP EXPERIENCE (≤ 899px) — thumb-first, app-like ============================================================ */ @media (max-width: 899px) { /* compact chrome */ .topbar { font-size: 0.75rem; } .topbar-inner { min-height: 2rem; } .nav-inner { height: 64px; } .logo-img { width: 2.375rem; height: 2.375rem; border-radius: 10px; } .logo-name { font-size: 1.0625rem; } .nav-cart, .menu-toggle { width: 2.75rem; height: 2.75rem; } .page-hero { padding-top: 2.25rem; padding-bottom: 1.5rem; } /* hide desktop rails — app surfaces take over */ .cart-rail { display: none; } .cat-rail-foot { display: none; } /* category rail → horizontal snap chips */ .cat-rail { position: static; background: transparent; border: 0; padding: 0; margin-bottom: 1rem; } .cat-title { font-size: 0.75rem; margin-bottom: 0.625rem; } .cat-list { flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; gap: 0.5rem; margin: 0 -1rem; padding: 0.25rem 1rem 0.375rem; scrollbar-width: none; } .cat-list::-webkit-scrollbar { display: none; } .cat-btn { width: auto; white-space: nowrap; min-height: 2.625rem; padding: 0.5rem 1.125rem; border: 1px solid var(--line-2); background: var(--white); border-radius: var(--radius-pill); } .cat-btn::after { display: none; } .cat-btn.active { border-color: var(--pine-600); box-shadow: 0 0 0 3px var(--pine-100); } /* packages → swipeable carousel */ .pkg-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: 0.25rem 1rem 0.75rem; gap: 0.875rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pkg-grid::-webkit-scrollbar { display: none; } .pkg-card { flex: 0 0 78%; max-width: 78%; scroll-snap-align: start; scroll-snap-stop: always; } .pkg-grid .skeleton-card { flex: 0 0 78%; max-width: 78%; scroll-snap-align: start; } .pkg-count { margin-top: 0.5rem; } .split-head { margin-bottom: 1.5rem; } /* hero → app header feel */ .hero-grid { padding-top: 2rem; padding-bottom: 2.5rem; gap: 2.25rem; } .hero-badge { margin-bottom: 1rem; } .hero-title { font-size: clamp(2.125rem, 9.5vw, 2.75rem); } .hero-sub { font-size: 1rem; margin-bottom: 1.375rem; } .hero-search { border-radius: 18px; } .hero-chips { margin-bottom: 1.5rem; } .hero-stats { gap: 1.125rem; } .hero-stat dt { font-size: 1.125rem; } .hero-frame { border-radius: 26px; } .hero-float { padding: 0.625rem 0.875rem; border-radius: 14px; } .hero-float-1 { left: 0.75rem; bottom: 1rem; } .hero-float-2 { top: 0.75rem; right: 0.75rem; } .float-num { font-size: 0.9375rem; } .float-label { font-size: 0.6875rem; } .hero-blob { filter: blur(44px); } /* footer breathes above the tab bar */ .footer-bar-inner { padding-bottom: calc(1.375rem + var(--tab-h) + 1.25rem + env(safe-area-inset-bottom)); } /* step indicator compacts */ .steps-ind { margin: 1.25rem 0 1.75rem; } .si-label { font-size: 0.6875rem; } /* book-now sticky bar */ .book-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); z-index: 82; background: rgba(251, 251, 248, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -18px rgba(16, 32, 30, 0.3); padding: 0.625rem 1rem; transform: translateY(0); transition: transform 300ms var(--ease-out); } .book-bar[hidden] { display: none; } .book-bar.hide-up { transform: translateY(110%); } .book-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; max-width: 30rem; margin: 0 auto; } .book-bar-info { display: flex; flex-direction: column; min-width: 0; } .book-bar-total { font-size: 1.25rem; font-weight: 600; line-height: 1.2; } .book-bar-note { font-size: 0.6875rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .book-bar .btn { flex-shrink: 0; min-width: 8.5rem; } /* facts overlay fits the phone */ .facts-card { padding: 1.75rem 1.5rem; } } /* compact everything on small phones */ @media (max-width: 639px) { .container { padding-left: 1rem; padding-right: 1rem; } .section { padding-top: 2.75rem; padding-bottom: 2.75rem; } .section-head { margin-bottom: 1.75rem; } .section-head .page-text { margin-top: 0.5rem; } .page-title { font-size: clamp(1.75rem, 8vw, 2.25rem); } .page-text { font-size: 0.9688rem; } .h2 { font-size: clamp(1.5rem, 6.5vw, 1.875rem); } .eyebrow { font-size: 0.625rem; margin-bottom: 0.75rem; } /* app-style cards: tighter padding */ .pkg-card, .testi-card, .blog-card, .value-card, .mv-card, .contact-form, .form-card, .summary-card, .report-card, .review-card, .map-card, .test-card, .why-item, .quality-item, .contact-card, .team-card { padding: 1.25rem; } .tile { padding: 1.25rem 1.125rem; } .testi-grid { gap: 0.875rem; } .pkg-grid, .testi-grid, .blog-grid, .value-grid { gap: 0.875rem; } /* inputs: 16px prevents iOS focus zoom */ .form-input, .form-select, .search-input, .hero-search input, textarea.form-input { font-size: 1rem; } /* tests list → app rows */ .test-card { padding: 1.125rem; } .test-name { font-size: 1.0625rem; } .test-desc { font-size: 0.875rem; } .test-buy { flex-direction: column; align-items: stretch; gap: 0.75rem; } .test-price { font-size: 1.1875rem; } .test-actions { display: grid; grid-template-columns: 1fr 1.2fr; } .test-actions .btn { width: 100%; } .tests-bar { margin-bottom: 0.75rem; } /* booking/home-collection stack */ .booking-layout { gap: 1.25rem; } .summary-card, .form-card { border-radius: var(--radius-m); } .form-section { padding-bottom: 1.375rem; margin-bottom: 1.375rem; } /* home collection banner */ .hc-banner-inner { gap: 1.75rem; padding-top: 2.5rem; padding-bottom: 2.5rem; } .hc-banner-stats { gap: 0.5rem; } .hc-stat { padding: 0.875rem; } .hc-stat-num { font-size: 1rem; } /* why section */ .why-layout { gap: 1.75rem; } .why-item { padding: 1.125rem; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.875rem; } .why-num { width: 2.5rem; height: 2.5rem; font-size: 1rem; } /* cta */ .cta-card { padding: 2.25rem 1.25rem; border-radius: var(--radius-l); } .cta-actions .btn { width: 100%; } /* report stepper → stays horizontal (left→right) on phones too */ .track-steps { flex-direction: row; align-items: flex-start; gap: 0; padding: 0; margin: 0.25rem 0 1rem; } .track-step { flex-direction: column; align-items: center; gap: 0.375rem; width: auto; flex: 1; min-width: 0; padding: 0.3125rem 0; overflow: visible; } .track-dot { width: 1.875rem; height: 1.875rem; font-size: 0.6875rem; flex-shrink: 0; } .track-label { font-size: min(0.625rem, 2.4vw); text-align: center; white-space: nowrap; line-height: 1.35; } .track-line { height: 1.5px; width: auto; margin: 1.2rem 0 0; flex: 1; min-width: 0.5rem; } .track-turnaround { margin-left: 0; width: 100%; } /* blog */ .blog-card h3 { font-size: 1.125rem; } /* about */ .about-emblem { max-width: 15rem; margin: 0.5rem auto 0; } /* contact */ .contact-grid { margin-top: 1.25rem; } .contact-layout { gap: 1.75rem; } /* footer */ .footer-grid { padding-top: 2.5rem; gap: 2rem; } /* calendar + time picker on the phone */ .calendar { padding: 0.75rem; } .cal-day { font-size: 0.8125rem; } .time-picker { --tp-col-h: 6.75rem; --tp-opt-h: 2.25rem; padding: 0.625rem 0.25rem; } .tp-opt { font-size: 0.9375rem; } .blog-meta { flex-wrap: wrap; } } /* tiny phones (≤ 400px) */ @media (max-width: 399px) { .container { padding-left: 0.875rem; padding-right: 0.875rem; } .cat-list { margin: 0 -0.875rem; padding: 0.25rem 0.875rem 0.375rem; } .pkg-grid { margin: 0 -0.875rem; padding: 0.25rem 0.875rem 0.75rem; } .logo-text { display: none; } .nav-inner { gap: 0.5rem; } .nav-actions { gap: 0.25rem; } .hero-title { font-size: 2rem; } .book-bar { padding: 0.5625rem 0.875rem; } .book-bar .btn { min-width: 7.5rem; } .wa-fab { right: 0.875rem; } .toast-wrap { width: 94vw; } } /* tab bar → app-style icon pills */ .mobile-nav a .mnav-icon { width: 2.5rem; height: 2.5rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .mobile-nav a .mnav-icon .icon { width: 1.375rem; height: 1.375rem; } .mobile-nav a:active .mnav-icon { transform: scale(0.92); } .mobile-nav a.active .mnav-icon { background: var(--pine-700); color: #fff; box-shadow: 0 6px 14px -6px rgba(var(--brand-rgb), 0.55); } .mobile-nav a.active::before { display: none; } .mobile-nav a.active { color: var(--pine-800); font-weight: 600; } /* press feedback on touch devices */ @media (hover: none) { .tile:active, .pkg-card:active, .blog-card:active, .branch-btn:active, .value-card:active, .mv-card:active, .contact-card:active, .testi-card:active { transform: scale(0.985); } .btn:active { transform: translateY(1px) scale(0.96); } } /* ---------- print ---------- */ @media print { .site-header, .topbar, .site-footer, .wa-fab, .mobile-nav, .toast-wrap, .cart-fab-bar, .nav-backdrop, .skip-link { display: none !important; } body { background: #fff; } .report-card, .report-table { border: 0; box-shadow: none; } .section-white { border: 0; } } /* ============================================================ HOME PAGE ONLY — logo-palette animations The whole site wears the DRL logo palette (blue / teal / navy, from assets/logo.jpeg). The landing page adds a few extra animations on top. Scoped via body.home (set in src/build.mjs). ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* hero visual drifts slowly */ body.home .hero-visual { animation: home-float 8s ease-in-out infinite; } @keyframes home-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* "delivered" accent word gets a cool blue-teal shimmer */ body.home .hero-title em { color: transparent; background: linear-gradient(90deg, var(--pine-700), var(--pine-300), var(--pine-500), var(--pine-200), var(--pine-700)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; animation: home-shimmer 6s linear infinite; } @keyframes home-shimmer { from { background-position: 0% 0; } to { background-position: -250% 0; } } /* hero badge breathes a soft blue glow */ body.home .hero-badge { animation: home-glow 3.4s ease-in-out infinite; } @keyframes home-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); } 50% { box-shadow: 0 0 0 12px rgba(var(--brand-rgb), 0.12); } } /* CTA band background slowly drifts */ body.home .cta-card { animation: home-gradient 12s ease-in-out infinite; } @keyframes home-gradient { 0%, 100% { background-position: 0 0, 0 0, 0% 50%; } 50% { background-position: 0 0, 0 0, 100% 50%; } } /* hero search bar breathes a soft blue glow */ body.home .hero-search { animation: home-search-glow 3.6s ease-in-out infinite; } @keyframes home-search-glow { 0%, 100% { box-shadow: var(--shadow-m); } 50% { box-shadow: 0 0 0 7px rgba(var(--brand-rgb), 0.10), var(--shadow-m); } } /* the Search button inside pulses a gentle glow (shadow only, so hover behaviour is untouched) */ body.home .hero-search .btn-primary { animation: home-btn-glow 3.6s ease-in-out 0.4s infinite; } @keyframes home-btn-glow { 0%, 100% { box-shadow: var(--shadow-pine); } 50% { box-shadow: 0 0 0 5px rgba(var(--brand-rgb), 0.18), var(--shadow-pine); } } /* search placeholder flips in when the suggestion changes */ body.home #searchInput.ph-flip { animation: home-ph-flip 600ms var(--ease-out); } @keyframes home-ph-flip { 0% { opacity: 0.25; transform: translateY(5px) rotateX(-40deg); } 100% { opacity: 1; transform: none; } } /* tile icons give a friendly wiggle on hover */ body.home .tile:hover .tile-icon { animation: home-wiggle 0.55s var(--ease-out); } @keyframes home-wiggle { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-8deg) scale(1.1); } 60% { transform: rotate(7deg) scale(1.05); } } } /* ============================================================ WIDE DESKTOP — hero uses a wider, full-bleed-friendly canvas so the hero block fills at least ~75% of the screen width and all hero content scales up proportionally. Mobile/tablet layout is untouched (this block only applies at min-width: 1200px). ============================================================ */ @media (min-width: 1200px) { .hero > .container { max-width: max(75rem, min(92%, 120rem)); } .hero-grid { gap: 4.5rem; padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6.5rem); } .hero-badge { gap: 0.625rem; font-size: 0.9375rem; padding: 0.5625rem 1.25rem; margin-bottom: 1.75rem; } .hero-badge .icon { width: 1.125rem; height: 1.125rem; } .hero-title { font-size: clamp(3rem, 5.2vw, 5.5rem); max-width: 15ch; margin-bottom: 1.5rem; } .hero-sub { font-size: 1.25rem; max-width: 46rem; margin-bottom: 2.25rem; } .hero-search { max-width: 44rem; padding: 0.5rem 0.5rem 0.5rem 1.5rem; margin-bottom: 1.625rem; } .hero-search .icon { width: 1.25rem; height: 1.25rem; } .hero-search input { font-size: 1.0625rem; min-height: 3rem; } .hero-chips { gap: 0.625rem; margin-bottom: 2.75rem; } .chip-label { font-size: 0.75rem; } .chip { min-height: 2.625rem; font-size: 0.9375rem; padding: 0.5rem 1.25rem; } .hero-stats { gap: 2rem; max-width: 42rem; } .hero-stat dt { font-size: 1.625rem; } .hero-stat dd { font-size: 0.875rem; } .hero-frame { max-height: 720px; } .hero-float { gap: 1rem; padding: 1rem 1.375rem; } .hero-float-1 { bottom: 2rem; left: -1.5rem; } .hero-float-2 { top: 2rem; right: -1.25rem; } .float-icon { width: 3rem; height: 3rem; } .float-icon .icon { width: 1.5rem; height: 1.5rem; } .float-num { font-size: 1.25rem; } .float-label { font-size: 0.8438rem; } }