/* public/wsk-commerce-site/style.css — the WSK Commerce PRODUCT's own public marketing site (what a business owner sees when deciding whether to sign up for WSK Commerce itself). Fully separate from: - public/css/style.css's tenant-facing .store-page rules (a CLIENT's own shop, with its own configurable theme presets — navy/emerald/ rose etc., picked per-tenant in their Settings) - public/platform-admin/style.css (the dark "control room" the super-admin manages clients from) This site intentionally has ONE fixed identity — the same navy/coral pairing as the tenant admin panel's default look (--brand/--accent from public/css/style.css, loaded alongside this file) — since it's WSK Commerce's own brand, not a themeable client. This file only adds the marketing-specific layout (nav, hero, pricing cards, etc.) on top of those shared color/shadow/radius tokens; it defines no colors of its own. */ /* Inter, loaded via Google Fonts link tags in each page's — scoped to .mkt-page only so the rest of the app (tenant admin/storefront, platform admin) keeps its existing system-font stack untouched. A real webfont reads as noticeably more "designed" than the system stack at this page's larger display sizes (hero headline, price numbers), which is most of what separates a generic-looking page from a polished one. */ .mkt-page { background: var(--bg); min-height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .mkt-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(20,30,40,.02); position: sticky; top: 0; z-index: 20; } .mkt-nav-inner { max-width: 1120px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* Slim, standard nav bar: 16px vertical padding around a logo capped to 40px tall gives ~72px total header height — a normal, professional size (in line with Stripe/Linear/GitHub-style nav bars). The logo is always sized in normal flow to fit fully inside this height; nothing is ever allowed to grow the bar or overflow above/below it, and there's no background box behind it — just the mark itself. */ .mkt-logo { font-size: 19px; font-weight: 800; color: var(--brand); letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; } .mkt-logo span { color: var(--accent); } /* Logo image (default transparent mark, or a custom upload from Platform Admin -> Settings -> Platform Branding — swapped in at runtime by public/wsk-commerce-site/nav.js): capped to fit comfortably inside the slim nav bar in normal flow, no background, no cropping — it's simply scaled down to fit if it's larger than this. Slightly taller than before now that the default asset itself is cropped tight to the mark (no more large built-in canvas padding), so this cap reflects the logo's real visible size instead of shrinking mostly-empty space. */ .mkt-logo-img { max-height: 44px; max-width: 210px; width: auto; height: auto; object-fit: contain; display: block; } .mkt-footer-brand .mkt-logo-img { max-height: 38px; max-width: 190px; } .mkt-nav-links { display: flex; align-items: center; gap: 28px; } .mkt-nav-links a { color: var(--text); font-weight: 600; font-size: 14.5px; border-bottom: 2px solid transparent; padding-bottom: 3px; } .mkt-nav-links a:hover { color: var(--brand); } .mkt-nav-links a.active { color: var(--brand); border-bottom-color: var(--accent); } .mkt-nav-cta { display: flex; align-items: center; gap: 10px; } /* Mobile menu button + dropdown — the desktop .mkt-nav-links row disappears below 860px (not enough room next to the logo and Request Demo button), so this is what replaces it instead of navigation just vanishing with no way to get to Home/Pricing from a phone. Hidden on desktop; toggled by public/wsk-commerce-site/nav.js, shared by every marketing page. */ .mkt-nav-toggle { display: none; background: none; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 9px; cursor: pointer; color: var(--text); align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; box-sizing: border-box; } .mkt-nav-toggle:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); } .mkt-nav-mobile { display: none; } .mkt-nav-mobile.open { display: flex; flex-direction: column; width: 100%; padding: 6px 0 4px; margin-top: 4px; border-top: 1px solid var(--border); } .mkt-nav-mobile a { display: block; padding: 14px 6px; color: var(--text); font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--border); } .mkt-nav-mobile a:last-child { border-bottom: none; } .mkt-nav-mobile a.active { color: var(--brand); } /* Fluid section padding: continuous clamp() scaling from a 320px phone up through 1120px+ desktop instead of 2-3 discrete breakpoint jumps — the gap between "phone" and "the next breakpoint up" no longer has a visible seam where spacing suddenly changes. */ .mkt-section { max-width: 1120px; margin: 0 auto; padding: clamp(40px, 4vw + 22px, 76px) clamp(18px, 3vw + 8px, 28px); } .mkt-section.tight { padding-top: clamp(28px, 2.6vw + 14px, 48px); padding-bottom: clamp(28px, 2.6vw + 14px, 48px); } .mkt-hero { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; padding: clamp(48px, 7vw + 20px, 100px) clamp(18px, 3vw + 8px, 28px) clamp(52px, 7vw + 24px, 108px); position: relative; overflow: hidden; } /* A faint dot-grid, purely decorative — the flat gradient alone read as a plain color block rather than a designed surface; this is the same trick real SaaS marketing sites use to give a solid-color hero some texture without competing with the headline for attention. Clipped by the section's own overflow:hidden, never affects layout. */ .mkt-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px); background-size: 26px 26px; pointer-events: none; } .mkt-hero::after { content: ''; position: absolute; top: -140px; right: -100px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(232,93,78,.2) 0%, transparent 70%); pointer-events: none; } /* Second, cooler glow bottom-left balances the warm coral one top-right — gives the gradient a bit more depth/dimension instead of one flat light source, still purely decorative and clipped by overflow:hidden. */ .mkt-hero-inner::after { content: ''; position: absolute; bottom: -180px; left: -140px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } .mkt-hero-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; position: relative; } .mkt-eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 22px; padding: 7px 14px 7px 12px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); } .mkt-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; } /* public/css/style.css has a global "h1, h2, h3, h4 { color: #10151b }" rule that targets the element directly — an explicit same-element rule always wins over an inherited value, no matter the parent's specificity. Without this override, the hero h1 silently inherits near-black text on the navy gradient instead of the white set on .mkt-hero. Confirmed by the user's screenshot, not just assumption — same class of bug as the accent-on-white contrast issue fixed earlier, just via inheritance instead of a literal wrong hex value. */ /* Recalibrated so the minimum is actually reached fluidly at a 320px phone (28px) instead of clamp()'s preferred value (4.4vw) staying below the old 34px floor on every phone width and silently doing nothing — that gap was being papered over by a separate hard 28px override at 420px instead of by the formula itself. One continuous curve now: 28px at 320px up to 50px by ~1140px viewport, no seam, no override needed. */ .mkt-hero h1 { font-size: clamp(28px, 4vw + 15px, 50px); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 22px; max-width: 17ch; color: #fff; } .mkt-hero p.lead { font-size: clamp(15px, 1.3vw + 11px, 17.5px); line-height: 1.65; color: rgba(255,255,255,.88); max-width: 46ch; margin: 0 0 30px; } .mkt-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } /* Compact trust line right under the primary CTAs — the highest-attention spot on the page — restating only claims already made elsewhere (FAQ, Why section), not new promises. rgba(255,255,255,.78) on the hero's navy gradient measures comfortably above the 4.5:1 AA bar for this text size. */ .mkt-hero-trust { margin: 16px 0 0; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.78); letter-spacing: .01em; } /* rgba(255,255,255,.8) on the hero's navy gradient verified at 8.01:1. */ .mkt-hero-secondary-link { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.8); } .mkt-hero-secondary-link:hover { color: #fff; } .mkt-hero-panel { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); padding: 30px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); position: relative; z-index: 1; } .mkt-hero-panel-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 4px; margin: 0 -4px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14px; color: rgba(255,255,255,.92); border-radius: 7px; transition: background .18s var(--ease), padding-left .18s var(--ease); } .mkt-hero-panel-row:last-child { border-bottom: none; } .mkt-hero-panel-row:hover { background: rgba(255,255,255,.05); padding-left: 10px; } .mkt-hero-panel-row svg { color: var(--accent); flex-shrink: 0; } /* Splits the panel into "every plan" vs "Shop + Store adds" so the hero's own visual doesn't contradict the headline's Store Only -> Shop + Store growth message by implying POS/multi-branch come with every plan. */ .mkt-hero-panel-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.55); padding: 2px 4px 9px; } .mkt-hero-panel-group-label-second { padding-top: 12px; } .mkt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--radius); font-weight: 700; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease); text-decoration: none; } /* White text directly on var(--accent) measures 3.44:1 contrast — fails WCAG AA (needs 4.5:1 for text this size) and was a real, measured legibility bug on the site's most-clicked button, not just a taste call. var(--accent-dark) alone only reaches 4.47:1, still short. #ba4a3e below is the same coral hue darkened until white text clears 4.5:1 (verified 5.08:1); hover uses a further-darkened #a24137 (6.27:1). Scoped to this file only — doesn't touch the shared --accent/--accent-dark tokens used elsewhere in the app. */ .mkt-btn-primary { background: #ba4a3e; color: #fff; box-shadow: 0 6px 18px rgba(232,93,78,.35); } .mkt-btn-primary:hover { background: #a24137; color: #fff; transform: translateY(-1px); } .mkt-btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); } .mkt-btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; } .mkt-btn-outline { background: var(--surface); color: var(--brand); border-color: var(--border-strong); } .mkt-btn-outline:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand); } /* ---- Stats row: capability highlights, not usage counts — deliberately not claiming a specific customer/order number this early (that's a checkable claim, not a design choice). Sits right under the hero, web.hr-style, just with true statements instead of a fabricated tally. */ .mkt-stats-row { background: var(--brand-light); border-bottom: 1px solid var(--border); padding: 36px 24px; } .mkt-stats-row-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } /* Vertical dividers between the four cells on desktop — reads a bit more like a deliberate "trust bar" strip instead of four loose text blocks floating in open space. Only the border, no extra markup needed. */ .mkt-stats-row-inner > div { border-left: 1px solid rgba(20,41,63,.09); padding-left: 20px; } .mkt-stats-row-inner > div:first-child { border-left: none; padding-left: 0; } .mkt-stat-icon { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.7); color: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: var(--shadow-sm); } .mkt-stat-num { font-size: 16px; font-weight: 800; color: var(--brand); letter-spacing: -0.01em; line-height: 1.25; } /* text-muted (#67707c) on this row's brand-light bg measures 4.26:1 — just under the 4.5:1 AA bar for normal-size text. #5d6570 is the same gray darkened until it clears 4.5:1 (verified 5.01:1), scoped to this label only so the shared --text-muted token elsewhere is untouched. */ .mkt-stat-label { font-size: 12.5px; font-weight: 600; color: #5d6570; margin-top: 5px; line-height: 1.4; } @media (max-width: 700px) { .mkt-stats-row-inner { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } .mkt-stats-row-inner > div:nth-child(even) { border-left: 1px solid rgba(20,41,63,.09); padding-left: 20px; } .mkt-stats-row-inner > div:nth-child(odd) { border-left: none; padding-left: 0; } } @media (max-width: 460px) { .mkt-stats-row-inner { grid-template-columns: 1fr; } .mkt-stats-row-inner > div { border-left: none !important; padding-left: 0 !important; } } /* ---- "Why WSK Commerce" section: checkmark bullet list next to a supporting visual panel, mirroring web.hr's benefits-with-image pattern. The visual panel reuses the exact row structure already built for .mkt-hero-panel (icon + label + checkmark), just restyled for a light surface instead of the dark hero — same component, new context, rather than inventing a new one. ---- */ .mkt-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } .mkt-why-list { display: flex; flex-direction: column; gap: 24px; } .mkt-why-item { display: flex; gap: 14px; align-items: flex-start; transition: transform .18s var(--ease); } .mkt-why-item:hover { transform: translateX(3px); } .mkt-why-check { width: 30px; height: 30px; border-radius: 50%; background: var(--success-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; box-shadow: inset 0 0 0 1px rgba(16,122,56,.12); } /* var(--success) directly on var(--success-light) is only 2.96:1 — fails even the lower 3:1 bar WCAG sets for meaningful icons/graphics. #107a38 is the same green darkened to a verified 4.89:1. */ .mkt-why-check svg { color: #107a38; } .mkt-why-item h4 { font-size: 15.5px; font-weight: 700; margin: 0 0 4px; color: var(--text); letter-spacing: -0.005em; } .mkt-why-item p { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.55; } .mkt-why-visual { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-md); } .mkt-why-visual-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 6px; margin: 0 -6px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); border-radius: 7px; transition: background .18s var(--ease); } .mkt-why-visual-row:hover { background: var(--brand-light); } .mkt-why-visual-row:last-child { border-bottom: none; } .mkt-why-visual-row svg { color: #107a38; flex-shrink: 0; } @media (max-width: 860px) { .mkt-why-grid { grid-template-columns: 1fr; gap: 32px; } .mkt-why-visual { order: -1; } } .mkt-section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(30px, 2.4vw + 22px, 44px); } .mkt-section-head h2 { font-size: clamp(22px, 2.6vw + 14px, 30px); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--text); } .mkt-section-head p { color: var(--text-muted); font-size: 15.5px; line-height: 1.6; margin: 0; } /* ---- Product screenshots (Online Store / Mobile Store / Client Admin Panel) — static SVGs generated as marketing illustrations, embedded the same way any other on this page would be. No admin/upload system, no backend involved; see public/wsk-commerce-site/screenshots/. Client- facing visuals only — nothing from Master Admin is shown on this site. ---- */ .mkt-screenshot-figure { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 10px 0; box-shadow: var(--shadow-md); overflow: hidden; } .mkt-screenshot-figure img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; } .mkt-screenshot-figure figcaption { padding: 14px 6px; text-align: center; font-size: 13.5px; font-weight: 650; color: var(--text-muted); } .mkt-screenshot-pair { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; } /* mobile-store.svg is a wide landscape composition (same shape family as online-store.svg), not a tall portrait phone mockup — so this figure uses the same width:100%/height:auto sizing as every other screenshot (base .mkt-screenshot-figure img rule above) instead of a fixed max-height, which previously forced it wider than its column and caused overflow/ cropping. The 1.7fr/1fr column split is enough on its own to size it correctly relative to the online-store image beside it. */ .mkt-screenshot-figure-narrow { display: flex; flex-direction: column; align-items: center; } @media (max-width: 860px) { .mkt-screenshot-pair { grid-template-columns: 1fr; } } /* ---- Optional promo video (Master-Admin-managed, section hidden by default via inline style until index.html's script confirms an active video exists — see api/marketing.js getPromoVideo). ---- */ .mkt-promo-video-wrap { max-width: 860px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; aspect-ratio: 16 / 9; } .mkt-promo-video-wrap video { display: block; width: 100%; height: 100%; background: #000; } /* ---- Prose — Privacy Policy / Terms of Service pages. Left-aligned, readable body copy (unlike .mkt-section-head above, which is centered and meant for short intros) with generous line-height and clear heading rhythm for long-form legal-style text. ---- */ .mkt-prose h3 { font-size: 18px; font-weight: 750; color: var(--text); margin: 36px 0 10px; letter-spacing: -0.01em; } .mkt-prose h3:first-child { margin-top: 0; } .mkt-prose p { color: var(--text-muted); font-size: 15px; line-height: 1.75; margin: 0 0 14px; } .mkt-prose a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .mkt-legal-note { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); font-style: italic; } /* ---- Pricing page FAQ — tabbed interface: one question active at a time instead of all 7 answers always expanded. Short topic-word tab labels are purely navigational; the full original question/answer wording is unchanged inside each panel (see pricing.html). Answers only restate claims already made elsewhere on this page/site (monthly billing, no setup fees, data export, personal onboarding) rather than introducing new, unverifiable policy claims. ---- */ .mkt-faq-tabs-wrap { max-width: 820px; margin: 0 auto; } /* Segmented-control style tab track (tinted pill background, active tab floats above it as a white pill with its own shadow) rather than a plain underline — reads closer to the tab switchers on Linear/Stripe-style products. Native scrollbar hidden since the edge-fade below already signals horizontal scroll; nothing about scrollability is lost. */ .mkt-faq-tablist { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--brand-light); border: 1px solid var(--border); border-radius: 999px; padding: 5px; margin-bottom: 32px; position: relative; scrollbar-width: none; } .mkt-faq-tablist::-webkit-scrollbar { display: none; } .mkt-faq-tab { flex-shrink: 0; appearance: none; background: transparent; border: none; cursor: pointer; padding: 10px 17px; font-family: inherit; font-size: 13.5px; font-weight: 650; color: var(--text-muted); white-space: nowrap; border-radius: 999px; transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); } .mkt-faq-tab:hover { color: var(--text); } .mkt-faq-tab.active { color: var(--brand); background: var(--surface); font-weight: 700; box-shadow: var(--shadow-sm); } .mkt-faq-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Soft edge fade hinting the tab strip scrolls sideways on narrow screens — same technique as the pricing comparison table above: pinned to the scroll container's own box (not its scrolled content), so it stays put at the right edge regardless of scroll position. Fades into the track's own tinted background, not the page background, since it sits inside the rounded pill track now. */ @media (max-width: 700px) { .mkt-faq-tablist::after { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 30px; background: linear-gradient(to right, transparent, var(--brand-light) 65%); pointer-events: none; border-radius: 0 999px 999px 0; } .mkt-faq-tab { padding: 9px 14px; font-size: 12.5px; } } .mkt-faq-panel { padding: 2px 2px 6px; } .mkt-faq-panel h4 { font-size: 16.5px; font-weight: 700; color: var(--text); margin: 0 0 10px; letter-spacing: -0.005em; } .mkt-faq-panel p { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; margin: 0; } .mkt-faq-panel:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: 8px; } @media (prefers-reduced-motion: no-preference) { .mkt-faq-panel:not([hidden]) { animation: mktFaqFade .28s var(--ease) both; } } @keyframes mktFaqFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .mkt-feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); } /* Thin top accent bar, hidden until hover — a small "designed" detail that echoes the card's own icon color (navy or coral, whichever this card was assigned) rather than adding a third color to the palette. */ .mkt-feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .mkt-feature-card:nth-child(3n+2)::before { background: var(--accent); } .mkt-feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); } .mkt-feature-card:hover::before { transform: scaleX(1); } .mkt-feature-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: inset 0 0 0 1px rgba(30,58,95,.06); transition: transform .2s var(--ease); } .mkt-feature-card:hover .mkt-feature-icon { transform: scale(1.06); } /* Alternating navy/coral icon chips (assigned in index.html via a repeating nth-child pattern) — nine identical navy squares in a row read as one flat block; two colors from the same palette, alternating, keeps the grid feeling designed rather than repetitive without introducing any color outside the existing brand pair. */ .mkt-feature-card:nth-child(3n+2) .mkt-feature-icon { background: var(--accent-light); color: var(--accent-dark); } .mkt-feature-card h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; color: var(--text); } .mkt-feature-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0; } /* ---- Homepage: "Two ways to sell with WSK Commerce" — Store Only vs Shop + Store, placed right after the hero so the site's core positioning ("start with an online store, grow into full retail") lands before any other content. Classes here are homepage-exclusive (confirmed via grep against pricing.html/request-demo.html/privacy.html/terms.html before adding), so no body.mkt-home scoping needed — same convention as .mkt-hero*/.mkt-feature-card* above. ---- */ .mkt-plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .mkt-plan-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); } .mkt-plan-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); } .mkt-plan-tile.featured { border: 2px solid var(--accent); } .mkt-plan-tile-badge { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); background: var(--brand-light); padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; } .mkt-plan-tile.featured .mkt-plan-tile-badge { color: #ba4a3e; background: var(--accent-light); } .mkt-plan-tile h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--text); } .mkt-plan-tile > p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 20px; } .mkt-plan-tile ul { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; } .mkt-plan-tile li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; padding: 6px 0; color: var(--text); } .mkt-plan-tile li svg { color: #107a38; flex-shrink: 0; margin-top: 2px; } .mkt-plan-tile-cta { font-size: 13.5px; font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; } .mkt-plan-tile-cta:hover { color: var(--accent-dark); } @media (max-width: 700px) { .mkt-plans-grid { grid-template-columns: 1fr; } } /* ---- Homepage: testimonials (placeholder content — see the HTML comment above this section for how to swap in real quotes later). Same card language as .mkt-feature-card (surface/border/shadow-sm, hover lift, top accent bar) so it reads as part of the same design system instead of a bolted-on new component. ---- */ .mkt-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .mkt-testimonial-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-sm); margin: 0; position: relative; overflow: hidden; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); } .mkt-testimonial-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .mkt-testimonial-card:nth-child(3n+2)::before { background: var(--accent); } .mkt-testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); } .mkt-testimonial-card:hover::before { transform: scaleX(1); } .mkt-testimonial-quote-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .mkt-testimonial-card:nth-child(3n+2) .mkt-testimonial-quote-icon { background: var(--accent-light); color: var(--accent-dark); } .mkt-testimonial-card blockquote { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--text); font-style: normal; } .mkt-testimonial-card figcaption { display: flex; flex-direction: column; gap: 2px; } .mkt-testimonial-name { font-size: 13.5px; font-weight: 700; color: var(--text); } .mkt-testimonial-role { font-size: 12.5px; color: var(--text-muted); } @media (max-width: 860px) { .mkt-testimonial-grid { grid-template-columns: 1fr; } } /* ---- Homepage: founder/mission statement — a full-bleed tinted band (same technique as .mkt-stats-row) so it reads as a deliberate "statement" moment breaking up the run of white card-grid sections above it, not just another section on the same background. ---- */ .mkt-mission-band { background: var(--brand-light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .mkt-mission-card { max-width: 760px; margin: 0 auto; text-align: left; position: relative; } /* Faint watermark quote mark, painted behind the heading/body text by plain DOM order (both are position:relative, so the later h2/p simply paint on top) — deliberately low-opacity so it reads as a backdrop accent at any size rather than something that has to avoid colliding with the text. */ .mkt-mission-mark { font-size: clamp(40px, 6vw + 20px, 64px); line-height: 1; font-weight: 800; color: var(--brand); opacity: .16; position: absolute; top: -14px; left: -4px; font-family: Georgia, 'Times New Roman', serif; pointer-events: none; } .mkt-mission-card h2 { font-size: clamp(22px, 2.6vw + 14px, 28px); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--text); position: relative; } .mkt-mission-card p { color: var(--text); font-size: 15px; line-height: 1.75; margin: 0; position: relative; } /* Compound selector, not just ".mkt-mission-sign" — same reasoning as the ".mkt-pricing-grid.mkt-pricing-grid-single" fix above: ".mkt-mission-card p" is a class+element selector, which outranks a lone class selector regardless of source order, so a lone ".mkt-mission-sign" rule here would have silently lost the color/size override. Compounding onto "p" gives this rule the higher specificity it needs on its own merits. */ .mkt-mission-card p.mkt-mission-sign { margin-top: 18px; font-weight: 700; color: var(--brand); font-size: 13.5px; line-height: 1.4; } .mkt-cta-band { background: var(--brand-dark); color: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 3vw + 18px, 50px) clamp(22px, 3vw + 14px, 42px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* Same inherited-color bug as .mkt-hero h1 above — the global h2 rule was winning over .mkt-cta-band's inherited white. */ .mkt-cta-band h2 { font-size: clamp(19px, 1.6vw + 14px, 24px); font-weight: 800; margin: 0 0 8px; color: #fff; } .mkt-cta-band p { margin: 0; color: rgba(255,255,255,.82); font-size: 14.5px; } /* ---- Footer: structured columns (Product / Get Started / Legal) instead of one sparse line — matches web.hr's footer density. "Legal" entries are plain text, not links, since there's no Privacy Policy/Terms page built yet; a dead link that 404s would be worse than an honest placeholder label. ---- */ .mkt-footer { border-top: 1px solid var(--border); padding: 48px 24px 24px; } .mkt-footer-top { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; } .mkt-footer-brand p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 12px 0 0; max-width: 30ch; } .mkt-footer-col h4 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text); margin: 0 0 14px; } .mkt-footer-col { display: flex; flex-direction: column; gap: 10px; } .mkt-footer-col a, .mkt-footer-col span { font-size: 13.5px; color: var(--text-muted); font-weight: 600; } .mkt-footer-col a:hover { color: var(--brand); } .mkt-footer-bottom { max-width: 1120px; margin: 0 auto; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); } @media (max-width: 700px) { .mkt-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } .mkt-footer-brand { grid-column: 1 / -1; } } /* ---- Pricing page ---- */ /* Two independent toggles (billing period, currency) side by side above the price cards — separated by a divider so they read as two distinct controls, not one confusing five-state switch. Stacks on mobile. */ .mkt-controls-row { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-bottom: 48px; } .mkt-controls-row .mkt-toggle-wrap, .mkt-controls-row .mkt-currency-wrap { margin-bottom: 0; } .mkt-currency-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; padding-left: 28px; border-left: 1px solid var(--border); } @media (max-width: 560px) { .mkt-currency-wrap { padding-left: 0; border-left: none; } } .mkt-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 48px; } .mkt-toggle { position: relative; width: 52px; height: 28px; border-radius: 20px; background: var(--border-strong); border: none; cursor: pointer; flex-shrink: 0; } .mkt-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s var(--ease); } .mkt-toggle.on { background: var(--brand); } .mkt-toggle.on::after { transform: translateX(24px); } .mkt-toggle-label { font-size: 14.5px; font-weight: 650; color: var(--text-muted); } .mkt-toggle-label.active { color: var(--text); } /* var(--accent-dark) text on var(--accent-light) bg measures 3.91:1 — also fails AA. #b23d31 (same hue, darkened) verified at 5.09:1. */ .mkt-save-badge { background: var(--accent-light); color: #b23d31; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-left: 4px; } /* ---- Store Only vs Shop + Store framing (top of pricing page) — two short "who's this for" cards, shown before any price, so a visitor understands which plan group applies to them before comparing numbers. Neither card outranks the other visually (same size/weight/border) — Store Only is a legitimate, equally-designed plan, not a lesser one. ---- */ .mkt-plan-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0 auto 48px; } .mkt-plan-intro-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 26px 24px; box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); } .mkt-plan-intro-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); } .mkt-plan-intro-eyebrow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); margin-bottom: 8px; } .mkt-plan-intro-card h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--text); } .mkt-plan-intro-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0; } @media (max-width: 700px) { .mkt-plan-intro { grid-template-columns: 1fr; } } /* Compact trust line above the billing/currency toggles — same restated- claims-only approach as the hero's .mkt-hero-trust, just on a light surface instead of the dark hero gradient. */ .mkt-trust-strip { text-align: center; font-size: 12.5px; font-weight: 650; color: var(--text-muted); margin: 0 0 28px; letter-spacing: .01em; } /* ---- Plan group heading — sits directly above each pricing group's card(s) (Store Only's single card, Shop + Store's 3-card row) so the grouping is obvious while scrolling, not just inferable from card count. ---- */ .mkt-plan-group { margin-bottom: 40px; } .mkt-plan-group-head { display: flex; align-items: baseline; gap: 12px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; } .mkt-plan-group-head h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--text); text-align: center; } .mkt-plan-group-tag { font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--brand-light); padding: 3px 10px; border-radius: 20px; } /* Store Only's single card centered and capped narrower than the full 3-column grid width, so it doesn't stretch to look like an oversized generic card — reads as one deliberate, focused plan. */ /* Compound selector (not just ".mkt-pricing-grid-single") is deliberate: this and the base ".mkt-pricing-grid" rule below both set grid-template-columns at equal specificity as two plain single-class selectors, so whichever one is LATER in the file would silently win regardless of which class "means" more — that was the actual bug here (repeat(3,1fr) from the base rule was winning, leaving 2 empty grid tracks beside the single Store Only card, confirmed via screenshot). ".mkt-pricing-grid.mkt-pricing-grid-single" has higher specificity than either class alone, so it wins no matter what order the rules are in. */ .mkt-pricing-grid.mkt-pricing-grid-single { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; } .mkt-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; margin-bottom: 64px; } .mkt-price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); position: relative; } .mkt-price-card.featured { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); } /* Same contrast fix as .mkt-btn-primary above — white on var(--accent) is 3.44:1, fails AA. #ba4a3e verified at 5.08:1. */ .mkt-price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: #ba4a3e; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 14px; border-radius: 20px; } .mkt-price-card h3 { font-size: 18px; font-weight: 800; margin: 4px 0 6px; color: var(--text); } .mkt-price-card .mkt-price-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; min-height: 34px; } .mkt-price-amount { font-size: clamp(28px, 2vw + 22px, 36px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1; } .mkt-price-amount span { font-size: 14px; font-weight: 600; color: var(--text-muted); } .mkt-price-period { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 24px; } .mkt-price-card ul { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; } .mkt-price-card li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; padding: 7px 0; color: var(--text); } .mkt-price-card li svg { color: var(--success); flex-shrink: 0; margin-top: 2px; } .mkt-price-card .mkt-btn { width: 100%; } .mkt-compare-wrap { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; } .mkt-compare-note { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 14px 2px 0; } table.mkt-compare { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } table.mkt-compare th, table.mkt-compare td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; text-align: center; } table.mkt-compare th:first-child, table.mkt-compare td:first-child { text-align: left; color: var(--text); font-weight: 600; } table.mkt-compare thead th { background: var(--brand-light); color: var(--brand); font-weight: 700; font-size: 13px; } table.mkt-compare tbody tr:last-child td { border-bottom: none; } table.mkt-compare .yes { color: var(--success); font-weight: 700; } table.mkt-compare .no { color: var(--border-strong); } /* Deliberate mobile pattern instead of plain "it overflows, good luck": the Feature column stays pinned while the plan columns scroll underneath it, so a phone user never loses track of which row they're looking at mid-scroll, plus a soft edge fade hinting there's more to the right. */ @media (max-width: 700px) { table.mkt-compare th:first-child, table.mkt-compare td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); } table.mkt-compare thead th:first-child { background: var(--brand-light); z-index: 2; } .mkt-compare-wrap::after { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 26px; background: linear-gradient(to right, transparent, rgba(20,30,40,.08)); pointer-events: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } } /* ---- Request Demo form ---- */ .mkt-form-wrap { max-width: 520px; margin: 0 auto; } .mkt-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); } .mkt-field { margin-bottom: 18px; } .mkt-field label { display: block; font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 6px; } .mkt-field input, .mkt-field select, .mkt-field textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 11px 13px; font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface); } .mkt-field input:focus, .mkt-field select:focus, .mkt-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); } .mkt-field-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; } .mkt-hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; } .mkt-form-success { text-align: center; padding: 20px 0; } .mkt-form-success svg { color: var(--success); margin-bottom: 14px; } .mkt-form-success h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--text); } .mkt-form-success p { color: var(--text-muted); font-size: 14px; margin: 0; } .mkt-form-error { color: var(--danger); font-size: 13.5px; margin-top: 10px; display: none; } .mkt-form-error.show { display: block; } @media (max-width: 860px) { .mkt-hero-inner { grid-template-columns: 1fr; gap: 40px; } .mkt-pricing-grid { grid-template-columns: 1fr; } .mkt-nav-links { display: none; } .mkt-nav-toggle { display: inline-flex; } .mkt-cta-band { text-align: center; justify-content: center; } .mkt-cta-band > div:first-child { width: 100%; } /* Tablet tier (701-860px, e.g. 768/820 portrait): the hero visual panel no longer stretches full-bleed under the stacked text — capped and centered so it reads as a deliberately rebalanced tablet layout rather than a desktop panel just squeezed to phone width. Below 700px this is superseded by the compact chip-grid rule further down. */ .mkt-hero-panel { max-width: 480px; margin: 0 auto; } } /* Feature grid: auto-fit instead of a hard-coded 3/2/1 step means it never produces a lone orphan card half-width on its own row at an in-between size (9 cards doesn't divide evenly into 2 columns) — the grid just picks however many 220px-minimum columns actually fit. */ .mkt-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } /* Comparison table: rather than letting 4 columns of text get crushed illegibly on a narrow phone, force a real minimum width so .mkt-compare- wrap's overflow-x:auto kicks in and the table scrolls sideways instead — squished-but-visible text was very likely part of what read as "not display clear" on a phone. */ @media (max-width: 700px) { table.mkt-compare { min-width: 640px; } } /* ---- Hero panel (the closest thing this page has to a "product demo" visual) on real phones: the tablet/desktop version above is a tall stacked list — 2 group labels + 6 rows — which becomes a genuinely oversized vertical block once the hero itself has already stacked to a single column. Root-cause fix, not a smaller version of the same list: recompose it as one compact row of icon-over-label chips holding only the 3 "every plan" items (universally true for both Store Only and Shop + Store); the Shop + Store-only group is dropped here since the "Two ways to sell" section immediately below the hero already covers that distinction in full with proper labeling — nothing here overclaims what's Shop + Store-only by omitting its group label. This takes the panel from ~6 stacked rows (400px+ tall) to a single ~100px-tall row, and the chip grid can never overflow horizontally since each column is a 1fr grid track that wraps its own text. */ @media (max-width: 700px) { .mkt-hero-panel { max-width: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mkt-hero-panel-group-label { display: none; } .mkt-hero-panel-group-label-second ~ .mkt-hero-panel-row { display: none; } .mkt-hero-panel-row { flex-direction: column; text-align: center; justify-content: flex-start; gap: 7px; padding: 12px 6px; margin: 0; border-bottom: none; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 600; line-height: 1.3; } .mkt-hero-panel-row:hover { padding-left: 6px; background: rgba(255,255,255,.1); } .mkt-hero-panel-row svg { margin: 0 auto; } } @media (max-width: 480px) { /* Smallest phones: the nav bar's own padding/gap and the CTA button shrink together so the logo + "Request Demo" + menu button provably fit on one line down to a 320px viewport (checked: ~258px of content in ~288px of available width at 320px) instead of silently wrapping to a second row. */ .mkt-nav-inner { padding: 12px 16px; gap: 12px; } .mkt-logo { font-size: 17px; } .mkt-nav-cta { gap: 8px; } .mkt-nav-cta .mkt-btn { padding: 8px 12px; font-size: 12.5px; } .mkt-footer-top { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 420px) { .mkt-form-card { padding: 24px 18px; } .mkt-price-card { padding: 26px 20px; } .mkt-plan-tile { padding: 22px 20px; } } /* ========================================================================= HOMEPAGE-ONLY premium redesign pass (index.html body carries an extra "mkt-home" class nothing else in this directory gets — see index.html's tag). Everything below is scoped one of two ways: 1. Selectors on classes that only ever appear in index.html's own markup (.mkt-hero*, .mkt-stat-*, .mkt-feature-card*, .mkt-why-*, .mkt-eyebrow — confirmed via grep against pricing.html/privacy.html/ request-demo.html/terms.html before editing any of them above) were edited in place, since no other page can possibly be affected. 2. Everything here, below, touches classes those OTHER pages also use (.mkt-footer, .mkt-cta-band, .mkt-btn-primary/.mkt-btn-ghost) — so every rule in this block is prefixed with "body.mkt-home", which only matches on this one page. pricing.html, request-demo.html, privacy.html, and terms.html render with zero visual change. ========================================================================= */ /* Hero content fades/slides up on page load — CSS-only (nothing to wait on, no JS dependency for above-the-fold content), and only runs at all under the no-preference media query, so a user with reduced motion enabled sees every element at its normal, final, fully-visible state with no animation and no risk of anything being stuck hidden. */ @media (prefers-reduced-motion: no-preference) { body.mkt-home .mkt-hero .mkt-eyebrow, body.mkt-home .mkt-hero h1, body.mkt-home .mkt-hero p.lead, body.mkt-home .mkt-hero-ctas, body.mkt-home .mkt-hero-secondary-link, body.mkt-home .mkt-hero-panel { animation: mktHeroFadeUp .7s cubic-bezier(0.2, 0.6, 0.3, 1) both; } body.mkt-home .mkt-hero h1 { animation-delay: .06s; } body.mkt-home .mkt-hero p.lead { animation-delay: .13s; } body.mkt-home .mkt-hero-ctas { animation-delay: .2s; } body.mkt-home .mkt-hero-secondary-link { animation-delay: .26s; } body.mkt-home .mkt-hero-panel { animation-delay: .16s; } } @keyframes mktHeroFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Scroll-reveal for everything below the fold — classes added by the inline script at the bottom of index.html ONLY after confirming it can also remove them again (see that script's own comment), so nothing here can leave content permanently invisible if JS is slow, blocked, or unsupported. */ body.mkt-home .mkt-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(0.2, 0.6, 0.3, 1), transform .5s cubic-bezier(0.2, 0.6, 0.3, 1); } body.mkt-home .mkt-reveal-in { opacity: 1; transform: translateY(0); } /* Hero primary/ghost CTAs — scoped to .mkt-hero-ctas specifically (which only exists in the hero, itself homepage-only) rather than the base .mkt-btn-primary/.mkt-btn-ghost rules, so Pricing/Request Demo's own buttons (same classes, different page) are untouched. */ body.mkt-home .mkt-hero-ctas .mkt-btn-primary { box-shadow: 0 10px 28px rgba(0,0,0,.28); } body.mkt-home .mkt-hero-ctas .mkt-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.32); } body.mkt-home .mkt-hero-ctas .mkt-btn-ghost:hover { transform: translateY(-2px); } /* CTA band — richer gradient + glow instead of the flat brand-dark fill Pricing's identical-markup CTA band still uses; a touch more depth to match the hero's own treatment right before the footer. */ body.mkt-home .mkt-cta-band { background: linear-gradient(155deg, var(--brand-dark) 0%, var(--brand-darker) 100%); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; padding: 52px 44px; } body.mkt-home .mkt-cta-band::after { content: ''; position: absolute; top: -120px; right: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(232,93,78,.16) 0%, transparent 70%); pointer-events: none; } body.mkt-home .mkt-cta-band > * { position: relative; z-index: 1; } body.mkt-home .mkt-cta-band .mkt-btn-primary { box-shadow: 0 10px 26px rgba(232,93,78,.3); } body.mkt-home .mkt-cta-band .mkt-btn-primary:hover { transform: translateY(-2px); } /* Footer — subtle tinted band instead of the plain white Pricing/Legal pages still use, brand-colored top accent instead of plain gray, and a touch more breathing room. */ body.mkt-home .mkt-footer { background: var(--brand-light); border-top: 1px solid var(--border); padding: 56px 24px 26px; } body.mkt-home .mkt-footer-top { padding-bottom: 40px; } body.mkt-home .mkt-footer-col a { transition: color .15s cubic-bezier(0.2, 0.6, 0.3, 1); } body.mkt-home .mkt-footer-bottom { border-top-color: var(--border-strong); } @media (max-width: 860px) { body.mkt-home .mkt-cta-band { padding: 40px 26px; } }