/* ========================================================================== RangeMaster — Design System Clinical-modern. Three palette directions toggled via [data-palette] on . ========================================================================== */ :root { /* Type */ --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-display: 'Fraunces', 'Inter Tight', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Spacing */ --r-2: 4px; --r-3: 6px; --r-4: 8px; --r-5: 10px; --r-6: 12px; --r-8: 16px; --r-12: 24px; --r-full: 999px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.06); --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.15); /* Transitions */ --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1); --t-spring: 480ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============ PALETTE A: Renewed (default) — modernized navy + coral ============ */ :root, [data-palette="renewed"] { --bg: #FAFAF7; --bg-card: #FFFFFF; --bg-subtle: #F2F1EB; --bg-muted: #E9E7DF; --bg-inverse: #0A1F3D; --ink: #0E1726; --ink-2: #364152; --ink-3: #6B7588; --ink-4: #9AA3B3; --ink-inverse: #FAFAF7; --border: #E5E2D6; --border-strong: #C9C6B6; --brand: #0A2540; --brand-2: #1B3A6B; --brand-tint: #E6ECF5; --accent: #D9523E; --accent-2: #B83E2C; --accent-tint: #FBE7E1; --success: #2C8A56; --success-tint: #DFF1E6; --warning: #C68B12; --warning-tint: #FAEFD3; --danger: #C0392B; --danger-tint: #FBE3DE; --focus-ring: 0 0 0 3px rgba(10, 37, 64, 0.18); } /* ============ PALETTE B: Therapeutic — sage + warm terracotta ============ */ [data-palette="therapeutic"] { --bg: #F7F4ED; --bg-card: #FFFDF8; --bg-subtle: #EFEBE0; --bg-muted: #E0DAC9; --bg-inverse: #1E2A26; --ink: #1F1A14; --ink-2: #3A372F; --ink-3: #6E6A5E; --ink-4: #A19D8E; --ink-inverse: #F7F4ED; --border: #E0DAC9; --border-strong: #C1BAA3; --brand: #2D4A40; --brand-2: #466258; --brand-tint: #E0E8E2; --accent: #C97A5E; --accent-2: #A65E44; --accent-tint: #F2DED2; --success: #5C7C4E; --success-tint: #DEE7D6; --warning: #C58A2E; --warning-tint: #F3E2C2; --danger: #A84B3A; --danger-tint: #F1D9D2; --focus-ring: 0 0 0 3px rgba(45, 74, 64, 0.18); } /* ============ PALETTE C: Pulse — bold clinical cobalt ============ */ [data-palette="pulse"] { --bg: #FFFFFF; --bg-card: #FFFFFF; --bg-subtle: #F5F7FB; --bg-muted: #EBEFF7; --bg-inverse: #0B1F4A; --ink: #0B0F19; --ink-2: #2A3142; --ink-3: #5F6779; --ink-4: #9098AD; --ink-inverse: #FFFFFF; --border: #E5E9F2; --border-strong: #CBD1E0; --brand: #1B49E5; --brand-2: #1339B5; --brand-tint: #E2E9FE; --accent: #20B27A; --accent-2: #178A5E; --accent-tint: #D9F2E5; --success: #20B27A; --success-tint: #D9F2E5; --warning: #E08A18; --warning-tint: #FDEFD0; --danger: #E0354A; --danger-tint: #FCDADF; --focus-ring: 0 0 0 3px rgba(27, 73, 229, 0.22); } /* ============ Base ============ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01', 'ss03'; line-height: 1.5; } #root { min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { display: block; max-width: 100%; } ::selection { background: var(--brand); color: var(--ink-inverse); } /* ============ Type utilities ============ */ .display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; line-height: 1.04; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0; border: 1px solid transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); white-space: nowrap; user-select: none; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn:active { transform: scale(0.97); } .btn--primary { background: var(--brand); color: var(--ink-inverse); } .btn--primary:hover { background: var(--brand-2); } .btn--accent { background: var(--accent); color: var(--ink-inverse); } .btn--accent:hover { background: var(--accent-2); } .btn--secondary { background: var(--bg-card); color: var(--ink); border-color: var(--border-strong); } .btn--secondary:hover { background: var(--bg-subtle); border-color: var(--ink-3); } .btn--ghost { background: transparent; color: var(--ink-2); } .btn--ghost:hover { background: var(--bg-subtle); color: var(--ink); } .btn--sm { height: 34px; padding: 0 14px; font-size: 13px; } .btn--lg { height: 52px; padding: 0 26px; font-size: 15px; } .btn--block { width: 100%; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ============ Inputs ============ */ .input, .select, .textarea { width: 100%; height: 44px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 14px; font-size: 14px; font-family: inherit; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 90px; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); } .input::placeholder, .textarea::placeholder { color: var(--ink-4); } .input--lg { height: 52px; font-size: 15px; } .field-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; letter-spacing: 0; } .field-help { font-size: 12px; color: var(--ink-3); margin-top: 6px; } /* ============ Cards ============ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; } /* ============ Badges ============ */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background: var(--bg-subtle); color: var(--ink-2); } .badge--success { background: var(--success-tint); color: var(--success); } .badge--warn { background: var(--warning-tint); color: var(--warning); } .badge--danger { background: var(--danger-tint); color: var(--danger); } .badge--brand { background: var(--brand-tint); color: var(--brand); } .badge--accent { background: var(--accent-tint); color: var(--accent-2); } .badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ============ Animations ============ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes spin { to { transform: rotate(360deg); } } .page-enter { animation: fadeUp var(--t-slow) both; } /* ============ Scrollbars (subtle) ============ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); } /* ============ Skeleton ============ */ .skeleton { background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted) 50%, var(--bg-subtle) 100%); background-size: 1000px 100%; animation: shimmer 1.6s infinite linear; border-radius: 8px; } /* ============ Storefront top nav ============ */ .store-shell { display: flex; flex-direction: column; min-height: 100vh; } .mobile-menu-button { display: none !important; } .store-header__bar { max-width: 1280px; margin: 0 auto; padding: 14px 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .store-header__left, .store-header__actions { display: flex; align-items: center; min-width: 0; } .store-header__left { justify-content: flex-start; } .store-header__actions { justify-content: flex-end; gap: 4px; } .store-header__nav { display: flex; gap: 28px; align-items: center; } .store-header__logo { justify-self: center; } .store-header__nav-link { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), translate var(--t-fast), scale var(--t-fast); } .store-header__nav-link:hover, .store-header__nav-link:focus-visible, .store-header__nav-link.is-open { background: var(--brand-tint); color: var(--brand); box-shadow: 0 8px 22px rgba(10, 37, 64, 0.08); transform: translateY(-1px); translate: 0 -1px; } .store-header__nav-link.is-active, .store-header__nav-link.is-highlight { color: var(--brand); } .store-header__nav-link:focus-visible { outline: 2px solid rgba(10, 37, 64, 0.22); outline-offset: 3px; } .store-mega-card, .store-mega-goal, .store-mega-product, .mobile-mega__primary-link, .mobile-mega__category-card, .mobile-mega__goal-link, .mobile-mega__product-card { color: inherit; text-decoration: none; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), transform var(--t-fast), translate var(--t-fast), scale var(--t-fast); will-change: translate, scale, box-shadow; } .store-mega-card:hover, .store-mega-card:focus-visible, .mobile-mega__category-card:hover, .mobile-mega__category-card:focus-visible { border-color: rgba(10, 37, 64, 0.24) !important; box-shadow: 0 14px 32px rgba(10, 37, 64, 0.11); transform: translateY(-2px) scale(1.01); translate: 0 -2px; scale: 1.01; } .store-mega-goal:hover, .store-mega-goal:focus-visible, .mobile-mega__goal-link:hover, .mobile-mega__goal-link:focus-visible { background: #ffffff !important; border-color: rgba(10, 37, 64, 0.18) !important; color: var(--brand); box-shadow: 0 12px 28px rgba(10, 37, 64, 0.10); transform: translateY(-2px) scale(1.008); translate: 0 -2px; scale: 1.008; } .store-mega-goal--sally:hover, .store-mega-goal--sally:focus-visible, .mobile-mega__goal-link--sally:hover, .mobile-mega__goal-link--sally:focus-visible { background: #15395f !important; color: var(--ink-inverse); } .store-mega-product:hover, .store-mega-product:focus-visible, .mobile-mega__product-card:hover, .mobile-mega__product-card:focus-visible { border-color: rgba(10, 37, 64, 0.22) !important; box-shadow: 0 16px 34px rgba(10, 37, 64, 0.12); transform: translateY(-2px) scale(1.01); translate: 0 -2px; scale: 1.01; } .store-mega-product:hover img, .store-mega-product:focus-visible img, .mobile-mega__product-card:hover img, .mobile-mega__product-card:focus-visible img, .store-mega-card:hover img, .store-mega-card:focus-visible img, .mobile-mega__category-card:hover img, .mobile-mega__category-card:focus-visible img { transform: scale(1.055); } .store-mega-card img, .store-mega-product img, .mobile-mega__category-card img, .mobile-mega__product-card img { transition: transform 180ms ease-out; } .mobile-mega__primary-link:hover, .mobile-mega__primary-link:focus-visible, .mobile-mega__link:hover, .mobile-mega__link:focus-visible { color: var(--brand); } .store-mega-card:focus-visible, .store-mega-goal:focus-visible, .store-mega-product:focus-visible, .mobile-mega__primary-link:focus-visible, .mobile-mega__category-card:focus-visible, .mobile-mega__goal-link:focus-visible, .mobile-mega__product-card:focus-visible { outline: 2px solid rgba(10, 37, 64, 0.22); outline-offset: 3px; } .store-footer__grid { min-width: 0; } .store-footer__bottom { gap: 18px; } .store-footer__legal { flex-wrap: wrap; justify-content: flex-end; } .mobile-mega__quick { grid-template-columns: 1fr 1fr; } .mobile-mega__category-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; } .mobile-mega__featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mobile-mega__link-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mobile-mega__link-group { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 12px; min-width: 0; } .mobile-mega__link-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .mobile-mega__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; color: var(--ink-2); font-size: 13px; font-weight: 600; line-height: 1.25; border-top: 1px solid var(--border); } .mobile-mega__link:first-of-type { border-top: 0; padding-top: 0; } .mobile-mega__link:last-child { padding-bottom: 0; } @media (max-width: 1180px) { .mobile-menu-button { display: inline-flex !important; } .store-header__nav { display: none !important; } [data-shop-mega-menu="true"] { display: none !important; } .store-header__bar { grid-template-columns: 1fr auto 1fr !important; gap: 16px !important; padding: 12px 18px !important; } .store-header__left { justify-content: flex-start !important; } .store-header__logo { justify-self: center !important; } .store-header__actions { justify-content: flex-end !important; } .mobile-mega__panel { width: min(100vw, 760px) !important; margin-left: auto !important; box-shadow: var(--shadow-xl) !important; } .mobile-mega__body { padding: 22px 24px 32px !important; } } /* ============ Government page ============ */ .government-page { background: var(--bg); color: var(--ink); overflow: hidden; } .government-page a { text-decoration: none; } .government-hero { background: var(--brand); color: var(--ink-inverse); padding: 86px 28px 116px; position: relative; overflow: hidden; } .government-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(250, 250, 247, 0.10), transparent 34%), repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 96px); pointer-events: none; } .government-hero__inner { max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr); gap: 62px; align-items: center; position: relative; z-index: 1; } .government-hero__content, .government-overview__grid > *, .government-profile__grid > *, .government-performance__grid > * { min-width: 0; } .government-hero__title { max-width: 740px; margin: 0 0 22px; font-size: clamp(58px, 6.4vw, 88px); line-height: 0.94; text-wrap: balance; } .government-hero__copy { max-width: 680px; margin: 0 0 32px; color: rgba(250, 250, 247, 0.82); font-size: 19px; line-height: 1.65; text-wrap: pretty; overflow-wrap: break-word; } .government-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .government-hero__primary { background: var(--ink-inverse) !important; color: var(--brand) !important; border-color: var(--ink-inverse) !important; } .government-hero__secondary, .government-hero__tertiary { background: rgba(255,255,255,0.12) !important; color: var(--ink-inverse) !important; border-color: rgba(255,255,255,0.24) !important; } .government-hero__tertiary { background: transparent !important; } .government-hero__proof { margin-top: 38px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 630px; } .government-hero__proof div { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 16px; } .government-hero__proof strong { display: block; font-size: 25px; line-height: 1.1; margin-bottom: 6px; } .government-hero__proof span { display: block; color: rgba(250, 250, 247, 0.70); font-size: 13px; line-height: 1.45; } .government-hero__media { min-height: 520px; border-radius: 8px; overflow: hidden; position: relative; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); box-shadow: var(--shadow-xl); } .government-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .government-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,37,64,0.10), rgba(10,37,64,0.42)); } .government-hero__brief { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(250,250,247,0.92); color: var(--ink); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-lg); } .government-hero__brief div { padding: 16px; background: rgba(255,255,255,0.75); min-width: 0; } .government-hero__brief span { display: block; color: var(--ink-3); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .government-hero__brief strong { display: block; color: var(--brand); font-size: 15px; line-height: 1.2; word-break: break-word; } .government-stats { padding: 0 28px; } .government-stats__grid { max-width: 1180px; margin: -42px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 3; min-width: 0; } .government-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 22px; box-shadow: var(--shadow-lg); min-width: 0; } .government-stat-card span, .government-section-kicker, .government-designation-row span { display: block; color: var(--ink-3); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .government-stat-card strong { display: block; color: var(--brand); font-size: 23px; line-height: 1.12; margin-top: 8px; word-break: break-word; } .government-overview, .government-profile, .government-products, .government-performance, .government-cta { padding-left: 28px; padding-right: 28px; } .government-overview { padding-top: 84px; padding-bottom: 64px; } .government-overview__grid, .government-profile__grid, .government-performance__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: start; min-width: 0; } .government-section-kicker { color: var(--brand); margin-bottom: 12px; } .government-section-title { margin: 0; font-size: clamp(38px, 4.2vw, 56px); line-height: 1; text-wrap: balance; } .government-overview__copy p, .government-performance__grid > div:first-child p { margin: 0 0 18px; color: var(--ink-2); font-size: 17px; line-height: 1.72; } .government-condition-band { max-width: 1180px; margin: 42px auto 0; padding: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 10px; } .government-condition-band span { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 13px; font-weight: 700; } .government-profile { padding-top: 74px; padding-bottom: 74px; background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .government-profile__panel, .government-capability-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 28px; } .government-designation-list { margin-top: 24px; display: grid; gap: 0; border-top: 1px solid var(--border); } .government-designation-row { display: grid; grid-template-columns: minmax(170px, 0.62fr) minmax(0, 1fr); gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--border); align-items: start; } .government-designation-row strong { font-size: 15px; line-height: 1.45; color: var(--ink); } .government-profile__side, .government-documents, .government-client-list { display: grid; gap: 14px; } .government-capability-list { margin-top: 18px; display: grid; gap: 10px; } .government-capability-list div { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14px; font-weight: 650; } .government-capability-list svg { color: var(--success); flex: 0 0 auto; } .government-document-card { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 106px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .government-document-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .government-document-card img { width: 84px; height: 68px; object-fit: contain; background: var(--bg-card); border-radius: 6px; padding: 8px; } .government-document-card strong, .government-product-card h3 { display: block; font-size: 17px; line-height: 1.22; color: var(--ink); } .government-document-card small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 13px; line-height: 1.35; } .government-products { padding-top: 76px; padding-bottom: 84px; background: var(--bg-subtle); } .government-products__header { max-width: 1180px; margin: 0 auto 30px; display: flex; justify-content: space-between; align-items: end; gap: 24px; } .government-products__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; min-width: 0; } .government-product-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; min-height: 100%; transition: transform var(--t-base), box-shadow var(--t-base); } .government-product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .government-product-card__media { height: 198px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink-3); } .government-product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; } .government-product-card__body { padding: 22px; flex: 1; } .government-product-card h3 { margin: 0 0 11px; } .government-product-card p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; } .government-product-card > a { display: inline-flex; align-items: center; gap: 6px; padding: 0 22px 22px; color: var(--brand); font-size: 13px; font-weight: 800; } .government-performance { padding-top: 80px; padding-bottom: 80px; background: var(--bg); } .government-client-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; } .government-client-row span { width: 34px; height: 34px; border-radius: 999px; background: var(--success-tint); color: var(--success); display: flex; align-items: center; justify-content: center; } .government-client-row p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.48; } .government-cta { max-width: 1180px; margin: 0 auto 84px; padding-top: 32px; padding-bottom: 32px; display: flex; justify-content: space-between; align-items: center; gap: 28px; background: var(--brand); color: var(--ink-inverse); border-radius: 8px; box-shadow: var(--shadow-lg); } .government-cta .government-section-kicker { color: rgba(250,250,247,0.68); } .government-cta .government-section-title { font-size: clamp(34px, 4vw, 48px); } .government-cta__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; } .government-empty { max-width: 760px; margin: 0 auto; padding: 96px 28px; } /* ============ Imported content + policies ============ */ .imported-content-page { padding: 72px 28px 96px; } .imported-content-page__inner { max-width: 860px; margin: 0 auto; } .imported-content-page__body { color: var(--ink-2); font-size: 17px; line-height: 1.75; } .imported-content-page__body h2, .imported-content-page__body h3, .imported-content-page__body h4 { color: var(--ink); line-height: 1.14; margin: 34px 0 14px; } .imported-content-page__body p, .imported-content-page__body li { margin: 0 0 16px; } .imported-content-page__body ul, .imported-content-page__body ol { padding-left: 24px; margin: 0 0 24px; } .journal-index, .journal-article { background: #fbfaf6; color: var(--ink); } .journal-hero { background: #efeee8; border-bottom: 1px solid rgba(12, 31, 51, 0.08); } .journal-hero__inner { max-width: 1120px; margin: 0 auto; padding: 74px 28px 62px; } .journal-hero h1 { font-size: clamp(54px, 8vw, 92px); line-height: 0.95; letter-spacing: 0; margin: 12px 0 22px; } .journal-hero h1 em { color: #d94b3d; font-style: italic; font-weight: 400; } .journal-hero p { max-width: 620px; color: var(--ink-2); font-size: 18px; line-height: 1.55; margin: 0 0 28px; } .journal-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .journal-search { width: min(330px, 100%); height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--ink-3); } .journal-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; } .journal-filters { display: flex; gap: 8px; flex-wrap: wrap; } .journal-filters button { height: 36px; border: 1px solid var(--border); border-radius: 999px; padding: 0 14px; background: var(--bg-card); color: var(--ink-2); font-size: 13px; font-weight: 700; cursor: pointer; } .journal-filters button.is-active { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); } .journal-index__content { max-width: 1120px; margin: 0 auto; padding: 52px 28px 118px; } .journal-feature { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr); min-height: 340px; color: inherit; text-decoration: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); } .journal-feature__media, .journal-card__media { position: relative; background: #f1f0ea; display: flex; align-items: center; justify-content: center; overflow: hidden; } .journal-feature__media img, .journal-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--t-base); } .journal-feature:hover img, .journal-card:hover img { transform: scale(1.025); } .journal-feature__media span, .journal-card__media span { position: absolute; left: 18px; top: 18px; background: #d94b3d; color: white; border-radius: 999px; padding: 6px 10px; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .journal-feature__body { padding: 58px 52px; align-self: center; } .journal-feature__meta { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 13px; margin-bottom: 16px; } .journal-feature__meta strong { color: var(--ink-2); } .journal-feature h2 { font-family: var(--font-display); font-size: clamp(30px, 3.8vw, 46px); line-height: 1.06; letter-spacing: 0; margin: 0 0 22px; } .journal-feature p { color: var(--ink-2); line-height: 1.62; margin: 0 0 28px; } .journal-read-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 800; } .journal-section-heading { display: flex; align-items: baseline; gap: 10px; margin: 50px 0 20px; } .journal-section-heading h2 { font-size: 20px; margin: 0; } .journal-section-heading span { color: var(--ink-3); font-size: 13px; } .journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .journal-card { min-height: 430px; display: flex; flex-direction: column; color: inherit; text-decoration: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .journal-card__media { aspect-ratio: 16 / 10; } .journal-card__media span { background: var(--bg-card); color: var(--ink); border: 1px solid var(--border); left: 14px; top: 14px; } .journal-card__body { flex: 1; display: flex; flex-direction: column; padding: 28px 24px 18px; } .journal-card h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.12; letter-spacing: 0; margin: 0 0 14px; } .journal-card p { color: var(--ink-2); line-height: 1.55; margin: 0 0 22px; font-size: 14px; } .journal-card__meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-3); } .journal-card__meta strong { color: var(--ink-2); font-style: normal; } .journal-card__meta em { margin-left: auto; font-style: normal; } .journal-card--large { min-height: 460px; } .journal-avatar { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand); color: var(--ink-inverse); font-size: 12px; font-weight: 800; flex: 0 0 auto; } .journal-avatar--small { width: 22px; height: 22px; font-size: 9px; background: #e6edf7; color: var(--brand); } .journal-empty { border: 1px solid var(--border); background: var(--bg-card); border-radius: 12px; padding: 34px; color: var(--ink-2); } .journal-newsletter { margin-top: 72px; background: var(--brand); color: var(--ink-inverse); border-radius: 18px; padding: 48px 54px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 44px; align-items: center; } .journal-newsletter span, .journal-author-card span, .journal-product-callout span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255,255,255,0.58); margin-bottom: 10px; } .journal-newsletter h2 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: 0; margin: 0 0 14px; } .journal-newsletter p, .journal-newsletter small { color: rgba(255,255,255,0.72); line-height: 1.55; margin: 0; } .journal-newsletter form { display: grid; gap: 10px; } .journal-newsletter input { height: 48px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.14); color: var(--ink-inverse); padding: 0 16px; font: inherit; } .journal-newsletter input::placeholder { color: rgba(255,255,255,0.62); } .journal-newsletter button { width: 100%; justify-content: center; background: var(--bg-card); color: var(--ink); } .journal-newsletter button.is-success { background: #d9f7e8; color: #0b5132; } .journal-newsletter__error { color: #ffd4ce !important; } .journal-newsletter__success { color: #d9f7e8 !important; } .journal-newsletter__pending { color: #ffe9b5 !important; } .journal-article__header { max-width: 720px; margin: 0 auto; padding: 72px 28px 42px; } .journal-breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; color: var(--ink-3); font-size: 12px; margin-bottom: 22px; } .journal-breadcrumb a { color: inherit; text-decoration: none; } .journal-article__kicker { color: #d94b3d; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; } .journal-article__header h1 { font-size: clamp(48px, 7vw, 76px); line-height: 0.98; letter-spacing: 0; margin: 0 0 18px; } .journal-article__header > p { color: var(--ink-2); font-size: 20px; line-height: 1.55; margin: 0 0 30px; } .journal-article__meta { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .journal-author-pill { display: flex; align-items: center; gap: 12px; } .journal-author-pill strong { display: block; font-size: 14px; } .journal-author-pill small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; } .journal-article__actions { display: flex; gap: 8px; } .journal-article__actions button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .journal-article__image { max-width: 1020px; height: clamp(320px, 52vw, 560px); margin: 0 auto 54px; border-radius: 16px; overflow: hidden; background: #f1f0ea; } .journal-article__image img { width: 100%; height: 100%; object-fit: cover; } .journal-article__body { max-width: 1020px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: minmax(0, 680px) 220px; gap: 78px; align-items: start; } .journal-article__content { font-size: 18px; line-height: 1.78; color: var(--ink-2); } .journal-article__content h1 { display: none; } .journal-article__content h2, .journal-article__content h3, .journal-article__content h4 { color: var(--ink); font-family: var(--font-display); letter-spacing: 0; line-height: 1.1; margin: 42px 0 18px; } .journal-article__content h2 { font-size: 34px; } .journal-article__content h3 { font-size: 25px; } .journal-article__content p, .journal-article__content li { margin: 0 0 18px; } .journal-article__content ul, .journal-article__content ol { padding-left: 24px; margin: 0 0 28px; } .journal-article__content li::marker { color: #d94b3d; } .journal-article__content img { max-width: 100%; height: auto; border-radius: 12px; } .journal-article__aside { position: sticky; top: 118px; display: grid; gap: 26px; } .journal-article__aside h2 { color: var(--ink-3); font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px; } .journal-article__aside a { display: block; color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 700; line-height: 1.45; margin-bottom: 10px; } .journal-share { display: flex; gap: 8px; flex-wrap: wrap; } .journal-share a { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); display: inline-flex; align-items: center; justify-content: center; margin: 0; } .journal-article__below { max-width: 1020px; margin: 42px auto 78px; padding: 0 28px; display: grid; gap: 28px; } .journal-author-card { max-width: 620px; border-radius: 14px; background: #efeee8; padding: 28px; display: flex; align-items: center; gap: 20px; } .journal-author-card span, .journal-product-callout span { color: var(--ink-3); } .journal-author-card h2 { margin: 0 0 6px; font-size: 20px; } .journal-author-card p { margin: 0; color: var(--ink-2); } .journal-product-callout { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 28px; border-radius: 14px; background: #e6effb; color: inherit; text-decoration: none; } .journal-product-callout img { width: 88px; height: 72px; object-fit: contain; border-radius: 8px; background: white; } .journal-product-callout h2 { font-size: 21px; margin: 0 0 6px; } .journal-product-callout p { margin: 0; color: var(--ink-2); } .journal-product-callout strong { height: 42px; padding: 0 18px; border-radius: 999px; background: var(--brand); color: var(--ink-inverse); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .journal-keep-reading { background: #efeee8; padding: 58px 28px 88px; } .journal-keep-reading__inner { max-width: 1020px; margin: 0 auto; } .journal-keep-reading h2 { font-size: clamp(34px, 5vw, 54px); margin: 0 0 26px; } .journal-keep-reading__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .policy-page { background: var(--bg); color: var(--ink); } .policy-hero { padding: 78px 28px 88px; background: var(--brand); color: var(--ink-inverse); position: relative; overflow: hidden; } .policy-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(250,250,247,0.12), transparent 34%), repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 96px); } .policy-hero__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: 48px; align-items: end; position: relative; z-index: 1; } .policy-hero__inner > * { min-width: 0; } .policy-hero h1 { margin: 12px 0 18px; font-size: clamp(58px, 7vw, 92px); line-height: 0.96; text-wrap: balance; overflow-wrap: break-word; } .policy-hero p { max-width: 700px; margin: 0; color: rgba(250,250,247,0.78); font-size: 20px; line-height: 1.55; } .policy-hero .eyebrow { color: rgba(250,250,247,0.68); } .policy-hero__promise { background: rgba(250,250,247,0.94); color: var(--brand); border-radius: 8px; padding: 24px; box-shadow: var(--shadow-xl); max-width: 100%; min-width: 0; } .policy-hero__promise strong { display: block; font-size: clamp(28px, 3vw, 36px); line-height: 1.02; margin-bottom: 12px; overflow-wrap: break-word; } .policy-hero__promise span { display: block; color: var(--ink-2); font-size: 16px; font-weight: 600; line-height: 1.55; overflow-wrap: break-word; } .policy-body { max-width: 1180px; margin: -38px auto 92px; padding: 0 28px; position: relative; z-index: 2; } .policy-guarantee, .policy-panel, .policy-contact-note { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); } .policy-guarantee { padding: 32px; margin-bottom: 18px; } .policy-kicker { display: block; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; } .policy-guarantee h2, .policy-panel h2 { margin: 0 0 14px; font-size: 30px; line-height: 1.12; } .policy-guarantee p, .policy-panel__intro, .policy-list__item p, .policy-contact-note p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; } .policy-guarantee p + p, .policy-panel__intro + .policy-panel__intro { margin-top: 12px; } .policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .policy-panel { padding: 30px; min-width: 0; } .policy-list { display: grid; gap: 18px; margin-top: 22px; } .policy-list__item { border-top: 1px solid var(--border); padding-top: 18px; } .policy-list__item strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.3; margin-bottom: 5px; } .policy-contact-note { margin-top: 18px; padding: 20px 24px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; box-shadow: var(--shadow-sm); } .policy-contact-note svg { color: var(--brand); margin-top: 3px; } /* ============ Admin sidebar ============ */ .admin-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--bg-subtle); } .admin-sidebar { background: var(--bg-card); border-right: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .admin-main { padding: 28px 36px 60px; min-width: 0; } /* ============ Nav item ============ */ .nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); } .nav-item:hover { background: var(--bg-subtle); color: var(--ink); } .nav-item.is-active { background: var(--brand-tint); color: var(--brand); font-weight: 600; } .nav-item .nav-count { margin-left: auto; background: var(--bg-muted); color: var(--ink-3); font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 600; } .nav-item.is-active .nav-count { background: var(--brand); color: var(--ink-inverse); } .nav-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); padding: 14px 12px 6px; } /* ============ Table ============ */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table thead th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg-card); } .table tbody td { padding: 14px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: middle; } .table tbody tr { transition: background var(--t-fast); } .table tbody tr:hover { background: var(--bg-subtle); } /* ============ Product image fallback ============ */ .product-img-wrap { position: relative; aspect-ratio: 1 / 1; background: var(--bg-subtle); border-radius: 12px; overflow: hidden; } .product-img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform var(--t-slow); } .product-card:hover .product-img-wrap img { transform: scale(1.06); } /* ============ PDP enhanced content ============ */ .pdp-enhanced { display: grid; gap: 22px; margin: 0 0 64px; } .pdp-enhanced__block, .pdp-enhanced__callout { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); } .pdp-enhanced__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr); gap: 34px; align-items: center; padding: 34px; } .pdp-enhanced__split.is-image-left .pdp-enhanced__media { order: -1; } .pdp-enhanced__split.is-centered { grid-template-columns: 1fr; text-align: center; } .pdp-enhanced__copy { max-width: 680px; } .pdp-enhanced__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .pdp-enhanced__copy h2 { font-family: var(--font-display); font-size: clamp(30px, 3vw, 46px); line-height: 1.04; margin: 0 0 16px; letter-spacing: 0; } .pdp-enhanced__copy p { color: var(--ink-2); font-size: 15px; line-height: 1.75; margin: 0 0 12px; } .pdp-enhanced__copy small, .pdp-enhanced__media figcaption { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.5; margin-top: 10px; } .pdp-enhanced__media { margin: 0; background: var(--bg-subtle); border-radius: 8px; min-height: 240px; overflow: hidden; display: grid; place-items: center; padding: 24px; } .pdp-enhanced__media img { width: 100%; max-height: 480px; object-fit: contain; } .pdp-enhanced__block--full-image .pdp-enhanced__media { min-height: 420px; } .pdp-enhanced__video-block { display: grid; grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr); gap: 28px; padding: 28px; align-items: center; } .pdp-enhanced__video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 8px; overflow: hidden; display: grid; place-items: center; } .pdp-enhanced__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .pdp-enhanced__feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 28px 28px; } .pdp-enhanced__block > .pdp-enhanced__copy { padding: 28px 28px 0; } .pdp-enhanced__feature { border: 1px solid var(--border); border-radius: 8px; padding: 18px; background: var(--bg-subtle); } .pdp-enhanced__feature span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 700; margin-bottom: 14px; } .pdp-enhanced__feature h3 { font-size: 15px; margin: 0 0 8px; } .pdp-enhanced__feature p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0; } .pdp-enhanced__comparison { padding-bottom: 28px; } .pdp-enhanced__comparison dl { display: grid; grid-template-columns: 220px 1fr; margin: 22px 28px 0; border-top: 1px solid var(--border); } .pdp-enhanced__comparison dt, .pdp-enhanced__comparison dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .pdp-enhanced__comparison dt { color: var(--ink-3); font-weight: 600; } .pdp-enhanced__comparison dd { color: var(--ink); } .pdp-enhanced__callout { padding: 42px; text-align: center; } .pdp-enhanced__callout .pdp-enhanced__copy { margin: 0 auto; } .pdp-enhanced__callout.is-blue { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 20%, var(--border)); } .pdp-enhanced__callout.is-dark { background: var(--ink); color: var(--ink-inverse); } .pdp-enhanced__callout.is-dark .pdp-enhanced__copy p, .pdp-enhanced__callout.is-dark .pdp-enhanced__kicker { color: rgba(255,255,255,0.74); } .pdp-enhanced__callout.is-accent { background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); } /* ============ Admin enhanced PDP builder ============ */ .enhanced-builder { display: grid; gap: 16px; } .enhanced-builder__intro { padding: 22px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; } .enhanced-builder__intro h3, .enhanced-builder__preview h3 { font-size: 15px; margin: 0 0 8px; } .enhanced-builder__intro p { color: var(--ink-3); font-size: 13px; line-height: 1.55; margin: 0; max-width: 680px; } .enhanced-builder__count { border-radius: 999px; background: var(--bg-subtle); color: var(--ink-2); font-size: 12px; font-weight: 700; padding: 7px 11px; white-space: nowrap; } .enhanced-builder__intro-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .enhanced-builder__palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .enhanced-builder__palette-item { border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px; padding: 14px; cursor: pointer; text-align: left; transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast); } .enhanced-builder__palette-item:hover { border-color: var(--brand); transform: translateY(-1px); background: var(--brand-tint); } .enhanced-builder__palette-item span { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; } .enhanced-builder__palette-item small { color: var(--ink-3); font-size: 11px; line-height: 1.45; } .enhanced-builder__canvas { display: grid; gap: 12px; } .enhanced-builder__empty { border: 1px dashed var(--border-strong); border-radius: 8px; padding: 44px 24px; text-align: center; color: var(--ink-3); display: grid; gap: 8px; justify-items: center; } .enhanced-builder__empty strong { color: var(--ink); } .enhanced-builder__block { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); overflow: hidden; } .enhanced-builder__block.is-dragging { opacity: 0.72; border-color: var(--brand); } .enhanced-builder__block-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); } .enhanced-builder__block-head strong { display: block; font-size: 13px; } .enhanced-builder__block-head span { display: block; color: var(--ink-3); font-size: 11px; margin-top: 3px; } .enhanced-builder__drag { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--ink-3); display: grid; place-items: center; cursor: grab; } .enhanced-builder__drag:active { cursor: grabbing; } .enhanced-builder__actions { display: flex; gap: 4px; } .enhanced-builder__actions .btn { width: 30px; height: 30px; padding: 0; } .enhanced-builder__actions .btn--secondary { width: auto; min-width: 38px; padding: 0 10px; } .enhanced-builder__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; } .enhanced-builder__fields .textarea, .enhanced-builder__repeater, .enhanced-builder__field-with-action { grid-column: 1 / -1; } .enhanced-builder__field-with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } .enhanced-builder__repeater { display: grid; gap: 8px; } .enhanced-builder__repeater-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .enhanced-builder__row { display: grid; grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr) auto; gap: 8px; align-items: stretch; } .enhanced-builder__row .textarea { min-height: 58px; resize: vertical; } .enhanced-builder__row .btn { width: 38px; height: 38px; padding: 0; } .enhanced-builder__preview { padding: 18px; } .enhanced-builder__preview-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 12px; } .enhanced-builder__preview-head span, .enhanced-builder__preview-item small { color: var(--ink-3); font-size: 12px; } .enhanced-builder__preview-list { display: grid; gap: 8px; } .enhanced-builder__preview-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; } .enhanced-builder__preview-item > span { width: 26px; height: 26px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 auto; } .enhanced-builder__preview-item strong { display: block; font-size: 13px; } /* ============ Admin funnel landing builder ============ */ .admin-funnel-mode-note { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); margin-bottom: 18px; } .admin-funnel-mode-note strong, .admin-funnel-standalone-callout strong { font-size: 13px; } .admin-funnel-mode-note span, .admin-funnel-standalone-callout span { color: var(--ink-3); font-size: 12px; line-height: 1.5; } .admin-funnel-mode-note code { color: var(--brand); font-weight: 700; } .admin-funnel-standalone-callout { padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 18px; } .admin-funnel-standalone-callout > div { display: grid; gap: 5px; } .funnel-builder { display: grid; gap: 16px; } .funnel-builder__intro { padding: 22px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; } .funnel-builder__intro h3 { margin: 0 0 7px; font-size: 15px; } .funnel-builder__intro p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.55; max-width: 760px; } .funnel-builder__intro-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .funnel-builder__intro-actions > span { border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 800; padding: 7px 11px; white-space: nowrap; } .funnel-ai-panel { padding: 18px; display: grid; gap: 16px; border-color: rgba(9, 43, 73, 0.22); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); } .funnel-ai-panel__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } .funnel-ai-panel__head span { display: block; margin-bottom: 5px; color: var(--brand); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .funnel-ai-panel__head h3 { margin: 0 0 6px; font-size: 18px; } .funnel-ai-panel__head p { margin: 0; max-width: 720px; color: var(--ink-3); font-size: 13px; line-height: 1.5; } .funnel-ai-panel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .funnel-ai-panel__prompt { grid-column: 1 / -1; } .funnel-ai-panel__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .funnel-ai-panel__notice { border-radius: 12px; background: var(--brand-tint); color: var(--brand); font-size: 13px; font-weight: 700; padding: 10px 12px; } .funnel-ai-draft { display: grid; gap: 10px; border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: 16px; } .funnel-ai-draft__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 12px; } .funnel-ai-draft__meta span { color: var(--brand); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; } .funnel-ai-draft strong { color: var(--ink); font-size: 18px; } .funnel-ai-draft p, .funnel-ai-draft ul, .funnel-ai-draft blockquote { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; } .funnel-ai-draft ul { padding-left: 18px; } .funnel-ai-draft li span { font-weight: 800; } .funnel-ai-draft blockquote { border-left: 3px solid var(--brand); padding-left: 12px; font-style: italic; } .funnel-ai-draft > small { color: var(--ink-3); font-size: 12px; } .funnel-ai-draft__warnings { display: flex; gap: 8px; flex-wrap: wrap; } .funnel-ai-draft__warnings span { border-radius: 999px; background: #fff4dc; color: #946200; font-size: 12px; font-weight: 800; padding: 6px 9px; } .funnel-builder__settings { padding: 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .funnel-builder__settings > div { flex: 1 1 320px; } .funnel-builder__settings h3 { margin: 0 0 5px; font-size: 14px; } .funnel-builder__settings p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; } .funnel-builder__settings label { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); padding: 9px 12px; font-size: 12px; font-weight: 700; color: var(--ink); } .funnel-builder__settings input { width: 16px; height: 16px; accent-color: var(--brand); } /* ============ Standalone public funnel page ============ */ .standalone-funnel { min-height: 100vh; background: var(--bg); color: var(--ink); padding: 24px clamp(18px, 4vw, 64px) 80px; } .standalone-funnel--loading { display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; } .standalone-funnel__topbar { max-width: 1240px; margin: 0 auto 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; } .standalone-funnel__topbar nav { display: flex; gap: 24px; font-size: 14px; font-weight: 700; } .standalone-funnel__hero, .standalone-funnel__section { max-width: 1240px; margin: 0 auto; } .standalone-funnel__hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); gap: clamp(32px, 6vw, 72px); align-items: center; padding: 36px 0 72px; } .standalone-funnel__kicker { display: inline-flex; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 900; margin-bottom: 14px; } .standalone-funnel__hero h1, .standalone-funnel__section h2 { font-family: var(--font-serif); letter-spacing: 0; line-height: 0.98; margin: 0; } .standalone-funnel__hero h1 { font-size: clamp(52px, 7vw, 104px); max-width: 860px; } .standalone-funnel__hero p, .standalone-funnel__section > p, .standalone-funnel__product-section p, .standalone-funnel__media-section p { color: var(--ink-3); line-height: 1.65; font-size: 18px; } .standalone-funnel__hero p { max-width: 660px; margin: 24px 0 30px; } .standalone-funnel__cart-status { display: table; margin-top: 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--ink-2); padding: 9px 13px; font-size: 13px; font-weight: 700; } .standalone-funnel__cart-status--adding { border-color: color-mix(in srgb, var(--success) 28%, var(--border)); background: var(--success-tint); color: var(--success); } .standalone-funnel__cart-status--error { border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); background: var(--danger-tint); color: var(--danger); } .standalone-funnel__hero-media { min-height: 520px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow-sm); color: var(--ink-3); } .standalone-funnel__hero-media img { width: 100%; height: 100%; object-fit: contain; padding: 42px; } .standalone-funnel__sections { display: grid; gap: 24px; } .standalone-funnel__section { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: clamp(28px, 5vw, 58px); } .standalone-funnel__section h2 { font-size: clamp(34px, 4.5vw, 68px); max-width: 820px; } .standalone-funnel__benefits, .standalone-funnel__steps, .standalone-funnel__faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; } .standalone-funnel__benefits > div, .standalone-funnel__steps > div, .standalone-funnel__faq > div { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); padding: 18px; } .standalone-funnel__benefits span, .standalone-funnel__steps span { display: inline-flex; width: 30px; height: 30px; border-radius: 999px; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 900; margin-bottom: 16px; } .standalone-funnel__benefits strong, .standalone-funnel__steps strong, .standalone-funnel__faq strong { display: block; font-size: 18px; margin-bottom: 8px; } .standalone-funnel__benefits p, .standalone-funnel__steps p, .standalone-funnel__faq p { color: var(--ink-3); line-height: 1.55; margin: 0; } .standalone-funnel__product-section, .standalone-funnel__media-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.65fr); gap: 28px; align-items: center; } .standalone-funnel__product-card, .standalone-funnel__media-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); min-height: 360px; display: grid; place-items: center; padding: 24px; color: var(--ink); } .standalone-funnel__product-card { place-items: stretch; align-content: center; } .standalone-funnel__product-card img { width: 100%; height: 240px; object-fit: contain; margin-bottom: 18px; } .standalone-funnel__product-card small { color: var(--ink-3); font-size: 13px; } .standalone-funnel__product-card strong { font-size: 24px; line-height: 1.1; margin-top: 6px; } .standalone-funnel__product-card span { font-size: 24px; font-weight: 900; margin-top: 14px; } .standalone-funnel__discount { display: inline-flex; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 13px; font-weight: 900; padding: 8px 12px; margin: 4px 0 22px; } .standalone-funnel__media-card img, .standalone-funnel__media-card iframe { width: 100%; height: 100%; min-height: 320px; border: 0; object-fit: contain; } .standalone-funnel__proof blockquote { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 56px); line-height: 1.05; margin: 28px 0 14px; } .standalone-funnel__proof cite { color: var(--ink-3); font-style: normal; font-weight: 800; } .standalone-funnel__cta { text-align: center; display: grid; justify-items: center; } .standalone-funnel__cta h2, .standalone-funnel__cta p { max-width: 760px; } .standalone-funnel-checkout { min-height: 100vh; background: var(--bg); } .standalone-funnel-checkout__topbar { max-width: 1180px; margin: 0 auto; padding: 24px 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 18px; } .standalone-funnel-checkout__back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; font-weight: 700; } @media (max-width: 1100px) { .pdp-enhanced__split, .pdp-enhanced__video-block { grid-template-columns: 1fr; } .pdp-enhanced__split.is-image-left .pdp-enhanced__media { order: initial; } .pdp-enhanced__feature-grid, .enhanced-builder__palette { grid-template-columns: repeat(2, minmax(0, 1fr)); } .standalone-funnel__hero, .standalone-funnel__product-section, .standalone-funnel__media-section { grid-template-columns: 1fr; } .standalone-funnel__hero-media { min-height: 360px; } .standalone-funnel__benefits, .standalone-funnel__steps, .standalone-funnel__faq { grid-template-columns: 1fr; } } @media (max-width: 760px) { .pdp-enhanced__split, .pdp-enhanced__video-block, .pdp-enhanced__callout { padding: 22px; } .pdp-enhanced__feature-grid { grid-template-columns: 1fr; padding: 0 22px 22px; } .pdp-enhanced__comparison dl { grid-template-columns: 1fr; } .pdp-enhanced__comparison dd { padding-top: 0; } .enhanced-builder__intro, .funnel-builder__intro, .funnel-builder__settings, .enhanced-builder__preview-head, .admin-funnel-standalone-callout { display: grid; } .enhanced-builder__palette, .enhanced-builder__fields, .enhanced-builder__field-with-action, .enhanced-builder__row { grid-template-columns: 1fr; } .enhanced-builder__actions { flex-wrap: wrap; justify-content: flex-end; } .standalone-funnel { padding-left: 18px; padding-right: 18px; } .standalone-funnel__topbar { align-items: flex-start; display: grid; margin-bottom: 18px; } .standalone-funnel__hero { padding-top: 20px; padding-bottom: 36px; } .standalone-funnel__hero h1 { font-size: clamp(42px, 13vw, 64px); } .standalone-funnel__hero p, .standalone-funnel__section > p, .standalone-funnel__product-section p, .standalone-funnel__media-section p { font-size: 16px; } .standalone-funnel__section { padding: 24px; } .standalone-funnel__hero-media, .standalone-funnel__product-card, .standalone-funnel__media-card { min-height: 260px; } } /* ============ Tabs ============ */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); } .tab { padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--ink-3); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); } .tab:hover { color: var(--ink); } .tab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } .product-description-copy { display: grid; gap: 18px; color: var(--ink-2); } .product-description-copy section { border-top: 1px solid var(--border); padding-top: 18px; } .product-description-copy section:first-child { border-top: 0; padding-top: 0; } .product-description-copy h4 { margin: 0 0 8px; font-size: 12px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); } .product-description-copy p { margin: 0; max-width: 760px; font-size: 15px; line-height: 1.72; } /* ============ Stat card ============ */ .stat-card { padding: 18px; } .stat-label { font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.01em; } .stat-value { font-size: 26px; font-weight: 600; letter-spacing: 0; margin-top: 6px; } .stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-top: 4px; font-weight: 500; } .stat-delta--up { color: var(--success); } .stat-delta--down { color: var(--danger); } /* ============ Club quick order ============ */ .club-order { display: grid; gap: 18px; } .club-order__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 20px; align-items: stretch; } .club-order__hero h2 { margin: 6px 0 8px; font-size: 38px; line-height: 1; } .club-order__hero p { max-width: 680px; margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.55; } .club-order__member, .club-order__empty, .club-order__empty-inline { padding: 22px; } .club-order__member { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); display: grid; align-content: center; gap: 4px; } .club-order__member span, .club-order__member small, .club-order__muted, .club-order__meta, .club-order__history-head span, .club-order__section-title p, .club-order__table-header p { color: var(--ink-3); } .club-order__member span, .club-order__meta { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .club-order__member strong { font-size: 18px; } .club-order__notice { padding: 12px 14px; border-radius: 10px; background: var(--success-tint); color: var(--success); font-size: 13px; font-weight: 600; } .club-order__controls { padding: 16px; display: grid; grid-template-columns: minmax(240px, 1fr) 220px auto; gap: 12px; align-items: end; } .club-order__bulk-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; } .club-order__table-card { overflow: hidden; } .club-order__table-header, .club-order__section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .club-order__table-header { padding: 18px 20px; border-bottom: 1px solid var(--border); } .club-order__table-header h3, .club-order__section-title h3 { margin: 0; font-size: 18px; } .club-order__table-header p, .club-order__section-title p { margin: 4px 0 0; font-size: 12px; } .club-order__table-wrap { overflow-x: auto; } .club-order__table { min-width: 880px; } .club-order__table tbody td:first-child, .club-order__table thead th:first-child { width: 34px; text-align: center; } .club-order__product-cell { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 280px; } .club-order__product-image { width: 58px; height: 58px; border-radius: 10px; background: var(--bg-subtle); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink-3); overflow: hidden; } .club-order__product-image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .club-order__product-cell strong, .club-order__product-cell span, .club-order__product-cell small { display: block; } .club-order__product-cell strong { font-size: 14px; line-height: 1.25; } .club-order__product-cell span, .club-order__product-cell small { color: var(--ink-3); font-size: 12px; line-height: 1.35; margin-top: 3px; max-width: 420px; } .club-order__qty { display: inline-grid; grid-template-columns: 30px 46px 30px; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--bg-card); } .club-order__qty button { border: 0; background: transparent; color: var(--ink-2); height: 30px; cursor: pointer; } .club-order__qty input { width: 46px; height: 30px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font-weight: 700; color: var(--ink); background: transparent; } .club-order__history { display: grid; gap: 12px; } .club-order__history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .club-order__history-card { padding: 18px; display: grid; gap: 14px; } .club-order__history-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; } .club-order__history-head strong, .club-order__history-head span { display: block; } .club-order__history-head strong { margin-bottom: 3px; } .club-order__line-list { display: grid; gap: 8px; } .club-order__line { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; font-size: 13px; } .club-order__line span { color: var(--brand); font-weight: 700; } .club-order__line p { margin: 0; color: var(--ink-2); } .club-order__empty, .club-order__empty-inline, .club-order__no-results { text-align: center; } .club-order__empty h2 { margin: 10px 0 8px; } .club-order__empty p { max-width: 560px; margin: 0 auto 18px; color: var(--ink-3); line-height: 1.55; } .club-order__empty-icon { width: 58px; height: 58px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; } .club-order__no-results { padding: 30px; color: var(--ink-3); } @media (max-width: 900px) { .club-order__hero, .club-order__controls, .club-order__history-grid { grid-template-columns: 1fr; } .club-order__bulk-actions, .club-order__table-header, .club-order__section-title { align-items: stretch; flex-direction: column; } .club-order__bulk-actions .btn { width: 100%; } } /* ============ Toggle ============ */ .toggle { position: relative; display: inline-block; width: 38px; height: 22px; background: var(--bg-muted); border-radius: 999px; cursor: pointer; transition: background var(--t-fast); } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--t-fast); } .toggle.is-on { background: var(--brand); } .toggle.is-on::after { transform: translateX(16px); } /* ============ Drawer overlay ============ */ .drawer-overlay { position: fixed; inset: 0; background: rgba(10, 31, 61, 0.4); z-index: 80; animation: fadeIn var(--t-base); backdrop-filter: blur(2px); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; background: var(--bg-card); z-index: 81; display: flex; flex-direction: column; animation: slideInRight var(--t-base); box-shadow: -16px 0 32px rgba(10, 31, 61, 0.1); } /* ============ Modal ============ */ .modal-overlay { position: fixed; inset: 0; background: rgba(10, 31, 61, 0.5); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn var(--t-base); } .modal { background: var(--bg-card); border-radius: 18px; max-width: 480px; width: 100%; box-shadow: var(--shadow-xl); animation: fadeUp var(--t-base); max-height: 90vh; overflow-y: auto; } /* ============ Utility ============ */ .muted { color: var(--ink-3); } .text-xs { font-size: 12px; } .text-sm { font-size: 13px; } .text-md { font-size: 14px; } .text-lg { font-size: 16px; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } /* ============ Hover lift ============ */ .lift { transition: transform var(--t-base), box-shadow var(--t-base); } .lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ============ Contact Page ============ */ .contact-page { background: var(--bg); overflow-x: clip; } .contact-section-inner { max-width: 1280px; margin: 0 auto; min-width: 0; } .contact-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%); } .contact-hero__blob { position: absolute; pointer-events: none; border-radius: 50%; } .contact-hero__blob--brand { top: -120px; left: -10%; width: 460px; height: 460px; background: radial-gradient(circle, var(--brand-tint), transparent 70%); filter: blur(20px); opacity: 0.7; } .contact-hero__blob--accent { top: 80px; right: -6%; width: 360px; height: 360px; background: radial-gradient(circle, var(--accent-tint), transparent 70%); filter: blur(28px); opacity: 0.6; } .contact-hero__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 72px 28px 64px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: end; min-width: 0; } .contact-hero__inner > *, .contact-form-grid > *, .contact-visit-grid > *, .contact-faq-grid > *, .contact-clinic-cta > * { min-width: 0; } .contact-hero__badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .contact-hero__badge-row > span:last-child { font-size: 12px; color: var(--ink-3); } .contact-hero__title { font-size: clamp(56px, 7vw, 96px); margin: 0; line-height: 1.02; color: var(--ink); letter-spacing: 0; } .contact-hero__title em { color: var(--accent); font-style: italic; } .contact-hero p { font-size: 18px; color: var(--ink-2); line-height: 1.6; max-width: 520px; margin: 26px 0 0; } .contact-hero__reach { display: flex; flex-direction: column; gap: 12px; } .contact-reach-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-xs); animation: fadeUp 500ms both; color: var(--ink); } .contact-reach-tile__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; } .contact-reach-tile__copy { min-width: 0; } .contact-reach-tile__copy strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: 0; margin-top: 4px; } .contact-reach-tile__copy span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; } .contact-reach-tile__note { text-align: right; white-space: nowrap; color: var(--accent); } .contact-reach-tile__note span { display: block; font-size: 11px; color: var(--ink-4); font-weight: 500; margin-bottom: 6px; } .contact-form-section { padding: 64px 28px 32px; } .contact-form-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; align-items: start; min-width: 0; } .contact-form-card { padding: 0; overflow: hidden; } .contact-form-card__body { padding: 36px 40px 8px; } .contact-form-card h2 { font-size: 36px; margin: 0 0 6px; letter-spacing: 0; } .contact-form-card p { color: var(--ink-3); margin: 0 0 26px; font-size: 14px; } .contact-reason-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .contact-reason-chips button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--ink-2); font-size: 13px; font-weight: 600; transition: all var(--t-fast); } .contact-reason-chips button.is-active { background: var(--brand); color: var(--ink-inverse); border-color: var(--brand); } .contact-routing-hint { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--brand-tint); border-radius: 10px; font-size: 13px; color: var(--brand); margin-bottom: 26px; } .contact-routing-hint svg { flex-shrink: 0; } .contact-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .contact-page .field-label span { color: var(--ink-4); font-weight: 400; } .contact-page .field-label b { color: var(--accent); font-weight: 600; } .contact-order-field--quiet { opacity: 0.55; transition: opacity var(--t-base); } .contact-message-field { margin-bottom: 14px; } .contact-message-field textarea { min-height: 140px; } .contact-message-field__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--ink-3); } .contact-message-field__meta span:last-child { font-size: 11px; color: var(--ink-4); white-space: nowrap; } .contact-message-field__meta .is-warning { color: var(--warning) !important; } .contact-attach { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; border: 1px dashed var(--border-strong); background: var(--bg); cursor: pointer; margin-bottom: 18px; font-size: 13px; color: var(--ink-2); transition: background var(--t-fast), border-color var(--t-fast); } .contact-attach:hover { border-color: var(--brand); background: var(--brand-tint); } .contact-attach > svg { color: var(--ink-3); flex-shrink: 0; } .contact-attach > span:not(.btn) { flex: 1; min-width: 0; } .contact-attach em { color: var(--ink-4); font-style: normal; } .contact-attach input { display: none; } .contact-attach .btn { height: 28px; min-height: 28px; padding: 0 12px; } .contact-subscribe { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: pointer; margin-bottom: 24px; } .contact-subscribe input { margin-top: 3px; accent-color: var(--brand); } .contact-form-error { padding: 12px 14px; border-radius: 10px; background: var(--danger-tint); color: var(--danger); font-size: 13px; font-weight: 600; margin-bottom: 22px; } .contact-form-footer { padding: 20px 40px; background: var(--bg-subtle); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .contact-form-footer > div { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); } .contact-form-footer .btn { min-width: 180px; } .contact-success { padding: 56px 48px; text-align: center; animation: fadeUp 400ms both; } .contact-success__icon { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: var(--success-tint); color: var(--success); display: flex; align-items: center; justify-content: center; } .contact-success h2 { font-size: 36px; margin: 0 0 12px; } .contact-success p { color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 460px; margin: 0 auto 28px; } .contact-success__ticket { display: inline-flex; gap: 18px; padding: 14px 22px; background: var(--bg-subtle); border-radius: 14px; font-size: 13px; color: var(--ink-2); } .contact-success__ticket span:nth-child(2) { color: var(--ink-4); } .contact-success__newsletter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 10px 14px; border-radius: 999px; background: var(--success-tint); color: var(--success); font-size: 13px; font-weight: 600; line-height: 1.4; max-width: 100%; text-align: left; } .contact-success__actions { margin-top: 28px; display: flex; gap: 10px; justify-content: center; } .contact-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; } .contact-rob-card { background: var(--brand); color: var(--ink-inverse); border-radius: 18px; padding: 26px; position: relative; overflow: hidden; } .contact-rob-card__header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .contact-rob-card__header img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.4); } .contact-rob-card__header strong, .contact-rob-card__header span { display: block; } .contact-rob-card__header strong { font-size: 15px; font-weight: 600; } .contact-rob-card__header span { font-size: 12px; opacity: 0.75; } .contact-rob-card p { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.45; margin: 0 0 16px; letter-spacing: 0; } .contact-rob-card button { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-inverse); opacity: 0.92; background: transparent; border: none; padding: 0 0 2px; border-bottom: 1px solid rgba(255,255,255,0.3); } .contact-rob-card > svg { position: absolute; bottom: -60px; right: -50px; opacity: 0.06; } .contact-hours-card { padding: 22px; } .contact-hours-card__title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; } .contact-hours-card__title svg { color: var(--brand); } .contact-hours-card__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .contact-hours-card__row span { color: var(--ink-2); } .contact-hours-card__row strong { color: var(--ink); font-weight: 500; text-align: right; } .contact-hours-card__row .is-closed { color: var(--ink-4); font-weight: 400; } .contact-hours-card__status { margin-top: 14px; padding: 10px 12px; background: var(--bg-subtle); border-radius: 8px; font-size: 12px; color: var(--ink-2); line-height: 1.5; } .contact-hours-card__status strong { color: var(--success); } .contact-social-card { display: flex; gap: 8px; padding: 14px 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); align-items: center; justify-content: space-between; } .contact-social-card > span { font-size: 13px; color: var(--ink-2); font-weight: 500; } .contact-social-card > div { display: flex; gap: 6px; } .contact-social-card a { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-subtle); color: var(--ink-2); display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); } .contact-social-card a:hover { background: var(--brand); color: var(--ink-inverse); } .contact-team-section { padding: 48px 28px 80px; } .contact-section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 36px; gap: 16px; } .contact-section-heading h2 { font-size: 42px; margin: 10px 0 0; letter-spacing: 0; } .contact-section-heading p { color: var(--ink-3); font-size: 14px; margin: 0; max-width: 380px; } .contact-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .contact-team-card { padding: 22px; display: flex; align-items: flex-start; gap: 16px; animation: fadeUp 500ms both; } .contact-team-card img, .contact-team-card__avatar { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; } .contact-team-card img { object-fit: cover; border: 2px solid var(--bg-subtle); } .contact-team-card__avatar { color: var(--ink-inverse); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 24px; font-weight: 500; } .contact-team-card strong, .contact-team-card span { display: block; } .contact-team-card strong { font-size: 16px; font-weight: 600; letter-spacing: 0; } .contact-team-card span { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-weight: 500; } .contact-team-card p { margin: 10px 0 0; font-size: 13px; color: var(--ink-4); line-height: 1.5; font-style: italic; } .contact-visit-section, .contact-faq-section { padding: 0 28px 80px; } .contact-visit-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: stretch; } .contact-map-panel { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--border); background: var(--bg-subtle); aspect-ratio: 4 / 3; min-height: 280px; } .contact-map-panel svg { display: block; } .contact-map-panel__address { position: absolute; bottom: 16px; left: 16px; right: 16px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-md); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .contact-map-panel__address span { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .contact-map-panel__address strong { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; } .contact-visit-card { background: var(--bg-card); border-radius: 18px; border: 1px solid var(--border); padding: 32px; display: flex; flex-direction: column; gap: 18px; } .contact-visit-card h3 { font-size: 32px; margin: 8px 0 10px; letter-spacing: 0; } .contact-visit-card p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; } .contact-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 18px; border-top: 1px solid var(--border); } .contact-detail-grid span { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .contact-visit-card__actions { margin-top: auto; display: flex; gap: 10px; padding-top: 12px; flex-wrap: wrap; } .contact-faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; } .contact-faq-heading { position: sticky; top: 92px; } .contact-faq-heading h2 { font-size: 42px; margin: 10px 0 16px; line-height: 1.05; letter-spacing: 0; } .contact-faq-heading p { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0 0 20px; } .contact-faq-row { border-bottom: 1px solid var(--border); } .contact-faq-row__button { width: 100%; text-align: left; background: none; border: none; padding: 20px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); } .contact-faq-row__button > span:first-child { font-size: 17px; font-weight: 500; letter-spacing: 0; } .contact-faq-row__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-subtle); color: var(--ink-2); display: flex; align-items: center; justify-content: center; transition: all var(--t-base); flex-shrink: 0; } .contact-faq-row__icon.is-open { background: var(--brand); color: var(--ink-inverse); transform: rotate(45deg); } .contact-faq-row__answer { padding: 0 4px 22px; animation: fadeUp 240ms both; max-width: 720px; } .contact-faq-row__answer p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; } .contact-faq-row__answer button { margin-top: 12px; background: none; border: none; color: var(--brand); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; padding: 0; } .contact-clinic-section { padding: 0 28px 100px; } .contact-clinic-cta { background: var(--bg-inverse); color: var(--ink-inverse); border-radius: 24px; padding: 52px 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; } .contact-clinic-cta > svg { position: absolute; top: -100px; right: -120px; opacity: 0.08; pointer-events: none; } .contact-clinic-cta__copy { position: relative; } .contact-clinic-cta__copy .eyebrow { color: rgba(255,255,255,0.6); margin-bottom: 12px; } .contact-clinic-cta__copy h3 { font-size: 38px; margin: 0 0 14px; letter-spacing: 0; } .contact-clinic-cta__copy p { font-size: 15px; line-height: 1.6; opacity: 0.8; margin: 0 0 24px; max-width: 480px; } .contact-clinic-cta__copy > div:last-child { display: flex; gap: 10px; flex-wrap: wrap; } .contact-clinic-cta__primary { background: var(--accent); color: var(--ink-inverse); } .contact-clinic-cta__primary:hover { background: var(--accent-2); } .contact-clinic-cta__phone { background: transparent; color: var(--ink-inverse); border-color: rgba(255,255,255,0.3); } .contact-clinic-cta__phone:hover { background: rgba(255,255,255,0.08); } .contact-clinic-cta__rep { position: relative; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 26px; } .contact-clinic-cta__rep > div { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .contact-clinic-cta__rep span { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--ink-inverse); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 500; } .contact-clinic-cta__rep strong, .contact-clinic-cta__rep em { display: block; } .contact-clinic-cta__rep strong { font-size: 15px; font-weight: 600; } .contact-clinic-cta__rep em { font-size: 12px; opacity: 0.7; font-style: normal; } .contact-clinic-cta__rep dl { display: grid; gap: 10px; margin: 0; font-size: 13px; } .contact-clinic-cta__rep dl div { display: flex; justify-content: space-between; gap: 20px; opacity: 0.85; } .contact-clinic-cta__rep dt, .contact-clinic-cta__rep dd { margin: 0; } .contact-clinic-cta__rep dd { font-weight: 600; } /* ============ Home hero ============ */ .home-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%); } .home-hero__grid { max-width: 1280px; margin: 0 auto; padding: 72px 28px 96px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 1fr); gap: 64px; align-items: center; } .home-hero__product { position: relative; aspect-ratio: 1 / 1.05; min-width: 0; } .home-hero__product-glow { position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, var(--brand-tint), transparent 70%); border-radius: 50%; filter: blur(40px); } .home-hero__product-frame { position: absolute; top: 8%; right: 6%; bottom: 8%; left: 6%; background: var(--bg-card); border-radius: 32px; box-shadow: var(--shadow-xl); display: flex; align-items: center; justify-content: center; overflow: hidden; } .home-hero__product-image { width: 85%; height: 85%; object-fit: contain; } .home-hero__product-card { position: absolute; right: 22px; bottom: 22px; left: 22px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border-radius: 16px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 14px; box-shadow: var(--shadow-md); animation: fadeUp 600ms 400ms both; } .home-hero__floating-stat { position: absolute; top: 6%; right: -8%; background: var(--bg-card); padding: 12px 16px; border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); animation: fadeUp 600ms 200ms both; } .home-hero__shipping-badge { position: absolute; bottom: 34%; left: -6%; background: var(--bg-card); padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); display: flex; align-items: center; gap: 8px; animation: fadeUp 600ms 600ms both; } /* ============ Home goal rail ============ */ .home-goals-section { padding: 80px 28px; overflow: hidden; } .home-goals-inner { max-width: 1280px; margin: 0 auto; } .home-goals-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; } .home-goals-title { font-size: 42px; margin: 0; } .home-goals-see-all { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-size: 14px; font-weight: 600; white-space: nowrap; } .home-goal-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 54px) / 4); gap: 18px; overflow-x: auto; overflow-y: visible; overscroll-behavior-inline: contain; scroll-padding-inline: 4px; scroll-snap-type: x proximity; padding: 0 4px 18px; margin: 0 -4px; scrollbar-color: rgba(10, 37, 64, 0.28) transparent; scrollbar-width: thin; } .home-goal-card { display: block; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 22px; color: inherit; text-decoration: none; scroll-snap-align: start; animation: fadeUp 500ms both; } .home-goal-card__media { aspect-ratio: 4 / 3; background: var(--bg-subtle); border-radius: 14px; margin-bottom: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .home-goal-card__title { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.16; margin-bottom: 6px; } .home-goal-card__desc { color: var(--ink-3); font-size: 12px; line-height: 1.45; min-height: 34px; } .home-goal-card__action { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-size: 12px; font-weight: 700; margin-top: 14px; } .home-goal-thumb { width: 100%; height: 100%; display: block; transition: transform 160ms ease-out; } .home-goal-thumb__anatomy { filter: drop-shadow(0 12px 18px rgba(10, 37, 64, 0.08)); } .home-goal-thumb__torso, .home-goal-thumb__neck, .home-goal-thumb__scapula, .home-goal-thumb__head, .home-goal-thumb__deltoid { fill: url("#goalBone-frozen"); stroke: #cfc4b2; stroke-width: 3; stroke-linejoin: round; } .home-goal-thumb--rotator .home-goal-thumb__torso, .home-goal-thumb--rotator .home-goal-thumb__neck, .home-goal-thumb--rotator .home-goal-thumb__scapula, .home-goal-thumb--rotator .home-goal-thumb__head, .home-goal-thumb--rotator .home-goal-thumb__deltoid { fill: url("#goalBone-rotator"); } .home-goal-thumb--postop .home-goal-thumb__torso, .home-goal-thumb--postop .home-goal-thumb__neck, .home-goal-thumb--postop .home-goal-thumb__scapula, .home-goal-thumb--postop .home-goal-thumb__head, .home-goal-thumb--postop .home-goal-thumb__deltoid { fill: url("#goalBone-postop"); } .home-goal-thumb--cancer .home-goal-thumb__torso, .home-goal-thumb--cancer .home-goal-thumb__neck, .home-goal-thumb--cancer .home-goal-thumb__scapula, .home-goal-thumb--cancer .home-goal-thumb__head, .home-goal-thumb--cancer .home-goal-thumb__deltoid { fill: url("#goalBone-cancer"); } .home-goal-thumb--neuro .home-goal-thumb__torso, .home-goal-thumb--neuro .home-goal-thumb__neck, .home-goal-thumb--neuro .home-goal-thumb__scapula, .home-goal-thumb--neuro .home-goal-thumb__head, .home-goal-thumb--neuro .home-goal-thumb__deltoid { fill: url("#goalBone-neuro"); } .home-goal-thumb--sleep .home-goal-thumb__torso, .home-goal-thumb--sleep .home-goal-thumb__neck, .home-goal-thumb--sleep .home-goal-thumb__scapula, .home-goal-thumb--sleep .home-goal-thumb__head, .home-goal-thumb--sleep .home-goal-thumb__deltoid { fill: url("#goalBone-sleep"); } .home-goal-thumb__clavicle, .home-goal-thumb__humerus { fill: none; stroke: #d8cbb8; stroke-width: 14; stroke-linecap: round; } .home-goal-thumb__capsule { fill: rgba(46, 128, 198, 0.2); stroke: #2e80c6; stroke-width: 7; stroke-linejoin: round; } .home-goal-thumb__arc { fill: none; stroke: #0a2540; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; } .home-goal-thumb__arc--limited { stroke: #e05243; stroke-dasharray: 18 16; } .home-goal-thumb__tendon { fill: none; stroke-width: 8; stroke-linecap: round; } .home-goal-thumb__tendon--blue { stroke: #2e80c6; } .home-goal-thumb__tendon--navy { stroke: #0a2540; } .home-goal-thumb__tendon--red { stroke: #e05243; } .home-goal-thumb__tendon--green { stroke: #2f8f62; } .home-goal-thumb__focus-ring { fill: rgba(224, 82, 67, 0.08); stroke: rgba(224, 82, 67, 0.62); stroke-width: 5; stroke-dasharray: 10 8; } .home-goal-thumb__focus-ring--pain { fill: rgba(224, 82, 67, 0.1); stroke: rgba(224, 82, 67, 0.75); } .home-goal-thumb__healing, .home-goal-thumb__mobility, .home-goal-thumb__alignment { fill: none; stroke: #2e80c6; stroke-width: 8; stroke-linecap: round; } .home-goal-thumb__incision, .home-goal-thumb__scar, .home-goal-thumb__pressure { fill: none; stroke: #e05243; stroke-width: 6; stroke-linecap: round; } .home-goal-thumb__suture { fill: none; stroke: #0a2540; stroke-width: 4; stroke-linecap: round; } .home-goal-thumb__pectoral { fill: rgba(224, 82, 67, 0.08); stroke: rgba(224, 82, 67, 0.46); stroke-width: 5; stroke-linejoin: round; } .home-goal-thumb__mobility--pink { stroke: #c75a81; } .home-goal-thumb__lymph, .home-goal-thumb__node { fill: #e7f0fb; stroke: #2e80c6; stroke-width: 4; } .home-goal-thumb__nerve { fill: none; stroke: #2e80c6; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } .home-goal-thumb__nerve--secondary { stroke: #2f8f62; stroke-width: 5; } .home-goal-thumb__neck-line { fill: none; stroke: #0a2540; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 12 10; } @media (max-width: 980px) { .home-goal-rail { grid-auto-columns: calc((100% - 36px) / 3); } } @media (max-width: 760px) { .home-goals-section { padding: 64px 18px; } .home-goals-header { align-items: flex-start; margin-bottom: 26px; } .home-goals-title { font-size: 34px; } .home-goal-rail { grid-auto-columns: minmax(238px, 82vw); gap: 14px; padding-bottom: 14px; } } /* ============ Sally advisor ============ */ .sally-page { max-width: 1320px; margin: 0 auto; padding: 58px 28px 84px; } .sally-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 28px; align-items: stretch; margin-bottom: 28px; } .sally-hero__copy { padding: clamp(34px, 5vw, 64px); background: var(--bg-subtle); border-radius: 22px; border: 1px solid var(--border); } .sally-hero__copy h1 { font-size: clamp(48px, 6vw, 78px); line-height: 0.98; letter-spacing: 0; margin: 10px 0 22px; max-width: 780px; } .sally-hero__copy p { color: var(--ink-2); font-size: 18px; line-height: 1.6; max-width: 680px; margin: 0; } .sally-hero__trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .sally-hero__trust span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--ink-2); font-size: 13px; font-weight: 650; } .sally-hero__panel { padding: clamp(28px, 4vw, 44px); border-radius: 22px; background: var(--brand); color: var(--ink-inverse); display: flex; flex-direction: column; justify-content: flex-end; min-height: 330px; position: relative; overflow: hidden; } .sally-hero__panel::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -80px; top: -80px; background: rgba(255,255,255,0.08); } .sally-hero__panel strong { font-family: var(--display-font); font-size: 38px; line-height: 1; letter-spacing: 0; position: relative; } .sally-hero__panel p { color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.65; margin: 18px 0 0; position: relative; } .sally-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; } .sally-chat { padding: 0; overflow: hidden; } .sally-chat__header { padding: 24px 26px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .sally-chat__header h2, .sally-sidebar h3 { margin: 0; font-size: 18px; font-weight: 750; } .sally-chat__header p, .sally-sidebar p, .sally-sidebar li { margin: 5px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.55; } .sally-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 22px 26px 0; } .sally-prompts button { border: 1px solid var(--border); background: var(--bg-subtle); border-radius: 12px; padding: 14px; text-align: left; font-size: 13px; line-height: 1.35; font-weight: 650; color: var(--ink); cursor: pointer; } .sally-prompts button:hover { border-color: var(--brand); background: var(--brand-tint); } .sally-chat__messages { display: flex; flex-direction: column; gap: 18px; min-height: 170px; padding: 26px; } .sally-message { max-width: 82%; } .sally-message.is-user { align-self: flex-end; } .sally-message__label { font-size: 11px; color: var(--ink-4); font-weight: 700; margin-bottom: 6px; } .sally-message.is-user .sally-message__label { text-align: right; } .sally-message__bubble { border: 1px solid var(--border); background: var(--bg-subtle); border-radius: 16px; padding: 16px 18px; } .sally-message.is-user .sally-message__bubble { background: var(--brand); color: var(--ink-inverse); border-color: var(--brand); } .sally-message__bubble p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; } .sally-message__bubble p:last-child { margin-bottom: 0; } .sally-message__urgent { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-top: 12px; border-radius: 10px; background: var(--warning-tint); color: var(--warning); font-size: 12px; font-weight: 700; } .sally-citations { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .sally-citation { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); color: var(--ink); font-size: 11px; font-weight: 700; } .sally-citation span { color: var(--ink-3); font-weight: 650; } .sally-chat__form { padding: 20px 26px 24px; border-top: 1px solid var(--border); background: var(--bg-subtle); } .sally-chat__form textarea { min-height: 108px; resize: vertical; } .sally-chat__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; } .sally-chat__actions small { color: var(--ink-3); font-size: 12px; line-height: 1.4; } .sally-chat__actions small.is-error { color: var(--danger); } .sally-sidebar { display: flex; flex-direction: column; gap: 14px; } .sally-sidebar .card { padding: 20px; } .sally-sidebar ul { margin: 12px 0 0; padding-left: 18px; } .sally-product-list { display: grid; gap: 10px; margin-top: 14px; } .sally-product-link { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 12px; } .sally-product-link span { width: 54px; height: 48px; border-radius: 10px; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden; } .sally-product-link img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .sally-product-link strong { color: var(--ink); font-size: 13px; line-height: 1.25; } .checkout-trust-strip { max-width: 1180px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: -14px 0 32px; } .checkout-trust-strip__item { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.72); padding: 12px 14px; } .checkout-trust-strip__item > span { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; } .checkout-trust-strip__item strong, .checkout-trust-strip__item small { display: block; } .checkout-trust-strip__item strong { font-size: 13px; line-height: 1.2; } .checkout-trust-strip__item small { color: var(--ink-3); font-size: 11px; line-height: 1.35; margin-top: 3px; } .checkout-summary-items { display: flex; flex-direction: column; gap: 14px; max-height: 280px; overflow: auto; margin-bottom: 18px; padding: 7px 7px 0 0; scrollbar-gutter: stable; } .checkout-summary-item { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; align-items: center; } .checkout-summary-thumb { position: relative; width: 50px; height: 50px; border-radius: 8px; background: var(--bg-subtle); padding: 5px; overflow: visible; } .checkout-summary-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; } .checkout-summary-qty { position: absolute; top: -6px; right: -6px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink-2); color: var(--ink-inverse); font-size: 10px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--bg-card); } /* ============ Sally handoff experience ============ */ :root { --sally-bg: #F4F1EA; --sally-bg-2: #EEEAE0; --sally-orb-1: #0A2540; --sally-orb-2: #5BA0D8; --sally-orb-3: #D9523E; } .sally-stage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 200; background: radial-gradient(circle at 15% 10%, rgba(255,255,255,0.8), transparent 32%), var(--sally-bg); display: flex; flex-direction: column; overflow: hidden; } .sally-noise { position: absolute; inset: 0; pointer-events: none; opacity: 0.18; background-image: radial-gradient(rgba(10,37,64,0.08) 0.8px, transparent 0.8px); background-size: 12px 12px; } .sally-topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; } .sally-topbar__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); } .sally-topbar__brand span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; background: rgba(255,255,255,0.62); border: 1px solid var(--border); border-radius: 999px; padding: 4px 9px; } .sally-topbar__actions { display: inline-flex; align-items: center; gap: 10px; } .sally-start-over { border: 0; background: transparent; color: var(--ink-3); font-weight: 700; font-size: 12px; cursor: pointer; padding: 9px 4px; } .sally-start-over:hover { color: var(--ink); } .sally-close { width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.75); border: 1px solid var(--border); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .sally-main { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px 28px 60px; overflow-x: hidden; } .sally-col { width: min(100%, 660px); text-align: center; } .sally-card { background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.9); border-radius: 24px; box-shadow: 0 30px 80px -30px rgba(10,37,64,0.18); padding: 24px; } .sally-orb { position: relative; display: inline-block; flex: 0 0 auto; aspect-ratio: 1 / 1; flex-shrink: 0; overflow: hidden; isolation: isolate; border-radius: 62% 38% 55% 45% / 52% 60% 40% 48%; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.74), transparent 38%), radial-gradient(circle at 72% 76%, rgba(37,104,171,0.72), transparent 45%), linear-gradient(155deg, rgba(196,225,249,0.96), rgba(91,160,216,0.94) 45%, rgba(32,111,184,0.92)); box-shadow: inset 0 2px 8px rgba(255,255,255,0.55), inset 0 -10px 22px rgba(16,77,140,0.34), 0 0 0 1px rgba(54,120,185,0.22), 0 0 34px -3px rgba(91,160,216,0.62), 0 16px 34px -12px rgba(54,120,185,0.45); animation: sally-orb-morph 14s ease-in-out infinite; transition: transform var(--t-base), box-shadow var(--t-base); vertical-align: middle; } .sally-orb::before { content: ''; position: absolute; inset: -10%; z-index: 0; background: conic-gradient(from 0deg, transparent 0deg, rgba(91,160,216,0.35) 70deg, transparent 150deg, rgba(255,255,255,0.4) 230deg, transparent 320deg); animation: sally-spin 12s linear infinite; mix-blend-mode: soft-light; } .sally-orb::after { content: ''; position: absolute; top: 10%; left: 18%; width: 28%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.82), transparent 70%); z-index: 3; filter: blur(1px); } .sally-blob { position: absolute; inset: -20%; width: 140%; height: 140%; border-radius: 50%; pointer-events: none; z-index: 1; } .sally-blob--1 { background: radial-gradient(circle, rgba(24,102,177,0.72), transparent 50%); animation: sally-drift-1 8.5s ease-in-out infinite alternate; } .sally-blob--2 { background: radial-gradient(circle, rgba(110,181,238,0.82), transparent 45%); animation: sally-drift-2 10.5s ease-in-out infinite alternate; } .sally-blob--3 { background: radial-gradient(circle, rgba(230,245,255,0.64), transparent 40%); animation: sally-drift-3 7s ease-in-out infinite alternate; } .sally-blob--4 { background: radial-gradient(circle, rgba(42,130,207,0.62), transparent 50%); animation: sally-drift-4 12s ease-in-out infinite alternate; } .sally-orb:hover { transform: scale(1.08); box-shadow: inset 0 2px 10px rgba(255,255,255,0.6), inset 0 -10px 22px rgba(54,120,185,0.3), 0 0 38px -2px rgba(91,160,216,0.62), 0 18px 36px -12px rgba(54,120,185,0.45); } .sally-orb.is-thinking { animation-duration: 5s; } .sally-orb.is-thinking::before { animation-duration: 4s; } .sally-orb.is-thinking .sally-blob--1 { animation-duration: 2.6s; } .sally-orb.is-thinking .sally-blob--2 { animation-duration: 2.1s; } .sally-orb.is-thinking .sally-blob--3 { animation-duration: 1.7s; } .sally-orb.is-thinking .sally-blob--4 { animation-duration: 2.9s; } @keyframes sally-orb-morph { 0%, 100% { border-radius: 62% 38% 55% 45% / 52% 60% 40% 48%; } 25% { border-radius: 45% 55% 65% 35% / 60% 45% 55% 40%; } 50% { border-radius: 55% 45% 40% 60% / 45% 50% 60% 50%; } 75% { border-radius: 50% 50% 60% 40% / 55% 65% 35% 45%; } } @keyframes sally-spin { to { transform: rotate(360deg); } } @keyframes sally-drift-1 { 0% { transform: translate(-22%, -12%) scale(0.95); } 50% { transform: translate(8%, 18%) scale(1.12); } 100% { transform: translate(18%, -8%) scale(1.05); } } @keyframes sally-drift-2 { 0% { transform: translate(22%, 28%) scale(1); } 50% { transform: translate(-20%, 10%) scale(0.85); } 100% { transform: translate(-12%, -22%) scale(1.08); } } @keyframes sally-drift-3 { 0% { transform: translate(-28%, -28%) scale(0.7); } 50% { transform: translate(20%, -20%) scale(1.05); } 100% { transform: translate(0%, 24%) scale(0.85); } } @keyframes sally-drift-4 { 0% { transform: translate(15%, -25%) scale(0.9); } 50% { transform: translate(-15%, 18%) scale(1.1); } 100% { transform: translate(22%, 22%) scale(0.95); } } .sally-q { font-family: var(--font-display); font-weight: 400; line-height: 1.16; color: var(--ink); text-align: center; margin: 0; } .sally-grad-word { color: var(--accent); font-style: italic; } .sally-intro > .sally-orb { margin-bottom: 28px; } .sally-intro .sally-q { font-size: clamp(34px, 4.4vw, 56px); margin-bottom: 18px; } .sally-intro p, .sally-email p { max-width: 540px; margin: 0 auto 30px; color: var(--ink-2); font-size: 16px; line-height: 1.55; } .sally-intro__actions { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; } .sally-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 26px auto 0; max-width: 720px; } .sally-mode-card { border: 1px solid var(--border); background: rgba(255,255,255,0.78); border-radius: 20px; padding: 22px; min-height: 178px; display: grid; justify-items: center; align-content: center; gap: 10px; color: var(--ink); cursor: pointer; box-shadow: 0 18px 50px -30px rgba(10,37,64,0.24); } .sally-mode-card:hover { border-color: rgba(54,120,185,0.4); transform: translateY(-2px); } .sally-mode-card > span { width: 48px; height: 48px; border-radius: 999px; background: rgba(91,160,216,0.12); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; } .sally-mode-card strong { font-size: 18px; } .sally-mode-card small { color: var(--ink-3); line-height: 1.45; max-width: 240px; } .sally-conversation { width: min(100%, 900px); max-width: calc(100vw - 56px); min-height: min(500px, calc(100vh - 150px)); display: flex; flex-direction: column; align-items: center; justify-content: center; } .sally-voice { width: min(100%, 900px); max-width: calc(100vw - 56px); } .sally-session-orb { display: flex; justify-content: center; margin: 0 auto 16px; } .sally-transcript, .sally-voice-transcript { width: 100%; max-height: min(48vh, 480px); overflow: auto; border: 1px solid rgba(10,37,64,0.1); background: rgba(255,255,255,0.66); border-radius: 24px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 26px 70px -36px rgba(10,37,64,0.22); } .sally-chat-bubble { width: min(82%, 640px); border: 1px solid rgba(10,37,64,0.08); background: white; border-radius: 18px; padding: 14px 16px; text-align: left; } .sally-chat-bubble.is-user { justify-self: end; background: var(--brand); color: white; } .sally-chat-bubble strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; opacity: 0.75; } .sally-chat-bubble p { margin: 0; line-height: 1.5; } .sally-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 44px; margin: 16px 0 4px; } .sally-composer { width: 100%; } .sally-question-composer { position: relative; width: min(100%, 760px); margin: 0 auto; } .sally-voice-status { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.72); border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px; color: var(--ink-2); font-weight: 700; font-size: 13px; margin: -10px auto 22px; } .sally-voice-status > span { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); } .sally-voice-status.is-connected > span { background: var(--success); box-shadow: 0 0 0 5px rgba(47,137,81,0.12); } .sally-voice-status.is-connecting > span { background: var(--warning); animation: sally-bounce 1s ease-in-out infinite; } .sally-voice-status.is-error > span { background: var(--danger); } .sally-voice-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0; } .sally-voice-teleprompter { position: relative; width: min(100%, 860px); max-width: calc(100vw - 72px); height: clamp(220px, 34vh, 360px); display: flex; align-items: center; justify-content: center; overflow-x: hidden; overflow-y: auto; margin: 0 auto 22px; transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease; contain: layout paint; scroll-behavior: smooth; scrollbar-width: none; } .sally-voice-teleprompter::-webkit-scrollbar { display: none; } .sally-voice-teleprompter::before, .sally-voice-teleprompter::after { content: ''; position: absolute; left: 0; right: 0; z-index: 2; height: 28%; pointer-events: none; } .sally-voice-teleprompter::before { top: 0; background: linear-gradient(to bottom, var(--sally-bg) 0%, rgba(244,241,234,0.9) 32%, rgba(244,241,234,0) 100%); } .sally-voice-teleprompter::after { bottom: 0; background: linear-gradient(to top, var(--sally-bg) 0%, rgba(244,241,234,0.9) 32%, rgba(244,241,234,0) 100%); } .sally-voice-prompt { width: 100%; min-height: 100%; transition: opacity 720ms ease, transform 720ms ease, filter 720ms ease; display: flex; align-items: center; justify-content: center; } .sally-voice .sally-question-headline { font-size: clamp(27px, 2.65vw, 44px); line-height: 1.14; overflow-wrap: anywhere; word-break: normal; margin: 0 auto; padding: 48px 0; } .sally-voice-teleprompter.is-fading-out { opacity: 0; transform: translateY(6px) scale(0.985); filter: blur(1.2px); } .sally-voice-teleprompter.is-speaking .sally-voice-prompt { animation: sally-prompt-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes sally-prompt-reveal { from { opacity: 0; transform: translateY(8px) scale(0.992); filter: blur(1.2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .sally-intro__actions span, .sally-answer-actions span, .sally-trust-strip span { font-size: 12px; color: var(--ink-3); } .sally-trust-strip { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 42px; } .sally-trust-strip span { display: inline-flex; align-items: center; gap: 6px; } .sally-question-orb { display: flex; justify-content: center; margin-bottom: 18px; } .sally-ack { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.62); border: 1px solid rgba(10,37,64,0.08); border-radius: 999px; padding: 6px 13px; font-size: 12px; color: var(--ink-3); max-width: min(380px, 100%); margin-bottom: 20px; box-shadow: 0 14px 34px -28px rgba(10,37,64,0.3); } .sally-ack q { display: inline-block; max-width: 225px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-style: italic; } .sally-ack-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .sally-stepper { display: flex; gap: 6px; align-items: center; justify-content: center; background: rgba(255,255,255,0.62); border: 1px solid rgba(10,37,64,0.08); border-radius: 999px; padding: 7px; width: fit-content; max-width: 100%; margin: 0 auto 12px; } .sally-step { width: 28px; height: 6px; border-radius: 999px; background: rgba(10,37,64,0.13); } .sally-step.is-done { background: var(--sally-orb-2); } .sally-step.is-current { background: var(--accent); width: 44px; } .sally-cat { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--brand); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 800; width: fit-content; margin: 0 auto 12px; } .sally-cat::before, .sally-cat::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.35; } .sally-col > .sally-q { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 26px; } .sally-question-headline { max-width: 820px; margin: 0 auto 30px; font-size: clamp(34px, 3.75vw, 60px); line-height: 1.08; letter-spacing: 0; text-align: center; } .sally-question-headline.is-long { max-width: 840px; font-size: clamp(24px, 2.8vw, 41px); line-height: 1.12; } .sally-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .sally-chip { border: 1px solid rgba(10,37,64,0.12); background: rgba(255,255,255,0.86); border-radius: 999px; padding: 9px 15px; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; } .sally-chip:hover { border-color: var(--sally-orb-2); color: var(--brand); } .sally-input { width: 100%; min-height: 58px; background: rgba(255,255,255,0.92); color: var(--ink); border: 1.5px solid rgba(10,37,64,0.12); border-radius: 16px; padding: 18px 20px; font: inherit; resize: none; box-shadow: 0 14px 30px -22px rgba(10,37,64,0.32); } .sally-input:focus { outline: none; border-color: var(--sally-orb-2); box-shadow: 0 0 0 4px rgba(10,37,64,0.08), 0 14px 30px -22px rgba(10,37,64,0.32); } .sally-question-input { min-height: 102px; border-radius: 17px; border-width: 2px; border-color: rgba(10,37,64,0.18); padding: 20px 74px 20px 22px; font-size: 16px; line-height: 1.5; box-shadow: 0 22px 54px -34px rgba(10,37,64,0.38); } .sally-question-input:focus { border-color: #245a9d; box-shadow: 0 0 0 3px rgba(36,90,157,0.12), 0 22px 54px -34px rgba(10,37,64,0.38); } .sally-input-mic { position: absolute; right: 16px; bottom: 17px; width: 41px; height: 41px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid rgba(10,37,64,0.11); background: rgba(255,255,255,0.78); color: var(--brand); box-shadow: 0 10px 24px -18px rgba(10,37,64,0.45); cursor: pointer; } .sally-input-mic:hover { border-color: var(--sally-orb-2); transform: translateY(-1px); } .sally-question-actions { width: min(100%, 760px); display: flex; justify-content: space-between; align-items: center; gap: 13px; margin-top: 21px; } .sally-question-actions > span { color: var(--ink-3); font-size: 12px; } .sally-question-actions > div { display: flex; align-items: center; gap: 9px; } .sally-question-actions .btn { height: 36px; padding: 0 17px; font-size: 13px; } .sally-answer-actions { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .sally-thinking { color: var(--ink-3); max-width: min(770px, 100%); min-height: min(420px, calc(100vh - 170px)); justify-content: center; } .sally-thinking > .sally-orb { margin-bottom: 24px; } .sally-thinking .sally-q { max-width: 700px; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.08; margin-bottom: 15px; } .sally-thinking > div { font-size: clamp(13px, 1.2vw, 18px); color: var(--ink-3); } .sally-dots { display: inline-flex; gap: 4px; margin-right: 6px; } .sally-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--sally-orb-2); animation: sally-bounce 1s ease-in-out infinite; } .sally-dots span:nth-child(2) { animation-delay: 0.18s; } .sally-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes sally-bounce { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-5px); opacity: 1; } } .sally-email .sally-orb { margin-bottom: 20px; } .sally-email form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 0 auto 14px; max-width: 520px; } .sally-result { width: min(100%, 1120px); max-height: 100%; overflow: auto; padding: 10px 4px 30px; } .sally-result__summary { text-align: center; max-width: min(92vw, 720px); margin: 0 auto 24px; } .sally-result__summary > .sally-orb { display: block; margin: 0 auto 14px; } .sally-result__summary .sally-q { font-size: clamp(28px, 3vw, 44px); line-height: 1.12; margin: 18px auto 14px; max-width: 720px; } .sally-result__summary p { color: var(--ink-2); line-height: 1.6; font-size: 16px; } .sally-urgency { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 8px 14px; color: white; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .sally-urgency--urgent { background: var(--danger); } .sally-urgency--semi { background: var(--warning); } .sally-urgency--ok { background: var(--success); } .sally-result__recommendation { display: grid; gap: 6px; text-align: left; background: rgba(255,255,255,0.72); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-top: 18px; } .sally-result__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 18px; } .sally-result__grid.is-single { grid-template-columns: minmax(0, 760px); justify-content: center; } .sally-card h3 { margin: 0 0 14px; font-size: 16px; } .sally-why-row { border-top: 1px solid rgba(10,37,64,0.08); padding: 12px 0; display: grid; gap: 5px; } .sally-why-row q { color: var(--ink-2); line-height: 1.45; } .sally-why-row span { color: var(--ink-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .sally-bundle { display: grid; gap: 10px; margin-bottom: 14px; } .sally-bundle-item { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: inherit; background: rgba(255,255,255,0.75); } .sally-bundle-item > span { background: var(--bg-subtle); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 8px; } .sally-bundle-item img { width: 100%; height: 54px; object-fit: contain; } .sally-bundle-item small { display: block; color: var(--accent); font-weight: 800; margin: 2px 0 4px; } .sally-bundle-item p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; } .sally-muted { color: var(--ink-3); margin: 0; } .sally-exercise-toggle { margin-top: 10px; } .sally-exercises { margin-top: 18px; } .sally-exercise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sally-exercise { border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.72); padding: 14px; } .sally-exercise strong { display: block; margin-bottom: 6px; } .sally-exercise p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; } .sally-exercise small { display: block; margin-top: 9px; color: var(--ink-3); font-size: 11px; line-height: 1.4; } .sally-result__actions { margin-top: 20px; display: flex; justify-content: center; gap: 12px; } .sally-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 999px; padding: 10px 20px 10px 10px; box-shadow: 0 18px 42px -16px rgba(10,37,64,0.34); cursor: pointer; } .sally-fab .sally-orb { box-shadow: inset 0 2px 10px rgba(255,255,255,0.62), inset 0 -10px 22px rgba(54,120,185,0.28), 0 0 0 1px rgba(54,120,185,0.16), 0 0 36px -2px rgba(91,160,216,0.64), 0 16px 32px -14px rgba(10,37,64,0.48); } .sally-fab:hover { transform: translateY(-2px); } .sally-fab-label { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .sally-fab-label strong { font-size: 13px; color: var(--ink); } .sally-fab-label small { font-size: 11px; color: var(--ink-3); } .sally-prompt-card, .sally-shop-card { position: relative; display: flex; align-items: center; gap: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; color: inherit; text-decoration: none; overflow: hidden; } .sally-prompt-card > .sally-orb { flex: 0 0 auto; inline-size: 52px; block-size: 52px; min-inline-size: 52px; min-block-size: 52px; align-self: center; } .sally-account-card > .sally-orb { inline-size: 54px; block-size: 54px; min-inline-size: 54px; min-block-size: 54px; } .sally-prompt-card__copy { display: grid; gap: 4px; min-width: 0; flex: 1; } .sally-prompt-card small, .sally-shop-card small { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; } .sally-prompt-card strong, .sally-shop-card strong { color: var(--ink); font-size: 17px; line-height: 1.25; } .sally-prompt-card em, .sally-shop-card span { color: var(--ink-3); font-style: normal; font-size: 12px; line-height: 1.45; } .sally-prompt-card b { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-size: 12px; white-space: nowrap; } .sally-shop-card { flex-direction: column; align-items: flex-start; } .sally-shop-card em { color: var(--brand); font-size: 12px; font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .sally-session-notice { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.84); border: 1px solid var(--border); border-radius: 999px; color: var(--ink-3); font-size: 12px; padding: 8px 14px; } .sally-admin-slider, .sally-batch-upload { margin-top: 16px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .sally-admin-slider p, .sally-batch-upload p { color: var(--ink-3); font-size: 12px; line-height: 1.45; margin: 4px 0 10px; } .sally-admin-slider input[type="range"] { width: 100%; } .sally-admin-slider__scale { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 11px; } .sally-admin-slider__scale strong { color: var(--ink); } .admin-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .admin-card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .admin-card-header h3 { margin: 0; font-size: 15px; font-weight: 700; } .admin-card-header a, .admin-card-header span { color: var(--ink-3); font-size: 12px; font-weight: 700; } .admin-filter-row { display: grid; grid-template-columns: minmax(240px, 1fr) 220px; gap: 12px; margin-bottom: 16px; } .sally-admin-alert { display: flex; align-items: center; gap: 12px; background: var(--danger-tint); color: var(--danger); border-left: 3px solid var(--danger); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; } .sally-admin-alert .btn { margin-left: auto; } .sally-session-row { cursor: pointer; } .sally-outcome-list { display: grid; gap: 10px; } .sally-outcome-list > div, .sally-attribution-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; } .sally-admin-note { display: grid; gap: 4px; background: var(--bg-subtle); border-radius: 12px; padding: 12px 14px; color: var(--ink-2); font-size: 13px; } .sally-admin-transcript { padding: 18px 20px; display: grid; gap: 12px; } .sally-admin-transcript > p { color: var(--ink-3); font-size: 13px; margin: 0; } .sally-admin-message { max-width: 78%; padding: 12px 14px; border-radius: 14px; background: var(--bg-subtle); font-size: 13px; } .sally-admin-message.is-assistant { margin-right: auto; } .sally-admin-message.is-user { margin-left: auto; background: var(--brand-tint); } .sally-admin-message p { margin: 5px 0 0; color: var(--ink-2); line-height: 1.5; white-space: pre-wrap; } .sally-admin-message small { display: block; margin-top: 8px; color: var(--ink-3); } .sally-fade-enter { animation: fadeUp 520ms cubic-bezier(0.4, 0, 0.2, 1) both; } @media (max-width: 760px) { .sally-topbar { padding: 16px; } .sally-topbar__brand span { display: none; } .sally-main { padding: 10px 16px 48px; align-items: center; overflow: auto; } .sally-col { margin-top: 16px; } .sally-answer-actions, .sally-email form, .sally-mode-grid, .checkout-trust-strip, .sally-result__grid, .sally-exercise-grid, .admin-kpi-grid, .admin-filter-row { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; } .sally-answer-actions { display: flex; } .sally-conversation { min-height: calc(100vh - 120px); } .sally-question-headline { font-size: clamp(26px, 8vw, 38px); margin-bottom: 20px; } .sally-question-input { min-height: 108px; padding: 16px 56px 17px 16px; font-size: 15px; border-radius: 16px; } .sally-input-mic { width: 40px; height: 40px; right: 12px; bottom: 14px; } .sally-question-actions { flex-direction: column; align-items: stretch; margin-top: 16px; } .sally-question-actions > div { flex-direction: column-reverse; align-items: stretch; } .sally-ack { font-size: 12px; } .sally-ack q { max-width: 160px; } .sally-thinking { min-height: calc(100vh - 130px); } .sally-thinking .sally-q { font-size: clamp(26px, 8vw, 38px); } .sally-thinking > div { font-size: 13px; } .sally-chat-bubble { width: 100%; } .sally-voice-actions { flex-direction: column; align-items: stretch; width: 100%; } .sally-trust-strip, .sally-result__actions { flex-direction: column; align-items: center; } .sally-fab { right: 14px; bottom: 14px; padding-right: 10px; } .sally-fab-label { display: none; } .sally-prompt-card { align-items: flex-start; flex-direction: column; } } /* ============ Sparkline ============ */ .sparkline path.area { fill: var(--brand-tint); opacity: 0.5; } .sparkline path.line { fill: none; stroke: var(--brand); stroke-width: 1.6; } .admin-product-slug-field { display: flex; align-items: center; gap: 6px; max-width: 100%; } .admin-product-slug-field span { flex: 0 1 auto; min-width: 0; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; } .admin-product-slug-field input { flex: 1 1 180px; min-width: 0; } /* ============ Proximity motion ============ */ :where( .btn, .product-card, .journal-card, .journal-feature, .government-product-card, .home-hero__product-card, .home-hero__floating-stat, .home-hero__shipping-badge, .home-goal-card, .store-header__nav-link, .store-mega-card, .store-mega-goal, .store-mega-product, .mobile-mega__primary-link, .mobile-mega__category-card, .mobile-mega__goal-link, .mobile-mega__product-card, .standalone-funnel__product-card, .standalone-funnel__media-card, .contact-team-card, .contact-social-card, .contact-visit-card, .sally-mode-card, .sally-close, .sally-input-mic, .sally-result__recommendation, .sally-card, .sally-bundle-item, .sally-exercise, .sally-prompt-card, .sally-shop-card, .sally-fab ) { --rm-proximity: 0; --rm-proximity-x: 0px; --rm-proximity-y: 0px; --rm-proximity-scale: 1; --rm-proximity-media-scale: 1; --rm-proximity-shadow-y: 6px; --rm-proximity-shadow-blur: 14px; --rm-proximity-shadow-alpha: 0.06; --rm-proximity-outline-alpha: 0; --rm-proximity-strong-shadow-y: 10px; --rm-proximity-strong-shadow-blur: 18px; --rm-proximity-strong-shadow-alpha: 0.13; --rm-proximity-strong-outline-alpha: 0; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { :where( .btn, .product-card, .journal-card, .journal-feature, .government-product-card, .home-hero__product-card, .home-hero__floating-stat, .home-hero__shipping-badge, .home-goal-card, .store-header__nav-link, .store-mega-card, .store-mega-goal, .store-mega-product, .mobile-mega__primary-link, .mobile-mega__category-card, .mobile-mega__goal-link, .mobile-mega__product-card, .standalone-funnel__product-card, .standalone-funnel__media-card, .contact-team-card, .contact-social-card, .contact-visit-card, .sally-mode-card, .sally-close, .sally-input-mic, .sally-result__recommendation, .sally-card, .sally-bundle-item, .sally-exercise, .sally-prompt-card, .sally-shop-card, .sally-fab )[data-proximity-active="true"]:not(:active) { translate: var(--rm-proximity-x) var(--rm-proximity-y); scale: var(--rm-proximity-scale); box-shadow: 0 var(--rm-proximity-shadow-y) var(--rm-proximity-shadow-blur) rgba(10, 37, 64, var(--rm-proximity-shadow-alpha)), 0 0 0 1px rgba(10, 37, 64, var(--rm-proximity-outline-alpha)); transition: translate 120ms ease-out, scale 120ms ease-out, box-shadow 180ms ease-out, background var(--t-fast), border-color var(--t-fast), color var(--t-fast); will-change: translate, scale, box-shadow; } .btn--primary[data-proximity-active="true"]:not(:active), .btn--accent[data-proximity-active="true"]:not(:active), .sally-mode-card[data-proximity-active="true"]:not(:active), .sally-close[data-proximity-active="true"]:not(:active), .sally-input-mic[data-proximity-active="true"]:not(:active), .sally-card[data-proximity-active="true"]:not(:active), .sally-bundle-item[data-proximity-active="true"]:not(:active), .sally-exercise[data-proximity-active="true"]:not(:active), .sally-prompt-card[data-proximity-active="true"]:not(:active), .sally-shop-card[data-proximity-active="true"]:not(:active), .sally-fab[data-proximity-active="true"]:not(:active) { box-shadow: 0 var(--rm-proximity-strong-shadow-y) var(--rm-proximity-strong-shadow-blur) rgba(10, 37, 64, var(--rm-proximity-strong-shadow-alpha)), 0 0 0 1px rgba(255, 255, 255, var(--rm-proximity-strong-outline-alpha)); } .product-card[data-proximity-active="true"] .product-img-wrap img, .journal-card[data-proximity-active="true"] img, .journal-feature[data-proximity-active="true"] img, .government-product-card[data-proximity-active="true"] img, .home-goal-card[data-proximity-active="true"] img, .home-goal-card[data-proximity-active="true"] .home-goal-card__media > *, .store-mega-card[data-proximity-active="true"] img, .store-mega-product[data-proximity-active="true"] img, .mobile-mega__category-card[data-proximity-active="true"] img, .mobile-mega__product-card[data-proximity-active="true"] img, .standalone-funnel__product-card[data-proximity-active="true"] img, .standalone-funnel__media-card[data-proximity-active="true"] img, .sally-bundle-item[data-proximity-active="true"] img { transform: scale(var(--rm-proximity-media-scale)); transition: transform 160ms ease-out; } .sally-mode-card[data-proximity-active="true"] > span { transform: scale(var(--rm-proximity-media-scale)); transition: transform 160ms ease-out; } .sally-mode-card[data-proximity-active="true"]:not(:active), .sally-result__recommendation[data-proximity-active="true"]:not(:active), .sally-card[data-proximity-active="true"]:not(:active), .sally-bundle-item[data-proximity-active="true"]:not(:active), .sally-exercise[data-proximity-active="true"]:not(:active), .sally-prompt-card[data-proximity-active="true"]:not(:active), .sally-shop-card[data-proximity-active="true"]:not(:active) { border-color: rgba(10, 37, 64, 0.18); } .store-header__nav-link[data-proximity-active="true"]:not(:active), .store-mega-card[data-proximity-active="true"]:not(:active), .store-mega-goal[data-proximity-active="true"]:not(:active), .store-mega-product[data-proximity-active="true"]:not(:active), .mobile-mega__primary-link[data-proximity-active="true"]:not(:active), .mobile-mega__category-card[data-proximity-active="true"]:not(:active), .mobile-mega__goal-link[data-proximity-active="true"]:not(:active), .mobile-mega__product-card[data-proximity-active="true"]:not(:active) { border-color: rgba(10, 37, 64, 0.18) !important; box-shadow: 0 14px 30px rgba(10, 37, 64, 0.11), 0 0 0 1px rgba(10, 37, 64, 0.08) !important; transform: translate3d(var(--rm-proximity-x), var(--rm-proximity-y), 0) scale(var(--rm-proximity-scale)); } .store-header__nav-link[data-proximity-active="true"]:not(:active) { background: rgba(232, 240, 251, 0.66); transform: translate3d(var(--rm-proximity-x), var(--rm-proximity-y), 0) scale(var(--rm-proximity-scale)); } .store-mega-card[data-proximity-active="true"]:not(:active), .store-mega-goal[data-proximity-active="true"]:not(:active), .store-mega-product[data-proximity-active="true"]:not(:active), .mobile-mega__category-card[data-proximity-active="true"]:not(:active), .mobile-mega__goal-link[data-proximity-active="true"]:not(:active), .mobile-mega__product-card[data-proximity-active="true"]:not(:active) { background-color: #ffffff; } } /* ============ Bottom-right floating chat / toast (hooks for tweaks panel positioning) ============ */ .tweaks-panel-bottom-right { position: fixed; right: 20px; bottom: 20px; z-index: 1000; } /* ============ Runtime toggles + responsive guardrails ============ */ [data-show-promo="false"] .promo-bar { display: none !important; } [data-animations="none"] *, [data-animations="none"] *::before, [data-animations="none"] *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } @media (max-width: 980px) { body { overflow-x: hidden; } [data-screen-label="Auth"] { grid-template-columns: 1fr !important; overflow-x: hidden !important; } [data-screen-label="Auth"] > div { min-width: 0 !important; max-width: 100% !important; } [data-screen-label="Auth"] > div:first-child { padding-left: 22px !important; padding-right: 22px !important; } [data-screen-label="Auth"] > div:last-child { display: none !important; } .sally-page { padding: 36px 18px 64px !important; } .sally-hero, .sally-workspace { grid-template-columns: 1fr !important; } .sally-hero__panel { min-height: 240px; } .sally-prompts { grid-template-columns: 1fr !important; } .sally-message { max-width: 100%; } .sally-chat__actions { flex-direction: column; align-items: stretch; } .sally-chat__actions .btn { width: 100%; } .contact-hero__inner, .contact-form-grid, .contact-visit-grid, .contact-faq-grid, .contact-clinic-cta { grid-template-columns: 1fr !important; } .contact-hero__inner { gap: 44px; align-items: start; } .contact-sidebar, .contact-faq-heading { position: static; } .contact-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-section-heading { align-items: flex-start; flex-direction: column; } .home-hero__grid { grid-template-columns: 1fr !important; gap: 44px !important; padding: 58px 24px 78px !important; } .home-hero__product { width: min(100%, 560px) !important; margin: 0 auto !important; } .home-hero__floating-stat { right: 0 !important; } .home-hero__shipping-badge { left: 0 !important; } .mobile-menu-button { display: inline-flex !important; } .store-header__nav { display: none !important; } .store-header__bar { grid-template-columns: 1fr auto 1fr !important; gap: 16px !important; padding: 12px 18px !important; } .store-header__left { justify-content: flex-start !important; } .store-header__logo { justify-self: center !important; } .store-header__actions { justify-content: flex-end !important; } .mobile-mega__primary-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mobile-mega__primary-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); font-size: 14px; font-weight: 700; } .store-footer { padding: 54px 22px 30px !important; } .store-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 34px 28px !important; padding-bottom: 44px !important; } .store-footer__grid > div:first-child { grid-column: 1 / -1 !important; } .government-hero { padding: 64px 24px 78px !important; } .government-hero__inner, .government-overview__grid, .government-profile__grid, .government-performance__grid { grid-template-columns: 1fr !important; gap: 34px !important; } .government-hero__title { font-size: clamp(44px, 9vw, 62px) !important; } .government-hero__media { min-height: 380px !important; } .government-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .government-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .government-cta { flex-direction: column !important; align-items: flex-start !important; } .government-cta__actions { justify-content: flex-start !important; } .policy-hero__inner, .policy-grid { grid-template-columns: 1fr !important; } .policy-hero { padding: 58px 24px 76px !important; } .policy-body { margin-top: -34px !important; } .admin-shell { grid-template-columns: 1fr !important; } .admin-shell, .admin-main, .admin-sidebar, .admin-main * { min-width: 0; } .admin-shell { max-width: 100vw; overflow-x: clip; } .admin-sidebar { position: relative !important; height: auto !important; max-height: none !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; padding: 14px !important; } .admin-sidebar > div:first-child, .admin-sidebar > div:last-child, .nav-section-title { grid-column: 1 / -1 !important; } .admin-main { padding: 22px 18px 52px !important; } .admin-main > div:first-child > div:last-child { flex-wrap: wrap !important; justify-content: flex-start !important; } .admin-main .tabs { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .admin-main .tab { flex: 0 0 auto; } .admin-main .card { min-width: 0; max-width: 100%; } .admin-main .card:has(.table) { overflow-x: auto !important; } .admin-main .card:has(.table) .table { width: max-content; min-width: 100%; max-width: none; } .admin-main [style*="display: grid"] > *, .admin-main [style*="display: flex"] > * { min-width: 0; } [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [style*="grid-template-columns: 1.05fr 1fr"], [style*="grid-template-columns: 1.15fr 1fr"], [style*="grid-template-columns: 1.2fr 1fr"], [style*="grid-template-columns: 1.4fr 1fr"], [style*="grid-template-columns: 1.5fr 1fr"], [style*="grid-template-columns: 2fr 1fr"], [style*="grid-template-columns: 1fr 1.2fr"], [style*="grid-template-columns: 240px 1fr"], [style*="grid-template-columns: 248px 1fr"], [style*="grid-template-columns: 320px 1fr"], [style*="grid-template-columns: 1fr 320px"], [style*="grid-template-columns: 1.5fr repeat"] { grid-template-columns: 1fr !important; } table { display: block !important; max-width: 100% !important; overflow-x: auto !important; white-space: nowrap; } } @media (max-width: 640px) { .promo-bar { font-size: 11px !important; line-height: 1.35 !important; } .contact-page, .contact-page section, .contact-section-inner, .contact-hero__inner, .contact-form-grid, .contact-form-card, .contact-sidebar, .contact-visit-grid, .contact-faq-grid, .contact-clinic-cta { max-width: 100%; min-width: 0; } .contact-hero__inner { padding: 48px 20px 50px; gap: 30px; } .contact-hero__badge-row { align-items: flex-start; flex-direction: column; gap: 8px; } .contact-hero__title { font-size: clamp(44px, 14vw, 60px); max-width: 100%; overflow-wrap: break-word; } .contact-hero p { font-size: 16px; max-width: 100%; overflow-wrap: break-word; } .contact-reach-tile { grid-template-columns: 44px minmax(0, 1fr); width: 100%; max-width: 100%; } .contact-reach-tile__note { grid-column: 2; text-align: left; white-space: normal; } .contact-form-section, .contact-team-section, .contact-visit-section, .contact-faq-section, .contact-clinic-section { padding-left: 20px; padding-right: 20px; } .contact-form-card__body, .contact-form-footer, .contact-success, .contact-visit-card, .contact-clinic-cta { padding-left: 22px; padding-right: 22px; } .contact-form-card h2 { font-size: clamp(30px, 9.6vw, 36px); line-height: 1.08; max-width: 100%; text-wrap: balance; overflow-wrap: break-word; } .contact-form-card p, .contact-routing-hint, .contact-subscribe, .contact-attach, .contact-message-field__meta { max-width: 100%; overflow-wrap: break-word; } .contact-reason-chips { width: 100%; } .contact-reason-chips button { max-width: 100%; white-space: normal; } .contact-routing-hint { align-items: flex-start; line-height: 1.45; } .contact-attach { flex-wrap: wrap; } .contact-attach .btn { margin-left: auto; } .contact-field-grid, .contact-detail-grid, .contact-team-grid { grid-template-columns: 1fr; } .contact-form-footer, .contact-success__actions, .contact-map-panel__address, .contact-clinic-cta__copy > div:last-child { align-items: stretch; flex-direction: column; } .contact-form-footer .btn, .contact-success__actions .btn, .contact-map-panel__address .btn, .contact-visit-card__actions .btn, .contact-clinic-cta .btn { width: 100%; } .contact-success__ticket { align-items: center; flex-direction: column; gap: 4px; } .contact-map-panel { min-height: 360px; } .contact-section-heading h2, .contact-faq-heading h2, .contact-clinic-cta__copy h3 { font-size: clamp(32px, 11vw, 42px); } .home-hero__grid { padding: 54px 28px 68px !important; gap: 34px !important; } .home-hero__product { aspect-ratio: 0.92 / 1 !important; } .home-hero__product-frame { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; border-radius: 28px !important; } .home-hero__product-image { width: 78% !important; height: 68% !important; margin-bottom: 64px !important; } .home-hero__product-card { right: 14px !important; bottom: 14px !important; left: 14px !important; padding: 12px 13px !important; } .home-hero__shipping-badge, .home-hero__floating-stat { display: none !important; } .store-header__bar { grid-template-columns: 44px minmax(0, 1fr) auto !important; gap: 8px !important; padding: 10px 12px !important; } .store-header__left .store-header__mobile-toggle, .store-header__actions .btn { width: 44px; min-width: 44px; height: 44px !important; min-height: 44px; padding: 0 !important; } .store-header__account-action { display: none !important; } .store-header__logo img { max-width: min(144px, 52vw); height: auto !important; } .store-header__actions { gap: 0 !important; } .mobile-mega__primary-nav { grid-template-columns: 1fr; } .shop-category-tiles { grid-template-columns: 1fr !important; } .shop-category-tile { grid-template-columns: 82px minmax(0, 1fr) !important; } .store-footer { padding: 44px 18px 28px !important; } .store-footer__grid { grid-template-columns: 1fr !important; gap: 30px !important; padding-bottom: 34px !important; } .store-footer__bottom { flex-direction: column !important; align-items: flex-start !important; } .store-footer__legal { justify-content: flex-start !important; } .government-hero { padding: 46px 20px 56px !important; } .government-hero__inner { display: grid !important; gap: 28px !important; max-width: 100% !important; width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; } .government-hero__inner > * { min-width: 0 !important; max-width: 100% !important; } .government-hero__title { font-size: clamp(34px, 10.4vw, 42px) !important; line-height: 1 !important; text-wrap: balance; } .government-hero__copy { font-size: 16px !important; line-height: 1.6 !important; max-width: 100% !important; overflow-wrap: break-word !important; } .government-hero__actions { flex-direction: column !important; align-items: stretch !important; } .government-hero__actions .btn { width: 100%; } .government-hero__proof { grid-template-columns: 1fr !important; margin-top: 28px !important; } .government-hero__media { min-height: 280px !important; width: 100% !important; max-width: 100% !important; } .government-hero__brief { position: static !important; grid-template-columns: 1fr !important; margin: 0 !important; border-radius: 0 !important; } .government-stats, .government-overview, .government-profile, .government-products, .government-performance, .government-cta { padding-left: 18px !important; padding-right: 18px !important; } .government-stats__grid, .government-products__grid { grid-template-columns: 1fr !important; } .government-stats__grid { margin-top: -26px !important; } .government-profile, .government-performance { padding-top: 54px !important; padding-bottom: 54px !important; } .government-overview { padding-top: 58px !important; padding-bottom: 48px !important; } .government-designation-row, .government-document-card { grid-template-columns: 1fr !important; gap: 10px !important; } .government-document-card img { width: 100% !important; max-width: 170px !important; } .government-products { padding-top: 54px !important; padding-bottom: 54px !important; } .government-products__header { flex-direction: column !important; align-items: flex-start !important; } .government-section-title { font-size: clamp(31px, 10vw, 40px) !important; } .government-cta { margin-bottom: 54px !important; } .government-cta__actions, .government-cta__actions .btn { width: 100%; } .imported-content-page { padding: 48px 20px 72px !important; } .imported-content-page__body { font-size: 16px !important; } .journal-hero__inner { padding: 48px 20px 40px !important; } .journal-hero h1 { font-size: clamp(46px, 14vw, 62px) !important; } .journal-search, .journal-tools, .journal-filters, .journal-filters button { width: 100% !important; } .journal-filters { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .journal-index__content, .journal-article__header, .journal-article__body, .journal-article__below { padding-left: 20px !important; padding-right: 20px !important; } .journal-feature, .journal-grid, .journal-article__body, .journal-keep-reading__grid, .journal-newsletter, .journal-product-callout { grid-template-columns: 1fr !important; } .journal-feature__media { min-height: 260px !important; } .journal-feature__body, .journal-card__body, .journal-newsletter, .journal-author-card, .journal-product-callout { padding: 22px !important; } .journal-card { min-height: 0 !important; } .journal-article__image { height: 320px !important; margin-left: 20px !important; margin-right: 20px !important; } .journal-article__aside { position: static !important; order: -1; } .journal-product-callout strong { width: 100%; justify-content: center; } .policy-hero { padding: 44px 20px 66px !important; } .policy-hero h1 { font-size: clamp(42px, 13vw, 58px) !important; } .policy-hero p { font-size: 17px !important; } .policy-hero__promise { padding: 20px !important; width: 100% !important; } .policy-hero__promise strong { font-size: 30px !important; } .policy-hero__promise span { font-size: 15px !important; } .policy-body { padding-left: 18px !important; padding-right: 18px !important; margin-bottom: 62px !important; } .policy-guarantee, .policy-panel { padding: 24px !important; } .policy-contact-note { grid-template-columns: 1fr !important; } .mobile-mega__header { padding: 12px 14px !important; } .mobile-mega__body { padding: 16px 14px 26px !important; } .mobile-mega__quick { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .mobile-mega__category-card { grid-template-columns: 58px minmax(0, 1fr) auto !important; gap: 10px !important; } .mobile-mega__thumb { width: 58px !important; height: 58px !important; } .mobile-mega__featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .mobile-mega__link-groups { grid-template-columns: 1fr !important; gap: 10px !important; } .btn { white-space: normal; text-align: center; min-height: 44px; height: auto; padding-top: 10px; padding-bottom: 10px; } .btn--sm { min-height: 34px; padding-top: 7px; padding-bottom: 7px; } .btn--lg { min-height: 48px; padding-top: 12px; padding-bottom: 12px; } .drawer { width: 100vw !important; } .modal-overlay { padding: 14px !important; align-items: flex-end !important; } .modal { border-radius: 16px 16px 0 0 !important; } [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } [style*="column-count: 3"] { column-count: 1 !important; } [style*="font-size: 76px"], [style*="font-size: 64px"], [style*="font-size: 60px"], [style*="font-size: 56px"], [style*="font-size: 52px"], [style*="font-size: 48px"], [style*="font-size: 44px"] { font-size: clamp(32px, 11vw, 44px) !important; } .admin-sidebar { grid-template-columns: 1fr !important; } .funnel-builder__intro, .funnel-ai-panel__head { align-items: stretch !important; } .funnel-builder__intro-actions { justify-content: flex-start !important; } .funnel-ai-panel__grid { grid-template-columns: 1fr !important; } .tweaks-panel-bottom-right { right: 12px !important; bottom: 12px !important; max-width: calc(100vw - 24px) !important; } }