/* ============================================================ Gifxi — premium B2B gifting & rewards landing page Warm gifting palette · enterprise restraint · light + dark ============================================================ */ /* ---------- Tokens ---------- */ :root { /* warm neutral canvas */ --bg: oklch(0.985 0.006 75); --bg-sunk: oklch(0.965 0.009 72); --surface: oklch(1 0 0); --surface-2: oklch(0.975 0.008 74); --ink: oklch(0.255 0.018 45); --ink-soft: oklch(0.44 0.016 48); --ink-faint: oklch(0.60 0.014 52); --line: oklch(0.90 0.012 70); --line-strong: oklch(0.84 0.016 68); /* accents — warm gifting (coral primary, gold + terracotta support) */ --accent: oklch(0.66 0.155 35); /* coral */ --accent-deep: oklch(0.52 0.135 33); /* terracotta */ --accent-soft: oklch(0.93 0.045 45); /* coral wash */ --gold: oklch(0.80 0.105 80); /* gold */ --gold-soft: oklch(0.94 0.05 82); --accent-ink: oklch(0.99 0.01 60); /* text on accent */ --radius: 18px; --radius-sm:11px; --radius-lg:28px; --shadow-sm: 0 1px 2px oklch(0.4 0.03 50 / 0.06), 0 2px 6px oklch(0.4 0.03 50 / 0.05); --shadow-md: 0 4px 14px oklch(0.4 0.04 45 / 0.08), 0 12px 34px oklch(0.4 0.04 45 / 0.07); --shadow-lg: 0 8px 24px oklch(0.4 0.05 45 / 0.10), 0 30px 70px oklch(0.35 0.05 45 / 0.14); --maxw: 1200px; --gut: clamp(20px, 5vw, 64px); --font-display: 'Schibsted Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-serif: 'Newsreader', Georgia, serif; --font-mono: 'Geist Mono', ui-monospace, monospace; } /* alternate accent palettes (set via data-accent on ) */ :root[data-accent="amber"] { --accent: oklch(0.72 0.145 65); --accent-deep: oklch(0.58 0.13 58); --accent-soft: oklch(0.93 0.05 75); --gold: oklch(0.80 0.10 110); --gold-soft: oklch(0.94 0.05 105); } :root[data-accent="berry"] { --accent: oklch(0.58 0.155 8); --accent-deep: oklch(0.46 0.14 6); --accent-soft: oklch(0.93 0.045 12); --gold: oklch(0.78 0.10 60); --gold-soft: oklch(0.94 0.05 60); } :root[data-accent="jade"] { --accent: oklch(0.60 0.105 165); --accent-deep: oklch(0.48 0.095 168); --accent-soft: oklch(0.93 0.04 165); --gold: oklch(0.80 0.10 85); --gold-soft: oklch(0.94 0.05 85); } :root[data-accent="purple"] { --accent: #2A124D; --accent-deep: #1E0D38; --accent-soft: #ECE5F6; --gold: oklch(0.80 0.105 85); --gold-soft: oklch(0.94 0.05 85); } /* ---------- Dark mode ---------- */ :root[data-theme="dark"] { --bg: oklch(0.205 0.012 50); --bg-sunk: oklch(0.175 0.012 50); --surface: oklch(0.245 0.013 50); --surface-2: oklch(0.275 0.014 50); --ink: oklch(0.95 0.012 70); --ink-soft: oklch(0.80 0.014 65); --ink-faint: oklch(0.63 0.014 60); --line: oklch(0.34 0.014 52); --line-strong: oklch(0.42 0.016 52); --accent-soft: oklch(0.34 0.05 40); --gold-soft: oklch(0.36 0.05 78); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 6px oklch(0 0 0 / 0.25); --shadow-md: 0 4px 14px oklch(0 0 0 / 0.35), 0 12px 34px oklch(0 0 0 / 0.30); --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.4), 0 30px 70px oklch(0 0 0 / 0.45); } /* purple brightens in dark mode so fills/CTAs stay legible */ :root[data-theme="dark"][data-accent="purple"] { --accent: #7E54C6; --accent-deep: #5E3A9E; --accent-soft: #2C1A47; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.55; font-size: 17px; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 0.35s ease, color 0.35s ease; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ---------- Layout ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: clamp(64px, 9vw, 124px); } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); font-weight: 500; } :root[data-theme="dark"] .eyebrow { color: var(--accent); } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; } .ital { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; } .btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.85em 1.4em; border-radius: 999px; font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 oklch(1 0 0 / 0.2) inset, var(--shadow-sm); } .btn-primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .btn-ghost:hover { border-color: var(--ink-soft); background: var(--surface-2); } .btn-lg { padding: 1.02em 1.7em; font-size: 16.5px; } .arrow { transition: transform 0.2s ease; } .btn:hover .arrow { transform: translateX(3px); } /* ---------- Placeholder (striped) ---------- */ .ph { position: relative; background: repeating-linear-gradient(135deg, var(--surface-2) 0 11px, transparent 11px 22px), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; color: var(--ink-faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; overflow: hidden; } .ph span { background: var(--bg); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); } /* image slots */ .slot { display: block; box-shadow: var(--shadow-sm); --img-slot-bg: var(--surface-2); } .card .slot.mini-ph { width: 100%; height: 210px; } /* lifestyle gallery */ .gallery { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 232px 232px; gap: 16px; } .gallery .slot { width: 100%; height: 100%; box-shadow: var(--shadow-md); } .g-large { grid-row: span 2; } @media (max-width: 700px) { .gallery { grid-template-columns: 1fr; grid-template-rows: none; } .g-large { grid-row: auto; } .gallery .slot { height: 230px; } } /* reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, background 0.3s ease; } .nav.scrolled { border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; gap: 28px; height: 70px; } .brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; } .brand-mark { width: 32px; height: 32px; border-radius: 9px; background: #fff; padding: 2px; object-fit: contain; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .nav-links { display: flex; gap: 4px; margin-left: 8px; } .nav-links a { padding: 8px 13px; border-radius: 9px; font-size: 15px; color: var(--ink-soft); font-weight: 500; transition: color 0.15s, background 0.15s; } .nav-links a:hover { color: var(--ink); background: var(--surface-2); } .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 6px; } .nav-cta .signin { padding: 8px 13px; font-size: 15px; font-weight: 500; color: var(--ink-soft); } .nav-cta .signin:hover { color: var(--ink); } .nav-toggle { display: none; margin-left: 4px; width: 42px; height: 42px; border-radius: 11px; flex-direction: column; gap: 4px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: var(--surface); flex-shrink: 0; } .nav-toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.22s ease, opacity 0.2s ease; } .nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .theme-toggle { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; color: var(--ink-soft); transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; flex-shrink: 0; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--surface-2); } .theme-toggle .svg-ic { width: 19px; height: 19px; } .theme-toggle .ic-moon { display: none; } .theme-toggle .ic-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: block; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(40px, 6vw, 72px); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -10% -20% auto -20%; height: 70%; background: radial-gradient(60% 80% at 70% 10%, var(--accent-soft), transparent 70%), radial-gradient(40% 60% at 12% 0%, var(--gold-soft), transparent 70%); opacity: 0.7; z-index: 0; pointer-events: none; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 64px); align-items: center; } .hero-pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 8px 6px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; color: var(--ink-soft); box-shadow: var(--shadow-sm); margin-bottom: 26px; } .hero-pill b { background: var(--accent-soft); color: var(--accent-deep); padding: 3px 9px; border-radius: 999px; font-weight: 600; font-size: 12px; } :root[data-theme="dark"] .hero-pill b { color: var(--ink); } .hero h1 { font-size: clamp(40px, 6.4vw, 76px); margin-bottom: 22px; } .hero h1 .ital { color: var(--accent-deep); } :root[data-theme="dark"] .hero h1 .ital { color: var(--accent); } .hero-sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); max-width: 33ch; margin-bottom: 32px; line-height: 1.5; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero-trust { margin-top: 34px; display: flex; align-items: center; gap: 14px; color: var(--ink-faint); font-size: 13.5px; } .hero-trust .stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; } .hero-trust .divider { width: 1px; height: 22px; background: var(--line-strong); } /* hero visual — catalog stack (extra block padding gives the float cards clear zones above/below the white card so they never overlap it) */ .hero-visual { position: relative; padding-block: 86px; } .catalog-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px; position: relative; } .catalog-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 16px; } .catalog-head .t { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; } .catalog-head .bal { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); background: var(--surface-2); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); } .gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; } .gift { aspect-ratio: 1.58; border-radius: 13px; position: relative; overflow: visible; color: oklch(0.99 0.01 80); box-shadow: var(--shadow-sm); } .gift-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .gift .cat { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.95; } .gift .amt { font-family: var(--font-display); font-weight: 700; font-size: 15px; } .gift-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; z-index: 2; pointer-events: none; background: linear-gradient(to top, oklch(0.2 0.02 40 / 0.55), transparent); } .gift .chip { position: absolute; top: 9px; right: 9px; width: 16px; height: 12px; border-radius: 3px; background: oklch(1 0 0 / 0.55); z-index: 3; } .g1 { background: linear-gradient(150deg, var(--accent), var(--accent-deep)); } .g2 { background: linear-gradient(150deg, oklch(0.62 0.12 250), oklch(0.48 0.11 255)); } .g3 { background: linear-gradient(150deg, var(--gold), oklch(0.66 0.11 62)); } .g4 { background: linear-gradient(150deg, oklch(0.60 0.11 165), oklch(0.46 0.09 170)); } .g5 { background: linear-gradient(150deg, oklch(0.55 0.13 320), oklch(0.44 0.12 320)); } .g6 { background: linear-gradient(150deg, oklch(0.40 0.02 250), oklch(0.28 0.015 255)); } .catalog-foot { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 13px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--line); } .catalog-foot .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft)); border: 2px solid var(--surface); } .catalog-foot .txt { font-size: 12.5px; color: var(--ink-soft); line-height: 1.3; } .catalog-foot .txt b { color: var(--ink); font-weight: 600; } .float-card { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 12px 14px; z-index: 2; display: flex; align-items: center; gap: 11px; } .float-card .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; } .float-card .l1 { font-size: 11px; color: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.03em; } .float-card .l2 { font-size: 14px; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.01em; } .fc-top { top: 6px; left: 2px; animation: floaty 6s ease-in-out infinite; } .fc-bot { bottom: 6px; right: 2px; animation: floaty 7s ease-in-out infinite 0.6s; } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (prefers-reduced-motion: reduce) { .fc-top, .fc-bot, .float-card { animation: none; } } /* ============================================================ LOGO CLOUD ============================================================ */ .cloud { padding-block: clamp(38px, 5vw, 58px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-sunk); } .cloud-lead { text-align: center; color: var(--ink-faint); font-size: 13.5px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 26px; } .cloud-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; align-items: center; } .hrms { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; opacity: 0.85; transition: opacity 0.2s, color 0.2s; } .hrms:hover { opacity: 1; color: var(--ink); } .hrms .dot { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 11px; color: var(--ink-faint); } /* HR-stack brand logos (favicon w/ lettered fallback) */ .brandlogo { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--ink-faint); } .brandlogo.has-img { background: #fff; } .brandlogo .bl-img { width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box; } .brandlogo.lg { width: 46px; height: 46px; border-radius: 12px; font-size: 19px; color: var(--accent-deep); background: var(--accent-soft); border-color: var(--line); } :root[data-theme="dark"] .brandlogo.lg { color: var(--ink); } .brandlogo.lg.has-img { background: #fff; } /* ============================================================ BOOK-A-DEMO MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: oklch(0.2 0.02 40 / 0.55); backdrop-filter: blur(6px); } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(460px, 100%); padding: 34px; position: relative; max-height: 92vh; overflow: auto; animation: modalIn 0.26s cubic-bezier(.2,.7,.2,1); } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } .modal-close { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; border-radius: 9px; font-size: 22px; line-height: 1; color: var(--ink-faint); display: grid; place-items: center; } .modal-close:hover { background: var(--surface-2); color: var(--ink); } .modal h3 { font-size: 26px; margin: 12px 0 8px; letter-spacing: -0.025em; } .modal-sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 22px; line-height: 1.5; } .field { display: block; margin-bottom: 14px; } .field span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; } .field input { width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field input::placeholder { color: var(--ink-faint); } .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field input.invalid { border-color: oklch(0.62 0.19 25); box-shadow: 0 0 0 3px oklch(0.62 0.19 25 / 0.14); } .field .err-msg { display: none; color: oklch(0.58 0.19 25); font-size: 12px; margin-top: 5px; } .field.show-err .err-msg { display: block; } .modal-submit { width: 100%; justify-content: center; margin-top: 6px; } .modal-note { text-align: center; color: var(--ink-faint); font-size: 12px; margin-top: 12px; } .modal-success { text-align: center; padding: 16px 0; } .modal-success .ok-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-size: 28px; margin: 0 auto 16px; } :root[data-theme="dark"] .modal-success .ok-ic { color: var(--ink); } .modal-success h3 { font-size: 23px; } .modal-success p { color: var(--ink-soft); font-size: 15px; margin-top: 8px; } .modal-success .btn { margin-top: 20px; } @media (max-width: 520px) { .modal { padding: 26px 22px; } } /* ============================================================ AUDIENCE SWITCH (Catalog: HR vs Employees) ============================================================ */ .aud-switch { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; margin: 0 auto 8px; } .aud-switch button { padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s, background 0.2s, box-shadow 0.2s; } .aud-switch button .ic { width: 17px; height: 17px; } .aud-switch button.on { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); } .aud-panel { display: none; } .aud-panel.on { display: block; animation: fadeUp 0.4s cubic-bezier(.2,.7,.2,1); } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .aud-intro { text-align: center; max-width: 640px; margin: 0 auto 40px; } .aud-intro h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 16px 0 12px; } .aud-intro p { color: var(--ink-soft); font-size: 17px; line-height: 1.5; } /* product cards — HR (awards, trophies, corporate gifts) */ .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .prod-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .prod-media { position: relative; aspect-ratio: 1.18; background: var(--surface-2); } .prod-media .slot, .prod-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .prod-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter: blur(6px); color: var(--ink); font-size: 11px; font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.03em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); } .prod-body { padding: 16px 17px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; } .prod-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); } .prod-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.2; } .prod-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .prod-price { font-family: var(--font-display); font-weight: 700; font-size: 16px; } .prod-price .from { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--ink-faint); } .prod-add { font-size: 13px; font-weight: 600; color: var(--accent-ink); background: var(--accent); display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent); transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; } .prod-add:hover { background: var(--accent-deep); color: var(--accent-ink); border-color: var(--accent-deep); transform: translateY(-1px); } :root[data-theme="dark"] .prod-add { color: var(--accent-ink); } /* voucher cards — Employees (coupons/vouchers vs points) */ .vouch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .vouch-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .vouch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .vouch-media { position: relative; aspect-ratio: 1.6; background: var(--surface-2); } .vouch-media .slot, .vouch-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .vouch-logo { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 11px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); box-shadow: var(--shadow-sm); overflow: hidden; } .vouch-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; } .vouch-off { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; font-family: var(--font-display); padding: 5px 10px; border-radius: 999px; box-shadow: var(--shadow-sm); } .vouch-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .vouch-brand { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; } .vouch-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.4; } .vouch-foot { margin-top: auto; padding-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); } .vouch-pts { display: flex; flex-direction: column; line-height: 1.15; } .vouch-pts b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--accent-deep); } :root[data-theme="dark"] .vouch-pts b { color: var(--accent); } .vouch-pts span { font-size: 11px; color: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.03em; } .vouch-redeem { font-size: 13px; font-weight: 600; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 999px; transition: background 0.15s, transform 0.15s; } .vouch-redeem:hover { background: var(--accent-deep); transform: translateY(-1px); } .pts-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 24px; margin-bottom: 30px; box-shadow: var(--shadow-sm); } .pts-banner .bal { display: flex; align-items: center; gap: 13px; } .pts-banner .bal .coin { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-soft); color: oklch(0.5 0.1 75); display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); } :root[data-theme="dark"] .pts-banner .bal .coin { color: var(--gold); } .pts-banner .bal .t .l1 { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .pts-banner .bal .t .l2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; } .pts-banner .hint { font-size: 13.5px; color: var(--ink-soft); } @media (max-width: 980px) { .prod-grid, .vouch-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .prod-grid, .vouch-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 440px) { .prod-grid, .vouch-grid { grid-template-columns: 1fr; } } /* ============================================================ BLOG — index + article ============================================================ */ .blog-featured { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 3vw, 44px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .blog-featured .bf-media { position: relative; min-height: 320px; align-self: stretch; } .blog-featured .bf-media image-slot, .blog-featured .bf-media .slot { position: absolute; inset: 0; width: 100%; height: 100%; } .blog-featured .bf-body { padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0; } .post-tag { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; font-weight: 500; } :root[data-theme="dark"] .post-tag { color: var(--ink); } .blog-featured h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 16px 0 14px; letter-spacing: -0.025em; line-height: 1.08; } .blog-featured p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.55; margin-bottom: 20px; max-width: 46ch; } .post-meta { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 13.5px; } .post-meta .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft)); border: 1px solid var(--line); overflow: hidden; flex-shrink: 0; } .post-meta .av img { width: 100%; height: 100%; object-fit: cover; } .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .post-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .post-card .pc-media { position: relative; aspect-ratio: 1.7; background: var(--surface-2); } .post-card .pc-media image-slot, .post-card .pc-media .slot { position: absolute; inset: 0; width: 100%; height: 100%; } .post-card .pc-body { padding: 18px 19px 20px; display: flex; flex-direction: column; gap: 11px; flex: 1; } .post-card h3 { font-size: 19.5px; letter-spacing: -0.02em; line-height: 1.18; } .post-card .pc-ex { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } .post-card .post-meta { margin-top: auto; padding-top: 4px; font-size: 12.5px; } .post-card a.stretch { position: absolute; inset: 0; z-index: 3; } @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } .blog-featured { grid-template-columns: 1fr; } .blog-featured .bf-media { min-height: 240px; } .blog-featured .bf-body { padding: 0 clamp(22px,4vw,32px) clamp(28px,5vw,36px); } } @media (max-width: 580px) { .blog-grid { grid-template-columns: 1fr; } } /* article */ .article { max-width: 760px; margin-inline: auto; } .article-hero { text-align: center; padding-bottom: 8px; } .article-hero .post-tag { margin-bottom: 18px; } .article-hero h1 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px; } .article-hero .post-meta { justify-content: center; } .article-cover { width: 100%; aspect-ratio: 2.1; border-radius: var(--radius-lg); overflow: hidden; margin: 34px 0; position: relative; background: var(--surface-2); box-shadow: var(--shadow-md); } .article-cover image-slot, .article-cover .slot { position: absolute; inset: 0; width: 100%; height: 100%; } .article-body { font-size: 18px; line-height: 1.72; color: var(--ink); } .article-body > p { margin-bottom: 24px; color: var(--ink-soft); } .article-body .lead { font-size: 21px; line-height: 1.6; color: var(--ink); font-weight: 500; } .article-body h2 { font-size: clamp(24px, 3vw, 31px); letter-spacing: -0.02em; margin: 42px 0 16px; } .article-body h3 { font-size: 21px; margin: 30px 0 10px; } .article-body ul, .article-body ol { margin: 0 0 24px; padding-left: 4px; list-style: none; display: grid; gap: 12px; } .article-body ul li { position: relative; padding-left: 30px; color: var(--ink-soft); } .article-body ul li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .article-body ol { counter-reset: ol; } .article-body ol li { position: relative; padding-left: 38px; color: var(--ink-soft); counter-increment: ol; } .article-body ol li::before { content: counter(ol); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-family: var(--font-display); font-weight: 700; font-size: 13px; display: grid; place-items: center; } :root[data-theme="dark"] .article-body ol li::before { color: var(--ink); } .article-body strong { color: var(--ink); font-weight: 600; } .article-body blockquote { margin: 32px 0; padding: 22px 26px; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .article-body blockquote p { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.5; color: var(--ink); margin: 0; } .article-share { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .article-share .btn { font-size: 14.5px; } .blog-back { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 14.5px; font-weight: 500; margin-bottom: 8px; } .blog-back:hover { color: var(--accent-deep); } :root[data-theme="dark"] .blog-back:hover { color: var(--accent); } .related h2 { font-size: 26px; margin-bottom: 24px; letter-spacing: -0.02em; } /* ============================================================ FEATURES ============================================================ */ .sec-head { max-width: 640px; margin-bottom: 52px; } .sec-head.center { margin-inline: auto; text-align: center; } .sec-head h2 { font-size: clamp(30px, 4vw, 47px); margin-top: 14px; margin-bottom: 16px; } .sec-head p { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-soft); line-height: 1.5; } .feat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .card .ic-box { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; background: var(--accent-soft); color: var(--accent-deep); } :root[data-theme="dark"] .card .ic-box { color: var(--ink); } .card h3 { font-size: 20px; margin-bottom: 9px; letter-spacing: -0.02em; } .card p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; } .card.span-6 { grid-column: span 6; } .card.span-4 { grid-column: span 4; } .card.span-8 { grid-column: span 8; } .card.feature-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; overflow: hidden; } .card.feature-wide .copy { padding: 4px; } .svg-ic { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* mini visuals inside cards */ .mini-ph { border-radius: var(--radius-sm); min-height: 150px; } .flag-row { display: flex; flex-wrap: wrap; gap: 7px; } .flag { font-size: 12px; font-family: var(--font-mono); padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); } /* ============================================================ HOW IT WORKS ============================================================ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; } .step { position: relative; padding-top: 30px; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--accent-deep); font-weight: 500; letter-spacing: 0.05em; } :root[data-theme="dark"] .step::before { color: var(--accent); } .step .line { height: 1px; background: var(--line-strong); margin: 12px 0 20px; position: relative; } .step .line::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .step h3 { font-size: 22px; margin-bottom: 10px; } .step p { color: var(--ink-soft); font-size: 15.5px; } /* ============================================================ CATALOG SHOWCASE ============================================================ */ .cat-band { background: var(--bg-sunk); border-block: 1px solid var(--line); } .cat-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 12px; } .tile { aspect-ratio: 1.5; border-radius: var(--radius-sm); position: relative; overflow: visible; color: oklch(0.99 0.01 80); box-shadow: var(--shadow-sm); transition: transform 0.22s ease, box-shadow 0.22s ease; } .tile:hover { transform: translateY(-4px) scale(1.015); box-shadow: var(--shadow-md); } .tile-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .tile-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; z-index: 2; pointer-events: none; background: linear-gradient(to top, oklch(0.2 0.02 40 / 0.55), transparent 92%); } .tile-cap .cat { font-size: 13px; font-weight: 600; } .tile-cap .meta { font-size: 11px; font-family: var(--font-mono); opacity: 0.9; } /* Keep the small reward tiles editable: round the image via the slot's own frame so the tile no longer needs overflow:hidden — that lets each slot's Replace/Remove controls show. */ .gift-slot::part(frame) { border-radius: 13px; } .tile-slot::part(frame) { border-radius: var(--radius-sm); } .gift-cap { border-radius: 0 0 13px 13px; } .tile-cap { border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .gift:hover, .tile:hover { z-index: 6; } .cat-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; align-items: center; color: var(--ink-soft); font-size: 14.5px; } .cat-meta b { color: var(--ink); font-family: var(--font-display); } /* ============================================================ AUTOMATION / MOMENTS ============================================================ */ .moments-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 4vw, 60px); align-items: center; } .timeline { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 10px; } .tl-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: var(--radius-sm); transition: background 0.2s; } .tl-row + .tl-row { border-top: 1px solid var(--line); } .tl-row:hover { background: var(--surface-2); } .tl-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-deep); } :root[data-theme="dark"] .tl-ic { color: var(--ink); } .tl-ic.gold { background: var(--gold-soft); color: oklch(0.5 0.1 75); } :root[data-theme="dark"] .tl-ic.gold { color: var(--gold); } .tl-txt { flex: 1; } .tl-txt .a { font-weight: 600; font-size: 15.5px; font-family: var(--font-display); letter-spacing: -0.01em; } .tl-txt .b { font-size: 13px; color: var(--ink-faint); font-family: var(--font-mono); } .tl-status { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); white-space: nowrap; } :root[data-theme="dark"] .tl-status { color: var(--ink); } .tl-status.sent { background: oklch(0.92 0.06 150); color: oklch(0.42 0.1 155); } :root[data-theme="dark"] .tl-status.sent { background: oklch(0.34 0.05 155); color: oklch(0.85 0.08 150); } .moments-list { list-style: none; padding: 0; display: grid; gap: 18px; } .moments-list li { display: flex; gap: 14px; align-items: flex-start; } .moments-list .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; } :root[data-theme="dark"] .moments-list .tick { color: var(--ink); } .moments-list .a { font-weight: 600; font-size: 17px; font-family: var(--font-display); letter-spacing: -0.01em; } .moments-list .b { color: var(--ink-soft); font-size: 15px; } /* ============================================================ STATS BAND ============================================================ */ .stats { background: linear-gradient(150deg, var(--accent-soft), var(--surface) 78%); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 60px); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } :root[data-theme="dark"] .stats { background: linear-gradient(150deg, var(--accent-soft), var(--surface-2) 78%); border: 1px solid var(--line); } .stats::before { content: ""; position: absolute; inset: auto -10% -40% 40%; height: 80%; background: radial-gradient(50% 60% at 50% 50%, var(--accent), transparent 70%); opacity: 0.12; } .stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .stat .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.5vw, 54px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .stat .n .ital { color: var(--accent-deep); } :root[data-theme="dark"] .stat .n .ital { color: var(--accent); } .stat .l { margin-top: 10px; color: var(--ink-soft); font-size: 14.5px; } /* ============================================================ INTEGRATION DEEP-DIVE ============================================================ */ .integrate { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 64px); align-items: center; } .code-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; } .code-head { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .code-head .dot { width: 11px; height: 11px; border-radius: 50%; } .code-head .fn { margin-left: 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); } .code-body { padding: 20px; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; overflow-x: auto; } .code-body .ln { color: var(--ink-faint); } .tok-key { color: var(--accent-deep); } :root[data-theme="dark"] .tok-key { color: var(--accent); } .tok-str { color: oklch(0.52 0.1 150); } :root[data-theme="dark"] .tok-str { color: oklch(0.75 0.1 150); } .tok-num { color: oklch(0.55 0.12 250); } :root[data-theme="dark"] .tok-num { color: oklch(0.72 0.1 250); } .tok-com { color: var(--ink-faint); font-style: italic; } .int-list { display: grid; gap: 16px; margin-top: 26px; } .int-list li { list-style: none; display: flex; gap: 13px; } .int-list .k { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex-shrink: 0; } :root[data-theme="dark"] .int-list .k { color: var(--ink); } .int-list .a { font-weight: 600; font-family: var(--font-display); } .int-list .b { color: var(--ink-soft); font-size: 15px; } /* ============================================================ TESTIMONIAL ============================================================ */ .quote-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(30px, 4vw, 56px); align-items: center; } .quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.025em; line-height: 1.25; } .quote .ital { color: var(--accent-deep); } :root[data-theme="dark"] .quote .ital { color: var(--accent); } .quote-by { margin-top: 26px; display: flex; align-items: center; gap: 13px; } .quote-by .av { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft)); border: 1px solid var(--line); } .quote-by .n { font-weight: 600; font-family: var(--font-display); } .quote-by .r { font-size: 13.5px; color: var(--ink-faint); } .quote-side { display: grid; gap: 14px; } .qstat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .qstat .n { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.03em; color: var(--accent-deep); } :root[data-theme="dark"] .qstat .n { color: var(--accent); } .qstat .l { color: var(--ink-soft); font-size: 14.5px; margin-top: 4px; } /* ============================================================ FINAL CTA ============================================================ */ .cta { background: linear-gradient(150deg, var(--accent), var(--accent-deep)); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 80px); text-align: center; position: relative; overflow: hidden; color: var(--accent-ink); } .cta::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 50%; height: 120%; background: radial-gradient(circle, oklch(1 0 0 / 0.18), transparent 65%); } .cta::after { content: ""; position: absolute; inset: auto auto -40% -10%; width: 45%; height: 110%; background: radial-gradient(circle, var(--gold), transparent 65%); opacity: 0.4; } .cta h2 { font-size: clamp(30px, 4.5vw, 54px); margin-bottom: 18px; position: relative; } .cta h2 .ital { color: oklch(0.97 0.05 85); } .cta p { font-size: clamp(16px, 1.5vw, 19px); opacity: 0.92; max-width: 44ch; margin: 0 auto 32px; position: relative; } .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; } .cta .btn-primary { background: var(--accent-ink); color: var(--accent-deep); } .cta .btn-primary:hover { background: oklch(0.99 0.01 80); } .cta .btn-ghost { color: var(--accent-ink); border-color: oklch(1 0 0 / 0.4); } .cta .btn-ghost:hover { background: oklch(1 0 0 / 0.12); border-color: oklch(1 0 0 / 0.7); } .cta-note { margin-top: 20px; font-size: 13.5px; opacity: 0.8; position: relative; font-family: var(--font-mono); } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px) 36px; background: var(--bg-sunk); } .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px; } .foot-brand .brand { margin-bottom: 14px; } .foot-tagline { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--accent-deep); margin-bottom: 8px; letter-spacing: -0.01em; } :root[data-theme="dark"] .foot-tagline { color: var(--accent); } .foot-brand p { color: var(--ink-soft); font-size: 14.5px; max-width: 30ch; } .foot-col h4 { font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; font-weight: 500; } .foot-col a { display: block; color: var(--ink-soft); font-size: 14.5px; padding: 5px 0; transition: color 0.15s; } .foot-col a:hover { color: var(--accent-deep); } :root[data-theme="dark"] .foot-col a:hover { color: var(--accent); } .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 13.5px; flex-wrap: wrap; } .foot-bottom .badges { display: flex; gap: 10px; } .foot-bottom .badge { font-family: var(--font-mono); font-size: 11.5px; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; } /* ============================================================ INTERIOR PAGES ============================================================ */ .nav-links a.active { color: var(--ink); background: var(--surface-2); } /* page hero */ .page-hero { position: relative; overflow: hidden; padding-top: clamp(46px, 6vw, 78px); padding-bottom: clamp(30px, 4vw, 48px); } .page-hero::before { content: ""; position: absolute; inset: -20% -20% auto -20%; height: 90%; background: radial-gradient(50% 80% at 75% 0%, var(--accent-soft), transparent 70%), radial-gradient(40% 70% at 10% 0%, var(--gold-soft), transparent 70%); opacity: 0.7; z-index: 0; pointer-events: none; } .page-hero .wrap { position: relative; z-index: 1; } .page-hero h1 { font-size: clamp(34px, 5.2vw, 62px); margin: 16px 0 18px; max-width: 17ch; } .page-hero h1 .ital { color: var(--accent-deep); } :root[data-theme="dark"] .page-hero h1 .ital { color: var(--accent); } .page-hero .lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); max-width: 54ch; line-height: 1.5; } .page-hero .hero-actions { margin-top: 28px; } /* alternating detail rows */ .detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; } .detail + .detail { margin-top: clamp(48px, 6vw, 90px); } .detail.rev .detail-media { order: -1; } .detail-media .slot, .detail-media .ph { width: 100%; height: clamp(260px, 32vw, 380px); border-radius: var(--radius); } .detail h2 { font-size: clamp(27px, 3.4vw, 42px); margin: 12px 0 14px; letter-spacing: -0.025em; } .detail .lede { color: var(--ink-soft); font-size: 17.5px; line-height: 1.55; margin-bottom: 20px; } .detail .checks { list-style: none; padding: 0; display: grid; gap: 12px; } .detail .checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink-soft); } .detail .checks svg { color: var(--accent-deep); flex-shrink: 0; margin-top: 2px; } :root[data-theme="dark"] .detail .checks svg { color: var(--accent); } /* pricing */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } .price { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; position: relative; display: flex; flex-direction: column; } .price.feat { border-color: var(--accent); box-shadow: var(--shadow-md); } .price .tag { position: absolute; top: -12px; left: 28px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; font-family: var(--font-mono); letter-spacing: 0.03em; } .price h3 { font-size: 22px; } .price .desc { color: var(--ink-soft); font-size: 14.5px; margin: 7px 0 18px; min-height: 40px; } .price .amt { font-family: var(--font-display); font-weight: 700; font-size: 46px; letter-spacing: -0.03em; line-height: 1; } .price .amt .per { font-size: 15px; color: var(--ink-faint); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; } .price .amt.custom { font-size: 34px; } .price > .btn { width: 100%; justify-content: center; margin: 22px 0; } .price ul { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: auto; } .price li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-soft); align-items: flex-start; } .price li svg { color: var(--accent-deep); flex-shrink: 0; margin-top: 2px; } :root[data-theme="dark"] .price li svg { color: var(--accent); } .price-note { text-align: center; color: var(--ink-faint); font-size: 14px; margin-top: 26px; } /* integration card grid */ .int-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .int-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 13px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .int-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .int-logo { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--accent-deep); } :root[data-theme="dark"] .int-logo { color: var(--ink); } .int-card .name { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; } .int-card .cat { font-size: 12.5px; color: var(--ink-faint); font-family: var(--font-mono); margin-top: -6px; } .int-card.live .name::after { content: "● live"; font-family: var(--font-mono); font-size: 10px; color: oklch(0.6 0.12 150); margin-left: 8px; vertical-align: middle; font-weight: 500; } /* faq */ .faq { display: grid; max-width: 760px; margin-inline: auto; } .faq details { border-bottom: 1px solid var(--line); padding: 22px 4px; } .faq summary { font-family: var(--font-display); font-weight: 600; font-size: 18px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent-deep); font-size: 24px; line-height: 1; flex-shrink: 0; } :root[data-theme="dark"] .faq summary::after { color: var(--accent); } .faq details[open] summary::after { content: "\2013"; } .faq p { margin-top: 13px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; max-width: 64ch; } /* catalog filter chips */ .filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .fchip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 500; color: var(--ink-soft); background: var(--surface); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .fchip.on, .fchip:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* type cards (catalog) */ .type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 860px) { .detail { grid-template-columns: 1fr; } .detail.rev .detail-media { order: 0; } .price-grid, .type-grid { grid-template-columns: 1fr; } .int-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-sub { max-width: none; } .integrate, .moments-grid, .quote-wrap { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } .card.span-6, .card.span-4, .card.span-8 { grid-column: span 6; } .cat-tiles { grid-template-columns: repeat(3, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } } /* mobile nav menu */ @media (max-width: 820px) { .nav-toggle { display: flex; } .nav-cta .btn-primary { display: none; } .nav-links { position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; gap: 2px; background: color-mix(in oklab, var(--bg) 97%, transparent); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 12px var(--gut) 18px; display: none; } .nav.menu-open .nav-links { display: flex; } .nav-links a { padding: 13px 14px; font-size: 16.5px; border-radius: 11px; } .nav-links a.active { background: var(--accent-soft); color: var(--accent-deep); } } :root[data-theme="dark"] .nav-links a.active { color: var(--ink); } @media (max-width: 600px) { body { font-size: 16px; } .steps { grid-template-columns: 1fr; } .feat-grid .card { grid-column: span 12 !important; } .card.feature-wide { grid-template-columns: 1fr; } .cat-tiles { grid-template-columns: repeat(2, 1fr); } .foot-grid { grid-template-columns: 1fr; } .quote-side { grid-template-columns: 1fr 1fr; display: grid; } .float-card { display: none; } .nav-cta .signin { display: none; } } /* ============================================================ FUTURISTIC ENHANCEMENT LAYER (global, theme-aware) ============================================================ */ :root{ --violet:#6D28D9; --magenta:#C0436A; --grad-accent: linear-gradient(120deg, #2A124D 0%, #6D28D9 46%, #C0436A 100%); --grad-accent-2: linear-gradient(120deg, #6D28D9 0%, #C0436A 100%); --glow: 0 10px 30px -10px color-mix(in oklab, var(--violet) 60%, transparent); --glow-strong: 0 0 0 1px color-mix(in oklab, var(--violet) 16%, transparent), 0 18px 48px -12px color-mix(in oklab, var(--violet) 62%, transparent); --grid-line: color-mix(in oklab, var(--violet) 12%, transparent); } :root[data-theme="dark"]{ --violet:#9F67FF; --magenta:#FF7BA8; --grad-accent: linear-gradient(120deg, #7E54C6 0%, #9F67FF 46%, #FF7BA8 100%); --grad-accent-2: linear-gradient(120deg, #9F67FF 0%, #FF7BA8 100%); --glow: 0 10px 34px -10px color-mix(in oklab, var(--violet) 70%, transparent); --glow-strong: 0 0 0 1px color-mix(in oklab, var(--violet) 28%, transparent), 0 20px 54px -12px color-mix(in oklab, var(--violet) 72%, transparent); --grid-line: color-mix(in oklab, var(--violet) 20%, transparent); } /* aurora + grid backdrop on the document, behind all content */ html { background: var(--bg); } body { background: transparent; position: relative; z-index: 1; } html::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(42% 52% at 10% 4%, color-mix(in oklab, var(--violet) 22%, transparent), transparent 70%), radial-gradient(40% 48% at 92% 0%, color-mix(in oklab, var(--magenta) 18%, transparent), transparent 70%), radial-gradient(60% 50% at 50% 110%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 72%); filter: saturate(1.15); animation: auroraDrift 22s ease-in-out infinite alternate; } html::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 66px 66px; -webkit-mask-image: radial-gradient(130% 90% at 50% -10%, #000 22%, transparent 72%); mask-image: radial-gradient(130% 90% at 50% -10%, #000 22%, transparent 72%); } @keyframes auroraDrift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(0,-2.5%,0) scale(1.08); } } @media (prefers-reduced-motion: reduce){ html::before { animation: none; } } /* keep opaque bands but let them feel layered */ .cat-band { background: color-mix(in oklab, var(--bg-sunk) 90%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .cloud { background: color-mix(in oklab, var(--bg-sunk) 88%, transparent); } /* gradient text accents */ .eyebrow, .hero h1 .ital, .page-hero h1 .ital, .cta h2 .ital, .quote .ital, .sec-head h2 .ital { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } :root[data-theme="dark"] .eyebrow { -webkit-text-fill-color: transparent; } .cta h2 .ital { background: linear-gradient(120deg,#fff, #ffe6c9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* primary buttons: gradient + glow + shine sweep */ .btn-primary { background: var(--grad-accent); background-size: 180% 180%; box-shadow: var(--glow); position: relative; overflow: hidden; border: none; } .btn-primary:hover { background-position: 100% 0; box-shadow: var(--glow-strong); transform: translateY(-2px); } .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.38) 50%, transparent 72%); transform: translateX(-130%); transition: transform .6s ease; } .btn-primary:hover::after { transform: translateX(130%); } .cta .btn-primary { background: var(--accent-ink); color: var(--accent-deep); } .cta .btn-primary:hover { background: #fff; } /* nav: glassier + gradient hairline */ .nav { background: color-mix(in oklab, var(--bg) 72%, transparent); } .nav.scrolled { border-bottom-color: transparent; box-shadow: 0 1px 0 color-mix(in oklab, var(--violet) 22%, transparent), 0 10px 30px -18px color-mix(in oklab, var(--violet) 60%, transparent); } .nav-links a.active { background: color-mix(in oklab, var(--violet) 14%, transparent); color: var(--ink); } .brand-mark { box-shadow: var(--glow), var(--shadow-sm); } /* hero pill upgrade */ .hero-pill { background: color-mix(in oklab, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: color-mix(in oklab, var(--violet) 24%, var(--line)); box-shadow: var(--glow); } .hero-pill b { background: var(--grad-accent); color: #fff; } /* glass treatment for floating / showcase surfaces */ .catalog-card, .timeline, .float-card, .code-card, .modal { background: color-mix(in oklab, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-color: color-mix(in oklab, var(--violet) 16%, var(--line)); } .catalog-card { box-shadow: var(--glow-strong); } /* card hover: gradient border glow */ .card, .prod-card, .vouch-card, .post-card, .int-card, .price, .qstat { position: relative; isolation: isolate; } .card::after, .prod-card::after, .vouch-card::after, .post-card::after, .int-card::after, .price::after, .qstat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: var(--grad-accent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .28s ease; pointer-events: none; z-index: 2; } .card:hover::after, .prod-card:hover::after, .vouch-card:hover::after, .post-card:hover::after, .int-card:hover::after, .price:hover::after, .qstat:hover::after { opacity: 1; } .card:hover, .prod-card:hover, .vouch-card:hover, .post-card:hover, .int-card:hover, .price:hover { box-shadow: var(--glow-strong); border-color: transparent; } .price.feat { box-shadow: var(--glow-strong); } .price.feat::after { opacity: 1; } .card .ic-box, .tl-ic, .moments-list .tick, .int-list .k, .pts-banner .bal .coin { box-shadow: var(--glow); } /* stats band: neon gradient numerals + glow frame */ .stats { box-shadow: var(--glow-strong); } .stat .n { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 4px 18px color-mix(in oklab, var(--violet) 50%, transparent)); } .stat .n .ital { -webkit-text-fill-color: var(--gold); color: var(--gold); } /* chips / pills / actions → gradient */ .fchip.on, .fchip:hover { background: var(--grad-accent); border-color: transparent; color: #fff; box-shadow: var(--glow); } .aud-switch { border-color: color-mix(in oklab, var(--violet) 18%, var(--line)); } .aud-switch button.on { background: var(--grad-accent); box-shadow: var(--glow); } .vouch-redeem, .vouch-off { background: var(--grad-accent); } .vouch-redeem:hover { background: var(--grad-accent); background-position: 100% 0; box-shadow: var(--glow); } .prod-add:hover { background: var(--grad-accent); border-color: transparent; color: #fff; } .tl-status { box-shadow: var(--glow); } /* CTA band: gradient + grid sheen */ .cta { background: var(--grad-accent); box-shadow: var(--glow-strong); } .cta::after { background: radial-gradient(circle, color-mix(in oklab, var(--magenta) 70%, transparent), transparent 65%); opacity: .5; } /* reveal: add blur-in + slight scale */ .reveal { filter: blur(7px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { filter: none; } @media (prefers-reduced-motion: reduce){ .reveal { filter: none; } } /* article links + featured glass */ .blog-featured { background: color-mix(in oklab, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--glow-strong); } .article-cover { box-shadow: var(--glow-strong); } .article-body blockquote { background: color-mix(in oklab, var(--violet) 8%, var(--surface-2)); } /* tasteful focus ring on inputs */ .field input:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet) 22%, transparent); border-color: var(--violet); } /* ============================================================ CATEGORY BRAND DIRECTORY (employee category → brand pages) ============================================================ */ .crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-faint); margin-bottom: 16px; flex-wrap: wrap; } .crumb a { color: var(--ink-soft); font-weight: 500; } .crumb a:hover { color: var(--accent-deep); } :root[data-theme="dark"] .crumb a:hover { color: var(--accent); } .crumb .sep { opacity: 0.5; } .prod-card > a.stretch { position: absolute; inset: 0; z-index: 3; } .brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .brand-card { position: relative; isolation: isolate; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .brand-card:hover { transform: translateY(-4px); box-shadow: var(--glow-strong); border-color: transparent; } .brand-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: var(--grad-accent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .28s ease; pointer-events: none; z-index: 2; } .brand-card:hover::after { opacity: 1; } .brand-head { aspect-ratio: 1.9; display: grid; place-items: center; position: relative; background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft)); } .brand-logo-lg { width: 66px; height: 66px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow-md); overflow: hidden; font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--ink); } .brand-logo-lg img { width: 100%; height: 100%; object-fit: contain; padding: 9px; box-sizing: border-box; } .brand-off { position: absolute; top: 12px; right: 12px; background: var(--grad-accent); color: #fff; font-size: 11.5px; font-weight: 700; font-family: var(--font-display); padding: 5px 10px; border-radius: 999px; box-shadow: var(--glow); } .brand-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; } .brand-type { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.02em; } .brand-foot { margin-top: auto; padding-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); } .brand-pts { display: flex; flex-direction: column; line-height: 1.15; } .brand-pts b { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-pts span { font-size: 11px; color: var(--ink-faint); font-family: var(--font-mono); } .brand-redeem { font-size: 13px; font-weight: 600; background: var(--grad-accent); color: #fff; padding: 8px 14px; border-radius: 999px; box-shadow: var(--glow); transition: transform .15s ease; } .brand-redeem:hover { transform: translateY(-1px); } @media (max-width: 980px){ .brand-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px){ .brand-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 440px){ .brand-grid { grid-template-columns: 1fr; } } /* brand search */ .search-wrap { max-width: 440px; margin: 0 auto 30px; position: relative; } .search-wrap input { width: 100%; padding: 13px 18px 13px 46px; border-radius: 999px; border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; } .search-wrap input::placeholder { color: var(--ink-faint); } .search-wrap input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet) 22%, transparent); } .search-wrap .s-ic { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); width: 18px; height: 18px; } .brand-empty { text-align: center; color: var(--ink-faint); padding: 44px 0; display: none; font-size: 15px; } /* redeem modal: denominations + voucher code */ .redeem-brand { display: flex; align-items: center; gap: 13px; margin: 4px 0 14px; } .redeem-brand .rb-logo { width: 54px; height: 54px; border-radius: 14px; background: #fff; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); box-shadow: var(--shadow-sm); flex-shrink: 0; } .redeem-brand .rb-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; box-sizing: border-box; } .redeem-brand .rb-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.1; } .redeem-brand .rb-type { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); margin-top: 2px; } .denoms { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; } .denom { padding: 9px 14px; border-radius: 13px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 700; font-size: 15px; font-family: var(--font-display); cursor: pointer; transition: all .15s ease; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 82px; } .denom small { font-size: 10.5px; font-weight: 500; color: var(--ink-faint); font-family: var(--font-mono); } .denom.on { border-color: transparent; background: var(--grad-accent); color: #fff; box-shadow: var(--glow); } .denom.on small { color: rgba(255,255,255,.85); } .redeem-bal { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-soft); margin-bottom: 16px; } .redeem-bal b { font-family: var(--font-display); color: var(--ink); } .redeem-warn { color: oklch(0.58 0.19 25); font-size: 13px; margin: -8px 0 14px; display: none; } .voucher-code { font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.14em; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 14px; text-align: center; margin: 18px 0; color: var(--ink); } #rbConfirm:disabled { opacity: 0.45; cursor: not-allowed; } /* ============================================================ EDITABLE BRAND LOGO (nav + footer) — image-slot ============================================================ */ .brand { position: relative; } .brand-logo-slot { width: 32px; height: 32px; flex-shrink: 0; --img-slot-bg: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } .brand-logo-slot::part(frame) { background: #fff; } /* ============================================================ DEMO MODAL — country code + phone row, themed scrim ============================================================ */ .modal-overlay { background: color-mix(in oklab, var(--accent-deep) 32%, oklch(0.18 0.02 40 / 0.62)); } .field-inline { display: flex; gap: 10px; } .field-inline .cc-wrap { flex: 0 0 132px; } .field select { width: 100%; padding: 12px 12px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; transition: border-color 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field-inline .phone-wrap { flex: 1 1 auto; } /* solid, on-theme PURPLE modal surface (override the glass treatment so the page doesn't bleed through) */ .modal { background: var(--accent-soft); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: color-mix(in oklab, var(--accent) 24%, var(--line)); box-shadow: var(--shadow-lg); } .modal .field input, .modal .field select { background: var(--surface); } /* ============================================================ ABOUT — mission / vision / values / story / leadership ============================================================ */ .lead-band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; } .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .mv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; position: relative; overflow: hidden; } .mv-card .ic-box { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; background: var(--accent-soft); color: var(--accent-deep); } :root[data-theme="dark"] .mv-card .ic-box { color: var(--ink); } .mv-card h3 { font-size: 23px; margin-bottom: 10px; letter-spacing: -0.02em; } .mv-card p { color: var(--ink-soft); font-size: 16px; line-height: 1.55; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .value h3 { font-size: 19px; margin: 14px 0 8px; letter-spacing: -0.02em; } .value p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; } .value .ic-box { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); } :root[data-theme="dark"] .value .ic-box { color: var(--ink); } @media (max-width: 820px){ .lead-band, .mv-grid, .values-grid { grid-template-columns: 1fr; } } /* story timeline */ .story { max-width: 760px; margin-inline: auto; } .story-step { display: grid; grid-template-columns: 120px 1fr; gap: 26px; padding: 26px 0; border-top: 1px solid var(--line); align-items: start; } .story-step:first-of-type { border-top: none; } .story-step .yr { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--accent-deep); } :root[data-theme="dark"] .story-step .yr { color: var(--accent); } .story-step h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.02em; } .story-step p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; } @media (max-width: 560px){ .story-step { grid-template-columns: 1fr; gap: 6px; } } /* leadership proof badges */ .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .proof { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-align: center; } .proof .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; color: var(--accent-deep); line-height: 1; } :root[data-theme="dark"] .proof .n { color: var(--accent); } .proof .l { color: var(--ink-soft); font-size: 13.5px; margin-top: 8px; line-height: 1.4; } @media (max-width: 720px){ .proof-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ CAREERS — perks, life-at, no openings ============================================================ */ .perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .perk { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .perk:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .perk .ic-box { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--accent-soft); color: var(--accent-deep); } :root[data-theme="dark"] .perk .ic-box { color: var(--ink); } .perk h3 { font-size: 18.5px; margin-bottom: 8px; letter-spacing: -0.02em; } .perk p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } .life-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 14px; } .life-gallery image-slot { width: 100%; height: 100%; box-shadow: var(--shadow-sm); } .life-gallery .tall { grid-row: span 2; } .life-gallery .wide { grid-column: span 2; } @media (max-width: 760px){ .perks-grid { grid-template-columns: 1fr; } .life-gallery { grid-template-columns: repeat(2, 1fr); } } .no-openings { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 60px); max-width: 720px; margin-inline: auto; box-shadow: var(--shadow-sm); } .no-openings .ic-box { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 20px; background: var(--accent-soft); color: var(--accent-deep); } :root[data-theme="dark"] .no-openings .ic-box { color: var(--ink); } .no-openings h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; } .no-openings p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.55; max-width: 48ch; margin: 0 auto 24px; } /* ============================================================ CONTACT — detail cards + socials ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-card { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .contact-card .ic-box { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-deep); } :root[data-theme="dark"] .contact-card .ic-box { color: var(--ink); } .contact-card .ct-k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; } .contact-card .ct-v { font-size: 17px; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.35; } .contact-card .ct-v a:hover { color: var(--accent-deep); } :root[data-theme="dark"] .contact-card .ct-v a:hover { color: var(--accent); } .contact-card .ct-sub { color: var(--ink-soft); font-size: 14px; margin-top: 4px; } .social-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .social-link { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 14.5px; color: var(--ink); transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .social-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); } .social-link .si { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; } .social-link .si svg { width: 18px; height: 18px; fill: currentColor; stroke: none; } .si.li { background: #0A66C2; } .si.ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100%); } .si.fb { background: #1877F2; } .si.x { background: #000; } :root[data-theme="dark"] .si.x { background: #fff; color: #000; } .social-link .sh { display: flex; flex-direction: column; line-height: 1.2; } .social-link .sh .sp { font-size: 12px; color: var(--ink-faint); font-weight: 500; } @media (max-width: 720px){ .contact-grid { grid-template-columns: 1fr; } } /* ============================================================ DOCS / SECURITY / HELP / STATUS utility pages ============================================================ */ .util-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .util-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: block; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .util-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .util-card .ic-box { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--accent-soft); color: var(--accent-deep); } :root[data-theme="dark"] .util-card .ic-box { color: var(--ink); } .util-card h3 { font-size: 19px; margin-bottom: 8px; letter-spacing: -0.02em; } .util-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } .status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } .status-row + .status-row { margin-top: 12px; } .status-row .sv-name { font-weight: 600; font-family: var(--font-display); font-size: 16px; } .status-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; font-family: var(--font-mono); color: oklch(0.42 0.1 155); } :root[data-theme="dark"] .status-pill { color: oklch(0.82 0.1 150); } .status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: oklch(0.65 0.16 150); box-shadow: 0 0 0 4px oklch(0.65 0.16 150 / 0.18); } .status-banner { display: flex; align-items: center; gap: 14px; background: oklch(0.95 0.05 150); border: 1px solid oklch(0.8 0.08 150); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 30px; } :root[data-theme="dark"] .status-banner { background: oklch(0.32 0.05 155); border-color: oklch(0.42 0.06 155); } .status-banner .big-dot { width: 14px; height: 14px; border-radius: 50%; background: oklch(0.6 0.16 150); flex-shrink: 0; } .status-banner b { font-family: var(--font-display); font-size: 17px; } @media (max-width: 720px){ .util-grid { grid-template-columns: 1fr; } } /* ============================================================ CUSTOMERS — logos + case stat cards ============================================================ */ .cust-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .cust-logo { aspect-ratio: 1.8; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: -0.02em; color: var(--ink-soft); } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .case { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; } .case .big { font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: -0.03em; line-height: 1; color: var(--accent-deep); } :root[data-theme="dark"] .case .big { color: var(--accent); } .case p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; } .case .by { margin-top: auto; font-size: 13.5px; color: var(--ink-faint); font-family: var(--font-mono); } @media (max-width: 880px){ .cust-logos { grid-template-columns: repeat(3, 1fr); } .case-grid { grid-template-columns: 1fr; } } /* span-3 feature cards (homepage 4-up grid) */ .card.span-3 { grid-column: span 3; } @media (max-width: 980px){ .card.span-3 { grid-column: span 6; } } @media (max-width: 560px){ .card.span-3 { grid-column: span 12; } } /* Keep image slots editable inside click-through cards: the full-card link sits at z-index:3, so lift the image (and index author avatars) above it so they still receive drag/drop + Replace/Remove instead of the navigation link swallowing them. */ .prod-media, .pc-media, .bf-media, .vouch-media { z-index: 4; } .post-meta image-slot { position: relative; z-index: 4; }