/* ============================================================ * VALEQUITY — GLOBAL STYLESHEET * ============================================================ * Shared tokens, layout containers, typography, and common * components used across all pages on valequity.ca. * * Include once in : * * ============================================================ */ /* ── Design tokens ─────────────────────────────────── */ :root { /* Single source of truth for the site accent colour. Change --accent to recolour the whole site (buttons, hover tints, focus rings, shadows, nav active state, etc). */ --accent: #cc5500; --orange: var(--accent); /* legacy alias — keep for any code still using --orange */ --orange-border: color-mix(in srgb, var(--accent) 60%, #000); --body-bg: #3f3d3b; --overlay: #191715; --title: #f7f3f0; --text: #d7d7d7; --muted: #c9c9c9; /* --muted: #979797;*/ --inactive: #4d4d4d; --white: #ffffff; --rule: rgba(255,255,255,0.10); --tooltip1: #e4c79c; --vq-mkt-sidebar-w: 180px; --vq-mkt-sidebar-collapsed-w: 72px; } /* ── Reset ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--body-bg); } body { font-family: 'Inter', sans-serif; color: var(--text); min-height: 100vh; background-color: var(--body-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevents page-level horizontal scrollbar caused by 100vw full-bleed sections (100vw includes the vertical scrollbar width, which is slightly wider than body). */ overflow-x: clip; } /* Optional: add class="has-hero-bg" on to paint the house photo as the page backdrop (top center, contain). Default image is hero-bg-01. To use a different backdrop on a page, also add class="hero-bg-02" or "hero-bg-03" to . */ body.has-hero-bg { position: relative; isolation: isolate; background-image: url('/images/hero-bg-01.jpg'); background-position: top center; background-repeat: no-repeat; } body.has-hero-bg.hero-bg-02 { background-image: url('/images/hero-bg-02.jpg'); --hero-bg-photo: url('/images/hero-bg-02.jpg'); } body.has-hero-bg.hero-bg-03 { background-image: url('/images/hero-bg-03.jpg'); --hero-bg-photo: url('/images/hero-bg-03.jpg'); } body.has-hero-bg.hero-bg-04 { background-image: url('/images/hero-bg-04.jpg'); --hero-bg-photo: url('/images/hero-bg-04.jpg'); } body.has-hero-bg.hero-bg-05 { background-image: url('/images/hero-bg-05.jpg'); --hero-bg-photo: url('/images/hero-bg-05.jpg'); } body.has-hero-bg.hero-bg-06 { background-image: url('/images/hero-bg-06.jpg'); --hero-bg-photo: url('/images/hero-bg-06.jpg'); } body.has-hero-bg.hero-bg-07 { background-image: url('/images/hero-bg-07.jpg'); --hero-bg-photo: url('/images/hero-bg-07.jpg'); } body.has-hero-bg { --hero-bg-photo: url('/images/hero-bg-01.jpg'); } @media (max-width: 900px) { body.has-hero-bg.hero-bg-05-mobile { background-image: url('/images/hero-bg-05-mobile.jpg'); --hero-bg-photo: url('/images/hero-bg-05-mobile.jpg'); } } /* Add `hero-bg-blur` to the body to blur ONLY the bg photo. Dedicated ::after layer holds the photo with filter: blur() applied. ::before (dot-matrix) stays crisp. Content (z-index >= 1) stays crisp. */ body.has-hero-bg.hero-bg-blur { background-image: none; } body.has-hero-bg.hero-bg-blur::after { content: ''; position: absolute; inset: 0; background-image: var(--hero-bg-photo); background-position: top center; background-repeat: no-repeat; background-size: 100% 100%; filter: blur(150px); z-index: -1; pointer-events: none; } /* Dot-matrix pattern — sits ABOVE the page bg but below content (z-index: 2), so the texture reads on top of the bg colors. */ body.has-hero-bg::before, body.has-aurora-bg::before, body.has-dotgrid-bg::before { content: ''; position: absolute; inset: 0; background-color: var(--dot-color, #fff); -webkit-mask-image: url('/images/dot-matrix-01.svg'); mask-image: url('/images/dot-matrix-01.svg'); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 40px; mask-size: 40px; opacity: 0.3; pointer-events: none; z-index: 1; } body.has-aurora-bg, body.has-dotgrid-bg { position: relative; background-color: transparent; } a { color: inherit; } /* ── Elementor-style containers ─────────────────────── */ .vq-section { width: 100%; position: relative; } .vq-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0px; position: relative; z-index: 2; } /* Per-section container backgrounds — fill in the matching rule below to give just that section's container its own bg. Base `.vq-container` stays transparent so each section is opt-in. */ .hero .vq-container { /* background: ...; */ } .section-hiw .vq-container { /* background: ...; */ } .section-features .vq-container { /* background: ...; */ } .section-cta .vq-container { /* background: ...; */ } .footer-section .vq-container { /* background: ...; */ } /* pricing.php sections */ .section-value-props .vq-container { /* background: ...; */ } .section-compare .vq-container { /* background: ...; */ } .section-faq .vq-container { background: #3f3d3b; } /* Standard spacing between stacked sections (legacy base — kept for any page not yet using the per-section classes below). */ .section-spacer { padding-top: 96px; } .footer-section { padding-top: 96px; } /* ── Per-section padding ─────────────────────────────── Each homepage section has its own class so you can tune padding independently. Override top and bottom freely. The numbers here mirror the old uniform spacing; tweak one without affecting the others. */ .section-hiw { padding-top: 50px; padding-bottom: 200px; } .hiw .section-hiw { padding-top: 200px; padding-bottom: 200px; } .section-features { padding-top: 200px; padding-bottom: 200px; } .section-cta { padding-top: 200px; padding-bottom: 0; } /* ── Hero typography ───────────────────────────────── */ .hero { padding: 150px 0 220px; position: relative; } /* Full-viewport hero variant — content vertically centered, page-tall. Used on how-it-works, about, features for a tall, focused first impression. Index.php intentionally does NOT use this (its hero has the floating phone and a tighter padding rhythm). */ .hero.hero--full { min-height: 100vh; display: flex; align-items: center; padding: 0; } /* Home-page hero only — narrower container so the floating phone sits closer to the headline at wide viewports. Targets the home hero via `:not(.hero--full)` since it's the only .hero without the modifier. */ .hero:not(.hero--full) .vq-container { max-width: 1046px; } /* Two-column layout: text left, floating phone right. */ .hero-inner { position: relative; } .hero-text { position: relative; z-index: 2; max-width: 700px; } /* ── Hero phone image ───────────────────────────────── */ /* The PNG already has its tilt and drop-shadow baked in, so no CSS transform/filter is needed — just position it. translateY(-50%) is for vertical centering, not a visual effect. */ .hero-phone-wrap { position: absolute; top: 95%; right: -33px; max-width: 560px; transform: translateY(-50%); pointer-events: none; line-height: 0; z-index: 1; } .hero-phone { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; } @media (max-width: 1200px) { .hero-phone-wrap { width: 42%; right: -2%; } } @media (max-width: 1060px) { .hero-phone-wrap { width: 40%; right: -10%; } } @media (max-width: 960px) { /* On mobile, reorder so the hero reads: title → phone → sub → buttons. display: contents lifts .hero-text's children into .hero-inner's flex flow so `order` can interleave them with the sibling .hero-phone-wrap. */ .hero-inner { display: flex; flex-direction: column; } .hero-text { display: contents; } .hero-title { order: 1; } .hero-phone-wrap { order: 2; } .hero-sub { order: 3; } .hero-cta { order: 4; } /* Phone stacks, centered, full-width below the title. */ .hero-phone-wrap { display: block; position: static; width: 100%; max-width: 500px; margin: 24px auto 32px; right: auto; top: auto; transform: none; } } .hero-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(40px, 6.5vw, 66px); line-height: 1.05; letter-spacing: -0.02em; color: var(--title); text-transform: uppercase; margin-bottom: 24px; } .hero-sub { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--text); max-width: 530px; margin-bottom: 50px; } /* ── Section labels & titles ───────────────────────── */ .section-label { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; } .section-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 40px; line-height: 45px; letter-spacing: -0.02em; color: var(--title); margin-bottom: 28px; text-transform: uppercase; } .section-sub { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.5; color: var(--muted); margin: -16px 0 36px; max-width: 60ch; } /* ── Notices ───────────────────────────────────────── */ .vq-notice { margin: 0 0 28px; padding: 14px 24px; font-size: 14px; font-weight: 500; border-radius: 10px; position: relative; z-index: 3; } .vq-notice-success { background: rgba(22,66,40,0.55); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .vq-notice-error { background: rgba(66,22,22,0.55); border: 1px solid rgba(248,113,113,0.35); color: #f87171; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Buttons ───────────────────────────────────────── */ .vq-btn { display: inline-block; padding: 14px 24px; background: rgb(225, 225, 225, 0.05); border: 1px solid var(--rule); color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; border-radius: 8px; transition: background .2s, color .2s, border-color .2s; } .vq-btn:hover { background: color-mix(in srgb, var(--white) 12%, transparent); color: var(--white); } .vq-btn-primary { background: var(--orange); border-color: var(--orange); color: #fff; } .vq-btn-primary:hover { background: #b84d00; border-color: #b84d00; color: #fff; } /* Right-pointing chevron that lives inside a .vq-btn (same SVG as .plan-toggle-icon, rotated to point right). */ .vq-btn-arrow { display: inline-block; width: 9px; height: auto; margin-left: 10px; vertical-align: baseline; transform: rotate(-90deg); transition: transform .2s ease; } .vq-btn-arrow path { fill: currentColor; } .vq-btn:hover .vq-btn-arrow { transform: rotate(-90deg) translateY(-2px); } .vq-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ── FAQ ───────────────────────────────────────────── */ .faq-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 40px; letter-spacing: -0.02em; color: var(--title); margin-bottom: 28px; text-transform: uppercase; } .faq-item { border-bottom: 1px solid var(--rule); padding: 22px 0; } .faq-q { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; } .faq-a { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.7; } /* ── Footer ────────────────────────────────────────── */ .footer { padding: 32px 0 56px; border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; } .footer-logo { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.25em; color: var(--orange); text-transform: uppercase; } .footer-note { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted); font-weight: 400; } .footer-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-family: 'Inter', sans-serif; font-size: 12px; } .footer-links a, .footer-links .footer-copy { color: var(--muted); text-decoration: none; transition: color .2s; } .footer-links a:hover { color: var(--title); } /* ── Spinner ───────────────────────────────────────── */ @keyframes vqSpin { to { transform: rotate(360deg); } } .vq-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: vqSpin .7s linear infinite; vertical-align: middle; margin-right: 6px; } /* ── Animations ────────────────────────────────────── */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* ── Narrow container (legal / prose pages) ────────── */ .vq-container-narrow { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; } /* ── Page eyebrow / headline helpers ───────────────── */ .page-eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .page-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(40px, 6vw, 66px); line-height: 1.02; letter-spacing: -0.02em; color: var(--title); text-transform: uppercase; margin-bottom: 16px; } .page-date { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted); font-weight: 400; margin-bottom: 48px; } /* Orange-accented horizontal rule (hero separator) */ .vq-rule { width: 100%; height: 1px; background: var(--rule); position: relative; margin-bottom: 48px; } .vq-rule::before { content: ''; position: absolute; left: 0; top: 0; width: 60px; height: 3px; background: var(--orange); transform: translateY(-1px); } /* ── Prose (legal pages, long-form text) ───────────── */ .prose h2 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.02em; color: var(--title); margin: 48px 0 16px; text-transform: uppercase; } .prose h2:first-of-type { margin-top: 0; } .prose p { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; color: var(--text); line-height: 1.8; margin-bottom: 16px; } .prose strong { color: var(--title); font-weight: 600; } .prose ul { margin: 0 0 16px; padding-left: 0; list-style: none; } .prose ul li { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; color: var(--text); line-height: 1.8; padding-left: 22px; position: relative; margin-bottom: 6px; } .prose ul li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); } .prose a { color: #ffffff; text-decoration: none; } .prose a:hover { text-decoration: none; } /* Callout / highlight block */ .vq-highlight { /*background: color-mix(in srgb, var(--accent) 6%, transparent); border-left: 3px solid var(--orange);*/ padding: 20px 24px; margin: 24px 0; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--tooltip1); line-height: 1.7; font-weight: 400; border-radius: 0 8px 8px 0; } .vq-highlight a { color: var(--orange); text-decoration: none; } .vq-highlight a:hover { text-decoration: underline; } /* ── Secondary footer (legal & utility pages) ──────── */ .vq-footer-nav { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 24px; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); } .vq-footer-nav a { color: var(--muted); text-decoration: none; transition: color .2s; } .vq-footer-nav a:hover { color: var(--title); } /* ── Centered utility card (success, error, empty) ── */ .vq-center-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 20px; } .vq-center-logo { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.3em; color: var(--orange); margin-bottom: 48px; text-align: center; text-transform: uppercase; } .vq-center-card { border: 1px solid var(--rule); border-radius: 18px; padding: 48px 40px; max-width: 480px; width: 100%; text-align: center; backdrop-filter: blur(55px) saturate(100%); -webkit-backdrop-filter: blur(55px) saturate(100%); } .vq-center-icon { width: 64px; height: 64px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; color: var(--orange); } .vq-center-icon svg { width: 28px; height: 28px; } .vq-center-headline { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 36px; letter-spacing: -0.01em; color: var(--title); margin-bottom: 12px; text-transform: uppercase; } .vq-center-message { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 400; color: var(--text); line-height: 1.6; margin-bottom: 32px; } .vq-center-message strong { color: var(--title); font-weight: 600; } .vq-center-divider { border: none; border-top: 1px solid var(--rule); margin: 0 0 28px; } .vq-center-note { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); line-height: 1.6; } .vq-center-note a { color: var(--orange); text-decoration: none; } .vq-center-note a:hover { text-decoration: underline; } /* ── Plans grid (pricing cards) ────────────────────── */ .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: 24px; position: relative; } .plan { position: relative; z-index: 1; max-width: 360px; width: 100%; justify-self: center; padding: 60px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(55px) saturate(100%); -webkit-backdrop-filter: blur(55px) saturate(100%); opacity: 0; transform: translateY(24px); animation: fadeUp 0.5s forwards; display: flex; flex-direction: column; } .plan:nth-child(1) { animation-delay: 0.10s; } .plan:nth-child(2) { animation-delay: 0.20s; border-color: var(--orange-border); border-width: 1px;} .plan:nth-child(3) { animation-delay: 0.30s; } .plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); z-index: 2; } .plan-name { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.08em; color: var(--text); text-transform: uppercase; text-align: center; margin-bottom: 14px; } .plan-price { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 30px 0 10px; } .plan-currency { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 26px; color: var(--muted); } .plan-amount { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 66px; line-height: 1; letter-spacing: -0.08em; color: var(--white); } .plan-period { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 16px; color: var(--muted); margin-left: 2px; } .plan-rule { height: 1px; background: var(--rule); margin: 20px 0; } .plan-limit { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 0; } .plan-limit-num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: var(--text); letter-spacing: -0.02em; } .plan-limit-label { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.15; color: var(--muted); } /* Plan CTA (inherits vq-btn look but stretches full width) */ .plan-cta-form { margin: 0 0 24px; padding: 0; } .plan-cta { display: block; width: 100%; padding: 14px; background: rgb(225, 225, 225, 0.1); border: 1px solid var(--rule); /* border: 1px solid var(--orange-border);*/ color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; cursor: pointer; border-radius: 8px; transition: background .2s, color .2s, border-color .2s; } .plan-cta:hover { background: color-mix(in srgb, var(--white) 12%, transparent); color: var(--white); } .plan-cta:disabled { opacity: 0.6; cursor: not-allowed; } .plan:nth-child(2) .plan-cta { background: var(--orange); border-color: var(--orange); color: #fff; } .plan:nth-child(2) .plan-cta:hover { background: #b84d00; border-color: #b84d00; } /* Plan features list (orange dot bullets) */ .plan-features { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; } .plan-features li { display: flex; align-items: flex-start; gap: 12px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--muted); } .plan-features li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 4px; } .plan-features li.dim { color: var(--inactive); } .plan-features li.dim::before { background: var(--inactive); } /* Mobile feature-list toggle (hidden on desktop) */ .plan-toggle { display: none; width: 100%; padding: 0px; background: transparent; border: none; color: var(--muted); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; align-items: center; justify-content: center; gap: 10px; } .plan-toggle-icon { width: 12px; height: auto; flex-shrink: 0; transition: transform .25s ease; } .plan-toggle-icon path { fill: var(--text); } .plan-toggle[aria-expanded="true"] .plan-toggle-icon { transform: rotate(180deg); } /* ── Comparison table ──────────────────────────────── */ .compare { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background-color: #3f3d3b; } .compare tbody { background-color: #3f3d3b; } .compare th { padding: 18px 24px; text-align: left; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--rule); background: rgba(255,255,255,0.03); } .compare th:not(:first-child) { text-align: center; } .compare td { padding: 16px 24px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--rule); vertical-align: middle; } .compare td:not(:first-child) { text-align: center; } .compare tr:last-child td { border-bottom: none; } .compare tr:hover td { background: rgba(255,255,255,0.02); } .check { color: var(--orange); font-size: 16px; font-weight: 700; } .cross { color: var(--inactive); font-size: 16px; } /* ── Value prop strip (three-up callouts) ──────────── */ .value-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .value-item { background: rgba(30,28,26,0.55); border: 1px solid var(--rule); border-radius: 14px; padding: 32px; opacity: 0; animation: fadeUp 0.5s forwards; } .value-item:nth-child(1) { animation-delay: 0.4s; } .value-item:nth-child(2) { animation-delay: 0.5s; } .value-item:nth-child(3) { animation-delay: 0.6s; } .value-num { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 48px; color: var(--orange); line-height: 1; margin-bottom: 10px; letter-spacing: -0.03em; } .value-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.55; } /* ── Generic glass card ────────────────────────────── */ .vq-card { position: relative; padding: 40px 32px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(55px) saturate(100%); -webkit-backdrop-filter: blur(55px) saturate(100%); opacity: 0; transform: translateY(24px); animation: fadeUp 0.5s forwards; } /* ── Step cards (numbered) ───────────────────────────── Horizontal scroll-snap carousel on ALL screen sizes. Desktop shows multiple cards at a time with peek, spanning the full page width (breaks out of .vq-container); mobile shows a single card center-snapped with peek. */ .steps-grid { display: flex; flex-wrap: nowrap; gap: clamp(14px, 1.5vw, 24px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; /* Full-bleed out of the 1026px container so cards scroll across the entire viewport width. Vertical padding keeps shadows intact; horizontal padding aligns the FIRST card's left edge with the section heading above it. */ position: relative; width: 100vw; left: 50%; margin-left: -50vw; padding-top: 4px; padding-bottom: 4px; /* Desktop: 3 cards per view, aligned to container. */ padding-left: max(24px, calc((100vw - 1026px) / 2)); padding-right: max(24px, calc((100vw - 1026px) / 2)); scroll-padding-left: max(24px, calc((100vw - 1026px) / 2)); } .steps-grid::-webkit-scrollbar { display: none; } .steps-grid > .vq-card { flex: 0 0 clamp(320px, 24vw, 440px); max-width: clamp(320px, 24vw, 440px); scroll-snap-align: start; /* Cards stay in place — defeat the default fadeUp animation so items off-screen at load don't stay invisible. */ transform: none; opacity: 1; animation: none; } /* ── Steps carousel — tablet (2 cards/view + peek) ──────── */ @media (max-width: 1059px) { .steps-grid { padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; } } /* ── Steps carousel — ultra-wide (≥1820px, all 5 fit centered) ── 5*340px cards + 4*20px gaps = 1780px. At 1820+ we have room to show them all in one row — disable scroll, center horizontally, hide dots (JS also reports 1 dot at this width). */ @media (min-width: 1820px) { .steps-grid { justify-content: center; padding-left: 0; padding-right: 0; scroll-padding-left: 0; overflow-x: visible; scroll-snap-type: none; } .steps-grid > .vq-card { flex: 10 0 440px; max-width: 470px; scroll-snap-align: start; transform: none; opacity: 1; animation: none; } #how-it-works .steps-dots { display: none; } } /* ── Steps carousel — mobile (1 card/view, center-snap) ── */ @media (max-width: 720px) { .steps-grid { gap: 14px; padding-left: calc((100vw - min(82vw, 340px)) / 2); padding-right: calc((100vw - min(82vw, 340px)) / 2); scroll-padding-left: 0; } .steps-grid > .vq-card { flex: 0 0 auto; width: min(82vw, 340px); max-width: none; scroll-snap-align: center; } } /* Dot navigation — visible on both mobile and desktop now. */ .steps-dots { display: flex; justify-content: center; gap: 10px; margin: 28px 0 0; padding: 0; } .steps-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.22); cursor: pointer; transition: background .2s ease, width .2s ease, transform .2s ease; } .steps-dots button:hover { background: rgba(255, 255, 255, 0.45); } .steps-dots button.active { background: var(--orange); width: 22px; border-radius: 4px; } .step-label { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 28px; } .step-num { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 80px; line-height: 1; color: var(--white); letter-spacing: -0.04em; text-align: center; margin-bottom: 32px; } .step-rule { height: 1px; background: var(--rule); width: 60%; margin: 0 auto 24px; } .step-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.4; letter-spacing: 0.12em; color: var(--title); text-transform: uppercase; text-align: center; margin-bottom: 28px; } .step-body { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; color: var(--muted); line-height: 1.65; text-align: center; } /* ── Feature cards (icon + title + body) ───────────── */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature-icon { width: 44px; height: 44px; /* border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);*/ display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--orange); } .feature-icon svg { width: 50px; height: 50px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .feature-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; color: var(--title); margin-bottom: 8px; letter-spacing: -0.01em; } .feature-body { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; color: var(--muted); line-height: 1.6; } /* ── CTA banner (full-width section) ───────────────── */ .cta-banner { text-align: center; padding: 80px 32px; border-radius: 20px; /*background: rgba(30,28,26,0.55); border: 1px solid var(--orange-border); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);*/ } .cta-headline { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--title); text-transform: uppercase; margin-bottom: 16px; } .cta-sub { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; color: var(--text); max-width: 480px; margin: 0 auto 32px; line-height: 1.55; } .cta-actions { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ── Hero CTA row ──────────────────────────────────── */ .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } /* ── Responsive ────────────────────────────────────── */ @media (max-width: 960px) { .hero { padding: 56px 0 80px; } .vq-container, .vq-container-narrow { padding: 0 24px; } .footer { flex-direction: column; gap: 14px; text-align: center; } /* Mobile footer stack: logo → © year → row of links. The copyright lives inside .footer-links in the markup; we pull it to its own line above the links with flex-basis:100% + order:-1. */ .footer-links { justify-content: center; row-gap: 14px; column-gap: 18px; } .footer-links .footer-copy { text-align: center; order: -1; } .faq-title, .section-title { font-size: 30px; line-height: 30px; } .section-spacer, .footer-section { padding-top: 64px; } /* Mobile overrides for each section — tweak any of these independently without touching the others. */ .section-hiw { padding-top: 64px; } .section-features { padding-top: 64px; } .section-cta { padding-top: 64px; } .vq-center-card { padding: 36px 24px; } .vq-center-headline { font-size: 28px; } .plans { grid-template-columns: 1fr; gap: 20px; } .plan-toggle { display: inline-flex; } .plan-features { display: none; } .plan-toggle[aria-expanded="true"] + .plan-features { display: flex; /* Space the bullets away from the toggle button when open. */ padding-top: 30px; } .value-strip { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; gap: 16px; } /* Steps carousel mobile rules live in their own @media (max-width: 720px) block */ .steps-dots { margin-top: 22px; } .cta-banner { padding: 56px 24px; } /* Comparison table — tighten to fit on a phone. */ .compare { font-size: 12.5px; } .compare th, .compare td { padding: 10px 8px; } /* First column = feature name; narrower so the plan columns have room. */ .compare th:first-child, .compare td:first-child { width: 38%; padding-left: 12px; padding-right: 6px; line-height: 1.3; } /* Plan columns stay centered and get equal share of remaining width. */ .compare th:not(:first-child), .compare td:not(:first-child) { padding-left: 4px; padding-right: 4px; } .check, .cross { font-size: 14px; } } /* ============================================================ * MARKETING SIDEBAR * ============================================================ */ /* Hide mobile topbar on desktop */ .vq-mkt-mobile-topbar { display: none; } /* Outer sidebar — fully transparent, elements float on page */ /* Outer cream frame — the "pill" that holds the two dark inner panels */ .vq-mkt-sidebar { position: fixed; top: 12px; left: 12px; width: var(--vq-mkt-sidebar-w); height: calc(100vh - 145px); display: flex; flex-direction: column; gap: 12px; z-index: 100; transition: width 0.2s ease, transform 0.25s ease; } /* X close button — hidden on desktop, shown on mobile via media query below. */ .vq-mkt-close-btn { display: none; position: absolute; top: 28px; right: 15px; z-index: 2; background: none; border: none; color: var(--white); font-size: 28px; line-height: 1; width: 36px; height: 36px; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } /* Single cream shell holds both dark panels (upper + footer) stacked. gap = breathing room between the inner and signout panels. */ .vq-mkt-sidebar-shell { background: none; border-radius: 15px; padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; position: relative; backdrop-filter: blur(55px) saturate(100%); -webkit-backdrop-filter: blur(55px) saturate(100%); } body.vq-mkt-sidebar-collapsed .vq-mkt-sidebar { width: var(--vq-mkt-sidebar-collapsed-w); } /* Short viewports — keep sidebar fixed to the viewport (inherits from base), but size to its content instead of clamping to viewport height. Privacy and Terms hide from the sidebar (they live in the page footer) so the sidebar is shorter and less likely to overflow the viewport. */ @media (max-height: 820px) and (min-width: 901px) { .vq-mkt-sidebar { height: auto; } .vq-mkt-sidebar-signout a[href="/privacy.php"], .vq-mkt-sidebar-signout a[href="/terms.php"] { display: none; } .vq-mkt-sidebar-signout > .vq-mkt-footer-divider { display: none; } } /* Logo lives inside the inner card, above the nav, with divider below */ .vq-mkt-sidebar-logo { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 12px 0px; text-decoration: none; color: var(--white); flex-shrink: 0; margin: 0 14px; } .vq-mkt-sidebar-logo svg { height: 36px; width: auto; flex-shrink: 0; } .vq-mkt-sidebar-logo-text { font-size: 13px; font-weight: 700; color: var(--title); letter-spacing: -0.02em; white-space: nowrap; padding-right: 2px; } body.vq-mkt-sidebar-collapsed .vq-mkt-sidebar-logo-text { display: none; } /* Main dark inner panel (top) — holds logo, nav, privacy/terms, collapse. Sized to 80% of the upper shell's interior height so cream shows below. */ .vq-mkt-sidebar-inner { flex: 1; background: rgba(255,255,255,0.05) ; border-radius: 10px; display: flex; flex-direction: column; padding: 0; min-height: 0; overflow: hidden; } .vq-mkt-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; } /* Upper panel's main nav grows to fill, pushing collapse to the bottom. Top padding only here so logo/divider above stays snug elsewhere. */ .vq-mkt-sidebar-inner > .vq-mkt-nav { flex: 1; padding-top: 12px; } .vq-mkt-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: rgba(255,255,255,0.4); font-size: 13.5px; font-weight: 500; text-decoration: none; border-radius: 10px; transition: color 0.2s, background 0.2s; white-space: nowrap; } .vq-mkt-nav-item:hover, .vq-mkt-nav-item.active { color: var(--white); } /* Force equal weight on all states — overrides any cached/extension/rogue rule */ .vq-mkt-nav-item, .vq-mkt-nav-item:hover, .vq-mkt-nav-item.active { font-weight: 500 !important; } .vq-mkt-nav-icon { width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; } .vq-mkt-nav-icon svg { width: 19px; height: 19px; } /* Letter-style placeholder used by text-only links (Privacy → P, Terms → T). */ .vq-mkt-nav-letter { width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; font-size: 15px; font-weight: 600; line-height: 1; } body.vq-mkt-sidebar-collapsed .vq-mkt-nav-item { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } body.vq-mkt-sidebar-collapsed .vq-mkt-nav-label { display: none; } .vq-mkt-collapse-chevron { transition: transform 0.2s; width: 10px !important; transform: rotate(180deg); } body.vq-mkt-sidebar-collapsed .vq-mkt-collapse-chevron { transform: rotate(0deg); } /* Collapse button — uses nav-item base, but is a