/* ========================================================================== 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; --brand-blue: #3678B9; --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--danger { background: var(--danger); color: var(--ink-inverse); border-color: var(--danger); } .btn--danger:hover { background: color-mix(in srgb, var(--danger) 86%, var(--ink)); border-color: color-mix(in srgb, var(--danger) 86%, 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); } .select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230A2540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px 18px; } .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; } .address-autocomplete { position: relative; width: 100%; } .address-autocomplete__panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 6px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-card); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16); } .address-autocomplete__option { width: 100%; min-height: 48px; display: block; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; } .address-autocomplete__option:hover, .address-autocomplete__option:focus-visible { outline: none; background: var(--bg-subtle); } .address-autocomplete__option span, .address-autocomplete__option small { display: block; overflow-wrap: anywhere; } .address-autocomplete__option span { font-size: 13px; font-weight: 700; line-height: 1.35; } .address-autocomplete__option small { margin-top: 2px; color: var(--ink-3); font-size: 12px; line-height: 1.35; } .address-autocomplete__status { padding: 10px 12px; color: var(--ink-3); font-size: 12px; line-height: 1.4; } .address-autocomplete__status--error { color: var(--danger); } .address-autocomplete__attribution { display: flex; justify-content: flex-end; align-items: center; min-height: 26px; padding: 4px 8px 2px; border-top: 1px solid var(--border); } .address-autocomplete__attribution img { display: block; width: 120px; height: auto; } .admin-file-input { height: auto; min-height: 56px; padding: 10px 14px; line-height: 34px; } .admin-file-input::file-selector-button { height: 34px; margin: 0 12px 0 0; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-subtle); color: var(--ink); font: inherit; font-weight: 600; } .admin-file-input::-webkit-file-upload-button { height: 34px; margin: 0 12px 0 0; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-subtle); color: var(--ink); font: inherit; font-weight: 600; } .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; } .app-loader { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: var(--bg); } .app-loader__label { margin-top: 4px; font-size: 11px; color: #9AA3B3; letter-spacing: 0.1em; text-transform: uppercase; } .app-loader__track { width: min(220px, 58vw); height: 8px; overflow: hidden; border-radius: 999px; background: var(--bg-subtle); border: 1px solid var(--border); box-shadow: inset 0 1px 2px rgba(10, 37, 64, 0.08); } .app-loader__bar { height: 100%; border-radius: inherit; background: #3678B9; box-shadow: 0 0 18px rgba(54, 120, 185, 0.28); transition: width 220ms ease; } /* ============ 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: color var(--t-fast), translate var(--t-fast), scale var(--t-fast); } .store-header__nav-link::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 2px; border-radius: 999px; background: var(--brand); opacity: 0; transform: scaleX(0.35); transform-origin: center; transition: opacity var(--t-fast), transform var(--t-fast); } .store-header__nav-link:hover, .store-header__nav-link:focus-visible, .store-header__nav-link.is-open { color: var(--brand); } .store-header__nav-link.is-active, .store-header__nav-link.is-highlight { color: var(--brand); } .store-header__nav-link:hover::after, .store-header__nav-link:focus-visible::after, .store-header__nav-link.is-open::after, .store-header__nav-link.is-active::after { opacity: 1; transform: scaleX(1); } .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; } .btn--xs { min-height: 28px; padding: 0 9px; border-radius: 999px; font-size: 11px; line-height: 1; } .support-admin-layout { display: grid; grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; min-width: 0; } .support-toolbar-card { display: grid; gap: 9px; min-width: 0; margin-bottom: 12px; padding: 12px; overflow: hidden; } .support-queue-card, .support-detail-card { min-width: 0; overflow: hidden; } .support-queue-card { padding: 8px; } .support-detail-card { padding: 14px; min-height: 620px; } .support-queue-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 0; color: var(--ink-3); font-size: 12px; } .support-queue-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; padding-bottom: 2px; overflow: visible; } .support-queue-tabs .btn { flex: 0 0 auto; min-width: 0; padding-inline: 12px; } .support-filter-bar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(130px, 170px) minmax(145px, 190px) auto auto; gap: 8px; align-items: center; margin-bottom: 0; max-width: 1180px; min-width: 0; } .support-filter-bar .input, .support-filter-bar .select, .support-filter-bar .btn { min-height: 36px; min-width: 0; } .support-ticket-list { display: grid; align-content: start; gap: 6px; max-height: calc(100vh - 245px); min-height: 560px; overflow: auto; overflow-x: hidden; padding-right: 2px; } .support-ticket-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; min-width: 0; box-sizing: border-box; text-align: left; border: 1px solid var(--border); background: var(--bg-card); color: var(--ink); border-radius: 8px; padding: 10px; cursor: pointer; min-height: 88px; overflow: hidden; } .support-ticket-row:hover, .support-ticket-row.is-active { border-color: var(--brand); background: var(--bg-subtle); } .support-ticket-row__main, .support-ticket-row__head { min-width: 0; } .support-ticket-row__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .support-ticket-row__head strong, .support-ticket-row__meta, .support-ticket-row__time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .support-ticket-row__subject { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 4px; overflow: hidden; font-size: 13px; font-weight: 750; line-height: 1.24; overflow-wrap: anywhere; } .support-ticket-row__meta { color: var(--ink-3); font-size: 12px; margin-top: 3px; } .support-ticket-row__time { color: var(--ink-3); font-size: 11px; margin-top: 2px; } .support-ticket-row__quick-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; justify-content: center; min-width: 72px; } .support-empty-state { color: var(--ink-3); font-size: 13px; padding: 12px; } .support-empty-detail { display: grid; place-items: center; min-height: 420px; color: var(--ink-3); } .support-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 280px); gap: 14px; min-width: 0; } .support-conversation { display: grid; grid-template-rows: auto minmax(300px, 1fr) auto; gap: 10px; min-width: 0; } .support-conversation__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; min-width: 0; } .support-conversation__title { min-width: 0; color: var(--ink-3); font-size: 13px; } .support-ticket-number { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--ink-3); font-size: 12px; font-weight: 800; } .support-conversation__title h2 { margin: 4px 0 4px; max-width: 100%; font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; } .support-conversation__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 340px; } .support-danger-action { color: var(--danger); } .support-admin-layout .support-thread { display: flex; flex-direction: column; gap: 10px; min-height: 320px; max-height: calc(100vh - 410px); overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg-subtle) 76%, var(--bg-card)); } .support-message { display: flex; gap: 9px; width: min(86%, 820px); min-width: 0; border: 0; padding: 0; background: transparent; font-size: 13px; } .support-message--outbound { align-self: flex-end; flex-direction: row-reverse; } .support-message--internal { align-self: center; width: min(92%, 760px); } .support-message__avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--bg-card); border: 1px solid var(--border); color: var(--ink-2); font-size: 10px; font-weight: 800; } .support-message--outbound .support-message__avatar { background: var(--brand); border-color: var(--brand); color: var(--ink-inverse); } .support-message--internal .support-message__avatar { background: color-mix(in srgb, var(--accent-tint) 60%, var(--bg-card)); } .support-message__content { min-width: 0; flex: 1; } .support-message__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; color: var(--ink-3); font-size: 11px; } .support-message__meta strong { color: var(--ink); font-size: 12px; overflow-wrap: anywhere; } .support-message__channel { display: inline-flex; align-items: center; min-height: 19px; padding: 2px 7px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); color: var(--ink-3); font-size: 10px; font-weight: 700; text-transform: uppercase; } .support-message__bubble { border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; background: var(--bg-card); box-shadow: var(--shadow-xs); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.48; } .support-message--outbound .support-message__bubble { border-color: color-mix(in srgb, var(--brand) 26%, var(--border)); background: color-mix(in srgb, var(--brand-tint) 52%, var(--bg-card)); } .support-message--internal .support-message__bubble { border-style: dashed; background: color-mix(in srgb, var(--accent-tint) 48%, var(--bg-card)); } .support-attachments { display: grid; gap: 8px; } .support-attachments h3 { font-size: 14px; margin: 0; } .support-attachments > div { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .support-composer { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); min-width: 0; } .support-composer__bar { display: grid; grid-template-columns: minmax(160px, 260px) auto auto auto; align-items: center; gap: 6px; min-width: 0; } .support-macro-select { min-width: 0; } .support-composer__channel { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-3); font-size: 12px; font-weight: 700; } .support-reply-box { min-height: 110px; } .support-note-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; } .support-note-box { min-height: 58px; } .support-ticket-fields { display: grid; gap: 9px; align-content: start; min-width: 0; } .support-ticket-fields .input, .support-ticket-fields .select { min-height: 42px; } .support-customer-summary { border-top: 1px solid var(--border); padding-top: 10px; color: var(--ink-3); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } .support-customer-summary strong { color: var(--ink); } .support-customer-summary a { display: inline-flex; margin-top: 8px; color: var(--brand); font-weight: 700; } .support-saved-replies-drawer { position: fixed; inset: 0; z-index: 1000; display: grid; justify-items: end; } .support-saved-replies-drawer__backdrop { position: absolute; inset: 0; border: 0; background: rgba(11, 19, 32, 0.28); cursor: default; } .support-saved-replies-drawer__panel { position: relative; width: min(720px, 100vw); height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 18px; background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: auto; } .support-saved-replies-drawer__header { display: flex; align-items: start; justify-content: space-between; gap: 12px; } .support-saved-replies-drawer__header h2 { margin: 0 0 3px; font-size: 22px; } .support-saved-replies-drawer__header p { margin: 0; color: var(--ink-3); font-size: 13px; } .support-saved-replies-editor { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); gap: 12px; min-height: 0; } .support-saved-replies-list { display: grid; align-content: start; gap: 6px; min-width: 0; overflow: auto; } .support-saved-reply-item { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--ink); text-align: left; cursor: pointer; } .support-saved-reply-item.is-active { border-color: var(--brand); background: var(--bg-subtle); } .support-saved-reply-item.is-disabled { opacity: 0.58; } .support-saved-reply-item strong, .support-saved-reply-item span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .support-saved-reply-item span { margin-top: 3px; color: var(--ink-3); font-size: 12px; } .support-saved-replies-form { display: grid; align-content: start; gap: 12px; min-width: 0; } .support-saved-reply-body { min-height: 280px; } .support-saved-replies-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } @media (max-width: 1500px) { .support-detail-layout { grid-template-columns: minmax(0, 1fr); } .support-ticket-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); } .support-ticket-fields > .btn { grid-column: span 2; } .support-customer-summary { grid-column: 1 / -1; } } @media (max-width: 1220px) { .support-admin-layout { grid-template-columns: minmax(0, 1fr); } .support-ticket-list { min-height: 0; max-height: 360px; } } @media (max-width: 820px) { .support-filter-bar, .support-ticket-fields, .support-conversation__header, .support-note-composer, .support-composer__bar, .support-saved-replies-editor { grid-template-columns: minmax(0, 1fr); } .support-conversation__actions { justify-content: flex-start; max-width: none; } .support-message, .support-message--internal { width: 100%; } .support-composer__bar .btn { width: 100%; } .support-conversation__title h2 { font-size: 20px; } .support-ticket-row { grid-template-columns: minmax(0, 1fr); } .support-ticket-row__quick-actions { flex-direction: row; justify-content: flex-start; align-items: center; min-width: 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; } .legal-page__intro { color: var(--ink-2); font-size: 18px; line-height: 1.6; margin: 0 0 22px; } .legal-page__body section { border-top: 1px solid var(--border); padding-top: 4px; } .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__actions button.is-saved { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); } .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-mobile-bar, .admin-nav-backdrop { display: none; } .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; } .account-nav-sally-blob { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; } .account-nav-sally-blob .sally-orb, .account-nav-sally-blob .sally-orb:hover { filter: none; box-shadow: none; animation-duration: 14s; } .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; } /* ============ Account shell ============ */ .account-page { max-width: 1180px; margin: 0 auto; padding: 32px 28px 60px; } .account-page--sally { max-width: 1180px; } .account-page--sally .account-page__layout { grid-template-columns: 240px minmax(0, 1fr); } .account-page__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; } .account-page__sidebar { position: sticky; top: 80px; align-self: start; z-index: 2; min-width: 0; } .account-page__sidebar .nav-item { min-width: 0; } .account-page__sidebar .nav-item > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-page__content { min-width: 0; } /* ============ Account Sally ============ */ .account-sally-summary { padding: 18px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .account-sally-summary__main { display: flex; align-items: center; gap: 16px; min-width: 0; } .account-sally-summary__fallback-orb { width: 58px; height: 58px; border-radius: 999px; background: var(--brand); display: inline-block; } .account-sally-summary h2, .account-sally-hero h2 { margin: 0; color: var(--ink); line-height: 1.12; } .account-sally-summary h2 { font-size: 20px; } .account-sally-summary p, .account-sally-hero p, .account-sally-section-head p { margin: 5px 0 0; color: var(--ink-3); line-height: 1.5; } .account-sally-summary__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .account-sally { display: flex; flex-direction: column; gap: 18px; } .account-sally--dashboard { gap: 20px; } .account-sally-hero { padding: 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; } .account-sally-hero h2 { font-size: 28px; font-family: var(--font-display); } .account-sally-hero__orb { display: flex; align-items: center; justify-content: center; } .account-sally-hero__meta { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--ink-3); font-size: 12px; } .account-sally-dashboard { position: static; max-height: none; overflow: visible; padding: 24px; display: grid; gap: 18px; min-width: 0; scrollbar-width: none; } .account-sally-dashboard:hover, .account-sally-dashboard:focus-within { scrollbar-width: thin; } .account-sally-dashboard::-webkit-scrollbar { width: 0; height: 0; } .account-sally-dashboard:hover::-webkit-scrollbar, .account-sally-dashboard:focus-within::-webkit-scrollbar { width: 8px; } .account-sally-dashboard::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-4) 54%, transparent); border-radius: 999px; } .account-sally-dashboard__snapshot, .account-sally-dashboard__snapshot-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .account-sally-dashboard__snapshot { justify-content: space-between; } .account-sally-dashboard__snapshot-main { flex: 1 1 auto; } .account-sally-dashboard__snapshot h3, .account-sally-dashboard__settings h3 { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.18; } .account-sally-dashboard__snapshot p, .account-sally-dashboard__settings p { margin: 5px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; } .account-sally-dashboard__metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .account-sally-dashboard__metrics > div { min-width: 0; padding: 14px; border-radius: 12px; background: var(--bg-subtle); } .account-sally-dashboard__metrics span, .account-sally-dashboard__bars span { display: block; color: var(--ink-3); font-size: 11px; font-weight: 800; line-height: 1.2; } .account-sally-dashboard__metrics strong { display: block; margin-top: 5px; color: var(--ink); font-size: 16px; line-height: 1.2; } .account-sally-dashboard__bars { display: grid; gap: 9px; } .account-sally-dashboard__bars > div { display: grid; grid-template-columns: minmax(100px, 0.34fr) minmax(0, 1fr); align-items: center; gap: 10px; } .account-sally-dashboard__lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; min-width: 0; } .account-sally-dashboard__progress, .account-sally-dashboard__settings { min-width: 0; width: 100%; padding-top: 16px; border-top: 1px solid var(--border); } .account-sally-dashboard .account-sally-progress-view__charts { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 14px; } .account-sally-dashboard .account-sally-progress-card__chart { height: 132px; } .account-sally-dashboard__settings { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr); gap: 16px 22px; align-items: start; padding-bottom: 2px; } .account-sally-dashboard__settings .account-sally-frequency, .account-sally-dashboard__settings .account-sally-plan-controls, .account-sally-dashboard__settings-note, .account-sally-sms-settings { grid-column: 2; } .account-sally-dashboard__settings-note { margin: -2px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.35; } .account-sally-sms-settings { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-subtle); } .account-sally-sms-settings__field, .account-sally-sms-settings__consent { min-width: 0; } .account-sally-sms-settings__field { display: grid; gap: 6px; } .account-sally-sms-settings__field span { color: var(--ink-3); font-size: 11px; font-weight: 800; line-height: 1.2; } .account-sally-sms-settings__field input { width: 100%; min-height: 42px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-card); color: var(--ink); padding: 0 13px; font: inherit; font-size: 13px; outline: none; } .account-sally-sms-settings__field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent); } .account-sally-sms-settings__consent { grid-column: 1 / -1; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 8px; color: var(--ink-3); font-size: 11px; line-height: 1.45; } .account-sally-sms-settings__consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); } .account-sally-sms-settings__consent button { border: 0; background: transparent; color: var(--brand); padding: 0; font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .account-sally-sms-settings__save { white-space: nowrap; } .account-sally-sms-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-subtle); } .account-sally-sms-summary > div { display: grid; gap: 2px; min-width: 0; } .account-sally-sms-summary strong { color: var(--ink); font-size: 12px; line-height: 1.2; } .account-sally-sms-summary span { color: var(--ink-3); font-size: 11px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1180px) { .account-page--sally { max-width: 1080px; } .account-sally-dashboard__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-sally-dashboard__lower { grid-template-columns: 1fr; } .account-sally-dashboard .account-sally-progress-view__charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .account-sally-notice { padding: 12px 14px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); font-size: 13px; border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); } .account-sally-notice.is-error { background: var(--danger-tint); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 24%, transparent); } .account-sally-memory { padding: 20px; display: grid; gap: 14px; } .account-sally-memory__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; } .account-sally-memory__head h3 { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.2; } .account-sally-memory__head p { margin: 6px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.45; } .account-sally-memory__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .account-sally-memory-card { min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); padding: 14px; } .account-sally-memory-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-width: 0; } .account-sally-memory-card__head strong, .account-sally-memory-card__head span { display: block; min-width: 0; } .account-sally-memory-card__head strong { color: var(--ink); font-size: 13px; line-height: 1.2; } .account-sally-memory-card__head span { flex: 0 0 auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 11px; font-weight: 800; line-height: 1.2; } .account-sally-memory-card dl { display: grid; gap: 7px; margin: 0; } .account-sally-memory-card__item { display: grid; grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr); gap: 8px 10px; min-width: 0; border: 1px solid transparent; border-radius: 8px; padding: 6px; margin: -3px; } .account-sally-memory-card__item.is-updated { border-color: color-mix(in srgb, var(--brand) 22%, transparent); background: color-mix(in srgb, var(--brand-tint) 70%, var(--bg-card)); } .account-sally-memory-card dt, .account-sally-memory-card dd { min-width: 0; margin: 0; font-size: 12px; line-height: 1.35; } .account-sally-memory-card dt { color: var(--ink-3); font-weight: 800; } .account-sally-memory-card dd { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 8px; color: var(--ink); font-weight: 700; } .account-sally-memory-card dd > span { flex: 1 1 150px; min-width: 0; overflow-wrap: anywhere; } .account-sally-memory-card dd.is-missing { color: var(--ink-3); font-weight: 650; } .account-sally-memory-card dd.is-updated { color: var(--ink); } .account-sally-memory-card dd small { flex: 0 1 auto; color: var(--brand); font-size: 10px; font-weight: 800; line-height: 1.35; white-space: nowrap; } .account-sally-memory-card dd button, .account-sally-learned__item button { flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); border-radius: 999px; background: var(--bg-card); color: var(--brand); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; line-height: 1; min-height: 26px; padding: 0 9px; } .account-sally-memory-card dd button:hover, .account-sally-learned__item button:hover { background: var(--brand-tint); } .account-sally-memory-card dd button:disabled, .account-sally-learned__item button:disabled { cursor: wait; opacity: 0.68; } .account-sally-section-head h3, .account-sally-products h3 { margin: 0; font-size: 18px; } .account-sally-layout { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: 0; align-items: stretch; height: min(760px, max(520px, calc(100vh - 190px))); min-height: 0; overflow: visible; padding: 0; } .account-sally-products { padding: 20px; } .account-sally-list { padding: 14px; overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--border); min-width: 0; scrollbar-width: none; } .account-sally-list:hover, .account-sally-list:focus-within, .account-sally-chat__body:hover, .account-sally-chat__body:focus-within { scrollbar-width: thin; } .account-sally-list::-webkit-scrollbar, .account-sally-chat__body::-webkit-scrollbar { width: 0; height: 0; } .account-sally-list:hover::-webkit-scrollbar, .account-sally-list:focus-within::-webkit-scrollbar, .account-sally-chat__body:hover::-webkit-scrollbar, .account-sally-chat__body:focus-within::-webkit-scrollbar { width: 8px; } .account-sally-list::-webkit-scrollbar-thumb, .account-sally-chat__body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-4) 54%, transparent); border-radius: 999px; } .account-sally-detail { padding: 24px; } .account-sally-section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; min-width: 0; } .account-sally-section-head h3 { min-width: 0; font-size: 15px; line-height: 1.2; } .account-sally-new-chat { border: 1px solid var(--border); background: var(--bg-subtle); color: var(--ink-2); border-radius: 999px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; flex: 0 0 auto; white-space: nowrap; } .account-sally-new-chat:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); } .account-sally-thread-list { display: grid; gap: 2px; min-width: 0; } .account-sally-row { width: 100%; border: 0; background: transparent; color: var(--ink); border-radius: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: start; gap: 2px; text-align: left; min-width: 0; position: relative; } .account-sally-row.is-renaming { grid-template-columns: 1fr; background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--brand); } .account-sally-row.is-selected, .account-sally-row:hover { background: var(--brand-tint); } .account-sally-row.is-archived { color: var(--ink-3); } .account-sally-row.is-archived.is-selected, .account-sally-row.is-archived:hover { color: var(--ink); } .account-sally-row__main { border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; gap: 4px; min-width: 0; padding: 8px 7px 9px 10px; text-align: left; width: 100%; } .account-sally-row__title { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-sally-row__activity { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 11px; font-weight: 700; line-height: 1.2; } .account-sally-row__signals { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .account-sally-row__signals small { max-width: 100%; border-radius: 999px; background: color-mix(in srgb, var(--bg-card) 80%, var(--brand-tint)); color: var(--ink-3); font-size: 10px; font-weight: 800; line-height: 1; overflow: hidden; padding: 4px 6px; text-overflow: ellipsis; white-space: nowrap; } .account-sally-row.is-selected .account-sally-row__signals small, .account-sally-row:hover .account-sally-row__signals small { color: var(--brand); } .account-sally-row__actions { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding-top: 7px; } .account-sally-row__menu-button { border: 0; border-radius: 999px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink-3); cursor: pointer; opacity: 0; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast); } .account-sally-row:hover .account-sally-row__menu-button, .account-sally-row.is-selected .account-sally-row__menu-button, .account-sally-row__menu-button:focus-visible, .account-sally-row__menu-button.is-visible { opacity: 1; } .account-sally-row__menu-button:hover { background: var(--bg-card); color: var(--ink); } .account-sally-row__menu { position: absolute; top: 32px; right: 0; z-index: 20; min-width: 176px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); box-shadow: 0 18px 40px rgba(12, 27, 45, 0.16); } .account-sally-row__menu button { width: 100%; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); padding: 9px 10px; display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; } .account-sally-row__menu button:hover { background: var(--bg-subtle); color: var(--ink); } .account-sally-row__menu button.is-danger { color: var(--danger); } .account-sally-row__menu button.is-confirming { background: color-mix(in srgb, var(--danger-tint) 72%, var(--bg-card)); color: var(--danger); } .account-sally-archive { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .account-sally-archive-toggle { width: 100%; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 34px; padding: 8px 8px 8px 10px; text-align: left; font: inherit; font-size: 12px; font-weight: 800; } .account-sally-archive-toggle:hover { background: var(--bg-subtle); color: var(--ink); } .account-sally-archive-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-sally-archive-toggle small { border-radius: 999px; background: var(--bg-subtle); color: var(--ink-3); font-size: 11px; line-height: 1; min-width: 22px; padding: 5px 7px; text-align: center; } .account-sally-thread-list.is-archived { margin-top: 4px; } .account-sally-row__rename { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; min-width: 0; } .account-sally-row__rename input, .account-sally-chat__rename input { min-width: 0; width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; padding: 8px 9px; } .account-sally-row__rename input { grid-column: 1 / -1; } .account-sally-row__rename input:focus, .account-sally-chat__rename input:focus { outline: 2px solid var(--brand-tint); border-color: var(--brand); } .account-sally-row__rename button { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 700; min-height: 30px; padding: 0 8px; cursor: pointer; } .account-sally-row__rename button[type="submit"] { background: var(--brand); border-color: var(--brand); color: white; } .account-sally-muted { color: var(--ink-3); font-size: 12px; font-style: normal; } .account-sally-detail__summary { padding: 14px; border-radius: 12px; background: var(--bg-subtle); margin: 0 0 12px; color: var(--ink-2); line-height: 1.55; } .account-sally-dashboard__status { flex: 0 0 auto; border-radius: 999px; padding: 6px 9px; background: var(--bg-subtle); color: var(--ink-3); font-size: 11px; font-weight: 800; line-height: 1; } .account-sally-dashboard__status.is-active { background: var(--success-tint); color: var(--success); } .account-sally-progress__bar { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: var(--bg-subtle); } .account-sally-progress__bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand-blue); } .account-sally-progress-view { display: grid; gap: 14px; } .account-sally-progress-view__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; } .account-sally-progress-view__head h4 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.2; } .account-sally-progress-view__head p { margin: 4px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.4; } .account-sally-progress-view__head > span { flex: 0 0 auto; color: var(--ink-3); font-size: 12px; font-weight: 800; } .account-sally-progress-view__charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .account-sally-progress-card { min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 12px; display: grid; gap: 10px; } .account-sally-progress-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; } .account-sally-progress-card__head strong, .account-sally-progress-card__head span, .account-sally-progress-card__head b { display: block; } .account-sally-progress-card__head strong { color: var(--ink); font-size: 13px; line-height: 1.2; } .account-sally-progress-card__head span { margin-top: 3px; color: var(--ink-3); font-size: 11px; line-height: 1.35; } .account-sally-progress-card__head b { flex: 0 0 auto; color: var(--ink); font-size: 18px; line-height: 1; } .account-sally-progress-card__chart { width: 100%; height: 92px; border-radius: 10px; background: var(--bg-subtle); overflow: hidden; } .account-sally-progress-card__chart svg { display: block; width: 100%; height: 100%; } .account-sally-progress-card__chart line { stroke: color-mix(in srgb, var(--border-strong) 62%, transparent); stroke-width: 1; } .account-sally-progress-card__chart polyline { fill: none; stroke: #3678B9; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .account-sally-progress-card__chart circle { fill: #3678B9; stroke: var(--bg-card); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .account-sally-progress-card__empty { height: 100%; display: grid; place-items: center; color: var(--ink-3); font-size: 12px; font-weight: 700; } .account-sally-progress-card__dates { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 11px; line-height: 1.2; } .account-sally-progress-view__note { border-radius: 10px; background: var(--bg-subtle); color: var(--ink-3); padding: 10px 12px; font-size: 12px; line-height: 1.45; } .account-sally-dashboard__prompt { display: flex; align-items: center; gap: 8px; border-radius: 10px; background: var(--brand-tint); color: var(--ink-2); padding: 9px 10px; font-size: 12px; line-height: 1.35; } .account-sally-plan-controls { display: flex; flex-wrap: wrap; gap: 6px; } .account-sally-frequency { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .account-sally-frequency > span { color: var(--ink-3); font-size: 11px; font-weight: 800; line-height: 1; padding-right: 2px; } .account-sally-plan-controls button, .account-sally-frequency button { min-height: 30px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--ink-3); padding: 0 10px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .account-sally-plan-controls button.is-active, .account-sally-frequency button.is-active { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); } .account-sally-plan-controls button:disabled, .account-sally-frequency button:disabled { cursor: not-allowed; opacity: 0.55; } .account-sally-sms-terms { max-width: 620px; } .account-sally-sms-terms__head, .account-sally-sms-terms__footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px; } .account-sally-sms-terms__head { border-bottom: 1px solid var(--border); } .account-sally-sms-terms__footer { border-top: 1px solid var(--border); justify-content: flex-end; } .account-sally-sms-terms__head h3 { margin: 0; color: var(--ink); font-size: 22px; line-height: 1.12; } .account-sally-sms-terms__head p, .account-sally-sms-terms__body p, .account-sally-sms-terms__body li { color: var(--ink-3); font-size: 13px; line-height: 1.55; } .account-sally-sms-terms__head p { margin: 5px 0 0; } .account-sally-sms-terms__body { display: grid; gap: 12px; padding: 20px 22px; } .account-sally-sms-terms__body p { margin: 0; } .account-sally-sms-terms__body ul { margin: 0; padding-left: 20px; } .account-sally-sms-terms__body li + li { margin-top: 7px; } .account-sally-chat { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; } .account-sally-chat__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); min-width: 0; } .account-sally-chat__title { min-width: 0; } .account-sally-chat__rename { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 0; } .account-sally-chat__head h3 { margin: 0; font-size: 22px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-sally-chat__head-actions { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .account-sally-chat__body { min-height: 0; overflow-x: hidden; overflow-y: auto; padding-right: 4px; scrollbar-width: none; } .account-sally-companion-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; margin-bottom: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); } .account-sally-companion-intro__orb { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; } .account-sally-companion-intro__orb .sally-orb, .account-sally-companion-intro__orb .sally-orb:hover { filter: none; box-shadow: none; } .account-sally-companion-intro span { display: block; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1.2; text-transform: uppercase; } .account-sally-companion-intro h4 { margin: 4px 0 0; color: var(--ink); font-size: 16px; line-height: 1.25; } .account-sally-companion-intro p { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.48; } .account-sally-companion-intro__signals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .account-sally-companion-intro__signals small { border-radius: 999px; background: var(--bg-card); color: var(--ink-3); font-size: 11px; font-weight: 800; line-height: 1; padding: 6px 8px; } .account-sally-transcript { display: flex; flex-direction: column; gap: 10px; } .account-sally-message { display: flex; align-items: flex-start; gap: 10px; max-width: min(84%, 680px); } .account-sally-message.is-user { justify-content: flex-end; margin-left: auto; } .account-sally-message.is-assistant { margin-right: auto; } .account-sally-message__avatar { display: flex; flex: 0 0 34px; width: 34px; height: 34px; align-items: center; justify-content: center; margin-top: 2px; } .account-sally-message__avatar .sally-orb, .account-sally-message__avatar .sally-orb:hover { filter: none; box-shadow: none; } .account-sally-message__fallback-orb { display: block; width: 28px; height: 28px; border-radius: 999px; background: var(--brand-blue); } .account-sally-message__bubble { min-width: 0; border-radius: 12px; padding: 11px 12px; background: var(--bg-subtle); } .account-sally-message.is-user .account-sally-message__bubble { background: var(--ink); color: white; } .account-sally-message.is-assistant .account-sally-message__bubble { background: var(--brand-tint); } .account-sally-message.is-pending .account-sally-message__bubble { min-width: 64px; min-height: 38px; display: flex; align-items: center; justify-content: center; } .account-sally-message.is-error .account-sally-message__bubble { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 32%, transparent); } .account-sally-message__label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; } .account-sally-message.is-user .account-sally-message__label, .account-sally-message.is-user .account-sally-message__bubble p { color: white; } .account-sally-message__bubble p { margin: 0; color: var(--ink-2); line-height: 1.5; } .account-sally-typing-dots { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; } .account-sally-typing-dots span { width: 8px; height: 8px; border-radius: 999px; background: #3678B9; opacity: 0.65; animation: account-sally-dot 1.05s ease-in-out infinite; } .account-sally-typing-dots span:nth-child(2) { animation-delay: 0.14s; } .account-sally-typing-dots span:nth-child(3) { animation-delay: 0.28s; } @keyframes account-sally-dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.65; } 40% { transform: translateY(-4px); opacity: 1; } } .account-sally-message__retry { margin-top: 8px; border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); border-radius: 999px; background: var(--danger-tint); color: var(--danger); font: inherit; font-size: 12px; font-weight: 800; padding: 5px 9px; cursor: pointer; } .account-sally-chat__empty { margin: 12px 0; } .account-sally-chat__empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); } .account-sally-chat__empty p { margin: 0; line-height: 1.5; } .account-sally-chat__recs { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .account-sally-chat__recs h4 { margin: 0 0 10px; font-size: 13px; color: var(--ink); } .account-sally-learned { display: grid; gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--brand-tint) 72%, var(--bg-card)); } .account-sally-learned__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .account-sally-learned__head span { color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.2; } .account-sally-learned__head small { color: var(--ink-3); font-size: 11px; font-weight: 800; line-height: 1.2; text-align: right; } .account-sally-learned__list { display: grid; gap: 7px; } .account-sally-learned__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); } .account-sally-learned__item > div { display: grid; gap: 2px; min-width: 0; } .account-sally-learned__item strong { color: var(--ink); font-size: 12px; line-height: 1.2; } .account-sally-learned__item span { color: var(--ink-3); font-size: 12px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .account-sally-chat__composer { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .account-sally-quick-replies { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .account-sally-quick-replies button { min-width: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-subtle); color: var(--ink-2); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; line-height: 1.2; max-width: 100%; padding: 8px 10px; text-align: left; } .account-sally-quick-replies button:hover { border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); background: var(--brand-tint); color: var(--brand); } .account-sally-quick-replies button:disabled { cursor: wait; opacity: 0.64; } .account-sally-chat__archived-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--ink-3); font-size: 13px; font-weight: 700; } .account-sally-chat__locked { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .account-sally-chat__locked > div:first-child { min-width: 0; display: grid; gap: 4px; color: var(--ink-2); } .account-sally-chat__locked strong { color: var(--ink); font-size: 13px; } .account-sally-chat__locked span { color: var(--ink-3); font-size: 12px; line-height: 1.4; } .account-sally-chat__locked > div:last-child { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 0 auto; } .account-sally-chat__composer textarea { width: 100%; min-height: 82px; resize: vertical; border: 1px solid var(--border-strong); border-radius: 12px; padding: 13px 14px; font: inherit; color: var(--ink); background: var(--bg-card); } .account-sally-chat__composer textarea:focus { outline: 2px solid var(--brand-tint); border-color: var(--brand); } .account-sally-chat__composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .account-sally-chat__composer-actions small { color: var(--ink-3); font-size: 12px; } .account-sally-recs { display: grid; gap: 9px; } .account-sally-rec, .account-sally-product { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--ink); text-decoration: none; } .account-sally-rec { padding: 12px; display: block; } .account-sally-rec strong, .account-sally-rec small, .account-sally-product strong, .account-sally-product small { display: block; } .account-sally-products__head { margin-bottom: 14px; } .account-sally-products__head p { margin: 6px 0 0; color: var(--ink-3); font-size: 13px; } .account-sally-products__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .account-sally-product { padding: 12px; display: grid; gap: 8px; } .account-sally-product img, .account-sally-product > span { width: 100%; aspect-ratio: 1.2; border-radius: 10px; background: var(--bg-subtle); object-fit: contain; padding: 8px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); } .account-sally-empty { padding: 18px; border-radius: 12px; background: var(--bg-subtle); color: var(--ink-3); } @media (max-width: 900px) { .account-page { max-width: 760px; padding: 24px 18px 48px; } .account-page--sally { max-width: 760px; } .account-page__layout { grid-template-columns: minmax(0, 1fr); gap: 18px; } .account-page--sally .account-page__layout { grid-template-columns: minmax(0, 1fr); } .account-page__sidebar { position: static; top: auto; z-index: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); padding: 8px; box-shadow: var(--shadow-sm); } .account-page__sidebar .nav-item { height: 40px; background: transparent; } .account-page__sidebar .nav-item.is-active { background: var(--brand-tint); } .account-page__sidebar hr { margin: 8px 6px !important; } .account-sally-summary, .account-sally-hero, .account-sally-layout { grid-template-columns: 1fr; } .account-sally-dashboard { position: static; max-height: none; overflow: visible; } .account-sally-layout { height: auto; min-height: 0; overflow: visible; } .account-sally-list { border-right: 0; border-bottom: 1px solid var(--border); max-height: none; overflow: visible; } .account-sally-chat { min-height: 0; } .account-sally-chat__body { overflow: visible; padding-right: 0; } .account-sally-progress-view__charts { grid-template-columns: 1fr; } .account-sally-dashboard .account-sally-progress-view__charts { grid-template-columns: 1fr; } .account-sally-memory__grid { grid-template-columns: 1fr; } .account-sally-chat__locked { align-items: stretch; flex-direction: column; } .account-sally-chat__locked > div:last-child { justify-content: flex-start; } .account-sally-summary { align-items: flex-start; flex-direction: column; } .account-sally-summary__actions, .account-sally-hero > .btn { width: 100%; } .account-sally-summary__actions .btn, .account-sally-hero > .btn, .account-sally-empty .btn { justify-content: center; width: 100%; } .account-sally-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .account-page { padding: 18px 14px 44px; } .account-page__layout { gap: 14px; } .account-page__sidebar { border-radius: 14px; padding: 8px; } .account-page__sidebar .nav-item { font-size: 14px; } .account-sally-summary__main { align-items: flex-start; } .account-sally-hero { grid-template-columns: auto minmax(0, 1fr); } .account-sally-hero > .btn { grid-column: 1 / -1; } .account-sally-hero, .account-sally-dashboard, .account-sally-list, .account-sally-detail, .account-sally-memory, .account-sally-products { padding: 16px; } .account-sally-memory__head { align-items: stretch; flex-direction: column; } .account-sally-memory__head .btn { justify-content: center; width: 100%; } .account-sally-memory-card__head { flex-direction: column; gap: 4px; } .account-sally-memory-card__head span { max-width: 100%; } .account-sally-memory-card dl { grid-template-columns: 1fr; gap: 3px; } .account-sally-memory-card__item { grid-template-columns: 1fr; gap: 3px; margin: 0; } .account-sally-memory-card dd { margin-bottom: 8px; } .account-sally-memory-card dd button { margin-top: 2px; } .account-sally-memory-card dd:last-child { margin-bottom: 0; } .account-sally-hero h2 { font-size: 24px; } .account-sally-section-head { flex-direction: row; align-items: center; } .account-sally-chat__head { align-items: flex-start; flex-wrap: wrap; } .account-sally-chat__head-actions { margin-left: auto; width: auto; justify-content: flex-end; } .account-sally-dashboard__metrics, .account-sally-dashboard__bars > div { grid-template-columns: 1fr; } .account-sally-dashboard__snapshot { align-items: flex-start; flex-direction: column; } .account-sally-dashboard__settings { grid-template-columns: 1fr; } .account-sally-dashboard__settings .account-sally-frequency, .account-sally-dashboard__settings .account-sally-plan-controls, .account-sally-dashboard__settings-note, .account-sally-sms-settings, .account-sally-sms-summary { grid-column: 1; } .account-sally-sms-settings { grid-template-columns: 1fr; gap: 10px; padding: 12px; } .account-sally-sms-settings__save { width: 100%; justify-content: center; } .account-sally-plan-controls button { flex: 1 1 calc(50% - 6px); } .account-sally-frequency > span { flex: 0 0 100%; } .account-sally-frequency button { flex: 1 1 calc(33.333% - 6px); padding-inline: 8px; } .account-sally-new-chat span { display: none; } .account-sally-companion-intro { grid-template-columns: 1fr; } .account-sally-learned__head, .account-sally-learned__item { align-items: flex-start; flex-direction: column; } .account-sally-learned__head small { text-align: left; } .account-sally-quick-replies button { flex: 1 1 100%; } .account-sally-message { max-width: 100%; } .account-sally-chat__composer-actions { align-items: stretch; flex-direction: column; } .account-sally-chat__archived-note { align-items: stretch; flex-direction: column; } .account-sally-products__grid { grid-template-columns: 1fr; } } /* ============ 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); } .admin-table-scroll { max-height: min(68vh, 980px); min-height: 360px; overflow: auto; background: var(--bg-card); scrollbar-gutter: stable; } .admin-table-scroll--compact { max-height: min(48vh, 620px); min-height: 0; } .admin-table-scroll .table { min-width: 100%; } .card > .admin-table-scroll:first-child, .card > .admin-customers-table-wrap:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .card > .admin-table-scroll:last-child, .card > .admin-customers-table-wrap:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .card > .admin-table-pager:last-child, .card > .admin-customers-pager:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .admin-products-card { height: calc(100vh - 148px); min-height: 620px; display: flex; flex-direction: column; overflow: hidden; } .admin-products-filter-panel { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)) auto; gap: 12px; align-items: end; padding: 14px 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-subtle); } .admin-products-filter-panel label { display: grid; gap: 6px; min-width: 0; } .admin-products-filter-panel label span { color: var(--ink-3); font-size: 11px; font-weight: 800; text-transform: uppercase; } .admin-products-filter-panel .input, .admin-products-filter-panel .select { min-width: 0; height: 38px; } .admin-products-filter-panel__actions { display: flex; gap: 8px; justify-content: flex-end; min-width: max-content; } .admin-products-table-scroll { flex: 1 1 auto; min-height: 0; max-height: none; } .admin-products-card .admin-table-pager { flex: 0 0 auto; } .admin-merchant-card .admin-table-scroll { min-height: 420px; } .admin-merchant-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .admin-merchant-stats > div { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: grid; gap: 3px; } .admin-merchant-stats strong { font-size: 22px; line-height: 1; } .admin-merchant-stats span, .admin-merchant-row-warnings, .admin-merchant-product-cell small, .admin-merchant-section p, .admin-merchant-custom-row small { color: var(--ink-3); font-size: 11px; line-height: 1.35; } .admin-merchant-toolbar { padding: 16px; display: flex; gap: 10px; border-bottom: 1px solid var(--border); align-items: center; flex-wrap: wrap; } .admin-merchant-table { min-width: 980px; } .admin-merchant-product-cell { display: flex; align-items: center; gap: 12px; min-width: 250px; } .admin-merchant-product-cell__body, .admin-merchant-custom-row__body { display: grid; gap: 3px; min-width: 0; } .admin-merchant-product-cell__body strong, .admin-merchant-custom-row__body strong { display: block; line-height: 1.25; overflow-wrap: anywhere; } .admin-merchant-product-cell__body small, .admin-merchant-custom-row__body small { display: block; } .admin-merchant-product-cell__thumb { width: 42px; height: 42px; border-radius: 8px; background: var(--bg-subtle); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink-3); flex: 0 0 auto; overflow: hidden; } .admin-merchant-product-cell__thumb img, .admin-merchant-image-preview img, .admin-merchant-image-card__media img, .admin-merchant-custom-row img { width: 100%; height: 100%; object-fit: contain; } .admin-merchant-status-control { display: flex; align-items: center; gap: 10px; min-width: 250px; } .admin-switch { width: 42px; height: 24px; display: inline-flex; flex: 0 0 auto; align-items: center; position: relative; } .admin-switch input { position: absolute; opacity: 0; inset: 0; } .admin-switch span { width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong); border: 1px solid var(--border-strong); position: relative; transition: background .16s ease, border-color .16s ease; } .admin-switch span::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-card); top: 2px; left: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .16s ease; } .admin-switch input:checked + span { background: var(--brand); border-color: var(--brand); } .admin-switch input:checked + span::after { transform: translateX(18px); } .admin-switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; } .admin-merchant-status-select { min-width: 178px; height: 36px; } .admin-merchant-image-select { min-width: 230px; max-width: 320px; height: 36px; } .admin-merchant-table-image { display: grid; gap: 8px; min-width: 280px; } .admin-merchant-image-preview { display: flex; align-items: center; gap: 9px; color: var(--ink-3); font-size: 11px; } .admin-merchant-image-preview > img, .admin-merchant-image-preview > svg { width: 42px; height: 42px; border-radius: 8px; background: var(--bg-subtle); border: 1px solid var(--border); padding: 3px; color: var(--ink-3); flex: 0 0 auto; } .admin-merchant-readiness { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--bg-subtle); } .admin-merchant-readiness.is-ready { color: var(--success); background: var(--success-tint); } .admin-merchant-readiness.is-warn { color: var(--warning); background: var(--warning-tint); } .admin-merchant-readiness.is-muted { color: var(--ink-3); background: var(--bg-subtle); } .admin-merchant-panel { display: flex; flex-direction: column; gap: 18px; } .admin-merchant-panel__hero { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; } .admin-merchant-panel__hero .admin-merchant-image-preview { display: grid; justify-items: center; text-align: center; } .admin-merchant-panel__hero .admin-merchant-image-preview > img, .admin-merchant-panel__hero .admin-merchant-image-preview > svg { width: 88px; height: 88px; } .admin-merchant-panel__hero h3, .admin-merchant-section h4 { margin: 6px 0 4px; font-size: 14px; font-weight: 700; } .admin-merchant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .admin-merchant-section { border: 1px solid var(--border); border-radius: 8px; padding: 16px; background: var(--bg-card); } .admin-merchant-section__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .admin-merchant-warning-list { display: flex; flex-wrap: wrap; gap: 8px; } .admin-merchant-warning-list span { padding: 6px 9px; border-radius: 999px; background: var(--warning-tint); color: var(--warning); font-size: 11px; font-weight: 700; } .admin-merchant-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .admin-merchant-image-card { border: 1px solid var(--border); background: var(--bg-card); color: var(--ink); border-radius: 8px; padding: 10px; text-align: left; display: grid; gap: 9px; cursor: pointer; } .admin-merchant-image-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); } .admin-merchant-image-card__media { aspect-ratio: 1 / 1; border-radius: 7px; background: var(--bg-subtle); display: block; overflow: hidden; } .admin-merchant-image-card__body { display: grid; gap: 2px; } .admin-merchant-image-card__body strong { font-size: 12px; line-height: 1.25; } .admin-merchant-image-card__body small, .admin-merchant-empty { font-size: 11px; color: var(--ink-3); } .admin-merchant-custom-list { display: grid; gap: 10px; } .admin-merchant-custom-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 10px; } .admin-merchant-custom-row img { width: 54px; height: 54px; border-radius: 7px; background: var(--bg-subtle); } .admin-table-sticky thead th { position: sticky; top: 0; z-index: 2; } .admin-order-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; } .admin-order-row-actions .btn { width: 30px; height: 30px; padding: 0; } .admin-orders-batch-menu { position: relative; } .admin-orders-batch-menu summary { list-style: none; cursor: pointer; } .admin-orders-batch-menu summary::-webkit-details-marker { display: none; } .admin-orders-batch-menu[open] summary { box-shadow: var(--focus-ring); } .admin-orders-batch-menu__content { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 168px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); box-shadow: var(--shadow-lg); } .admin-orders-batch-menu__content a { display: flex; align-items: center; min-height: 34px; padding: 8px 10px; border-radius: 6px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; } .admin-orders-batch-menu__content a:hover, .admin-orders-batch-menu__content a:focus-visible { background: var(--bg-subtle); outline: none; } .admin-order-items-card { overflow: hidden; } .admin-order-items-summary { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .admin-table-pager { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--border); background: var(--bg-card); } .admin-table-page-summary, .admin-table-page-count { font-size: 12px; color: var(--ink-3); } .admin-table-pager-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; } .admin-table-page-size { display: grid; grid-template-columns: auto minmax(96px, 120px); align-items: center; gap: 8px; } .admin-table-page-size span { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .admin-table-page-size .select { height: 38px; min-width: 96px; } .admin-contained-list { max-height: min(48vh, 620px); overflow: auto; } /* ============ Admin print documents ============ */ .admin-print-page { min-height: 100vh; padding: 24px; background: #f4f1ea; color: var(--ink); } .admin-print-toolbar { position: sticky; top: 0; z-index: 5; margin: 0 auto 18px; max-width: 8.5in; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .admin-print-toolbar strong { display: block; font-size: 13px; } .admin-print-toolbar span { display: block; font-size: 12px; color: var(--ink-3); } .admin-print-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .admin-print-packet { margin: 0 auto 22px; } .admin-print-sheet { margin: 0 auto; background: #fff; border: 1px solid #d7d7d7; border-radius: 4px; box-shadow: var(--shadow-md); color: #111; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; width: 8.5in; min-height: 11in; padding: 0.38in 0.34in; } .admin-print-sheet--packet-page { page: rm-order-packet; break-after: page; page-break-after: always; } .admin-print-packet:last-child .admin-print-sheet:last-child { break-after: auto; page-break-after: auto; } .admin-print-missing { width: min(640px, 100%); padding: 32px; } .admin-print-packet-header { display: grid; grid-template-columns: 1fr 2.15in; gap: 0.45in; align-items: start; min-height: 2.1in; } .admin-print-packet-header--invoice { grid-template-columns: 1fr 2.6in; min-height: 2.45in; } .admin-print-logo { display: block; width: 1.58in; max-width: 100%; height: auto; margin: 0.22in 0 0.3in; } .admin-print-title-block--left { text-align: left; } .admin-print-title-block h1 { margin: 0; font: 700 30px/1.05 Arial, Helvetica, sans-serif; letter-spacing: 0; } .admin-print-title-block p { margin: 2px 0; font-size: 13px; line-height: 1.25; } .admin-print-address-grid { display: grid; gap: 0.36in; margin-top: 0.18in; } .admin-print-address-grid--packet { grid-template-columns: minmax(0, 1fr) minmax(2.9in, 3.05in); } .admin-print-address-grid--invoice { grid-template-columns: minmax(0, 3.08in) minmax(0, 3.08in); gap: 0.58in; justify-content: space-between; margin-top: 0.05in; } .admin-print-address-block { min-height: 0; border: 0; border-radius: 0; padding: 0; } .admin-print-address-block h2 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #111; letter-spacing: 0; text-transform: none; } .admin-print-address-lines { font-size: 13px; line-height: 1.22; font-weight: 400; white-space: nowrap; } .admin-print-address-aside { margin-top: 7px; color: #111; font-size: 13px; line-height: 1.28; font-weight: 700; white-space: nowrap; } .admin-print-items { width: 100%; margin-top: 0.38in; border-collapse: collapse; table-layout: fixed; font-size: 12px; } .admin-print-items th { background: #111; color: #fff; font-size: 12px; letter-spacing: 0; text-transform: none; text-align: left; padding: 10px 9px; border: 1px solid #111; font-weight: 700; } .admin-print-items td { padding: 11px 9px; border: 1px solid #d7d7d7; vertical-align: middle; } .admin-print-items td strong { display: block; font-weight: 400; line-height: 1.2; } .admin-print-items td span, .admin-print-items td small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.18; } .admin-print-items th:nth-child(1), .admin-print-items td:nth-child(1) { width: 0.52in; text-align: center; } .admin-print-items th:nth-child(2), .admin-print-items td:nth-child(2) { width: 0.76in; text-align: center; } .admin-print-items--packing th:nth-child(3), .admin-print-items--packing td:nth-child(3) { width: 0.84in; text-align: center; font-weight: 700; } .admin-print-items--packing th:nth-child(4), .admin-print-items--packing td:nth-child(4), .admin-print-items--invoice th:nth-child(3), .admin-print-items--invoice td:nth-child(3) { width: 3.55in; } .admin-print-items--packing th:nth-child(5), .admin-print-items--packing td:nth-child(5), .admin-print-items--packing th:nth-child(6), .admin-print-items--packing td:nth-child(6), .admin-print-items--invoice th:nth-child(4), .admin-print-items--invoice td:nth-child(4), .admin-print-items--invoice th:nth-child(5), .admin-print-items--invoice td:nth-child(5), .admin-print-items--invoice th:nth-child(6), .admin-print-items--invoice td:nth-child(6) { width: 0.9in; text-align: center; } .admin-print-items--invoice { margin-top: 0.26in; } .admin-print-items--invoice th { background: #fff; color: #111; border: 0; border-top: 2px solid #111; border-bottom: 1px solid #111; } .admin-print-items--invoice td { border: 0; border-bottom: 1px solid #dedede; } .admin-print-item-image { width: 0.48in; height: 0.48in; display: grid; align-items: center; justify-content: center; color: #777; } .admin-print-item-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .admin-print-invoice-meta { display: grid; gap: 0.16in; align-content: start; } .admin-print-invoice-meta dl { margin: 0; font-size: 13px; line-height: 1.25; } .admin-print-invoice-meta dl div { display: grid; grid-template-columns: 0.92in 1fr; gap: 6px; } .admin-print-invoice-meta dt { font-weight: 700; } .admin-print-invoice-meta dd { margin: 0; } .admin-print-barcode { width: 2.25in; justify-self: end; text-align: center; } .admin-print-barcode svg { display: block; width: 100%; height: 0.38in; fill: #111; } .admin-print-barcode strong { display: block; margin-top: 3px; font: 700 10px/1 Arial, Helvetica, sans-serif; letter-spacing: 0.04em; } .admin-print-invoice-footer { display: grid; grid-template-columns: 1fr 2.2in; gap: 0.35in; align-items: start; margin-top: 0.2in; padding-top: 0.18in; border-top: 1px solid #d7d7d7; } .admin-print-payment-method { font-size: 13px; line-height: 1.3; } .admin-print-totals { display: grid; font-size: 13px; } .admin-print-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #d7d7d7; } .admin-print-totals div.is-strong { font-size: 14px; font-weight: 800; } .admin-print-totals div.is-strong strong { font-weight: 800; } @page rm-order-packet { size: letter; margin: 0.36in; } @media print { html, body, #root { background: #fff !important; } .admin-print-page { min-height: 0; padding: 0; background: #fff !important; } .admin-print-toolbar { display: none !important; } .admin-print-packet { margin: 0; } .admin-print-sheet { width: 7.78in; max-width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; } .admin-print-sheet--packet-page { break-after: page; page-break-after: always; } .admin-print-page > .admin-print-packet:last-child .admin-print-sheet:last-child { break-after: auto; page-break-after: auto; } .admin-print-missing { padding: 0; } } .admin-customers-toolbar { padding: 16px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--border); } .admin-customers-search { flex: 1 1 340px; min-width: 240px; position: relative; } .admin-customers-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .admin-customers-search .input { height: 40px; padding-left: 40px; } .admin-customers-control { display: grid; gap: 6px; min-width: 180px; } .admin-customers-control span { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .admin-customers-control .select, .admin-customers-control .input { height: 40px; } .admin-customers-control--inline { grid-auto-flow: column; align-items: center; min-width: 112px; } .admin-customers-control--inline .select { width: 84px; } .admin-customers-date-range { display: flex; flex-wrap: wrap; gap: 12px; } .admin-customers-date-range .admin-customers-control { min-width: 152px; } .admin-customers-table-wrap { max-height: min(68vh, 980px); min-height: 420px; overflow: auto; background: var(--bg-card); scrollbar-gutter: stable; } .admin-customers-table thead th { position: sticky; top: 0; z-index: 2; } .admin-customers-empty { height: 160px; text-align: center; color: var(--ink-3) !important; } .admin-customers-pager { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--border); } .admin-customers-page-summary, .admin-customers-page-count { font-size: 12px; color: var(--ink-3); } .admin-customers-pager-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .admin-row-menu { position: absolute; top: calc(100% - 8px); right: 10px; z-index: 40; width: 218px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow-md); text-align: left; } .admin-floating-row-menu { position: fixed; z-index: 1200; width: 276px; max-height: min(424px, calc(100vh - 24px)); overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow-lg); text-align: left; } .admin-row-menu__item { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; } .admin-row-menu__item:hover, .admin-row-menu__item:focus-visible { background: var(--bg-subtle); color: var(--ink); outline: none; } .admin-row-menu__item svg { flex: 0 0 auto; color: var(--ink-3); } .admin-row-menu__item:disabled { opacity: 0.55; cursor: not-allowed; } .admin-row-menu__item--primary { background: var(--brand-tint); color: var(--brand); } .admin-row-menu__item--primary svg { color: var(--brand); } .admin-row-menu__item--danger { color: var(--danger); } .admin-row-menu__item--danger svg { color: var(--danger); } .admin-row-menu__separator { height: 1px; margin: 6px 4px; background: var(--border); } .admin-inline-notice { margin-bottom: 14px; padding: 12px; border-radius: 10px; background: var(--success-tint); color: var(--success); font-size: 13px; } .admin-toast, .app-toast { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 2600; display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: start; gap: 12px; width: min(440px, calc(100vw - 48px)); min-width: 0; padding: 14px 12px 14px 16px; border: 1px solid var(--toast-border, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--toast-bg, var(--bg-card)) 94%, var(--bg-card)); color: var(--toast-ink, var(--ink)); box-shadow: 0 18px 46px rgba(18, 31, 44, 0.18), var(--shadow-xs); pointer-events: auto; } .admin-toast--success, .app-toast--success { --toast-bg: var(--success-tint); --toast-border: color-mix(in srgb, var(--success) 24%, var(--border)); --toast-ink: var(--success); --toast-accent: var(--success); } .admin-toast--warn, .app-toast--warn { --toast-bg: var(--warning-tint); --toast-border: color-mix(in srgb, var(--warning) 30%, var(--border)); --toast-ink: var(--warning); --toast-accent: var(--warning); } .admin-toast--danger, .app-toast--danger { --toast-bg: var(--danger-tint); --toast-border: color-mix(in srgb, var(--danger) 30%, var(--border)); --toast-ink: var(--danger); --toast-accent: var(--danger); } .admin-toast__body, .app-toast__body { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 9px; align-items: start; min-width: 0; font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; } .admin-toast__dot, .app-toast__dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 999px; background: var(--toast-accent, var(--brand)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--toast-accent, var(--brand)) 12%, transparent); } .admin-toast__close, .app-toast__close { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid color-mix(in srgb, var(--toast-accent, var(--ink-3)) 18%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--bg-card) 86%, transparent); color: var(--toast-ink, var(--ink)); cursor: pointer; } .admin-toast__close:hover, .app-toast__close:hover { background: var(--bg-card); } .affiliate-admin-table { table-layout: fixed; } .affiliate-admin-table th, .affiliate-admin-table td { overflow: hidden; } .affiliate-admin-table__col-affiliate { width: 25%; } .affiliate-admin-table__col-track { width: 7%; } .affiliate-admin-table__col-link { width: 18%; } .affiliate-admin-table__col-rate { width: 7%; } .affiliate-admin-table__col-count { width: 5%; } .affiliate-admin-table__col-money { width: 8%; } .affiliate-admin-table__col-status { width: 9%; } .affiliate-admin-table__col-action { width: 8%; } .affiliate-admin-table__primary { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .affiliate-admin-table__secondary { color: var(--ink-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .affiliate-admin-table__link { max-width: 100%; min-width: 0; padding: 0; color: var(--brand); display: inline-flex; justify-content: flex-start; } .affiliate-admin-table__link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .affiliate-admin-table__action { text-align: right; overflow: visible !important; } .affiliate-admin-table__action .btn { min-width: 84px; } .analytics-events-card { overflow: hidden; } .analytics-events-table-wrap { width: 100%; max-height: min(68vh, 980px); min-height: 360px; overflow: auto; } .analytics-events-table { table-layout: fixed; min-width: 880px; font-size: 12px; } .analytics-events-table th, .analytics-events-table td { padding: 12px 10px; vertical-align: top; } .analytics-events-table td { line-height: 1.35; } .analytics-events-table__col-time { width: 13%; } .analytics-events-table__col-event { width: 12%; } .analytics-events-table__col-path { width: 17%; } .analytics-events-table__col-label { width: 15%; } .analytics-events-table__col-source { width: 18%; } .analytics-events-table__col-device { width: 8%; } .analytics-events-table__col-value { width: 7%; } .analytics-events-table__col-visitor { width: 10%; } .analytics-events-table__path, .analytics-events-table__label, .analytics-events-table__source, .analytics-events-table__visitor { overflow-wrap: anywhere; word-break: break-word; } .analytics-events-table__event .status-badge { max-width: 100%; white-space: normal; } /* ============ 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 gallery ============ */ .pdp-gallery-thumbnails { display: flex; gap: 10px; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .pdp-gallery-thumbnail { flex: 0 0 clamp(82px, calc((100% - 30px) / 4), 124px); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); cursor: pointer; padding: 14px; scroll-snap-align: start; } .pdp-gallery-thumbnail.is-active { border: 2px solid var(--brand); } .pdp-gallery-thumbnail img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0.72; } .pdp-gallery-thumbnail.is-active img { opacity: 1; } .admin-product-media-strip { display: flex; gap: 10px; max-width: 100%; overflow-x: auto; padding: 2px 2px 8px; margin-top: 14px; -webkit-overflow-scrolling: touch; } .admin-product-media-thumb { position: relative; flex: 0 0 96px; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--bg-subtle); padding: 10px; } .admin-variant-image-field { display: grid; grid-template-columns: 38px minmax(150px, 1fr); gap: 8px; align-items: center; min-width: 220px; } .admin-variant-image-field__preview { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); color: var(--ink-3); overflow: hidden; } .admin-variant-image-field__preview img { width: 100%; height: 100%; object-fit: contain; padding: 5px; } /* ============ 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-rules { margin-top: 20px; display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); } .admin-funnel-rules__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; } .admin-funnel-rules__head > div { min-width: 0; } .admin-funnel-rules__head h4 { margin: 0 0 5px; font-size: 13px; font-weight: 800; } .admin-funnel-rules__head p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; } .admin-funnel-rules__summary, .admin-funnel-rules__advanced > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .admin-funnel-rules__checks { display: flex; flex-wrap: wrap; gap: 12px; } .admin-funnel-rules__checks label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12px; font-weight: 700; } .admin-funnel-rules__checks input { accent-color: var(--brand); } .admin-funnel-rules__conditions { display: grid; gap: 10px; } .admin-funnel-rules__empty, .admin-funnel-rule-empty-target { min-height: 40px; display: flex; align-items: center; color: var(--ink-3); font-size: 12px; } .admin-funnel-rules__empty { padding: 14px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--bg-card); } .admin-funnel-rule-row { display: grid; grid-template-columns: minmax(130px, 0.8fr) minmax(140px, 0.8fr) minmax(210px, 1.2fr) minmax(150px, 0.8fr) 36px; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); } .admin-funnel-rule-row > div { min-width: 0; } .admin-funnel-rule-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .admin-funnel-rule-remove { width: 36px; height: 40px; padding: 0; color: var(--danger); } .admin-funnel-rules__advanced { display: grid; gap: 12px; } .admin-funnel-rules__advanced summary { width: max-content; max-width: 100%; cursor: pointer; color: var(--brand); font-size: 12px; font-weight: 800; } .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: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); padding: 12px 14px; 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; padding: 0; border: 0; appearance: none; 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; } /* ============ Shoulder Myth-Buster hero ============ */ .smh-hero { --smh-font-sans: var(--font-sans); --smh-font-display: var(--font-display); --smh-bg-subtle: #F2F1EB; --smh-bg-card: #FFFFFF; --smh-ink: #0E1726; --smh-ink-2: #364152; --smh-ink-3: #6B7588; --smh-border: #E5E2D6; --smh-brand: #0A2540; --smh-brand-2: #1B3A6B; --smh-accent: #D9523E; --smh-shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.06); --smh-orb-2: #1E4D8A; position: relative; overflow: hidden; width: 100%; background: radial-gradient(circle at 82% 20%, rgba(255,255,255,0.64), transparent 28%), var(--smh-bg-subtle); border-bottom: 1px solid var(--border); color: var(--smh-ink); font-family: var(--smh-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .smh-hero__inner { max-width: 1280px; margin: 0 auto; padding: 56px 56px 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: 40px; align-items: center; } .smh-display { font-family: var(--smh-font-display); font-weight: 400; letter-spacing: 0; } .smh-cat { margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smh-orb-2); } .smh-hero__title { margin: 0; max-width: 460px; color: var(--smh-ink); font-size: 50px; line-height: 1; } .smh-hero__title span { color: var(--smh-accent); font-style: italic; } .smh-hero__body { max-width: 430px; margin: 18px 0; color: var(--smh-ink-2); font-size: 17px; line-height: 1.55; } .smh-hero__ask { min-height: 50px; margin-bottom: 18px; padding: 0 16px 0 12px; border: 0; border-radius: 12px; display: inline-flex; align-items: center; gap: 11px; background: var(--smh-brand); color: #fff; box-shadow: 0 14px 30px -12px rgba(10, 37, 64, 0.4); cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base); } .smh-hero__ask:hover, .smh-hero__ask:focus-visible { background: var(--smh-brand-2); color: #fff; box-shadow: 0 18px 38px -14px rgba(10, 37, 64, 0.52); } .smh-stat-note { margin: 18px 0 8px; color: var(--smh-ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .smh-finding-list { display: flex; flex-direction: column; gap: 7px; max-width: 540px; } .smh-finding-button { width: 100%; min-height: 54px; padding: 9px 13px; border: 1px solid transparent; border-radius: 11px; display: grid; grid-template-columns: auto minmax(120px, 1fr) minmax(96px, auto) auto; gap: 12px; align-items: center; background: transparent; color: var(--smh-ink); cursor: pointer; font-family: inherit; text-align: left; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), background var(--t-base); } .smh-finding-button:hover, .smh-finding-button:focus-visible, .smh-finding-button.is-active { border-color: var(--smh-border); background: var(--smh-bg-card); } .smh-finding-button__dot { width: 11px; height: 11px; border-radius: 999px; background: var(--smh-segment); flex-shrink: 0; } .smh-finding-button__label { min-width: 0; font-size: 14px; font-weight: 600; color: var(--smh-ink); } .smh-finding-button__product { min-width: 0; color: var(--smh-ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smh-finding-button__pct { min-width: 36px; color: var(--smh-segment); font-family: var(--smh-font-display); font-size: 17px; font-weight: 600; text-align: right; } .smh-hero__donut-stage { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; } .smh-donut { display: block; overflow: visible; filter: drop-shadow(0 16px 34px rgba(15, 23, 42, 0.08)); } .smh-donut circle { transition: stroke-width 360ms ease, opacity 360ms ease, stroke-dashoffset 360ms ease; } .smh-donut__center { position: absolute; max-width: 156px; text-align: center; animation: smhFade 360ms both; } .smh-donut__pct { color: var(--smh-segment); font-family: var(--smh-font-display); font-size: 52px; font-weight: 600; line-height: 1; } .smh-donut__label { margin-top: 4px; color: var(--smh-ink); font-size: 13.5px; font-weight: 600; } .smh-product-chip { position: absolute; right: -6px; bottom: 6px; min-width: 200px; padding: 10px 12px; border: 1px solid var(--smh-border); border-radius: 16px; display: flex; align-items: center; gap: 11px; background: var(--smh-bg-card); box-shadow: var(--smh-shadow-lg); color: var(--smh-ink); text-align: left; text-decoration: none; animation: smhFade 460ms both; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .smh-product-chip:hover, .smh-product-chip:focus-visible { border-color: rgba(10, 37, 64, 0.2); color: var(--smh-ink); box-shadow: 0 18px 38px -10px rgba(15, 23, 42, 0.16); } .smh-product-chip__media { width: 50px; height: 50px; padding: 5px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--smh-tint); } .smh-product-chip__media img { max-width: 100%; max-height: 100%; object-fit: contain; } .smh-product-chip__content { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .smh-product-chip__kicker { color: var(--smh-segment); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .smh-product-chip__name { color: var(--smh-ink); font-size: 13px; font-weight: 700; line-height: 1.2; } .smh-product-chip__price { color: var(--smh-ink-3); font-size: 12px; } @keyframes smhFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .smh-orb { position: relative; display: inline-block; flex-shrink: 0; overflow: hidden; isolation: isolate; border-radius: 62% 38% 55% 45% / 52% 60% 40% 48%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.65), transparent 45%), linear-gradient(155deg, rgba(227, 239, 248, 0.85) 0%, rgba(149, 196, 236, 0.75) 45%, rgba(91, 160, 216, 0.65) 100%); box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.5), inset 0 -8px 18px rgba(54, 120, 185, 0.22), 0 0 0 1px rgba(54, 120, 185, 0.12), 0 0 26px -4px rgba(91, 160, 216, 0.45), 0 14px 30px -12px rgba(54, 120, 185, 0.35); animation: smh-orb-morph 14s ease-in-out infinite; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-radius 0.6s ease; } .smh-orb::before { content: ''; position: absolute; inset: -10%; background: conic-gradient(from 0deg, transparent 0deg, rgba(91, 160, 216, 0.35) 70deg, transparent 150deg, rgba(149, 196, 236, 0.4) 230deg, transparent 320deg); animation: smh-spin 12s linear infinite; z-index: 0; pointer-events: none; mix-blend-mode: soft-light; } .smh-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.8), transparent 70%); z-index: 3; pointer-events: none; filter: blur(1px); } .smh-blob { position: absolute; width: 140%; height: 140%; top: -20%; left: -20%; border-radius: 50%; pointer-events: none; will-change: transform; z-index: 1; } .smh-blob--1 { background: radial-gradient(circle, rgba(54, 120, 185, 0.55) 0%, transparent 50%); animation: smh-drift-1 8.5s ease-in-out infinite alternate; } .smh-blob--2 { background: radial-gradient(circle, rgba(149, 196, 236, 0.7) 0%, transparent 45%); animation: smh-drift-2 10.5s ease-in-out infinite alternate; } .smh-blob--3 { background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 40%); animation: smh-drift-3 7s ease-in-out infinite alternate; } .smh-blob--4 { background: radial-gradient(circle, rgba(91, 160, 216, 0.45) 0%, transparent 50%); animation: smh-drift-4 12s ease-in-out infinite alternate; } .smh-orb.is-thinking { animation-duration: 5s; } .smh-orb.is-thinking::before { animation-duration: 4s; } .smh-orb.is-thinking .smh-blob--1 { animation-duration: 2.6s; } .smh-orb.is-thinking .smh-blob--2 { animation-duration: 2.1s; } .smh-orb.is-thinking .smh-blob--3 { animation-duration: 1.7s; } .smh-orb.is-thinking .smh-blob--4 { animation-duration: 2.9s; } @keyframes smh-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 smh-spin { to { transform: rotate(360deg); } } @keyframes smh-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 smh-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 smh-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 smh-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); } } @media (prefers-reduced-motion: reduce) { .smh-hero *, .smh-hero *::before, .smh-hero *::after { animation: none !important; transition: none !important; } } @media (max-width: 980px) { .smh-hero__inner { grid-template-columns: 1fr; gap: 42px; padding: 52px 28px 64px; } .smh-hero__copy { text-align: center; } .smh-cat { justify-content: center; } .smh-hero__title, .smh-hero__body, .smh-finding-list { margin-left: auto; margin-right: auto; } .smh-hero__title { max-width: 620px; font-size: 44px; } .smh-hero__donut-stage { min-height: 390px; } .smh-product-chip { left: 50%; right: auto; bottom: 0; transform: none; translate: -50% 0; } } @media (max-width: 640px) { .smh-hero__inner { padding: 44px 18px 52px; gap: 34px; } .smh-cat { font-size: 10px; } .smh-hero__title { font-size: 38px; } .smh-hero__body { font-size: 16px; } .smh-hero__ask { width: 100%; justify-content: center; min-height: 54px; } .smh-finding-button { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; } .smh-finding-button__dot { grid-column: 1; grid-row: 1; } .smh-finding-button__label { grid-column: 2; grid-row: 1; } .smh-finding-button__pct { grid-column: 3; grid-row: 1; } .smh-finding-button__product { grid-column: 2 / 4; grid-row: 2; font-size: 12px; } .smh-hero__donut-stage { min-height: 360px; } .smh-donut { width: 260px; height: 260px; } .smh-donut__pct { font-size: 44px; } .smh-product-chip { min-width: min(260px, calc(100vw - 36px)); } } /* ============ Shop mobile stacking guardrails ============ */ .shop-page { position: relative; isolation: isolate; background: var(--bg); } .shop-catalog-section, .shop-results, .shop-product-grid { position: relative; background: var(--bg); } .shop-layout, .shop-sidebar, .shop-results, .shop-product-grid { min-width: 0; } .shop-results { z-index: 1; isolation: isolate; } .shop-product-grid { z-index: 1; } .shop-product-grid .product-card { position: relative; z-index: 1; background-color: var(--bg-card); isolation: isolate; } @media (max-width: 980px) { .shop-page .shop-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; } .shop-page .shop-sidebar { position: relative !important; top: auto !important; z-index: 0; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); box-shadow: var(--shadow-xs); } .shop-page .shop-results { z-index: 2; background: var(--bg); } .shop-page .shop-results-toolbar { position: relative; z-index: 3; background: var(--bg); } .shop-page .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; background: var(--bg); } } @media (max-width: 640px) { .shop-page .shop-catalog-section { padding: 28px 20px 64px !important; overflow: clip; } .shop-page .shop-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; } .shop-page .shop-sidebar { position: relative !important; top: auto !important; max-height: none; overflow: visible; } .shop-page .shop-results-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(166px, auto) !important; gap: 12px !important; align-items: end !important; margin-bottom: 18px !important; } .shop-page .shop-results-toolbar > span { line-height: 1.2; } .shop-page .shop-sort-control { display: grid !important; grid-template-columns: auto minmax(154px, 1fr) !important; gap: 8px !important; align-items: center !important; min-width: 0; } .shop-page .shop-sort-control .select { width: 100% !important; min-width: 0; } .shop-page .shop-product-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } } @media (max-width: 420px) { .shop-page .shop-results-toolbar, .shop-page .shop-sort-control { grid-template-columns: minmax(0, 1fr) !important; } } /* ============ Home goal rail ============ */ .home-goals-section { padding: 80px 28px; overflow: visible; } .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-goal-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; overflow: visible; padding: 2px 0 10px; } .home-goal-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 236px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 241, 234, 0.66)), var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 28px; color: inherit; text-decoration: none; animation: fadeUp 500ms both; box-shadow: 0 18px 44px rgba(10, 37, 64, 0.045); overflow: hidden; } .home-goal-card__title { color: var(--ink); font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.05; letter-spacing: 0; margin-bottom: 14px; } .home-goal-card__desc { color: var(--ink-2); font-size: 14px; line-height: 1.55; } .home-goal-card__action { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-size: 13px; font-weight: 700; margin-top: auto; padding-top: 20px; } .home-goal-card--sally { background: radial-gradient(circle at 22% 18%, rgba(134, 190, 232, 0.28), transparent 34%), linear-gradient(135deg, #0a2540, #143a63); border-color: rgba(10, 37, 64, 0.36); color: var(--ink-inverse); } .home-goal-card--sally .home-goal-card__title, .home-goal-card--sally .home-goal-card__desc, .home-goal-card--sally .home-goal-card__action { color: var(--ink-inverse); } .home-goal-card--sally .home-goal-card__desc { opacity: 0.78; } @media (max-width: 980px) { .home-goal-rail { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } @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-template-columns: 1fr; gap: 14px; } } /* ============ Admin marketing sequence builder ============ */ .marketing-status-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: -6px 0 16px; } .marketing-status-pill { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); min-height: 58px; padding: 11px 12px; display: grid; gap: 4px; } .marketing-status-pill strong { font-size: 11px; text-transform: uppercase; letter-spacing: 0; color: var(--ink-3); } .marketing-status-pill span { font-size: 13px; font-weight: 700; color: var(--ink); } .marketing-status-pill.is-good { border-color: color-mix(in srgb, var(--success) 25%, var(--border)); background: color-mix(in srgb, var(--success-tint) 42%, var(--bg-card)); } .marketing-provider-config { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); margin: 0 0 16px; overflow: hidden; } .marketing-provider-config__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); } .marketing-provider-config__head h3 { margin: 0; font-size: 15px; font-weight: 800; } .marketing-provider-config__head p { margin: 3px 0 0; color: var(--ink-3); font-size: 12px; } .marketing-provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .marketing-provider-card { padding: 16px; display: grid; gap: 11px; border-right: 1px solid var(--border); } .marketing-provider-card:last-child { border-right: 0; } .marketing-provider-card__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .marketing-provider-card__title strong { font-size: 13px; color: var(--ink); } .marketing-provider-card label span { display: block; color: var(--ink-3); font-size: 11px; font-weight: 800; margin-bottom: 5px; } .marketing-provider-card__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .marketing-env-missing { border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--warning-tint) 46%, var(--bg-card)); color: var(--ink-2); font-size: 12px; font-weight: 700; padding: 9px 10px; } .marketing-check-row { display: flex; align-items: center; gap: 9px; min-height: 36px; } .marketing-check-row input { width: 16px; height: 16px; } .marketing-check-row span { margin: 0 !important; } .marketing-tabs { display: flex; align-items: flex-end; gap: 6px; margin: -4px 0 16px; border-bottom: 1px solid var(--border); } .marketing-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 13px; font-weight: 800; letter-spacing: 0; padding: 10px 12px; } .marketing-tabs button:hover { color: var(--ink); } .marketing-tabs button.is-active { border-bottom-color: var(--brand); color: var(--ink); } .marketing-builder { display: grid; grid-template-columns: minmax(260px, 310px) minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start; } .marketing-sequence-list, .marketing-flow-panel, .marketing-inspector, .marketing-settings-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); } .marketing-sequence-list, .marketing-inspector { overflow: hidden; position: sticky; top: 18px; } .marketing-panel-head { padding: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--bg-subtle); } .marketing-panel-head h3 { margin: 0; font-size: 14px; font-weight: 800; } .marketing-panel-head p { margin: 3px 0 0; color: var(--ink-3); font-size: 12px; } .marketing-sequence-list__rows { display: grid; max-height: calc(100vh - 260px); overflow: auto; } .marketing-sequence-row { border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; padding: 14px; display: grid; gap: 6px; cursor: pointer; } .marketing-sequence-row:hover, .marketing-sequence-row.is-active { background: var(--brand-tint); } .marketing-sequence-row strong { font-size: 13px; line-height: 1.25; color: var(--ink); } .marketing-sequence-row small, .marketing-sequence-row__stats span { color: var(--ink-3); font-size: 11px; } .marketing-sequence-row__stats { display: flex; gap: 8px; flex-wrap: wrap; } .marketing-workspace { display: grid; gap: 14px; } .marketing-settings-card { padding: 16px; display: grid; gap: 14px; } .marketing-settings-grid, .marketing-window-row { display: grid; grid-template-columns: 1fr; gap: 12px; } .marketing-window-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marketing-settings-card label span, .marketing-inspector label span, .marketing-ai-prompt span { display: block; color: var(--ink-3); font-size: 11px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0; } .marketing-compliance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .marketing-compliance-grid label { min-height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; } .marketing-rule-builder { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); padding: 12px; display: grid; gap: 10px; } .marketing-rule-builder__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .marketing-rule-builder__head h4 { margin: 0; font-size: 13px; font-weight: 800; } .marketing-rule-group { display: grid; gap: 10px; } .marketing-rule-group.is-nested { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: 10px; } .marketing-rule-group__head, .marketing-rule-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .marketing-rule-toggle { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); display: inline-flex; padding: 2px; } .marketing-rule-toggle button { border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 11px; font-weight: 800; min-width: 46px; padding: 6px 9px; } .marketing-rule-toggle button.is-active { background: var(--brand); color: #fff; } .marketing-rule-list { display: grid; gap: 8px; } .marketing-rule-condition { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: 10px; display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 0.8fr) minmax(140px, 1fr) auto; gap: 8px; align-items: end; } .marketing-rule-condition label span, .marketing-rule-value-note { display: block; color: var(--ink-3); font-size: 11px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0; } .marketing-rule-value-note { border: 1px dashed var(--border-strong); border-radius: 8px; margin: 0; min-height: 38px; padding: 10px; text-transform: none; } .marketing-rule-value-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .marketing-rule-condition__value { min-width: 0; } .marketing-inspector .marketing-rule-condition { grid-template-columns: 1fr; } .marketing-rule-remove { min-width: 36px; height: 38px; justify-content: center; } .marketing-rule-nested { display: grid; gap: 8px; } .marketing-rule-nested > .btn { justify-self: start; } .marketing-rule-empty { border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--bg-card); color: var(--ink-3); font-size: 12px; line-height: 1.45; padding: 12px; } .marketing-flow-panel { padding: 18px; } .marketing-trigger-node { width: min(100%, 420px); margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); padding: 13px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; } .marketing-trigger-node > span, .marketing-step-card__icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); } .marketing-trigger-node strong { display: block; font-size: 13px; } .marketing-trigger-node small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11px; } .marketing-flow { display: grid; gap: 0; } .marketing-step-add { height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; } .marketing-step-add::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 1px; background: var(--border); z-index: 0; } .marketing-step-add button { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; position: relative; z-index: 1; } .marketing-step-add button:hover { border-color: var(--brand); color: var(--brand); } .marketing-step-card { width: min(100%, 560px); margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: 12px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--ink); text-align: left; cursor: pointer; } .marketing-step-card:hover, .marketing-step-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent); } .marketing-step-card.is-dragging { opacity: 0.7; } .marketing-step-card__drag { width: 28px; height: 32px; display: grid; place-items: center; color: var(--ink-3); cursor: grab; } .marketing-step-card__icon.is-sms { color: var(--success); background: var(--success-tint); } .marketing-step-card__icon.is-branch { color: var(--warning); background: var(--warning-tint); } .marketing-step-card__icon.is-wait { color: var(--ink-3); background: var(--bg-subtle); } .marketing-step-card__body { min-width: 0; } .marketing-step-card__body strong { display: block; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .marketing-step-card__body small, .marketing-step-card__counts { color: var(--ink-3); font-size: 11px; } .marketing-branch-preview { width: min(100%, 420px); margin: 8px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .marketing-branch-preview span { border: 1px dashed var(--border-strong); border-radius: 8px; padding: 8px; background: var(--bg-subtle); color: var(--ink-3); font-size: 11px; text-align: center; } .marketing-flow-empty, .marketing-empty, .marketing-inspector-note { border: 1px dashed var(--border-strong); border-radius: 8px; padding: 18px; background: var(--bg-subtle); color: var(--ink-3); font-size: 13px; line-height: 1.5; } .marketing-flow-empty { width: min(100%, 460px); margin: 0 auto; text-align: center; } .marketing-flow-empty strong { display: block; color: var(--ink); margin-bottom: 4px; } .marketing-inspector { max-height: calc(100vh - 140px); overflow: auto; } .marketing-inspector__section { padding: 14px; display: grid; gap: 12px; border-bottom: 1px solid var(--border); } .marketing-inspector__section h4 { margin: 0; font-size: 13px; font-weight: 800; } .marketing-inspector__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .marketing-delay-control { grid-column: 1 / -1; min-width: 0; } .marketing-delay-control__inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 0.42fr); gap: 8px; align-items: center; } .marketing-delay-control__inputs .input, .marketing-delay-control__inputs .select { width: 100%; min-width: 0; } .marketing-textarea { min-height: 150px; font-size: 13px; line-height: 1.45; } .marketing-sms-meter { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); color: var(--ink-3); padding: 8px 10px; font-size: 12px; } .marketing-merge-chips { display: flex; flex-wrap: wrap; gap: 6px; } .marketing-merge-chips button { border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--ink-3); font-size: 11px; padding: 5px 8px; cursor: pointer; } .marketing-merge-chips button:hover { color: var(--brand); border-color: var(--brand); } .marketing-inspector__actions, .marketing-test-row, .marketing-danger-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .marketing-test-row { justify-content: stretch; } .marketing-test-row .input, .marketing-test-row .select { flex: 1; min-width: 0; } .marketing-danger-row { justify-content: flex-start; } .marketing-ai-prompt { display: grid; gap: 6px; } .marketing-ai-prompt .textarea { min-height: 170px; } @media (max-width: 1100px) { .marketing-status-strip, .marketing-provider-grid, .marketing-builder { grid-template-columns: 1fr; } .marketing-provider-config__head { display: grid; } .marketing-provider-card { border-right: 0; border-bottom: 1px solid var(--border); } .marketing-provider-card:last-child { border-bottom: 0; } .marketing-sequence-list, .marketing-inspector { position: static; max-height: none; } .marketing-settings-grid, .marketing-compliance-grid, .marketing-window-row, .marketing-rule-condition { grid-template-columns: 1fr; } .marketing-rule-remove { justify-self: start; } } /* ============ 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-page, .checkout-layout, .checkout-summary-card { width: 100%; min-width: 0; } .checkout-layout > *, .checkout-layout > * > .card { min-width: 0; max-width: 100%; } .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); } .checkout-product-bumps { margin: -4px 0 4px 62px; display: grid; gap: 8px; } .checkout-product-bumps__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .checkout-product-bumps__head small { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; } .checkout-product-bump { display: grid; grid-template-columns: 20px 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); } .checkout-product-bump:hover, .checkout-product-bump.is-selected { border-color: var(--brand); box-shadow: 0 0 0 1px rgba(54, 120, 185, 0.12); } .checkout-product-bump.is-selected { background: var(--brand-tint); } .checkout-product-bump input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); } .checkout-product-bump__media { width: 42px; height: 42px; border-radius: 8px; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ink-3); } .checkout-product-bump__media img { width: 100%; height: 100%; object-fit: contain; } .checkout-product-bump__body { min-width: 0; } .checkout-product-bump__body strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.25; } .checkout-product-bump__body small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 11px; line-height: 1.35; } .checkout-product-bump__price { display: grid; justify-items: end; gap: 2px; color: var(--ink); font-size: 12px; line-height: 1.1; } .checkout-product-bump__price s { color: var(--ink-4); font-size: 11px; font-weight: 500; } .checkout-product-bump__price em { color: var(--brand); font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } /* ============ 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-main:has(.sally-result) { align-items: flex-start; overflow-y: auto; padding-top: 16px; } .sally-main:has(.sally-voice) { overflow-y: auto; } .sally-col { width: min(100%, 660px); text-align: center; } .sally-card { background: rgba(255,255,255,0.86); border: 1px solid rgba(10,37,64,0.12); border-radius: 22px; box-shadow: 0 22px 64px -42px rgba(10,37,64,0.22); padding: clamp(18px, 2.2vw, 28px); } .sally-orb { position: relative; display: inline-block; flex: 0 0 auto; aspect-ratio: 1 / 1; flex-shrink: 0; overflow: hidden; 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); filter: drop-shadow(0 16px 24px rgba(54,120,185,0.32)); animation: sally-orb-morph 14s ease-in-out infinite; transition: transform var(--t-base), box-shadow var(--t-base), filter 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; opacity: 0.68; } .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 0 1px rgba(54,120,185,0.26); filter: drop-shadow(0 18px 28px rgba(54,120,185,0.36)); } .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); overflow: visible; } .sally-session-orb { display: flex; justify-content: center; margin: 0 auto 16px; overflow: visible; } .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); min-height: clamp(220px, 34vh, 360px); display: flex; align-items: center; justify-content: center; overflow: visible; margin: 0 auto 22px; transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease; scroll-behavior: smooth; scrollbar-width: none; } .sally-voice-teleprompter::-webkit-scrollbar { display: none; } .sally-voice-teleprompter::before, .sally-voice-teleprompter::after { content: none; } .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-input:disabled { background: rgba(255,255,255,0.62); color: var(--ink-3); cursor: not-allowed; opacity: 0.82; } .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-input-mic:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .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--minimal { min-height: min(320px, calc(100vh - 170px)); } .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-thinking-detail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; max-width: min(720px, 100%); margin: 0 auto; text-align: center; } .sally-thinking--minimal .sally-thinking-detail { min-height: auto; } .sally-thinking--final .sally-thinking-detail { min-height: 4.5em; } .sally-thinking-detail__text { display: inline-block; max-width: min(680px, 88vw); line-height: 1.35; animation: sally-thinking-detail-fade 2600ms ease-in-out both; } @keyframes sally-thinking-detail-fade { 0% { opacity: 0; transform: translateY(3px); } 16%, 82% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-3px); } } .sally-dots { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin: 0; } .sally-dots span { width: 8px; height: 8px; 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%, 980px); max-height: none; overflow: visible; padding: 10px 0 54px; } .sally-result__summary { text-align: center; max-width: min(100%, 760px); margin: 0 auto 26px; } .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; max-width: 690px; margin-left: auto; margin-right: auto; } .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.86); border: 1px solid rgba(10,37,64,0.12); border-radius: 18px; padding: 18px 20px; margin-top: 18px; box-shadow: 0 18px 52px -42px rgba(10,37,64,0.24); } .sally-result__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 18px; } .sally-result__grid.is-single { grid-template-columns: minmax(0, 820px); justify-content: center; } .sally-full-eval-card, .sally-condition-card { text-align: left; margin: 18px auto 0; background: rgba(255,255,255,0.9); border: 1px solid rgba(10,37,64,0.13); border-radius: 20px; padding: clamp(18px, 2.1vw, 24px); box-shadow: 0 20px 58px -42px rgba(10,37,64,0.24); } .sally-full-eval-card > div:first-child { display: grid; gap: 5px; margin-bottom: 16px; } .sally-full-eval-card strong, .sally-condition-card > strong { color: var(--ink); font-size: 15px; } .sally-full-eval-card p { margin: 0; color: var(--ink-2); line-height: 1.5; max-width: none; } .sally-full-eval-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(110px, 0.55fr) auto; gap: 10px; align-items: end; } .sally-full-eval-form label { display: grid; gap: 6px; min-width: 0; } .sally-full-eval-form label > span { color: var(--ink-2); font-size: 12px; font-weight: 800; } .sally-full-eval-form .sally-input { min-height: 48px; border-radius: 13px; padding: 12px 14px; box-shadow: none; } .sally-full-eval-form .btn { min-height: 48px; white-space: nowrap; } .sally-full-eval-card__notice { display: block; margin-top: 10px; color: var(--danger); font-weight: 700; } .sally-condition-card { display: grid; gap: 10px; } .sally-condition-card h2 { margin: 0; color: var(--ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.15; } .sally-condition-card p { display: grid; gap: 4px; margin: 0; color: var(--ink); max-width: none; } .sally-condition-card p span { color: var(--ink-3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .sally-condition-card__meta { display: flex; flex-wrap: wrap; gap: 8px; } .sally-condition-card__meta span { border-radius: 999px; background: var(--bg-subtle); color: var(--ink-2); font-size: 12px; font-weight: 800; padding: 7px 10px; } .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: 12px; margin-bottom: 16px; } .sally-bundle-item { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 14px; border: 1px solid rgba(10,37,64,0.13); border-radius: 17px; text-decoration: none; color: inherit; background: rgba(255,255,255,0.82); box-shadow: none; } .sally-bundle-item__name { display: inline-block; color: var(--ink); font-weight: 800; text-decoration: none; line-height: 1.2; } .sally-bundle-item__name:hover { color: var(--brand); } .sally-bundle-item > span { background: var(--bg-subtle); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 10px; min-height: 92px; } .sally-bundle-item img { width: 100%; height: 72px; 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: 13px; line-height: 1.45; } .sally-bundle-item__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .sally-bundle-item__actions .btn { min-height: 34px; padding-inline: 13px; font-size: 12px; } .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: 26px; 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: 18px; } .sally-batch-upload { display: flex; flex-direction: column; gap: 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-batch-upload p { margin-bottom: 0; } .sally-batch-upload__actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; } .sally-batch-upload__actions small { color: var(--ink); min-width: 0; } .sally-batch-upload__actions .btn { flex: 0 0 auto; } .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); } .sally-recent-sessions-card { padding: 22px; display: flex; flex-direction: column; min-height: 0; } .sally-recent-sessions-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; } .sally-recent-sessions-header h3 { font-size: 16px; font-weight: 700; margin: 0; } .sally-recent-sessions-header span, .sally-recent-sessions-pager > span { color: var(--ink-3); font-size: 12px; font-weight: 700; white-space: nowrap; } .sally-recent-sessions-empty { color: var(--ink-3); font-size: 13px; margin: 0; } .sally-recent-sessions-list { max-height: 344px; overflow-y: auto; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); scrollbar-gutter: stable; } .sally-recent-session { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px 2px; } .sally-recent-session + .sally-recent-session { border-top: 1px solid var(--border); } .sally-recent-session strong, .sally-recent-session small { display: block; } .sally-recent-session strong { color: var(--ink); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; } .sally-recent-session small { color: var(--ink-3); font-size: 11px; margin-top: 4px; } .sally-recent-session .badge { flex: 0 0 auto; } .sally-recent-sessions-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; } .sally-recent-sessions-pager > div { display: flex; gap: 8px; } .sally-recent-sessions-pager .btn { min-width: 36px; padding-inline: 10px; } .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; flex-wrap: wrap; gap: 12px; background: var(--bg-card); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; } .sally-admin-alert svg { flex: 0 0 auto; color: var(--danger); } .sally-admin-alert strong { color: var(--ink); } .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-stage { height: 100svh; min-height: 100svh; } .sally-topbar { padding: 14px 16px 8px; } .sally-topbar__brand span { display: none; } .sally-close { width: 40px; height: 40px; } .sally-main { justify-content: flex-start; align-items: flex-start; padding: 4px 16px calc(18px + env(safe-area-inset-bottom)); overflow: auto; } .sally-col { margin-top: 0; } .sally-intro { padding-bottom: 14px; } .sally-intro > .sally-orb { width: 72px !important; height: 72px !important; margin-bottom: 14px; } .sally-intro .sally-q { font-size: clamp(31px, 8.4vw, 36px); line-height: 1.08; margin-bottom: 14px; } .sally-intro p { font-size: 15px; line-height: 1.48; margin-bottom: 14px; } .sally-mode-grid { gap: 10px; margin-top: 0; } .sally-mode-card { min-height: 132px; padding: 16px 18px; gap: 7px; border-radius: 18px; } .sally-mode-card > span { width: 42px; height: 42px; } .sally-mode-card strong { font-size: 18px; } .sally-mode-card small { font-size: 12px; line-height: 1.35; } .sally-answer-actions, .sally-email form, .sally-full-eval-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-bundle-item { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; } .sally-bundle-item > span { min-height: 72px; padding: 8px; } .sally-bundle-item img { height: 54px; } .sally-bundle-item__actions { flex-direction: column; align-items: stretch; } .sally-bundle-item__actions .btn { width: 100%; } .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-trust-strip { flex-direction: row; gap: 8px 12px; margin-top: 14px; } .sally-trust-strip span { font-size: 11px; line-height: 1.3; } .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; } .admin-product-bumps__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .admin-product-bumps__head h3 { margin: 0; font-size: 15px; font-weight: 700; } .admin-product-bumps__head p { margin: 5px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.45; } .admin-product-bumps__list { display: grid; gap: 14px; } .admin-product-bump { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); } .admin-product-bump__preview { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 8px; background: var(--bg-subtle); } .admin-product-bump__image { width: 64px; height: 64px; border-radius: 8px; background: var(--bg-card); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ink-3); } .admin-product-bump__image img { width: 100%; height: 100%; object-fit: contain; } .admin-product-bump__preview span { display: block; color: var(--ink-3); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .admin-product-bump__preview strong { display: block; margin-top: 4px; color: var(--ink); font-size: 15px; line-height: 1.25; } .admin-product-bump__preview small { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; color: var(--ink-3); font-size: 12px; } .admin-product-bump__preview s { color: var(--ink-4); } .admin-product-bump__preview b { color: var(--brand); font-weight: 800; } .admin-product-bump__fields { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(140px, 0.6fr) minmax(190px, 0.8fr); gap: 14px; align-items: end; } .admin-product-bump__field { min-width: 0; } .admin-product-bump__field--wide { grid-column: 1 / -1; } .admin-product-bump__discount { display: grid; grid-template-columns: 88px minmax(96px, 1fr); gap: 10px; } .admin-product-bump__discount .select { min-width: 88px; } .admin-product-bump__fields .textarea { min-height: 86px; } .admin-product-bump__remove { justify-self: start; color: var(--danger); } .admin-product-bumps__empty { display: grid; gap: 5px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--bg-subtle); } .admin-product-bumps__empty strong { color: var(--ink); font-size: 13px; } .admin-product-bumps__empty span { color: var(--ink-3); font-size: 12px; line-height: 1.45; } /* ============ Proximity motion ============ */ :where( .btn, .product-card, .journal-card, .journal-feature, .government-product-card, .smh-hero__ask, .smh-finding-button, .smh-product-chip, .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-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, .smh-hero__ask, .smh-finding-button, .smh-product-chip, .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-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), .smh-hero__ask[data-proximity-active="true"]:not(:active), .smh-product-chip[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-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, .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 { 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-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-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: transparent; box-shadow: none; 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; } .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 { display: block !important; grid-template-columns: 1fr !important; max-width: 100vw; overflow-x: clip; } .admin-shell, .admin-main, .admin-sidebar, .admin-main * { min-width: 0; } .admin-mobile-bar { position: sticky; top: 0; z-index: 1320; display: grid; grid-template-columns: 42px minmax(0, auto) 1fr; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-card) 96%, transparent); box-shadow: 0 10px 28px rgba(18, 31, 44, 0.08); backdrop-filter: blur(12px); } .admin-mobile-bar__menu { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--ink); box-shadow: var(--shadow-xs); cursor: pointer; } .admin-mobile-bar > span { min-width: 0; color: var(--ink-2); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .admin-nav-backdrop { position: fixed; inset: 58px 0 0; z-index: 1290; display: block; border: 0; padding: 0; background: rgba(15, 24, 40, 0.34); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base); } .admin-shell.is-nav-open .admin-nav-backdrop { opacity: 1; pointer-events: auto; visibility: visible; } .admin-sidebar { position: fixed !important; inset: 58px auto 0 0; z-index: 1300; width: min(318px, calc(100vw - 48px)); height: calc(100dvh - 58px) !important; max-height: calc(100dvh - 58px) !important; display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 18px 14px !important; overflow-y: auto; transform: translateX(-104%); transition: transform var(--t-base); box-shadow: 20px 0 44px rgba(18, 31, 44, 0.18); will-change: transform; } .admin-shell.is-nav-open .admin-sidebar { transform: translateX(0); } .admin-sidebar > div:first-child { display: none !important; } .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-customers-toolbar, .admin-customers-pager, .admin-table-pager { align-items: stretch; } .admin-customers-toolbar > *, .admin-customers-pager > *, .admin-customers-pager-actions, .admin-table-pager > *, .admin-table-pager-actions { width: 100%; } .admin-customers-control, .admin-customers-search, .admin-customers-date-range .admin-customers-control { min-width: 0; } .admin-customers-table-wrap, .admin-table-scroll { min-height: 360px; max-height: 66vh; } .admin-products-card { height: auto; min-height: 0; max-height: none; } .admin-products-filter-panel { grid-template-columns: 1fr; } .admin-products-filter-panel__actions { justify-content: stretch; min-width: 0; } .admin-products-filter-panel__actions .btn { flex: 1 1 0; } .admin-products-table-scroll { min-height: 360px; max-height: 66vh; } .admin-merchant-card .admin-table-scroll { min-height: 0; max-height: none; overflow: visible; } .admin-merchant-table { width: 100% !important; min-width: 0 !important; border-collapse: separate; border-spacing: 0 10px; } .admin-merchant-table thead { display: none; } .admin-merchant-table, .admin-merchant-table tbody, .admin-merchant-table tr, .admin-merchant-table td { display: block; width: 100%; } .admin-merchant-table tbody { display: grid; gap: 10px; } .admin-merchant-table tbody tr { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } .admin-merchant-table tbody tr:hover { background: var(--bg-card); } .admin-merchant-table tbody td { border-bottom: 0; padding: 8px 0; } .admin-merchant-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 6px; color: var(--ink-3); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .admin-merchant-table tbody td:first-child { padding-top: 0; } .admin-merchant-table tbody td:first-child::before, .admin-merchant-table tbody td:last-child::before { display: none; } .admin-merchant-table tbody td:last-child { padding-bottom: 0; text-align: left !important; } .admin-merchant-table tbody td:last-child .btn { width: 100%; justify-content: center; } .admin-merchant-table .admin-merchant-product-cell, .admin-merchant-table .admin-merchant-status-control, .admin-merchant-table .admin-merchant-table-image { min-width: 0; width: 100%; } .admin-merchant-stats, .admin-merchant-grid, .admin-merchant-panel__hero { grid-template-columns: minmax(0, 1fr); } .admin-merchant-status-control, .admin-merchant-section__head, .admin-merchant-toolbar { align-items: stretch; } .admin-merchant-section__head { display: grid; } .admin-merchant-status-control { display: grid; grid-template-columns: auto minmax(0, 1fr); } .admin-merchant-image-select, .admin-merchant-status-select { width: 100%; max-width: none; min-width: 0; } .admin-merchant-custom-row { grid-template-columns: 48px minmax(0, 1fr); } .admin-merchant-custom-row .btn { grid-column: 1 / -1; width: 100%; } .admin-funnel-rules__head, .admin-funnel-standalone-callout { align-items: stretch; } .admin-funnel-rules__head { display: grid; } .admin-funnel-rules__head .btn { width: max-content; max-width: 100%; } .admin-funnel-rules__summary, .admin-funnel-rules__advanced > div, .admin-funnel-rule-row { grid-template-columns: 1fr !important; } .admin-funnel-rule-remove { width: 100%; } .admin-table-page-size { grid-template-columns: minmax(0, 1fr); width: 100%; } .admin-table-page-size .select { width: 100%; } .checkout-page { max-width: 100vw !important; overflow-x: clip; padding-left: 18px !important; padding-right: 18px !important; } .checkout-layout { gap: 18px !important; grid-template-columns: minmax(0, 1fr) !important; } .checkout-page .card { max-width: 100%; } .checkout-summary-card { position: static !important; } .admin-product-bumps__head { flex-direction: column; align-items: stretch; } .admin-product-bumps__head .btn { width: max-content; } .admin-product-bump__fields { grid-template-columns: 1fr; } .checkout-product-bumps { margin-left: 0; } .checkout-product-bump { grid-template-columns: 20px 42px minmax(0, 1fr); } .checkout-product-bump__price { grid-column: 3; justify-items: start; } .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; } } .rm-plus-account, .rm-plus-admin-panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .rm-plus-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 24px; align-items: center; padding: 28px; overflow: visible; } .rm-plus-hero h2 { margin: 0 0 8px; font-size: clamp(34px, 5vw, 56px); } .rm-plus-hero p { color: var(--ink-3); margin: 0; max-width: 760px; font-size: 18px; line-height: 1.45; } .rm-plus-hero__balance, .rm-plus-stat { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 16px; padding: 18px; } .rm-plus-hero__balance span, .rm-plus-stat span, .rm-plus-stat small { display: block; color: var(--ink-3); } .rm-plus-hero__balance strong { display: block; font-size: 36px; line-height: 1.1; margin: 8px 0; } .rm-plus-stats, .rm-plus-admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .rm-plus-notification-strip { display: grid; gap: 10px; } .rm-plus-notification-strip__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid color-mix(in srgb, var(--warning) 36%, var(--border)); border-radius: 12px; background: var(--warning-tint); color: var(--ink); padding: 12px 14px; } .rm-plus-notification-strip__item span { color: var(--ink-3); text-align: right; } .rm-plus-admin-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 18px; } .rm-plus-stat { min-height: 140px; } .rm-plus-stat strong { display: block; font-size: 28px; line-height: 1.15; margin: 10px 0 8px; } .rm-plus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .rm-plus-panel, .rm-plus-admin-panel { padding: 24px; overflow: visible; } .rm-plus-panel__head, .rm-plus-admin-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .rm-plus-panel__head h3, .rm-plus-admin-panel__head h3 { margin: 0 0 4px; font-size: 22px; } .rm-plus-panel__head p, .rm-plus-admin-panel__head p { margin: 0; color: var(--ink-3); line-height: 1.45; } .rm-plus-action-list, .rm-plus-reward-list, .rm-plus-ledger { display: flex; flex-direction: column; gap: 10px; } .rm-plus-action, .rm-plus-reward, .rm-plus-ledger__row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--border); background: var(--paper); border-radius: 16px; padding: 14px 16px; color: var(--ink); text-align: left; } .rm-plus-action:hover, .rm-plus-reward:hover { border-color: var(--brand); } .rm-plus-action span, .rm-plus-reward span, .rm-plus-ledger__row span { display: block; } .rm-plus-action > span:first-child, .rm-plus-reward > span:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .rm-plus-action small, .rm-plus-reward small { color: var(--ink-3); font-size: 13px; margin-top: 0; } .rm-plus-ledger__row span { color: var(--ink-3); font-size: 13px; margin-top: 4px; } .rm-plus-referral, .rm-plus-redemption-list { margin-top: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-subtle); padding: 14px 16px; } .rm-plus-referral span, .rm-plus-referral small, .rm-plus-redemption-row small { display: block; color: var(--ink-3); } .rm-plus-referral strong { display: block; margin: 4px 0; overflow-wrap: anywhere; } .rm-plus-redemption-list h4 { margin: 0 0 10px; font-size: 15px; } .rm-plus-redemption-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .rm-plus-redemption-row:first-of-type { border-top: 0; } .rm-plus-reward.is-disabled { opacity: 0.55; cursor: not-allowed; } .rm-plus-reward.is-confirming { border-color: var(--brand); background: var(--brand-tint); } .rm-plus-filters, .rm-plus-admin-filter-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .rm-plus-notice, .rm-plus-empty, .rm-plus-admin-empty { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); color: var(--ink-3); padding: 14px 16px; } .rm-plus-notice { color: var(--success); background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 28%, transparent); margin-bottom: 12px; } .rm-plus-notice.is-error { color: var(--danger); background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 32%, transparent); } .rm-plus-ledger__row > div:last-child { text-align: right; } .rm-plus-ledger__row .is-positive { color: var(--success); } .rm-plus-ledger__row .is-negative { color: var(--danger); } .rm-plus-admin-tabs { margin-bottom: 16px; } .rm-plus-admin-adjustment { display: grid; grid-template-columns: minmax(220px, 1fr) 150px minmax(260px, 1.2fr) auto; gap: 10px; align-items: center; margin-bottom: 16px; } .rm-plus-admin-panel .input--compact { min-height: 38px; padding: 8px 10px; font-size: 13px; } .rm-plus-admin-risk-list { display: grid; gap: 10px; } .rm-plus-admin-risk-item { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-subtle); } .rm-plus-admin-risk-item__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--ink-3); font-size: 12px; font-weight: 700; } .rm-plus-admin-risk-item strong { display: block; margin-bottom: 6px; } .rm-plus-admin-risk-item p, .rm-plus-admin-risk-item small { display: block; margin: 0; color: var(--ink-3); line-height: 1.45; } .rm-plus-admin-risk-item small { margin-top: 8px; font-weight: 700; } .product-rm-plus { display: inline-flex; align-items: center; margin: -8px 0 22px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-subtle); color: var(--brand); padding: 9px 13px; font-size: 13px; font-weight: 700; } @media (max-width: 1180px) { .rm-plus-stats, .rm-plus-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .rm-plus-hero, .rm-plus-grid, .rm-plus-admin-adjustment { grid-template-columns: 1fr; } .rm-plus-panel__head, .rm-plus-admin-panel__head { flex-direction: column; } .rm-plus-filters, .rm-plus-admin-filter-row { justify-content: flex-start; } .rm-plus-ledger__row { align-items: flex-start; flex-direction: column; } .rm-plus-notification-strip__item { align-items: flex-start; flex-direction: column; } .rm-plus-notification-strip__item span { text-align: left; } .rm-plus-ledger__row > div:last-child { text-align: left; } } @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); } .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; } .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; } }