/* ============================================================ HEALTHLAB GLOBAL DESIGN SYSTEM + HEADER ============================================================ */ /* ============================================================ 01. RESET ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; min-height: 100vh; overflow-x: clip; font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; background: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .35s ease, color .35s ease; } button, input, textarea, select { font: inherit; } button { border: 0; background: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--accent-primary); color: #ffffff; } /* ============================================================ 02. GLOBAL VARIABLES ============================================================ */ :root { --brand-navy: #12345a; --brand-deep: #082542; --brand-blue: #149bd7; --brand-cyan: #19c7b5; --accent-primary: #149bd7; --accent-secondary: #19c7b5; --accent-soft: #eaf8fc; --bg-primary: #ffffff; --bg-secondary: #f6fafd; --bg-tertiary: #edf5f9; --bg-elevated: #ffffff; --text-primary: #102f4f; --text-secondary: #526b83; --text-muted: #7b90a2; --text-light: #ffffff; --border-light: #e1ebf2; --border-medium: #cddde7; --border-accent: rgba(20, 155, 215, .25); --header-top-bg: #eef7fb; --header-bg: rgba(255, 255, 255, .96); --header-shadow: 0 12px 40px rgba(12, 52, 82, .08); --dropdown-bg: #ffffff; --dropdown-shadow: 0 24px 70px rgba(14, 55, 85, .14), 0 5px 20px rgba(14, 55, 85, .06); --button-primary: #079bc4; --button-primary-hover: #0785aa; --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --container-width: 1440px; --section-pad-y: 5rem; --section-container-pad-x: clamp(4rem, 5vw, 5rem); --header-side-space: clamp(4rem, 5vw, 5rem); --transition-fast: .2s ease; --transition-base: .35s ease; --transition-slow: .55s cubic-bezier(.22, 1, .36, 1); --z-header: 1000; --z-dropdown: 1100; --z-mobile: 1200; --z-overlay: 1150; --z-search: 1300; } /* ============================================================ 03. GLOBAL CONTAINER & SECTION SPACING ============================================================ */ .header-container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--section-container-pad-x); } .section-container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--section-container-pad-x); } /* Global 5rem section padding */ .site-section, .quick-test-section, .why-lab-section, .home-collection-section, .test-spectrum-section, .how-it-works-section, .quality-wall-section, .reports-time-section, .packages-showcase-section { padding-top: var(--section-pad-y) !important; padding-bottom: var(--section-pad-y) !important; } /* ============================================================ 04. TYPOGRAPHY HIERARCHY ============================================================ */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: "Manrope", sans-serif; font-weight: 700; line-height: 1.25; color: var(--text-primary); letter-spacing: -.03em; } h1 { font-size: clamp(2.8rem, 4.8vw, 4.6rem); line-height: 1.15; } h2 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1.2; } h3 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.25; } h4 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.3; } h5 { font-size: 1.15rem; } h6 { font-size: 1rem; } p { color: var(--text-secondary); font-size: 16px; line-height: 1.75; } /* Standard Section Eyebrow Component */ .section-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--accent-primary); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .section-eyebrow span { width: 32px; height: 2px; flex: 0 0 auto; border-radius: 2px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); } .section-eyebrow strong { font-weight: 700; letter-spacing: inherit; } /* ============================================================ 05. SITE HEADER ============================================================ */ .site-header { position: relative; z-index: var(--z-header); width: 100%; background: var(--header-bg); box-shadow: var(--header-shadow); transition: background-color var(--transition-base), box-shadow var(--transition-base); } /* ============================================================ 06. TOPBAR ============================================================ */ .header-topbar { min-height: 42px; background: var(--header-top-bg); border-bottom: 1px solid var(--border-light); color: var(--text-secondary); transition: background-color var(--transition-base), border-color var(--transition-base); } .topbar-inner { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; } .topbar-left { min-width: 0; } .topbar-right { justify-content: flex-end; } .topbar-highlight, .topbar-contact, .topbar-account, .topbar-right a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; transition: color var(--transition-fast), opacity var(--transition-fast); } .topbar-right a:hover, .topbar-highlight:hover { color: var(--accent-primary); } .topbar-icon, .topbar-contact svg, .topbar-account svg { width: 15px; height: 15px; flex: 0 0 auto; } .topbar-icon svg, .topbar-contact svg, .topbar-account svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .topbar-icon { color: var(--accent-primary); } .topbar-divider { width: 1px; height: 16px; background: var(--border-medium); } /* ============================================================ 07. MAIN NAVIGATION ============================================================ */ .main-navigation { position: sticky; top: 0; z-index: var(--z-header); min-height: 88px; background: var(--header-bg); box-shadow: var(--header-shadow); transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .main-navigation.is-sticky { box-shadow: var(--header-shadow); } .nav-inner { min-height: 88px; display: flex; align-items: center; gap: 1rem; min-width: 0; } /* ============================================================ 08. BRAND ============================================================ */ .brand-logo { display: inline-flex; align-items: center; gap: 0px; flex: 0 0 auto; transition: transform var(--transition-base); } .brand-logo:hover { transform: translateY(-1px); } .brand-symbol { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; } .brand-symbol svg { width: 80%; height: 80%; } .brand-copy { display: flex; flex-direction: column; gap: 0; } .brand-copy strong { font-family: "Manrope", sans-serif; font-size: 23px; line-height: 1; font-weight: 800; letter-spacing: -.8px; color: var(--brand-navy); } .brand-copy strong span { color: var(--brand-cyan); } .brand-copy small { margin-top: 5px; font-size: 12px; line-height: 1.2; letter-spacing: .2px; color: var(--text-muted); } /* ============================================================ 09. PRIMARY NAVIGATION ============================================================ */ .primary-navigation { min-width: 0; margin-inline-start: auto; } .nav-menu { display: flex; align-items: stretch; justify-content: flex-end; gap: 0; min-width: 0; } .nav-item { position: relative; } .nav-link { position: relative; min-height: 22px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-primary); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color var(--transition-fast); } .nav-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-base); } .nav-item:hover > .nav-link, .nav-item.active > .nav-link, .nav-link:focus-visible { color: var(--accent-primary); } .nav-item.active > .nav-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transform-origin: left center; animation: navUnderline .45s ease both; } @keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } } .nav-item:hover .dropdown-trigger svg, .nav-item.dropdown-open .dropdown-trigger svg { transform: rotate(180deg); } /* ============================================================ 10. DROPDOWNS ============================================================ */ .nav-dropdown { position: absolute; top: calc(100% - 1px); left: 50%; min-width: 270px; padding: 14px; background: var(--dropdown-bg); border: 1px solid var(--border-light); box-shadow: var(--dropdown-shadow); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 12px); transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base); z-index: var(--z-dropdown); } .nav-item:hover > .nav-dropdown, .nav-item.dropdown-open > .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .dropdown-line { width: 38px; height: 2px; margin: 0 0 10px 4px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); } .home-dropdown { min-width: 250px; margin-top: 20px; } .small-dropdown { min-width: 290px;margin-top: 20px; } .tests-dropdown { width: 610px; margin-top: 20px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; padding: 22px; } .dropdown-heading { position: relative; padding: 8px 20px 8px 4px; border-inline-end: 1px solid var(--border-light); } .dropdown-kicker { display: block; margin-bottom: 8px; color: var(--accent-primary); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .dropdown-heading strong { display: block; font-family: "Manrope", sans-serif; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--text-primary); } .dropdown-heading p { margin-top: 9px; font-size: 12px; line-height: 1.6; } .dropdown-links { display: flex; flex-direction: column; } .dropdown-link { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 11px 16px; border-bottom: 1px solid var(--border-light); transition: background-color var(--transition-fast), color var(--transition-fast), padding var(--transition-base); } .dropdown-link:last-child { border-bottom: 0; } .dropdown-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary)); transform: translateY(-50%); transition: height var(--transition-base); } .dropdown-link:hover, .dropdown-link.active { background: var(--accent-soft); color: var(--accent-primary); padding-inline-start: 21px; } .dropdown-link:hover::before, .dropdown-link.active::before { height: 26px; } .dropdown-link span { font-size: 14px; font-weight: 600; } .dropdown-link small { font-size: 12px; color: var(--text-muted); } /* ============================================================ 11. HEADER ACTIONS ============================================================ */ .header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .header-icon-button { width: 42px; height: 42px; display: grid; place-items: center; color: var(--text-primary); transition: color var(--transition-fast), background-color var(--transition-fast); } .header-icon-button:hover { color: var(--accent-primary); } .header-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle { position: relative; width: 62px; height: 34px; display: flex; align-items: center; padding: 4px; background: var(--bg-tertiary); border: 1px solid var(--border-light); border-radius: 999px; transition: background-color var(--transition-base), border-color var(--transition-base); } .theme-toggle::before { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; background: var(--bg-elevated); border-radius: 50%; box-shadow: 0 3px 10px rgba(0, 0, 0, .08); transition: transform var(--transition-base), background-color var(--transition-base); } .theme-icon { position: relative; z-index: 1; width: 50%; display: grid; place-items: center; color: var(--text-secondary); } .theme-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dark-icon { opacity: .55; } .rtl-toggle { min-width: 42px; height: 34px; display: grid; place-items: center; padding: 0 8px; border: 1px solid var(--border-light); border-radius: 999px; color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .04em; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); } .rtl-toggle:hover { color: var(--accent-primary); border-color: var(--border-accent); background: var(--accent-soft); } .header-login-button { min-height: 42px; margin-top: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #ffffff; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 20px rgba(20, 155, 215, .18); transition: transform var(--transition-base), box-shadow var(--transition-base); } .header-login-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 155, 215, .25); } .header-login-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-base); } .header-login-button:hover svg { transform: translateX(3px); } /* ============================================================ 12. SEARCH PANEL ============================================================ */ .search-panel { position: absolute; top: 100%; left: 0; width: 100%; padding: 18px 0; background: var(--bg-elevated); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); box-shadow: var(--dropdown-shadow); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base); z-index: var(--z-search); } .search-panel.search-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .search-inner { display: flex; align-items: center; gap: 22px; } .search-label { flex: 0 0 auto; color: var(--text-primary); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 600; } .search-field-wrap { position: relative; flex: 1; display: flex; align-items: center; } .search-field-wrap > svg { position: absolute; left: 18px; width: 19px; height: 19px; fill: none; stroke: var(--accent-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .search-field-wrap input { width: 100%; height: 50px; padding: 0 48px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 12px; outline: none; color: var(--text-primary); font-size: 13px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .search-field-wrap input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 4px rgba(20, 155, 215, .08); } .search-field-wrap input::placeholder { color: var(--text-muted); } .search-clear { position: absolute; right: 15px; color: var(--text-muted); font-size: 21px; line-height: 1; opacity: 0; pointer-events: none; transition: color var(--transition-fast); } .search-clear.visible { opacity: 1; pointer-events: auto; } .search-clear:hover { color: var(--accent-primary); } .search-close { position: relative; width: 38px; height: 38px; flex: 0 0 auto; } .search-close span { position: absolute; top: 50%; left: 50%; width: 19px; height: 1.5px; background: var(--text-primary); transition: background-color var(--transition-fast); } .search-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .search-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .search-close:hover span { background: var(--accent-primary); } /* ============================================================ 13. MOBILE NAVIGATION ============================================================ */ .mobile-menu-toggle { display: none; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--text-primary); } .mobile-menu-toggle span { width: 21px; height: 1.5px; background: currentColor; transition: transform var(--transition-base), opacity var(--transition-base); } .mobile-nav-header, .mobile-nav-footer { display: none; } .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(4, 25, 43, .52); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-base), visibility var(--transition-base); z-index: var(--z-overlay); } /* ============================================================ 14. AOS / ANIMATION HELPERS ============================================================ */ [data-aos] { will-change: transform, opacity; } .gsap-ready { visibility: visible; } /* ============================================================ 15. TABLET BELOW 1024px ============================================================ */ @media (max-width: 1023px) { :root { --header-side-space: 2.5em; --section-container-pad-x: 2.5em; --section-pad-y: 5rem; } @media (min-width: 1024px) and (max-width: 1199px) { .nav-inner { gap: .5rem; } .brand-symbol { width: 48px; height: 48px; } .brand-copy strong { font-size: 21px; } .nav-link { padding-inline: 5px; font-size: 13px; } .header-actions { gap: 4px; } .theme-toggle { width: 56px; } .rtl-toggle { min-width: 38px; width: 38px; padding-inline: 5px; } } .header-container, .section-container { padding-inline: 2.5em !important; } .header-topbar { display: none; } .main-navigation, .nav-inner { min-height: 76px; } .nav-inner { gap: 1rem; } .brand-symbol { width: 47px; height: 47px; } .brand-copy strong { font-size: 23px; } .brand-copy small { font-size: 12px; } .mobile-menu-toggle { display: flex; order: 1; } .brand-logo { order: 2; } .header-actions { order: 3; margin-inline-start: auto; } .primary-navigation { position: fixed; top: 0; left: 0; width: min(390px, 88vw); height: 100dvh; margin: 0; background: var(--bg-elevated); border-inline-end: 1px solid var(--border-light); box-shadow: 20px 0 60px rgba(8, 37, 66, .16); transform: translateX(-105%); transition: transform var(--transition-slow); overflow-y: auto; overflow-x: hidden; z-index: var(--z-mobile); } .primary-navigation.mobile-open { transform: translateX(0); } .mobile-menu-overlay.mobile-visible { opacity: 1; visibility: visible; pointer-events: auto; } .mobile-nav-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5em; border-bottom: 1px solid var(--border-light); color: var(--text-primary); font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; } .mobile-nav-close { position: relative; width: 38px; height: 38px; } .mobile-nav-close span { position: absolute; left: 50%; top: 50%; width: 19px; height: 1.5px; background: var(--text-primary); } .mobile-nav-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .mobile-nav-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .nav-menu { display: flex; flex-direction: column; gap: 0; padding: 14px 2.5em 0; } .nav-item { border-bottom: 1px solid var(--border-light); } .nav-link { width: 100%; min-height: 54px; padding: 0; justify-content: space-between; font-size: 15px; font-weight: 600; } .nav-item.active > .nav-link::after { display: none; } .nav-item.active > .nav-link { color: var(--accent-primary); } .nav-dropdown { position: static; width: 100% !important; min-width: 0; padding: 0; display: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; } .nav-item.dropdown-open > .nav-dropdown { display: block;margin-left:10em; } .dropdown-line { display: none; } .dropdown-link { padding: 12px 14px 12px 18px; border-bottom: 0; background: var(--bg-secondary); } .dropdown-link:hover, .dropdown-link.active { padding-inline-start: 22px; } .tests-dropdown { grid-template-columns: 1fr; gap: 10px; padding: 10px 0 14px;margin-left: 10em; } .dropdown-heading { padding: 10px 0 12px; border-inline-end: 0; border-bottom: 1px solid var(--border-light); } .dropdown-heading p { max-width: 450px; } .mobile-nav-footer { display: flex; flex-direction: column; gap: 15px; padding: 24px 2.5em 35px; } .mobile-help-link { color: var(--text-secondary); font-size: 14px; } .mobile-login-button { min-height: 48px; display: grid; place-items: center; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #ffffff; border-radius: 999px; font-size: 14px; font-weight: 700; } .header-actions { gap: 8px; } .header-icon-button { width: 38px; height: 38px; } .theme-toggle { width: 58px; height: 32px; } .rtl-toggle { min-width: 42px; height: 32px; display: grid; font-size: 12px; } .header-login-button { min-height: 40px; padding: 0 16px; font-size: 13px; } } /* ============================================================ 16. MOBILE BELOW 767px ============================================================ */ @media (max-width: 766px) { :root { --header-side-space: 1.5em; --section-container-pad-x: 1.5em; --section-pad-y: 5rem; } .header-container, .section-container { padding-inline: 1.5em !important; } body { font-size: 15px; } .main-navigation, .nav-inner { min-height: 68px; } .nav-inner { gap: 4px; } .brand-logo { gap: 0px; margin-top: 4px; } .brand-symbol { width: 36px; height: 36px; } .brand-copy strong { font-size: 18px; letter-spacing: -.5px; } .brand-copy small { margin-top: 3px; font-size: 12px; letter-spacing: 0; } .mobile-menu-toggle { width: 36px; height: 36px; } .header-actions { gap: 2px; } .header-icon-button { width: 36px; height: 36px; } .header-icon-button svg { width: 18px; height: 18px; } .theme-toggle { width: 48px; height: 30px; } .theme-toggle::before { width: 22px; height: 22px; } .rtl-toggle { display: flex; align-items: center; justify-content: center; min-width: 34px; width: 34px; height: 30px; padding: 0 4px; font-size: 11px; flex: 0 0 34px; } .header-login-button { display: none; } .primary-navigation { width: min(350px, 92vw); } .mobile-nav-header { min-height: 68px; padding: 0 1.5em; } .nav-menu { padding: 12px 1.5em 0; } .mobile-nav-footer { padding-inline: 1.5em; } .search-inner { gap: 10px; } .search-label { display: none; } .search-field-wrap input { height: 46px; padding-inline: 43px; font-size: 14px; } .search-field-wrap > svg { left: 15px; } .search-close { width: 34px; } h1 { font-size: clamp(2.2rem, 8.5vw, 3.2rem); line-height: 1.15; } h2 { font-size: clamp(1.85rem, 7.5vw, 2.6rem); line-height: 1.2; } h3 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); line-height: 1.25; } h4 { font-size: 1.25rem; } p { font-size: 15px; line-height: 1.7; } } /* ============================================================ 17. VERY SMALL MOBILE ============================================================ */ @media (max-width: 380px) { .brand-copy small { display: none; } .brand-copy strong { font-size: 18px; } .brand-symbol { width: 36px; height: 36px; } .header-icon-button { display: none; } .mobile-menu-toggle { width: 35px; } } /* ============================================================ 18. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .rtl-toggle { display: flex; align-items: center; justify-content: center; min-width: 38px; width: 38px; height: 30px; padding: 0 6px; font-size: 12px; } /* ============================================================ HEALTHLAB HERO BANNER ============================================================ */ .hero-banner { position: relative; height:100vh; min-height: 90vh; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #082542; color: #fff; } .hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 7s cubic-bezier(.22,1,.36,1); } .hero-slide.active { opacity: 1; transform: scale(1); } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 38%, rgba(0,0,0,.68) 72%, rgba(8,37,66,.24) 100%); } .hero-glow { position: absolute; z-index: 2; pointer-events: none; border-radius: 50%; opacity: .3; filter: blur(2px); } .hero-glow-one { width: 360px; height: 360px; top: 8%; right: 8%; background: radial-gradient(circle, rgba(25,199,181,.42) 0%, rgba(25,199,181,0) 70%); } .hero-glow-two { width: 280px; height: 280px; bottom: 10%; left: 35%; background: radial-gradient(circle, rgba(20,155,215,.38) 0%, rgba(20,155,215,0) 70%); } .hero-container { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 5rem; padding-top: 0rem; padding-bottom: 5rem; } .hero-content { width: min(720px, 65%); } .hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .hero-eyebrow-line { width: 42px; height: 2px; flex: 0 0 auto; background: linear-gradient(90deg, #19c7b5, #149bd7); } .hero-content h1 { max-width: 760px; color: #fff; font-family: "Manrope", sans-serif; font-size: clamp(3.2rem, 5vw, 6rem); font-weight: 600; line-height: 1.5; letter-spacing: -.055em; } .hero-content h1 span { color: #75dfd4; } .hero-content p { max-width: 620px; margin-top: 25px; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.8; } .hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 34px; } .hero-primary-button, .hero-secondary-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; font-size: 14px; font-weight: 600; transition: transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .hero-primary-button { background: linear-gradient(120deg, #079bc4, #19c7b5); color: #fff; box-shadow: 0 12px 30px rgba(20,155,215,.24); } .hero-primary-button:hover { transform: translateY(-3px); box-shadow: 0 17px 36px rgba(20,155,215,.32); } .hero-secondary-button { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(10px); } .hero-secondary-button:hover { transform: translateY(-3px); background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.55); } .hero-primary-button svg, .hero-secondary-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-base); } .hero-primary-button:hover svg { transform: translateX(4px); } .hero-side-content { width: 240px; align-self: center; padding-inline-start: 25px; border-inline-start: 1px solid rgba(255,255,255,.28); } .hero-side-line { width: 35px; height: 2px; margin-bottom: 17px; background: #19c7b5; } .hero-side-content span { display: block; margin-bottom: 10px; color: rgba(255,255,255,.6); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .hero-side-content strong { display: block; color: #fff; font-family: "Manrope", sans-serif; font-size: 17px; font-weight: 500; line-height: 1.5; } .hero-bottom { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; } .hero-bottom-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 30px; } .hero-stat-strip { display: flex; align-items: center; gap: 24px; } .hero-stat { display: flex; flex-direction: column; gap: 3px; } .hero-stat strong { color: #fff; font-family: "Manrope", sans-serif; font-size: 19px; font-weight: 600; line-height: 1.1; } .hero-stat span { color: rgba(255,255,255,.56); font-size: 12px; } .hero-stat-divider { width: 1px; height: 30px; background: rgba(255,255,255,.2); } .hero-slider-controls { display: flex; align-items: center; gap: 12px; } .hero-slider-arrow { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.06); transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .hero-slider-arrow:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); transform: translateY(-2px); } .hero-slider-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .hero-dots { display: flex; align-items: center; gap: 7px; } .hero-dot { width: 25px; height: 2px; padding: 0; background: rgba(255,255,255,.35); transition: width var(--transition-base), background-color var(--transition-base); } .hero-dot.active { width: 42px; background: #fff; } .hero-scroll-indicator { position: absolute; right: 24px; top: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateY(-50%); writing-mode: vertical-rl; color: rgba(255,255,255,.48); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .hero-scroll-indicator i { position: relative; width: 1px; height: 54px; overflow: hidden; background: rgba(255,255,255,.22); } .hero-scroll-indicator i::after { content: ""; position: absolute; top: -20px; left: 0; width: 1px; height: 20px; background: #fff; animation: heroScrollLine 1.8s ease-in-out infinite; } @keyframes heroScrollLine { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(74px); opacity: 0; } } /* ============================================================ HERO TABLET ============================================================ */ @media (max-width: 1023px) { .hero-banner { min-height: 720px; } .hero-container { padding-top: 4rem; padding-bottom: 9rem; gap: 2rem; } .hero-content { width: min(680px, 78%); } .hero-content h1 { font-size: clamp(3rem, 7vw, 5rem); } .hero-side-content { width: 190px; } .hero-bottom-inner { padding-bottom: 25px; } .hero-stat-strip { gap: 17px; } .hero-scroll-indicator { display: none; } } /* ============================================================ HERO MOBILE ============================================================ */ @media (max-width: 766px) { .hero-banner { min-height: 720px; align-items: flex-start; } .hero-overlay { background: linear-gradient(180deg, rgba(4,28,50,.91) 0%, rgba(7,43,69,.76) 52%, rgba(8,37,66,.88) 100%); } .hero-container { flex-direction: column; align-items: flex-start; justify-content: center; width: min(calc(100% - (var(--header-side-space) * 2)), var(--container-width)); min-height: 720px; padding-top: 5rem; padding-bottom: 11rem; gap: 2rem; } .hero-content { width: 100%; } .hero-eyebrow { margin-bottom: 17px; font-size: 12px; letter-spacing: .1em; } .hero-eyebrow-line { width: 30px; } .hero-content h1 { font-size: clamp(2.35rem, 10vw, 3.6rem); line-height: 1.05; letter-spacing: -.04em; } .hero-content p { margin-top: 19px; font-size: 14px; line-height: 1.7; } .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin-top: 26px; } .hero-primary-button, .hero-secondary-button { width: 100%; min-height: 50px; } .hero-side-content { display: none; } .hero-bottom-inner { flex-direction: column; align-items: stretch; gap: 18px; padding-bottom: 20px; } .hero-stat-strip { justify-content: space-between; gap: 8px; } .hero-stat { gap: 2px; } .hero-stat strong { font-size: 15px; } .hero-stat span { font-size: 12px; } .hero-stat-divider { height: 24px; } .hero-slider-controls { justify-content: space-between; } .hero-dots { margin-inline: auto; } .hero-slider-arrow { width: 34px; height: 34px; } .hero-dot { width: 18px; } .hero-dot.active { width: 32px; } .hero-scroll-indicator { display: none; } .hero-glow-one { width: 220px; height: 220px; right: -80px; top: 15%; } .hero-glow-two { width: 180px; height: 180px; left: -70px; bottom: 20%; } } /* ============================================================ HERO VERY SMALL MOBILE ============================================================ */ @media (max-width: 380px) { .hero-banner, .hero-container { min-height: 680px; } .hero-container { padding-top: 4rem; padding-bottom: 10rem; } .hero-content h1 { font-size: 2.2rem; } .hero-content p { font-size: 13px; } .hero-stat strong { font-size: 13px; } .hero-stat span { font-size: 12px; } .hero-stat-strip { gap: 5px; } } /* ============================================================ HERO REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .hero-slide { transition: opacity .01ms linear; transform: none; } .hero-slide.active { transform: none; } .hero-scroll-indicator i::after { animation: none; } } /* ============================================================ QUICK TEST SEARCH ============================================================ */ .quick-test-section { position: relative; padding: 6rem 0 6.5rem; overflow: hidden; background: var(--bg-secondary); } .quick-test-section::before { content: ""; position: absolute; width: 420px; height: 420px; top: -220px; right: -160px; border-radius: 50%; background: radial-gradient(circle,var(--accent-soft) 0%,transparent 70%); opacity: .7; pointer-events: none; } .quick-test-container { position: relative; z-index: 1; } .quick-test-heading { max-width: 720px; margin: 0 auto; text-align: center; } .quick-test-heading .section-eyebrow { justify-content: center; } .quick-test-heading h2 { margin-top: 18px; color: var(--text-primary); font-size: clamp(2.3rem,4vw,4rem); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; } .quick-test-heading p { max-width: 600px; margin: 17px auto 0; color: var(--text-secondary); font-size: 14px; line-height: 1.8; } .quick-test-search-area { max-width: 850px; margin: 34px auto 0; } .quick-test-form { display: flex; align-items: center; min-height: 70px; padding: 7px; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 14px; box-shadow: 0 18px 50px rgba(15,60,88,.08); transition: border-color var(--transition-base),box-shadow var(--transition-base),background-color var(--transition-base); } .quick-test-form:focus-within { border-color: var(--accent-primary); box-shadow: 0 20px 55px rgba(20,155,215,.12); } .quick-test-input { min-width: 0; flex: 1; display: flex; align-items: center; gap: 13px; padding: 0 17px; } .quick-test-input svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: var(--accent-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .quick-test-input input { width: 100%; height: 54px; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 14px; } .quick-test-input input::placeholder { color: var(--text-muted); } .quick-test-submit { min-width: 135px; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 0 0 auto; padding: 0 20px; background: linear-gradient(120deg,var(--button-primary),var(--accent-secondary)); color: #fff; border-radius: 9px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 20px rgba(20,155,215,.17); transition: transform var(--transition-base),box-shadow var(--transition-base); } .quick-test-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,155,215,.25); } .quick-test-submit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-base); } .quick-test-submit:hover svg { transform: translateX(4px); } .quick-test-result { min-height: 18px; margin-top: 8px; color: var(--text-muted); font-size: 12px; text-align: center; } .quick-test-popular { max-width: 1050px; margin: 42px auto 0; } .quick-test-popular-heading { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--text-primary); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .quick-test-popular-heading span { width: 34px; height: 2px; background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); } .quick-test-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px 25px; margin-top: 22px; } .quick-test-links a { position: relative; padding-bottom: 5px; color: var(--text-secondary); font-size: 13px; transition: color var(--transition-fast); } .quick-test-links a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--accent-primary); transform: scaleX(0); transform-origin: center; transition: transform var(--transition-base); } .quick-test-links a:hover { color: var(--accent-primary); } .quick-test-links a:hover::after { transform: scaleX(1); } .quick-test-links a.is-hidden { display: none; } .quick-test-footer { display: flex; justify-content: center; margin-top: 38px; } .quick-test-view-all { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 13px; font-weight: 600; transition: background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base),transform var(--transition-base); } .quick-test-view-all:hover { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; transform: translateY(-2px); } .quick-test-view-all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-base); } .quick-test-view-all:hover svg { transform: translateX(4px); } @media (max-width: 1023px) { .quick-test-section { padding: 5rem 0; } .quick-test-heading h2 { font-size: clamp(2.3rem,5vw,3.5rem); } .quick-test-search-area { max-width: 760px; } .quick-test-popular { max-width: 800px; } } @media (max-width: 766px) { .quick-test-section { padding: 4rem 0 4.5rem; } .quick-test-heading h2 { margin-top: 15px; font-size: clamp(2rem,9vw,3rem); } .quick-test-heading p { margin-top: 14px; font-size: 13px; line-height: 1.7; } .quick-test-search-area { margin-top: 25px; } .quick-test-form { min-height: 58px; padding: 6px; } .quick-test-input { gap: 9px; padding: 0 10px; } .quick-test-input svg { width: 18px; height: 18px; } .quick-test-input input { height: 44px; font-size: 12px; } .quick-test-submit { min-width: 90px; height: 44px; padding: 0 12px; font-size: 12px; } .quick-test-submit svg { width: 14px; height: 14px; } .quick-test-result { font-size: 12px; } .quick-test-popular { margin-top: 32px; } .quick-test-popular-heading { font-size: 12px; } .quick-test-popular-heading span { width: 27px; } .quick-test-links { gap: 12px 17px; margin-top: 18px; } .quick-test-links a { font-size: 12px; } .quick-test-footer { margin-top: 30px; } .quick-test-view-all { width: 100%; min-height: 50px; } } @media (max-width: 380px) { .quick-test-submit { min-width: 76px; padding-inline: 9px; } .quick-test-submit svg { display: none; } .quick-test-input input { font-size: 12px; } } /* ============================================================ WHY CHOOSE OUR LAB ============================================================ */ .why-lab-section { position: relative; padding: 7.5rem 0; overflow: hidden; background: var(--bg-primary); } .why-lab-container { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 7rem; } .why-lab-decor { position: absolute; pointer-events: none; border-radius: 50%; } .why-lab-decor-one { width: 460px; height: 460px; left: -270px; top: 50%; background: radial-gradient(circle,rgba(20,155,215,.09) 0%,rgba(20,155,215,0) 70%); transform: translateY(-50%); } .why-lab-decor-two { width: 330px; height: 330px; right: -190px; top: -150px; background: radial-gradient(circle,rgba(25,199,181,.08) 0%,rgba(25,199,181,0) 70%); } .why-lab-visual { position: relative; min-height: 590px; padding: 20px 35px 30px 0; } .why-lab-image-wrap { position: relative; width: min(100%,500px); height: 540px; overflow: hidden; border-radius: 46% 54% 48% 52% / 38% 42% 58% 62%; box-shadow: 25px 25px 70px rgba(12,52,82,.13); } .why-lab-image-wrap::before { content: ""; position: absolute; inset: 14px; z-index: 2; border: 1px solid rgba(255,255,255,.45); border-radius: inherit; pointer-events: none; } .why-lab-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); } .why-lab-image-wrap:hover img { transform: scale(1.05); } .why-lab-image-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(145deg,rgba(8,37,66,.02),rgba(20,155,215,.16)); pointer-events: none; } .why-lab-vertical-label { position: absolute; left: 4px; top: 105px; display: flex; flex-direction: column; gap: 12px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .2em; writing-mode: vertical-rl; } .why-lab-floating-note { position: absolute; right: 0; bottom: 72px; z-index: 4; display: flex; align-items: center; gap: 12px; min-width: 225px; padding: 17px 20px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 18px 45px rgba(12,52,82,.13); backdrop-filter: blur(14px); } .why-lab-note-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--accent-soft); color: var(--accent-primary); } .why-lab-note-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .why-lab-floating-note strong { display: block; color: var(--text-primary); font-family: "Manrope",sans-serif; font-size: 13px; font-weight: 700; } .why-lab-floating-note > div > span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; } .why-lab-content { max-width: 700px; } .why-lab-content h2 { max-width: 650px; margin-top: 18px; font-size: clamp(2.4rem,4vw,4.2rem); line-height: 1.08; letter-spacing: -.045em; } .why-lab-content h2 span { color: var(--accent-primary); } .why-lab-intro { max-width: 610px; margin-top: 19px; font-size: 14px; line-height: 1.8; } .why-lab-benefits { margin-top: 35px; border-top: 1px solid var(--border-light); } .why-lab-benefit { position: relative; display: grid; grid-template-columns: 35px 40px 1fr 34px; align-items: center; gap: 14px; min-height: 76px; padding: 10px 0; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-base),background-color var(--transition-base); } .why-lab-benefit::before { content: ""; position: absolute; left: -18px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom,var(--accent-primary),var(--accent-secondary)); transform: scaleY(0); transform-origin: center; transition: transform var(--transition-base); } .why-lab-benefit:hover { padding-inline-start: 10px; background: linear-gradient(90deg,rgba(20,155,215,.045),transparent); } .why-lab-benefit:hover::before { transform: scaleY(1); } .benefit-index { color: var(--text-muted); font-family: "Manrope",sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; } .benefit-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-primary); transition: transform var(--transition-base),background-color var(--transition-base); } .benefit-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .why-lab-benefit:hover .benefit-icon { transform: scale(1.08); background: var(--accent-primary); color: #fff; } .benefit-copy { min-width: 0; } .benefit-copy strong { display: block; color: var(--text-primary); font-family: "Manrope",sans-serif; font-size: 14px; font-weight: 600; } .benefit-copy small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 12px; line-height: 1.55; } .benefit-arrow { width: 30px; height: 30px; display: grid; place-items: center; color: var(--text-muted); transition: color var(--transition-base),transform var(--transition-base); } .benefit-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .why-lab-benefit:hover .benefit-arrow { color: var(--accent-primary); transform: translateX(4px); } .why-lab-button { min-height: 48px; display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 0 22px; background: linear-gradient(120deg,var(--button-primary),var(--accent-secondary)); color: #fff; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 25px rgba(20,155,215,.16); transition: transform var(--transition-base),box-shadow var(--transition-base); } .why-lab-button:hover { transform: translateY(-3px); box-shadow: 0 15px 32px rgba(20,155,215,.23); } .why-lab-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-base); } .why-lab-button:hover svg { transform: translateX(4px); } @media (max-width:1023px) { .why-lab-section { padding: 6rem 0; } .why-lab-container { grid-template-columns: 1fr; gap: 4.5rem; } .why-lab-visual { width: min(100%,620px); margin: 0 auto; min-height: 540px; } .why-lab-image-wrap { width: min(100%,500px); height: 510px; } .why-lab-content { max-width: 760px; margin: 0 auto; } .why-lab-content h2 { font-size: clamp(2.3rem,5vw,3.6rem); } } @media (max-width:766px) { .why-lab-section { padding: 4.5rem 0 5rem; } .why-lab-container { gap: 3.2rem; } .why-lab-visual { min-height: 390px; padding: 12px 20px 25px 0; } .why-lab-image-wrap { width: calc(100% - 20px); height: 370px; border-radius: 43% 57% 48% 52% / 35% 45% 55% 65%; } .why-lab-image-wrap::before { inset: 9px; } .why-lab-vertical-label { left: -1px; top: 70px; font-size: 12px; } .why-lab-floating-note { right: 0; bottom: 28px; min-width: 195px; padding: 13px 15px; } .why-lab-note-icon { width: 33px; height: 33px; } .why-lab-floating-note strong { font-size: 12px; } .why-lab-floating-note > div > span { font-size: 12px; } .why-lab-content h2 { margin-top: 15px; font-size: clamp(2rem,9vw,3rem); } .why-lab-intro { margin-top: 14px; font-size: 13px; line-height: 1.7; } .why-lab-benefits { margin-top: 26px; } .why-lab-benefit { grid-template-columns: 27px 38px 1fr 28px; gap: 9px; min-height: 75px; } .why-lab-benefit::before { left: -8px; } .benefit-icon { width: 38px; height: 38px; } .benefit-copy strong { font-size: 12px; } .benefit-copy small { font-size: 9.5px; line-height: 1.5; } .benefit-arrow { width: 27px; height: 27px; } .benefit-arrow svg { width: 14px; height: 14px; } .why-lab-button { width: 100%; justify-content: center; margin-top: 25px; min-height: 50px; } } @media (max-width:380px) { .why-lab-visual { min-height: 350px; } .why-lab-image-wrap { height: 330px; } .why-lab-floating-note { min-width: 175px; } .why-lab-benefit { grid-template-columns: 24px 34px 1fr 24px; gap: 7px; } .benefit-icon { width: 34px; height: 34px; } .benefit-icon svg { width: 17px; height: 17px; } .benefit-copy strong { font-size: 13px; } .benefit-copy small { font-size: 12px; } } /* ============================ HOME SAMPLE COLLECTION ============================ */ .home-collection-section { position: relative; overflow: hidden; padding: 8rem 0 0; background: #eef8f8; } .home-collection-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 2.5rem; display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: center; } .home-collection-intro { position: relative; z-index: 2; max-width: 580px; } .home-collection-eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; color: var(--color-primary); font-size: 12px; font-weight: 750; letter-spacing: .14em; } .home-collection-eyebrow span { width: 28px; height: 1px; background: var(--color-primary); } .home-collection-title { margin: 0 0 1.5rem; color: #12304d; font-size: clamp(3rem,4vw,5rem); font-weight: 550; line-height: 1.3; letter-spacing: -.05em; } .home-collection-title em { color: var(--color-primary); font-style: normal; } .home-collection-description { max-width: 520px; margin: 0 0 2rem; color: #60758b; font-size: 1rem; line-height: 1.8; } .home-collection-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 2.5rem; } .hsc-primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 52px; padding: .85rem 1.5rem; border-radius: 12px; background: linear-gradient(135deg, var(--color-primary), #0a8cc3); font-size: .84rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; box-shadow: 0 12px 28px rgba(2,132,199,.18); transition: var(--transition-smooth); } .hsc-primary-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(2,132,199,.24); } .hsc-primary-btn i { font-size: .72rem; transition: transform .3s ease; } .hsc-primary-btn:hover i { transform: translateX(4px); } .hsc-text-btn { display: inline-flex; align-items: center; gap: .55rem; color: #153d5a; font-size: .82rem; font-weight: 700; text-decoration: none; transition: var(--transition-smooth); } .hsc-text-btn i { color: var(--color-primary); font-size: .72rem; } .hsc-text-btn:hover { color: var(--color-primary); } .home-collection-meta { display: flex; align-items: center; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(31,78,105,.12); } .hsc-meta-item { display: flex; align-items: center; gap: .55rem; color: #587087; font-size: 13px; font-weight: 600; } .hsc-meta-item i { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(13,148,136,.1); color: var(--color-accent); font-size: .72rem; } .home-collection-visual { position: relative; min-height: 650px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; } .hsc-image-frame { position: relative; height: 570px; border-radius: 180px 180px 24px 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(22,65,82,.18); } .hsc-image-frame img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1s cubic-bezier(.16,1,.3,1); } .hsc-image-frame:hover img { transform: scale(1.04); } .hsc-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,29,39,.5) 100%); pointer-events: none; } .hsc-floating-badge { position: absolute; left: 1.25rem; bottom: 1.25rem; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.55); border-radius: 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 15px 35px rgba(0,0,0,.16); } .hsc-badge-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(2,132,199,.1); color: var(--color-primary); font-size: .85rem; } .hsc-floating-badge strong { display: block; color: #163653; font-size: 13px; font-weight: 700; } .hsc-floating-badge small { display: block; margin-top: .18rem; color: #72869a; font-size: 12px; } .hsc-image-label { position: absolute; top: 1.4rem; right: 1.2rem; writing-mode: vertical-rl; color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700; letter-spacing: .18em; } .hsc-process { position: relative; padding: 2rem 0 2rem 1.5rem; } .hsc-process-heading { position: relative; z-index: 2; margin-bottom: 2rem; } .hsc-process-heading span { display: block; margin-bottom: .45rem; color: #0d6fa6; font-size: 12px; font-weight: 800; letter-spacing: .15em; } .hsc-process-heading strong { color: #183d5f; font-size: 1.05rem; font-weight: 700; } .hsc-process-line { position: absolute; top: 6.5rem; bottom: 3rem; left: 38px; width: 1px; background: linear-gradient(180deg,#0d6fa6,#19c7b5); opacity: .7; } .hsc-step { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 1rem; padding: 0 0 2.25rem; } .hsc-step:last-child { padding-bottom: 0; } .hsc-step-number { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; border: 1px solid rgba(2,132,199,.25); border-radius: 50%; background: #eef8f8; color: #526b83; font-size: 12px; font-weight: 800; } .hsc-step-active .hsc-step-number { border-color: var(--color-primary); box-shadow: 0 0 0 6px rgba(2,132,199,.08); } .hsc-step-content { padding-top: .1rem; } .hsc-step-content span { display: block; margin-bottom: .25rem; color: #0d6fa6; font-size: 12px; font-weight: 800; letter-spacing: .12em; } .hsc-step-content strong { display: block; margin-bottom: .4rem; color: #173a58; font-size: .95rem; font-weight: 700; } .hsc-step-content p { max-width: 240px; margin: 0; color: #5f7387; font-size: 13px; line-height: 1.65; } .home-collection-bottom { border-top: 1px solid rgba(31,78,105,.1); background: rgba(255,255,255,.38); } .hsc-bottom-inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 1.25rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .hsc-bottom-label { color: #8092a2; font-size: .6rem; font-weight: 750; letter-spacing: .14em; white-space: nowrap; } .hsc-bottom-points { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1.5rem; } .hsc-bottom-points span { display: flex; align-items: center; gap: .4rem; color: #61768a; font-size: .68rem; font-weight: 550; } .hsc-bottom-points i { color: var(--color-accent); font-size: .62rem; } @media (max-width: 1100px) { .home-collection-section { padding-top: 6rem; } .home-collection-container { padding-left: 2.5em; padding-right: 2.5em; grid-template-columns: 1fr; gap: 4rem; } .home-collection-intro { max-width: 780px; } .home-collection-visual { max-width: 900px; width: 100%; margin: 0 auto; } .home-collection-title { font-size: clamp(2.8rem,6vw,4.2rem); } .hsc-bottom-inner { padding-left: 2.5em; padding-right: 2.5em; } } @media (max-width: 767px) { .home-collection-section { padding-top: 5rem; } .home-collection-container { padding-left: 1.5em; padding-right: 1.5em; padding-bottom: 0; gap: 3rem; } .home-collection-intro { text-align: center; } .home-collection-eyebrow { justify-content: center; } .home-collection-title { font-size: 2.45rem; line-height: 1.02; } .home-collection-description { margin-left: auto; margin-right: auto; font-size: .88rem; line-height: 1.7; } .home-collection-actions { flex-direction: column; align-items: stretch; gap: 1rem; } .hsc-primary-btn { width: 100%; } .hsc-text-btn { justify-content: center; } .home-collection-meta { justify-content: center; flex-wrap: wrap; gap: .8rem 1.2rem; } .home-collection-visual { display: flex; flex-direction: column; min-height: auto; gap: 2rem; } .hsc-image-frame { width: 100%; height: 420px; border-radius: 120px 120px 20px 20px; } .hsc-process { width: 100%; padding-left: 0; } .hsc-process-line { left: 14px; } .hsc-bottom-inner { padding: 1.25rem 1.5em; flex-direction: column; align-items: flex-start; gap: 1rem; } .hsc-bottom-points { justify-content: flex-start; gap: .75rem 1rem; } } /* ============================================================ POPULAR BLOOD TESTS — INTERACTIVE TEST SPECTRUM ============================================================ */ .test-spectrum-section { position: relative; padding: 8rem 0 7.5rem; overflow: hidden; background: var(--bg-secondary); } .test-spectrum-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .spectrum-orbit { position: absolute; border: 1px solid var(--border-accent); border-radius: 50%; } .spectrum-orbit-one { width: 760px; height: 330px; top: 100px; right: -420px; transform: rotate(-28deg); } .spectrum-orbit-two { width: 620px; height: 270px; bottom: -90px; left: -390px; transform: rotate(-25deg); } .spectrum-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-secondary); box-shadow: 0 0 0 7px rgba(25,199,181,.08); } .spectrum-dot-one { top: 24%; right: 13%; } .spectrum-dot-two { bottom: 18%; left: 16%; } .test-spectrum-container { position: relative; z-index: 2; } .test-spectrum-header { max-width: 760px; } .test-spectrum-header h2 { margin-top: 20px; font-size: clamp(2.8rem,4vw,5.3rem); line-height: 1.3; letter-spacing: -.055em; } .test-spectrum-header h2 span { color: var(--accent-primary); } .test-spectrum-header p { max-width: 590px; margin-top: 20px; font-size: 14px; line-height: 1.85; } .test-spectrum-stage { position: relative; width: min(100%,1120px); height: 650px; margin: 2rem auto 0; } .spectrum-center { position: absolute; top: 50%; left: 50%; width: 355px; height: 355px; transform: translate(-50%,-50%); } .spectrum-center::before { content: ""; position: absolute; inset: -45px; border: 1px solid var(--border-light); border-radius: 50%; } .spectrum-center::after { content: ""; position: absolute; inset: -78px; border: 1px dashed var(--border-accent); border-radius: 50%; opacity: .7; } .spectrum-center-ring { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--border-medium); border-radius: 50%; background: var(--bg-primary); box-shadow: 0 35px 100px rgba(12,52,82,.14); transition: transform .7s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,border-color .5s ease; } .spectrum-center-image { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; } .spectrum-center-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: opacity .35s ease,transform 1s cubic-bezier(.22,1,.36,1); } .spectrum-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(8,37,66,.05) 15%,rgba(8,37,66,.78) 100%); } .spectrum-center-content { position: absolute; right: 30px; bottom: 38px; left: 30px; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; } .spectrum-center-content span { color: #aeeaf3; font-size: 12px; font-weight: 700; letter-spacing: .22em; } .spectrum-center-content strong { max-width: 230px; margin-top: 8px; color: #fff; font-family: "Manrope",sans-serif; font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.035em; } .spectrum-center-content small { margin-top: 9px; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .spectrum-image-corner { position: absolute; z-index: 4; width: 24px; height: 24px; border-color: rgba(255,255,255,.65); border-style: solid; } .spectrum-corner-one { top: 30px; left: 30px; border-width: 1px 0 0 1px; } .spectrum-corner-two { right: 30px; bottom: 30px; border-width: 0 1px 1px 0; } .spectrum-test { position: absolute; z-index: 5; display: grid; grid-template-columns: 30px 70px minmax(110px,1fr) 30px; align-items: center; gap: 13px; width: 335px; min-height: 76px; padding: 10px 14px; color: var(--text-primary); border-bottom: 1px solid var(--border-medium); background: transparent; transition: transform var(--transition-slow),border-color var(--transition-base),background-color var(--transition-base); } .spectrum-test::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); transition: width .45s cubic-bezier(.22,1,.36,1); } .spectrum-test:hover { border-color: var(--accent-primary); background: var(--bg-primary); transform: translateY(-5px); } .spectrum-test:hover::after { width: 100%; } .spectrum-number { color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; } .spectrum-abbr { color: var(--accent-primary); font-family: "Manrope",sans-serif; font-size: 13px; font-weight: 800; } .spectrum-name { color: var(--text-secondary); font-size: 16px; line-height: 1.35; } .spectrum-arrow { width: 30px; height: 30px; display: grid; place-items: center; color: var(--text-muted); transition: color var(--transition-base),transform var(--transition-base); } .spectrum-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .spectrum-test:hover .spectrum-arrow { color: var(--accent-primary); transform: translateX(4px); } .spectrum-test-one { top: 55px; left: 5px; } .spectrum-test-two { top: 210px; left: -35px; } .spectrum-test-three { bottom: 65px; left: 5px; } .spectrum-test-four { top: 55px; right: 5px; } .spectrum-test-five { top: 210px; right: -35px; } .spectrum-test-six { bottom: 65px; right: 5px; } .spectrum-stage-label { position: absolute; bottom: 8px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 5px; transform: translateX(-50%); white-space: nowrap; } .spectrum-stage-label span { color: var(--accent-primary); font-size: 12px; font-weight: 700; letter-spacing: .2em; } .spectrum-stage-label strong { color: var(--text-muted); font-size: 12px; font-weight: 500; } .test-spectrum-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-light); } .spectrum-footer-note { display: flex; align-items: center; gap: 12px; } .spectrum-footer-mark { width: 22px; height: 1px; background: var(--accent-primary); } .spectrum-footer-note p { color: var(--text-muted); font-size: 12px; } .spectrum-view-all { display: inline-flex; align-items: center; gap: 11px; color: var(--text-primary); font-family: "Manrope",sans-serif; font-size: 13px; font-weight: 700; transition: color var(--transition-base); } .spectrum-view-all:hover { color: var(--accent-primary); } .spectrum-view-all svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-base); } .spectrum-view-all:hover svg { transform: translateX(5px); } @media (max-width:1023px) { .test-spectrum-section { padding: 6rem 0; } .test-spectrum-header h2 { font-size: clamp(2.5rem,6vw,4.2rem); } .test-spectrum-stage { height: 570px; margin-top: 4rem; } .spectrum-center { width: 285px; height: 285px; } .spectrum-center-content strong { font-size: 20px; } .spectrum-center-content { bottom: 32px; } .spectrum-center::before { inset: -32px; } .spectrum-center::after { inset: -55px; } .spectrum-test { width: 295px; grid-template-columns: 25px 58px minmax(90px,1fr) 28px; gap: 9px; } .spectrum-test-one { left: 0; } .spectrum-test-two { left: -20px; } .spectrum-test-three { left: 0; } .spectrum-test-four { right: 0; } .spectrum-test-five { right: -20px; } .spectrum-test-six { right: 0; } } @media (max-width:766px) { .test-spectrum-section { padding: 4.5rem 0 5rem; } .test-spectrum-header h2 { margin-top: 15px; font-size: clamp(2rem,9vw,3.1rem); } .test-spectrum-header p { margin-top: 15px; font-size: 13px; line-height: 1.7; } .test-spectrum-stage { width: 100%; height: auto; margin-top: 3rem; padding-top: 315px; } .spectrum-center { top: 0; left: 50%; width: 220px; height: 220px; transform: translateX(-50%); } .spectrum-center::before { inset: -20px; } .spectrum-center::after { inset: -37px; } .spectrum-center-content { right: 20px; bottom: 24px; left: 20px; } .spectrum-center-content span { font-size: 12px; } .spectrum-center-content strong { font-size: 17px; } .spectrum-center-content small { margin-top: 7px; font-size: 12px; } .spectrum-image-corner { width: 18px; height: 18px; } .spectrum-corner-one { top: 20px; left: 20px; } .spectrum-corner-two { right: 20px; bottom: 20px; } .spectrum-test { position: relative; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100%; min-height: 70px; grid-template-columns: 25px 55px minmax(0,1fr) 27px; gap: 9px; padding: 10px 0; } .spectrum-test:hover { transform: translateX(5px); } .spectrum-number { font-size: 12px; } .spectrum-abbr { font-size: 12px; } .spectrum-name { font-size: 12px; } .spectrum-arrow { width: 27px; height: 27px; } .spectrum-stage-label { position: relative; left: auto; bottom: auto; margin-top: 25px; transform: none; align-items: flex-start; } .test-spectrum-footer { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 2rem; padding-top: 1.5rem; } } @media (max-width:380px) { .spectrum-center { width: 195px; height: 195px; } .test-spectrum-stage { padding-top: 280px; } .spectrum-center-content strong { font-size: 15px; } .spectrum-test { grid-template-columns: 22px 48px minmax(0,1fr) 25px; gap: 7px; } .spectrum-abbr { font-size: 12px; } .spectrum-name { font-size: 12px; } } /* ============================================================ HOW IT WORKS — PREMIUM EDITORIAL ============================================================ */ .how-it-works-section { position: relative; padding: 9rem 0 6rem; overflow: hidden; background: #f1f6f8; color: var(--text-primary); isolation: isolate; } .how-it-works-container { position: relative; z-index: 2; } .how-it-works-noise { position: absolute; inset: 0; opacity: .18; pointer-events: none; background-image: radial-gradient(rgba(16,47,79,.16) .6px,transparent .6px); background-size: 9px 9px; } .how-it-works-watermark { position: absolute; right: -55px; top: 50%; color: rgba(16,47,79,.025); font-family: "Manrope",sans-serif; font-size: clamp(10rem,22vw,24rem); font-weight: 800; line-height: 1; letter-spacing: -.08em; transform: translateY(-50%) rotate(90deg); pointer-events: none; white-space: nowrap; } .how-it-works-header { padding-bottom: 4.5rem; border-bottom: 1px solid rgba(16,47,79,.13); } .how-it-works-kicker { display: flex; align-items: center; gap: 12px; color: var(--accent-primary); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .how-kicker-line { width: 38px; height: 1px; background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); } .how-it-works-header-main { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 6rem; margin-top: 23px; } .how-it-works-title-wrap { position: relative; } .how-it-works-index { display: block; margin-bottom: 14px; color: var(--text-muted); font-family: "Manrope",sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; } .how-it-works-title-wrap h2 { max-width: 850px; color: var(--text-primary); font-size: clamp(3.5rem,4vw,6.8rem); font-weight: 500; line-height: 1.3; letter-spacing: -.065em; } .how-it-works-title-wrap h2 em { color: var(--accent-primary); font-style: normal; } .how-it-works-description { max-width: 420px; padding-bottom: 7px; } .how-it-works-description p { color: var(--text-secondary); font-size: 16px; line-height: 1.85; } .how-description-rule { width: 100%; height: 1px; margin: 24px 0 12px; background: var(--border-medium); } .how-it-works-description > span { color: var(--text-muted); font-size: 13px; font-weight: 700; letter-spacing: .18em; } .how-process { position: relative; margin-top: 2.5rem; } .how-process-item { position: relative; display: grid; grid-template-columns: 100px minmax(0,1fr) 150px; align-items: center; gap: 45px; min-height: 150px; padding: 25px 0; border-bottom: 1px solid rgba(16,47,79,.12); transition: padding var(--transition-slow),border-color var(--transition-base); } .how-process-item::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 1px; background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); transition: width .7s cubic-bezier(.22,1,.36,1); } .how-process-item:hover::before, .how-process-item.active::before { width: 100%; } .how-process-item:hover, .how-process-item.active { padding-inline-start: 18px; padding-inline-end: 18px; border-color: var(--border-accent); } .how-process-number { position: relative; width: 82px; height: 82px; display: flex; align-items: center; justify-content: flex-start; } .how-process-number::before { content: ""; position: absolute; left: 0; bottom: 11px; width: 32px; height: 1px; background: var(--border-medium); transition: width var(--transition-base),background-color var(--transition-base); } .how-process-number span { position: relative; color: var(--text-muted); font-family: "Manrope",sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -.05em; transition: color var(--transition-base),transform var(--transition-base); } .how-process-item:hover .how-process-number span, .how-process-item.active .how-process-number span { color: var(--accent-primary); transform: translateY(-4px); } .how-process-item:hover .how-process-number::before, .how-process-item.active .how-process-number::before { width: 52px; background: var(--accent-primary); } .how-process-main { min-width: 0; } .how-process-label { display: block; margin-bottom: 8px; color: var(--accent-primary); font-size: 12px; font-weight: 700; letter-spacing: .2em; } .how-process-main h3 { color: var(--text-primary); font-size: clamp(1.5rem,1.5vw,2.15rem); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; transition: color var(--transition-fast); } .how-process-main p { max-width: 600px; margin-top: 10px; color: var(--text-secondary); font-size: 15px; line-height: 1.75; } .how-process-link { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border-medium); color: var(--text-primary); font-size: 14px; font-weight: 700; transition: color var(--transition-fast),gap var(--transition-base),border-color var(--transition-fast); } .how-process-link:hover { gap: 13px; color: var(--accent-primary); border-color: var(--accent-primary); } .how-process-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .how-process-status { justify-self: end; display: inline-flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; } .how-process-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-secondary); box-shadow: 0 0 0 5px rgba(25,199,181,.08); } .how-process-status small { font-size: inherit; } .how-it-works-bottom { display: flex; align-items: center; gap: 15px; margin-top: 2rem; padding-top: 18px; } .how-bottom-symbol { color: var(--accent-primary); font-family: "Manrope",sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .08em; } .how-it-works-bottom p { color: var(--text-muted); font-size: 14px; } .how-bottom-end { margin-inline-start: auto; color: var(--text-muted); font-size: 14px; font-weight: 700; letter-spacing: .16em; } @media (max-width: 1023px) { .how-it-works-section { padding: 7rem 0 5.5rem; } .how-it-works-header-main { grid-template-columns: 1fr .8fr; gap: 3rem; } .how-it-works-title-wrap h2 { font-size: clamp(3rem,7vw,5.3rem); } .how-process-item { grid-template-columns: 80px minmax(0,1fr) 120px; gap: 28px; } .how-process-number { width: 70px; } .how-process-main h3 { font-size: 1.6rem; } } @media (max-width: 766px) { .how-it-works-section { padding: 5rem 0 4.5rem; } .how-it-works-watermark { right: -85px; top: 45%; font-size: 10rem; } .how-it-works-header { padding-bottom: 3rem; } .how-it-works-kicker { font-size: 12px; } .how-kicker-line { width: 28px; } .how-it-works-header-main { display: block; margin-top: 18px; } .how-it-works-index { margin-bottom: 12px; font-size: 12px; } .how-it-works-title-wrap h2 { font-size: clamp(2.7rem,12vw,4.2rem); line-height: .94; } .how-it-works-description { max-width: 100%; margin-top: 25px; } .how-it-works-description p { font-size: 12px; line-height: 1.75; } .how-description-rule { margin: 18px 0 10px; } .how-process { margin-top: 1rem; } .how-process-item { grid-template-columns: 58px minmax(0,1fr); gap: 19px; min-height: 0; padding: 28px 0; } .how-process-item:hover, .how-process-item.active { padding-inline-start: 8px; padding-inline-end: 8px; } .how-process-number { width: 58px; height: 58px; align-items: flex-start; padding-top: 2px; } .how-process-number::before { bottom: 3px; width: 24px; } .how-process-number span { font-size: 20px; } .how-process-item:hover .how-process-number::before, .how-process-item.active .how-process-number::before { width: 38px; } .how-process-label { margin-bottom: 7px; font-size: 12px; } .how-process-main h3 { font-size: 1.35rem; line-height: 1.2; } .how-process-main p { margin-top: 8px; font-size: 13px; line-height: 1.7; } .how-process-link, .how-process-status { grid-column: 2; justify-self: start; margin-top: 7px; } .how-process-link { font-size: 12px; } .how-process-status { font-size: 12px; } .how-it-works-bottom { align-items: flex-start; flex-wrap: wrap; gap: 9px; margin-top: 1.5rem; } .how-it-works-bottom p { max-width: 230px; font-size: 13px; line-height: 1.5; } .how-bottom-end { width: 100%; margin-inline-start: 0; margin-top: 5px; } } @media (max-width: 380px) { .how-it-works-section { padding-top: 4.5rem; } .how-it-works-title-wrap h2 { font-size: 2.45rem; } .how-process-item { grid-template-columns: 48px minmax(0,1fr); column-gap: 15px; } .how-process-number { width: 48px; } .how-process-number span { font-size: 18px; } .how-process-main h3 { font-size: 1.2rem; } } /* ============================================================ QUALITY WALL ============================================================ */ .quality-wall-section { position: relative; padding: 10rem 0 7rem; overflow: hidden; background: var(--bg-primary); isolation: isolate; } .quality-wall-container { position: relative; z-index: 2; } .quality-wall-number { position: absolute; top: 55px; left: 5%; color: var(--border-medium); font-family: "Manrope",sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .15em; } .quality-wall-word { position: absolute; right: -65px; top: 30%; color: rgba(20,155,215,.025); font-family: "Manrope",sans-serif; font-size: clamp(9rem,18vw,18rem); font-weight: 800; letter-spacing: -.08em; line-height: .8; writing-mode: vertical-rl; pointer-events: none; } .quality-wall-header { padding-bottom: 2.5rem; border-bottom: 1px solid var(--border-medium); } .quality-wall-label { display: flex; align-items: center; justify-content: space-between; color: var(--accent-primary); font-size: 13px; font-weight: 700; letter-spacing: .18em; } .quality-wall-label i { width: 42px; height: 1px; background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); } .quality-wall-title { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 6rem; margin-top: 25px; } .quality-wall-title h2 { color: var(--text-primary); font-size: clamp(4rem,3vw,7.3rem); font-weight: 500; line-height: 1.3; letter-spacing: -.075em; } .quality-wall-title h2 span { color: var(--accent-primary); } .quality-wall-title p { max-width: 420px; padding-bottom: 7px; color: var(--text-secondary); font-size: 16px; line-height: 1.9; } .quality-wall-main { display: grid; grid-template-columns: .78fr 1.22fr; gap: 7rem; padding: 4rem 0 5.5rem; } .quality-manifesto { padding-inline-end: 5rem; border-inline-end: 1px solid var(--border-medium); } .quality-manifesto-label { display: block; color: var(--accent-primary); font-size: 13px; font-weight: 700; letter-spacing: .17em; } .quality-manifesto-rule { width: 50px; height: 1px; margin: 22px 0 28px; background: var(--accent-secondary); } .quality-manifesto h3 { color: var(--text-primary); font-size: clamp(2.6rem,4vw,4.2rem); font-weight: 500; line-height: 1.3; letter-spacing: -.05em; } .quality-manifesto p { max-width: 360px; margin-top: 28px; color: var(--text-secondary); font-size: 16px; line-height: 1.85; } .quality-manifesto-sign { display: flex; align-items: center; justify-content: space-between; margin-top: 55px; padding-top: 17px; border-top: 1px solid var(--border-medium); color: var(--text-muted); font-size: 13px; font-weight: 700; letter-spacing: .13em; } .quality-manifesto-sign strong { color: var(--accent-primary); font-size: 15px; } .quality-recognition-wall { min-width: 0;margin-top:3em; } .quality-recognition-title { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--border-medium); } .quality-recognition-title span { color: var(--accent-primary); font-size:13px; font-weight: 700; letter-spacing: .17em; } .quality-recognition-title strong { color: var(--text-primary); font-family: "Manrope",sans-serif; font-size: 17px; font-weight: 600; } .quality-markers { display: grid; grid-template-columns: 1fr 1fr; } .quality-marker { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 24px; min-height: 185px; padding: 20px 15px; border-bottom: 1px solid var(--border-medium); transition: background-color var(--transition-base),transform var(--transition-base); } .quality-marker:nth-child(even) { border-inline-start: 1px solid var(--border-medium); } .quality-marker:hover { background: var(--bg-secondary); } .quality-marker-ring { position: relative; width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid var(--border-accent); border-radius: 50%; color: var(--accent-primary); font-family: "Manrope",sans-serif; font-size: 12px; font-weight: 700; } .quality-marker-ring::before { content: ""; position: absolute; inset: 8px; border: 1px dashed var(--border-medium); border-radius: 50%; transition: transform .8s ease; } .quality-marker:hover .quality-marker-ring::before { transform: rotate(180deg); } .quality-marker-ring i { position: absolute; top: -3px; right: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-secondary); } .quality-marker-text small { display: block; margin-bottom: 7px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .15em; } .quality-marker-text strong { display: block; color: var(--text-primary); font-family: "Manrope",sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; } .quality-marker-text p { margin-top: 6px; color: var(--text-muted); font-size: 14px; line-height: 1.5; } .quality-standard-strip { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border-medium); border-bottom: 1px solid var(--border-medium); } .quality-standard { min-height: 125px; padding: 25px 20px; } .quality-standard + .quality-standard { border-inline-start: 1px solid var(--border-medium); } .quality-standard span { display: block; margin-bottom: 16px; color: var(--accent-primary); font-size: 13px; font-weight: 700; } .quality-standard strong { display: block; color: var(--text-primary); font-family: "Manrope",sans-serif; font-size: 13px; font-weight: 600; } .quality-standard small { display: block; margin-top: 7px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .13em; } .quality-wall-footer { display: flex; align-items: center; gap: 18px; padding-top: 25px; } .quality-wall-footer > span { color: var(--accent-primary); font-size: 12px; font-weight: 800; letter-spacing: .15em; } .quality-wall-footer p { color: var(--text-muted); font-size: 12px; } .quality-wall-footer i { width: 35px; height: 1px; margin-inline-start: auto; background: var(--border-medium); } @media (max-width: 1023px) { .quality-wall-section { padding: 7rem 0 6rem; } .quality-wall-title { grid-template-columns: 1fr .8fr; gap: 3rem; } .quality-wall-title h2 { font-size: clamp(3.2rem,7vw,5.5rem); } .quality-wall-main { gap: 4rem; } .quality-manifesto { padding-inline-end: 3rem; } .quality-marker { grid-template-columns: 70px 1fr; gap: 16px; min-height: 165px; } .quality-marker-ring { width: 65px; height: 65px; } } @media (max-width: 766px) { .quality-wall-section { padding: 5rem 0 4.5rem; } .quality-wall-number { top: 25px; left: 1.5em; font-size: 12px; } .quality-wall-word { right: -50px; top: 35%; font-size: 8rem; } .quality-wall-header { padding-bottom: 3rem; } .quality-wall-label { font-size: 12px; } .quality-wall-label i { width: 27px; } .quality-wall-title { display: block; margin-top: 19px; } .quality-wall-title h2 { font-size: clamp(2.75rem,12vw,4.1rem); line-height: .9; } .quality-wall-title p { max-width: 100%; margin-top: 22px; font-size: 13px; line-height: 1.75; } .quality-wall-main { display: block; padding: 3.5rem 0 3rem; } .quality-manifesto { padding: 0 0 3.5rem; border-inline-end: 0; border-bottom: 1px solid var(--border-medium); } .quality-manifesto h3 { font-size: 2.55rem; } .quality-manifesto p { margin-top: 20px; font-size: 13px; } .quality-manifesto-sign { margin-top: 35px; } .quality-recognition-wall { margin-top: 3.5rem; } .quality-recognition-title { display: block; } .quality-recognition-title strong { display: block; margin-top: 8px; font-size: 15px; } .quality-markers { display: block; } .quality-marker { grid-template-columns: 72px 1fr; min-height: 125px; padding: 17px 0; } .quality-marker:nth-child(even) { border-inline-start: 0; } .quality-marker-ring { width: 60px; height: 60px; font-size: 12px; } .quality-marker-ring::before { inset: 6px; } .quality-marker-text strong { font-size: 13px; } .quality-marker-text p { font-size: 12px; } .quality-standard-strip { display: block; } .quality-standard { min-height: 90px; padding: 18px 0; } .quality-standard + .quality-standard { border-inline-start: 0; border-top: 1px solid var(--border-medium); } .quality-standard span { margin-bottom: 8px; } .quality-wall-footer { align-items: flex-start; flex-direction: column; gap: 8px; } .quality-wall-footer i { display: none; } } @media (max-width: 380px) { .quality-wall-title h2 { font-size: 2.5rem; } .quality-manifesto h3 { font-size: 2.3rem; } } /* ============================ REPORTS & TURNAROUND TIME ============================ */ .reports-time-section { position: relative; overflow: hidden; padding: 8rem 0 0; background: #f2f5fb; } .reports-time-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 2.5rem 7rem; display: grid; grid-template-columns: .9fr 1.1fr; gap: 6rem; align-items: center; } .reports-time-heading { max-width: 570px; } .reports-time-eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; color: var(--color-primary); font-size: 12px; font-weight: 750; letter-spacing: .15em; } .reports-time-eyebrow span { width: 30px; height: 1px; background: var(--color-primary); } .reports-time-title { margin: 0 0 1.5rem; color: #102f4c; font-size: clamp(3rem,4vw,5rem); font-weight: 550; line-height: 1.3; letter-spacing: -.055em; } .reports-time-title em { color: var(--color-primary); font-style: normal; } .reports-time-description { max-width: 510px; margin: 0 0 2rem; color: #64778c; font-size: .98rem; line-height: 1.8; } .reports-time-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.35rem; margin-bottom: 2.5rem; } .reports-track-btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 51px; padding: .85rem 1.45rem; border-radius: 12px; background: var(--color-primary); font-size: .8rem; font-weight: 650; text-decoration: none; box-shadow: 0 12px 28px rgba(2,132,199,.17); transition: var(--transition-smooth); } .reports-track-btn:hover { transform: translateY(-3px); box-shadow: 0 17px 34px rgba(2,132,199,.23); } .reports-track-btn i { font-size: .7rem; transition: transform .3s ease; } .reports-track-btn:hover i { transform: translateX(4px); } .reports-info-link { display: inline-flex; align-items: center; gap: .5rem; color: #34516d; font-size: .78rem; font-weight: 650; text-decoration: none; transition: var(--transition-smooth); } .reports-info-link:hover { color: var(--color-primary); } .reports-info-link i { color: var(--color-primary); } .reports-assurance { display: flex; align-items: center; gap: .85rem; padding-top: 1.4rem; border-top: 1px solid rgba(26,67,94,.12); } .reports-assurance-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(2,132,199,.08); color: var(--color-primary); font-size: .9rem; } .reports-assurance strong { display: block; margin-bottom: .2rem; color: #173955; font-size: 13px; font-weight: 700; } .reports-assurance span { display: block; color: #788b9d; font-size: 12px; } .reports-status-panel { position: relative; padding: 2rem; border: 1px solid rgba(255,255,255,.8); border-radius: 26px; background: rgba(255,255,255,.82); box-shadow: 0 30px 80px rgba(36,65,96,.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .reports-status-panel::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg,transparent,var(--color-primary),transparent); } .reports-panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e5ebf1; } .reports-panel-label { display: block; margin-bottom: .35rem; color: #8394a4; font-size: 12px; font-weight: 750; letter-spacing: .14em; } .reports-panel-top h3 { margin: 0; color: #173955; font-size: 1.15rem; font-weight: 650; } .reports-live-status { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border: 1px solid rgba(13,148,136,.15); border-radius: 999px; background: rgba(13,148,136,.06); color: #148277; font-size: 12px; font-weight: 750; letter-spacing: .08em; } .reports-live-status i { width: 6px; height: 6px; border-radius: 50%; background: #19a895; box-shadow: 0 0 0 4px rgba(25,168,149,.1); } .reports-progress { position: relative; padding: 1.75rem 0 .5rem; } .reports-progress-line { position: absolute; top: 2.55rem; bottom: 2.6rem; left: 18px; width: 1px; background: #dbe5ec; } .reports-progress-line span { display: block; width: 100%; height: 42%; background: linear-gradient(180deg,var(--color-primary),#58c7ba); } .reports-stage { position: relative; display: grid; grid-template-columns: 38px 1fr auto; gap: 1rem; align-items: start; min-height: 91px; } .reports-stage-marker { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; border: 1px solid #dce6ed; border-radius: 50%; background: #fff; color: #a1b0bc; font-size: .7rem; } .reports-stage-complete .reports-stage-marker { border-color: rgba(13,148,136,.3); background: #e9f8f5; color: #139486; } .reports-stage-active .reports-stage-marker { border-color: var(--color-primary); box-shadow: 0 0 0 6px rgba(2,132,199,.08); } .reports-stage-content { padding-top: .05rem; } .reports-stage-content span { display: block; margin-bottom: .3rem; color: #8395a5; font-size: 12px; font-weight: 750; letter-spacing: .1em; } .reports-stage-active .reports-stage-content span { color: var(--color-primary); } .reports-stage-content strong { display: block; margin-bottom: .25rem; color: #173955; font-size: .82rem; font-weight: 650; } .reports-stage-content small { display: block; max-width: 350px; color: #8091a1; font-size: 12px; line-height: 1.55; } .reports-stage time { padding-top: .15rem; color: #8b9ba9; font-size: 12px; font-weight: 600; white-space: nowrap; } .reports-stage-complete time { color: #159083; } .reports-stage-active time { color: var(--color-primary); } .reports-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem; padding: 1rem 1.1rem; border-radius: 13px; background: #f3f7fa; } .reports-panel-footer div { display: flex; align-items: center; gap: .55rem; } .reports-panel-footer div i { color: var(--color-primary); font-size: .75rem; } .reports-panel-footer div span { color: #7b8d9d; font-size: 14px; } .reports-panel-footer div strong { color: #183a56; font-size: 15px; font-weight: 700; } .reports-panel-footer a { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-primary); font-size: .65rem; font-weight: 700; text-decoration: none; } .reports-panel-footer a i { font-size: .58rem; transition: transform .3s ease; } .reports-panel-footer a:hover i { transform: translateX(3px); } .turnaround-strip { border-top: 1px solid rgba(25,62,88,.08); background: rgba(255,255,255,.52); } .turnaround-strip-inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 1.35rem 2.5rem; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr auto; align-items: center; gap: 1.5rem; } .turnaround-intro span { display: block; margin-bottom: .3rem; color: #8999a7; font-size: 12px; font-weight: 750; letter-spacing: .13em; } .turnaround-intro strong { color: #294760; font-size: .72rem; font-weight: 650; } .turnaround-item { display: flex; align-items: center; gap: .65rem; padding-left: 1.2rem; border-left: 1px solid #dfe7ed; } .turnaround-number { color: var(--color-primary); font-size: 12px; font-weight: 750; } .turnaround-item strong { display: block; margin-bottom: .2rem; color: #294760; font-size: 13px; font-weight: 650; } .turnaround-item small { color: #8798a7; font-size: 12px; } .turnaround-view-all { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-primary); font-size: .64rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .turnaround-view-all i { font-size: .58rem; transition: transform .3s ease; } .turnaround-view-all:hover i { transform: translateX(4px); } @media (max-width: 1100px) { .reports-time-section { padding-top: 6rem; } .reports-time-container { padding-left: 2.5em; padding-right: 2.5em; grid-template-columns: 1fr; gap: 4rem; } .reports-time-heading { max-width: 800px; } .reports-status-panel { max-width: 800px; width: 100%; margin: 0 auto; } .turnaround-strip-inner { padding-left: 2.5em; padding-right: 2.5em; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .turnaround-intro { grid-column: 1 / -1; } .turnaround-view-all { justify-self: start; } } @media (max-width: 767px) { .reports-time-section { padding-top: 5rem; } .reports-time-container { padding-left: 1.5em; padding-right: 1.5em; padding-bottom: 5rem; gap: 3rem; } .reports-time-heading { text-align: center; } .reports-time-eyebrow { justify-content: center; } .reports-time-title { font-size: 2.5rem; line-height: 1.02; } .reports-time-description { margin-left: auto; margin-right: auto; font-size: .88rem; line-height: 1.7; } .reports-time-actions { flex-direction: column; align-items: stretch; gap: 1rem; } .reports-track-btn { width: 100%; } .reports-info-link { justify-content: center; } .reports-assurance { text-align: left; } .reports-status-panel { padding: 1.25rem; border-radius: 20px; } .reports-panel-top { align-items: center; } .reports-live-status { font-size: 12px; padding: .35rem .55rem; } .reports-stage { grid-template-columns: 34px 1fr; gap: .75rem; min-height: 100px; } .reports-progress-line { left: 16px; } .reports-stage-marker { width: 33px; height: 33px; font-size: 12px; } .reports-stage-content strong { font-size: 13px; } .reports-stage-content small { font-size: 12px; } .reports-stage time { display: none; } .reports-panel-footer { align-items: flex-start; flex-direction: column; } .turnaround-strip-inner { padding: 1.25rem 1.5em; grid-template-columns: 1fr; gap: 1rem; } .turnaround-intro { grid-column: auto; } .turnaround-item { padding: .7rem 0 0; border-left: 0; border-top: 1px solid #dfe7ed; } .turnaround-view-all { padding-top: .5rem; } } /* ============================ FEATURED HEALTH PACKAGES ============================ */ .packages-showcase-section { position: relative; overflow: hidden; padding: 8rem 0; background: #f4f8fa; } .packages-showcase-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 2.5rem; } .packages-showcase-intro { max-width: 690px; margin-bottom: 3.5rem; } .packages-showcase-kicker { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.2rem; color: var(--color-primary); font-size: 12px; font-weight: 750; letter-spacing: .15em; } .packages-showcase-kicker i { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(2,132,199,.1); font-size: .55rem; } .packages-showcase-intro h2 { margin: 0 0 1.1rem; color: #153752; font-size: clamp(2.6rem,4vw,4.5rem); font-weight: 550; line-height: 1.3; letter-spacing: -.055em; } .packages-showcase-intro h2 em { color: var(--color-primary); font-style: normal; } .packages-showcase-intro p { max-width: 570px; margin: 0 0 1.5rem; color: #718596; font-size: .92rem; line-height: 1.75; } .packages-all-link { display: inline-flex; align-items: center; gap: .55rem; color: var(--color-primary); font-size: .76rem; font-weight: 700; text-decoration: none; } .packages-all-link i { font-size: .62rem; transition: transform .3s ease; } .packages-all-link:hover i { transform: translateX(4px); } .packages-selector { display: grid; grid-template-columns: .78fr 1.22fr; min-height: 510px; border: 1px solid #dfe9ee; border-radius: 28px; background: #fff; overflow: hidden; box-shadow: 0 25px 70px rgba(33,67,88,.08); } .packages-menu { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; background: #edf4f7; border-right: 1px solid #dce7ec; } .package-menu-item { position: relative; display: grid; grid-template-columns: 32px 1fr 22px; align-items: center; gap: .75rem; width: 100%; min-height: 82px; padding: .9rem 1rem; border: 0; border-bottom: 1px solid #dce6eb; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: var(--transition-smooth); } .package-menu-item:last-child { border-bottom: 0; } .package-menu-item::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 4px 4px 0; background: transparent; transition: var(--transition-smooth); } .package-menu-item:hover { padding-left: 1.25rem; background: rgba(255,255,255,.5); } .package-menu-item.active { border-radius: 12px; background: #fff; box-shadow: 0 8px 25px rgba(42,73,92,.06); } .package-menu-item.active::before { background: var(--color-primary); } .package-menu-number { color: #9aacb7; font-size: 12px; font-weight: 750; letter-spacing: .05em; } .package-menu-content strong { display: block; margin-bottom: .3rem; color: #294760; font-size: 13px; font-weight: 700; } .package-menu-content small { display: block; color: #8799a6; font-size: 12px; line-height: 1.4; } .package-menu-item > i { color: #a2b2bc; font-size: .62rem; transition: var(--transition-smooth); } .package-menu-item.active > i { color: var(--color-primary); transform: translateX(2px); } .package-feature-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 510px; padding: 2.2rem 2.5rem; background: linear-gradient(135deg,#ffffff 0%,#f7fbfc 100%); overflow: hidden; } .package-feature-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .package-feature-label { color: #899ba7; font-size: 12px; font-weight: 750; letter-spacing: .13em; } .package-feature-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border: 1px solid rgba(13,148,136,.14); border-radius: 999px; background: rgba(13,148,136,.05); color: #16887d; font-size: 12px; font-weight: 700; } .package-feature-tag i { font-size: .55rem; } .package-feature-body { position: relative; z-index: 2; max-width: 600px; padding: 2rem 0 1rem; } .package-feature-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 1.4rem; border: 1px solid rgba(2,132,199,.12); border-radius: 18px; background: rgba(2,132,199,.07); color: var(--color-primary); font-size: 1.15rem; } .package-feature-body h3 { margin: 0 0 .9rem; color: #153752; font-size: clamp(2rem,3.2vw,3.25rem); font-weight: 550; line-height: 1.05; letter-spacing: -.045em; } .package-feature-body p { max-width: 570px; margin: 0 0 2rem; color: #738797; font-size: .87rem; line-height: 1.75; } .package-feature-meta { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 2rem; border-top: 1px solid #dfe8ed; border-bottom: 1px solid #dfe8ed; } .package-feature-meta div { padding: 1rem 1.1rem; border-right: 1px solid #dfe8ed; } .package-feature-meta div:last-child { border-right: 0; } .package-feature-meta span { display: block; margin-bottom: .35rem; color: #9aaab4; font-size: 12px; font-weight: 750; letter-spacing: .12em; } .package-feature-meta strong { display: block; color: #294760; font-size: 13px; font-weight: 700; } .package-book-btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 48px; padding: .75rem 1.3rem; border-radius: 11px; background: #173d59; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; transition: var(--transition-smooth); } .package-book-btn:hover { color: #fff; background: var(--color-primary); transform: translateY(-2px); box-shadow: 0 12px 25px rgba(2,132,199,.17); } .package-book-btn i { font-size: .58rem; } .package-feature-decor { position: absolute; right: -90px; bottom: -100px; width: 360px; height: 360px; border: 1px solid rgba(2,132,199,.1); border-radius: 50%; } .package-feature-decor::before { content: ""; position: absolute; inset: 35px; border: 1px solid rgba(2,132,199,.08); border-radius: 50%; } .package-feature-decor::after { content: ""; position: absolute; inset: 75px; border: 1px solid rgba(13,148,136,.09); border-radius: 50%; } .package-feature-decor span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); } .package-feature-decor span:nth-child(1) { top: 45px; left: 80px; } .package-feature-decor span:nth-child(2) { top: 145px; left: 20px; } .package-feature-decor span:nth-child(3) { bottom: 55px; right: 85px; } /* ============================ FOOTER ============================ */ .site-footer { position: relative; overflow: hidden; background: #102b40; color: #fff; } .site-footer::before { content: ""; position: absolute; top: -170px; right: -130px; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012); } .footer-main { position: relative; z-index: 2; padding: 5rem 0 4rem; } .footer-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 2.5rem; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 4rem; } .footer-logo { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.25rem; color: #fff; text-decoration: none; } .footer-logo-mark { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border: 1px solid rgba(94,234,212,.25); border-radius: 14px; background: rgba(94,234,212,.08); color: #5eead4; font-size: 1rem; } .footer-logo strong { display: block; color: #fff; font-size: 1.35rem; font-weight: 700; line-height: 1; } .footer-logo small { display: block; margin-top: .3rem; color: #7f9aaa; font-size: 12px; letter-spacing: .03em; } .footer-description { max-width: 350px; margin: 0 0 1.5rem; color: #9aafbc; font-size: 13px; line-height: 1.75; } .footer-socials { display: flex; align-items: center; gap: .55rem; } .footer-socials a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.035); color: #a9bdc8; font-size: 13px; text-decoration: none; transition: var(--transition-smooth); } .footer-socials a:hover { border-color: rgba(94,234,212,.3); background: rgba(94,234,212,.08); color: #5eead4; transform: translateY(-3px); } .footer-links-column, .footer-contact-column { display: flex; flex-direction: column; align-items: flex-start; } .footer-heading { margin-bottom: 1.2rem; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .05em; } .footer-links-column a { margin-bottom: .72rem; color: #91a8b6; font-size: 13px; text-decoration: none; transition: var(--transition-smooth); } .footer-links-column a:hover { color: #5eead4; transform: translateX(3px); } .footer-contact-item { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; color: inherit; text-decoration: none; } .footer-contact-item > span { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.05); color: #5eead4; font-size: .62rem; } .footer-contact-item small { display: block; margin-bottom: .22rem; color: #637f90; font-size: 12px; font-weight: 750; letter-spacing: .1em; } .footer-contact-item strong { display: block; color: #c3d3dc; font-size: 13px; font-weight: 600; } .footer-bottom { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.08); } .footer-bottom-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 1.25rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .footer-bottom p { margin: 0; color: #718b9b; font-size: 12px; } .footer-legal-links { display: flex; align-items: center; gap: 1.2rem; } .footer-legal-links a { color: #718b9b; font-size: 12px; text-decoration: none; transition: var(--transition-smooth); } .footer-legal-links a:hover { color: #5eead4; } .footer-certified { display: inline-flex; align-items: center; gap: .4rem; color: #6f8b9a; font-size: 12px; } .footer-certified i { color: #5eead4; } /* ============================ NAVBAR BALANCE ============================ */ .main-navigation > .nav-inner { padding-inline: clamp(2rem, 3vw, 3rem); } .topbar-account { min-height: 30px; padding-inline: 12px; border: 1px solid rgba(20, 155, 215, .22); border-radius: 999px; background: rgba(255, 255, 255, .58); color: var(--text-primary); font-weight: 600; box-shadow: 0 4px 12px rgba(12, 52, 82, .06); } .topbar-account:hover { border-color: var(--border-accent); background: var(--bg-elevated); color: var(--accent-primary); box-shadow: 0 6px 16px rgba(20, 155, 215, .12); } @media (max-width: 1023px) { .main-navigation > .nav-inner { padding-inline: 2em; } } @media (max-width: 766px) { .main-navigation > .nav-inner { padding-inline: 1em; } } /* ============================ GLOBAL SPACING STANDARD ============================ */ section, .site-section, .quick-test-section, .why-lab-section, .home-collection-section, .test-spectrum-section, .how-it-works-section, .quality-wall-section, .reports-time-section, .packages-showcase-section { padding-block: 5rem !important; } .header-container, .section-container, .hero-container, .home-collection-container, .hsc-bottom-inner, .reports-time-container, .turnaround-strip-inner, .packages-showcase-container, .footer-container, .footer-bottom-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(4rem, 5vw, 5rem); } @media (max-width: 1023px) { .header-container, .section-container, .hero-container, .home-collection-container, .hsc-bottom-inner, .reports-time-container, .turnaround-strip-inner, .packages-showcase-container, .footer-container, .footer-bottom-container { padding-inline: 2.5em; } } @media (max-width: 766px) { .header-container, .section-container, .hero-container, .home-collection-container, .hsc-bottom-inner, .reports-time-container, .turnaround-strip-inner, .packages-showcase-container, .footer-container, .footer-bottom-container { padding-inline: 1.5em; } } /* ============================ READABLE TYPE SCALE ============================ */ /* Keep content copy comfortable across the many responsive component overrides above. */ .nav-link { font-size: 14px; } .topbar-right a,.topbar-contact{ font-size: 14px; } .topbar-highlight { font-size: 14px; } .topbar-trust { font-size: 14px; } p, input, textarea, select { font-size: 16px; } button, input, textarea, select { line-height: 1.45; } .hero-content p, .quick-test-heading p, .why-lab-intro, .home-collection-description, .test-spectrum-header p, .how-it-works-description p, .quality-wall-title p, .quality-manifesto p, .reports-time-description, .package-feature-body p, .packages-showcase-intro p, .footer-description { font-size: 16px; line-height: 1.75; } .topbar-account, .dropdown-link span, .header-login-button, .mobile-login-button, .hero-primary-button, .hero-secondary-button, .quick-test-submit, .quick-test-view-all, .why-lab-button, .hsc-primary-btn, .hsc-text-btn, .reports-track-btn, .reports-info-link, .package-book-btn { font-size: 15px; } .dropdown-heading p, .dropdown-link small, .benefit-copy small, .quality-marker-text p, .quality-standard small, .reports-stage-content small, .package-menu-content small, .package-feature-meta span, .package-feature-label, .package-feature-tag, .footer-contact-item small, .footer-certified, .footer-bottom p, .footer-legal-links a { font-size: 13px; line-height: 1.55; } .benefit-copy strong, .quality-recognition-title strong, .quality-standard strong, .reports-assurance strong, .reports-stage-content strong, .package-menu-content strong, .package-feature-meta strong, .footer-contact-item strong { font-size: 16px; } .quick-test-input input, .search-field-wrap input, .reports-panel-footer div span, .reports-panel-footer div strong { font-size: 16px; } @media (max-width: 767px) { p, input, textarea, select { font-size: 15px; } .hero-content p, .quick-test-heading p, .why-lab-intro, .home-collection-description, .test-spectrum-header p, .how-it-works-description p, .quality-wall-title p, .quality-manifesto p, .reports-time-description, .package-feature-body p, .packages-showcase-intro p, .footer-description { font-size: 15px; line-height: 1.7; } .nav-link, .topbar-highlight, .topbar-contact, .topbar-account, .topbar-right a, .dropdown-link span, .header-login-button, .mobile-login-button, .hero-primary-button, .hero-secondary-button, .quick-test-submit, .quick-test-view-all, .why-lab-button, .hsc-primary-btn, .hsc-text-btn, .reports-track-btn, .reports-info-link, .package-book-btn { font-size: 14px; } .dropdown-heading p, .dropdown-link small, .benefit-copy small, .quality-marker-text p, .quality-standard small, .reports-stage-content small, .package-menu-content small, .package-feature-meta span, .package-feature-label, .package-feature-tag, .footer-contact-item small, .footer-certified, .footer-bottom p, .footer-legal-links a { font-size: 13px; } .benefit-copy strong, .quality-recognition-title strong, .quality-standard strong, .reports-assurance strong, .reports-stage-content strong, .package-menu-content strong, .package-feature-meta strong, .footer-contact-item strong { font-size: 15px; } } @media (max-width: 1023px) { .packages-showcase-section { padding: 6rem 0; } .packages-showcase-container { padding-left: 2.5em; padding-right: 2.5em; } .packages-selector { grid-template-columns: 1fr; } .packages-menu { display: grid; grid-template-columns: repeat(2,1fr); border-right: 0; border-bottom: 1px solid #dce7ec; } .package-menu-item { min-height: 75px; border-right: 1px solid #dce6eb; } .package-menu-item:nth-child(2n) { border-right: 0; } .package-menu-item:nth-last-child(-n+2) { border-bottom: 0; } .package-feature-panel { min-height: 470px; } .footer-container { padding-left: 2.5em; padding-right: 2.5em; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } .footer-contact-column { grid-column: 2 / 4; } .footer-bottom-container { padding-left: 2.5em; padding-right: 2.5em; flex-wrap: wrap; } } @media (max-width: 767px) { .packages-showcase-section { padding: 5rem 0; } .packages-showcase-container { padding-left: 1.5em; padding-right: 1.5em; } .packages-showcase-intro { margin-bottom: 2.5rem; text-align: center; } .packages-showcase-kicker { justify-content: center; } .packages-showcase-intro h2 { font-size: 2.5rem; } .packages-showcase-intro p { margin-left: auto; margin-right: auto; font-size: .85rem; } .packages-selector { border-radius: 20px; } .packages-menu { display: flex; overflow-x: auto; padding: .75rem; scrollbar-width: none; } .packages-menu::-webkit-scrollbar { display: none; } .package-menu-item { flex: 0 0 220px; min-height: 72px; border-right: 0; border-bottom: 0; border-radius: 11px; } .package-menu-item:nth-last-child(-n+2) { border-bottom: 0; } .package-menu-item.active { background: #fff; } .package-menu-item::before { top: auto; bottom: 0; left: 18px; right: 18px; width: auto; height: 2px; } .package-menu-item:hover { padding-left: 1rem; } .package-feature-panel { min-height: 510px; padding: 1.5rem; } .package-feature-top { align-items: flex-start; } .package-feature-label { font-size: 12px; } .package-feature-tag { font-size: 12px; } .package-feature-body { padding-top: 2rem; } .package-feature-body h3 { font-size: 2rem; } .package-feature-body p { font-size: .8rem; } .package-feature-meta { grid-template-columns: 1fr; } .package-feature-meta div { border-right: 0; border-bottom: 1px solid #dfe8ed; padding: .75rem .9rem; } .package-feature-meta div:last-child { border-bottom: 0; } .package-feature-decor { width: 260px; height: 260px; right: -100px; bottom: -70px; } .footer-main { padding: 4rem 0 3rem; } .footer-container { padding-left: 1.5em; padding-right: 1.5em; grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; } .footer-brand-column { grid-column: 1 / -1; } .footer-contact-column { grid-column: 1 / -1; } .footer-description { max-width: 430px; } .footer-bottom-container { padding-left: 1.5em; padding-right: 1.5em; flex-direction: column; align-items: flex-start; gap: 1rem; } .footer-legal-links { flex-wrap: wrap; gap: .8rem 1rem; } } /* ============================================================================================ HEALTHLAB — ALL TESTS & CONTACT PAGES (added for all-test.html + contact.html) Built entirely on the existing design tokens (:root variables) so dark mode + RTL inherit automatically wherever logical properties / var() colors are used. ============================================================================================ */ /* ============================================================ SHARED — PAGE HERO / BREADCRUMB ============================================================ */ .page-hero-section { position: relative; overflow: hidden; padding: 12.5rem 0 5rem; background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-navy) 55%, #0d3f63 100%); color: #fff; isolation: isolate; } .page-hero-section::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 75%); mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 75%); } .page-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); } .page-hero-glow-one { width: 480px; height: 480px; right: -180px; top: -220px; background: radial-gradient(circle, rgba(20,155,215,.30) 0%, transparent 70%); } .page-hero-glow-two { width: 380px; height: 380px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(25,199,181,.22) 0%, transparent 70%); } .page-hero-container { position: relative; z-index: 2; } .page-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 500; } .page-breadcrumb a { color: rgba(255,255,255,.85); transition: color var(--transition-fast); } .page-breadcrumb a:hover { color: var(--accent-secondary); } .page-breadcrumb span.sep { opacity: .5; } .page-breadcrumb .current { color: var(--accent-secondary); font-weight: 600; } .page-hero-section .section-eyebrow { color: var(--accent-secondary); } .page-hero-section .section-eyebrow span { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); } .page-hero-title { max-width: 820px; margin-top: 16px; color: #fff; font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 1.12; letter-spacing: -.03em; } .page-hero-title span { background: linear-gradient(90deg, var(--accent-secondary), #7fe3d8); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-hero-desc { max-width: 640px; margin-top: 18px; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.8; } .page-hero-stats { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); } .page-hero-stats div { display: flex; flex-direction: column; gap: 4px; } .page-hero-stats strong { font-family: "Manrope", sans-serif; font-size: 1.7rem; font-weight: 700; color: #fff; letter-spacing: -.02em; } .page-hero-stats span { font-size: 12.5px; color: rgba(255,255,255,.6); font-weight: 600; letter-spacing: .04em; } @media (max-width: 1023px) { .page-hero-section { padding: 11rem 0 4.5rem; } .page-hero-stats { gap: 1.8rem; } } @media (max-width: 766px) { .page-hero-section { padding: 9.5rem 0 3.6rem; } .page-breadcrumb { font-size: 12px; } .page-hero-desc { font-size: 14px; } .page-hero-stats { gap: 1.4rem 1.8rem; margin-top: 2rem; padding-top: 1.4rem; } .page-hero-stats strong { font-size: 1.4rem; } } /* ============================================================ SHARED — GENERIC SECTION HEAD (centered) ============================================================ */ .gen-section-head { max-width: 700px; margin: 0 auto 3rem; text-align: center; } .gen-section-head .section-eyebrow { justify-content: center; } .gen-section-head h2 { margin-top: 16px; font-size: clamp(2.1rem, 3.4vw, 3rem); } .gen-section-head h2 span { color: var(--accent-primary); } .gen-section-head p { max-width: 580px; margin: 16px auto 0; font-size: 15px; line-height: 1.8; } .gen-section-head.align-start { margin-inline: 0; text-align: start; } .gen-section-head.align-start .section-eyebrow { justify-content: flex-start; } .gen-section-head.align-start p { margin-inline: 0; } /* ============================================================ AT — TEST SEARCH & QUICK BOOKING (Section 2) ============================================================ */ .at-search-section { position: relative; padding: 5rem 0; background: var(--bg-secondary); overflow: hidden; } .at-search-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.6rem; align-items: center; } .at-search-panel, .at-booking-panel { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 2.4rem; box-shadow: 0 18px 50px rgba(15,60,88,.06); } .at-search-panel h3, .at-booking-panel h3 { font-size: 1.4rem; margin-bottom: 8px; } .at-search-panel > p, .at-booking-panel > p { font-size: 14px; margin-bottom: 1.6rem; } .at-search-form { display: flex; align-items: center; min-height: 62px; padding: 6px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 12px; transition: border-color var(--transition-base), box-shadow var(--transition-base); } .at-search-form:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 4px rgba(20,155,215,.08); } .at-search-input { min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 14px; } .at-search-input svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: var(--accent-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .at-search-input input { width: 100%; height: 46px; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 14px; } .at-search-input input::placeholder { color: var(--text-muted); } .at-search-submit { min-width: 110px; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; padding: 0 16px; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; border-radius: 8px; font-size: 13px; font-weight: 600; transition: transform var(--transition-base), box-shadow var(--transition-base); } .at-search-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,155,215,.22); } .at-search-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.2rem; } .at-search-tags span { padding: 3px 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; margin-inline-end: 4px; } .at-search-tags a { padding: 7px 14px; border: 1px solid var(--border-medium); border-radius: 999px; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; transition: all var(--transition-fast); } .at-search-tags a:hover, .at-search-tags a.active-tag { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; } .at-search-results { min-height: 20px; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); } .at-booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } .at-booking-form .full { grid-column: 1 / -1; } .at-field { display: flex; flex-direction: column; gap: 6px; } .at-field label { font-size: 12.5px; font-weight: 700; color: var(--text-primary); letter-spacing: .02em; } .at-field input, .at-field select, .at-field textarea { height: 48px; padding: 0 14px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 10px; color: var(--text-primary); font-size: 13.5px; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .at-field textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 90px; } .at-field input:focus, .at-field select:focus, .at-field textarea:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 4px rgba(20,155,215,.08); } .at-field input::placeholder, .at-field textarea::placeholder { color: var(--text-muted); } .at-booking-submit { grid-column: 1 / -1; margin-top: .4rem; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; border-radius: 10px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 25px rgba(20,155,215,.18); transition: transform var(--transition-base), box-shadow var(--transition-base); } .at-booking-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20,155,215,.25); } .at-booking-submit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } .at-form-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--text-muted); } .at-form-note svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--accent-secondary); stroke-width: 2; } @media (max-width: 1023px) { .at-search-grid { grid-template-columns: 1fr; gap: 1.8rem; } } @media (max-width: 766px) { .at-search-panel, .at-booking-panel { padding: 1.6rem; } .at-search-form { flex-wrap: wrap; height: auto; } .at-search-input { width: 100%; } .at-search-submit { width: 100%; margin-top: 6px; } .at-booking-form { grid-template-columns: 1fr; } } /* ============================================================ AT — TEST CATEGORIES (Section 3) ============================================================ */ .at-categories-section { padding: 5rem 0; background: var(--bg-primary); } .at-categories-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; } .at-category-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 1.8rem 1.6rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15,60,88,.04); text-align: start; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1; } .at-category-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(20,155,215,0.05), transparent); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .at-category-card:hover::before, .at-category-card.active::before { opacity: 1; } .at-category-card:hover, .at-category-card.active { transform: translateY(-6px) scale(1.02); border-color: rgba(20,155,215,0.3); box-shadow: 0 20px 48px rgba(15,60,88,.12); } .at-category-card.active { background: linear-gradient(160deg, var(--accent-soft), var(--bg-elevated)); } .at-category-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: rgba(20,155,215,0.08); color: var(--accent-primary); transition: all 0.3s ease; } .at-category-card:hover .at-category-icon, .at-category-card.active .at-category-icon { background: linear-gradient(135deg, var(--button-primary), var(--accent-secondary)); color: #fff; transform: scale(1.1) rotate(5deg); box-shadow: 0 10px 20px rgba(20,155,215,0.25); } .at-category-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .at-category-card strong { font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; color: var(--text-primary); transition: color 0.3s ease; } .at-category-card:hover strong { color: var(--accent-primary); } .at-category-card small { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 1023px) { .at-categories-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 766px) { .at-categories-section { padding: 4rem 0; } .at-categories-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; } .at-category-card { padding: 1.2rem 1rem; } .at-category-icon { width: 42px; height: 42px; } } /* ============================================================ AT — POPULAR DIAGNOSTIC TESTS (Section 4) ============================================================ */ .at-popular-section { padding: 5rem 0; background: var(--bg-secondary); } .at-popular-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .at-test-card { position: relative; display: flex; flex-direction: column; padding: 1.6rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .at-test-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(15,60,88,.11); border-color: var(--border-accent); } .at-test-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .at-test-tag { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-primary); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .at-test-fasting { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text-muted); } .at-test-fasting svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; } .at-test-card h3 { margin-top: 14px; font-size: 1.15rem; line-height: 1.3; } .at-test-card p { margin-top: 7px; font-size: 13px; line-height: 1.65; } .at-test-meta { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light); } .at-test-meta div { display: flex; flex-direction: column; gap: 2px; } .at-test-meta span { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; } .at-test-meta strong { font-size: 13px; color: var(--text-primary); font-family: "Manrope", sans-serif; } .at-test-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; } .at-test-price { display: flex; align-items: baseline; gap: 7px; } .at-test-price strong { font-family: "Manrope", sans-serif; font-size: 1.35rem; color: var(--text-primary); } .at-test-price del { font-size: 12px; color: var(--text-muted); } .at-test-book { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; font-size: 12.5px; font-weight: 700; transition: transform var(--transition-base), box-shadow var(--transition-base); } .at-test-book:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,155,215,.22); } .at-test-book svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; } .at-popular-footer { display: flex; justify-content: center; margin-top: 2.6rem; } @media (max-width: 1023px) { .at-popular-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 766px) { .at-popular-section { padding: 4rem 0; } .at-popular-grid { grid-template-columns: 1fr; gap: 1rem; } .at-test-card { padding: 1.3rem; } } /* ============================================================ AT — FEATURED HEALTH PACKAGES (Section 5) ============================================================ */ .at-fpackages-section { padding: 5rem 0; background: var(--bg-primary); } .at-fpackages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .at-fpackage-card { position: relative; display: flex; flex-direction: column; padding: 2rem 1.7rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base); } .at-fpackage-card:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(15,60,88,.12); } .at-fpackage-card.is-popular { border-color: var(--accent-primary); background: linear-gradient(165deg, var(--accent-soft) 0%, var(--bg-elevated) 45%); } .at-fpackage-badge { position: absolute; top: 18px; right: -34px; padding: 5px 40px; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transform: rotate(38deg); box-shadow: 0 6px 14px rgba(20,155,215,.25); } .at-fpackage-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--accent-soft); color: var(--accent-primary); } .at-fpackage-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .at-fpackage-card h3 { margin-top: 18px; font-size: 1.3rem; } .at-fpackage-card > p { margin-top: 8px; font-size: 13px; line-height: 1.6; } .at-fpackage-price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; } .at-fpackage-price strong { font-family: "Manrope", sans-serif; font-size: 2rem; color: var(--text-primary); letter-spacing: -.02em; } .at-fpackage-price del { font-size: 13px; color: var(--text-muted); } .at-fpackage-list { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-light); flex: 1; } .at-fpackage-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-secondary); list-style: none; } .at-fpackage-list svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: var(--accent-secondary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .at-fpackage-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; min-height: 48px; border: 1px solid var(--border-accent); border-radius: 10px; color: var(--accent-primary); font-size: 13.5px; font-weight: 700; transition: all var(--transition-base); } .at-fpackage-card.is-popular .at-fpackage-btn, .at-fpackage-btn:hover { background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); border-color: transparent; color: #fff; } .at-fpackage-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--transition-base); } .at-fpackage-btn:hover svg { transform: translateX(4px); } @media (max-width: 1023px) { .at-fpackages-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 766px) { .at-fpackages-section { padding: 4rem 0; } .at-fpackages-grid { grid-template-columns: 1fr; } .at-fpackage-card { padding: 1.7rem 1.4rem; } } /* ============================================================ AT — TEST DETAILS & PARAMETERS (Section 6, accordion) ============================================================ */ .at-details-section { padding: 5rem 0; background: var(--bg-secondary); } .at-details-list { display: flex; flex-direction: column; gap: 14px; max-width: 980px; margin: 0 auto; } .at-detail-item { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-base); } .at-detail-item.open, .at-detail-item:hover { border-color: var(--border-accent); } .at-detail-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.7rem; text-align: start; } .at-detail-trigger-left { display: flex; align-items: center; gap: 16px; min-width: 0; } .at-detail-index { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-primary); font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13px; } .at-detail-trigger-copy { min-width: 0; } .at-detail-trigger-copy strong { display: block; font-family: "Manrope", sans-serif; font-size: 1.05rem; color: var(--text-primary); } .at-detail-trigger-copy small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); } .at-detail-toggle-icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-medium); color: var(--text-primary); transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base); } .at-detail-item.open .at-detail-toggle-icon { transform: rotate(45deg); background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; } .at-detail-toggle-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } .at-detail-panel { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.22,1,.36,1); } .at-detail-item.open .at-detail-panel { max-height: 620px; } .at-detail-panel-inner { padding: 0 1.7rem 1.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } .at-detail-panel-inner p { font-size: 13.5px; line-height: 1.75; grid-column: 1 / -1; margin-bottom: 6px; } .at-detail-params { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; margin-bottom: 6px; } .at-detail-params span { padding: 6px 12px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-light); font-size: 12px; color: var(--text-secondary); font-weight: 600; } .at-detail-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--border-light); } .at-detail-facts div { display: flex; flex-direction: column; gap: 3px; } .at-detail-facts span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .at-detail-facts strong { font-size: 13px; color: var(--text-primary); font-family: "Manrope", sans-serif; } @media (max-width: 766px) { .at-details-section { padding: 4rem 0; } .at-detail-trigger { padding: 1.1rem 1.2rem; gap: .6rem; } .at-detail-trigger-left { gap: 11px; } .at-detail-index { width: 36px; height: 36px; font-size: 11px; } .at-detail-trigger-copy strong { font-size: 14px; } .at-detail-panel-inner { grid-template-columns: 1fr; padding: 0 1.2rem 1.4rem; } .at-detail-facts { grid-template-columns: repeat(2, 1fr); } .at-detail-item.open .at-detail-panel { max-height: 900px; } } /* ============================================================ AT — HOME SAMPLE COLLECTION STRIP (Section 7) ============================================================ */ .at-collection-section { position: relative; padding: 5rem 0; overflow: hidden; background: linear-gradient(135deg, var(--brand-deep), var(--brand-navy)); color: #fff; } .at-collection-section::before { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(25,199,181,.18), transparent 70%); pointer-events: none; } .at-collection-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; position: relative; z-index: 2; } .at-collection-top .section-eyebrow { color: var(--accent-secondary); } .at-collection-top .section-eyebrow span { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); } .at-collection-top h2 { color: #fff; margin-top: 14px; font-size: clamp(2rem, 3.2vw, 2.9rem); max-width: 560px; } .at-collection-top p { color: rgba(255,255,255,.65); margin-top: 12px; max-width: 460px; font-size: 14.5px; line-height: 1.75; } .at-collection-cta { display: inline-flex; align-items: center; gap: 10px; padding: 0 24px; min-height: 52px; border-radius: 999px; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 14px 30px rgba(20,155,215,.28); transition: transform var(--transition-base); flex: 0 0 auto; } .at-collection-cta:hover { transform: translateY(-3px); } .at-collection-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .at-collection-steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .at-collection-step { position: relative; padding: 1.8rem 1.5rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); backdrop-filter: blur(6px); } .at-collection-step-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.09); color: var(--accent-secondary); font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 16px; } .at-collection-step strong { display: block; color: #fff; font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; } .at-collection-step small { display: block; margin-top: 6px; color: rgba(255,255,255,.6); font-size: 12.5px; line-height: 1.6; } .at-collection-step::after { content: ""; position: absolute; top: 38px; right: -0.85rem; width: 1.2rem; height: 1px; background: rgba(255,255,255,.25); } .at-collection-step:last-child::after { display: none; } @media (max-width: 1023px) { .at-collection-steps { grid-template-columns: repeat(2, 1fr); } .at-collection-step::after { display: none; } } @media (max-width: 766px) { .at-collection-section { padding: 4rem 0; } .at-collection-steps { grid-template-columns: 1fr; } .at-collection-top { margin-bottom: 2.2rem; } .at-collection-cta { width: 100%; justify-content: center; } } /* ============================================================ AT — SAMPLE PREPARATION GUIDELINES (Section 8) ============================================================ */ .at-prep-section { padding: 5rem 0; background: var(--bg-primary); } .at-prep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } .at-prep-card { padding: 1.9rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: transform var(--transition-base), box-shadow var(--transition-base); } .at-prep-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15,60,88,.09); } .at-prep-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; margin-bottom: 16px; } .at-prep-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .at-prep-card.tone-fast .at-prep-icon { background: rgba(226,86,66,.1); color: #d9534f; } .at-prep-card.tone-none .at-prep-icon { background: var(--accent-soft); color: var(--accent-secondary); } .at-prep-card.tone-info .at-prep-icon { background: rgba(20,155,215,.1); color: var(--accent-primary); } .at-prep-card h3 { font-size: 1.1rem; } .at-prep-card > p { margin-top: 7px; font-size: 13px; line-height: 1.65; } .at-prep-list { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 9px; } .at-prep-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-secondary); list-style: none; line-height: 1.55; } .at-prep-list li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: var(--accent-primary); } @media (max-width: 1023px) { .at-prep-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 766px) { .at-prep-section { padding: 4rem 0; } .at-prep-grid { grid-template-columns: 1fr; } } /* ============================================================ AT — REPORTS & TURNAROUND TIME (Section 9) ============================================================ */ .at-reports-section { padding: 5rem 0; background: var(--bg-secondary); } .at-reports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; } .at-reports-timeline { display: flex; flex-direction: column; gap: 0; } .at-reports-row { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 1.3rem 0; border-bottom: 1px solid var(--border-light); } .at-reports-row:first-child { padding-top: 0; } .at-reports-time-badge { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-primary); font-family: "Manrope", sans-serif; font-size: 12.5px; font-weight: 700; text-align: center; padding: 0 6px; } .at-reports-row-content strong { display: block; font-family: "Manrope", sans-serif; font-size: 15px; color: var(--text-primary); } .at-reports-row-content span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } .at-reports-features { display: flex; flex-direction: column; gap: 1.1rem; } .at-reports-feature { display: flex; align-items: flex-start; gap: 16px; padding: 1.2rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-sm); transition: border-color var(--transition-base), transform var(--transition-base); } .at-reports-feature:hover { border-color: var(--border-accent); transform: translateX(4px); } .at-reports-feature-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-primary); } .at-reports-feature-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .at-reports-feature strong { display: block; font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } .at-reports-feature small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } @media (max-width: 1023px) { .at-reports-grid { grid-template-columns: 1fr; gap: 2.2rem; } } @media (max-width: 766px) { .at-reports-section { padding: 4rem 0; } .at-reports-row { grid-template-columns: 70px 1fr; gap: 12px; } .at-reports-time-badge { height: 38px; font-size: 11px; } } /* ============================================================ AT — FINAL BOOKING CTA (Section 10) ============================================================ */ .at-cta-section { position: relative; padding: 5.5rem 0; overflow: hidden; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); text-align: center; } .at-cta-section::before, .at-cta-section::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); pointer-events: none; } .at-cta-section::before { width: 420px; height: 420px; left: -160px; top: -200px; } .at-cta-section::after { width: 340px; height: 340px; right: -140px; bottom: -180px; } .at-cta-container { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; } .at-cta-container .section-eyebrow { justify-content: center; color: rgba(255,255,255,.85); } .at-cta-container .section-eyebrow span { background: #fff; } .at-cta-container h2 { margin-top: 16px; color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); } .at-cta-container p { margin-top: 14px; color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.75; } .at-cta-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; } .at-cta-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-size: 14px; font-weight: 700; transition: transform var(--transition-base), box-shadow var(--transition-base); } .at-cta-btn.primary { background: #fff; color: var(--brand-deep); box-shadow: 0 16px 34px rgba(8,37,66,.22); } .at-cta-btn.outline { border: 1.5px solid rgba(255,255,255,.55); color: #fff; } .at-cta-btn:hover { transform: translateY(-3px); } .at-cta-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; } .at-cta-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.25); } .at-cta-trust span { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; } .at-cta-trust svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } @media (max-width: 766px) { .at-cta-section { padding: 4rem 0; } .at-cta-actions { flex-direction: column; width: 100%; } .at-cta-btn { width: 100%; justify-content: center; } .at-cta-trust { gap: 1rem 1.4rem; } } /* ============================================================================================ CONTACT PAGE — CT PREFIX ============================================================================================ */ /* ============================================================ CT — CONTACT INFORMATION & LAB DETAILS (Section 2) ============================================================ */ .ct-info-section { padding: 5rem 0; background: var(--bg-primary); } .ct-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .ct-info-card { padding: 1.9rem 1.6rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .ct-info-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(15,60,88,.1); border-color: var(--border-accent); } .ct-info-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent-primary); margin-bottom: 18px; } .ct-info-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ct-info-card strong { display: block; font-family: "Manrope", sans-serif; font-size: 15px; color: var(--text-primary); margin-bottom: 8px; } .ct-info-card a, .ct-info-card p { display: block; font-size: 13.5px; color: var(--text-secondary); line-height: 1.65; } .ct-info-card a:hover { color: var(--accent-primary); } .ct-info-card small { display: block; margin-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-secondary); } @media (max-width: 1023px) { .ct-info-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 766px) { .ct-info-section { padding: 4rem 0; } .ct-info-grid { grid-template-columns: 1fr; gap: 1rem; } } /* ============================================================ CT — CONTACT / APPOINTMENT FORM (Section 3) ============================================================ */ .ct-form-section { padding: 5rem 0; background: var(--bg-secondary); } .ct-form-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 2.6rem; align-items: start; } .ct-form-panel { padding: 2.4rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: 0 18px 50px rgba(15,60,88,.06); } .ct-form-panel h3 { font-size: 1.5rem; } .ct-form-panel > p { margin-top: 8px; margin-bottom: 1.8rem; font-size: 14px; } .ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ct-form .full { grid-column: 1 / -1; } .ct-field { display: flex; flex-direction: column; gap: 7px; } .ct-field label { font-size: 12.5px; font-weight: 700; color: var(--text-primary); } .ct-field label i { color: #d9534f; font-style: normal; } .ct-field input, .ct-field select, .ct-field textarea { height: 50px; padding: 0 15px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 10px; color: var(--text-primary); font-size: 13.5px; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .ct-field textarea { height: auto; padding: 13px 15px; min-height: 120px; resize: vertical; } .ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 4px rgba(20,155,215,.08); } .ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--text-muted); } .ct-field .ct-error-msg { display: none; font-size: 11.5px; color: #d9534f; font-weight: 600; } .ct-field.has-error input, .ct-field.has-error select, .ct-field.has-error textarea { border-color: #d9534f; box-shadow: 0 0 0 4px rgba(217,83,79,.08); } .ct-field.has-error .ct-error-msg { display: block; } .ct-form-submit { grid-column: 1 / -1; margin-top: .5rem; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; border-radius: 10px; font-size: 14.5px; font-weight: 700; box-shadow: 0 12px 28px rgba(20,155,215,.2); transition: transform var(--transition-base), box-shadow var(--transition-base); } .ct-form-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(20,155,215,.26); } .ct-form-submit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .ct-form-success { display: none; align-items: center; gap: 12px; margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 10px; background: rgba(25,199,181,.1); border: 1px solid rgba(25,199,181,.3); color: var(--text-primary); font-size: 13.5px; } .ct-form-success.visible { display: flex; } .ct-form-success svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--accent-secondary); stroke-width: 2; } .ct-side-panel { display: flex; flex-direction: column; gap: 1.2rem; } .ct-side-card { padding: 1.8rem; border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--bg-elevated);margin-top:1.5em; } .ct-side-card.dark { background: linear-gradient(150deg, var(--brand-deep), var(--brand-navy)); border-color: transparent; color: #fff; } .ct-side-card h4 { font-size: 1.05rem; } .ct-side-card.dark h4 { color: #fff; } .ct-side-card p, .ct-side-card.dark p { margin-top: 8px; font-size: 13px; line-height: 1.7; } .ct-side-card.dark p { color: rgba(255,255,255,.68); } .ct-side-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .ct-side-item { display: flex; align-items: center; gap: 12px; } .ct-side-item-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.09); color: var(--accent-secondary); } .ct-side-card:not(.dark) .ct-side-item-icon { background: var(--accent-soft); color: var(--accent-primary); } .ct-side-item-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ct-side-item strong { display: block; font-size: 13px; } .ct-side-item small { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255,255,255,.6); } .ct-side-card:not(.dark) .ct-side-item small { color: var(--text-muted); } .ct-emergency-btn { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px; min-height: 48px; border-radius: 10px; background: #fff; color: var(--brand-navy); font-size: 13px; font-weight: 700; transition: transform var(--transition-base); } .ct-emergency-btn:hover { transform: translateY(-2px); } .ct-emergency-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; } @media (max-width: 1023px) { .ct-form-grid { grid-template-columns: 1fr; } } @media (max-width: 766px) { .ct-form-section { padding: 4rem 0; } .ct-form-panel { padding: 1.6rem; } .ct-form { grid-template-columns: 1fr; } } /* ============================================================ CT — FIND OUR LABORATORY: MAP & LOCATION (Section 4) ============================================================ */ .ct-map-section { padding: 5rem 0; background: var(--bg-primary); } .ct-map-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 1.6rem; align-items: stretch; } .ct-map-frame { position: relative; min-height: 420px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-light); box-shadow: 0 18px 50px rgba(15,60,88,.08); } .ct-map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(.15) contrast(1.02); } .ct-map-locations { display: flex; flex-direction: column; gap: 1rem; } .ct-location-card { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 1.4rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-sm); transition: border-color var(--transition-base), transform var(--transition-base); } .ct-location-card.active { border-color: var(--accent-primary); background: var(--accent-soft); } .ct-location-card:hover { transform: translateX(4px); } .ct-location-top { display: flex; align-items: center; gap: 12px; } .ct-location-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-secondary); color: var(--accent-primary); } .ct-location-card.active .ct-location-icon { background: var(--accent-primary); color: #fff; } .ct-location-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ct-location-card strong { font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } .ct-location-card p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; } .ct-location-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-top: 10px; border-top: 1px solid var(--border-light); } .ct-location-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); font-weight: 600; } .ct-location-meta svg { width: 13px; height: 13px; fill: none; stroke: var(--accent-secondary); stroke-width: 2; } @media (max-width: 1023px) { .ct-map-grid { grid-template-columns: 1fr; } .ct-map-frame { min-height: 320px; } .ct-map-frame iframe { min-height: 320px; } } @media (max-width: 766px) { .ct-map-section { padding: 4rem 0; } } /* ============================================================ CT — HOME COLLECTION & SUPPORT INFORMATION (Section 5) ============================================================ */ .ct-support-section { position: relative; padding: 5rem 0; overflow: hidden; background: var(--bg-secondary); } .ct-support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .ct-support-card { text-align: center; padding: 2rem 1.4rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: transform var(--transition-base), box-shadow var(--transition-base); } .ct-support-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,60,88,.09); } .ct-support-icon { width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-primary); } .ct-support-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ct-support-card strong { display: block; font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } .ct-support-card span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } .ct-support-card a.ct-support-link { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent-primary); } @media (max-width: 1023px) { .ct-support-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 766px) { .ct-support-section { padding: 4rem 0; } .ct-support-grid { grid-template-columns: 1fr; gap: 1rem; } } /* ============================================================ CT — FAQ / FINAL CONTACT CTA (Section 6) ============================================================ */ .ct-faq-section { padding: 5rem 0; background: var(--bg-primary); } .ct-faq-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: start; } .ct-faq-list { display: flex; flex-direction: column; gap: 12px; } .ct-faq-item { border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--transition-base); background: var(--bg-elevated); } .ct-faq-item.open, .ct-faq-item:hover { border-color: var(--border-accent); } .ct-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; text-align: start; font-family: "Manrope", sans-serif; font-size: 14.5px; font-weight: 600; color: var(--text-primary); } .ct-faq-q svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--accent-primary); stroke-width: 2; transition: transform var(--transition-base); } .ct-faq-item.open .ct-faq-q svg { transform: rotate(180deg); } .ct-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.22,1,.36,1); } .ct-faq-item.open .ct-faq-a { max-height: 260px; } .ct-faq-a p { padding: 0 1.4rem 1.3rem; font-size: 13.5px; line-height: 1.75; } .ct-cta-panel { position: relative; padding: 2.6rem; border-radius: var(--radius-lg); background: linear-gradient(140deg, var(--button-primary), var(--accent-secondary)); color: #fff; overflow: hidden; } .ct-cta-panel::before { content: ""; position: absolute; width: 260px; height: 260px; right: -100px; bottom: -110px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); } .ct-cta-panel h3 { position: relative; z-index: 2; color: #fff; font-size: 1.7rem; } .ct-cta-panel p { position: relative; z-index: 2; margin-top: 10px; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.75; } .ct-cta-panel-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; } .ct-cta-panel-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 22px; border-radius: 999px; font-size: 13.5px; font-weight: 700; transition: transform var(--transition-base); } .ct-cta-panel-btn.solid { background: #fff; color: var(--brand-navy); } .ct-cta-panel-btn.line { border: 1.5px solid rgba(255,255,255,.55); color: #fff; } .ct-cta-panel-btn:hover { transform: translateY(-3px); } .ct-cta-panel-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } .ct-cta-panel-meta { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.25); } .ct-cta-panel-meta span { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(255,255,255,.85); } .ct-cta-panel-meta svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; flex: 0 0 auto; } @media (max-width: 1023px) { .ct-faq-grid { grid-template-columns: 1fr; gap: 2.2rem; } } @media (max-width: 766px) { .ct-faq-section { padding: 4rem 0; } .ct-faq-q { padding: 1rem 1.1rem; font-size: 13.5px; } .ct-cta-panel { padding: 1.8rem; } } /* ============================================================================================ HEALTHLAB — HEALTH PACKAGES & CERTIFICATIONS PAGES Premium editorial layout system (no boxed card grids) ============================================================================================ */ /* ============================================================ SHARED — PREMIUM PAGE PRIMITIVES (.pp-*) ============================================================ */ .pp-head { max-width: 760px; margin-bottom: 3.4rem; } .pp-head.center { max-width: 820px; margin-inline: auto; text-align: center; } .pp-head.center .section-eyebrow { justify-content: center; } .pp-head h2 { font-size: clamp(2.1rem, 3.2vw, 3.1rem); } .pp-head p { margin-top: 16px; font-size: 15.5px; line-height: 1.85; color: var(--text-secondary); } /* Editorial hairline rule */ .pp-rule { height: 1px; border: 0; background: linear-gradient(90deg, var(--border-medium), transparent); } /* Arch / organic image frames */ .pp-arch { position: relative; overflow: hidden; border-radius: 260px 260px 32px 32px; box-shadow: 0 40px 90px rgba(11, 45, 74, .16); } .pp-arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); } .pp-arch:hover img { transform: scale(1.06); } .pp-arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 37, 66, .55)); } .pp-leaf { position: relative; overflow: hidden; border-radius: 20px 20px 20px 20px; box-shadow: 0 34px 80px rgba(11, 45, 74, .15); } .pp-leaf img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); } .pp-leaf:hover img { transform: scale(1.05); } .pp-orbit { position: absolute; border-radius: 50%; border: 1px solid var(--border-accent); pointer-events: none; } /* Floating glass caption on imagery */ .pp-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 22px 50px rgba(11, 45, 74, .18); } .pp-float i, .pp-float svg { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-size: 14px; } .pp-float strong { display: block; font-family: "Manrope", sans-serif; font-size: 14px; color: var(--brand-deep); letter-spacing: -.01em; } .pp-float small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } /* Pill buttons */ .pp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -.01em; transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); } .pp-btn i { font-size: 13px; } .pp-btn.solid { background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 18px 40px rgba(7, 155, 196, .28); } .pp-btn.solid:hover { transform: translateY(-3px); box-shadow: 0 24px 52px rgba(7, 155, 196, .34); } .pp-btn.ghost { border: 1.5px solid var(--border-medium); color: var(--text-primary); } .pp-btn.ghost:hover { border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-3px); } .pp-btn.light { background: #fff; color: var(--brand-deep); } .pp-btn.line-light { border: 1.5px solid rgba(255,255,255,.55); color: #fff; } .pp-btn.light:hover, .pp-btn.line-light:hover { transform: translateY(-3px); } /* Inline text link with moving arrow */ .pp-link { display: inline-flex; align-items: center; gap: 9px; font-family: "Manrope", sans-serif; font-size: 13.5px; font-weight: 700; color: var(--accent-primary); } .pp-link i { transition: transform var(--transition-base); } .pp-link:hover i { transform: translateX(5px); } /* Editorial numbered marker */ .pp-num { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border-accent); font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 800; color: var(--accent-primary); background: var(--bg-primary); transition: all var(--transition-base); } /* ============================================================ HP 2 — PACKAGE SEARCH & CATEGORY FILTER ============================================================ */ .hp-finder-section { position: relative; padding: 4.5rem 0 4rem; background: var(--bg-primary); } .hp-finder-section::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--border-medium), transparent); } .hp-finder-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; margin-bottom: 2.2rem; } .hp-finder-top h2 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); } .hp-finder-top p { margin-top: 10px; max-width: 480px; font-size: 14.5px; } .hp-finder-count { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .hp-finder-count b { font-family: "Manrope", sans-serif; font-size: 1.9rem; font-weight: 800; color: var(--accent-primary); letter-spacing: -.03em; } /* Capsule search bar */ .hp-search-bar { display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 10px 0 28px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-light); box-shadow: 0 20px 55px rgba(11, 45, 74, .07); transition: border-color var(--transition-base), box-shadow var(--transition-base); } .hp-search-bar:focus-within { border-color: var(--accent-primary); box-shadow: 0 24px 60px rgba(20, 155, 215, .16); } .hp-search-bar > i { font-size: 17px; color: var(--accent-primary); } .hp-search-bar input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text-primary); font-size: 15.5px; outline: none; } .hp-search-bar input::placeholder { color: var(--text-muted); } .hp-search-divider { width: 1px; height: 34px; background: var(--border-medium); } .hp-search-select { height: 100%; min-width: 180px; border: 0; background: transparent; color: var(--text-secondary); font-size: 14px; font-weight: 600; outline: none; cursor: pointer; } .hp-search-submit { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 30px; border-radius: 999px; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; transition: transform var(--transition-base); } .hp-search-submit:hover { transform: translateY(-2px); } .hp-search-note { margin-top: 14px; padding-left: 28px; font-size: 13px; font-weight: 600; color: var(--accent-primary); min-height: 20px; } /* Flowing category rail — pill chips, horizontally scrollable */ .hp-cat-rail { display: flex; align-items: center; gap: 12px; margin-top: 2.4rem; padding-bottom: 6px; overflow-x: auto; scrollbar-width: none; } .hp-cat-rail::-webkit-scrollbar { display: none; } .hp-cat-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 11px; height: 58px; padding: 0 24px 0 10px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-elevated); color: var(--text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all var(--transition-base); } .hp-cat-chip em { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-primary); font-size: 14px; font-style: normal; transition: all var(--transition-base); } .hp-cat-chip b { font-family: "Manrope", sans-serif; font-weight: 700; color: var(--text-primary); transition: color var(--transition-base); } .hp-cat-chip span { font-size: 12px; color: var(--text-muted); } .hp-cat-chip:hover { border-color: var(--border-accent); transform: translateY(-3px); } .hp-cat-chip.active { border-color: transparent; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); box-shadow: 0 16px 36px rgba(7, 155, 196, .26); } .hp-cat-chip.active em { background: rgba(255,255,255,.22); color: #fff; } .hp-cat-chip.active b, .hp-cat-chip.active span { color: #fff; } /* ============================================================ HP 3 — FEATURED HEALTH PACKAGES (editorial switcher) ============================================================ */ .hp-featured-section { padding: 5rem 0; background: var(--bg-secondary); } .hp-featured-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 4rem; align-items: start; } .hp-featured-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-light); position: sticky; top: 120px; align-self: start; } .hp-featured-stage { max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; } .hp-featured-item { position: relative; display: flex; align-items: center; gap: 18px; padding: 1.5rem .4rem; border-bottom: 1px solid var(--border-light); text-align: start; cursor: pointer; transition: padding var(--transition-base); } .hp-featured-item::before { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 0; height: 2px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transition: width var(--transition-slow); } .hp-featured-item.active::before { width: 100%; } .hp-featured-item:hover { padding-inline-start: 1rem; } .hp-featured-tick { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-light); color: var(--text-muted); font-size: 15px; transition: all var(--transition-base); } .hp-featured-item.active .hp-featured-tick { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 12px 26px rgba(20, 155, 215, .28); } .hp-featured-copy { flex: 1; min-width: 0; } .hp-featured-copy strong { display: block; font-family: "Manrope", sans-serif; font-size: 15.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; } .hp-featured-copy small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); } .hp-featured-cost { flex: 0 0 auto; text-align: end; font-family: "Manrope", sans-serif; } .hp-featured-cost b { display: block; font-size: 15px; font-weight: 800; color: var(--accent-primary); } .hp-featured-cost del { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* Feature stage */ .hp-featured-stage { position: relative; min-height: 560px; } .hp-featured-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); } .hp-featured-panel.active { position: relative; opacity: 1; visibility: visible; transform: none; } .hp-panel-media { position: relative; height: 330px; border-radius: 210px 210px 28px 28px; overflow: hidden; box-shadow: 0 40px 90px rgba(11, 45, 74, .18); } .hp-panel-media img { width: 100%; height: 100%; object-fit: cover; } .hp-panel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,37,66,.12) 0%, rgba(8,37,66,.72) 100%); } .hp-panel-tag { position: absolute; z-index: 2; top: 22px; inset-inline-start: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--brand-deep); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .hp-panel-headline { position: absolute; z-index: 2; inset-inline: 30px; bottom: 26px; color: #fff; } .hp-panel-headline h3 { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.2rem); } .hp-panel-headline p { margin-top: 8px; color: rgba(255,255,255,.78); font-size: 14px; max-width: 480px; } .hp-panel-facts { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--border-light); } .hp-panel-facts div { display: flex; flex-direction: column; gap: 4px; } .hp-panel-facts strong { font-family: "Manrope", sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; } .hp-panel-facts span { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); } .hp-panel-includes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.8rem; } .hp-panel-includes li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: var(--accent-soft); color: var(--text-primary); font-size: 12.5px; font-weight: 600; } .hp-panel-includes li i { color: var(--accent-secondary); font-size: 11px; } .hp-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2rem; } .hp-panel-price { display: flex; align-items: baseline; gap: 12px; font-family: "Manrope", sans-serif; } .hp-panel-price b { font-size: 2.1rem; font-weight: 800; color: var(--accent-primary); letter-spacing: -.03em; } .hp-panel-price del { font-size: 15px; color: var(--text-muted); } .hp-panel-price em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent-secondary); } .hp-panel-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ============================================================ HP 4 — PACKAGES BY HEALTH NEED (flowing medallion rows) ============================================================ */ .hp-need-section { padding: 5rem 0; background: var(--bg-primary); } .hp-need-list { border-top: 1px solid var(--border-light); } .hp-need-row { position: relative; display: grid; grid-template-columns: 132px 1.1fr 1.15fr auto; gap: 2.2rem; align-items: center; padding: 2.1rem .5rem; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-slow); } .hp-need-row::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent-soft), transparent 65%); opacity: 0; transition: opacity var(--transition-base); } .hp-need-row:hover::before { opacity: 1; } .hp-need-row:hover { padding-inline-start: 1.6rem; } .hp-need-row > * { position: relative; z-index: 1; } .hp-need-medallion { position: relative; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; box-shadow: 0 18px 40px rgba(11, 45, 74, .16); } .hp-need-medallion img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); } .hp-need-row:hover .hp-need-medallion img { transform: scale(1.12); } .hp-need-medallion span { position: absolute; inset: 0; background: linear-gradient(140deg, rgba(20,155,215,.28), rgba(25,199,181,.18)); } .hp-need-title h3 { font-size: 1.35rem; } .hp-need-title span { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-primary); } .hp-need-desc p { font-size: 14px; line-height: 1.8; } .hp-need-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .hp-need-meta i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .hp-need-meta i::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-secondary); } .hp-need-go { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--border-medium); color: var(--accent-primary); font-size: 15px; transition: all var(--transition-base); } .hp-need-row:hover .hp-need-go { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; transform: rotate(-45deg); box-shadow: 0 14px 30px rgba(20,155,215,.3); } /* ============================================================ HP 5 — PACKAGE DETAILS & TEST PARAMETERS (open accordion rows) ============================================================ */ .hp-params-section { padding: 5rem 0; background: var(--bg-secondary); } .hp-params-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 4rem; align-items: start; } .hp-params-aside { position: sticky; top: 120px; } .hp-params-aside .pp-leaf { height: 300px; margin-top: 2rem; } .hp-params-aside-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--border-light); } .hp-params-aside-note i { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-primary); font-size: 14px; } .hp-params-aside-note p { font-size: 13.5px; line-height: 1.75; } .hp-param-list { border-top: 1px solid var(--border-medium); } .hp-param-item { border-bottom: 1px solid var(--border-light); transition: background var(--transition-base); } .hp-param-head { width: 100%; display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem .3rem; text-align: start; cursor: pointer; } .hp-param-head:hover .hp-param-name { color: var(--accent-primary); } .hp-param-index { flex: 0 0 auto; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accent-secondary); } .hp-param-name { flex: 1; min-width: 0; font-family: "Manrope", sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; transition: color var(--transition-base); } .hp-param-count { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .hp-param-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-light); color: var(--accent-primary); font-size: 13px; transition: all var(--transition-base); } .hp-param-item.open .hp-param-toggle { transform: rotate(135deg); border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; } .hp-param-body { max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.22,1,.36,1); } .hp-param-item.open .hp-param-body { max-height: 780px; } .hp-param-inner { padding: 0 .3rem 2rem; } .hp-param-inner > p { max-width: 640px; font-size: 14px; line-height: 1.8; } .hp-param-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 1.4rem; } .hp-param-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-elevated); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); transition: all var(--transition-base); } .hp-param-chips span:hover { border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-2px); } .hp-param-chips span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-secondary); } .hp-param-facts { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px dashed var(--border-medium); } .hp-param-facts div small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .hp-param-facts div strong { display: block; margin-top: 5px; font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } /* ============================================================ HP 6 — WHO SHOULD TAKE THESE PACKAGES (vertical rail) ============================================================ */ .hp-who-section { position: relative; padding: 5rem 0; background: var(--bg-primary); overflow: hidden; } .hp-who-section .pp-orbit { width: 540px; height: 540px; inset-inline-end: -220px; top: 12%; } .hp-who-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .85fr 1.15fr; gap: 4.5rem; align-items: start; } .hp-who-aside { position: sticky; top: 120px; align-self: start; } .hp-who-rail { position: relative; padding-inline-start: 2.8rem; max-height: calc(100vh - 30px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; } .hp-who-aside .pp-arch { height: 340px; margin-top: 2.2rem; border-radius: 200px 200px 28px 28px; } .hp-who-aside .pp-float { inset-inline-start: 50%; transform: translateX(-50%); bottom: 22px; } .hp-who-rail { position: relative; padding-inline-start: 2.8rem; } .hp-who-rail::before { content: ""; position: absolute; inset-inline-start: 27px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary), transparent); opacity: .45; } .hp-who-item { position: relative; display: flex; gap: 1.6rem; padding: 1.5rem 0; } .hp-who-item + .hp-who-item { border-top: 1px solid var(--border-light); } .hp-who-item .pp-num { margin-inline-start: -2.8rem; } .hp-who-item:hover .pp-num { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 14px 32px rgba(20,155,215,.28); } .hp-who-item h4 { font-size: 1.1rem; } .hp-who-item p { margin-top: 8px; font-size: 14px; line-height: 1.8; } .hp-who-item ul { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; } .hp-who-item li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .hp-who-item li i { color: var(--accent-secondary); font-size: 11px; } /* ============================================================ HP 7 — HOME SAMPLE COLLECTION ============================================================ */ .hp-collect-section { position: relative; padding: 5rem 0; background: linear-gradient(140deg, var(--brand-deep) 0%, var(--brand-navy) 60%, #0d3f63 100%); color: #fff; overflow: hidden; } .hp-collect-section::before { content: ""; position: absolute; inset: 0; opacity: .38; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle at 70% 30%, rgba(0,0,0,.9), transparent 70%); mask-image: radial-gradient(circle at 70% 30%, rgba(0,0,0,.9), transparent 70%); } .hp-collect-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: 4.5rem; align-items: center; } .hp-collect-copy .section-eyebrow { color: var(--accent-secondary); } .hp-collect-copy .section-eyebrow span { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); } .hp-collect-copy h2 { color: #fff; font-size: clamp(2.1rem, 3.2vw, 3rem); } .hp-collect-copy > p { margin-top: 16px; max-width: 520px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.85; } .hp-collect-steps { margin-top: 2.6rem; position: relative; padding-inline-start: 2.6rem; } .hp-collect-steps::before { content: ""; position: absolute; inset-inline-start: 11px; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(180deg, var(--accent-secondary), rgba(255,255,255,.08)); } .hp-collect-step { position: relative; padding: 1.15rem 0; } .hp-collect-step + .hp-collect-step { border-top: 1px solid rgba(255,255,255,.1); } .hp-collect-step::before { content: ""; position: absolute; inset-inline-start: -2.6rem; top: 1.5rem; width: 23px; height: 23px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: var(--brand-deep); transition: all var(--transition-base); } .hp-collect-step::after { content: ""; position: absolute; inset-inline-start: calc(-2.6rem + 7px); top: calc(1.5rem + 7px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent-secondary); } .hp-collect-step:hover::before { border-color: var(--accent-secondary); transform: scale(1.14); } .hp-collect-step strong { display: block; font-family: "Manrope", sans-serif; font-size: 15.5px; font-weight: 700; color: #fff; } .hp-collect-step span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.66); } .hp-collect-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.4rem; } .hp-collect-visual { position: relative; } .hp-collect-visual .pp-arch { height: 560px; border-radius: 280px 280px 32px 32px; } .hp-collect-visual .pp-float { inset-inline-start: -28px; bottom: 90px; } .hp-collect-visual .pp-float.top { inset-inline-start: auto; inset-inline-end: -20px; bottom: auto; top: 60px; } .hp-collect-badge { position: absolute; z-index: 3; inset-inline-end: 24px; bottom: 26px; display: flex; flex-direction: column; gap: 2px; padding: 18px 26px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; text-align: center; box-shadow: 0 20px 44px rgba(0,0,0,.25); } .hp-collect-badge b { font-family: "Manrope", sans-serif; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; } .hp-collect-badge small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; } /* ============================================================ HP 8 — HOW PACKAGE BOOKING WORKS (flowing timeline) ============================================================ */ .hp-book-section { padding: 5rem 0; background: var(--bg-primary); } .hp-book-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 1rem; } .hp-book-track::before { content: ""; position: absolute; top: 40px; inset-inline: 8%; height: 1px; background: repeating-linear-gradient(90deg, var(--border-medium) 0 10px, transparent 10px 20px); } .hp-book-step { position: relative; text-align: center; padding: 0 .6rem; } .hp-book-dial { position: relative; z-index: 1; display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 1.6rem; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 22px; transition: all var(--transition-slow); } .hp-book-dial b { position: absolute; top: -6px; inset-inline-end: -6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; } .hp-book-step:hover .hp-book-dial { transform: translateY(-6px); border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 22px 46px rgba(20,155,215,.3); } .hp-book-step h4 { font-size: 1.08rem; } .hp-book-step p { margin-top: 10px; font-size: 13.5px; line-height: 1.8; } .hp-book-step em { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-secondary); } .hp-book-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; margin-top: 3.6rem; padding-top: 2rem; border-top: 1px solid var(--border-light); } .hp-book-foot p { font-size: 14px; max-width: 520px; } /* ============================================================ HP 9 — REPORTS & TURNAROUND TIME ============================================================ */ .hp-reports-section { padding: 5rem 0; background: var(--bg-secondary); } .hp-reports-layout { display: grid; grid-template-columns: 1.16fr .84fr; gap: 4rem; align-items: start; } .hp-reports-rows { border-top: 1px solid var(--border-medium); } .hp-reports-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1.8rem; align-items: center; padding: 1.35rem .3rem; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-base); } .hp-reports-row:hover { padding-inline-start: 1rem; } .hp-reports-row.head { border-bottom-color: var(--border-medium); } .hp-reports-row.head span { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .hp-reports-name { display: flex; align-items: center; gap: 13px; } .hp-reports-name i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-primary); font-size: 13px; } .hp-reports-name strong { display: block; font-family: "Manrope", sans-serif; font-size: 14.5px; font-weight: 700; color: var(--text-primary); } .hp-reports-name small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); } .hp-reports-time { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: linear-gradient(120deg, rgba(20,155,215,.12), rgba(25,199,181,.12)); color: var(--accent-primary); font-family: "Manrope", sans-serif; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .hp-reports-mode { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } .hp-reports-aside { position: relative; } .hp-reports-aside .pp-leaf { height: 280px; } .hp-reports-aside .pp-float { inset-inline-start: 20px; bottom: -16px; } .hp-reports-points { margin-top: 3.4rem; } .hp-reports-point { display: flex; gap: 14px; padding: 1.15rem 0; border-bottom: 1px solid var(--border-light); } .hp-reports-point i { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 13px; } .hp-reports-point strong { display: block; font-family: "Manrope", sans-serif; font-size: 14px; color: var(--text-primary); } .hp-reports-point span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.7; color: var(--text-secondary); } /* ============================================================ HP 10 — FINAL BOOK A PACKAGE CTA ============================================================ */ .hp-cta-section { position: relative; padding: 5.5rem 0; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; overflow: hidden; text-align: center; } .hp-cta-section::before, .hp-cta-section::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); pointer-events: none; } .hp-cta-section::before { width: 420px; height: 420px; inset-inline-start: -150px; top: -170px; } .hp-cta-section::after { width: 340px; height: 340px; inset-inline-end: -130px; bottom: -160px; } .hp-cta-inner { position: relative; z-index: 2; max-width: 780px; margin-inline: auto; } .hp-cta-inner .section-eyebrow { justify-content: center; color: rgba(255,255,255,.9); } .hp-cta-inner .section-eyebrow span { background: rgba(255,255,255,.75); } .hp-cta-inner h2 { color: #fff; font-size: clamp(2.1rem, 3.4vw, 3.1rem); } .hp-cta-inner p { margin-top: 16px; color: rgba(255,255,255,.86); font-size: 15.5px; line-height: 1.85; } .hp-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 2.4rem; } .hp-cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 2.6rem; margin-top: 2.8rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.24); } .hp-cta-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); } /* ============================================================ CF 2 — ACCREDITATIONS & CERTIFICATIONS (seal rail + stage) ============================================================ */ .cf-accred-section { position: relative; padding: 5rem 0; background: var(--bg-primary); overflow: hidden; } .cf-accred-section .pp-orbit { width: 600px; height: 600px; inset-inline-start: -260px; bottom: -220px; } .cf-seal-rail { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-bottom: 3.6rem; } .cf-seal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 150px; padding: 1.4rem .6rem; border-radius: 999px 999px 26px 26px; cursor: pointer; transition: all var(--transition-slow); } .cf-seal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--border-light); opacity: 0; transition: opacity var(--transition-base); } .cf-seal:hover::before { opacity: 1; } .cf-seal-ring { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; border: 1px dashed var(--border-medium); color: var(--accent-primary); font-size: 28px; transition: all var(--transition-slow); } .cf-seal-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--accent-soft); z-index: -1; transition: all var(--transition-base); } .cf-seal span { font-family: "Manrope", sans-serif; font-size: 13.5px; font-weight: 700; color: var(--text-primary); text-align: center; } .cf-seal small { font-size: 11.5px; color: var(--text-muted); text-align: center; } .cf-seal:hover .cf-seal-ring { transform: translateY(-6px) rotate(6deg); } .cf-seal.active .cf-seal-ring { border-style: solid; border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 22px 48px rgba(20,155,215,.32); } .cf-seal.active .cf-seal-ring::after { inset: 0; background: transparent; } .cf-seal.active span { color: var(--accent-primary); } .cf-accred-stage { position: relative; z-index: 1; min-height: 420px; } .cf-accred-panel { display: none; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; } .cf-accred-panel.active { display: grid; animation: cfFade .65s cubic-bezier(.22,1,.36,1); } @keyframes cfFade { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .cf-accred-copy .cf-accred-id { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .cf-accred-copy h3 { margin-top: 18px; font-size: clamp(1.7rem, 2.6vw, 2.4rem); } .cf-accred-copy > p { margin-top: 14px; max-width: 540px; font-size: 14.5px; line-height: 1.85; } .cf-accred-meta { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 2rem; padding-top: 1.7rem; border-top: 1px solid var(--border-light); } .cf-accred-meta div small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .cf-accred-meta div strong { display: block; margin-top: 6px; font-family: "Manrope", sans-serif; font-size: 15px; color: var(--text-primary); } .cf-accred-points { margin-top: 1.8rem; } .cf-accred-points li { display: flex; align-items: flex-start; gap: 12px; padding: .7rem 0; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); } .cf-accred-points li + li { border-top: 1px dashed var(--border-light); } .cf-accred-points li i { flex: 0 0 auto; margin-top: 4px; color: var(--accent-secondary); font-size: 12px; } .cf-accred-visual { position: relative; } .cf-accred-visual .pp-arch { height: 420px; border-radius: 230px 230px 30px 30px; } .cf-accred-visual .pp-float { inset-inline-start: 50%; transform: translateX(-50%); bottom: 24px; white-space: nowrap; } /* ============================================================ CF 3 — QUALITY STANDARDS & COMPLIANCE ============================================================ */ .cf-standards-section { padding: 5rem 0; background: var(--bg-secondary); } .cf-standards-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 4.5rem; align-items: start; } .cf-standards-aside { position: sticky; top: 120px; } .cf-standards-aside .cf-standards-figure { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--border-light); } .cf-standards-figure strong { display: block; font-family: "Manrope", sans-serif; font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .cf-standards-figure span { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted); } .cf-standards-list { border-top: 1px solid var(--border-medium); } .cf-standard-row { display: flex; align-items: flex-start; gap: 1.8rem; padding: 1.9rem .3rem; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-slow); } .cf-standard-row:hover { padding-inline-start: 1.3rem; } .cf-standard-row:hover .pp-num { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 14px 32px rgba(20,155,215,.26); } .cf-standard-copy h4 { font-size: 1.12rem; } .cf-standard-copy p { margin-top: 9px; font-size: 14px; line-height: 1.8; } .cf-standard-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; } .cf-standard-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border-light); font-size: 12px; font-weight: 600; color: var(--text-muted); } .cf-standard-tags span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-secondary); } /* ============================================================ CF 4 — LABORATORY QUALITY & SAFETY ============================================================ */ .cf-safety-section { position: relative; padding: 5rem 0; background: linear-gradient(140deg, var(--brand-deep) 0%, var(--brand-navy) 58%, #0d3f63 100%); color: #fff; overflow: hidden; } .cf-safety-section::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle at 25% 25%, rgba(0,0,0,.9), transparent 68%); mask-image: radial-gradient(circle at 25% 25%, rgba(0,0,0,.9), transparent 68%); } .cf-safety-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .95fr 1.05fr; gap: 4.5rem; align-items: center; } .cf-safety-visual { position: relative; } .cf-safety-visual .pp-arch { height: 540px; border-radius: 270px 270px 32px 32px; } .cf-safety-visual .pp-float { inset-inline-end: -26px; bottom: 110px; } .cf-safety-visual .pp-float.alt { inset-inline-end: auto; inset-inline-start: -22px; bottom: auto; top: 80px; } .cf-safety-copy .section-eyebrow { color: var(--accent-secondary); } .cf-safety-copy .section-eyebrow span { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); } .cf-safety-copy h2 { color: #fff; font-size: clamp(2.1rem, 3.2vw, 3rem); } .cf-safety-copy > p { margin-top: 16px; max-width: 520px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.85; } .cf-safety-list { margin-top: 2.4rem; } .cf-safety-item { display: flex; gap: 1.2rem; padding: 1.25rem 0; } .cf-safety-item + .cf-safety-item { border-top: 1px solid rgba(255,255,255,.1); } .cf-safety-item i { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: var(--accent-secondary); font-size: 16px; transition: all var(--transition-base); } .cf-safety-item:hover i { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-color: transparent; color: #fff; transform: translateY(-3px); } .cf-safety-item strong { display: block; font-family: "Manrope", sans-serif; font-size: 15px; color: #fff; } .cf-safety-item span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.66); } .cf-safety-meter { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.16); } .cf-safety-meter div strong { display: block; font-family: "Manrope", sans-serif; font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -.03em; } .cf-safety-meter div span { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); } /* ============================================================ CF 5 — ADVANCED EQUIPMENT & TECHNOLOGY ============================================================ */ .cf-tech-section { padding: 5rem 0; background: var(--bg-primary); } .cf-tech-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 3rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--border-light); } .cf-tech-tab { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--border-light); color: var(--text-secondary); font-family: "Manrope", sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all var(--transition-base); } .cf-tech-tab i { font-size: 14px; color: var(--accent-primary); transition: color var(--transition-base); } .cf-tech-tab:hover { border-color: var(--border-accent); transform: translateY(-2px); } .cf-tech-tab.active { border-color: transparent; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 16px 34px rgba(7,155,196,.26); } .cf-tech-tab.active i { color: #fff; } .cf-tech-stage { position: relative; min-height: 440px; } .cf-tech-panel { display: none; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; } .cf-tech-panel.active { display: grid; animation: cfFade .65s cubic-bezier(.22,1,.36,1); } .cf-tech-visual { position: relative; } .cf-tech-visual .pp-leaf { height: 420px; border-radius: 20px 20px 20px 20px; } .cf-tech-visual .pp-float { inset-inline-end: -24px; bottom: 34px; } .cf-tech-copy h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); } .cf-tech-copy > p { margin-top: 14px; max-width: 520px; font-size: 14.5px; line-height: 1.85; } .cf-tech-specs { margin-top: 2rem; border-top: 1px solid var(--border-light); } .cf-tech-specs li { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: .95rem .2rem; border-bottom: 1px solid var(--border-light); font-size: 13.5px; } .cf-tech-specs li small { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; color: var(--text-muted); } .cf-tech-specs li strong { font-family: "Manrope", sans-serif; font-weight: 700; color: var(--text-primary); text-align: end; } .cf-tech-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2rem; } /* ============================================================ CF 6 — QUALITY CONTROL & ACCURATE TESTING ============================================================ */ .cf-qc-section { padding: 5rem 0; background: var(--bg-secondary); } .cf-qc-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem; margin-top: 1rem; } .cf-qc-flow::before { content: ""; position: absolute; top: 34px; inset-inline: 9%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-medium) 15%, var(--border-medium) 85%, transparent); } .cf-qc-node { position: relative; text-align: center; } .cf-qc-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 1.3rem; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 18px; transition: all var(--transition-slow); } .cf-qc-node:hover .cf-qc-dot { transform: translateY(-6px) scale(1.06); border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 20px 42px rgba(20,155,215,.28); } .cf-qc-node strong { display: block; font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } .cf-qc-node span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.75; color: var(--text-secondary); } .cf-qc-band { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--border-light); } .cf-qc-stats { display: flex; flex-wrap: wrap; gap: 2.8rem; } .cf-qc-stats div strong { display: block; font-family: "Manrope", sans-serif; font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .cf-qc-stats div span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } .cf-qc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: flex-end; } /* ============================================================ RESPONSIVE — TABLET (<=1023px) ============================================================ */ @media (max-width: 1023px) { .pp-head { margin-bottom: 2.8rem; } .hp-finder-section { padding: 4rem 0 3.4rem; } .hp-finder-top { flex-direction: column; align-items: flex-start; gap: 1.4rem; } .hp-search-bar { height: auto; flex-wrap: wrap; padding: 14px; border-radius: 30px; gap: 10px; } .hp-search-bar > i { margin-inline-start: 10px; } .hp-search-bar input { height: 44px; flex: 1 1 200px; } .hp-search-divider { display: none; } .hp-search-select { flex: 1 1 200px; min-width: 0; height: 48px; padding-inline: 14px; border: 1px solid var(--border-light); border-radius: 999px; } .hp-search-submit { flex: 1 1 100%; justify-content: center; } .hp-search-note { padding-inline-start: 14px; } .hp-featured-layout { grid-template-columns: 1fr; gap: 2.8rem; } .hp-featured-stage { min-height: 0; } .hp-panel-media { height: 300px; border-radius: 170px 170px 26px 26px; } .hp-need-row { grid-template-columns: 96px 1fr auto; gap: 1.5rem; } .hp-need-medallion { width: 84px; height: 84px; } .hp-need-desc { grid-column: 2 / -1; } .hp-params-layout, .hp-who-layout, .hp-collect-layout, .hp-reports-layout, .cf-accred-panel, .cf-standards-layout, .cf-safety-layout, .cf-tech-panel, .cf-qc-band { grid-template-columns: 1fr; gap: 3rem; } .hp-params-aside, .hp-who-aside, .cf-standards-aside { position: static; } .hp-who-aside .pp-arch, .hp-collect-visual .pp-arch, .cf-safety-visual .pp-arch, .cf-accred-visual .pp-arch { height: 420px; } .cf-safety-layout .cf-safety-visual { order: 2; } .hp-reports-aside .pp-float { inset-inline-start: 20px; bottom: 20px; } .hp-book-track { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1.6rem; } .hp-book-track::before { display: none; } .cf-qc-flow { grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1.4rem; } .cf-qc-flow::before { display: none; } .cf-qc-cta { justify-content: flex-start; } .cf-tech-visual .pp-leaf { height: 360px; } } /* ============================================================ RESPONSIVE — MOBILE (<=766px) ============================================================ */ @media (max-width: 766px) { .pp-head { margin-bottom: 2.2rem; } .pp-head h2 { font-size: 2rem; } .pp-head p { font-size: 14px; } .pp-btn { width: 100%; justify-content: center; min-height: 52px; } .pp-float { padding: 11px 16px; gap: 11px; } .pp-float i, .pp-float svg { width: 30px; height: 30px; font-size: 12px; } .pp-float strong { font-size: 12.5px; } .pp-float small { font-size: 10px; } .pp-num { width: 46px; height: 46px; font-size: 12.5px; } /* HP 2 */ .hp-finder-section { padding: 3.4rem 0 3rem; } .hp-finder-top h2 { font-size: 1.8rem; } .hp-finder-count b { font-size: 1.6rem; } .hp-cat-rail { gap: 9px; margin-top: 1.8rem; } .hp-cat-chip { height: 52px; padding: 0 18px 0 8px; } .hp-cat-chip em { width: 34px; height: 34px; font-size: 12.5px; } /* HP 3 */ .hp-featured-section { padding: 3.6rem 0; } .hp-featured-item { gap: 13px; padding: 1.2rem .2rem; } .hp-featured-item:hover { padding-inline-start: .2rem; } .hp-featured-tick { width: 40px; height: 40px; font-size: 13px; } .hp-featured-copy strong { font-size: 14px; } .hp-featured-copy small { font-size: 11.5px; } .hp-panel-media { height: 250px; border-radius: 130px 130px 22px 22px; } .hp-panel-tag { font-size: 10.5px; padding: 7px 15px; } .hp-panel-headline { inset-inline: 20px; bottom: 20px; } .hp-panel-headline h3 { font-size: 1.45rem; } .hp-panel-headline p { font-size: 12.5px; } .hp-panel-facts { gap: 1.2rem 1.8rem; margin-top: 1.5rem; } .hp-panel-facts strong { font-size: 1.15rem; } .hp-panel-includes li { font-size: 11.5px; padding: 8px 14px; } .hp-panel-foot { flex-direction: column; align-items: stretch; gap: 1.2rem; } .hp-panel-actions { flex-direction: column; } /* HP 4 */ .hp-need-section { padding: 3.6rem 0; } .hp-need-row { grid-template-columns: 68px 1fr; gap: 1rem 1.1rem; padding: 1.5rem .2rem; } .hp-need-row:hover { padding-inline-start: .2rem; } .hp-need-medallion { width: 64px; height: 64px; } .hp-need-title h3 { font-size: 1.12rem; } .hp-need-desc { grid-column: 1 / -1; } .hp-need-desc p { font-size: 13px; } .hp-need-go { grid-column: 1 / -1; justify-self: start; width: 48px; height: 48px; font-size: 13px; } /* HP 5 */ .hp-params-section { padding: 3.6rem 0; } .hp-params-aside .pp-leaf { height: 220px; border-radius: 120px 24px 120px 24px; } .hp-param-head { gap: .9rem; padding: 1.25rem .1rem; } .hp-param-index { font-size: 11px; } .hp-param-name { font-size: 14.5px; } .hp-param-count { display: none; } .hp-param-toggle { width: 36px; height: 36px; font-size: 11.5px; } .hp-param-item.open .hp-param-body { max-height: 1200px; } .hp-param-inner > p { font-size: 13px; } .hp-param-chips span { font-size: 11.5px; padding: 7px 13px; } .hp-param-facts { gap: 1.2rem 2rem; } /* HP 6 */ .hp-who-section { padding: 3.6rem 0; } .hp-who-section .pp-orbit { display: none; } .hp-who-aside .pp-arch { height: 300px; border-radius: 150px 150px 24px 24px; } .hp-who-rail { padding-inline-start: 0; } .hp-who-rail::before { display: none; } .hp-who-item { flex-direction: column; gap: .9rem; } .hp-who-item .pp-num { margin-inline-start: 0; } .hp-who-item h4 { font-size: 1.02rem; } .hp-who-item p { font-size: 13px; } /* HP 7 */ .hp-collect-section { padding: 3.6rem 0; } .hp-collect-copy h2 { font-size: 2rem; } .hp-collect-copy > p { font-size: 13.5px; } .hp-collect-steps { padding-inline-start: 2.1rem; margin-top: 2rem; } .hp-collect-steps::before { inset-inline-start: 9px; } .hp-collect-step::before { inset-inline-start: -2.1rem; width: 19px; height: 19px; } .hp-collect-step::after { inset-inline-start: calc(-2.1rem + 6px); top: calc(1.5rem + 6px); width: 7px; height: 7px; } .hp-collect-step strong { font-size: 14px; } .hp-collect-step span { font-size: 12.5px; } .hp-collect-actions { flex-direction: column; } .hp-collect-visual .pp-arch { height: 340px; border-radius: 170px 170px 24px 24px; } .hp-collect-visual .pp-float { position: static; transform: none; margin-top: 1.2rem; } .hp-collect-visual .pp-float.top { position: static; } .hp-collect-badge { inset-inline-end: 14px; bottom: 14px; padding: 12px 18px; } .hp-collect-badge b { font-size: 1.1rem; } /* HP 8 */ .hp-book-section { padding: 3.6rem 0; } .hp-book-track { grid-template-columns: 1fr; gap: 0; } .hp-book-step { display: grid; grid-template-columns: 62px 1fr; gap: 1.1rem; text-align: start; padding: 1.4rem 0; border-bottom: 1px solid var(--border-light); } .hp-book-step:first-child { border-top: 1px solid var(--border-light); } .hp-book-dial { width: 58px; height: 58px; margin: 0; font-size: 17px; } .hp-book-dial b { width: 24px; height: 24px; font-size: 11px; } .hp-book-step h4 { font-size: 1rem; } .hp-book-step p { font-size: 13px; margin-top: 7px; } .hp-book-foot { flex-direction: column; align-items: stretch; margin-top: 2.4rem; } /* HP 9 */ .hp-reports-section { padding: 3.6rem 0; } .hp-reports-row { grid-template-columns: 1fr auto; gap: .8rem 1rem; padding: 1.15rem .1rem; } .hp-reports-row:hover { padding-inline-start: .1rem; } .hp-reports-row.head { display: none; } .hp-reports-name i { width: 34px; height: 34px; font-size: 12px; } .hp-reports-name strong { font-size: 13.5px; } .hp-reports-time { font-size: 11.5px; padding: 7px 14px; } .hp-reports-mode { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted); } .hp-reports-aside .pp-leaf { height: 230px; border-radius: 120px 24px 120px 24px; } .hp-reports-points { margin-top: 2.4rem; } /* HP 10 */ .hp-cta-section { padding: 4rem 0; } .hp-cta-inner h2 { font-size: 2rem; } .hp-cta-inner p { font-size: 14px; } .hp-cta-actions { flex-direction: column; width: 100%; } .hp-cta-trust { gap: 1rem 1.6rem; margin-top: 2.2rem; } .hp-cta-trust span { font-size: 12px; } /* CF 2 */ .cf-accred-section { padding: 3.6rem 0; } .cf-seal-rail { gap: .8rem; margin-bottom: 2.6rem; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; } .cf-seal-rail::-webkit-scrollbar { display: none; } .cf-seal { flex: 0 0 auto; width: 124px; padding: 1rem .4rem; } .cf-seal-ring { width: 74px; height: 74px; font-size: 22px; } .cf-seal span { font-size: 12.5px; } .cf-seal small { font-size: 10.5px; } .cf-accred-stage { min-height: 0; } .cf-accred-copy h3 { font-size: 1.6rem; } .cf-accred-copy > p { font-size: 13.5px; } .cf-accred-meta { gap: 1.2rem 2rem; } .cf-accred-visual .pp-arch { height: 300px; border-radius: 150px 150px 24px 24px; } /* CF 3 */ .cf-standards-section { padding: 3.6rem 0; } .cf-standards-figure strong { font-size: 2.1rem; } .cf-standard-row { flex-direction: column; gap: 1rem; padding: 1.6rem .2rem; } .cf-standard-row:hover { padding-inline-start: .2rem; } .cf-standard-copy p { font-size: 13px; } /* CF 4 */ .cf-safety-section { padding: 3.6rem 0; } .cf-safety-copy h2 { font-size: 2rem; } .cf-safety-copy > p { font-size: 13.5px; } .cf-safety-visual .pp-arch { height: 330px; border-radius: 165px 165px 24px 24px; } .cf-safety-visual .pp-float, .cf-safety-visual .pp-float.alt { position: static; margin-top: 1.1rem; } .cf-safety-item i { width: 42px; height: 42px; font-size: 14px; } .cf-safety-item strong { font-size: 14px; } .cf-safety-item span { font-size: 12.5px; } .cf-safety-meter { gap: 1.4rem 2rem; } .cf-safety-meter div strong { font-size: 1.4rem; } /* CF 5 */ .cf-tech-section { padding: 3.6rem 0; } .cf-tech-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; } .cf-tech-nav::-webkit-scrollbar { display: none; } .cf-tech-tab { flex: 0 0 auto; height: 46px; padding: 0 18px; font-size: 12.5px; } .cf-tech-stage { min-height: 0; } .cf-tech-visual .pp-leaf { height: 260px; border-radius: 130px 26px 130px 26px; } .cf-tech-visual .pp-float { position: static; margin-top: 1.1rem; } .cf-tech-copy h3 { font-size: 1.6rem; } .cf-tech-copy > p { font-size: 13.5px; } .cf-tech-specs li { font-size: 12.5px; padding: .85rem .1rem; } .cf-tech-foot { flex-direction: column; align-items: stretch; } /* CF 6 */ .cf-qc-section { padding: 3.6rem 0; } .cf-qc-flow { grid-template-columns: 1fr; gap: 0; } .cf-qc-node { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; text-align: start; padding: 1.3rem 0; border-bottom: 1px solid var(--border-light); } .cf-qc-node:first-child { border-top: 1px solid var(--border-light); } .cf-qc-dot { width: 52px; height: 52px; margin: 0; font-size: 15px; } .cf-qc-node span { font-size: 12.5px; margin-top: 6px; } .cf-qc-band { margin-top: 2.6rem; padding-top: 2.2rem; gap: 2rem; } .cf-qc-stats { gap: 1.6rem 2.4rem; } .cf-qc-stats div strong { font-size: 1.8rem; } .cf-qc-cta { flex-direction: column; align-items: stretch; } } /* ============================================================ RESPONSIVE — SMALL MOBILE (<=380px) ============================================================ */ @media (max-width: 380px) { .hp-need-row { grid-template-columns: 1fr; } .hp-need-medallion { width: 72px; height: 72px; } .hp-panel-facts { gap: 1rem 1.4rem; } .cf-seal { width: 110px; } } /* ============================================================================================ HEALTHLAB — REPORTS & TURNAROUND + PACKAGE DETAILS PAGES Premium editorial layout system (no boxed card grids) ============================================================================================ */ /* ============================================================ SHARED — ADDITIONAL PREMIUM PRIMITIVES ============================================================ */ .pp-ring { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(var(--accent-primary) 0deg, var(--accent-secondary) var(--ring-deg, 180deg), var(--border-light) var(--ring-deg, 180deg) 360deg); transition: transform var(--transition-slow); } .pp-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg-primary); } .pp-ring span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; } .pp-ring strong { font-family: "Manrope", sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.03em; line-height: 1; } .pp-ring small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .pp-quote { position: relative; padding-inline-start: 1.6rem; font-family: "Manrope", sans-serif; font-size: 15px; line-height: 1.8; color: var(--text-secondary); } .pp-quote::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary)); } .pp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-primary); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* ============================================================ RT 2 — REPORT TURNAROUND TIMES ============================================================ */ .rt-times-section { position: relative; padding: 5rem 0; background: var(--bg-primary); overflow: hidden; } .rt-times-section .pp-orbit { width: 560px; height: 560px; inset-inline-end: -240px; top: 8%; } .rt-times-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 4.5rem; align-items: start; } .rt-times-aside { position: sticky; top: 120px; } .rt-times-aside .pp-quote { margin-top: 2rem; padding-top: 0; } .rt-times-aside .pp-btn { margin-top: 2rem; } .rt-tier-list { border-top: 1px solid var(--border-medium); } .rt-tier { display: flex; align-items: center; gap: 2.2rem; padding: 2.2rem .4rem; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-slow); } .rt-tier:hover { padding-inline-start: 1.4rem; } .rt-tier:hover .pp-ring { transform: scale(1.04); } .rt-tier-copy { flex: 1; min-width: 0; } .rt-tier-copy .pp-pill { margin-bottom: 12px; } .rt-tier-copy h3 { font-size: 1.32rem; } .rt-tier-copy p { margin-top: 9px; font-size: 14px; line-height: 1.8; } .rt-tier-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; } .rt-tier-tags span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .rt-tier-tags span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-secondary); } /* ============================================================ RT 3 — TEST-WISE REPORTING TIMELINE ============================================================ */ .rt-timeline-section { padding: 5rem 0; background: var(--bg-secondary); } .rt-filter-rail { display: flex; align-items: center; gap: 10px; margin-bottom: 2.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--border-light); overflow-x: auto; scrollbar-width: none; } .rt-filter-rail::-webkit-scrollbar { display: none; } .rt-filter-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-elevated); color: var(--text-secondary); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: all var(--transition-base); } .rt-filter-chip i { font-size: 12.5px; color: var(--accent-primary); transition: color var(--transition-base); } .rt-filter-chip:hover { border-color: var(--border-accent); transform: translateY(-2px); } .rt-filter-chip.active { border-color: transparent; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 16px 34px rgba(7,155,196,.24); } .rt-filter-chip.active i { color: #fff; } .rt-band { position: relative; padding-inline-start: 3.2rem; } .rt-band + .rt-band { margin-top: 3rem; } .rt-band::before { content: ""; position: absolute; inset-inline-start: 13px; top: 46px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--accent-primary), transparent); opacity: .45; } .rt-band-head { display: flex; align-items: center; gap: 14px; margin-bottom: .4rem; } .rt-band-head::before { content: ""; position: absolute; inset-inline-start: 4px; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--border-accent); background: var(--bg-secondary); } .rt-band-head::after { content: ""; position: absolute; inset-inline-start: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-primary); } .rt-band-head strong { font-family: "Manrope", sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; } .rt-band-head em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-secondary); } .rt-test-row { display: grid; grid-template-columns: 1.3fr .9fr auto auto; gap: 1.6rem; align-items: center; padding: 1.15rem .3rem; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-base); } .rt-test-row:hover { padding-inline-start: .9rem; } .rt-test-row:first-of-type { border-top: 1px solid var(--border-light); } .rt-test-name strong { display: block; font-family: "Manrope", sans-serif; font-size: 14.5px; font-weight: 700; color: var(--text-primary); } .rt-test-name small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); } .rt-test-sample { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } .rt-test-time { display: inline-flex; align-items: center; gap: 8px; padding: 8px 17px; border-radius: 999px; background: linear-gradient(120deg, rgba(20,155,215,.12), rgba(25,199,181,.12)); color: var(--accent-primary); font-family: "Manrope", sans-serif; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .rt-test-mode { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .rt-empty { display: none; padding: 2.4rem 0; font-size: 14px; color: var(--text-muted); } .rt-empty.visible { display: block; } /* ============================================================ RT 4 — TRACK YOUR REPORT ============================================================ */ .rt-track-section { position: relative; padding: 5rem 0; background: linear-gradient(140deg, var(--brand-deep) 0%, var(--brand-navy) 58%, #0d3f63 100%); color: #fff; overflow: hidden; } .rt-track-section::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle at 30% 20%, rgba(0,0,0,.9), transparent 70%); mask-image: radial-gradient(circle at 30% 20%, rgba(0,0,0,.9), transparent 70%); } .rt-track-inner { position: relative; z-index: 1; max-width: 900px; margin-inline: auto; text-align: center; } .rt-track-inner .section-eyebrow { justify-content: center; color: var(--accent-secondary); } .rt-track-inner .section-eyebrow span { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); } .rt-track-inner h2 { color: #fff; font-size: clamp(2.1rem, 3.2vw, 3rem); } .rt-track-inner > p { margin-top: 16px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.85; } .rt-track-form { display: flex; align-items: center; gap: 12px; height: 74px; margin: 2.4rem auto 0; padding: 0 10px 0 26px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); transition: border-color var(--transition-base); } .rt-track-form:focus-within { border-color: var(--accent-secondary); } .rt-track-form > i { font-size: 16px; color: var(--accent-secondary); } .rt-track-form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font-size: 15px; outline: none; } .rt-track-form input::placeholder { color: rgba(255,255,255,.5); } .rt-track-submit { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; background: #fff;font-family: "Manrope", sans-serif; font-size: 13.5px; font-weight: 700; transition: transform var(--transition-base); } .rt-track-submit:hover { transform: translateY(-2px); } .rt-track-hint { margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.55); } .rt-track-hint b { color: var(--accent-secondary); font-weight: 700; } .rt-track-result { max-width: 900px; margin: 3rem auto 0; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .5s ease, max-height .6s cubic-bezier(.22,1,.36,1); } .rt-track-result.visible { opacity: 1; max-height: 900px; } .rt-track-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 2.8rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.16); } .rt-track-meta div { text-align: center; } .rt-track-meta small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); } .rt-track-meta strong { display: block; margin-top: 5px; font-family: "Manrope", sans-serif; font-size: 15px; color: #fff; } .rt-stage-rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.6rem; } .rt-stage-rail::before { content: ""; position: absolute; top: 27px; inset-inline: 10%; height: 1px; background: rgba(255,255,255,.16); } .rt-stage-rail::after { content: ""; position: absolute; top: 27px; inset-inline-start: 10%; width: var(--rail-progress, 0%); max-width: 80%; height: 1px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transition: width 1s cubic-bezier(.22,1,.36,1); } .rt-stage { position: relative; text-align: center; } .rt-stage-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: var(--brand-deep); color: rgba(255,255,255,.5); font-size: 15px; transition: all var(--transition-slow); } .rt-stage.done .rt-stage-dot { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 16px 34px rgba(20,155,215,.32); } .rt-stage.current .rt-stage-dot { border-color: var(--accent-secondary); color: var(--accent-secondary); animation: rtPulse 1.8s ease-in-out infinite; } @keyframes rtPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(43,215,199,.35); } 50% { box-shadow: 0 0 0 12px rgba(43,215,199,0); } } .rt-stage strong { display: block; font-family: "Manrope", sans-serif; font-size: 13.5px; color: #fff; } .rt-stage span { display: block; margin-top: 5px; font-size: 11.5px; color: rgba(255,255,255,.55); } .rt-stage:not(.done):not(.current) strong { color: rgba(255,255,255,.45); } .rt-track-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 2.4rem; } /* ============================================================ RT 5 — DIGITAL REPORTS & PDF DOWNLOAD ============================================================ */ .rt-digital-section { padding: 5rem 0; background: var(--bg-primary); } .rt-digital-layout { display: grid; grid-template-columns: 1.02fr .98fr; gap: 4.5rem; align-items: start; } .rt-digital-visual { position: sticky; top: 120px; align-self: start; } .rt-digital-copy { max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; } .rt-digital-visual .pp-arch { height: 520px; border-radius: 260px 260px 32px 32px; } .rt-digital-visual .pp-float { inset-inline-end: -26px; bottom: 120px; } .rt-digital-visual .pp-float.alt { inset-inline-end: auto; inset-inline-start: -22px; bottom: auto; top: 70px; } .rt-digital-list { margin-top: 2.4rem; border-top: 1px solid var(--border-light); } .rt-digital-item { display: flex; gap: 1.2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-base); } .rt-digital-item:hover { padding-inline-start: .9rem; } .rt-digital-item i { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 15px; transition: all var(--transition-base); } .rt-digital-item:hover i { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; transform: translateY(-3px); } .rt-digital-item strong { display: block; font-family: "Manrope", sans-serif; font-size: 15px; color: var(--text-primary); } .rt-digital-item span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--text-secondary); } .rt-digital-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.2rem; } /* ============================================================ RT 6 — REPORT DELIVERY PROCESS ============================================================ */ .rt-process-section { padding: 5rem 0; background: var(--bg-secondary); } .rt-process-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; } .rt-process-track::before { content: ""; position: absolute; top: 38px; inset-inline: 9%; height: 1px; background: repeating-linear-gradient(90deg, var(--border-medium) 0 9px, transparent 9px 18px); } .rt-process-step { position: relative; text-align: center; } .rt-process-dial { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 20px; transition: all var(--transition-slow); } .rt-process-dial b { position: absolute; top: -5px; inset-inline-end: -5px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-family: "Manrope", sans-serif; font-size: 11.5px; font-weight: 800; } .rt-process-step:hover .rt-process-dial { transform: translateY(-6px); border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 22px 44px rgba(20,155,215,.3); } .rt-process-step h4 { font-size: 1.02rem; } .rt-process-step p { margin-top: 9px; font-size: 13px; line-height: 1.78; } .rt-process-step em { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-secondary); } /* ============================================================ RT 7 — DELAYED REPORT SUPPORT & ASSISTANCE ============================================================ */ .rt-support-section { padding: 5rem 0; background: var(--bg-primary); } .rt-support-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: start; } .rt-support-list { border-top: 1px solid var(--border-medium); } .rt-support-item { border-bottom: 1px solid var(--border-light); } .rt-support-q { width: 100%; display: flex; align-items: center; gap: 1.3rem; padding: 1.5rem .3rem; text-align: start; cursor: pointer; } .rt-support-q:hover .rt-support-label { color: var(--accent-primary); } .rt-support-index { flex: 0 0 auto; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accent-secondary); } .rt-support-label { flex: 1; min-width: 0; font-family: "Manrope", sans-serif; font-size: 15.5px; font-weight: 700; color: var(--text-primary); transition: color var(--transition-base); } .rt-support-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-light); color: var(--accent-primary); font-size: 12.5px; transition: all var(--transition-base); } .rt-support-item.open .rt-support-toggle { transform: rotate(135deg); border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; } .rt-support-a { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,1,.36,1); } .rt-support-item.open .rt-support-a { max-height: 420px; } .rt-support-a p { padding: 0 .3rem 1.6rem 3rem; font-size: 13.5px; line-height: 1.8; } .rt-help-panel { position: relative; padding: 2.6rem; border-radius: 20px 20px 20px 80px; background: linear-gradient(145deg, var(--button-primary), var(--accent-secondary)); color: #fff; overflow: hidden; } .rt-help-panel::before { content: ""; position: absolute; width: 260px; height: 260px; inset-inline-end: -110px; top: -110px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); } .rt-help-panel > * { position: relative; z-index: 1; } .rt-help-panel h3 { color: #fff; font-size: 1.6rem; } .rt-help-panel > p { margin-top: 12px; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.8; } .rt-help-contacts { margin-top: 1.8rem; } .rt-help-contact { display: flex; align-items: center; gap: 14px; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.22); } .rt-help-contact i { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 14px; } .rt-help-contact small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.7); } .rt-help-contact strong { display: block; margin-top: 3px; font-family: "Manrope", sans-serif; font-size: 15px; color: #fff; } .rt-help-panel .pp-btn { margin-top: 1.8rem; } /* ============================================================ RT 8 — FINAL TRACK / DOWNLOAD CTA ============================================================ */ .rt-cta-section { position: relative; padding: 5.5rem 0; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; overflow: hidden; text-align: center; } .rt-cta-section::before, .rt-cta-section::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); pointer-events: none; } .rt-cta-section::before { width: 420px; height: 420px; inset-inline-start: -150px; top: -170px; } .rt-cta-section::after { width: 340px; height: 340px; inset-inline-end: -130px; bottom: -160px; } .rt-cta-inner { position: relative; z-index: 2; max-width: 780px; margin-inline: auto; } .rt-cta-inner .section-eyebrow { justify-content: center; color: rgba(255,255,255,.9); } .rt-cta-inner .section-eyebrow span { background: rgba(255,255,255,.75); } .rt-cta-inner h2 { color: #fff; font-size: clamp(2.1rem, 3.4vw, 3.1rem); } .rt-cta-inner p { margin-top: 16px; color: rgba(255,255,255,.86); font-size: 15.5px; line-height: 1.85; } .rt-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 2.4rem; } .rt-cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 2.6rem; margin-top: 2.8rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.24); } .rt-cta-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); } /* ============================================================ RESPONSIVE — TABLET (<=1023px) ============================================================ */ @media (max-width: 1023px) { .rt-times-layout, .rt-digital-layout, .rt-support-layout { grid-template-columns: 1fr; gap: 3rem; } .rt-times-aside { position: static; } .rt-times-section .pp-orbit { display: none; } .rt-stage-rail { grid-template-columns: repeat(5, 1fr); gap: .6rem; } .rt-stage strong { font-size: 12px; } .rt-stage span { font-size: 10.5px; } .rt-process-track { grid-template-columns: repeat(3, 1fr); gap: 2.6rem 1.6rem; } .rt-process-track::before { display: none; } .rt-digital-visual .pp-arch { height: 420px; } .rt-digital-layout .rt-digital-visual { order: 2; } } /* ============================================================ RESPONSIVE — MOBILE (<=766px) ============================================================ */ @media (max-width: 766px) { .pp-ring { width: 100px; height: 100px; } .pp-ring::after { inset: 7px; } .pp-ring strong { font-size: 1.2rem; } .pp-ring small { font-size: 9.5px; } .pp-quote { font-size: 13.5px; padding-inline-start: 1.2rem; } /* RT 2 */ .rt-times-section { padding: 3.6rem 0; } .rt-tier { flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.7rem .2rem; } .rt-tier:hover { padding-inline-start: .2rem; } .rt-tier-copy h3 { font-size: 1.15rem; } .rt-tier-copy p { font-size: 13px; } /* RT 3 */ .rt-timeline-section { padding: 3.6rem 0; } .rt-filter-rail { gap: 8px; margin-bottom: 2rem; } .rt-filter-chip { height: 44px; padding: 0 17px; font-size: 12.5px; } .rt-band { padding-inline-start: 2.2rem; } .rt-band + .rt-band { margin-top: 2.2rem; } .rt-band::before { inset-inline-start: 9px; top: 40px; } .rt-band-head { flex-wrap: wrap; gap: 8px; } .rt-band-head::before { inset-inline-start: 1px; width: 17px; height: 17px; } .rt-band-head::after { inset-inline-start: 6px; } .rt-band-head strong { font-size: 1.02rem; } .rt-test-row { grid-template-columns: 1fr auto; gap: .7rem 1rem; padding: 1.05rem .1rem; } .rt-test-row:hover { padding-inline-start: .1rem; } .rt-test-name strong { font-size: 13.5px; } .rt-test-sample { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted); } .rt-test-time { font-size: 11.5px; padding: 7px 14px; } .rt-test-mode { display: none; } /* RT 4 */ .rt-track-section { padding: 3.6rem 0; } .rt-track-inner h2 { font-size: 2rem; } .rt-track-inner > p { font-size: 13.5px; } .rt-track-form { height: auto; flex-wrap: wrap; padding: 12px; border-radius: 26px; gap: 10px; } .rt-track-form > i { margin-inline-start: 10px; } .rt-track-form input { flex: 1 1 180px; height: 42px; } .rt-track-submit { flex: 1 1 100%; justify-content: center; } .rt-track-meta { gap: 1rem 1.8rem; } .rt-track-meta strong { font-size: 13.5px; } .rt-stage-rail { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; } .rt-stage-rail::before, .rt-stage-rail::after { display: none; } .rt-stage { display: grid; grid-template-columns: 48px 1fr; gap: .9rem; text-align: start; align-items: center; padding: .95rem 0; border-bottom: 1px solid rgba(255,255,255,.1); } .rt-stage:first-child { border-top: 1px solid rgba(255,255,255,.1); } .rt-stage-dot { width: 44px; height: 44px; margin: 0; font-size: 13px; } .rt-stage span { margin-top: 3px; } .rt-track-actions { flex-direction: column; } /* RT 5 */ .rt-digital-section { padding: 3.6rem 0; } .rt-digital-visual .pp-arch { height: 320px; border-radius: 160px 160px 24px 24px; } .rt-digital-visual .pp-float, .rt-digital-visual .pp-float.alt { position: static; margin-top: 1.1rem; } .rt-digital-item i { width: 42px; height: 42px; font-size: 13px; } .rt-digital-item strong { font-size: 14px; } .rt-digital-item span { font-size: 12.5px; } .rt-digital-actions { flex-direction: column; } /* RT 6 */ .rt-process-section { padding: 3.6rem 0; } .rt-process-track { grid-template-columns: 1fr; gap: 0; } .rt-process-step { display: grid; grid-template-columns: 60px 1fr; gap: 1.1rem; text-align: start; padding: 1.35rem 0; border-bottom: 1px solid var(--border-light); } .rt-process-step:first-child { border-top: 1px solid var(--border-light); } .rt-process-dial { width: 56px; height: 56px; margin: 0; font-size: 16px; } .rt-process-dial b { width: 23px; height: 23px; font-size: 10.5px; } .rt-process-step p { font-size: 12.5px; } /* RT 7 */ .rt-support-section { padding: 3.6rem 0; } .rt-support-q { gap: .9rem; padding: 1.25rem .1rem; } .rt-support-label { font-size: 14px; } .rt-support-toggle { width: 34px; height: 34px; font-size: 11px; } .rt-support-a p { padding: 0 .1rem 1.3rem 2.2rem; font-size: 13px; } .rt-help-panel { padding: 1.8rem; border-radius: 30px 30px 30px 90px; } .rt-help-panel h3 { font-size: 1.35rem; } /* RT 8 */ .rt-cta-section { padding: 4rem 0; } .rt-cta-inner h2 { font-size: 2rem; } .rt-cta-inner p { font-size: 14px; } .rt-cta-actions { flex-direction: column; width: 100%; } .rt-cta-trust { gap: 1rem 1.6rem; margin-top: 2.2rem; } .rt-cta-trust span { font-size: 12px; } } /* ============================================================ RESPONSIVE — SMALL MOBILE (<=380px) ============================================================ */ @media (max-width: 380px) { .rt-track-meta { gap: 1rem 1.4rem; } } /* Grid-child wrappers */ .rt-digital-copy { min-width: 0; } /* ============================================================================================ HEALTHLAB — PACKAGE DETAILS (REDESIGNED) + HOME COLLECTION Editorial, non-boxed layout system ============================================================================================ */ /* ============================================================ PK 1 — EDITORIAL PACKAGE HERO ============================================================ */ .pk-hero { position: relative; padding: 11.5rem 0 0; background: linear-gradient(155deg, var(--brand-deep) 0%, var(--brand-navy) 52%, #0d3f63 100%); color: #fff; overflow: hidden; isolation: isolate; } .pk-hero::before { content: ""; position: absolute; inset: 0; opacity: .4; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: linear-gradient(200deg, rgba(0,0,0,.8), transparent 70%); mask-image: linear-gradient(200deg, rgba(0,0,0,.8), transparent 70%); } .pk-hero-glow { position: absolute; width: 520px; height: 520px; inset-inline-end: -200px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(25,199,181,.26) 0%, transparent 70%); filter: blur(12px); pointer-events: none; } .pk-hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: 4rem; align-items: center; padding-bottom: 3.4rem; } .pk-hero .page-breadcrumb { margin-bottom: 1.4rem; } .pk-hero .section-eyebrow { color: var(--accent-secondary); } .pk-hero .section-eyebrow span { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); } .pk-hero h1 { color: #fff; font-size: clamp(2.5rem, 4.4vw, 4.1rem); line-height: 1.1; letter-spacing: -.035em; } .pk-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--accent-secondary), #7fe3d8); -webkit-background-clip: text; background-clip: text; color: transparent; } .pk-hero-lead { max-width: 540px; margin-top: 18px; color: rgba(255,255,255,.74); font-size: 15.5px; line-height: 1.85; } .pk-hero-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-top: 2rem; font-family: "Manrope", sans-serif; } .pk-hero-price b { font-size: 2.8rem; font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1; } .pk-hero-price del { font-size: 17px; color: rgba(255,255,255,.55); } .pk-hero-price i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; background: rgba(43,215,199,.18); color: var(--accent-secondary); font-size: 12px; font-weight: 800; letter-spacing: .04em; } .pk-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 1.8rem; } /* Twin offset visual with orbit ring */ .pk-hero-visual { position: relative; min-height: 420px; } .pk-hero-orbit { position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); width: 430px; height: 430px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.2); animation: pkSpin 46s linear infinite; } .pk-hero-orbit::after { content: ""; position: absolute; top: 8px; inset-inline-start: 50%; width: 11px; height: 11px; margin-inline-start: -5px; border-radius: 50%; background: var(--accent-secondary); box-shadow: 0 0 18px rgba(43,215,199,.8); } @keyframes pkSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } .pk-hero-disc { position: absolute; overflow: hidden; border-radius: 50%; box-shadow: 0 34px 70px rgba(0,0,0,.35); } .pk-hero-disc img { width: 100%; height: 100%; object-fit: cover; } .pk-hero-disc.one { width: 250px; height: 250px; inset-inline-start: 6%; top: 4%; } .pk-hero-disc.two { width: 168px; height: 168px; inset-inline-end: 8%; bottom: 6%; border: 4px solid var(--brand-deep); } .pk-hero-chip { position: absolute; z-index: 3; inset-inline-end: 0; top: 46%; display: flex; align-items: center; gap: 11px; padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); } .pk-hero-chip i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-size: 12px; } .pk-hero-chip strong { display: block; font-family: "Manrope", sans-serif; font-size: 13.5px; color: #fff; } .pk-hero-chip small { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); } /* Spec ribbon */ .pk-ribbon { position: relative; z-index: 2; display: flex; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.16); } .pk-ribbon div { flex: 1 1 0; min-width: 150px; padding: 1.7rem 1.6rem; } .pk-ribbon div + div { border-inline-start: 1px solid rgba(255,255,255,.16); } .pk-ribbon small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); } .pk-ribbon strong { display: block; margin-top: 7px; font-family: "Manrope", sans-serif; font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.02em; } /* ============================================================ PK 2 — STICKY SECTION NAVIGATOR ============================================================ */ .pk-nav { position: sticky; top: 0; z-index: 900; background: var(--bg-primary); border-bottom: 1px solid var(--border-light); } .pk-nav-inner { display: flex; align-items: center; gap: 10px; height: 68px; overflow-x: auto; scrollbar-width: none; } .pk-nav-inner::-webkit-scrollbar { display: none; } .pk-nav-link { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 6px; color: var(--text-muted); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; white-space: nowrap; transition: color var(--transition-base); } .pk-nav-link + .pk-nav-link { margin-inline-start: 1.6rem; } .pk-nav-link::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transition: width var(--transition-slow); } .pk-nav-link:hover { color: var(--text-primary); } .pk-nav-link.active { color: var(--accent-primary); } .pk-nav-link.active::after { width: 100%; } /* ============================================================ PK 3 — AT A GLANCE + MARQUEE ============================================================ */ .pk-glance-section { position: relative; padding: 5rem 0 0; background: var(--bg-primary); overflow: hidden; } .pk-glance-layout { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: start; padding-bottom: 3.4rem; } .pk-glance-numeral { font-family: "Manrope", sans-serif; font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 800; line-height: .82; letter-spacing: -.06em; background: linear-gradient(160deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .22; align-self: center; } .pk-glance-copy h2 { font-size: clamp(1.9rem, 2.9vw, 2.7rem); max-width: 620px; } .pk-glance-copy > p { margin-top: 16px; max-width: 640px; font-size: 15px; line-height: 1.88; } .pk-glance-points { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; margin-top: 2rem; padding-top: 1.7rem; border-top: 1px solid var(--border-light); } .pk-glance-points div { max-width: 260px; } .pk-glance-points strong { display: flex; align-items: center; gap: 10px; font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } .pk-glance-points strong i { color: var(--accent-secondary); font-size: 12px; } .pk-glance-points span { display: block; margin-top: 7px; font-size: 13px; line-height: 1.7; color: var(--text-secondary); } .pk-marquee { position: relative; padding: 1.5rem 0; border-block: 1px solid var(--border-light); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .pk-marquee-track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: pkSlide 34s linear infinite; } .pk-marquee:hover .pk-marquee-track { animation-play-state: paused; } @keyframes pkSlide { to { transform: translateX(-50%); } } .pk-marquee-track span { display: inline-flex; align-items: center; gap: 12px; font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; letter-spacing: -.01em; } .pk-marquee-track span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); } .pk-marquee-track span:nth-child(even) { color: var(--text-muted); } /* ============================================================ PK 4 — PARAMETER ORBIT SELECTOR ============================================================ */ .pk-orbit-section { padding: 5rem 0; background: var(--bg-secondary); } .pk-orbit-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 4rem; align-items: center; } .pk-orbit-stage { position: relative; width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 1; } .pk-orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--border-medium); } .pk-orbit-ring.inner { inset: 19%; border-style: solid; border-color: var(--border-light); } .pk-orbit-core { position: absolute; inset: 30%; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, var(--button-primary), var(--accent-secondary)); color: #fff; text-align: center; box-shadow: 0 26px 60px rgba(7,155,196,.3); } .pk-orbit-core b { display: block; font-family: "Manrope", sans-serif; font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .pk-orbit-core small { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .88; } .pk-orbit-node { position: absolute; inset-inline-start: 50%; top: 50%; width: 0; height: 0; } .pk-orbit-node button { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-light); color: var(--accent-primary); font-size: 17px; cursor: pointer; transition: all var(--transition-slow); } .pk-orbit-node button:hover { transform: translate(-50%, -50%) scale(1.08); border-color: var(--border-accent); } .pk-orbit-node.active button { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 18px 38px rgba(20,155,215,.34); transform: translate(-50%, -50%) scale(1.12); } .pk-orbit-readout { position: relative; } .pk-orbit-panel { display: none; } .pk-orbit-panel.active { display: block; animation: pkFade .6s cubic-bezier(.22,1,.36,1); } @keyframes pkFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .pk-orbit-panel .pp-pill { margin-bottom: 14px; } .pk-orbit-panel h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); } .pk-orbit-panel > p { margin-top: 13px; max-width: 540px; font-size: 14.5px; line-height: 1.85; } .pk-orbit-values { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 1.6rem; } .pk-orbit-values span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-elevated); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); transition: all var(--transition-base); } .pk-orbit-values span:hover { border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-2px); } .pk-orbit-values span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-secondary); } .pk-orbit-foot { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 1.9rem; padding-top: 1.5rem; border-top: 1px dashed var(--border-medium); } .pk-orbit-foot div small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); } .pk-orbit-foot div strong { display: block; margin-top: 5px; font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } /* ============================================================ PK 5 — TICKET-STYLE PRICING ============================================================ */ .pk-ticket-section { padding: 5rem 0; background: var(--bg-primary); } .pk-ticket-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; } .pk-ticket { position: relative; padding: 2.6rem 2.4rem; border-radius: 30px; background: var(--bg-secondary); border: 1px solid var(--border-light); box-shadow: 0 34px 80px rgba(11,45,74,.1); } .pk-ticket::before, .pk-ticket::after { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--border-light); } .pk-ticket::before { inset-inline-start: -18px; top: 54%; clip-path: inset(0 0 0 50%); } .pk-ticket::after { inset-inline-end: -18px; top: 54%; clip-path: inset(0 50% 0 0); } .pk-ticket-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.4rem; } .pk-ticket-top h3 { font-size: 1.35rem; } .pk-ticket-top small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-muted); } .pk-ticket-code { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-primary); font-family: "Manrope", sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; } .pk-ticket-lines { margin-top: 1.8rem; } .pk-ticket-line { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .85rem 0; border-bottom: 1px dashed var(--border-medium); font-size: 13.5px; color: var(--text-secondary); } .pk-ticket-line b { font-family: "Manrope", sans-serif; font-weight: 700; color: var(--text-primary); } .pk-ticket-line.free b { color: var(--accent-secondary); } .pk-ticket-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border-medium); } .pk-ticket-total span { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); } .pk-ticket-total b { font-family: "Manrope", sans-serif; font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .pk-ticket .pp-btn { width: 100%; justify-content: center; margin-top: 1.6rem; } .pk-ticket-note { margin-top: 12px; text-align: center; font-size: 12px; color: var(--text-muted); } .pk-ticket-copy h2 { font-size: clamp(1.9rem, 2.9vw, 2.7rem); } .pk-ticket-copy > p { margin-top: 15px; max-width: 520px; font-size: 15px; line-height: 1.85; } .pk-ticket-list { margin-top: 2rem; border-top: 1px solid var(--border-light); } .pk-ticket-item { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-base); } .pk-ticket-item:hover { padding-inline-start: .8rem; } .pk-ticket-item i { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 13px; transition: all var(--transition-base); } .pk-ticket-item:hover i { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; } .pk-ticket-item strong { display: block; font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } .pk-ticket-item span { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); } /* ============================================================ PK 6 — PREPARATION HOUR RULER ============================================================ */ .pk-ruler-section { padding: 5rem 0; background: var(--bg-secondary); } .pk-ruler { position: relative; margin-top: 1rem; padding: 6rem 0; } .pk-ruler::before { content: ""; position: absolute; top: 50%; inset-inline: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--border-medium), var(--accent-primary), var(--accent-secondary)); } .pk-ruler-track { position: relative; display: flex; justify-content: space-between; } .pk-ruler-stop { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; } .pk-ruler-mark { position: relative; z-index: 2; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 16px; transition: all var(--transition-slow); } .pk-ruler-stop:hover .pk-ruler-mark { transform: scale(1.1); border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 20px 42px rgba(20,155,215,.3); } .pk-ruler-time { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -130%); z-index: 3; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-secondary); white-space: nowrap; } .pk-ruler-copy { position: absolute; width: min(240px, 90%); text-align: center; } .pk-ruler-copy strong { display: block; font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } .pk-ruler-copy span { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); } .pk-ruler-stop.up .pk-ruler-copy { bottom: calc(50% + 52px); } .pk-ruler-stop.up .pk-ruler-time, .pk-ruler-stop.down .pk-ruler-time { left: 50%; right: auto; inset-inline-start: 50%; inset-inline-end: auto; transform: translate(-50%, -130%); } .pk-ruler-stop.down .pk-ruler-copy { top: calc(50% + 52px); } .pk-ruler-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--border-light); } .pk-ruler-foot p { max-width: 560px; font-size: 13.5px; } /* ============================================================ PK 7 — ZIG-ZAG "WHO IT'S FOR" ============================================================ */ .pk-zig-section { padding: 5rem 0; background: var(--bg-primary); } .pk-zig { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; align-items: center; padding: 2.4rem 0; } .pk-zig + .pk-zig { border-top: 1px solid var(--border-light); } .pk-zig:nth-child(even) .pk-zig-media { order: 2; } .pk-zig-media { position: relative; height: 300px; overflow: hidden; border-radius: 999px 999px 24px 24px; box-shadow: 0 30px 70px rgba(11,45,74,.15); } .pk-zig:nth-child(even) .pk-zig-media { border-radius: 24px 24px 999px 999px; } .pk-zig-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); } .pk-zig:hover .pk-zig-media img { transform: scale(1.06); } .pk-zig-index { position: absolute; z-index: 2; inset-inline-start: 22px; top: 22px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--brand-deep); font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 800; } .pk-zig-copy h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); } .pk-zig-copy p { margin-top: 12px; font-size: 14.5px; line-height: 1.85; } .pk-zig-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; } .pk-zig-tags span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .pk-zig-tags span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-secondary); } /* ============================================================ PK 8 — REPORT SCHEDULE ============================================================ */ .pk-schedule-section { padding: 5rem 0; background: var(--bg-secondary); } .pk-schedule { border-top: 1px solid var(--border-medium); } .pk-schedule-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 2.4rem; align-items: center; padding: 1.9rem .3rem; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-slow); } .pk-schedule-row:hover { padding-inline-start: 1.2rem; } .pk-schedule-time { font-family: "Manrope", sans-serif; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -.04em; color: var(--text-primary); } .pk-schedule-time small { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .pk-schedule-copy strong { display: block; font-family: "Manrope", sans-serif; font-size: 15.5px; color: var(--text-primary); } .pk-schedule-copy span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.78; color: var(--text-secondary); } .pk-schedule-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border-light); color: var(--accent-primary); font-size: 15px; transition: all var(--transition-base); } .pk-schedule-row:hover .pk-schedule-icon { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; } /* ============================================================ PK 9 — OPEN Q&A COLUMNS ============================================================ */ .pk-qa-section { padding: 5rem 0; background: var(--bg-primary); } .pk-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; } .pk-qa-item { padding: 1.7rem 0; border-top: 1px solid var(--border-light); } .pk-qa-item h4 { display: flex; gap: 12px; font-size: 1.05rem; } .pk-qa-item h4 i { flex: 0 0 auto; margin-top: 4px; color: var(--accent-secondary); font-size: 13px; } .pk-qa-item p { margin-top: 10px; padding-inline-start: 25px; font-size: 13.5px; line-height: 1.82; } /* ============================================================ PK 10 — RELATED ARCH DECK (scroll-snap) ============================================================ */ .pk-deck-section { padding: 5rem 0; background: var(--bg-secondary); } .pk-deck-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.6rem; } .pk-deck-nav { display: flex; gap: 10px; } .pk-deck-nav button { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--border-medium); color: var(--accent-primary); font-size: 14px; cursor: pointer; transition: all var(--transition-base); } .pk-deck-nav button:hover { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; transform: translateY(-2px); } .pk-deck-rail { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; } .pk-deck-rail::-webkit-scrollbar { display: none; } .pk-deck-item { flex: 0 0 300px; scroll-snap-align: start; } .pk-deck-media { position: relative; height: 340px; border-radius: 200px 200px 26px 26px; overflow: hidden; box-shadow: 0 28px 64px rgba(11,45,74,.14); } .pk-deck-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.22,1,.36,1); } .pk-deck-item:hover .pk-deck-media img { transform: scale(1.07); } .pk-deck-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,37,66,.78)); } .pk-deck-label { position: absolute; z-index: 2; inset-inline: 22px; bottom: 22px; color: #fff; } .pk-deck-label strong { display: block; font-family: "Manrope", sans-serif; font-size: 1.12rem; color: #fff; letter-spacing: -.02em; } .pk-deck-label small { display: block; margin-top: 5px; font-size: 12px; color: rgba(255,255,255,.72); } .pk-deck-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; } .pk-deck-foot b { font-family: "Manrope", sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--accent-primary); } .pk-deck-foot del { margin-inline-start: 8px; font-size: 12.5px; color: var(--text-muted); } .pk-deck-foot .pp-link { font-size: 12.5px; } /* ============================================================ PK 11 — IMMERSIVE CLOSING CTA ============================================================ */ .pk-close-section { position: relative; padding: 7rem 0; overflow: hidden; color: #fff; isolation: isolate; } .pk-close-bg { position: absolute; inset: 0; z-index: -2; } .pk-close-bg img { width: 100%; height: 100%; object-fit: cover; } .pk-close-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(8,37,66,.94) 0%, rgba(8,37,66,.76) 55%, rgba(13,63,99,.72) 100%); } .pk-close-inner { max-width: 720px; } .pk-close-inner .section-eyebrow { color: var(--accent-secondary); } .pk-close-inner .section-eyebrow span { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); } .pk-close-inner h2 { color: #fff; font-size: clamp(2.1rem, 3.4vw, 3.1rem); } .pk-close-inner p { margin-top: 15px; color: rgba(255,255,255,.8); font-size: 15.5px; line-height: 1.85; } .pk-close-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 13px; margin-top: 1.8rem; font-family: "Manrope", sans-serif; } .pk-close-price b { font-size: 2.4rem; font-weight: 800; color: #fff; letter-spacing: -.04em; } .pk-close-price del { font-size: 16px; color: rgba(255,255,255,.6); } .pk-close-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 1.8rem; } .pk-close-trust { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.22); } .pk-close-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.88); } /* ============================================================ HC 2 — DOORSTEP COLLECTION INTRODUCTION ============================================================ */ .hc-intro-section { position: relative; padding: 5rem 0; background: var(--bg-primary); overflow: hidden; } .hc-intro-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4.5rem; align-items: center; } .hc-intro-lead { font-family: "Manrope", sans-serif; font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 600; line-height: 1.55; letter-spacing: -.02em; color: var(--text-primary); } .hc-intro-lead b { background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .hc-intro-copy > p { margin-top: 18px; max-width: 540px; font-size: 15px; line-height: 1.88; } .hc-intro-meta { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--border-light); } .hc-intro-meta div strong { display: block; font-family: "Manrope", sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hc-intro-meta div span { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); } .hc-intro-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 2rem; } .hc-intro-visual { position: relative; } .hc-intro-frame { position: relative; height: 520px; border-radius: 999px 999px 30px 30px; overflow: hidden; box-shadow: 0 40px 90px rgba(11,45,74,.17); } .hc-intro-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.22,1,.36,1); } .hc-intro-frame:hover img { transform: scale(1.05); } .hc-intro-strip { position: absolute; z-index: 2; inset-inline-end: -34px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; display: flex; align-items: center; gap: 12px; font-family: "Manrope", sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .hc-intro-strip::before { content: ""; width: 44px; height: 1px; background: var(--border-medium); } .hc-intro-badge { position: absolute; z-index: 3; inset-inline-start: -24px; bottom: 76px; display: flex; align-items: center; gap: 13px; padding: 15px 22px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: 0 24px 52px rgba(11,45,74,.16); } .hc-intro-badge i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-size: 14px; } .hc-intro-badge strong { display: block; font-family: "Manrope", sans-serif; font-size: 14.5px; color: var(--text-primary); } .hc-intro-badge small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); } /* ============================================================ HC 3 — WHY CHOOSE HOME COLLECTION (ledger) ============================================================ */ .hc-why-section { padding: 5rem 0; background: var(--bg-secondary); } .hc-why-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; } .hc-why-row { position: relative; display: flex; gap: 1.4rem; padding: 1.9rem .2rem; border-top: 1px solid var(--border-light); transition: padding var(--transition-slow); } .hc-why-row::after { content: ""; position: absolute; inset-inline-start: 0; top: -1px; width: 0; height: 1px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transition: width var(--transition-slow); } .hc-why-row:hover::after { width: 100%; } .hc-why-row:hover { padding-inline-start: 1rem; } .hc-why-mark { flex: 0 0 auto; font-family: "Manrope", sans-serif; font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--border-medium); transition: color var(--transition-base); } .hc-why-row:hover .hc-why-mark { color: var(--accent-primary); } .hc-why-copy h4 { display: flex; align-items: center; gap: 11px; font-size: 1.08rem; } .hc-why-copy h4 i { color: var(--accent-secondary); font-size: 13px; } .hc-why-copy p { margin-top: 9px; font-size: 13.5px; line-height: 1.8; } /* ============================================================ HC 4 — HOW HOME COLLECTION WORKS (curved path) ============================================================ */ .hc-path-section { position: relative; padding: 5rem 0; background: var(--bg-primary); overflow: hidden; } .hc-path { position: relative; margin-top: 2rem; min-height: 340px; } .hc-path-curve { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hc-path-curve path { fill: none; stroke: var(--border-medium); stroke-width: 2; stroke-dasharray: 8 10; stroke-linecap: round; } .hc-path-track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; height: 100%; } .hc-path-node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .hc-path-node:nth-child(odd) { justify-content: flex-start; padding-top: 1rem; } .hc-path-node:nth-child(even) { justify-content: flex-end; padding-bottom: 1rem; } .hc-path-dot { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 22px; transition: all var(--transition-slow); } .hc-path-dot b { position: absolute; top: -4px; inset-inline-end: -4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; } .hc-path-node:hover .hc-path-dot { transform: translateY(-6px); border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 24px 48px rgba(20,155,215,.3); } .hc-path-copy { margin-top: 1.3rem; max-width: 250px; } .hc-path-copy strong { display: block; font-family: "Manrope", sans-serif; font-size: 1rem; color: var(--text-primary); } .hc-path-copy span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.75; color: var(--text-secondary); } .hc-path-copy em { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-secondary); } /* ============================================================ HC 5 — BOOK A HOME COLLECTION ============================================================ */ .hc-book-section { position: relative; padding: 5rem 0; background: linear-gradient(145deg, var(--brand-deep) 0%, var(--brand-navy) 58%, #0d3f63 100%); color: #fff; overflow: hidden; } .hc-book-section::before { content: ""; position: absolute; inset: 0; opacity: .34; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.9), transparent 68%); mask-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.9), transparent 68%); } .hc-book-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .82fr 1.18fr; gap: 4rem; align-items: center; } .hc-book-copy .section-eyebrow { color: var(--accent-secondary); } .hc-book-copy .section-eyebrow span { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); } .hc-book-copy h2 { color: #fff; font-size: clamp(2rem, 3vw, 2.8rem); } .hc-book-copy > p { margin-top: 15px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.85; } .hc-book-assure { margin-top: 2rem; } .hc-book-assure div { display: flex; align-items: center; gap: 12px; padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; color: rgba(255,255,255,.78); } .hc-book-assure i { flex: 0 0 auto; color: var(--accent-secondary); font-size: 13px; } .hc-book-panel { position: relative; padding: 2.4rem; border-radius: 40px 140px 40px 40px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); } .hc-book-panel h3 { color: #fff; font-size: 1.4rem; } .hc-book-panel > p { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.62); } .hc-book-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.8rem; } .hc-field { display: flex; flex-direction: column; gap: 8px; } .hc-field.full { grid-column: 1 / -1; } .hc-field label { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.55); } .hc-field input, .hc-field select { height: 52px; padding-inline: 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-size: 14px; outline: none; transition: border-color var(--transition-base); } .hc-field input::placeholder { color: rgba(255,255,255,.42); } .hc-field input:focus, .hc-field select:focus { border-color: var(--accent-secondary); } .hc-field select option { background: var(--brand-deep); color: #fff; } .hc-slot-label { margin-top: 1.5rem; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.55); } .hc-slot-rail { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; overflow: visible; padding-bottom: 4px; } .hc-slot-rail::-webkit-scrollbar { display: none; } .hc-slot { flex: 1 1 120px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 104px; min-height: 72px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.03); color: rgba(255,255,255,.8); cursor: pointer; transition: all var(--transition-base); } .hc-slot strong { font-family: "Manrope", sans-serif; font-size: 13.5px; line-height: 1.3; font-weight: 800; color: rgba(255,255,255,.96); } .hc-slot small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.62); } .hc-slot:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); } .hc-slot.active { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); box-shadow: 0 16px 34px rgba(20,155,215,.3); } .hc-slot.active strong { color: #fff; } .hc-slot.active small { color: rgba(255,255,255,.9); } .hc-book-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 1.8rem; border-radius: 999px; background: #fff; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; transition: transform var(--transition-base); } .hc-book-submit:hover { transform: translateY(-2px); } .hc-book-status { margin-top: 13px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--accent-secondary); min-height: 18px; } /* ============================================================ HC 6 — SERVICE AREAS & AVAILABILITY ============================================================ */ .hc-areas-section { padding: 5rem 0; background: var(--bg-primary); } .hc-areas-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 4rem; align-items: start; } .hc-pin-form { display: flex; align-items: center; gap: 12px; height: 70px; margin-top: 2rem; padding: 0 10px 0 26px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-light); transition: border-color var(--transition-base); } .hc-pin-form:focus-within { border-color: var(--accent-primary); } .hc-pin-form > i { font-size: 16px; color: var(--accent-primary); } .hc-pin-form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text-primary); font-size: 15px; outline: none; } .hc-pin-form button { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: 999px; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; font-family: "Manrope", sans-serif; font-size: 13.5px; font-weight: 700; transition: transform var(--transition-base); } .hc-pin-form button:hover { transform: translateY(-2px); } .hc-pin-result { margin-top: 14px; padding-inline-start: 26px; min-height: 22px; font-size: 13.5px; font-weight: 600; } .hc-pin-result.yes { color: var(--accent-secondary); } .hc-pin-result.no { color: var(--text-muted); } .hc-area-columns { margin-top: 2.6rem; column-count: 3; column-gap: 2.4rem; } .hc-area-columns li { break-inside: avoid; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border-light); font-size: 13.5px; color: var(--text-secondary); } .hc-area-columns li b { font-family: "Manrope", sans-serif; font-weight: 700; color: var(--text-primary); } .hc-area-columns li em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-secondary); } .hc-area-columns li.soon em { color: var(--text-muted); } .hc-areas-aside { position: relative; } .hc-areas-map { position: relative; height: 340px; border-radius: 20px 30px 20px 20px; overflow: hidden; box-shadow: 0 34px 78px rgba(11,45,74,.15); } .hc-areas-map img { width: 100%; height: 100%; object-fit: cover; } .hc-areas-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(20,155,215,.2), transparent 60%); } .hc-areas-stats { margin-top: 2.2rem; } .hc-areas-stats div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border-light); } .hc-areas-stats small { font-size: 12.5px; color: var(--text-secondary); } .hc-areas-stats strong { font-family: "Manrope", sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--accent-primary); letter-spacing: -.02em; } /* ============================================================ HC 7 — SAFETY & HYGIENE ============================================================ */ .hc-safety-section { position: relative; padding: 5rem 0; background: var(--bg-secondary); overflow: hidden; } .hc-safety-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4.5rem; align-items: start; } .hc-safety-visual { position: sticky; top: 120px; align-self: start; } .hc-safety-copy { max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; } .hc-safety-visual .pp-arch { height: 500px; border-radius: 260px 260px 30px 30px; } .hc-safety-visual .pp-float { inset-inline-end: -26px; bottom: 100px; } .hc-safety-visual .pp-float.alt { inset-inline-end: auto; inset-inline-start: -22px; bottom: auto; top: 72px; } .hc-safety-list { margin-top: 2.2rem; border-top: 1px solid var(--border-light); } .hc-safety-item { display: flex; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-base); } .hc-safety-item:hover { padding-inline-start: .9rem; } .hc-safety-item i { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-accent); color: var(--accent-primary); font-size: 15px; transition: all var(--transition-base); } .hc-safety-item:hover i { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; transform: translateY(-3px); } .hc-safety-item strong { display: block; font-family: "Manrope", sans-serif; font-size: 15px; color: var(--text-primary); } .hc-safety-item span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--text-secondary); } .hc-safety-meter { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2rem; } .hc-safety-meter div strong { display: block; font-family: "Manrope", sans-serif; font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hc-safety-meter div span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } /* ============================================================ HC 8 — PREPARATION GUIDELINES (tabbed) ============================================================ */ .hc-prep-section { padding: 5rem 0; background: var(--bg-primary); } .hc-prep-tabs { display: flex; gap: 10px; margin-bottom: 2.6rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--border-light); overflow-x: auto; scrollbar-width: none; } .hc-prep-tabs::-webkit-scrollbar { display: none; } .hc-prep-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--border-light); color: var(--text-secondary); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: all var(--transition-base); } .hc-prep-tab i { font-size: 13px; color: var(--accent-primary); transition: color var(--transition-base); } .hc-prep-tab:hover { border-color: var(--border-accent); transform: translateY(-2px); } .hc-prep-tab.active { border-color: transparent; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 16px 34px rgba(7,155,196,.24); } .hc-prep-tab.active i { color: #fff; } .hc-prep-panel { display: none; grid-template-columns: .9fr 1.1fr; gap: 3.6rem; align-items: start; } .hc-prep-panel.active { display: grid; animation: pkFade .6s cubic-bezier(.22,1,.36,1); } .hc-prep-checks { max-height: calc(100vh - 200px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; } .hc-prep-intro { position: sticky; top: 120px; align-self: center; } .hc-prep-intro h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); } .hc-prep-intro p { margin-top: 13px; font-size: 14.5px; line-height: 1.85; } .hc-prep-intro .pp-quote { margin-top: 1.8rem; } .hc-prep-checks { border-top: 1px solid var(--border-medium); } .hc-prep-check { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.15rem .2rem; border-bottom: 1px solid var(--border-light); transition: padding var(--transition-base); } .hc-prep-check:hover { padding-inline-start: .9rem; } .hc-prep-check i { flex: 0 0 auto; margin-top: 3px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-primary); font-size: 10.5px; } .hc-prep-check.avoid i { background: rgba(123,144,162,.16); color: var(--text-muted); } .hc-prep-check strong { display: block; font-family: "Manrope", sans-serif; font-size: 14px; color: var(--text-primary); } .hc-prep-check span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.72; color: var(--text-secondary); } /* ============================================================ HC 9 — FAQ ============================================================ */ .hc-faq-section { padding: 5rem 0; background: var(--bg-secondary); } .hc-faq-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: start; } .hc-faq-list { border-top: 1px solid var(--border-medium); } .hc-faq-item { border-bottom: 1px solid var(--border-light); } .hc-faq-q { width: 100%; display: flex; align-items: center; gap: 1.2rem; padding: 1.45rem .3rem; text-align: start; cursor: pointer; } .hc-faq-q:hover strong { color: var(--accent-primary); } .hc-faq-q strong { flex: 1; min-width: 0; font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; color: var(--text-primary); transition: color var(--transition-base); } .hc-faq-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-light); color: var(--accent-primary); font-size: 12px; transition: all var(--transition-base); } .hc-faq-item.open .hc-faq-toggle { transform: rotate(135deg); border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; } .hc-faq-a { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,1,.36,1); } .hc-faq-item.open .hc-faq-a { max-height: 420px; } .hc-faq-a p { padding: 0 .3rem 1.5rem; font-size: 13.5px; line-height: 1.8; } .hc-faq-aside { position: relative; padding-inline-start: 2rem; border-inline-start: 2px solid var(--border-light); align-self: center; } .hc-faq-aside h3 { font-size: 1.5rem; } .hc-faq-aside p { margin-top: 12px; font-size: 14px; line-height: 1.8; } .hc-faq-aside .hc-faq-contact { display: flex; align-items: center; gap: 14px; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border-light); } .hc-faq-contact i { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-size: 15px; } .hc-faq-contact small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); } .hc-faq-contact strong { display: block; margin-top: 3px; font-family: "Manrope", sans-serif; font-size: 15.5px; color: var(--text-primary); } .hc-faq-aside .pp-btn { margin-top: 1.6rem; } /* ============================================================ HC 10 — FINAL BOOKING CTA ============================================================ */ .hc-cta-section { position: relative; padding: 5.5rem 0; background: linear-gradient(120deg, var(--button-primary), var(--accent-secondary)); color: #fff; overflow: hidden; text-align: center; } .hc-cta-section::before, .hc-cta-section::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); pointer-events: none; } .hc-cta-section::before { width: 430px; height: 430px; inset-inline-start: -160px; bottom: -190px; } .hc-cta-section::after { width: 320px; height: 320px; inset-inline-end: -120px; top: -150px; } .hc-cta-inner { position: relative; z-index: 2; max-width: 780px; margin-inline: auto; } .hc-cta-inner .section-eyebrow { justify-content: center; color: rgba(255,255,255,.9); } .hc-cta-inner .section-eyebrow span { background: rgba(255,255,255,.75); } .hc-cta-inner h2 { color: #fff; font-size: clamp(2.1rem, 3.4vw, 3.1rem); } .hc-cta-inner p { margin-top: 16px; color: rgba(255,255,255,.86); font-size: 15.5px; line-height: 1.85; } .hc-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 2.2rem; } .hc-cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 2.6rem; margin-top: 2.8rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.24); } .hc-cta-trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); } /* ============================================================ RESPONSIVE — TABLET (<=1023px) ============================================================ */ @media (max-width: 1023px) { /* PK */ .pk-hero { padding-top: 10rem; } .pk-hero-layout { grid-template-columns: 1fr; gap: 3rem; } .pk-hero-visual { min-height: 360px; max-width: 480px; margin-inline: auto; width: 100%; } .pk-hero-orbit { width: 340px; height: 340px; } .pk-hero-disc.one { width: 210px; height: 210px; } .pk-hero-disc.two { width: 140px; height: 140px; } .pk-ribbon div { flex: 1 1 45%; } .pk-ribbon div:nth-child(3) { border-inline-start: 0; } .pk-glance-layout { grid-template-columns: 1fr; gap: 1rem; } .pk-glance-numeral { font-size: 5.5rem; } .pk-orbit-layout, .pk-ticket-layout, .pk-qa-grid { grid-template-columns: 1fr; gap: 3rem; } .pk-qa-grid { gap: 0; } .pk-orbit-stage { max-width: 380px; } .pk-ticket-layout .pk-ticket { order: 2; } .pk-ruler { padding: 5rem 0; } .pk-ruler-copy { width: min(180px, 92%); } .pk-ruler-time { display: none; } .pk-zig { grid-template-columns: 1fr; gap: 1.8rem; } .pk-zig:nth-child(even) .pk-zig-media { order: 0; } .pk-zig-media { height: 260px; border-radius: 600px 600px 22px 22px; } .pk-zig:nth-child(even) .pk-zig-media { border-radius: 600px 600px 22px 22px; } .pk-schedule-row { grid-template-columns: 140px 1fr auto; gap: 1.6rem; } /* HC */ .hc-intro-layout, .hc-book-layout, .hc-areas-layout, .hc-safety-layout, .hc-prep-panel, .hc-faq-layout { grid-template-columns: 1fr; gap: 3rem; } .hc-intro-frame { height: 420px; } .hc-safety-visual .pp-arch { height: 420px; } .hc-safety-layout .hc-safety-visual { order: 2; } .hc-why-ledger { grid-template-columns: 1fr; gap: 0; } .hc-area-columns { column-count: 2; } .hc-faq-aside { padding-inline-start: 0; border-inline-start: 0; border-top: 2px solid var(--border-light); padding-top: 2rem; } .hc-path { min-height: 0; } .hc-path-curve { display: none; } .hc-path-track { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1.6rem; } .hc-path-node:nth-child(odd), .hc-path-node:nth-child(even) { padding: 0; justify-content: flex-start; } } /* ============================================================ RESPONSIVE — MOBILE (<=766px) ============================================================ */ @media (max-width: 766px) { /* PK HERO */ .pk-hero { padding-top: 8.5rem; } .pk-hero-layout { padding-bottom: 2.4rem; gap: 2.4rem; } .pk-hero h1 { font-size: 2.15rem; } .pk-hero-lead { font-size: 13.5px; } .pk-hero-price b { font-size: 2.1rem; } .pk-hero-actions { flex-direction: column; } .pk-hero-actions .pp-btn { width: 100%; justify-content: center; } .pk-hero-visual { min-height: 290px; } .pk-hero-orbit { width: 262px; height: 262px; } .pk-hero-disc.one { width: 160px; height: 160px; top: 2%; } .pk-hero-disc.two { width: 108px; height: 108px; } .pk-hero-chip { position: static; transform: none; margin-top: 1.2rem; width: fit-content; margin-inline: auto; } .pk-ribbon div { flex: 1 1 50%; padding: 1.2rem 1rem; } .pk-ribbon div:nth-child(odd) { border-inline-start: 0; } .pk-ribbon strong { font-size: 1rem; } /* PK NAV */ .pk-nav-inner { height: 58px; } .pk-nav-link { font-size: 12px; } .pk-nav-link + .pk-nav-link { margin-inline-start: 1.2rem; } /* PK GLANCE */ .pk-glance-section { padding-top: 3.4rem; } .pk-glance-layout { padding-bottom: 2.4rem; } .pk-glance-numeral { font-size: 4rem; } .pk-glance-copy h2 { font-size: 1.85rem; } .pk-glance-copy > p { font-size: 13.5px; } .pk-glance-points { gap: 1.3rem; } .pk-glance-points div { max-width: none; } .pk-marquee { padding: 1.1rem 0; } .pk-marquee-track { gap: 2rem; } .pk-marquee-track span { font-size: 13px; } /* PK ORBIT */ .pk-orbit-section { padding: 3.6rem 0; } .pk-orbit-stage { max-width: 290px; } .pk-orbit-node button { width: 46px; height: 46px; font-size: 13px; } .pk-orbit-core b { font-size: 1.6rem; } .pk-orbit-core small { font-size: 9px; } .pk-orbit-panel h3 { font-size: 1.5rem; } .pk-orbit-panel > p { font-size: 13.5px; } .pk-orbit-values span { font-size: 11.5px; padding: 7px 13px; } .pk-orbit-foot { gap: 1.2rem 2rem; } /* PK TICKET */ .pk-ticket-section { padding: 3.6rem 0; } .pk-ticket { padding: 1.8rem 1.5rem; border-radius: 24px; } .pk-ticket::before, .pk-ticket::after { width: 26px; height: 26px; } .pk-ticket::before { inset-inline-start: -14px; } .pk-ticket::after { inset-inline-end: -14px; } .pk-ticket-top { flex-direction: column; gap: .9rem; } .pk-ticket-total b { font-size: 1.9rem; } .pk-ticket-copy h2 { font-size: 1.85rem; } .pk-ticket-copy > p { font-size: 13.5px; } /* PK RULER */ .pk-ruler-section { padding: 3.6rem 0; } .pk-ruler { padding: 0; margin-top: 1.6rem; } .pk-ruler::before { top: 0; bottom: 0; inset-inline: auto; inset-inline-start: 30px; width: 2px; height: auto; background: linear-gradient(180deg, var(--border-medium), var(--accent-primary), var(--accent-secondary)); } .pk-ruler-track { flex-direction: column; } .pk-ruler-stop { align-items: flex-start; flex-direction: row; gap: 1.1rem; padding: 1.2rem 0; } .pk-ruler-mark { width: 60px; height: 60px; font-size: 14px; } .pk-ruler-copy { position: static; width: auto; text-align: start; padding-top: .5rem; } .pk-ruler-time { position: static; transform: none; display: block; margin-bottom: 5px; } .pk-ruler-stop.up .pk-ruler-copy, .pk-ruler-stop.down .pk-ruler-copy { bottom: auto; top: auto; } .pk-ruler-foot { flex-direction: column; align-items: stretch; } .pk-ruler-foot .pp-btn { width: 100%; justify-content: center; } /* PK ZIG */ .pk-zig-section { padding: 3.6rem 0; } .pk-zig { padding: 1.8rem 0; gap: 1.4rem; } .pk-zig-media { height: 220px; border-radius: 400px 400px 20px 20px; } .pk-zig:nth-child(even) .pk-zig-media { border-radius: 400px 400px 20px 20px; } .pk-zig-index { width: 44px; height: 44px; font-size: 12.5px; inset-inline-start: 16px; top: 16px; } .pk-zig-copy h3 { font-size: 1.28rem; } .pk-zig-copy p { font-size: 13.5px; } /* PK SCHEDULE */ .pk-schedule-section { padding: 3.6rem 0; } .pk-schedule-row { grid-template-columns: 1fr auto; gap: .8rem 1rem; padding: 1.4rem .1rem; } .pk-schedule-row:hover { padding-inline-start: .1rem; } .pk-schedule-time { grid-column: 1 / -1; font-size: 1.2rem; } .pk-schedule-copy strong { font-size: 14px; } .pk-schedule-copy span { font-size: 12.5px; } .pk-schedule-icon { width: 44px; height: 44px; font-size: 13px; } /* PK QA */ .pk-qa-section { padding: 3.6rem 0; } .pk-qa-item { padding: 1.35rem 0; } .pk-qa-item h4 { font-size: .98rem; } .pk-qa-item p { font-size: 13px; padding-inline-start: 0; } /* PK DECK */ .pk-deck-section { padding: 3.6rem 0; } .pk-deck-head { flex-direction: column; align-items: flex-start; gap: 1.4rem; } .pk-deck-nav button { width: 44px; height: 44px; font-size: 12.5px; } .pk-deck-item { flex: 0 0 240px; } .pk-deck-media { height: 280px; border-radius: 150px 150px 22px 22px; } /* PK CLOSE */ .pk-close-section { padding: 4.4rem 0; } .pk-close-inner h2 { font-size: 2rem; } .pk-close-inner p { font-size: 13.5px; } .pk-close-price b { font-size: 1.95rem; } .pk-close-actions { flex-direction: column; } .pk-close-actions .pp-btn { width: 100%; justify-content: center; } .pk-close-trust { gap: 1rem 1.6rem; } .pk-close-trust span { font-size: 12px; } /* HC INTRO */ .hc-intro-section { padding: 3.6rem 0; } .hc-intro-lead { font-size: 1.15rem; } .hc-intro-copy > p { font-size: 13.5px; } .hc-intro-meta { gap: 1.4rem 2rem; } .hc-intro-meta div strong { font-size: 1.6rem; } .hc-intro-actions { flex-direction: column; } .hc-intro-actions .pp-btn { width: 100%; justify-content: center; } .hc-intro-frame { height: 320px; border-radius: 500px 500px 22px 22px; } .hc-intro-strip { display: none; } .hc-intro-badge { position: static; transform: none; margin-top: 1.2rem; } /* HC WHY */ .hc-why-section { padding: 3.6rem 0; } .hc-why-row { padding: 1.5rem .1rem; gap: 1.1rem; } .hc-why-row:hover { padding-inline-start: .1rem; } .hc-why-mark { font-size: 1.6rem; } .hc-why-copy h4 { font-size: 1rem; } .hc-why-copy p { font-size: 13px; } /* HC PATH */ .hc-path-section { padding: 3.6rem 0; } .hc-path-track { grid-template-columns: 1fr; gap: 0; } .hc-path-node { flex-direction: row; align-items: flex-start; gap: 1.1rem; text-align: start; padding: 1.4rem 0; border-bottom: 1px solid var(--border-light); } .hc-path-node:first-child { border-top: 1px solid var(--border-light); } .hc-path-dot { width: 60px; height: 60px; font-size: 16px; } .hc-path-dot b { width: 24px; height: 24px; font-size: 11px; } .hc-path-copy { margin-top: 0; max-width: none; } .hc-path-copy span { font-size: 12.5px; } /* HC BOOK */ .hc-book-section { padding: 3.6rem 0; } .hc-book-copy h2 { font-size: 1.95rem; } .hc-book-copy > p { font-size: 13.5px; } .hc-book-panel { padding: 1.6rem; border-radius: 30px 80px 30px 30px; } .hc-book-panel h3 { font-size: 1.25rem; } .hc-book-fields { grid-template-columns: 1fr; } .hc-slot { min-width: 96px; padding: 10px 15px; } /* HC AREAS */ .hc-areas-section { padding: 3.6rem 0; } .hc-pin-form { height: auto; flex-wrap: wrap; padding: 12px; border-radius: 26px; gap: 10px; } .hc-pin-form > i { margin-inline-start: 10px; } .hc-pin-form input { flex: 1 1 160px; height: 42px; } .hc-pin-form button { flex: 1 1 100%; justify-content: center; } .hc-pin-result { padding-inline-start: 12px; } .hc-area-columns { column-count: 1; margin-top: 2rem; } .hc-area-columns li { font-size: 12.8px; } .hc-areas-map { height: 240px; border-radius: 130px 24px 130px 24px; } /* HC SAFETY */ .hc-safety-section { padding: 3.6rem 0; } .hc-safety-visual .pp-arch { height: 320px; border-radius: 160px 160px 24px 24px; } .hc-safety-visual .pp-float, .hc-safety-visual .pp-float.alt { position: static; margin-top: 1.1rem; } .hc-safety-item i { width: 42px; height: 42px; font-size: 13px; } .hc-safety-item strong { font-size: 14px; } .hc-safety-item span { font-size: 12.5px; } .hc-safety-meter { gap: 1.4rem 2rem; } .hc-safety-meter div strong { font-size: 1.45rem; } /* HC PREP */ .hc-prep-section { padding: 3.6rem 0; } .hc-prep-tab { height: 44px; padding: 0 18px; font-size: 12.5px; } .hc-prep-intro h3 { font-size: 1.45rem; } .hc-prep-intro p { font-size: 13.5px; } .hc-prep-check { padding: 1rem .1rem; gap: .9rem; } .hc-prep-check:hover { padding-inline-start: .1rem; } .hc-prep-check strong { font-size: 13.5px; } .hc-prep-check span { font-size: 12.5px; } /* HC FAQ */ .hc-faq-section { padding: 3.6rem 0; } .hc-faq-q { gap: .9rem; padding: 1.2rem .1rem; } .hc-faq-q strong { font-size: 14px; } .hc-faq-toggle { width: 34px; height: 34px; font-size: 11px; } .hc-faq-a p { font-size: 13px; padding: 0 .1rem 1.3rem; } .hc-faq-aside h3 { font-size: 1.3rem; } .hc-faq-aside .pp-btn { width: 100%; justify-content: center; } /* HC CTA */ .hc-cta-section { padding: 4rem 0; } .hc-cta-inner h2 { font-size: 2rem; } .hc-cta-inner p { font-size: 14px; } .hc-cta-actions { flex-direction: column; width: 100%; } .hc-cta-trust { gap: 1rem 1.6rem; margin-top: 2.2rem; } .hc-cta-trust span { font-size: 12px; } } /* ============================================================ RESPONSIVE — SMALL MOBILE (<=380px) ============================================================ */ @media (max-width: 380px) { .pk-ribbon div { flex: 1 1 100%; border-inline-start: 0; } .pk-orbit-stage { max-width: 250px; } .pk-orbit-node button { width: 40px; height: 40px; font-size: 11.5px; } .pk-deck-item { flex: 0 0 210px; } .hc-intro-meta { gap: 1.2rem 1.6rem; } } /* Grid-child wrappers */ .pk-hero-copy, .hc-areas-main, .hc-safety-copy { min-width: 0; } /* ============================================================ HEALTHLAB USER DASHBOARD WITH FIXED SIDEBAR ============================================================ */ .dashboard-page { background: var(--bg-secondary); } .dashboard-layout { display: flex; min-height: calc(100vh - 140px); position: relative; max-width: 1600px; margin: 0 auto; } /* FIXED SIDEBAR */ .dashboard-sidebar { width: 280px; background: var(--bg-primary); border-right: 1px solid var(--border-light); position: sticky; top: 0px; height: calc(100vh - 20px); overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 16px 24px; z-index: 100; transition: transform 0.3s ease, background-color 0.35s ease; } .sidebar-patient-card { display: flex; align-items: center; gap: 12px; padding: 14px;margin-top:20px; background: var(--accent-soft); border: 1px solid var(--border-accent); border-radius: 16px; margin-bottom: 24px; } .patient-avatar-box { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid var(--brand-blue); flex-shrink: 0; } .patient-avatar-box img { width: 100%; height: 100%; object-fit: cover; } .patient-badge-online { position: absolute; bottom: 2px; right: 2px; width: 10px; height: 10px; background: #19c7b5; border: 2px solid var(--bg-primary); border-radius: 50%; } .patient-info strong { display: block; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); } .patient-info span { font-size: 0.78rem; color: var(--text-secondary); } .sidebar-nav-list { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; font-size: 0.92rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: all 0.2s ease; } .sidebar-link i { font-size: 1.05rem; width: 22px; text-align: center; color: var(--text-muted); } .sidebar-link:hover { background: var(--bg-tertiary); color: var(--brand-blue); } .sidebar-link:hover i { color: var(--brand-blue); } .sidebar-link.active { background: linear-gradient(135deg, rgba(20, 155, 215, 0.12), rgba(25, 199, 181, 0.1)); color: var(--brand-blue); border-left: 3px solid var(--brand-blue); font-weight: 700; } .sidebar-badge { margin-left: auto; background: var(--brand-blue); color: #ffffff; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; } .sidebar-footer-card { padding: 16px; border-radius: 14px; background: linear-gradient(135deg, #0b253e 0%, #07192b 100%); color: #ffffff; font-size: 0.85rem; margin-top: 20px; } .sidebar-footer-card strong { display: block; color: #ffffff; font-size: 0.92rem; margin-bottom: 4px; } .sidebar-footer-card p { color: #a3c4dc; font-size: 0.78rem; margin-bottom: 12px; line-height: 1.4; } .sidebar-helpline-btn { display: inline-flex; align-items: center; gap: 8px; color: #19c7b5; font-weight: 700; font-size: 0.82rem; text-decoration: none; } /* MOBILE SIDEBAR CONTROLS */ .sidebar-mobile-bar { display: none; align-items: center; justify-content: space-between; background: var(--bg-primary); padding: 12px 20px; border-bottom: 1px solid var(--border-light); position: sticky; top: 0px; z-index: 90; } .sidebar-mobile-toggle-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-tertiary); border: 1px solid var(--border-medium); padding: 8px 14px; border-radius: 10px; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); cursor: pointer; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(4, 18, 31, 0.6); backdrop-filter: blur(4px); z-index: 99; } /* MAIN CONTENT */ .dashboard-main { flex: 1; min-width: 0; padding: 32px 36px; display: flex; flex-direction: column; gap: 32px; } /* DASHBOARD LOGOUT BUTTON */ .dash-logout-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border: 1px solid var(--border-light); border-radius: 999px; color: var(--text-secondary); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .dash-logout-btn i { font-size: 13px; } .dash-logout-btn:hover { color: #e05555; border-color: #e05555; background: rgba(224, 85, 85, 0.06); } .dash-section { background: var(--bg-primary); border-radius: 20px; border: 1px solid var(--border-light); box-shadow: 0 4px 20px rgba(10, 37, 64, 0.03); padding: 28px; scroll-margin-top: 100px; } .dash-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .dash-section-title { display: flex; align-items: center; gap: 12px; } .dash-section-title i { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .dash-section-title h2 { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin: 0; font-family: 'Manrope', sans-serif; } .dash-section-action-link { font-size: 0.88rem; font-weight: 600; color: var(--brand-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } /* SECTION 1: VITALS BANNER */ .vitals-banner { background: linear-gradient(135deg, #0b2843 0%, #07192b 100%); border-radius: 24px; padding: 30px 32px; color: #ffffff; display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; position: relative; overflow: hidden; } .vitals-user-profile { display: flex; align-items: center; gap: 20px; } .vitals-avatar-lg { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #19c7b5; overflow: hidden; flex-shrink: 0; } .vitals-avatar-lg img { width: 100%; height: 100%; object-fit: cover; } .vitals-greeting h1 { font-size: 1.65rem; font-weight: 800; margin: 0 0 4px; color: #ffffff; font-family: 'Manrope', sans-serif; } .vitals-greeting p { font-size: 0.88rem; color: #a4c2d9; margin: 0 0 10px; } .vitals-tags { display: flex; gap: 8px; flex-wrap: wrap; } .vitals-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 100px; font-size: 0.78rem; font-weight: 600; color: #2bd7c7; } .vitals-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .vital-stat-box { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 16px; text-align: center; } .vital-stat-box strong { display: block; font-size: 1.6rem; font-weight: 800; color: #ffffff; font-family: 'Manrope', sans-serif; } .vital-stat-box span { font-size: 0.76rem; color: #a0bed6; text-transform: uppercase; letter-spacing: 0.5px; } /* SECTION 2: LIVE STEPPER PIPELINE */ .pipeline-card { background: var(--bg-tertiary); border-radius: 16px; padding: 24px; border: 1px solid var(--border-light); } .pipeline-order-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; gap: 12px; } .pipeline-stepper { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; gap: 8px; } .pipeline-stepper::before { content: ''; position: absolute; top: 20px; left: 40px; right: 40px; height: 3px; background: var(--border-medium); z-index: 1; } .pipeline-progress-bar { position: absolute; top: 20px; left: 40px; width: 68%; height: 3px; background: linear-gradient(90deg, #19c7b5, #149bd7); z-index: 2; transition: width 0.5s ease; } .step-item { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; } .step-circle { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--border-medium); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: var(--text-muted); margin-bottom: 10px; transition: all 0.3s ease; } .step-item.completed .step-circle { background: #19c7b5; border-color: #19c7b5; color: #ffffff; } .step-item.active .step-circle { background: var(--brand-blue); border-color: var(--brand-blue); color: #ffffff; box-shadow: 0 0 0 5px rgba(20, 155, 215, 0.2); } .step-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; } .step-time { font-size: 0.72rem; color: var(--text-secondary); } /* SECTION 3: BOOK LAB TESTS */ .test-booking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .test-book-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.22s ease; } .test-book-card:hover { border-color: var(--brand-blue); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20, 155, 215, 0.08); } .test-badge-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .fasting-pill { font-size: 0.74rem; padding: 3px 8px; border-radius: 6px; background: rgba(25, 199, 181, 0.12); color: #129d8e; font-weight: 600; } .test-price { font-size: 1.15rem; font-weight: 800; color: var(--brand-blue); font-family: 'Manrope', sans-serif; } .test-book-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); } .test-parameters { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 16px; } .btn-book-test { width: 100%; padding: 10px; border-radius: 10px; background: var(--bg-primary); border: 1px solid var(--border-accent); color: var(--brand-blue); font-weight: 700; font-size: 0.88rem; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s ease; } .btn-book-test:hover { background: var(--brand-blue); color: #ffffff; } /* SECTION 4: PRESCRIPTION DROPZONE */ .prescription-dropzone { border: 2px dashed var(--border-accent); border-radius: 18px; padding: 36px 20px; text-align: center; background: var(--bg-secondary); cursor: pointer; transition: all 0.22s ease; } .prescription-dropzone:hover { border-color: var(--brand-blue); background: var(--accent-soft); } .dropzone-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--brand-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 14px; } .dropzone-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .dropzone-sub { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 16px; } .btn-browse-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--brand-blue); color: #ffffff; font-size: 0.88rem; font-weight: 600; border-radius: 8px; } /* SECTION 5: REPORTS TABLE & DOWNLOAD */ .reports-table-wrap { overflow-x: auto; } .reports-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } .reports-table th { padding: 14px 16px; background: var(--bg-tertiary); color: var(--text-secondary); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-light); } .reports-table td { padding: 16px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; } .report-tag-normal { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; background: rgba(25, 199, 181, 0.12); color: #129d8e; font-size: 0.78rem; font-weight: 700; } .report-tag-attention { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; background: rgba(245, 158, 11, 0.12); color: #d97706; font-size: 0.78rem; font-weight: 700; } .btn-download-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: var(--brand-blue); color: #ffffff; font-weight: 700; font-size: 0.82rem; text-decoration: none; transition: opacity 0.2s ease; } /* SECTION 6: BIOMARKERS */ .biomarker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .biomarker-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 16px; padding: 20px; } .biomarker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .biomarker-name { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); } .biomarker-value { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); font-family: 'Manrope', sans-serif; margin-bottom: 4px; } .biomarker-range-bar { height: 6px; border-radius: 100px; background: var(--border-medium); overflow: hidden; margin-bottom: 8px; position: relative; } .biomarker-fill { height: 100%; background: #19c7b5; border-radius: 100px; } .biomarker-sub { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-secondary); } /* SECTION 7, 8, 9, 10 */ .collection-card { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 18px; padding: 24px; } .phlebotomist-profile { display: flex; align-items: center; gap: 16px; } .phlebo-img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #19c7b5; } .family-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .family-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 16px; padding: 18px; text-align: center; cursor: pointer; transition: all 0.2s ease; } .family-card:hover, .family-card.active { border-color: var(--brand-blue); background: var(--accent-soft); } .family-avatar { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); font-size: 1.2rem; color: var(--brand-blue); } .wallet-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; } .wallet-card-highlight { background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%); color: #ffffff; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; } .consult-card { display: flex; align-items: center; justify-content: space-between; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 18px; padding: 24px; gap: 20px; flex-wrap: wrap; } .consult-doctor-info { display: flex; align-items: center; gap: 16px; } .doctor-img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-blue); } /* RESPONSIVE */ @media (max-width: 1200px) { .biomarker-grid { grid-template-columns: repeat(2, 1fr); } .family-grid { grid-template-columns: repeat(2, 1fr); } .test-booking-grid { grid-template-columns: repeat(2, 1fr); } .vitals-banner { grid-template-columns: 1fr; } .wallet-grid { grid-template-columns: 1fr; } } @media (max-width: 991px) { .dashboard-layout { flex-direction: column; } .dashboard-sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 1000; transform: translateX(-100%); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); } .dashboard-sidebar.sidebar-open { transform: translateX(0); } .sidebar-mobile-bar { display: flex; } .sidebar-backdrop.active { display: block; } .dashboard-main { padding: 24px 18px; } .collection-card { grid-template-columns: 1fr; } .pipeline-stepper { grid-template-columns: 1fr; gap: 16px; } .pipeline-stepper::before, .pipeline-progress-bar { display: none; } } @media (max-width: 600px) { .test-booking-grid { grid-template-columns: 1fr; } .family-grid { grid-template-columns: 1fr; } .biomarker-grid { grid-template-columns: 1fr; } .vitals-stats-grid { grid-template-columns: 1fr; } .dash-section { padding: 20px 16px; } } .dash-header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto;justify-content: flex-end; } /* ============================================================ HEALTHLAB ADMIN DASHBOARD STYLES (12 SECTIONS) ============================================================ */ .admin-dashboard-page { background: var(--bg-secondary); min-height: 100vh; } .admin-layout { display: flex; min-height: 100vh; position: relative; max-width: 1720px; margin: 0 auto; } /* FIXED ADMIN SIDEBAR */ .admin-sidebar { width: 290px; background: var(--bg-primary); border-right: 1px solid var(--border-light); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 16px; z-index: 100; transition: transform 0.3s ease, background-color 0.35s ease; } .admin-brand-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border-light); } .admin-brand-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .admin-brand-logo .brand-symbol { width: 36px; height: 36px; } .admin-badge-role { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(20, 155, 215, 0.14); color: var(--brand-blue); text-transform: uppercase; letter-spacing: 0.5px; } .admin-user-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 14px; margin-bottom: 20px; } .admin-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-cyan); } .admin-info strong { display: block; font-size: 0.9rem; color: var(--text-primary); font-weight: 700; } .admin-info span { font-size: 0.75rem; color: var(--text-secondary); } .admin-nav-list { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; } .admin-link { display: flex; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: all 0.2s ease; } .admin-link i { font-size: 1rem; width: 20px; text-align: center; color: var(--text-muted); } .admin-link:hover { background: var(--bg-tertiary); color: var(--brand-blue); } .admin-link:hover i { color: var(--brand-blue); } .admin-link.active { background: linear-gradient(135deg, rgba(20, 155, 215, 0.12), rgba(25, 199, 181, 0.1)); color: var(--brand-blue); border-left: 3px solid var(--brand-blue); font-weight: 700; } .admin-link.active i { color: var(--brand-blue); } .admin-badge-count { margin-left: auto; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 100px; background: var(--brand-blue); color: #ffffff; } .admin-badge-alert { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 100px; background: #ef4444; color: #ffffff; animation: blinkAlert 1.5s infinite; } @keyframes blinkAlert { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .admin-sidebar-status { padding: 14px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border-light); font-size: 0.78rem; color: var(--text-secondary); margin-top: 18px; } .status-dot-green { display: inline-block; width: 8px; height: 8px; background: #19c7b5; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 6px #19c7b5; } /* TOPBAR */ .admin-topbar { display: flex; align-items: center; justify-content: space-between; background: var(--bg-primary); border-bottom: 1px solid var(--border-light); padding: 14px 28px; position: sticky; top: 0; z-index: 90; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); } .admin-topbar-left { display: flex; align-items: center; gap: 16px; } .admin-mobile-toggle { display: none; font-size: 1.15rem; color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--border-medium); padding: 6px 12px; border-radius: 8px; cursor: pointer; } .admin-search-wrap { position: relative; width: 380px; } .admin-search-wrap input { width: 100%; height: 40px; background: var(--bg-secondary); border: 1px solid var(--border-medium); border-radius: 10px; padding: 0 14px 0 38px; font-size: 0.88rem; color: var(--text-primary); outline: none; transition: all 0.2s; } .admin-search-wrap input:focus { border-color: var(--brand-blue); background: var(--bg-primary); box-shadow: 0 0 0 3px rgba(20, 155, 215, 0.14); } .admin-search-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; pointer-events: none; } .admin-topbar-actions { display: flex; align-items: center; gap: 14px; } .admin-action-controls { display: flex; align-items: center; gap: 10px; } /* SECTIONS */ .admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .admin-content-inner { padding: 28px 32px 60px; display: flex; flex-direction: column; gap: 28px; } .admin-section { background: var(--bg-primary); border-radius: 18px; border: 1px solid var(--border-light); box-shadow: 0 4px 18px rgba(10, 37, 64, 0.03); padding: 24px 26px; scroll-margin-top: 80px; } .admin-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .admin-section-title { display: flex; align-items: center; gap: 12px; } .admin-section-title i { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; font-size: 1rem; } .admin-section-title h2 { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin: 0; font-family: 'Manrope', sans-serif; } /* 1. KPI */ .admin-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .admin-kpi-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 14px; padding: 18px 20px; position: relative; overflow: hidden; transition: transform 0.2s ease; } .admin-kpi-card:hover { transform: translateY(-2px); border-color: var(--border-accent); } .admin-kpi-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--brand-blue); } .admin-kpi-card.kpi-warning::after { background: #f59e0b; } .admin-kpi-card.kpi-danger::after { background: #ef4444; } .admin-kpi-card.kpi-success::after { background: #19c7b5; } .kpi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .kpi-value { font-size: 1.85rem; font-weight: 800; color: var(--text-primary); font-family: 'Manrope', sans-serif; line-height: 1.1; margin-bottom: 6px; } .kpi-trend { font-size: 0.78rem; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .trend-up { color: #19c7b5; } .trend-down { color: #ef4444; } .admin-alert-ticker { margin-top: 14px; padding: 10px 16px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: 10px; display: flex; align-items: center; gap: 12px; font-size: 0.84rem; color: #ef4444; font-weight: 600; } /* 2. ANALYZERS & 3. FLEET */ .analyzer-grid, .fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .analyzer-card, .fleet-agent-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 14px; padding: 18px; } .analyzer-status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .analyzer-badge-run { font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(25, 199, 181, 0.15); color: #129d8e; } .analyzer-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .analyzer-load-bar { height: 8px; background: var(--border-medium); border-radius: 100px; margin: 10px 0; overflow: hidden; } .analyzer-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, #19c7b5, #149bd7); } .agent-profile-row { display: flex; align-items: center; gap: 12px; } .agent-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #19c7b5; } .temp-badge-box { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: rgba(20, 155, 215, 0.12); color: var(--brand-blue); width: fit-content;margin-top: 20px;margin-bottom: 20px; } /* TABLES */ .admin-table-wrap { overflow-x: auto; } .admin-data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; text-align: left; } .admin-data-table th { padding: 12px 14px; background: var(--bg-tertiary); color: var(--text-secondary); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-light); white-space: nowrap; } .admin-data-table td { padding: 14px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; } .admin-data-table tr:hover { background: rgba(20, 155, 215, 0.03); } .tube-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; } .tube-purple { background: rgba(147, 51, 234, 0.12); color: #9333ea; } .tube-gold { background: rgba(245, 158, 11, 0.12); color: #d97706; } .tube-grey { background: rgba(100, 116, 139, 0.15); color: #475569; } .priority-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 100px; background: rgba(239, 68, 68, 0.14); color: #ef4444; text-transform: uppercase; } .btn-action-sm { padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: none; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; } .btn-approve { background: #19c7b5; color: #ffffff; } .btn-approve:hover { filter: brightness(1.08); } .btn-outline { background: var(--bg-primary); border: 1px solid var(--border-medium); color: var(--text-primary); } .btn-outline:hover { border-color: var(--brand-blue); color: var(--brand-blue); } /* ADDITIONAL ADMIN GRIDS */ .admin-rx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .admin-inventory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .admin-qc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .admin-billing-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; } .admin-roster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* SIDEBAR BACKDROP & MOBILE CONTROLS */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); z-index: 998; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } .sidebar-backdrop.active { opacity: 1; visibility: visible; pointer-events: auto; } /* RESPONSIVE */ @media (max-width: 1200px) { .admin-kpi-grid, .analyzer-grid, .fleet-grid { grid-template-columns: repeat(2, 1fr); } .admin-roster-grid { grid-template-columns: repeat(2, 1fr); } .admin-inventory-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 1000; transform: translateX(-100%); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .admin-sidebar.sidebar-open { transform: translateX(0); } html[dir="rtl"] .admin-sidebar { left: auto; right: 0; transform: translateX(100%); } html[dir="rtl"] .admin-sidebar.sidebar-open { transform: translateX(0); } .admin-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; } .mobile-only-close { display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bg-tertiary); border: 1px solid var(--border-medium); cursor: pointer; } .admin-search-wrap { width: 220px; } .admin-content-inner { padding: 20px 16px 40px; gap: 20px; } .admin-rx-grid, .admin-qc-grid, .admin-billing-grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 768px) { .admin-topbar { padding: 12px 16px; flex-wrap: wrap; gap: 12px; } .admin-topbar-left { flex: 1; min-width: 0; } .admin-search-wrap { flex: 1; min-width: 140px; max-width: 100%; width: auto; } .admin-topbar-actions { gap: 8px; } .admin-section { padding: 18px 16px; border-radius: 14px; } .admin-section-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; } .admin-section-title h2 { font-size: 1.1rem; } .admin-inventory-grid { grid-template-columns: 1fr; } .admin-data-table { min-width: 640px; } } @media (max-width: 600px) { .admin-kpi-grid, .analyzer-grid, .fleet-grid, .admin-roster-grid { grid-template-columns: 1fr; gap: 12px; } .admin-topbar { padding: 10px 14px; } .admin-search-wrap { display: none; } .admin-content-inner { padding: 14px 10px 36px; } .admin-action-controls { gap: 6px; } } /* ========================================================================== HOME 2: PREMIUM HEALTH INTELLIGENCE & NON-CARD FLOW DESIGNS ========================================================================== */ .home2-page { background-color: var(--color-bg, #0b1120); color: var(--color-text, #f1f5f9); font-family: 'DM Sans', sans-serif; overflow-x: hidden; } .home2-main-wrapper { position: relative; width: 100%; } .h2-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .h2-gradient-text { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .h2-section { padding: 100px 0; position: relative; } .h2-section-head { text-align: center; max-width: 760px; } .h2-badge-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 9999px; background: rgba(6, 182, 212, 0.12); color: #06b6d4; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; border: 1px solid rgba(6, 182, 212, 0.25); } .h2-title { font-family: 'Manrope', sans-serif; font-size: 2.6rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: var(--color-heading, #ffffff); } .h2-subtitle { font-size: 1.1rem; line-height: 1.6; color: var(--color-text-muted, #94a3b8); } .h2-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 9999px; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; border: none; } .h2-btn-glow { background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%); color: #ffffff !important; box-shadow: 0 4px 20px rgba(6, 182, 212, 0.35); } .h2-btn-glow:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(6, 182, 212, 0.55); } .h2-btn-minimal { background: rgba(255, 255, 255, 0.06); color: var(--color-text, #ffffff) !important; border: 1px solid rgba(255, 255, 255, 0.15); } .h2-btn-minimal:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); } .btn-sm { padding: 10px 20px; font-size: 0.88rem; } /* 1. HERO */ .h2-hero-stage { position: relative; padding: 60px 0 100px 0; background: radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.15) 0%, transparent 60%), radial-gradient(circle at 10% 80%, rgba(59, 130, 246, 0.12) 0%, transparent 50%); overflow: hidden; } .h2-telemetry-ribbon { display: flex; align-items: center; justify-content: space-between; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 12px 24px; border-radius: 9999px; margin-bottom: 50px; font-size: 0.88rem; color: #cbd5e1; overflow-x: auto; white-space: nowrap; } .telemetry-item { display: inline-flex; align-items: center; gap: 8px; } .telemetry-separator { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.15); } .live-dot-pulse { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: pulseGlow 2s infinite; } @keyframes pulseGlow { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .h2-hero-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; } .h2-kicker-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); padding: 6px 14px; border-radius: 9999px; font-size: 0.88rem; font-weight: 600; color: #38bdf8; margin-bottom: 24px; } .h2-hero-headline { font-family: 'Manrope', sans-serif; font-size: 3.5rem; font-weight: 800; line-height: 1.15; margin-bottom: 24px; color: #ffffff; } .h2-hero-lead { font-size: 1.18rem; line-height: 1.7; color: #94a3b8; margin-bottom: 32px; max-width: 580px; } .h2-quick-select-bar { margin-bottom: 36px; } .bar-title { display: block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 12px; } .bar-pills { display: flex; flex-wrap: wrap; gap: 8px; } .quick-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #e2e8f0; padding: 6px 14px; border-radius: 9999px; font-size: 0.85rem; text-decoration: none; transition: all 0.2s ease; } .quick-pill:hover { background: rgba(6, 182, 212, 0.2); border-color: #06b6d4; color: #ffffff; } .h2-hero-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .h2-visual-wrapper { position: relative; border-radius: 32px; overflow: hidden; box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6); } .h2-panoramic-img { width: 100%; height: 480px; object-fit: cover; display: block; filter: brightness(0.9) contrast(1.1); } .h2-hud-overlay { position: absolute; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 12px 18px; border-radius: 20px; display: flex; align-items: center; gap: 14px; color: #ffffff; } .hud-top-right { top: 24px; right: 24px; } .hud-bottom-left { bottom: 24px; left: 24px; } .hud-circle-gauge { width: 44px; height: 44px; position: relative; } .circular-chart { display: block; margin: 0 auto; max-width: 100%; max-height: 100%; } .circle-bg { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 3.8; } .circle { fill: none; stroke-width: 3.8; stroke-linecap: round; stroke: #06b6d4; } .hud-percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.65rem; font-weight: 800; } .hud-icon-pulse { width: 38px; height: 38px; border-radius: 50%; background: rgba(239, 68, 68, 0.2); color: #ef4444; display: flex; align-items: center; justify-content: center; } /* 2. PERSONALIZED HEALTH JOURNEY (CONTINUOUS PIPELINE) */ .h2-pipeline-track { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding: 40px 0; } .pipeline-step { flex: 1; position: relative; text-align: left; padding: 0 16px; transition: all 0.3s ease; } .pipeline-node { width: 48px; height: 48px; border-radius: 50%; background: #0f172a; border: 2px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1rem; color: #94a3b8; margin-bottom: 20px; position: relative; z-index: 2; transition: all 0.3s ease; } .pipeline-step.active .pipeline-node, .pipeline-step:hover .pipeline-node { border-color: #06b6d4; color: #06b6d4; box-shadow: 0 0 20px rgba(6, 182, 212, 0.5); background: #0e2738; } .pipeline-conduit { height: 2px; flex-grow: 1; background: linear-gradient(90deg, rgba(6, 182, 212, 0.6), rgba(59, 130, 246, 0.6)); margin-top: 24px; min-width: 20px; } .step-timing { display: block; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; color: #06b6d4; margin-bottom: 8px; } .pipeline-body h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; color: #ffffff; } .pipeline-body p { font-size: 0.92rem; line-height: 1.6; color: #94a3b8; margin-bottom: 12px; } .pipeline-feature { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #38bdf8; font-weight: 600; } /* 3. TEST COMPARISON & SELECTION GUIDE (MATRIX CONSOLE) */ .h2-matrix-console { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; padding: 32px; backdrop-filter: blur(12px); } .matrix-filter-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 24px; } .filter-caption { font-weight: 700; color: #94a3b8; font-size: 0.95rem; } .matrix-toggle-group { display: flex; background: rgba(0, 0, 0, 0.35); padding: 6px; border-radius: 9999px; gap: 6px; } .matrix-btn { background: transparent; border: none; color: #94a3b8; padding: 10px 20px; border-radius: 9999px; font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: all 0.25s ease; } .matrix-btn.active { background: #06b6d4; color: #ffffff; box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4); } .matrix-overview-strip { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: rgba(255, 255, 255, 0.03); border-radius: 20px; margin-bottom: 24px; gap: 20px; flex-wrap: wrap; } .overview-info h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; color: #ffffff; } .overview-info p { font-size: 0.95rem; color: #94a3b8; max-width: 650px; } .overview-pricing { display: flex; align-items: center; gap: 16px; } .price-val { font-size: 2rem; font-weight: 800; color: #38bdf8; font-family: 'Manrope', sans-serif; } .price-retail { font-size: 0.9rem; text-decoration: line-through; color: #64748b; } .matrix-table-flow { display: flex; flex-direction: column; } .matrix-row { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 18px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); align-items: center; transition: background 0.2s ease; } .matrix-row:hover { background: rgba(255, 255, 255, 0.02); } .param-col strong { display: block; color: #ffffff; font-size: 1rem; margin-bottom: 4px; } .param-col span { font-size: 0.85rem; color: #94a3b8; } .badge-check { display: inline-flex; align-items: center; gap: 6px; background: rgba(16, 185, 129, 0.15); color: #10b981; padding: 6px 14px; border-radius: 9999px; font-weight: 700; font-size: 0.82rem; } .badge-optional { display: inline-flex; align-items: center; gap: 6px; background: rgba(234, 179, 8, 0.15); color: #eab308; padding: 6px 14px; border-radius: 9999px; font-weight: 700; font-size: 0.82rem; } .tat-col { text-align: right; font-size: 0.88rem; color: #94a3b8; } .tat-col strong { color: #ffffff; } /* 4. LAB TECHNOLOGY SHOWCASE */ .h2-tech-panoramic-console { background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 32px; overflow: hidden; } .tech-viewport-stage { position: relative; height: 480px; width: 100%; } .tech-main-visual { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.85); } .hotspot-pin { position: absolute; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; } .pin-1 { top: 35%; left: 22%; } .pin-2 { top: 48%; left: 45%; } .pin-3 { top: 30%; left: 70%; } .pin-4 { top: 65%; left: 82%; } .pin-dot { width: 40px; height: 40px; border-radius: 50%; background: #06b6d4; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 0 20px rgba(6, 182, 212, 0.8); position: relative; z-index: 2; } .pin-ripple { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #06b6d4; animation: pulseRipple 2s infinite; } @keyframes pulseRipple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } .pin-label { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 6px 12px; border-radius: 8px; color: #ffffff; font-size: 0.82rem; font-weight: 700; } .tech-telemetry-hud { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; padding: 32px; background: rgba(15, 23, 42, 0.95); border-top: 1px solid rgba(255, 255, 255, 0.1); } .hud-kicker { font-size: 0.82rem; text-transform: uppercase; font-weight: 700; color: #06b6d4; margin-bottom: 8px; display: block; } .hud-apparatus-info h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; color: #ffffff; } .hud-apparatus-info p { font-size: 0.95rem; color: #94a3b8; line-height: 1.6; } .hud-specs-strip { display: flex; align-items: center; justify-content: space-around; background: rgba(255, 255, 255, 0.03); border-radius: 20px; padding: 16px; } .spec-cell { text-align: center; } .spec-cell strong { display: block; font-size: 1.4rem; font-weight: 800; color: #38bdf8; font-family: 'Manrope', sans-serif; } .spec-cell span { font-size: 0.78rem; color: #94a3b8; } /* 5. PREVENTIVE HEALTH TIMELINE */ .h2-lifespan-console { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; padding: 36px; } .lifespan-nav-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; } .lifespan-node { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 20px; cursor: pointer; text-align: center; transition: all 0.3s ease; } .lifespan-node.active, .lifespan-node:hover { background: rgba(6, 182, 212, 0.15); border-color: #06b6d4; transform: translateY(-3px); } .node-age { display: block; font-size: 1.8rem; font-weight: 800; color: #ffffff; font-family: 'Manrope', sans-serif; } .node-sub { font-size: 0.85rem; color: #94a3b8; } .lifespan-stage-canvas { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: center; background: rgba(255, 255, 255, 0.02); border-radius: 20px; padding: 32px; } .stage-tag { display: inline-block; color: #06b6d4; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; margin-bottom: 8px; } .stage-narrative h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 12px; color: #ffffff; } .stage-narrative p { color: #94a3b8; line-height: 1.6; margin-bottom: 24px; } .stage-biomarker-chips { display: flex; flex-wrap: wrap; gap: 12px; } .chip-item { background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.25); color: #38bdf8; padding: 8px 16px; border-radius: 9999px; font-size: 0.88rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .stage-action-box { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; } .frequency-badge { display: flex; align-items: center; gap: 12px; text-align: left; } .frequency-badge i { font-size: 1.8rem; color: #06b6d4; } .frequency-badge strong { display: block; color: #ffffff; font-size: 1.1rem; } .frequency-badge small { color: #94a3b8; } /* 6. DOCTOR / PRESCRIPTION SCANNER */ .h2-rx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .rx-benefits-list { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; } .rx-benefit-item { display: flex; gap: 18px; } .b-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(6, 182, 212, 0.15); color: #06b6d4; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .rx-benefit-item strong { display: block; color: #ffffff; font-size: 1.05rem; margin-bottom: 4px; } .rx-benefit-item p { color: #94a3b8; font-size: 0.92rem; line-height: 1.5; } .dropzone-scanner-box { position: relative; border: 2px dashed rgba(6, 182, 212, 0.4); border-radius: 28px; padding: 60px 40px; text-align: center; background: rgba(15, 23, 42, 0.6); overflow: hidden; } .scanner-laser-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #06b6d4, transparent); box-shadow: 0 0 15px #06b6d4; animation: scanLine 3s ease-in-out infinite; } @keyframes scanLine { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } } .drop-icon-pulse { font-size: 2.8rem; color: #06b6d4; margin-bottom: 16px; } .dropzone-content h4 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; color: #ffffff; } .dropzone-content p { font-size: 0.9rem; color: #94a3b8; margin-bottom: 24px; } .rx-ocr-result { margin-top: 20px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 20px; padding: 20px; } .ocr-status-bar { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.95rem; font-weight: 700; color: #ffffff; } .ocr-detected-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .ocr-detected-tags .tag { background: rgba(255, 255, 255, 0.08); padding: 4px 10px; border-radius: 9999px; font-size: 0.8rem; color: #38bdf8; } /* 7. HEALTH CHECKUP RECOMMENDATIONS */ .h2-recommender-console { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; padding: 36px; } .recommender-row { margin-bottom: 30px; } .row-label { display: block; font-size: 1rem; font-weight: 700; color: #ffffff; margin-bottom: 14px; } .pill-selector-group { display: flex; flex-wrap: wrap; gap: 10px; } .rec-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #cbd5e1; padding: 10px 20px; border-radius: 9999px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; } .rec-pill.active, .rec-pill:hover { background: #06b6d4; border-color: #06b6d4; color: #ffffff; box-shadow: 0 4px 15px rgba(6, 182, 212, 0.35); } .recommender-output-bar { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: center; background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.25); border-radius: 24px; padding: 32px; margin-top: 20px; } .match-badge { display: inline-flex; align-items: center; gap: 6px; color: #38bdf8; font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; } .output-package-info h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; color: #ffffff; } .output-package-info p { font-size: 0.95rem; color: #94a3b8; margin-bottom: 16px; } .output-test-chips { display: flex; flex-wrap: wrap; gap: 8px; } .output-test-chips span { background: rgba(255, 255, 255, 0.06); padding: 6px 14px; border-radius: 9999px; font-size: 0.82rem; color: #e2e8f0; } .output-action-dock { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; } .output-price { font-size: 2rem; font-weight: 800; color: #ffffff; font-family: 'Manrope', sans-serif; } .output-price small { display: block; font-size: 0.8rem; font-weight: 400; color: #94a3b8; } /* 8. SAMPLE PREPARATION GUIDE (CHRONOLOGY RAIL) */ .h2-prep-chronology { display: flex; flex-direction: column; gap: 16px; max-width: 960px; margin: 0 auto; } .prep-stage-item { display: flex; align-items: center; gap: 32px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 24px 32px; transition: all 0.3s ease; } .prep-stage-item:hover { border-color: rgba(6, 182, 212, 0.4); background: rgba(15, 23, 42, 0.85); transform: translateX(6px); } .prep-time-indicator { min-width: 90px; text-align: center; padding-right: 24px; border-right: 2px solid rgba(255, 255, 255, 0.1); } .prep-hour { display: block; font-size: 2rem; font-weight: 800; color: #06b6d4; font-family: 'Manrope', sans-serif; line-height: 1; } .prep-desc { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; font-weight: 700; } .prep-details h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; color: #ffffff; } .prep-details p { font-size: 0.95rem; color: #94a3b8; line-height: 1.6; margin: 0; } /* 9. CORPORATE SCREENING */ .h2-corporate-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .corp-stat-ribbon { display: flex; gap: 32px; margin-top: 40px; } .corp-stat strong { display: block; font-size: 2.2rem; font-weight: 800; color: #38bdf8; font-family: 'Manrope', sans-serif; } .corp-stat span { font-size: 0.88rem; color: #94a3b8; } .corp-booking-form { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; padding: 36px; } .corp-booking-form h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; color: #ffffff; } .corp-booking-form p { font-size: 0.92rem; color: #94a3b8; margin-bottom: 24px; } .form-inputs-grid { display: flex; flex-direction: column; gap: 16px; } .form-inputs-grid input, .form-inputs-grid select { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); padding: 14px 18px; border-radius: 12px; color: #ffffff; font-size: 0.95rem; outline: none; transition: border-color 0.2s ease; } .form-inputs-grid input:focus, .form-inputs-grid select:focus { border-color: #06b6d4; } /* 10. PATIENT SUPPORT CENTER */ .h2-support-channels-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; } .support-channel-item { display: flex; align-items: center; gap: 20px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 24px; text-decoration: none; transition: all 0.3s ease; } .support-channel-item:hover { background: rgba(15, 23, 42, 0.9); border-color: rgba(6, 182, 212, 0.4); transform: translateY(-3px); } .channel-icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(6, 182, 212, 0.15); color: #06b6d4; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .whatsapp-icon { background: rgba(37, 211, 102, 0.15); color: #25d366; } .email-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; } .channel-kicker { font-size: 0.78rem; text-transform: uppercase; font-weight: 700; color: #06b6d4; display: block; } .channel-body h4 { font-size: 1.05rem; font-weight: 700; color: #ffffff; margin: 2px 0 4px 0; } .channel-body strong { font-size: 0.92rem; color: #cbd5e1; } /* FAQ Accordion Rail */ .h2-faq-rail { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-row { background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.25s ease; } .faq-question { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1.05rem; color: #ffffff; } .faq-question i { transition: transform 0.3s ease; } .faq-answer { padding: 0 24px; max-height: 0; overflow: hidden; transition: all 0.3s ease; } .faq-answer p { color: #94a3b8; line-height: 1.6; padding-bottom: 20px; margin: 0; } .faq-row.active .faq-question i { transform: rotate(180deg); } .faq-row.active .faq-answer { max-height: 200px; } /* ================= RESPONSIVE TABLET & MOBILE ================= */ @media (max-width: 1024px) { .h2-hero-split, .h2-rx-split, .h2-corporate-split { grid-template-columns: 1fr; gap: 40px; } .h2-pipeline-track { flex-direction: column; gap: 24px; } .pipeline-conduit { display: none; } .tech-telemetry-hud { grid-template-columns: 1fr; } .lifespan-stage-canvas, .recommender-output-bar { grid-template-columns: 1fr; text-align: left; } .stage-action-box, .output-action-dock { align-items: flex-start; text-align: left; } .h2-support-channels-rail { grid-template-columns: 1fr; } } @media (max-width: 768px) { .h2-hero-headline { font-size: 2.4rem; } .h2-title { font-size: 2rem; } .matrix-row { grid-template-columns: 1fr; gap: 12px; } .tat-col { text-align: left; } .lifespan-nav-track { grid-template-columns: 1fr 1fr; } .prep-stage-item { flex-direction: column; align-items: flex-start; gap: 16px; } .prep-time-indicator { border-right: none; border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-bottom: 12px; text-align: left; } } /* ========================================================================== REDESIGNED CORE VALUES (ACCORDION) ========================================================================== */ .core-values-modern-wrapper { margin-top: 3rem; } .values-accordion-grid { display: flex; gap: 16px; height: 250px; border-radius: 20px; overflow: hidden; margin-bottom: 2rem; } .value-accordion-item { flex: 1; position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); border: 1px solid var(--border-light); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; display: flex; align-items: flex-end; padding: 30px 24px; } .value-accordion-item:hover, .value-accordion-item.active { flex: 2.5; background: linear-gradient(180deg, #092c4c 0%, #06192a 100%); border-color: var(--brand-cyan); box-shadow: 0 15px 35px rgba(20, 155, 215, 0.15); } .value-accordion-item .value-bg-icon { position: absolute; top: -20px; right: -20px; font-size: 150px; color: rgba(255, 255, 255, 0.02); transition: all 0.5s ease; z-index: 0; } .value-accordion-item:hover .value-bg-icon, .value-accordion-item.active .value-bg-icon { color: rgba(25, 199, 181, 0.05); transform: scale(1.1) rotate(-10deg); } .value-accordion-item .value-content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; } .value-accordion-item .value-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(20, 155, 215, 0.1); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: auto; transition: all 0.3s ease; } .value-accordion-item:hover .value-icon, .value-accordion-item.active .value-icon { background: var(--brand-cyan); color: #fff; box-shadow: 0 5px 15px rgba(25, 199, 181, 0.4); } .value-accordion-item h5 { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; white-space: nowrap; transition: color 0.3s ease; } .value-accordion-item:hover h5, .value-accordion-item.active h5 { color: #fff; } .value-accordion-item p { font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin: 0; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; transition-delay: 0s; max-height: 0; overflow: hidden; } .value-accordion-item:hover p, .value-accordion-item.active p { opacity: 1; transform: translateY(0); transition-delay: 0.1s; max-height: 200px; margin-top: 10px; } @media (max-width: 991px) { .values-accordion-grid { flex-direction: column; height: auto; } .value-accordion-item { padding: 24px; flex: auto; height: auto; } .value-accordion-item:hover, .value-accordion-item.active { flex: auto; } .value-accordion-item p { opacity: 1; transform: translateY(0); max-height: 200px; color: var(--text-secondary); } .value-accordion-item:hover p, .value-accordion-item.active p { color: rgba(255, 255, 255, 0.7); } .value-accordion-item .value-icon { margin-bottom: 20px; } } /* ========================================================================== REDESIGNED QUALITY BENTO BOX ========================================================================== */ .quality-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, auto); gap: 24px; margin-bottom: 4rem; } .quality-bento-card { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 20px; padding: 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); grid-column: span 1; } .quality-bento-card.bento-large { grid-column: span 2; background: linear-gradient(145deg, var(--bg-primary) 0%, rgba(20, 155, 215, 0.03) 100%); } .quality-bento-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; padding: 2px; background: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; } .quality-bento-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } .quality-bento-card:hover::before { opacity: 1; } .quality-bento-card .pillar-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(25, 199, 181, 0.1); color: var(--brand-cyan); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 24px; transition: all 0.4s ease; } .quality-bento-card:hover .pillar-icon { background: var(--brand-cyan); color: #fff; transform: rotate(360deg); } .quality-bento-card h4 { font-family: 'Manrope', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; transition: color 0.3s ease; } .quality-bento-card p { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); margin: 0; } @media (max-width: 991px) { .quality-bento-grid { grid-template-columns: repeat(2, 1fr); } .quality-bento-card.bento-large { grid-column: span 2; } } @media (max-width: 767px) { .quality-bento-grid { grid-template-columns: 1fr; } .quality-bento-card.bento-large { grid-column: span 1; } } /* ============================================================================================ HEALTHLAB — ABOUT PAGE (about.html) — ab- SECTIONS Built on existing design tokens (:root variables) + shared .page-hero-section / .gen-section-head / .section-eyebrow / .section-container components, so dark mode and RTL inherit automatically wherever logical properties / var() colors are used. ============================================================================================ */ .ab-story, .ab-process, .ab-values, .ab-team, .ab-accreditation { padding-top: var(--section-pad-y) !important; padding-bottom: var(--section-pad-y) !important; } /* ============================================================ 2. OUR STORY ============================================================ */ .ab-story { background: var(--bg-primary); } .ab-story-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4.5rem; align-items: center; } .ab-story-media { position: relative; } .ab-story-media img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius-lg); display: block; box-shadow: 0 30px 70px rgba(15,60,88,.14); } .ab-story-pullquote { position: relative; z-index: 2; margin: -3.5rem 1.8rem 0 auto; width: calc(100% - 1.8rem); max-width: 380px; padding: 1.8rem 2rem 1.9rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 6px; box-shadow: 0 24px 60px rgba(15,60,88,.16); } .ab-story-pullquote i { color: var(--accent-primary); font-size: 1.3rem; opacity: .5; } .ab-story-pullquote p { margin: .7rem 0 1.1rem; font-family: "Manrope", sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.55; color: var(--text-primary); letter-spacing: -.01em; } .ab-story-signee { display: flex; flex-direction: column; gap: 2px; } .ab-story-signee strong { font-size: 14px; font-weight: 700; color: var(--text-primary); } .ab-story-signee span { font-size: 12.5px; color: var(--text-muted); } .ab-story-copy p { font-size: 15.5px; line-height: 1.85; margin: 0 0 1.15rem; } .ab-story-copy p:last-of-type { margin-bottom: 1.6rem; } .ab-story-link { display: inline-flex; align-items: center; gap: 10px; font-family: "Manrope", sans-serif; font-size: 14.5px; font-weight: 700; color: var(--accent-primary); transition: gap var(--transition-fast); } .ab-story-link i { font-size: 12px; transition: transform var(--transition-fast); } .ab-story-link:hover { gap: 14px; } .ab-story-link:hover i { transform: translateX(3px); } @media (max-width: 1023px) { .ab-story-grid { grid-template-columns: 1fr; gap: 2.6rem; } .ab-story-media img { height: 380px; } .ab-story-pullquote { max-width: 340px; } } @media (max-width: 766px) { .ab-story-media img { height: 300px; } .ab-story-pullquote { margin-inline: 0; width: 100%; max-width: none; margin-top: -2.2rem; padding: 1.4rem 1.5rem; } } /* ============================================================ 3. HOW A SAMPLE BECOMES A REPORT (process rail) ============================================================ */ .ab-process { background: var(--bg-secondary); } .ab-process-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } .ab-process-rail::before { content: ""; position: absolute; top: 68px; left: 0%; right: 12.5%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-medium) 12%, var(--border-medium) 88%, transparent); z-index: 0; } .ab-process-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 0 1.2rem; } .ab-process-index { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 14px; } .ab-process-icon { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 1.4rem; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-light); color: var(--accent-primary); font-size: 1.5rem; box-shadow: 0 14px 34px rgba(15,60,88,.08); transition: all var(--transition-base); } .ab-process-step:hover .ab-process-icon { background: linear-gradient(135deg, var(--button-primary), var(--accent-secondary)); border-color: transparent; color: #fff; transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,155,215,.24); } .ab-process-step h3 { font-size: 1.08rem; margin-bottom: 8px; } .ab-process-step p { font-size: 14px; line-height: 1.75; margin: 0; } @media (max-width: 1023px) { .ab-process-rail { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem; } .ab-process-rail::before { display: none; } } @media (max-width: 766px) { .ab-process-rail { grid-template-columns: 1fr; gap: 2.2rem; } .ab-process-icon { width: 66px; height: 66px; font-size: 1.3rem; } } /* ============================================================ 4. WHAT WE HOLD OURSELVES TO (values grid) ============================================================ */ .ab-values { background: var(--bg-primary); } .ab-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .ab-value-card { padding: 2.2rem 2rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: all var(--transition-base); } .ab-value-card:hover { transform: translateY(-6px); border-color: var(--border-accent); box-shadow: 0 22px 50px rgba(15,60,88,.1); } .ab-value-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 1.3rem; border-radius: 14px; background: var(--accent-soft); color: var(--accent-primary); font-size: 1.2rem; transition: all var(--transition-base); } .ab-value-card:hover .ab-value-icon { background: linear-gradient(135deg, var(--button-primary), var(--accent-secondary)); color: #fff; } .ab-value-card h3 { font-size: 1.08rem; margin-bottom: 9px; } .ab-value-card p { font-size: 14px; line-height: 1.75; margin: 0; } @media (max-width: 1023px) { .ab-values-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 766px) { .ab-values-grid { grid-template-columns: 1fr; } .ab-value-card { padding: 1.8rem 1.6rem; } } /* ============================================================ 5. MEET OUR PATHOLOGISTS (flip cards) ============================================================ */ .ab-team { background: var(--bg-secondary); } .ab-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } .ab-team-card { perspective: 1600px; } .ab-team-flip { position: relative; display: block; width: 100%; height: 380px; padding: 0; background: transparent; border: 0; text-align: start; cursor: pointer; } .ab-team-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-md); overflow: hidden; transition: transform .6s cubic-bezier(.22,1,.36,1); } .ab-team-front { background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: 0 16px 40px rgba(15,60,88,.08); transform: rotateY(0deg); display: flex; flex-direction: column; } .ab-team-front img { width: 100%; height: 260px; object-fit: cover; display: block; } .ab-team-front h3 { margin: 1.1rem 1.3rem 2px; font-size: 1.05rem; } .ab-team-front span { margin: 0 1.3rem; font-size: 13px; color: var(--accent-primary); font-weight: 600; } .ab-team-front small { margin-top: auto; padding: 10px 1.3rem 1.1rem; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); font-weight: 600; } .ab-team-front small i { font-size: 11px; } .ab-team-back { transform: rotateY(180deg); background: linear-gradient(150deg, var(--brand-deep), var(--brand-navy)); padding: 2rem 1.7rem; display: flex; flex-direction: column; justify-content: center; } .ab-team-back-kicker { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-secondary); } .ab-team-back p { margin: 0; font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.85); } .ab-team-card.is-flipped .ab-team-front { transform: rotateY(-180deg); } .ab-team-card.is-flipped .ab-team-back { transform: rotateY(0deg); } @media (max-width: 1023px) { .ab-team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 766px) { .ab-team-grid { grid-template-columns: 1fr; } .ab-team-flip { height: 300px; } } /* ============================================================ 6. ACCREDITATION & RECOGNITION ============================================================ */ .ab-accreditation { background: var(--bg-primary); } .ab-accred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .ab-accred-card { position: relative; padding: 2.1rem 1.8rem; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); text-align: start; cursor: default; transition: all var(--transition-base); } .ab-accred-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 1.2rem; border-radius: 50%; border: 1.5px solid var(--border-accent); color: var(--accent-primary); font-size: 1.2rem; } .ab-accred-card h3 { font-size: 1rem; margin-bottom: 4px; } .ab-accred-body { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700; color: var(--accent-primary); letter-spacing: .03em; } .ab-accred-card p { font-size: 13.5px; line-height: 1.7; margin: 0; color: var(--text-secondary); } .ab-accred-card:hover, .ab-accred-card.is-active { border-color: var(--border-accent); box-shadow: 0 18px 44px rgba(15,60,88,.1); transform: translateY(-4px); } @media (max-width: 1023px) { .ab-accred-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 766px) { .ab-accred-grid { grid-template-columns: 1fr; } } /* ============================================================ 7. CTA BANNER ============================================================ */ .ab-cta { padding: 4.6rem 0; background: linear-gradient(120deg, var(--brand-deep) 0%, var(--brand-navy) 60%, #0d3f63 100%); } .ab-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; } .ab-cta-copy { max-width: 560px; } .ab-cta .section-eyebrow { color: var(--accent-secondary); } .ab-cta .section-eyebrow span { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); } .ab-cta-copy h2 { color: #fff; margin-top: 10px; font-size: clamp(1.9rem, 2.8vw, 2.5rem); } .ab-cta-copy p { margin-top: 12px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; } .ab-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; flex: 0 0 auto; } @media (max-width: 766px) { .ab-cta { padding: 3.6rem 0; } .ab-cta-inner { flex-direction: column; align-items: flex-start; } .ab-cta-actions { width: 100%; } .ab-cta-actions .hero-primary-button, .ab-cta-actions .hero-secondary-button { width: 100%; } } /* ============================================================ HOME 2 — PREMIUM NON-GRID SECTIONS (HealthLab) ============================================================ */ /* ---------- Shared primitives ---------- */ .h2-container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 5rem); } .h2-section { position: relative; padding-block: clamp(3.5rem, 7vw, var(--section-pad-y)); overflow: clip; } .h2-section:nth-of-type(even) { background: var(--bg-secondary); } .h2-section-head { max-width: 760px; margin-bottom: clamp(2.25rem, 5vw, 3.75rem); } .h2-section-head[data-aos] { text-align: left; } .h2-kicker { display: inline-flex; align-items: center; gap: .55rem; font-family: "Manrope", sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-primary); padding: .5rem 1.05rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--border-accent); margin-bottom: 1.1rem; } .h2-kicker.light-kicker { color: var(--text-light); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); } .h2-heading { font-family: "Manrope", sans-serif; font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1.18; color: var(--text-primary); letter-spacing: -.02em; } .h2-gradient-text { background: linear-gradient(100deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .h2-subheading { margin-top: .9rem; font-size: 1.02rem; color: var(--text-secondary); max-width: 620px; } /* Primary / ghost buttons (scoped) */ .h2-btn-primary { display: inline-flex; align-items: center; gap: .7rem; padding: .95rem 1.7rem; border-radius: 999px; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-family: "Manrope", sans-serif; font-weight: 700; font-size: .95rem; box-shadow: 0 14px 34px var(--border-accent); transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); } .h2-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px var(--border-accent); filter: saturate(1.12); } .h2-btn-primary i { font-size: .85em; transition: transform var(--transition-fast); } .h2-btn-primary:hover i.fa-arrow-right { transform: translateX(4px); } .h2-btn-primary.full-width { width: 100%; justify-content: center; } .h2-btn-ghost { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: 999px; border: 1px solid var(--border-medium); color: var(--text-primary); font-family: "Manrope", sans-serif; font-weight: 600; font-size: .95rem; background: var(--bg-elevated); transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast); } .h2-btn-ghost:hover { border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-3px); } .h2-btn-ghost i { color: var(--accent-primary); } /* ============================================================ 1. HERO ============================================================ */ .h2-hero { position: relative; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem); overflow: clip; } .h2-hero-ambient { position: absolute; pointer-events: none; } .h2-ambient-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; } .orb-primary { width: 520px; height: 520px; top: -160px; inset-inline-start: -140px; background: radial-gradient(circle, var(--accent-soft), transparent 70%); } .orb-cyan { width: 460px; height: 460px; bottom: -180px; inset-inline-end: -120px; background: radial-gradient(circle, rgba(25,199,181,.14), transparent 70%); } .h2-ambient-mesh { position: absolute; inset: 0; background-image: radial-gradient(var(--border-light) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%); opacity: .55; } .h2-hero-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .h2-status-pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .45rem 1.1rem .45rem .55rem; border-radius: 999px; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); box-shadow: var(--header-shadow); font-size: .8rem; font-weight: 600; color: #e2e8f0; margin-bottom: 1.5rem; } .h2-pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-secondary); position: relative; } .h2-pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent-secondary); opacity: .55; animation: h2Ping 1.8s ease-out infinite; } @keyframes h2Ping { from { transform: scale(.5); opacity: .8; } to { transform: scale(1.7); opacity: 0; } } .h2-pill-metric { color: #38bdf8; font-family: "Manrope", sans-serif; font-weight: 800; padding-inline-start: .6rem; border-inline-start: 1px solid rgba(255, 255, 255, 0.2); } .h2-hero-headline { font-family: "Manrope", sans-serif; font-size: clamp(2.1rem, 4.6vw, 3.7rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #ffffff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); } .h2-hero-description { margin-top: 1.25rem; max-width: 560px; font-size: 1.05rem; color: #cbd5e1 !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); font-weight: 450; } /* Quick search */ .h2-quicksearch-wrap { margin-top: 1.75rem; max-width: 580px; } .h2-quicksearch-bar { display: flex; align-items: center; gap: .6rem; padding: .45rem .45rem .45rem 1.1rem; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .h2-quicksearch-bar:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--accent-soft); } .h2-search-icon { color: var(--accent-primary); display: grid; place-items: center; } .h2-quicksearch-bar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary); font-size: .95rem; outline: none; } .h2-quicksearch-bar input::placeholder { color: var(--text-muted); } .h2-btn-search { padding: .72rem 1.4rem; border-radius: 999px; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-family: "Manrope", sans-serif; font-weight: 700; font-size: .88rem; white-space: nowrap; } .h2-popular-chips { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; padding-inline: .4rem; } .h2-chip-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); } .h2-search-chip { padding: .38rem .95rem; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-secondary); font-size: .78rem; font-weight: 600; transition: all var(--transition-fast); } .h2-search-chip:hover, .h2-search-chip.active { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--accent-soft); } .h2-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 1.9rem; } /* Telemetry strip */ .h2-hero-telemetry { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.15); } .h2-telemetry-num { font-family: "Manrope", sans-serif; font-size: 1.7rem; font-weight: 800; color: #38bdf8; line-height: 1; } .h2-telemetry-desc { margin-top: .3rem; font-size: .78rem; color: #cbd5e1; font-weight: 500; } .h2-telemetry-divider { width: 1px; height: 42px; background: rgba(255, 255, 255, 0.15); } /* HUD console */ .h2-hero-visual { position: relative; } .h2-hud-console { position: relative; padding: 1.6rem; border-radius: var(--radius-lg); overflow: hidden; } .h2-hud-console::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 12%; height: 3px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary), transparent); } .h2-hud-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; } .h2-hud-badge { display: inline-flex; align-items: center; gap: .5rem; font-family: "Manrope", sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: #e2e8f0 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .h2-beacon-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 4px rgba(46,204,113,.18); } .h2-hud-time { font-family: "Manrope", sans-serif; font-size: .74rem; font-weight: 800; color: #38bdf8 !important; font-variant-numeric: tabular-nums; } .h2-dial-stage { position: relative; height: 300px; display: grid; place-items: center; } .h2-dial-orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.22); } .orbit-outer { width: 280px; height: 280px; animation: h2Spin 26s linear infinite; } .orbit-middle { width: 210px; height: 210px; border-color: rgba(56, 189, 248, 0.5); animation: h2Spin 18s linear infinite reverse; } .orbit-inner { width: 150px; height: 150px; border-style: solid; border-color: rgba(255, 255, 255, 0.16); } @keyframes h2Spin { to { transform: rotate(360deg); } } .h2-dial-core { position: relative; z-index: 2; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), transparent 60%), linear-gradient(140deg, var(--accent-primary), var(--accent-secondary)); box-shadow: 0 18px 44px var(--border-accent); color: #fff; } .h2-core-sensor { display: grid; place-items: center; text-align: center; } .h2-core-sensor i { font-size: 1.15rem; opacity: .92; } .h2-sensor-val { font-family: "Manrope", sans-serif; font-size: 1.22rem; font-weight: 800; margin-top: .2rem; } .h2-core-sensor small { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; } .h2-orbit-node { position: absolute; display: grid; place-items: center; text-align: center; gap: .1rem; padding: .55rem .8rem; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); font-size: .66rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; animation: h2Float 5.5s ease-in-out infinite; } .h2-orbit-node i { font-size: .78rem; color: var(--accent-primary); } .h2-orbit-node em { font-style: normal; font-size: .58rem; font-weight: 700; color: var(--accent-secondary); } .node-1 { top: 6%; inset-inline-start: 4%; } .node-2 { top: 42%; inset-inline-end: -2%; animation-delay: -1.8s; } .node-3 { bottom: 6%; inset-inline-start: 12%; animation-delay: -3.4s; } @keyframes h2Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .h2-floating-ticket { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; padding: .9rem 1.1rem; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); } .h2-ticket-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-primary); font-size: 1.05rem; } .h2-ticket-content { display: grid; gap: .15rem; } .h2-ticket-content strong { font-size: .86rem; color: var(--text-primary); } .h2-ticket-content span { font-size: .74rem; color: var(--text-muted); line-height: 1.45; } .h2-ticket-tag { margin-inline-start: auto; flex: none; padding: .3rem .75rem; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #16a34a; background: rgba(22,163,74,.1); } .h2-hud-waveform { margin-top: 1.2rem; } .h2-waveform-label { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #cbd5e1 !important; margin-bottom: .5rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .h2-pulse-svg { width: 100%; height: 54px; color: #22d3ee !important; } .h2-pulse-path { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: h2Draw 3.2s ease forwards infinite alternate; filter: drop-shadow(0 2px 6px var(--border-accent)); } @keyframes h2Draw { to { stroke-dashoffset: 0; } } /* ============================================================ 2. JOURNEY — fluid ribbon ============================================================ */ .h2-journey-ribbon { position: relative; } .h2-journey-spine { position: absolute; top: 30px; inset-inline-start: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: var(--border-light); overflow: hidden; } .h2-spine-progress { width: 100%; height: 0%; background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary)); transition: height .4s ease; } .h2-journey-nodes { display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); } .h2-journey-milestone { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; } .h2-milestone-marker { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elevated); border: 2px solid var(--border-medium); font-family: "Manrope", sans-serif; font-weight: 800; color: var(--text-muted); transition: all var(--transition-base); } .h2-marker-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-primary); opacity: 0; transition: opacity var(--transition-base); } .h2-journey-milestone.active .h2-milestone-marker { border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: 0 0 0 6px var(--accent-soft); } .h2-journey-milestone.active .h2-marker-pulse { opacity: .6; animation: h2Ping 2s ease-out infinite; } .h2-milestone-card { padding: 1.4rem 1.6rem; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .h2-milestone-card:hover { transform: translateX(6px); border-color: var(--border-accent); box-shadow: var(--dropdown-shadow); } html[dir="rtl"] .h2-milestone-card:hover { transform: translateX(-6px); } .h2-card-badge { display: inline-block; padding: .28rem .8rem; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-primary); background: var(--accent-soft); margin-bottom: .7rem; } .h2-milestone-title { font-family: "Manrope", sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--text-primary); } .h2-milestone-desc { margin-top: .5rem; font-size: .93rem; color: var(--text-secondary); } .h2-milestone-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .95rem; padding-top: .85rem; border-top: 1px dashed var(--border-light); } .h2-milestone-meta span { font-size: .78rem; font-weight: 600; color: var(--text-secondary); } .h2-milestone-meta i { color: var(--accent-secondary); margin-inline-end: .35rem; } /* ============================================================ 3. COMPARISON CONSOLE ============================================================ */ .h2-compare-console { border-radius: var(--radius-lg); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--dropdown-shadow); overflow: hidden; } .h2-compare-switcher { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1.1rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); } .h2-switch-btn { flex: 1 1 240px; display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--bg-elevated); text-align: start; transition: all var(--transition-fast); position: relative; } .h2-switch-btn:hover { border-color: var(--border-accent); } .h2-switch-btn.active { border-color: var(--accent-primary); background: var(--accent-soft); box-shadow: 0 8px 22px var(--border-accent); } .h2-switch-icon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-primary); font-size: 1rem; } .h2-switch-btn.active .h2-switch-icon { background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary)); color: #fff; } .h2-switch-info { display: grid; gap: .1rem; } .h2-switch-info strong { font-size: .88rem; color: var(--text-primary); } .h2-switch-info small { font-size: .72rem; color: var(--text-muted); } .h2-switch-tag { margin-inline-start: auto; align-self: flex-start; padding: .22rem .6rem; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-tertiary); } .h2-switch-tag.featured-tag { color: #fff; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); } .h2-compare-viewport { padding: clamp(1.4rem, 3.5vw, 2.4rem); } .h2-viewport-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.2rem; padding-bottom: 1.4rem; border-bottom: 1px dashed var(--border-light); } .h2-vh-title h3 { font-family: "Manrope", sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--text-primary); } .h2-vh-title p { margin-top: .45rem; max-width: 560px; font-size: .92rem; color: var(--text-secondary); } .h2-vh-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; } .h2-price-cur { font-family: "Manrope", sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--accent-primary); } .h2-price-val { font-family: "Manrope", sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--text-primary); line-height: 1; } .h2-price-orig { font-size: .92rem; color: var(--text-muted); text-decoration: line-through; } .h2-discount-badge { padding: .3rem .75rem; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #fff; background: linear-gradient(115deg, #e0524f, #f07a3c); } .h2-spec-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; padding-block: 1.5rem; } .h2-metric-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .55rem; } .h2-metric-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); } .h2-metric-reading { font-family: "Manrope", sans-serif; font-size: .85rem; font-weight: 800; color: var(--text-primary); } .h2-metric-bar { height: 7px; border-radius: 999px; background: var(--bg-tertiary); overflow: hidden; } .h2-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transition: width .7s cubic-bezier(.22,1,.36,1); } .h2-organ-title { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .8rem; } .h2-organ-pills { display: flex; flex-wrap: wrap; gap: .55rem; } .h2-organ-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-light); font-size: .8rem; font-weight: 600; color: var(--text-secondary); } .h2-organ-pill i { color: var(--accent-primary); font-size: .74rem; } .h2-viewport-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed var(--border-light); } .h2-vf-guarantee { display: inline-flex; align-items: center; gap: .6rem; font-size: .86rem; font-weight: 600; color: var(--text-secondary); } .h2-vf-guarantee i { color: var(--accent-secondary); } /* ============================================================ 4. TECH SHOWCASE ============================================================ */ .h2-tech-console { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } .h2-tech-nav { display:grid; gap:.7rem; align-self:center; } .h2-tech-tab { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.2rem; border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--bg-elevated); text-align: start; transition: all var(--transition-fast); } .h2-tech-tab i { margin-inline-start: auto; color: var(--text-muted); font-size: .8rem; transition: transform var(--transition-fast), color var(--transition-fast); } .h2-tech-tab:hover { border-color: var(--border-accent); } .h2-tech-tab.active { border-color: var(--accent-primary); background: linear-gradient(115deg, var(--accent-soft), transparent); box-shadow: 0 10px 26px var(--border-accent); } .h2-tech-tab.active i { color: var(--accent-primary); transform: translateX(4px); } html[dir="rtl"] .h2-tech-tab.active i { transform: translateX(-4px); } .h2-tab-idx { font-family: "Manrope", sans-serif; font-size: .8rem; font-weight: 800; color: var(--accent-primary); opacity: .75; } .h2-tab-meta { display: grid; gap: .12rem; } .h2-tab-meta strong { font-size: .95rem; color: var(--text-primary); } .h2-tab-meta small { font-size: .76rem; color: var(--text-muted); } .h2-screen-glass { border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem); background: linear-gradient(150deg, var(--bg-elevated), var(--bg-secondary)); border: 1px solid var(--border-light); box-shadow: var(--dropdown-shadow); } .h2-screen-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; } .h2-tech-badge { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-primary); background: var(--accent-soft); padding: .3rem .8rem; border-radius: 999px; } .h2-screen-title h3 { margin-top: .6rem; font-family: "Manrope", sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--text-primary); } .h2-calibration-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .95rem; border-radius: 999px; border: 1px solid var(--border-light); font-size: .74rem; font-weight: 700; color: var(--text-secondary); background: var(--bg-elevated); } .h2-green-beacon { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 4px rgba(46,204,113,.16); } .h2-tech-display-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; align-items: center; } .h2-tech-telemetry { display: grid; gap: 1.05rem; } .h2-tel-item { display: grid; gap: .15rem; padding-bottom: .95rem; border-bottom: 1px dashed var(--border-light); } .h2-tel-item:last-child { border-bottom: 0; padding-bottom: 0; } .h2-tel-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .h2-tel-value { font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 800; color: var(--text-primary); } .h2-tech-visual-pod { display: grid; place-items: center; } .h2-hologram-circle { position: relative; width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--accent-soft), transparent 72%); border: 1px dashed var(--border-accent); } .h2-holo-pulse { position: absolute; inset: 14px; border-radius: 50%; border: 1px solid var(--border-accent); animation: h2Ping 2.6s ease-out infinite; } .h2-holo-graphic { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-size: 2.4rem; box-shadow: 0 18px 40px var(--border-accent); } .h2-holo-stats { position: absolute; bottom: -8px; padding: .45rem 1rem; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); text-align: center; line-height: 1.2; } .h2-holo-stats span { font-family: "Manrope", sans-serif; font-size: .9rem; font-weight: 800; color: var(--accent-primary); } .h2-holo-stats small { display: block; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .h2-tech-clinical-note { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.6rem; padding: .95rem 1.15rem; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--border-accent); font-size: .85rem; color: var(--text-secondary); } .h2-tech-clinical-note i { color: var(--accent-primary); margin-top: .2rem; } /* ============================================================ 5. TIMELINE ============================================================ */ .h2-timeline-track { position: relative; display: grid; gap: clamp(1.5rem, 3.5vw, 2.2rem); } .h2-timeline-spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary), var(--border-light)); } html[dir="rtl"] .h2-timeline-spine { left: auto; right: 50%; transform: translateX(50%); } .h2-timeline-row { position: relative; width: calc(50% - clamp(1.5rem, 3vw, 2.5rem)); } .h2-timeline-row.left { margin-inline-end: auto; } .h2-timeline-row.right { margin-inline-start: auto; } .h2-timeline-row::before { content: ""; position: absolute; top: 1.4rem; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-primary); border: 3px solid var(--accent-primary); box-shadow: 0 0 0 5px var(--accent-soft); z-index: 1; } .h2-timeline-row.left::before { right: calc(-1 * clamp(1.5rem, 3vw, 2.5rem) - 7px); } .h2-timeline-row.right::before { left: calc(-1 * clamp(1.5rem, 3vw, 2.5rem) - 7px); } .h2-time-badge { display: inline-block; padding: .4rem 1.05rem; border-radius: 999px; font-family: "Manrope", sans-serif; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); margin-bottom: .8rem; box-shadow: 0 8px 20px var(--border-accent); } .h2-time-content { padding: 1.35rem 1.5rem; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); transition: transform var(--transition-base), border-color var(--transition-base); } .h2-time-content:hover { transform: translateY(-4px); border-color: var(--border-accent); } .h2-time-headline { font-family: "Manrope", sans-serif; font-size: 1.08rem; font-weight: 800; color: var(--text-primary); } .h2-time-content p { margin-top: .5rem; font-size: .9rem; color: var(--text-secondary); } .h2-time-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; } .h2-time-tags span { padding: .3rem .8rem; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-tertiary); } .h2-time-interval { margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed var(--border-light); font-size: .78rem; font-weight: 700; color: var(--accent-primary); } .h2-time-interval i { margin-inline-end: .4rem; } /* ============================================================ 6. PRESCRIPTION DROPZONE ============================================================ */ .h2-rx-curved-wrap { border-radius: 20px 20px 20px 20px var(--radius-lg) var(--radius-lg); padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem); background: linear-gradient(140deg, var(--brand-deep), var(--brand-deep)); position: relative; overflow: hidden; } .h2-rx-curved-wrap::before { content: ""; position: absolute; inset-block-start: -140px; inset-inline-end: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(53,185,239,.24), transparent 70%); } .h2-rx-split { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .h2-rx-heading { font-family: "Manrope", sans-serif; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.2; color: #fff; letter-spacing: -.02em; } .h2-rx-desc { margin-top: 1rem; font-size: .97rem; color: rgba(255,255,255,.72); max-width: 520px; } .h2-rx-perks { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; margin-top: 1.7rem; } .h2-rx-perk { display: inline-flex; align-items: center; gap: .55rem; font-size: .85rem; color: rgba(255,255,255,.85); } .h2-rx-perk i { color: var(--accent-secondary); } .h2-dropzone-glass { border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); background: rgba(255,255,255,.07); border: 2px dashed rgba(255,255,255,.28); text-align: center; backdrop-filter: blur(12px); transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); } .h2-dropzone-glass.drag-over { border-color: var(--accent-secondary); background: rgba(43,215,199,.12); transform: scale(1.015); } .h2-upload-icon-pulse { width: 66px; height: 66px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: var(--accent-secondary); font-size: 1.5rem; position: relative; } .h2-upload-icon-pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(43,215,199,.45); animation: h2Ping 2.2s ease-out infinite; } .h2-dropzone-glass h3 { font-family: "Manrope", sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff; } .h2-dropzone-glass p { margin-top: .3rem; font-size: .8rem; color: rgba(255,255,255,.62); } .h2-file-browse-btn { display: inline-flex; margin-top: 1.1rem; padding: .8rem 1.6rem; border-radius: 999px; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-family: "Manrope", sans-serif; font-size: .88rem; font-weight: 700; cursor: pointer; transition: transform var(--transition-fast); } .h2-file-browse-btn:hover { transform: translateY(-2px); } .h2-upload-or { display: flex; align-items: center; gap: .9rem; margin-block: 1.2rem; color: rgba(255,255,255,.5); font-size: .68rem; font-weight: 700; letter-spacing: .14em; } .h2-upload-or::before, .h2-upload-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.18); } .h2-btn-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .85rem 1.2rem; border-radius: 999px; background: #25d366; color: #fff; font-family: "Manrope", sans-serif; font-size: .9rem; font-weight: 700; transition: transform var(--transition-fast), filter var(--transition-fast); } .h2-btn-whatsapp:hover { transform: translateY(-2px); filter: brightness(1.06); } .h2-privacy-guarantee { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.2rem; font-size: .74rem; color: rgba(255,255,255,.6); } .h2-privacy-guarantee i { color: var(--accent-secondary); } /* ============================================================ 7. RECOMMENDATIONS ============================================================ */ .h2-filter-ribbon { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.8rem; } .h2-filter-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.3rem; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-elevated); color: var(--text-secondary); font-family: "Manrope", sans-serif; font-size: .84rem; font-weight: 700; transition: all var(--transition-fast); } .h2-filter-pill i { color: var(--accent-primary); } .h2-filter-pill:hover { border-color: var(--border-accent); transform: translateY(-2px); } .h2-filter-pill.active { border-color: transparent; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); color: #fff; box-shadow: 0 10px 26px var(--border-accent); } .h2-filter-pill.active i { color: #fff; } .h2-rec-card-heroic { border-radius: var(--radius-lg); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--dropdown-shadow); overflow: hidden; } .h2-rec-badge-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: 1.05rem clamp(1.4rem, 3vw, 2.2rem); background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); } .h2-rec-kicker { font-family: "Manrope", sans-serif; font-size: .86rem; font-weight: 800; color: var(--accent-primary); } .h2-rec-badge { padding: .32rem .9rem; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); } .h2-rec-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.4rem, 3vw, 2.5rem); padding: clamp(1.4rem, 3vw, 2.2rem); } .h2-rec-title { font-family: "Manrope", sans-serif; font-size: 1.45rem; font-weight: 800; color: var(--text-primary); } .h2-rec-summary { margin-top: .6rem; font-size: .93rem; color: var(--text-secondary); } .h2-rec-test-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; } .h2-test-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .48rem 1rem; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-light); font-size: .8rem; font-weight: 600; color: var(--text-secondary); } .h2-test-pill i { color: var(--accent-secondary); font-size: .72rem; } .h2-rec-pricing-box { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-md); background: linear-gradient(160deg, var(--accent-soft), transparent); border: 1px solid var(--border-accent); align-content: start; } .h2-rec-fasting-tag, .h2-rec-tat-tag { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; color: var(--text-secondary); } .h2-rec-fasting-tag i, .h2-rec-tat-tag i { color: var(--accent-primary); } .h2-rec-price-row { display: flex; align-items: baseline; gap: .5rem; } .h2-rec-cur { font-family: "Manrope", sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--accent-primary); } .h2-rec-amt { font-family: "Manrope", sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--text-primary); line-height: 1; } .h2-rec-old { font-size: .95rem; color: var(--text-muted); text-decoration: line-through; } .h2-rec-foot-note { display: flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 600; color: var(--text-muted); } .h2-rec-foot-note i { color: var(--accent-secondary); } /* ============================================================ 8. PREP CHRONOMETER ============================================================ */ .h2-prep-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .h2-prep-chronometer { display: grid; justify-items: center; gap: 1.4rem; } .h2-chrono-dial { position: relative; width: min(280px, 70vw); aspect-ratio: 1; display: grid; place-items: center; } .h2-chrono-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .h2-chrono-track { stroke: var(--bg-tertiary); } .h2-chrono-fill { stroke: url(#h2ChronoGrad); stroke: var(--accent-primary); stroke-linecap: round; filter: drop-shadow(0 4px 12px var(--border-accent)); } .h2-chrono-center { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; gap: .15rem; } .h2-chrono-hours { font-family: "Manrope", sans-serif; font-size: 2.4rem; font-weight: 800; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .h2-chrono-center small { font-size: .8rem; font-weight: 700; color: var(--text-secondary); letter-spacing: .06em; text-transform: uppercase; } .h2-chrono-center em { font-style: normal; font-size: .68rem; color: var(--text-muted); } .h2-chrono-caption { display: flex; align-items: flex-start; gap: .6rem; max-width: 320px; padding: .95rem 1.2rem; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); font-size: .82rem; color: var(--text-secondary); text-align: start; } .h2-chrono-caption i { color: var(--accent-primary); margin-top: .2rem; } .h2-prep-guidelines { display: grid; gap: 1rem; } .h2-prep-item { display: flex; gap: 1.1rem; padding: 1.25rem 1.4rem; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); transition: transform var(--transition-base), border-color var(--transition-base); position: relative; overflow: hidden; } .h2-prep-item::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary)); opacity: 0; transition: opacity var(--transition-base); } .h2-prep-item:hover { transform: translateX(6px); border-color: var(--border-accent); } html[dir="rtl"] .h2-prep-item:hover { transform: translateX(-6px); } .h2-prep-item:hover::before { opacity: 1; } .h2-prep-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.1rem; } .h2-prep-icon.water { background: rgba(20,155,215,.12); color: var(--accent-primary); } .h2-prep-icon.meds { background: rgba(25,199,181,.12); color: var(--accent-secondary); } .h2-prep-icon.fitness { background: rgba(240,122,60,.12); color: #f07a3c; } .h2-prep-icon.alcohol { background: rgba(224,82,79,.12); color: #e0524f; } .h2-prep-text h4 { font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 800; color: var(--text-primary); } .h2-prep-text p { margin-top: .35rem; font-size: .86rem; color: var(--text-secondary); } .h2-prep-text strong { color: var(--text-primary); } /* ============================================================ 9. SAFETY LATTICE ============================================================ */ .h2-lattice-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2.5vw, 1.6rem); } .h2-lattice-node { position: relative; flex: 1 1 300px; max-width: 430px; padding: 1.8rem 1.7rem 1.6rem; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px; background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); overflow: hidden; } .h2-lattice-node::after { content: ""; position: absolute; bottom: 0; inset-inline-end: 0; width: 90px; height: 90px; border-radius: 100% 0 0 0; background: linear-gradient(135deg, var(--accent-soft), transparent); opacity: 0; transition: opacity var(--transition-base); } .h2-lattice-node:hover, .h2-lattice-node.active-node { transform: translateY(-6px); border-color: var(--border-accent); box-shadow: var(--dropdown-shadow); } .h2-lattice-node:hover::after, .h2-lattice-node.active-node::after { opacity: 1; } .h2-node-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-size: 1.25rem; box-shadow: 0 12px 28px var(--border-accent); margin-bottom: 1.1rem; } .h2-lattice-node h3 { font-family: "Manrope", sans-serif; font-size: 1.08rem; font-weight: 800; color: var(--text-primary); } .h2-lattice-node p { margin-top: .55rem; font-size: .88rem; color: var(--text-secondary); } .h2-node-num { position: absolute; top: 1.2rem; inset-inline-end: 1.4rem; font-family: "Manrope", sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--bg-tertiary); line-height: 1; } /* ============================================================ 10. AGE SPECTRUM ============================================================ */ .h2-spectrum-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; } .h2-age-tab { flex: 1 1 180px; display: grid; gap: .1rem; justify-items: start; padding: 1.05rem 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--bg-elevated); text-align: start; transition: all var(--transition-fast); } .h2-age-tab i { font-size: 1.15rem; color: var(--accent-primary); margin-bottom: .35rem; } .h2-age-tab span { font-family: "Manrope", sans-serif; font-size: .95rem; font-weight: 800; color: var(--text-primary); } .h2-age-tab small { font-size: .74rem; font-weight: 600; color: var(--text-muted); } .h2-age-tab:hover { border-color: var(--border-accent); transform: translateY(-3px); } .h2-age-tab.active { border-color: transparent; background: linear-gradient(140deg, var(--accent-primary), var(--accent-secondary)); box-shadow: 0 14px 32px var(--border-accent); } .h2-age-tab.active i, .h2-age-tab.active span { color: #fff; } .h2-age-tab.active small { color: rgba(255,255,255,.78); } .h2-age-display { border-radius: var(--radius-lg); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--dropdown-shadow); overflow: hidden; } .h2-age-content { padding: clamp(1.5rem, 3.5vw, 2.4rem); } .h2-age-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.1rem; } .h2-age-chip { display: inline-block; padding: .3rem .9rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-primary); background: var(--accent-soft); border: 1px solid var(--border-accent); margin-bottom: .7rem; } .h2-age-title { font-family: "Manrope", sans-serif; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; color: var(--text-primary); } .h2-age-price-box { text-align: end; } .h2-price-sm { display: block; font-size: .74rem; color: var(--text-muted); font-weight: 600; } .h2-age-price-box strong { font-family: "Manrope", sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--accent-primary); } .h2-age-narrative { font-size: .95rem; color: var(--text-secondary); max-width: 680px; } .h2-bio-heading { display: block; margin-top: 1.4rem; margin-bottom: .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .h2-bio-tags { display: flex; flex-wrap: wrap; gap: .55rem; } .h2-bio-tag { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.05rem; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-light); font-size: .8rem; font-weight: 600; color: var(--text-secondary); } .h2-bio-tag i { color: var(--accent-primary); } .h2-age-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed var(--border-light); } .h2-painless-promise { display: inline-flex; align-items: center; gap: .55rem; font-size: .84rem; font-weight: 700; color: var(--text-secondary); } .h2-painless-promise i { color: var(--accent-secondary); } /* ============================================================ 11. CORPORATE ============================================================ */ .h2-corp-card { border-radius:20px 20px 20px 20px var(--radius-lg) var(--radius-lg); padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem); background: linear-gradient(140deg, var(--brand-deep), var(--brand-deep)); position: relative; overflow: hidden; } .h2-corp-card::after { content: ""; position: absolute; bottom: -160px; inset-inline-start: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(43,215,199,.18), transparent 70%); } .h2-corp-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .h2-corp-heading { font-family: "Manrope", sans-serif; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.2; color: #fff; letter-spacing: -.02em; } .h2-corp-desc { margin-top: 1rem; font-size: .95rem; color: rgba(255,255,255,.72); } .h2-corp-metrics { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 1.8rem; } .h2-cmetric strong { display: block; font-family: "Manrope", sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--accent-secondary); line-height: 1; } .h2-cmetric small { display: block; margin-top: .3rem; font-size: .74rem; color: rgba(255,255,255,.6); } .h2-corp-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; } .h2-btn-ghost-light { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); color: #fff; font-family: "Manrope", sans-serif; font-weight: 700; font-size: .95rem; transition: all var(--transition-fast); } .h2-btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); transform: translateY(-3px); } .h2-btn-ghost-light i { color: var(--accent-secondary); } .h2-cdash-frame { border-radius: var(--radius-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.3); } .h2-cdash-bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1.2rem; background: rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.1); } .h2-dot-red, .h2-dot-yellow, .h2-dot-green { width: 10px; height: 10px; border-radius: 50%; } .h2-dot-red { background: #ff5f57; } .h2-dot-yellow { background: #febc2e; } .h2-dot-green { background: #28c840; } .h2-cdash-title { margin-inline-start: .6rem; font-size: .74rem; font-weight: 700; color: rgba(255,255,255,.75); } .h2-cdash-body { padding: 1.4rem; display: grid; gap: 1.3rem; } .h2-cdash-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .h2-cstat-card { padding: 1.05rem 1.2rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: grid; gap: .3rem; } .h2-cstat-card span { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); } .h2-cstat-card strong { font-family: "Manrope", sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; } .h2-cstat-card strong small { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.55); } .h2-cstat-trend { font-size: .72rem; font-weight: 700; } .h2-cstat-trend.positive { color: #4ade80; } .h2-cstat-trend.neutral { color: #fbbf24; } .h2-cgraph-title { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .8rem; } .h2-cbar-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; align-items: center; gap: .8rem; margin-bottom: .7rem; } .h2-cbar-row span { font-size: .76rem; color: rgba(255,255,255,.7); } .h2-cbar-row em { font-style: normal; font-size: .76rem; font-weight: 800; color: #fff; text-align: end; } .h2-prog-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; } .h2-prog-fill { height: 100%; border-radius: 999px; } .green-fill { background: linear-gradient(90deg, #2bd7c7, #4ade80); } .yellow-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .red-fill { background: linear-gradient(90deg, #e0524f, #f87171); } /* ============================================================ 12. INSURANCE ============================================================ */ .h2-ins-ticker-wrap { overflow: hidden; position: relative; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-elevated); box-shadow: var(--header-shadow); padding-block: .85rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); user-select: none; } .h2-ins-ticker { display: flex; align-items: center; width: max-content; gap: 0.8rem; } .h2-ins-track { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; will-change: transform; animation: h2InfinityMarquee 26s linear infinite; } .h2-ins-ticker-wrap:hover .h2-ins-track { animation-play-state: paused; } @keyframes h2InfinityMarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(calc(-100% - 0.8rem), 0, 0); } } html[dir="rtl"] .h2-ins-track { animation-name: h2InfinityMarqueeRTL; } @keyframes h2InfinityMarqueeRTL { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(calc(100% + 0.8rem), 0, 0); } } .h2-tpa-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.3rem; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-light); font-size: .82rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; transition: transform var(--transition-fast), border-color var(--transition-fast); } .h2-tpa-badge:hover { transform: translateY(-2px); border-color: var(--accent-primary); } .h2-tpa-badge i { color: var(--accent-secondary); } .h2-ins-workflow { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.5vw, 1.6rem); margin-top: 2rem; counter-reset: h2step; } .h2-ins-step { position: relative; flex: 1 1 260px; padding: 1.6rem 1.5rem; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); transition: transform var(--transition-base), border-color var(--transition-base); } .h2-ins-step:hover { transform: translateY(-5px); border-color: var(--border-accent); } .h2-ins-step.active { border-color: var(--accent-primary); background: linear-gradient(160deg, var(--accent-soft), transparent); } .h2-ins-step-num { display: inline-block; padding: .3rem .9rem; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-primary); background: var(--accent-soft); border: 1px solid var(--border-accent); margin-bottom: .8rem; } .h2-ins-step.active .h2-ins-step-num { color: #fff; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); border-color: transparent; } .h2-ins-step h4 { font-family: "Manrope", sans-serif; font-size: 1.02rem; font-weight: 800; color: var(--text-primary); } .h2-ins-step p { margin-top: .45rem; font-size: .86rem; color: var(--text-secondary); } /* ============================================================ 13. FAQ ============================================================ */ .h2-faq-accordion { display: grid; gap: .8rem; max-width: 900px; } .h2-faq-item { border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); overflow: hidden; transition: border-color var(--transition-fast); } .h2-faq-item.open { border-color: var(--border-accent); } .h2-faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; text-align: start; } .h2-faq-q { font-family: "Manrope", sans-serif; font-size: .98rem; font-weight: 700; color: var(--text-primary); } .h2-faq-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-primary); font-size: .78rem; transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base); } .h2-faq-item.open .h2-faq-icon { transform: rotate(180deg); background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); color: #fff; } .h2-faq-panel { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.22,1,.36,1); } .h2-faq-content { padding: 0 1.4rem 1.3rem; font-size: .92rem; color: var(--text-secondary); line-height: 1.7; } .h2-faq-content strong { color: var(--text-primary); } /* ============================================================ 14. UPDATES DISPATCH ============================================================ */ .h2-dispatch-flow { display: grid; gap: 1rem; } .h2-dispatch-item { position: relative; display: flex; align-items: stretch; gap: clamp(1rem, 2.5vw, 1.8rem); padding: 1.4rem clamp(1.3rem, 3vw, 2rem); border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .h2-dispatch-item:hover { transform: translateX(6px); border-color: var(--border-accent); box-shadow: var(--dropdown-shadow); } html[dir="rtl"] .h2-dispatch-item:hover { transform: translateX(-6px); } .h2-dispatch-item.featured-dispatch { background: linear-gradient(120deg, var(--accent-soft), transparent 55%); border-color: var(--border-accent); } .h2-dispatch-date { flex: none; display: grid; place-items: center; align-content: center; min-width: 74px; padding: .8rem .6rem; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border-light); text-align: center; height: fit-content; } .h2-d-day { font-family: "Manrope", sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--accent-primary); line-height: 1; } .h2-d-mon { font-size: .6rem; font-weight: 800; letter-spacing: .12em; color: var(--text-muted); margin-top: .2rem; } .h2-dispatch-body { display: grid; gap: .3rem; align-content: center; } .h2-dispatch-tag { justify-self: start; padding: .24rem .8rem; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .tech-tag { color: var(--accent-primary); background: var(--accent-soft); } .acc-tag { color: #16a34a; background: rgba(22,163,74,.1); } .camp-tag { color: #f07a3c; background: rgba(240,122,60,.12); } .h2-dispatch-title { font-family: "Manrope", sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--text-primary); line-height: 1.4; } .h2-dispatch-excerpt { font-size: .86rem; color: var(--text-secondary); } .h2-dispatch-arrow { flex: none; align-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-light); color: var(--accent-primary); background: var(--bg-secondary); transition: all var(--transition-fast); } .h2-dispatch-arrow:hover { background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); color: #fff; border-color: transparent; } /* ============================================================ 15. STAT / EMERGENCY RIBBON ============================================================ */ .h2-stat-ribbon { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--radius-lg); background: linear-gradient(120deg, #2a0f12, #3d1216 60%, #471419); border: 1px solid rgba(224,82,79,.35); box-shadow: 0 26px 60px rgba(224,82,79,.18); position: relative; overflow: hidden; } .h2-stat-ribbon::before { content: ""; position: absolute; top: -120px; inset-inline-end: -80px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(224,82,79,.28), transparent 70%); } .h2-stat-alert-tag { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1.05rem; border-radius: 999px; background: rgba(224,82,79,.18); border: 1px solid rgba(224,82,79,.45); font-family: "Manrope", sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fca5a5; margin-bottom: 1.1rem; } .h2-red-ping { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; position: relative; } .h2-red-ping::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ef4444; animation: h2Ping 1.4s ease-out infinite; } .h2-stat-heading { font-family: "Manrope", sans-serif; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: #fff; letter-spacing: -.01em; } .h2-stat-text { margin-top: .8rem; font-size: .93rem; color: rgba(255,255,255,.75); max-width: 560px; } .h2-stat-text strong { color: #fecaca; } .h2-stat-tests { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; } .h2-stat-tests span { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.85); } .h2-stat-tests i { color: #f87171; } .h2-stat-right { display: grid; gap: 1.3rem; justify-items: center; text-align: center; } .h2-stat-clock { display: grid; gap: .2rem; padding: 1.6rem 2.4rem; border-radius: 50%; aspect-ratio: 1; place-items: center; align-content: center; background: rgba(255,255,255,.06); border: 2px dashed rgba(224,82,79,.5); } .h2-clock-digit { font-family: "Manrope", sans-serif; font-size: 2.2rem; font-weight: 800; color: #fca5a5; line-height: 1; } .h2-stat-clock small { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); max-width: 140px; } .h2-btn-stat-emergency { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; padding: 1.05rem 1.6rem; border-radius: 999px; background: linear-gradient(115deg, #e0524f, #f07a3c); color: #fff; font-family: "Manrope", sans-serif; font-weight: 800; font-size: .95rem; box-shadow: 0 16px 36px rgba(224,82,79,.4); transition: transform var(--transition-fast), filter var(--transition-fast); } .h2-btn-stat-emergency:hover { transform: translateY(-3px); filter: brightness(1.08); } /* ============================================================ 16. SUPPORT CHANNELS ============================================================ */ .h2-support-channels { display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2vw, 1.4rem); } .h2-support-channel { flex: 1 1 240px; display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.4rem; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); box-shadow: var(--header-shadow); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .h2-support-channel:hover { transform: translateY(-5px); border-color: var(--border-accent); box-shadow: var(--dropdown-shadow); } .h2-chan-icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.3rem; } .h2-chan-icon.whatsapp { background: rgba(37,211,102,.12); color: #25d366; } .h2-chan-icon.phone { background: rgba(20,155,215,.12); color: var(--accent-primary); } .h2-chan-icon.email { background: rgba(25,199,181,.12); color: var(--accent-secondary); } .h2-chan-icon.portal { background: rgba(240,122,60,.12); color: #f07a3c; } .h2-chan-text { display: grid; gap: .1rem; } .h2-chan-text strong { font-family: "Manrope", sans-serif; font-size: .95rem; font-weight: 800; color: var(--text-primary); } .h2-chan-text span { font-size: .82rem; color: var(--text-secondary); } .h2-chan-text small { font-size: .72rem; font-weight: 600; color: var(--text-muted); } /* ============================================================ 17. FINAL BOOKING CTA ============================================================ */ .h2-final-cta-card { border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 3.25rem); background: linear-gradient(135deg, var(--brand-deep), var(--brand-deep) 65%, #0e3a5c); position: relative; overflow: hidden; box-shadow: var(--dropdown-shadow); } .h2-final-cta-card::before { content: ""; position: absolute; top: -160px; inset-inline-end: -140px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(43,215,199,.2), transparent 70%); } .h2-booking-split { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .h2-cta-headline { font-family: "Manrope", sans-serif; font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 800; line-height: 1.18; color: #fff; letter-spacing: -.02em; } .h2-cta-desc { margin-top: 1rem; font-size: .96rem; color: rgba(255,255,255,.72); max-width: 520px; } .h2-cta-points { display: grid; gap: .7rem; margin-top: 1.6rem; } .h2-point { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: rgba(255,255,255,.85); } .h2-point i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(43,215,199,.2); color: var(--accent-secondary); font-size: .62rem; } .h2-point strong { color: #fff; } .h2-express-form { display: grid; gap: .95rem; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-lg); background: rgba(255,255,255,.98); box-shadow: 0 30px 70px rgba(0,0,0,.3); } .h2-form-title { font-family: "Manrope", sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--brand-deep); text-align: center; margin-bottom: .3rem; } .h2-form-row { display: grid; gap: .35rem; } .h2-form-row label { font-size: .78rem; font-weight: 700; color: var(--text-primary); } .h2-form-row input, .h2-form-row select { width: 100%; padding: .8rem 1.05rem; border-radius: var(--radius-sm); border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-primary); font-size: .9rem; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .h2-form-row input:focus, .h2-form-row select:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--accent-soft); background: #fff; } .h2-form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95rem; } .h2-btn-submit-booking { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; padding: 1rem 1.4rem; border-radius: 999px; background: linear-gradient(115deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-family: "Manrope", sans-serif; font-weight: 800; font-size: .95rem; box-shadow: 0 14px 32px var(--border-accent); transition: transform var(--transition-fast), filter var(--transition-fast); } .h2-btn-submit-booking:hover { transform: translateY(-2px); filter: saturate(1.1); } .h2-form-success { display: flex; align-items: flex-start; gap: .6rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.3); font-size: .82rem; font-weight: 600; color: #16a34a; } /* ============================================================ HOME 2 RESPONSIVE — TABLET ============================================================ */ @media (max-width: 1100px) { .h2-hero-layout { grid-template-columns: minmax(0, 1fr); } .h2-hero-visual { max-width: 560px; margin-inline: auto; width: 100%; } .h2-tech-console { grid-template-columns: minmax(0, 1fr); } .h2-tech-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .h2-prep-layout { grid-template-columns: minmax(0, 1fr); } .h2-prep-chronometer { justify-items: center; } .h2-rx-split, .h2-corp-grid, .h2-booking-split { grid-template-columns: minmax(0, 1fr); } .h2-rec-split { grid-template-columns: minmax(0, 1fr); } .h2-stat-ribbon { grid-template-columns: minmax(0, 1fr); } .h2-stat-right { justify-items: stretch; text-align: center; } .h2-stat-clock { margin-inline: auto; } } @media (max-width: 860px) { .h2-spec-metrics { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .h2-tech-display-grid { grid-template-columns: minmax(0, 1fr); } .h2-tech-visual-pod { order: -1; } .h2-hologram-circle { width: 170px; height: 170px; } .h2-holo-graphic { width: 90px; height: 90px; font-size: 1.9rem; } /* Timeline collapses to single rail on the start side */ .h2-timeline-spine { left: 24px; right: auto; transform: none; } html[dir="rtl"] .h2-timeline-spine { left: auto; right: 24px; } .h2-timeline-row { width: 100%; padding-inline-start: 56px; } .h2-timeline-row.right { margin-inline-start: 0; } .h2-timeline-row.left::before, .h2-timeline-row.right::before { left: 17px; right: auto; } html[dir="rtl"] .h2-timeline-row { padding-inline-start: 0; padding-inline-end: 56px; } html[dir="rtl"] .h2-timeline-row.left::before, html[dir="rtl"] .h2-timeline-row.right::before { left: auto; right: 17px; } .h2-journey-spine { inset-inline-start: 26px; } .h2-journey-milestone { grid-template-columns: 54px minmax(0, 1fr); } .h2-milestone-marker { width: 54px; height: 54px; font-size: .9rem; } .h2-hero-telemetry { flex-wrap: wrap; gap: 1.2rem 1.8rem; } .h2-telemetry-divider { display: none; } .h2-form-cols { grid-template-columns: minmax(0, 1fr); } .h2-cdash-stat-row { grid-template-columns: minmax(0, 1fr); } .h2-cbar-row { grid-template-columns: 96px minmax(0, 1fr) 36px; } } /* ============================================================ HOME 2 RESPONSIVE — MOBILE ============================================================ */ @media (max-width: 640px) { .h2-section { padding-block: 2.75rem; } .h2-hero-headline { font-size: clamp(1.75rem, 8.5vw, 2.2rem); } .h2-quicksearch-bar { flex-wrap: nowrap; } .h2-btn-search { padding: .65rem 1.1rem; font-size: .8rem; } .h2-hero-actions { flex-direction: column; align-items: stretch; } .h2-hero-actions .h2-btn-primary, .h2-hero-actions .h2-btn-ghost { justify-content: center; } .h2-dial-stage { height: 260px; } .h2-dial-orbit.orbit-outer { width: 220px; height: 220px; } .h2-dial-orbit.orbit-middle { width: 165px; height: 165px; } .h2-dial-orbit.orbit-inner { width: 115px; height: 115px; } .h2-dial-core { width: 96px; height: 96px; } .h2-sensor-val { font-size: 1rem; } .h2-orbit-node { padding: .4rem .6rem; font-size: .58rem; } .node-1 { inset-inline-start: 0; } .node-2 { inset-inline-end: 0; } .node-3 { inset-inline-start: 4%; } .h2-floating-ticket { flex-wrap: wrap; } .h2-ticket-tag { margin-inline-start: 0; } .h2-journey-milestone { grid-template-columns: 44px minmax(0, 1fr); gap: .8rem; } .h2-milestone-marker { width: 44px; height: 44px; font-size: .78rem; } .h2-journey-spine { inset-inline-start: 21px; } .h2-milestone-card { padding: 1.1rem 1.2rem; } .h2-milestone-card:hover { transform: none; } .h2-switch-btn { flex: 1 1 100%; } .h2-viewport-header, .h2-viewport-footer, .h2-age-footer { flex-direction: column; align-items: stretch; } .h2-vh-pricing { align-items: flex-start; } .h2-organ-pills, .h2-rec-test-list, .h2-bio-tags { flex-direction: column; } .h2-organ-pill, .h2-test-pill, .h2-bio-tag { width: fit-content; } .h2-tech-nav { grid-template-columns: minmax(0, 1fr); } .h2-screen-header { flex-direction: column; align-items: flex-start; } .h2-hologram-circle { width: 150px; height: 150px; } .h2-timeline-row { padding-inline-start: 44px; } .h2-timeline-spine { left: 18px; } .h2-timeline-row.left::before, .h2-timeline-row.right::before { left: 11px; } html[dir="rtl"] .h2-timeline-row { padding-inline-start: 0; padding-inline-end: 44px; } html[dir="rtl"] .h2-timeline-row.left::before, html[dir="rtl"] .h2-timeline-row.right::before { left: auto; right: 11px; } html[dir="rtl"] .h2-timeline-spine { right: 18px; } .h2-dispatch-item { flex-direction: column; align-items: flex-start; } .h2-dispatch-arrow { display: none; } .h2-dispatch-item:hover { transform: none; } .h2-stat-clock { width: 160px; padding: 1.2rem; } .h2-clock-digit { font-size: 1.7rem; } .h2-btn-stat-emergency { font-size: .84rem; padding: .95rem 1.2rem; text-align: center; } .h2-support-channel { flex: 1 1 100%; } .h2-rx-curved-wrap, .h2-corp-card { border-radius: 60px 60px var(--radius-md) var(--radius-md); padding-inline: 1.25rem; } .h2-corp-metrics { gap: 1.1rem 1.8rem; } .h2-corp-ctas .h2-btn-primary, .h2-corp-ctas .h2-btn-ghost-light { width: 100%; justify-content: center; } .h2-rx-perks { flex-direction: column; gap: .7rem; } .h2-final-cta-card { padding-inline: 1.25rem; } .h2-chrono-hours { font-size: 2rem; } .h2-ins-step { flex: 1 1 100%; } .h2-lattice-node { flex: 1 1 100%; max-width: 100%; } }