/* ========================================================================== STREAD "vivid" theme — landing, auth, member dashboard and super-admin. Loaded after app.css on every page EXCEPT the buyer storefront (which has its own store.css). It raises colour saturation and contrast across the board: stronger tokens, a dark sidebar, solid KPI cards, and a bold landing - all in ONE brand hue (tones of it, not a rainbow); other colours are for status only. Brand colour flows from --color-primary-500: · member pages → the shop's own accent (set inline in ) · admin pages → violet, so the two dashboards are never confused · everything else → the platform blue below Derived tones (--v-*) are defined on so they see per-page overrides. HUE RULE: the logo (#4a86f7) sits at hue 219deg / ~90% saturation. Every dark or deep shade below is derived from --v-brand with relative colour syntax (hsl(from ...)), which keeps that hue exactly. Never hand-pick navy hexes: the old #0b1760 / #1a3cc8 sat at 228-232deg and read indigo, off-brand. ========================================================================== */ :root { --color-primary-50: #eef4ff; --color-primary-100: #dce8ff; --color-primary-200: #bcd3ff; --color-primary-500: #4a86f7; /* logo */ --color-primary-600: #3873ee; /* logo, bottom stop */ --color-primary-700: #2a5fd6; --color-primary-wash: rgb(74 134 247 / 0.16); --color-page: #e5ecfb; --color-sunken: #dce5f9; --color-surface-2: #eef3fe; --color-text: #0f1230; --color-text-secondary: #333a5e; --color-text-muted: #56607f; --color-border: rgb(16 24 90 / 0.11); --color-border-strong: rgb(16 24 90 / 0.2); --soft-blue: #dce8ff; --soft-lilac: #e9defe; --soft-mint: #d3f4e4; --soft-peach: #ffe2c9; --soft-rose: #fddbe6; --soft-sand: #efe8d3; --color-success: #0f7a4d; --color-success-bg: #c9f2dc; --color-warning: #8a5300; --color-warning-bg: #ffe6b0; --color-danger: #c02f2f; --color-danger-bg: #fdd5d5; --color-info-bg: #d6e3ff; --shadow-xs: 0 1px 2px rgb(16 24 90 / 0.08); --shadow-card: 0 1px 2px rgb(16 24 90 / 0.06), 0 8px 24px rgb(16 24 90 / 0.08); --shadow-raised: 0 2px 6px rgb(16 24 90 / 0.08), 0 18px 42px rgb(16 24 90 / 0.14); --shadow-pop: 0 4px 12px rgb(16 24 90 / 0.1), 0 30px 68px rgb(16 24 90 / 0.2); } /* Admin = violet. Derived tokens below are recomputed from these on . */ body:has(.admin-sidebar) { --color-primary-50: #f0eaff; --color-primary-100: #e2d7ff; --color-primary-200: #cbb8ff; --color-primary-500: #7a4dff; --color-primary-600: #6634f0; --color-primary-700: #5223d0; --color-primary-wash: rgb(122 77 255 / 0.16); --color-info-bg: #e2d8ff; } body { --v-brand: var(--color-primary-500); --v-strong: color-mix(in oklch, var(--v-brand) 82%, #000); --v-deep: hsl(from var(--v-brand) h calc(s * 0.85) calc(l * 0.48)); --v-deeper: hsl(from var(--v-brand) h calc(s * 0.8) calc(l * 0.38)); --v-g0: hsl(from var(--v-brand) h calc(s * 0.9) calc(l * 0.5)); /* darkest gradient stop */ --v-g1: hsl(from var(--v-brand) h s calc(l * 0.8)); /* mid gradient stop */ --v-glow: hsl(from var(--v-brand) h s calc(l * 1.12) / 0.5); --v-hero: linear-gradient(140deg, var(--v-g0) 0%, var(--v-g1) 55%, var(--v-brand) 100%); --v-ring: color-mix(in srgb, var(--v-brand) 40%, transparent); /* every pastel tile/icon background in app.css now tints the brand hue */ --soft-blue: color-mix(in oklab, var(--v-brand) 22%, #fff); --soft-lilac: var(--soft-blue); --soft-mint: var(--soft-blue); --soft-peach: var(--soft-blue); --soft-rose: var(--soft-blue); --soft-sand: #e8ebf5; --v-hair: rgb(16 24 90 / 0.06); --v-field: #e9eefb; --v-lift: 0 0 0 1px rgb(16 24 90 / 0.035), 0 1px 2px rgb(16 24 90 / 0.05), 0 14px 34px -14px rgb(16 24 90 / 0.18); background: var(--color-page); } /* ---------------------------------------------------------------- Buttons */ .btn { background: linear-gradient(135deg, var(--v-brand), var(--v-strong)); box-shadow: 0 8px 20px var(--v-ring), inset 0 1px 0 rgb(255 255 255 / 0.22); font-weight: 650; } .btn:hover { box-shadow: 0 12px 26px var(--v-ring), inset 0 1px 0 rgb(255 255 255 / 0.22); filter: brightness(1.06); } .btn-secondary { background: color-mix(in oklab, var(--v-brand) 9%, #fff); color: var(--v-strong); box-shadow: none; } .btn-secondary:hover { background: color-mix(in oklab, var(--v-brand) 16%, #fff); color: var(--v-strong); box-shadow: none; filter: none; } .btn-danger { background: linear-gradient(135deg, #f0524f, #c02f2f); box-shadow: 0 8px 20px rgb(192 47 47 / 0.3); } .btn-ghost { background: transparent; color: var(--v-strong); box-shadow: none; } .btn-ghost:hover { background: var(--soft-blue); color: var(--v-strong); box-shadow: none; filter: none; } /* ---------------------------------------------------------------- Forms, badges, alerts */ input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel], input[type=url], input[type=file], select, textarea { border: 0; border-radius: 12px; padding: 13px 15px; background: var(--v-field); box-shadow: inset 0 0 0 1px transparent; } input[type=color] { border: 0; border-radius: 12px; background: var(--v-field); padding: 5px; height: 46px; } input::placeholder, textarea::placeholder { color: #8a8eae; } input:hover, select:hover, textarea:hover { border: 0; background: #dfe7fa; } input:focus, select:focus, textarea:focus { border: 0; background: #fff; box-shadow: 0 0 0 2px var(--v-brand), 0 0 0 6px var(--color-primary-wash); } input[readonly] { background: var(--color-sunken); box-shadow: none; } .input-prefix span { border: 0; border-radius: 12px 0 0 12px; background: #e3e7f6; } .input-prefix input { border-radius: 0 12px 12px 0; } label { color: var(--color-text); font-weight: 650; } .badge { font-weight: 700; } .badge-neutral { background: var(--color-sunken); color: var(--color-text-secondary); } .alert { border: 0; border-radius: 16px; } .alert-success { color: #0b5c3a; } .alert-warning { color: #6e4300; } .alert-danger { color: #8a2020; } .alert-info { color: var(--v-strong); } .eyebrow { color: var(--v-strong); font-weight: 700; } .chip { background: #fff; box-shadow: 0 1px 3px rgb(16 24 90 / 0.1); color: var(--color-text-secondary); font-weight: 600; } .chip:hover { color: var(--v-strong); box-shadow: 0 3px 12px rgb(16 24 90 / 0.16); } .chip.active { background: linear-gradient(135deg, var(--v-brand), var(--v-strong)); color: #fff; box-shadow: 0 6px 16px var(--v-ring); } .chip-todo, .setup-actions .chip.chip-todo { background: var(--soft-blue); color: var(--v-strong); box-shadow: none; } .chip-todo:hover { background: var(--color-primary-100); color: var(--v-strong); } .chart .line { stroke: var(--v-brand); stroke-width: 3; } .chart .area { fill: color-mix(in srgb, var(--v-brand) 20%, transparent); } .chart .bar { fill: color-mix(in oklab, var(--v-brand) 62%, #fff); } .chart .bar:hover { fill: var(--v-brand); } .chart .grid-line { stroke: rgb(16 24 90 / 0.1); } .chart .axis { fill: var(--color-text-muted); } /* ---------------------------------------------------------------- App shell (member + admin) */ .app { background: linear-gradient(180deg, #dbe6fa 0, #e5ecfb 520px); } .app .sidebar { background: linear-gradient(195deg, var(--v-deep) 0%, var(--v-deeper) 100%); box-shadow: 4px 0 24px rgb(4 14 36 / 0.2); scrollbar-color: rgb(255 255 255 / .18) transparent; } .app .sidebar::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .18); } .app .brand { border-bottom-color: rgb(255 255 255 / 0.12); } .app .brand-mark { box-shadow: 0 8px 22px rgb(0 0 0 / 0.35); background: linear-gradient(145deg, var(--v-brand), var(--v-strong)); } .app .brand-mark-admin { background: linear-gradient(145deg, #9a72ff, #6634f0); } .app .brand-name { color: #fff; font-weight: 750; } .app .brand-copy .muted { color: rgb(255 255 255 / 0.62); } .app .nav-group-title { color: rgb(255 255 255 / 0.45); font-weight: 750; } .app .nav-link { color: rgb(255 255 255 / 0.78); font-weight: 550; } .app .nav-link:hover { background: rgb(255 255 255 / 0.1); color: #fff; } .app .nav-link.active { background: linear-gradient(100deg, var(--v-brand), var(--v-strong)); color: #fff; font-weight: 700; box-shadow: 0 8px 20px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.2); } .app .nav-icon { background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.9); } .app .nav-link.active .nav-icon { background: rgb(255 255 255 / 0.24); color: #fff; box-shadow: none; } .app .nav-link .dot { background: #3ddc97; box-shadow: 0 0 0 3px rgb(61 220 151 / 0.25); } .app .nav-link .dot.off { background: rgb(255 255 255 / 0.3); box-shadow: none; } .app .sidebar-footer { border-top-color: rgb(255 255 255 / 0.12); } .app .topbar { background: rgb(255 255 255 / 0.94); box-shadow: 0 1px 0 var(--color-border), 0 6px 20px rgb(16 24 90 / 0.06); } .topbar-copy > span { color: var(--v-strong); font-weight: 700; } .topbar-copy .title { font-weight: 750; } .topbar-store { background: var(--v-field); box-shadow: none; color: var(--color-text); } .topbar-store:hover { background: var(--soft-blue); color: var(--v-strong); } .topbar-language { background: var(--soft-blue); color: var(--v-strong); } .admin-user { background: linear-gradient(135deg, #7a4dff, #5223d0); color: #fff; } .admin-user-avatar { background: rgb(255 255 255 / 0.95); color: #5223d0; } .icon-btn { box-shadow: 0 1px 4px rgb(16 24 90 / 0.14); } .page-head h1, .app .content > h1 { font-weight: 780; letter-spacing: -0.03em; } .workspace-link { box-shadow: 0 1px 4px rgb(16 24 90 / 0.12); background: #fff; } .workspace-link-icon { background: var(--v-brand); color: #fff; } /* Cards */ .card, .app .card { border: 0; border-radius: 22px; box-shadow: var(--v-lift); } .card-title { font-weight: 720; } .card-subtitle { color: var(--color-text-muted); } .setup-card { background: linear-gradient(110deg, #fff, var(--color-primary-50)); } .setup-progress { background: var(--color-sunken); height: 7px; } .setup-progress span { background: linear-gradient(90deg, var(--v-brand), var(--v-strong)); } /* KPI cards - solid brand colour, white text; four tones of the same hue */ .app .metric { border: 0; border-radius: 22px; } .app .metric:has(.metric-icon) { --m1: var(--v-brand); --m2: var(--v-strong); color: #fff; background: linear-gradient(135deg, var(--m1), var(--m2)); box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--m2) 65%, transparent); } .grid > .metric:has(.metric-icon):nth-child(4n + 2) { --m1: color-mix(in oklch, var(--v-brand) 88%, #000); --m2: color-mix(in oklch, var(--v-brand) 70%, #000); } .grid > .metric:has(.metric-icon):nth-child(4n + 3) { --m1: color-mix(in oklch, var(--v-brand) 76%, #000); --m2: color-mix(in oklch, var(--v-brand) 58%, #000); } .grid > .metric:has(.metric-icon):nth-child(4n) { --m1: color-mix(in oklch, var(--v-brand) 62%, #000); --m2: color-mix(in oklch, var(--v-brand) 46%, #000); } .app .metric:has(.metric-icon)::after { background: rgb(255 255 255 / 0.14); opacity: 1; width: 120px; height: 120px; inset: auto -30px -44px auto; } .app .metric:has(.metric-icon) .metric-label { color: rgb(255 255 255 / 0.9); font-weight: 600; } .app .metric:has(.metric-icon) .metric-value { color: #fff; font-weight: 780; font-size: 28px; } .app .metric:has(.metric-icon) .metric-meta { color: rgb(255 255 255 / 0.8); } .app .metric:has(.metric-icon) .metric-icon { background: rgb(255 255 255 / 0.22); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); } /* KPI cards without an icon stay white, with a coloured rail */ .app .metric:not(:has(.metric-icon)) { border: 0; border-radius: 22px; box-shadow: var(--v-lift); } .app .metric:not(:has(.metric-icon)) .metric-value { font-weight: 780; } /* Tables */ .app table th { background: transparent; color: var(--color-text-muted); font-weight: 700; letter-spacing: .06em; border-bottom: 1px solid var(--v-hair); padding-top: 8px; padding-bottom: 10px; } .app tbody tr:hover { background: #f1f4ff; } .app td { border-bottom: 1px solid var(--v-hair); } .app .dashboard-table-card .table-wrap, .app .buyer-history-card .table-wrap { border: 0; } .health-row, .empty-soft, .mock-line, .rank-row:hover { background: #f1f4fd; } .rank-row:nth-child(n) .rank-avatar { background: var(--soft-blue); color: var(--v-strong); } .rank-num { color: var(--color-text-secondary); } /* ---------------------------------------------------------------- Public header + footer */ .public-header { background: rgb(255 255 255 / 0.96); box-shadow: 0 1px 0 var(--color-border), 0 8px 26px rgb(16 24 90 / 0.06); } .public-header .store-name { font-weight: 800; } .public-nav a { font-weight: 650; color: var(--color-text-secondary); } .public-nav a:hover { background: var(--soft-blue); color: var(--v-strong); } .public-header .header-login { color: var(--color-text); font-weight: 700; } .public-footer { margin-top: 72px; background: var(--v-deeper); color: rgb(255 255 255 / 0.72); } .public-footer-inner { max-width: 1180px; margin: 0 auto; padding: 44px 20px 28px; display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; justify-content: space-between; } .public-footer .header-brand .store-name { color: #fff; } .public-footer p { margin: 10px 0 0; max-width: 320px; font-size: 13.5px; line-height: 1.7; color: rgb(255 255 255 / 0.6); } .public-footer-copy { width: 100%; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 12.5px; color: rgb(255 255 255 / 0.5); text-align: center; } /* ---------------------------------------------------------------- Landing */ body:has(.landing-hero) { background: #edf0fb; } .landing-hero { color: #fff; padding-bottom: 110px; border-radius: 0 0 56px 56px; background: var(--v-hero); } .landing-hero::before { background: radial-gradient(42% 55% at 12% 26%, var(--v-glow), transparent 72%), radial-gradient(36% 50% at 88% 14%, hsl(from var(--v-brand) h s calc(l * 1.2) / 0.42), transparent 72%); } .landing-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: radial-gradient(rgb(255 255 255 / .2) 1.2px, transparent 1.4px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 85%); mask-image: linear-gradient(180deg, #000 0, transparent 85%); } .landing-hero .display { color: #fff; font-weight: 800; } .landing-hero .display em { background: linear-gradient(100deg, hsl(from var(--v-brand) h s calc(l * 1.25)) 0%, hsl(from var(--v-brand) h s 92%) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-hero p.lead { color: rgb(255 255 255 / 0.86); } .landing-hero .pill-badge { background: rgb(255 255 255 / 0.14); color: rgb(255 255 255 / 0.9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); backdrop-filter: blur(8px); } .landing-hero .pill-badge b { color: #fff; } .landing-hero .btn:not(.btn-secondary) { color: var(--v-strong); background: #fff; box-shadow: 0 12px 28px rgb(0 0 0 / 0.3); font-weight: 750; } .landing-hero .btn-secondary { color: #fff; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.45); } .landing-hero .btn-secondary:hover { background: rgb(255 255 255 / 0.22); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; } .landing-hero .hero-proof { border-top-color: rgb(255 255 255 / 0.22); } .landing-hero .hero-proof b { color: #fff; font-size: 22px; font-weight: 800; } .landing-hero .hero-proof span { color: rgb(255 255 255 / 0.7); font-size: 12.5px; } .landing-hero .visual-caption { color: rgb(255 255 255 / 0.65); } .landing-hero .visual-kicker { color: var(--color-text); } .landing-visual .mock { background: rgb(255 255 255 / 0.22); border-color: rgb(255 255 255 / 0.35); box-shadow: 0 34px 80px rgb(4 16 44 / 0.5); } .landing-visual .mock-inner { color: var(--color-text); } .mock-tile { box-shadow: inset 0 0 0 1px rgb(16 24 90 / 0.06); } .mock-tile .label { color: var(--color-text-secondary); font-weight: 600; } .mock-tile .value { font-weight: 800; } .mock-chart { background: linear-gradient(180deg, rgb(74 134 247 / 0.2), rgb(74 134 247 / 0)); } .channel-section { padding-top: 40px; padding-bottom: 8px; } .logo-strip span { border: 0; color: var(--color-text); font-weight: 650; box-shadow: 0 1px 3px rgb(16 24 90 / 0.1), 0 8px 20px -8px rgb(16 24 90 / 0.14); } .landing-panel { background: #fff; border: 0; box-shadow: 0 22px 60px rgb(16 24 90 / 0.1); } .section-title { font-weight: 800; letter-spacing: -0.03em; color: var(--color-text); } .section-sub { color: var(--color-text-secondary); } .landing-section .eyebrow { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--soft-blue); color: var(--v-strong); font-size: 12.5px; } /* Features: two aligned rows of three equal cards (channels, then supporting features) */ .fx .center { margin-bottom: 8px; } .fx-label { display: flex; justify-content: center; margin: 34px 0 18px; } .fx-label span { padding: 6px 16px; border-radius: 999px; background: var(--soft-blue); color: var(--v-strong); font-size: 12.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .fx-card { position: relative; padding: 30px 28px 32px; border-radius: 24px; background: #fff; box-shadow: var(--v-lift); transition: transform .22s ease, box-shadow .22s ease; } .fx-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgb(16 24 90 / 0.04), 0 22px 44px -16px hsl(from var(--v-brand) h s calc(l * 0.55) / 0.35); } .fx-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--v-brand), var(--v-g1)); box-shadow: 0 10px 22px -6px var(--v-ring); } .fx-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; color: var(--color-text); } .fx-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--color-text-secondary); } .fx-card code { font-size: 12.5px; background: var(--soft-blue); color: var(--v-strong); padding: 2px 7px; border-radius: 7px; word-break: break-word; } /* second row: flat, tinted cards so the two groups read as different levels */ .fx-grid-soft .fx-card { background: linear-gradient(160deg, #e9f1ff, #d3e3ff); box-shadow: none; } .fx-grid-soft .fx-card:hover { box-shadow: 0 18px 38px -18px hsl(from var(--v-brand) h s calc(l * 0.55) / 0.3); } .fx-grid-soft .fx-icon { color: var(--v-strong); background: #fff; box-shadow: 0 6px 16px -6px rgb(40 70 160 / 0.25); } /* divider that ties the rows together */ .fx-hub { display: flex; align-items: center; gap: 18px; margin: 34px 0; } .fx-hub::before, .fx-hub::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border-strong)); } .fx-hub::after { background: linear-gradient(270deg, transparent, var(--color-border-strong)); } .fx-hub span { flex: 0 1 auto; text-align: center; font-size: 13.5px; font-weight: 650; color: var(--color-text-secondary); } @media (max-width: 900px) { .fx-grid { grid-template-columns: 1fr; gap: 14px; } .fx-card { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 22px 20px; } .fx-icon { grid-row: span 2; margin: 0; } .fx-card h3 { align-self: end; margin-bottom: 4px; } .fx-hub { margin: 26px 0; gap: 12px; } .fx-hub span { font-size: 12.5px; } } .step, .landing-section .step { border: 0; box-shadow: var(--v-lift); } .step-num, .step:nth-child(n) .step-num { width: 40px; height: 40px; border-radius: 14px; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--v-brand), var(--v-strong)); box-shadow: 0 8px 18px var(--v-ring); } .step h3 { font-weight: 750; } .step p { color: var(--color-text-secondary); } .pricing-section { background: linear-gradient(150deg, #ffffff, #dfe8ff); } .price-card { border: 0; box-shadow: var(--v-lift); } .pricing-section > .card { box-shadow: var(--v-lift); } .price-value { font-weight: 800; } .price-card.featured { border: 0; color: #fff; transform: translateY(-8px); background: linear-gradient(160deg, var(--v-brand) 0%, var(--v-g1) 100%); box-shadow: 0 30px 60px -14px hsl(from var(--v-brand) h s calc(l * 0.62) / 0.55); } .price-card.featured .eyebrow { background: rgb(255 255 255 / 0.18); color: #fff; } .price-card.featured .muted { color: rgb(255 255 255 / 0.78); } .price-card.featured .price-value { color: #fff; } .price-card .ribbon { color: #fff; background: linear-gradient(135deg, var(--v-brand), var(--v-strong)); box-shadow: 0 8px 18px var(--v-ring); font-weight: 750; } .price-card.featured .btn { color: var(--v-strong); background: #fff; box-shadow: 0 12px 26px rgb(0 0 0 / 0.28); font-weight: 750; } .price-list li::before { background: #16a870; color: #fff; } .price-list li { color: var(--color-text); font-weight: 550; } /* Pricing: more breathing room between header, cards and the feature list */ .pricing-section > .center { margin-bottom: 56px; } .pricing-section .section-title { margin: 16px 0 16px; } .pricing-section .section-sub { max-width: 640px; line-height: 1.75; } .pricing-section .grid-3 { gap: 24px; } .price-card { padding: 38px 28px 32px; } .price-card .eyebrow { margin-top: 0; } .price-card .price-value { margin-top: 20px; } .price-card .muted { margin-top: 8px; } .price-card .badge { margin-top: 18px; } .price-card .btn { margin-top: 30px; } .pricing-section > .card { margin-top: 48px; padding: 34px 38px 28px; } .pricing-section > .card .grid-2 { gap: 6px 56px; } .pricing-section .price-list { margin: 0; } .pricing-section .price-list li { padding: 10px 0 10px 36px; line-height: 1.6; } .pricing-section .price-list li::before { top: 11px; } .pricing-section > .card .help { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: 13.5px; } @media (max-width: 560px) { .pricing-section > .center { margin-bottom: 40px; } .pricing-section > .card { margin-top: 36px; padding: 24px 20px 22px; } .pricing-section .grid-3 { gap: 28px; } .price-card { padding-inline: 18px; } } .faq details { border: 0; box-shadow: var(--v-lift); } .faq details[open] { border: 0; box-shadow: 0 0 0 2px var(--v-brand), 0 16px 40px -12px var(--v-ring); } .faq summary { font-weight: 700; } .faq summary::after { background: var(--faq-plus), linear-gradient(135deg, var(--v-brand), var(--v-strong)); color: #fff; } .cta-band { color: #fff; border: 0; box-shadow: 0 30px 70px -18px hsl(from var(--v-brand) h s calc(l * 0.55) / 0.6); background: radial-gradient(50% 120% at 100% 0%, var(--v-glow), transparent 65%), var(--v-hero); } .cta-band h2 { color: #fff; font-weight: 800; } .cta-band p { color: rgb(255 255 255 / 0.86); } .cta-band .btn:not(.btn-secondary) { color: var(--v-strong); background: #fff; box-shadow: 0 12px 28px rgb(0 0 0 / 0.3); font-weight: 750; } .cta-band .btn-secondary { color: #fff; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.45); } .cta-band .btn-secondary:hover { background: rgb(255 255 255 / 0.22); color: #fff; } /* ---------------------------------------------------------------- Auth */ .auth-wrap::before { background: radial-gradient(45% 45% at 25% 20%, hsl(from var(--v-brand) h s l / 0.3), transparent 70%), radial-gradient(40% 40% at 80% 35%, hsl(from var(--v-brand) h s calc(l * 1.2) / 0.24), transparent 70%); } .auth-card.card { box-shadow: 0 24px 60px rgb(16 24 90 / 0.16); border: 0; } .auth-form-side .auth-card:not(.card) { padding: 34px 32px; border-radius: var(--radius-xl); background: #fff; box-shadow: 0 24px 60px rgb(16 24 90 / 0.16); border: 0; } .auth-pitch { color: #fff; background: radial-gradient(60% 50% at 20% 15%, var(--v-glow), transparent 70%), linear-gradient(150deg, var(--v-g0), var(--v-g1) 65%, var(--v-brand)); } .auth-pitch h1, .auth-pitch h2, .auth-pitch h3, .auth-pitch-title { color: #fff; } .auth-pitch p, .auth-pitch .muted, .auth-pitch .small, .auth-pitch .secondary-text { color: rgb(255 255 255 / 0.82); } .auth-pitch .eyebrow { color: hsl(from var(--v-brand) h s 88%); background: transparent; padding: 0; } .auth-pitch .price-list li { color: rgb(255 255 255 / 0.92); } .auth-pitch .price-list li::before { background: rgb(255 255 255 / 0.22); color: #fff; } .auth-pitch .auth-price .eyebrow { color: var(--v-strong); } .auth-price { color: var(--color-text); } .auth-price .muted { color: var(--color-text-muted); } /* ---------------------------------------------------------------- Modern edges (extras) */ .upload { border: 0; border-radius: 16px; background: var(--v-field); } .upload:hover { border: 0; background: var(--soft-blue); } .upload.is-drag { border: 0; box-shadow: 0 0 0 2px var(--v-brand), 0 0 0 6px var(--color-primary-wash); } .upload.has-file { border: 0; background: #fff; box-shadow: 0 1px 4px rgb(16 24 90 / 0.12); } .upload.is-error { border: 0; box-shadow: 0 0 0 2px var(--color-danger); } .upload:has(.upload-input:focus-visible) { border: 0; box-shadow: 0 0 0 2px var(--v-brand), 0 0 0 6px var(--color-primary-wash); } .total-row { border-top: 1px solid var(--v-hair); } .method-option, .variant-card { border: 0; } .upload-btn { background: #fff; color: var(--v-strong); box-shadow: 0 1px 4px rgb(16 24 90 / 0.14); } .upload:hover .upload-btn { background: var(--v-brand); color: #fff; box-shadow: none; } /* row actions: breathing room, and a soft (not glaring) delete */ td.actions > * + *, td.actions form + *, td.actions .btn + form { margin-left: 8px; } td.actions .btn-danger { background: var(--color-danger-bg); color: var(--color-danger); box-shadow: none; } td.actions .btn-danger:hover { background: #fbc4c4; color: #a52626; box-shadow: none; filter: none; } /* Old browsers without relative-colour syntax: fixed tones at the logo's hue (219deg). */ @supports not (color: hsl(from red h s l)) { body { --v-deep: #113b89; --v-deeper: #10306a; --v-g0: #0e3c93; --v-g1: #0c5ef5; --v-glow: rgb(111 159 249 / 0.5); } } /* A very long unbroken name (a URL, say) must wrap instead of stretching the table off-screen. */ .app td:first-child { overflow-wrap: anywhere; }