/* Partner Program page — generated by rc-src/partners/build.mjs from the design canvas. */ /* =================================================================== * OptiMonk — Colors & Type * Source: Design System.fig (Style / Colors, Style / Typography, Style / Elevation) * =================================================================== * * Naming follows the Figma convention: $om-- where weight * goes 10..1000 (100=lightest, 1000=darkest). Semantic tokens map onto * the raw palette. Use semantic tokens in code; use raw tokens only * when you genuinely need a specific swatch. * =================================================================== */ /* ---------- Webfonts (self-hosted, brand-licensed) ---------- */ /* Roboto — primary typeface. Variable TTF, weights 100–900. */ /* Funnel Sans — brand display face (replaces the prior Gilroy/Montserrat slot). */ /* Variable TTF, weights 300–800. */ /* Amatic SC — hand-drawn captions only. Kept on Google Fonts (no brand TTF supplied). */ /* cyrillic */ /* hebrew */ /* vietnamese */ /* latin-ext */ /* latin */ :root { /* ========================================================= * 1. RAW COLOR SCALES * ========================================================= */ /* ----- Primary: OM Orange (brand) ----- */ --om-orange-100: #FFF3EC; /* background tint */ --om-orange-200: #FFD1BA; /* transparent-element backgrounds */ --om-orange-300: #FFB28E; /* border, focused transparent */ --om-orange-400: #FF7B3E; /* hover on secondary elements */ --om-orange-500: #ED5A29; /* ★ brand primary — buttons, focus */ --om-orange-600: #DC4B1D; /* pressed / darker accent */ --om-orange-700: #B73C17; /* pressed 500 elements */ /* ----- Peach (warm surface tints, often for cards) ----- */ --om-peach-100: #FFF3EA; --om-peach-200: #FFE3CE; --om-peach-300: #FFD2B1; --om-peach-400: #FFC199; /* ----- Grayscale ----- */ --om-gray-1000: #000000; /* heading XL only */ --om-gray-900: #23262A; /* primary text, icons */ --om-gray-800: #272727; /* text on boxes */ --om-gray-700: #505763; /* headings, labels and icons */ --om-gray-600: #8F97A4; /* disabled text + icons, placeholders */ --om-gray-500: #B9BEC6; /* disabled text on buttons */ --om-gray-400: #D3DAE1; /* borders on focused transparent els */ --om-gray-300: #E3E5E8; /* borders for default / hovered */ --om-gray-200: #F1F2F4; /* backgrounds — empty / sub-rows */ --om-gray-100: #F7F7F9; /* backgrounds */ --om-gray-50: #FCFCFD; /* the palest surface tint */ /* ----- Alert Red (destructive / error) ----- */ --om-alert-red-100: #FFD5D8; --om-alert-red-200: #FFA1A8; --om-alert-red-300: #E45F68; --om-alert-red-400: #EA2738; --om-alert-red-500: #E4252D; /* ★ error base */ --om-alert-red-600: #BE181F; /* pressed error button */ /* ----- Alert Green (success) ----- */ --om-alert-green-100: #D1EDE2; --om-alert-green-200: #8BDCBB; --om-alert-green-300: #4ECA93; --om-alert-green-400: #2CC896; /* ★ success base */ --om-alert-green-500: #1FA87B; /* ----- Auxiliary / Extended (ambassador, editor categories) ----- */ --om-purple-500: #7C10EE; /* Ambassador nav, editor highlights */ --om-purple-600: #6A0DCC; --om-violet-500: #AE4D97; /* secondary hero gradient */ --om-sail-blue-500: #4F8EF7; /* info, links in editor */ --om-blue-500: #8444E1; --om-yellow-500: #F5C427; /* highlights in illustrations */ /* ----- Gradients ----- */ --om-gradient-orange-to-peach: linear-gradient(135deg, #ED5A29 0%, #FFB28E 100%); --om-gradient-purple: linear-gradient(135deg, #7C10EE 0%, #AE4D97 100%); --om-gradient-hero: linear-gradient(135deg, #8444E1 0%, #AE4D97 50%, #ED5A29 100%); /* ========================================================= * 2. SEMANTIC COLOR TOKENS ← prefer these in components * ========================================================= */ /* Foreground */ --fg-1: var(--om-gray-900); /* primary text */ --fg-2: var(--om-gray-700); /* secondary text, labels */ --fg-3: var(--om-gray-600); /* placeholder, muted icons */ --fg-disabled: var(--om-gray-500); --fg-inverse: #FFFFFF; --fg-brand: var(--om-orange-500); --fg-success: var(--om-alert-green-500); --fg-danger: var(--om-alert-red-500); /* Backgrounds */ --bg-app: #FFFFFF; --bg-surface: #FFFFFF; --bg-muted: var(--om-gray-100); /* app-level empty state */ --bg-subtle: var(--om-gray-200); /* hovered row, input fill */ --bg-brand: var(--om-orange-500); --bg-brand-soft: var(--om-orange-100); --bg-danger-soft: var(--om-alert-red-100); --bg-success-soft: var(--om-alert-green-100); --bg-nav-dark: var(--om-orange-500); /* admin left nav is full-bleed orange */ /* Borders */ --border-default: var(--om-gray-300); --border-strong: var(--om-gray-400); --border-focus: var(--om-orange-500); --border-danger: var(--om-alert-red-500); /* ========================================================= * 3. TYPOGRAPHY — raw tokens * ========================================================= */ --font-sans: 'Funnel Sans', 'Funnel Fallback', 'Helvetica Neue', Arial, sans-serif; --font-display-big: 'Funnel Sans', 'Roboto', sans-serif; /* marketing XXL numerals */ --font-handwritten: 'Amatic SC', cursive; /* illustration captions only */ /* Weight */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* Semantic type — matches Figma metadata (Roboto, bold-weighted headings) */ --text-display-xl: 900 60px/72px var(--font-sans); /* marketing h1 */ --text-display-lg: 700 48px/60px var(--font-sans); /* section title */ --text-h1: 700 32px/40px var(--font-sans); /* big page title */ --text-h2: 700 24px/32px var(--font-sans); /* section header */ --text-h3: 500 20px/28px var(--font-sans); /* subsection */ --text-h4: 700 18px/24px var(--font-sans); /* card title */ --text-h5: 700 16px/24px var(--font-sans); --text-h6: 700 14px/20px var(--font-sans); --text-body-lg: 400 16px/24px var(--font-sans); /* paragraph */ --text-body: 400 14px/20px var(--font-sans); /* default */ --text-body-sm: 400 13px/20px var(--font-sans); --text-body-xs: 400 12px/16px var(--font-sans); /* table rows, meta */ --text-label: 500 14px/20px var(--font-sans); /* form label */ --text-helper: 400 12px/16px var(--font-sans); /* helper text */ --text-button: 500 14px/20px var(--font-sans); /* button text */ --text-button-lg: 500 16px/24px var(--font-sans); --text-pretitle: 700 12px/16px var(--font-sans); /* uppercase eyebrow */ --text-overline: 700 10px/12px var(--font-sans); /* uppercase pill */ /* ========================================================= * 4. SHADOWS & RADII * (from Style / Elevation & Shadows) * ========================================================= */ --radius-none: 0; --radius-sm: 4px; /* buttons, inputs, tooltips, popovers */ --radius-md: 8px; /* images, cards */ --radius-lg: 16px; /* images, large cards */ --radius-xl: 24px; --radius-full: 9999px; /* switches, slider dots, content switcher */ /* Drop shadows — small/medium/large positive + negative variants */ --shadow-small: 0 0 8px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.10); --shadow-small-negative: 0 0 8px rgba(0,0,0,0.04), 0 -2px 4px rgba(0,0,0,0.10); --shadow-medium: 0 0 16px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.10); --shadow-medium-negative:0 0 16px rgba(0,0,0,0.04), 0 -8px 16px rgba(0,0,0,0.10); --shadow-large: 0 0 64px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.10); --shadow-card: 0 14px 30px rgba(0,0,0,0.10); /* the cover card shadow */ /* Focus ring */ --shadow-focus-brand: 0 0 0 4px rgba(237,90,41,0.24); --shadow-focus-danger: 0 0 0 4px rgba(228,37,45,0.24); /* ========================================================= * 5. SPACING — 4px baseline * ========================================================= */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ========================================================= * 6. COMPONENT TOKENS * ========================================================= */ --btn-height-sm: 32px; --btn-height-md: 40px; --btn-height-lg: 52px; /* Figma spec: Button – Large */ --btn-padding-x: 20px; /* min-width 20dp, min-padding 16 */ --btn-radius: var(--radius-sm); --input-height: 40px; --input-padding-x: 12px; --input-radius: var(--radius-sm); --input-border: 1px solid var(--border-default); --nav-admin-width: 64px; /* iconic left rail */ } /* =================================================================== * 7. SEMANTIC TEXT CLASSES — drop onto h1/h2/p/etc as utility * =================================================================== */ .om-h1 { font: var(--text-h1); color: var(--fg-1); letter-spacing:-0.01em; } .om-h2 { font: var(--text-h2); color: var(--fg-1); letter-spacing:-0.005em; } .om-h3 { font: var(--text-h3); color: var(--fg-1); } .om-h4 { font: var(--text-h4); color: var(--fg-1); } .om-display { font: var(--text-display-lg); color: var(--fg-1); letter-spacing:-0.02em; } .om-body { font: var(--text-body); color: var(--fg-1); } .om-body-lg { font: var(--text-body-lg); color: var(--fg-1); } .om-muted { color: var(--fg-2); } .om-helper { font: var(--text-helper); color: var(--fg-3); } .om-pretitle { font: var(--text-pretitle); color: var(--fg-brand); text-transform: uppercase; letter-spacing:.08em; } html, body { font: var(--text-body); color: var(--fg-1); background: var(--bg-app); } @keyframes omSpin{to{transform:rotate(360deg)}} @property --omA{syntax:"";initial-value:0deg;inherits:false} .om-badge{position:relative} .om-badge::before{content:"";position:absolute;inset:-1px;border-radius:9999px;padding:1px;pointer-events:none;background:conic-gradient(from var(--omA),transparent 0 70%,#FFEFE5 82%,#ED5A29 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:omBadgeSpin 3s linear infinite} @keyframes omBadgeSpin{to{--omA:360deg}} @media (prefers-reduced-motion:reduce){.om-badge::before{animation:none}} @media (prefers-reduced-motion:reduce){[style*=omSpin]{animation:none!important}} body{margin:0;background:#F7F5F1;font-family:var(--font-sans);font-size:15px;line-height:24px;color:var(--fg-1);-webkit-font-smoothing:antialiased} a{color:var(--om-orange-500);text-decoration:none}a:hover{color:var(--om-orange-700)} input::placeholder{color:#8F97A4} @keyframes omMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes omFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes omIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes omBlink{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes omCount{0%{opacity:0;transform:translateY(12px)}20%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}} @keyframes omQuoteA{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}} @keyframes omBar{from{width:0}to{width:100%}} @keyframes omQuoteB{0%,44%{opacity:0}50%,94%{opacity:1}100%{opacity:0}} @keyframes omDotA{0%,44%{background:#ED5A29}50%,94%{background:#D8D2C6}100%{background:#ED5A29}} @keyframes omDotB{0%,44%{background:#D8D2C6}50%,94%{background:#ED5A29}100%{background:#D8D2C6}} @media (prefers-reduced-motion:reduce){[style*=omQuote],[style*=omDot]{animation:none!important}[style*=omQuoteB]{opacity:0!important}} @keyframes aFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.5deg)}} @keyframes aDraw{0%{clip-path:inset(0 100% 0 0)}30%,100%{clip-path:inset(0 0 0 0)}} @keyframes aMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes aPath{0%{stroke-dashoffset:1200}55%,100%{stroke-dashoffset:0}} @keyframes aStep{0%,8%{opacity:0;transform:translateY(14px)}20%,100%{opacity:1;transform:none}} @keyframes aStone{0%,100%{box-shadow:0 0 0 0 rgba(237,90,41,0)}50%{box-shadow:0 0 0 10px rgba(237,90,41,.12)}} @keyframes aBarA{0%,10%{width:0}45%,100%{width:38%}} @keyframes aBarB{0%,10%{width:0}60%,100%{width:61%}} @keyframes aSeal{0%,62%{opacity:0;transform:scale(1.6) rotate(-14deg)}70%{opacity:1;transform:scale(.94) rotate(-8deg)}76%,100%{opacity:1;transform:scale(1) rotate(-8deg)}} @keyframes aMist{0%,100%{transform:translateX(0)}50%{transform:translateX(-24px)}} @media (prefers-reduced-motion:reduce){*{animation:none!important}} @keyframes fFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @media (prefers-reduced-motion:reduce){*{animation:none!important}} :root{ --paper:#F7F5F1;--white:#FFFFFF;--admin-page:#F9FAFB; --ink:#23262A;--ink-600:#505763;--ink-500:#8F97A4;--ink-400:#B9BEC6; --gray-300:#D5D8DD;--gray-200:#E3E5E8;--gray-100:#F1F2F4; --orange:#ED5A29;--orange-hover:#F17E58;--orange-100:#FEEFEA;--peach:#FFEFE5; --focus-border:#F7B59F;--focus-ring:#FBD9CE; --success-bg:#DCFCE7;--success-fg:#166534; --dark:#23262A;--dark-panel:#1A1C1F;--dark-chip:#2E3237;--dark-border:#3A3E44; --changelog:#F2F0EB; --shadow:0 1px 2px 0 rgba(16,24,40,.04),0 1px 3px 0 rgba(16,24,40,.06); --r-btn:9px;--r-input:12px;--r-card:16px;--r-window:20px;--r-dark:24px;--r-pill:999px; --ease:cubic-bezier(.16,1,.3,1); --font:'Funnel Sans','Funnel Fallback','Helvetica Neue',Arial,sans-serif; --mono:'Roboto Mono',ui-monospace,Menlo,monospace; --header-h:80px; --container:min(1160px, 100% - 48px); --h1-size:48px;--h1-lh:56px; --h2-size:32px;--h2-lh:40px; --lead-size:17px;--lead-lh:26px; --section-gap:96px; --card-pad:28px; --composer-w:720px; } @media (min-width:1280px){:root{ --container:min(1200px, 100% - 48px); --h1-size:56px;--h1-lh:64px; --h2-size:36px;--h2-lh:44px; --lead-size:18px;--lead-lh:28px; --section-gap:120px; }} @media (min-width:1440px){:root{ --container:min(1360px, 100% - 48px); --h1-size:64px;--h1-lh:72px; --h2-size:40px;--h2-lh:48px; --lead-size:20px;--lead-lh:30px; --section-gap:144px; --card-pad:32px; --composer-w:800px; }} .wrap{width:var(--container);max-width:100%;margin:0 auto;padding:0} .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 18px;border-radius:var(--r-btn);font-size:15px;font-weight:500;cursor:pointer;transition:background 140ms ease,border-color 140ms ease,color 140ms ease} .btn-primary{background:var(--orange);color:#fff;font-weight:600} .btn-primary:hover{background:var(--orange-hover);color:#fff} .btn-secondary{background:var(--gray-100);color:var(--ink)} .btn-secondary:hover{background:var(--gray-200);color:var(--ink)} .btn-outline{background:var(--white);border:1px solid var(--gray-200);color:var(--ink)} .btn-outline:hover{background:#FAFAFA;border-color:var(--gray-300);color:var(--ink)} .btn-on-dark{background:var(--dark-border);color:#fff} .btn-on-dark:hover{background:#4A4F56;color:#fff} .site-header{position:sticky;top:0;z-index:50;height:var(--header-h);transition:background 220ms ease,box-shadow 220ms ease,border-color 220ms ease;border-bottom:1px solid transparent} .site-header.is-stuck{background:rgba(247,245,241,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--gray-200)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)} .nav-links{display:flex;align-items:center;gap:6px} .nav-item{position:static;display:flex;align-items:center} .nav-trigger{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-btn);background:transparent;font-size:15px;font-weight:500;color:var(--ink-600);cursor:pointer;transition:background 140ms ease,color 140ms ease} .nav-trigger:hover,.nav-item.is-open>.nav-trigger{background:var(--gray-100);color:var(--ink)} .nav-trigger a,.nav-trigger button{color:inherit} .nav-trigger-plain{color:var(--ink-600)} .nav-trigger-split{padding:0} .nav-trigger-label{display:flex;align-items:center;min-height:44px;padding:0 4px 0 14px} .nav-caret{display:flex;align-items:center;min-height:44px;padding:0 14px 0 2px;cursor:pointer} .nav-trigger svg{transition:transform 160ms ease} .nav-item.is-open .nav-trigger svg{transform:rotate(180deg)} .header-actions{display:flex;align-items:center;gap:10px} .nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-btn);color:var(--ink);cursor:pointer} .nav-burger-x{display:none} .nav-burger[aria-expanded="true"] .nav-burger-bars{display:none} .nav-burger[aria-expanded="true"] .nav-burger-x{display:block} .arrow-link{font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:6px} .arrow-link-sm{font-size:14px;font-weight:600} .btn-lg{min-height:48px;padding:12px 26px;font-size:16px} #gallery{padding-bottom:var(--section-gap)} .gallery-rows{position:relative} .marquee{overflow:hidden;padding:8px 0} .marquee-2{padding:12px 0 8px} .track{display:flex;gap:20px;width:max-content;animation:marq 48s linear infinite;will-change:transform} .track.reverse{animation-direction:reverse} .marquee:hover .track{animation-play-state:paused} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .shot{width:224px;height:150px;object-fit:cover;border-radius:var(--r-input);border:1px solid var(--gray-200);background:var(--white);box-shadow:var(--shadow);transition:transform 160ms ease,box-shadow 160ms ease;flex-shrink:0} .marquee:hover .shot:hover{transform:scale(1.03);box-shadow:0 4px 10px 0 rgba(16,24,40,.08),0 2px 4px 0 rgba(16,24,40,.06)} .fade{position:absolute;top:0;bottom:0;width:160px;pointer-events:none} .fade-l{left:0;background:linear-gradient(90deg,var(--paper),rgba(247,245,241,0))} .fade-r{right:0;background:linear-gradient(270deg,var(--paper),rgba(247,245,241,0))} .gallery-cta{text-align:center;margin-top:28px;position:relative} .site-footer{border-top:1px solid var(--gray-200);position:relative;z-index:1;background:var(--paper)} .foot-grid{padding:56px 0 40px;display:grid;grid-template-columns:320px repeat(4,minmax(0,1fr));gap:40px;position:relative} .foot-brand{display:flex;flex-direction:column;gap:12px} .foot-brand img{height:32px;width:auto;align-self:flex-start} .foot-tag{font-size:14px;color:var(--ink-600)} .foot-h{font-size:13px;font-weight:600;margin-bottom:8px} .foot-link{display:block;font-size:14px;color:var(--ink-600);line-height:26px} .foot-link:hover{color:var(--ink)} .foot-bottom{display:flex;justify-content:space-between;padding:0 0 32px;font-size:12px;color:var(--ink-500);position:relative;gap:16px;flex-wrap:wrap} .foot-legal{display:flex;gap:20px} .foot-legal .foot-link{font-size:12px;line-height:16px} .nav-panel{position:absolute;top:100%;left:50%;z-index:2;width:min(var(--nav-w,1000px),var(--container));margin-top:9px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-4px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms} .nav-item.is-open>.nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s,0s,0s} .nav-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .nav-panel-in{background:var(--white);border:1px solid var(--gray-200);border-radius:14px;box-shadow:0 8px 20px -10px rgba(35,38,42,.12),0 1px 2px rgba(35,38,42,.04);overflow:hidden} .nav-panel-product{--nav-w:1000px} .nav-panel-library{--nav-w:1020px} .nav-panel-res{--nav-w:860px} .nav-sec{display:flex;flex-direction:column;gap:12px} .nav-sec-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:0 12px} .nav-sec-title-flush{padding:0} .nav-col{display:flex;flex-direction:column;gap:12px;padding:28px 16px 20px} .nav-col-side{background:var(--white);border-left:1px solid var(--gray-200)} .nav-list{display:flex;flex-direction:column;gap:4px} .nav-list-tight{display:flex;flex-direction:column;gap:2px} .nav-row{display:flex;gap:14px;padding:12px;border-radius:12px;color:var(--ink);transition:background 120ms ease} .nav-row:hover{background:var(--gray-100);color:var(--ink)} .nav-ico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink-600);transition:color 120ms ease} .nav-row:hover .nav-ico,.nav-row-c:hover .nav-ico{color:var(--ink)} .nav-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .nav-row-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:22px} .nav-row-desc{font-size:13px;line-height:19px;color:var(--ink-600)} .nav-row-go{margin-left:auto;align-self:center;display:flex;color:var(--ink);opacity:0;transition:opacity 120ms ease} .nav-row:hover .nav-row-go,.nav-row:focus-visible .nav-row-go{opacity:1} .nav-row-c{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease} .nav-row-c:hover{background:var(--gray-100);color:var(--ink)} .nav-row-p{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:var(--r-btn);font-size:15px;font-weight:500;color:var(--ink);transition:background 120ms ease} .nav-row-p:hover{background:var(--gray-100);color:var(--ink)} .nav-chip{font-size:11px;font-weight:600;line-height:16px;padding:1px 8px;border-radius:var(--r-pill);background:var(--orange-100);color:#B23A12} .nav-ai-logos{display:flex;align-items:center;gap:8px;margin-top:6px} .nav-ai-logos img{width:16px;height:16px} .nav-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-top:1px solid var(--gray-200);background:var(--white)} .nav-foot-center{justify-content:center} .nav-foot-note{font-size:15px;color:var(--ink-600)} .nav-foot-link,.nav-link-go{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--ink)} .nav-link-go{min-height:40px} .nav-foot-link:hover,.nav-link-go:hover{color:var(--ink);text-decoration:underline} .nav-prod-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)} .nav-usecases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px} .nav-lib-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px} .nav-lib-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:28px 20px 24px} .nav-seasons{display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-left:1px solid var(--gray-200)} .nav-season-body{display:flex;flex-direction:column;gap:12px} .nav-season-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .nav-season-name{font-size:18px;font-weight:600;line-height:24px} .nav-season-when{font-size:13px;line-height:19px;color:var(--ink-600);white-space:nowrap} .nav-season-shot{display:block;padding:14px;border-radius:12px;background:var(--paper)} .nav-season-shot img{width:100%;height:auto;border-radius:6px;box-shadow:0 6px 16px -8px rgba(35,38,42,.35)} .nav-season-list{display:flex;flex-direction:column;border-top:1px solid var(--gray-200);padding-top:6px} .nav-season-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;font-size:15px;font-weight:500;color:var(--ink)} .nav-season-row:hover{color:var(--ink);text-decoration:underline} .nav-res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 240px} .nav-col-l{padding:28px 8px 24px 16px} .nav-col-r{padding:28px 16px 24px 8px} .nav-col-c{padding:28px 12px 24px} .mnav{display:none} @media (max-width:1059px){.nav-lib-grid{grid-template-columns:minmax(0,1fr)}.nav-seasons{display:none}} @media (max-width:1199px){.foot-grid{grid-template-columns:240px repeat(4,minmax(0,1fr));gap:24px}} @media (max-width:767px){.nav-links,.header-signin{display:none}.nav-burger{display:flex}.mnav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;display:flex;flex-direction:column;background:var(--white);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}.mnav-nav{display:flex;flex-direction:column}.mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 20px;border-bottom:1px solid var(--gray-200);font-size:17px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}.mnav-row svg{flex-shrink:0;color:var(--ink-600)}.mnav-chev{transition:transform 160ms ease}.mnav-row[aria-expanded="true"] .mnav-chev{transform:rotate(180deg)}.mnav-sub{display:none;background:#FCFBF9;border-bottom:1px solid var(--gray-200);padding-bottom:10px}.mnav-sub.is-open{display:block}.mnav-sub-title{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:14px 20px 4px}.mnav-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;font-size:15px;font-weight:500;color:var(--ink)}.mnav-link:hover{color:var(--ink)}.mnav-ico{display:flex;color:var(--ink-600)}.mnav-arrow{padding:6px 20px 0}.mnav-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:16px 20px 24px;border-top:1px solid var(--gray-200)}.mnav-cta{font-size:16px}body.mnav-open{overflow:hidden}body.mnav-open .mnav{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}.shot{width:180px;height:120px}.track{gap:14px}.fade{width:60px}.cta-btns .btn{width:100%}.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:40px 0 28px}.foot-brand{grid-column:1/-1}.foot-bottom{padding:0 0 28px;flex-direction:column;gap:10px}} @media (min-width:1440px){.shot{width:256px;height:171px}} @media (prefers-reduced-motion:reduce){.nav-panel,.mnav{transition:none!important;transform:translateX(-50%)!important}.mnav{transform:none!important}.nav-trigger svg,.mnav-chev{transition:none!important}.track,.motif-enso,.cta-monk,[data-reveal].cta-monk.is-in,.caret,.code-cursor{animation:none!important}} .nav-item:hover>.nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s,0s,0s} .site-header *,.site-footer *,#gallery *{box-sizing:border-box} .site-header img,.site-header svg,.site-footer img,.site-footer svg,#gallery img,#gallery svg{display:block} .site-header button,.mnav button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0} .site-header,.site-footer,#gallery{font-family:var(--font);color:var(--ink);font-size:15px;line-height:24px} @keyframes tJob{0%,17%,100%{border-color:#E3E5E8;box-shadow:none}3%,13%{border-color:#ED5A29;box-shadow:0 0 0 4px rgba(237,90,41,.12)}} @keyframes tType{0%{clip-path:inset(0 100% 0 0)}45%,85%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}} @keyframes tBlink{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes tJob{0%,17%,100%{border-color:#E3E5E8;box-shadow:none}3%,13%{border-color:#ED5A29;box-shadow:0 0 0 4px rgba(237,90,41,.12)}} @keyframes tCheck{0%,4%{background:#3A3E44;transform:scale(.8)}8%,100%{background:#2CC896;transform:scale(1)}} @keyframes tRow{0%,4%{opacity:.45}8%,100%{opacity:1}} @keyframes tProg{0%{width:0}90%,100%{width:100%}} @keyframes tLine{0%,5%{stroke-dashoffset:260}14%,100%{stroke-dashoffset:0}} @keyframes tNode{0%,6%{border-color:#E3E5E8;box-shadow:none}10%,20%{border-color:#ED5A29;box-shadow:0 0 0 6px rgba(237,90,41,.12)}30%,100%{border-color:#FFD1BA;box-shadow:none}} @keyframes tFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes tSpin{to{transform:rotate(360deg)}} @property --a{syntax:"";initial-value:0deg;inherits:false} .badge{position:relative;display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:999px;background:#fff;border:1px solid #E3E5E8;font-family:'Funnel Sans',sans-serif;font-size:13px;line-height:20px;color:#505763;font-weight:500} .badge::before{content:"";position:absolute;inset:-1px;border-radius:999px;padding:1px;pointer-events:none;z-index:0;background:conic-gradient(from var(--a),transparent 0 70%,#FFEFE5 82%,#ED5A29 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:badgeSpin 3s linear infinite} .badge>*{position:relative;z-index:1} @keyframes badgeSpin{to{--a:360deg}} .badge b{background:#FEEFEA;color:#ED5A29;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600} @media (prefers-reduced-motion:reduce){.badge::before{animation:none!important;background:none}} @keyframes bpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes bpType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes bpS1{0%,21.5%{opacity:1;visibility:visible}23.5%,100%{opacity:0;visibility:hidden}} @keyframes bpS2{0%,21.5%{opacity:0;visibility:hidden}23.5%,54%{opacity:1;visibility:visible}56%,100%{opacity:0;visibility:hidden}} @keyframes bpS3{0%,54%{opacity:0;visibility:hidden}56%,78%{opacity:1;visibility:visible}80%,100%{opacity:0;visibility:hidden}} @keyframes bpS4{0%,78%{opacity:0;visibility:hidden}80%,100%{opacity:1;visibility:visible}} @keyframes bpChip{0%,34%{border-color:#E3E5E8;background:#fff}36%,100%{border-color:#ED5A29;background:#FFF3EC}} @keyframes bpPick{0%,70%{box-shadow:none}72%,100%{box-shadow:0 0 0 2px #ED5A29}} @keyframes bpCur{0%{transform:translate(560px,500px)}14%{transform:translate(713px,330px)}28%{transform:translate(713px,330px)}33%{transform:translate(165px,208px)}44%{transform:translate(165px,208px)}58%{transform:translate(620px,470px)}68%{transform:translate(320px,150px)}76%{transform:translate(320px,150px)}90%,100%{transform:translate(880px,24px)}} @keyframes bpClick{0%,18%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1)}23%,33%{opacity:0;transform:scale(1.4)}35%{opacity:1;transform:scale(1)}38%,69%{opacity:0;transform:scale(1.4)}71%{opacity:1;transform:scale(1)}74%,89%{opacity:0;transform:scale(1.4)}91%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1.4)}} @media (prefers-reduced-motion:reduce){[style*="bpS"],[style*="bpCur"],[style*="bpClick"]{animation:none!important}} @keyframes gpS1{0%,22%{opacity:1;visibility:visible}24%,100%{opacity:0;visibility:hidden}} @keyframes gpS2{0%,22%{opacity:0;visibility:hidden}24%,75%{opacity:1;visibility:visible}77%,100%{opacity:0;visibility:hidden}} @keyframes gpS3{0%,49%{opacity:0;visibility:hidden}51%,75%{opacity:1;visibility:visible}77%,100%{opacity:0;visibility:hidden}} @keyframes gpS4{0%,75%{opacity:0;visibility:hidden}77%,100%{opacity:1;visibility:visible}} @keyframes gpModal{0%,49%{transform:translateY(12px) scale(.98)}53%,100%{transform:none}} @keyframes gpBadge{0%,17%{box-shadow:none}19%,22%{box-shadow:0 0 0 4px rgba(44,200,150,.25)}24%,100%{box-shadow:none}} @keyframes gpPress1{0%,44%{transform:none;background:#ED5A29}45%,47%{transform:scale(.97);background:#DC4B1D}48%,100%{transform:none;background:#ED5A29}} @keyframes gpPress2{0%,71%{transform:none;background:#ED5A29}72%,74%{transform:scale(.97);background:#DC4B1D}75%,100%{transform:none;background:#ED5A29}} @keyframes gpCur{0%{transform:translate(520px,520px)}15%{transform:translate(898px,146px)}22%{transform:translate(898px,146px)}30%{transform:translate(700px,330px)}40%{transform:translate(793px,218px)}48%{transform:translate(793px,218px)}58%{transform:translate(560px,420px)}68%{transform:translate(638px,418px)}75%{transform:translate(638px,418px)}90%,100%{transform:translate(900px,580px)}} @keyframes gpClick{0%,18%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1)}23%,44%{opacity:0;transform:scale(1.4)}46%{opacity:1;transform:scale(1)}49%,71%{opacity:0;transform:scale(1.4)}73%{opacity:1;transform:scale(1)}76%,100%{opacity:0;transform:scale(1.4)}} @media (prefers-reduced-motion:reduce){[style*="gpS"],[style*="gpCur"],[style*="gpClick"]{animation:none!important}} @keyframes ndOld{0%,69%{opacity:1}70%,100%{opacity:0}} @keyframes ndNew{0%,69%{opacity:0}70%,100%{opacity:1}} @keyframes ndPress{0%,14%{transform:none}15%,16%{transform:scale(.96)}17%,100%{transform:none}} @keyframes ndPress2{0%,64%{transform:none}65%,66%{transform:scale(.96);background:#DC4B1D}67%,100%{transform:none}} @keyframes ndOverlay{0%,16%{opacity:0;visibility:hidden}18%,67%{opacity:1;visibility:visible}69%,100%{opacity:0;visibility:hidden}} @keyframes ndModal{0%,16%{transform:translateY(12px) scale(.98)}20%,100%{transform:none}} @keyframes ndOpt{0%,39%{border-color:#E3E5E8;background:#fff}41%,100%{border-color:#ED5A29;background:#FFF6F2}} @keyframes ndRadio{0%,39%{border:2px solid #B9BEC6;background:#fff}41%,100%{border:5px solid #ED5A29;background:#fff}} @keyframes ndRow{0%,70%{max-height:0;opacity:0}74%,100%{max-height:70px;opacity:1}} @keyframes ndCur{0%{transform:translate(500px,420px)}12%{transform:translate(903px,44px)}17%{transform:translate(903px,44px)}22%{transform:translate(520px,170px)}30%{transform:translate(520px,175px)}37%{transform:translate(286px,350px)}42%{transform:translate(286px,350px)}58%{transform:translate(560px,470px)}63%{transform:translate(627px,521px)}67%{transform:translate(627px,521px)}82%,100%{transform:translate(760px,300px)}} @keyframes ndClick{0%,14%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1)}18%,39%{opacity:0;transform:scale(1.4)}40%{opacity:1;transform:scale(1)}43%,64%{opacity:0;transform:scale(1.4)}65%{opacity:1;transform:scale(1)}68%,100%{opacity:0;transform:scale(1.4)}} @media (prefers-reduced-motion:reduce){[style*="ndOverlay"],[style*="ndCur"],[style*="ndClick"]{animation:none!important}[style*="ndOverlay"],[style*="ndCur"]{display:none}} @keyframes pFill{0%{width:0}85%,100%{width:100%}} @keyframes pNode{0%{background:#fff;border-color:#E3E5E8}6%,100%{background:#FFF3EC;border-color:#ED5A29}} @keyframes pBar1{0%,20%{width:0}45%,100%{width:46%}} @keyframes pBar2{0%,20%{width:0}55%,100%{width:72%}} @keyframes pTog{0%,40%{left:2px;background:#B9BEC6}50%,100%{left:18px;background:#fff}} @keyframes pTogBg{0%,40%{background:#E3E5E8}50%,100%{background:#2CC896}} @keyframes pTick{0%,30%{opacity:0;transform:scale(.6)}40%,100%{opacity:1;transform:none}} /* ---------- responsive (canvas preview; the repo build reuses the RC breakpoints) ---------- */ .pp-console{zoom:.9;width:100%;max-width:1216px;margin:0 auto;align-self:center;box-sizing:border-box} @media (max-width:1279px){.pp-console{zoom:.82}} @media (max-width:1100px){.pp-side{display:none!important}.pp-console{zoom:.8}} @media (max-width:900px){.pp-console{zoom:.68}} @media (max-width:760px){ .pp-sec{padding:64px 0!important} .pp-sec[data-screen-label="01 Hero"]{padding:48px 0 40px!important} .pp-sec[data-screen-label="08 Final CTA"]{padding:64px 0 72px!important} .pp-h1{font-size:38px!important;line-height:44px!important} .pp-h2{font-size:30px!important;line-height:38px!important} .pp-h2-cta{font-size:32px!important;line-height:40px!important} .pp-lede{font-size:17px!important;line-height:26px!important} .pp-btns{flex-direction:column!important;align-items:stretch!important;width:100%;gap:12px!important} .pp-btns>a{width:100%!important;justify-content:center!important;box-sizing:border-box} .pp-hide-m{display:none!important} .pp-deco-cta{width:150px!important;right:-40px!important;opacity:.35!important} .pp-grid1{grid-template-columns:minmax(0,1fr)!important;gap:40px!important;margin-top:40px!important} .pp-wrap{white-space:normal!important;flex-wrap:wrap} .pp-stone{width:260px!important;max-width:100%;height:auto!important} .pp-stone img{width:100%!important} .pp-tabs{flex-wrap:nowrap!important;gap:6px!important} .pp-tab{width:auto!important;flex:1 1 0!important;min-width:0} .pp-tab>span:first-child{height:auto!important;min-height:44px;padding:4px 6px;font-size:12px!important;line-height:16px!important;text-align:center} .pp-console{zoom:.6;border-radius:14px!important} .pp-quote{font-size:26px!important;line-height:34px!important} .pp-faq-q{font-size:17px!important;line-height:24px!important} } @media (max-width:639px){.pp-console{zoom:.44}} @media (max-width:479px){.pp-console{zoom:.33}} @media (max-width:374px){.pp-console{zoom:.28}} @keyframes hDraw{0%{clip-path:inset(0 100% 0 0)}30%,100%{clip-path:inset(0 0 0 0)}} @keyframes hFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes hIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes hTick{0%,22%{transform:translateY(0)}25%,47%{transform:translateY(-34px)}50%,72%{transform:translateY(-68px)}75%,100%{transform:translateY(-102px)}} @media (max-width:1100px){.pp-hero-grid{grid-template-columns:minmax(0,1fr)!important}.pp-hero-art{margin:0 auto!important}} @media (max-width:760px){.pp-hero-art{zoom:.68;max-width:none!important;left:35px}} @media (max-width:479px){.pp-hero-art{zoom:.52;left:34px;margin:0!important}} .site-header .nav-burger-x{display:none!important} .site-header .nav-burger[aria-expanded="true"] .nav-burger-bars{display:none!important} .site-header .nav-burger[aria-expanded="true"] .nav-burger-x{display:block!important}