/* ========================================================================== EmailFlow AI — Public marketing site (mkt-* namespace) Light theme only. Built entirely on design tokens from variables.css. The carries data-color-scheme="blue" so --color-teal == #263DC7. ========================================================================== */ .mkt-body { --mkt-accent: var(--color-teal); --mkt-accent-hover: var(--color-teal-hover); --mkt-ink: #0B1020; /* Deepened mid/end stops so white text clears WCAG AA 4.5:1 at every point of the gradient (lightest stop was ~4.3:1 against #fff). */ --mkt-grad: linear-gradient(135deg, #263DC7 0%, #4F5AD8 48%, #7B47E0 100%); --mkt-grad-soft: linear-gradient(135deg, rgba(38,61,199,0.10) 0%, rgba(142,91,240,0.10) 100%); --mkt-nav-h: 64px; --mkt-maxw: 1200px; font-family: var(--font-family); background: var(--color-card-bg); color: var(--color-text); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; overflow-x: hidden; } .mkt-body.mkt-drawer-open { overflow: hidden; } .mkt-body a { color: inherit; } .mkt-body img { max-width: 100%; display: block; } /* ---------- Layout primitives ---------- */ .mkt-container { width: 100%; max-width: var(--mkt-maxw); margin: 0 auto; padding: 0 var(--space-6); } .mkt-section { padding: var(--space-16) 0; position: relative; } .mkt-section--tight { padding: var(--space-12) 0; } .mkt-section--gray { background: var(--color-page-bg); } .mkt-section--line { border-top: 1px solid var(--color-border); } .mkt-section-head { max-width: 720px; margin: 0 auto var(--space-10); text-align: center; } .mkt-eyebrow { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mkt-accent); margin-bottom: var(--space-3); } .mkt-eyebrow .material-symbols-rounded { font-size: 16px; } .mkt-section-head h2 { font-size: var(--text-3xl); font-weight: var(--weight-black); letter-spacing: -0.02em; line-height: var(--leading-tight); color: var(--color-text); margin: 0 0 var(--space-3); } .mkt-section-head p { font-size: var(--text-lg); color: var(--color-text-muted); margin: 0; line-height: var(--leading-relaxed); } /* Marketing CTA buttons reuse .mc-btn; add an extra-large size + gradient variant. */ .mc-btn.mkt-btn-xl { height: 52px; padding: 0 var(--space-7); font-size: var(--text-md); border-radius: var(--radius-lg); } .mc-btn.mkt-btn-grad { background: var(--mkt-grad); border-color: transparent; color: #fff; } /* `.mkt-body a { color: inherit }` (a reset for nav/footer links) outranks the single-class `.mc-btn-primary` colour, which left solid primary CTAs (nav, mobile drawer, dashboard) with dark text on the blue fill. Restore white. */ .mkt-body a.mc-btn-primary { color: var(--color-white); } .mkt-body a.mc-btn-primary:hover { color: var(--color-white); } .mc-btn.mkt-btn-grad:hover { filter: brightness(1.06); box-shadow: 0 10px 28px rgba(56,76,210,0.35); color: #fff; } /* ========================================================================== NAV ========================================================================== */ .mkt-nav { position: sticky; top: 0; z-index: var(--z-topbar); background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .mkt-nav.is-scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); } .mkt-nav-inner { height: var(--mkt-nav-h); display: flex; align-items: center; gap: var(--space-6); } .mkt-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-text); } .mkt-brand-logo { height: 30px; width: auto; display: block; } .mkt-brand--footer .mkt-brand-logo { height: 34px; } .mkt-nav-links { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-4); } .mkt-nav-link { text-decoration: none; color: var(--color-text-secondary); font-size: var(--text-base); font-weight: var(--weight-medium); padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); transition: color var(--transition-fast), background var(--transition-fast); } .mkt-nav-link:hover { color: var(--color-text); background: var(--color-hover-bg); } .mkt-nav-link.is-active { color: var(--mkt-accent); } .mkt-nav-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } .mkt-nav-signin { font-weight: var(--weight-semibold); } .mkt-nav-cta .material-symbols-rounded { font-size: 18px; } .mkt-nav-burger { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: var(--radius-input); border: 1px solid var(--color-border-strong); background: var(--color-card-bg); color: var(--color-text); cursor: pointer; align-items: center; justify-content: center; } .mkt-nav-burger .material-symbols-rounded { font-size: 24px; } .mkt-drawer { border-top: 1px solid var(--color-border); background: var(--color-card-bg); padding: var(--space-4) var(--space-6) var(--space-6); } .mkt-drawer-links { display: flex; flex-direction: column; gap: var(--space-1); } .mkt-drawer-link { text-decoration: none; color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-medium); padding: var(--space-3) var(--space-2); border-radius: var(--radius-input); } .mkt-drawer-link:hover { background: var(--color-hover-bg); } .mkt-drawer-divider { height: 1px; background: var(--color-border); margin: var(--space-3) 0; } /* ========================================================================== HERO ========================================================================== */ .mkt-hero { position: relative; overflow: hidden; padding: var(--space-16) 0 var(--space-14); text-align: center; } .mkt-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: 44px 44px; opacity: 0.35; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); } .mkt-hero::after { content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 900px; height: 520px; pointer-events: none; background: radial-gradient(ellipse, rgba(91,108,240,0.18) 0%, transparent 70%); } .mkt-hero-inner { position: relative; z-index: 1; } .mkt-hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1-5) var(--space-4); border-radius: var(--radius-full); background: var(--color-card-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-6); } .mkt-hero-badge .material-symbols-rounded { font-size: 16px; color: var(--mkt-accent); } .mkt-hero h1 { font-size: clamp(36px, 6vw, 60px); font-weight: var(--weight-black); letter-spacing: -0.03em; line-height: 1.04; color: var(--color-text); margin: 0 auto var(--space-5); max-width: none; white-space: nowrap; } .mkt-hero h1 .mkt-grad-text { background: var(--mkt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .mkt-hero-sub { font-size: var(--text-md); color: var(--color-text-muted); line-height: var(--leading-relaxed); max-width: 620px; margin: 0 auto var(--space-8); } /* Decorative v0/Lovable-style prompt box — the WHOLE box is a link to signup. */ .mkt-prompt { position: relative; display: block; text-decoration: none; max-width: 720px; margin: 0 auto var(--space-6); text-align: left; border-radius: var(--radius-lg); padding: 2px; background: var(--mkt-grad); box-shadow: 0 24px 60px -20px rgba(56,76,210,0.45); transition: transform var(--transition-base), box-shadow var(--transition-base); } .mkt-prompt:hover { transform: translateY(-2px); box-shadow: 0 30px 70px -18px rgba(56,76,210,0.55); } .mkt-prompt-inner { background: var(--color-card-bg); border-radius: calc(var(--radius-lg) - 2px); padding: var(--space-5) var(--space-5) var(--space-4); } .mkt-prompt-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .mkt-prompt-label .material-symbols-rounded { font-size: 18px; color: var(--mkt-accent); } .mkt-prompt-text { font-size: var(--text-lg); color: var(--color-text-disabled); min-height: 56px; line-height: var(--leading-relaxed); } .mkt-prompt-text .mkt-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--mkt-accent); vertical-align: text-bottom; margin-left: 1px; animation: mkt-blink 1.1s steps(1) infinite; } @keyframes mkt-blink { 50% { opacity: 0; } } .mkt-prompt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .mkt-prompt-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; } .mkt-prompt-chip { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-full); background: var(--color-hover-bg); border: 1px solid var(--color-border); } .mkt-prompt-send { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-input); background: var(--mkt-grad); color: #fff; flex-shrink: 0; } .mkt-prompt-send .material-symbols-rounded { font-size: 22px; } .mkt-hero-cta { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; } .mkt-hero-note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); } .mkt-hero-note .material-symbols-rounded { font-size: 15px; vertical-align: text-bottom; color: var(--color-success); } /* Hero product shot */ .mkt-hero-shot { position: relative; z-index: 1; max-width: 1040px; margin: var(--space-12) auto 0; } .mkt-window { border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-card-bg); box-shadow: 0 40px 80px -30px rgba(11,16,32,0.30); overflow: hidden; } .mkt-window-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-subtle-bg); } .mkt-window-dots { display: inline-flex; gap: 6px; } .mkt-window-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); display: inline-block; } .mkt-window-url { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: var(--space-3); } .mkt-window-body img { width: 100%; display: block; } .mkt-window-body video { width: 100%; height: auto; display: block; background: var(--color-subtle-bg); } /* ---------- Provider band (bring-your-own SMTP) ---------- */ .mkt-providers { text-align: center; } .mkt-providers-label { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); } /* Featured: Amazon SES */ .mkt-provider-feat { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; text-decoration: none; max-width: 720px; margin: 0 auto var(--space-6); padding: var(--space-6) var(--space-8); background: var(--mkt-grad-soft); border: 1px solid var(--mkt-accent); border-radius: var(--radius-card); box-shadow: 0 16px 40px -22px rgba(56,76,210,0.45); transition: transform var(--transition-base), box-shadow var(--transition-base); } .mkt-provider-feat:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -20px rgba(56,76,210,0.50); } .mkt-provider-feat-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--mkt-grad); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-bold); padding: 3px var(--space-3); border-radius: var(--radius-full); white-space: nowrap; } .mkt-provider-feat-logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); box-shadow: 0 6px 18px -8px rgba(11,16,32,0.25); } .mkt-provider-feat-logo img { height: 46px; width: auto; display: block; } .mkt-provider-feat-info { text-align: left; } .mkt-provider-feat-price { display: block; font-size: var(--text-xl); color: var(--color-text); } .mkt-provider-feat-price strong { font-size: var(--text-3xl); font-weight: var(--weight-black); color: var(--mkt-accent); letter-spacing: -0.02em; } .mkt-provider-feat-sub { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 44ch; line-height: var(--leading-normal); } .mkt-provider-feat-sub .material-symbols-rounded { font-size: 18px; color: var(--color-success); flex-shrink: 0; margin-top: 1px; } /* Supporting providers — complete 4-up grid */ .mkt-provider-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); max-width: 720px; margin: 0 auto; } .mkt-provider-logo { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: var(--space-5) var(--space-4); background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); transition: border-color var(--transition-base), box-shadow var(--transition-base); } .mkt-provider-logo:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-dropdown); } .mkt-provider-logo img { height: 26px; width: auto; max-width: 100%; object-fit: contain; display: block; } .mkt-providers-foot { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); } /* ========================================================================== FEATURE SPLIT ROWS ("Turn Emails into Revenue") ========================================================================== */ .mkt-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; } .mkt-split + .mkt-split { margin-top: var(--space-16); } .mkt-split--reverse .mkt-split-media { order: -1; } .mkt-split-copy h3 { font-size: var(--text-2xl); font-weight: var(--weight-black); letter-spacing: -0.02em; margin: var(--space-3) 0; color: var(--color-text); } .mkt-split-copy p { font-size: var(--text-md); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin: 0 0 var(--space-5); } .mkt-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .mkt-feature-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-base); color: var(--color-text-secondary); } .mkt-feature-list .material-symbols-rounded { font-size: 20px; color: var(--mkt-accent); flex-shrink: 0; margin-top: 1px; } .mkt-split-media .mkt-window { box-shadow: 0 30px 60px -28px rgba(11,16,32,0.28); } .mkt-split-media .mkt-window-body img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; } /* ========================================================================== FEATURE CARD GRID ========================================================================== */ .mkt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .mkt-cards--4 { grid-template-columns: repeat(4, 1fr); } .mkt-card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-6); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .mkt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-dropdown); border-color: var(--color-border-strong); } .mkt-card-icon { width: 44px; height: 44px; border-radius: var(--radius-input); display: inline-flex; align-items: center; justify-content: center; background: var(--mkt-grad-soft); color: var(--mkt-accent); margin-bottom: var(--space-4); } .mkt-card-icon .material-symbols-rounded { font-size: 24px; } .mkt-card h3 { font-size: var(--text-md); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); color: var(--color-text); } .mkt-card p { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin: 0; } /* ========================================================================== STEPS ========================================================================== */ .mkt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .mkt-step { position: relative; padding-top: var(--space-2); } .mkt-step-num { width: 36px; height: 36px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; background: var(--mkt-grad); color: #fff; font-weight: var(--weight-black); margin-bottom: var(--space-4); } .mkt-step h3 { font-size: var(--text-md); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); } .mkt-step p { font-size: var(--text-base); color: var(--color-text-muted); margin: 0; line-height: var(--leading-relaxed); } /* ========================================================================== FAQ (zero-JS via
) ========================================================================== */ .mkt-faq { max-width: 760px; margin: 0 auto; } .mkt-faq-item { border-bottom: 1px solid var(--color-border); } .mkt-faq-item summary { list-style: none; cursor: pointer; padding: var(--space-5) var(--space-1); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); } .mkt-faq-item summary::-webkit-details-marker { display: none; } .mkt-faq-item summary .material-symbols-rounded { color: var(--color-text-muted); transition: transform var(--transition-fast); flex-shrink: 0; } .mkt-faq-item[open] summary .material-symbols-rounded { transform: rotate(180deg); } .mkt-faq-item .mkt-faq-a { padding: 0 var(--space-1) var(--space-5); font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); } /* ========================================================================== CTA BAND ========================================================================== */ .mkt-cta { position: relative; overflow: hidden; text-align: center; color: #fff; background: var(--mkt-grad); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-6); } .mkt-cta::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(255,255,255,0.25), transparent 70%); pointer-events: none; } .mkt-cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; } .mkt-cta h2 { font-size: var(--text-3xl); font-weight: var(--weight-black); letter-spacing: -0.02em; margin: 0 0 var(--space-3); } .mkt-cta p { font-size: var(--text-lg); opacity: 0.92; margin: 0 0 var(--space-7); } .mc-btn.mkt-btn-on-grad { background: #fff; color: var(--mkt-accent); border-color: #fff; } .mc-btn.mkt-btn-on-grad:hover { background: rgba(255,255,255,0.92); color: var(--mkt-accent); box-shadow: 0 10px 30px rgba(0,0,0,0.18); } .mkt-cta-note { margin-top: var(--space-4); font-size: var(--text-sm); opacity: 0.95; } /* ========================================================================== FOOTER ========================================================================== */ .mkt-footer { background: var(--color-page-bg); border-top: 1px solid var(--color-border); padding: var(--space-14) 0 var(--space-8); } .mkt-footer-top { display: grid; grid-template-columns: 1.4fr 3fr; gap: var(--space-10); } .mkt-brand--footer { margin-bottom: var(--space-4); } .mkt-footer-tagline { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); max-width: 36ch; } .mkt-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } .mkt-footer-col h4 { font-size: var(--text-sm); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); margin: 0 0 var(--space-4); } .mkt-footer-col a { display: block; text-decoration: none; color: var(--color-text-muted); font-size: var(--text-base); padding: var(--space-1-5) 0; transition: color var(--transition-fast); } .mkt-footer-col a:hover { color: var(--mkt-accent); } .mkt-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); } /* ========================================================================== PRICING ========================================================================== */ .mkt-pricing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); align-items: stretch; } .mkt-plan { display: flex; flex-direction: column; background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); position: relative; } .mkt-plan.is-featured { border-color: var(--mkt-accent); box-shadow: 0 16px 40px -18px rgba(56,76,210,0.45); } .mkt-plan-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--mkt-grad); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-bold); padding: 3px var(--space-3); border-radius: var(--radius-full); white-space: nowrap; } .mkt-plan-name { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text); } .mkt-plan-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-4); min-height: 40px; line-height: var(--leading-normal); } .mkt-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: var(--space-1); } .mkt-plan-price .amt { font-size: var(--text-3xl); font-weight: var(--weight-black); letter-spacing: -0.02em; color: var(--color-text); } .mkt-plan-price .per { font-size: var(--text-sm); color: var(--color-text-muted); } .mkt-plan-cta { margin: var(--space-5) 0; } .mkt-plan-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2-5); } .mkt-plan-feats li { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); align-items: flex-start; } .mkt-plan-feats .material-symbols-rounded { font-size: 18px; color: var(--mkt-accent); flex-shrink: 0; margin-top: 1px; } .mkt-plan-feats li strong { color: var(--color-text); font-weight: var(--weight-semibold); } /* Compare matrix */ .mkt-compare { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); } .mkt-compare table { width: 100%; border-collapse: collapse; min-width: 760px; } .mkt-compare th, .mkt-compare td { padding: var(--space-3) var(--space-4); text-align: center; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); } .mkt-compare thead th { position: sticky; top: 0; background: var(--color-card-bg); z-index: 1; } .mkt-compare th:first-child, .mkt-compare td:first-child { text-align: left; color: var(--color-text); font-weight: var(--weight-medium); } .mkt-compare thead th { font-weight: var(--weight-bold); color: var(--color-text); } .mkt-compare thead .mkt-compare-price { font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--color-text-muted); display: block; } .mkt-compare tbody tr:hover { background: var(--color-hover-bg); } .mkt-compare .mkt-compare-group td { background: var(--color-subtle-bg); font-weight: var(--weight-bold); text-align: left; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-xs); } .mkt-compare .yes { color: var(--color-success); font-size: 18px; } .mkt-compare .no { color: var(--color-text-disabled); } .mkt-compare col.is-featured, .mkt-compare th.is-featured { background: var(--mkt-grad-soft); } /* ========================================================================== TEMPLATES PAGE ========================================================================== */ .mkt-templates-head { text-align: center; padding: var(--space-12) 0 var(--space-6); } .mkt-templates-gallery-wrap { padding-bottom: var(--space-16); } #mkt-template-gallery { min-height: 400px; } /* ========================================================================== DOCS (3-column Mintlify-style shell) ========================================================================== */ .mkt-docs { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; gap: var(--space-8); max-width: 1320px; margin: 0 auto; padding: 0 var(--space-6); align-items: start; } .mkt-docs-side { position: sticky; top: var(--mkt-nav-h); align-self: start; max-height: calc(100vh - var(--mkt-nav-h)); overflow-y: auto; padding: var(--space-6) var(--space-2) var(--space-8) 0; } .mkt-docs-search { width: 100%; margin-bottom: var(--space-4); } .mkt-docs-sec { margin-bottom: var(--space-5); } .mkt-docs-sec-title { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 var(--space-2); padding: 0 var(--space-2); } .mkt-docs-link { display: block; text-decoration: none; color: var(--color-text-secondary); font-size: var(--text-base); padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-input); } .mkt-docs-link:hover { background: var(--color-hover-bg); color: var(--color-text); } .mkt-docs-link.is-active { background: var(--mkt-grad-soft); color: var(--mkt-accent); font-weight: var(--weight-semibold); } .mkt-docs-main { min-width: 0; padding: var(--space-8) 0 var(--space-16); } .mkt-docs-breadcrumb { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); } .mkt-docs-breadcrumb .material-symbols-rounded { font-size: 14px; vertical-align: middle; } .mkt-prose h1 { font-size: var(--text-3xl); font-weight: var(--weight-black); letter-spacing: -0.02em; margin: 0 0 var(--space-3); line-height: var(--leading-tight); } .mkt-prose .mkt-lead { font-size: var(--text-lg); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin: 0 0 var(--space-7); } .mkt-prose h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -0.01em; margin: var(--space-8) 0 var(--space-3); scroll-margin-top: calc(var(--mkt-nav-h) + var(--space-4)); } .mkt-prose h3 { font-size: var(--text-md); font-weight: var(--weight-bold); margin: var(--space-5) 0 var(--space-2); } .mkt-prose p { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin: 0 0 var(--space-4); } .mkt-prose ul, .mkt-prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); } .mkt-prose li { margin-bottom: var(--space-2); } .mkt-prose a { color: var(--mkt-accent); text-decoration: none; font-weight: var(--weight-medium); } .mkt-prose a:hover { text-decoration: underline; } .mkt-prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--color-hover-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 5px; color: var(--mkt-ink); } .mkt-prose strong { color: var(--color-text); font-weight: var(--weight-semibold); } .mkt-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-5); font-size: var(--text-sm); display: block; overflow-x: auto; } .mkt-prose thead th { text-align: left; font-weight: var(--weight-bold); color: var(--color-text); border-bottom: 2px solid var(--color-border); } .mkt-prose th, .mkt-prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); white-space: nowrap; vertical-align: top; } .mkt-prose th:first-child, .mkt-prose td:first-child { color: var(--color-text); font-weight: var(--weight-medium); } .mkt-prose tbody tr:hover { background: var(--color-hover-bg); } .mkt-prose pre { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); background: var(--color-hover-bg); border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); overflow-x: auto; color: var(--color-text); white-space: pre; -webkit-overflow-scrolling: touch; } .mkt-prose pre code { font-family: inherit; font-size: inherit; background: none; border: 0; border-radius: 0; padding: 0; color: inherit; } .mkt-method { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-sm); border: 1px solid currentColor; background: transparent; vertical-align: middle; } .mkt-method.get { color: var(--color-info); } .mkt-method.post { color: var(--color-success); } .mkt-method.patch { color: var(--color-warning); } .mkt-method.delete { color: var(--color-error); } .mkt-prose td .mkt-method { white-space: nowrap; } .mkt-callout { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-input); background: var(--mkt-grad-soft); border: 1px solid var(--color-border); margin: var(--space-5) 0; font-size: var(--text-base); color: var(--color-text-secondary); } .mkt-callout .material-symbols-rounded { color: var(--mkt-accent); flex-shrink: 0; } .mkt-steps-list { counter-reset: mkt-step; list-style: none; padding: 0; } .mkt-steps-list > li { position: relative; padding-left: var(--space-9); margin-bottom: var(--space-4); } .mkt-steps-list > li::before { counter-increment: mkt-step; content: counter(mkt-step); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--mkt-grad); color: #fff; font-size: var(--text-sm); font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; } .mkt-docs-pager { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .mkt-docs-pager a { text-decoration: none; border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); flex: 1; transition: border-color var(--transition-fast); } .mkt-docs-pager a:hover { border-color: var(--mkt-accent); } .mkt-docs-pager .dir { font-size: var(--text-xs); color: var(--color-text-muted); } .mkt-docs-pager .ttl { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); } .mkt-docs-pager .next { text-align: right; } .mkt-docs-toc { position: sticky; top: var(--mkt-nav-h); align-self: start; max-height: calc(100vh - var(--mkt-nav-h)); overflow-y: auto; padding: var(--space-8) 0; } .mkt-docs-toc-title { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 var(--space-3); } .mkt-docs-toc a { display: block; text-decoration: none; color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-1) 0; border-left: 2px solid transparent; padding-left: var(--space-3); } .mkt-docs-toc a:hover, .mkt-docs-toc a.is-active { color: var(--mkt-accent); border-left-color: var(--mkt-accent); } .mkt-docs-mobilebar { display: none; } /* ========================================================================== LEGAL ========================================================================== */ .mkt-legal { max-width: 820px; margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-16); } .mkt-legal-head { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); } .mkt-legal-head h1 { font-size: var(--text-3xl); font-weight: var(--weight-black); letter-spacing: -0.02em; margin: 0 0 var(--space-2); } .mkt-legal-head .upd { font-size: var(--text-sm); color: var(--color-text-muted); } .mkt-legal.mkt-prose h2 { border-top: none; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { .mkt-docs { grid-template-columns: 240px minmax(0, 1fr); } .mkt-docs-toc { display: none; } } @media (max-width: 900px) { .mkt-cards { grid-template-columns: repeat(2, 1fr); } .mkt-pricing-grid { grid-template-columns: repeat(2, 1fr); } .mkt-footer-top { grid-template-columns: 1fr; gap: var(--space-8); } } @media (max-width: 860px) { .mkt-nav-links { display: none; } .mkt-nav-actions { display: none; } .mkt-nav-burger { display: inline-flex; } .mkt-split { grid-template-columns: 1fr; gap: var(--space-6); } .mkt-split--reverse .mkt-split-media { order: 0; } .mkt-steps { grid-template-columns: 1fr; } .mkt-docs { grid-template-columns: 1fr; padding: 0; } .mkt-docs-side { display: none; position: static; max-height: none; } .mkt-docs-side.is-open { display: block; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); } .mkt-docs-main { padding: var(--space-6) var(--space-6) var(--space-12); } .mkt-docs-mobilebar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); position: sticky; top: var(--mkt-nav-h); background: var(--color-card-bg); z-index: 2; } } @media (max-width: 640px) { .mkt-section { padding: var(--space-12) 0; } .mkt-cards { grid-template-columns: 1fr; } .mkt-pricing-grid { grid-template-columns: 1fr; } .mkt-provider-grid { grid-template-columns: repeat(2, 1fr); } .mkt-provider-feat { flex-direction: column; text-align: center; padding: var(--space-7) var(--space-5) var(--space-6); } .mkt-provider-feat-info { text-align: center; } .mkt-provider-feat-sub { justify-content: center; } .mkt-footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .mkt-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .mkt-hero { padding: var(--space-12) 0 var(--space-10); } .mkt-hero h1 { white-space: normal; } .mkt-hero-cta { flex-direction: column; } .mkt-hero-cta .mc-btn { width: 100%; } .mkt-cta { padding: var(--space-12) var(--space-5); } } @media (max-width: 460px) { .mkt-footer-cols { grid-template-columns: 1fr; } }