/* ========================================================================= Writerify marketing site — design tokens. Two-color brand: violet → pink → amber. Whole site flows off this gradient. ========================================================================= */ :root { /* Brand gradient anchors */ --c-violet-50: #f5f3ff; --c-violet-200: #c4b5fd; --c-violet-400: #a78bfa; --c-violet-500: #8b5cf6; --c-violet-600: #7c3aed; --c-violet-700: #6d28d9; --c-pink-400: #f472b6; --c-pink-500: #ec4899; --c-pink-600: #db2777; --c-amber-300: #fcd34d; --c-amber-400: #fbbf24; --c-amber-500: #f59e0b; /* Surfaces */ --bg-deep: #07041a; --bg: #0c0820; --bg-soft: #110a2e; --bg-elev: #16103a; --bg-card: rgba(28, 20, 67, 0.55); --border: rgba(167, 139, 250, 0.18); --border-soft: rgba(167, 139, 250, 0.10); /* Text */ --t-strong: #f5f3ff; --t-body: #c8c1e6; --t-muted: #8b85a8; --t-faint: #5c5878; /* Effect colors */ --glow-violet: rgba(139, 92, 246, 0.35); --glow-pink: rgba(236, 72, 153, 0.30); --glow-amber: rgba(245, 158, 11, 0.28); /* Brand gradients (used everywhere) */ --grad-brand: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #fbbf24 100%); --grad-brand-soft: linear-gradient(135deg, rgba(167,139,250,.18) 0%, rgba(236,72,153,.18) 50%, rgba(251,191,36,.18) 100%); --grad-text: linear-gradient(135deg, #c4b5fd 0%, #f472b6 50%, #fcd34d 100%); --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px; --shadow-card: 0 10px 32px -8px rgba(0,0,0,.55), 0 0 0 1px var(--border); --shadow-glow: 0 14px 50px -12px var(--glow-violet); } /* ------------------------------------------------------------------------- Light theme — activated by ``. JS-toggleable from the header. We keep the brand gradient anchors exactly the same so the logo + accents read identically in either mode; only surfaces + text tones flip. ------------------------------------------------------------------------- */ [data-theme='light'] { --bg-deep: #f5f3ff; --bg: #faf9ff; --bg-soft: #ffffff; --bg-elev: #ffffff; --bg-card: rgba(255, 255, 255, 0.85); --border: rgba(124, 58, 237, 0.18); --border-soft: rgba(124, 58, 237, 0.10); --t-strong: #0f0a2e; --t-body: #3f3863; --t-muted: #6b6488; --t-faint: #9893b3; --glow-violet: rgba(139, 92, 246, 0.22); --glow-pink: rgba(236, 72, 153, 0.18); --glow-amber: rgba(245, 158, 11, 0.18); --grad-brand-soft: linear-gradient(135deg, rgba(167,139,250,.14) 0%, rgba(236,72,153,.14) 50%, rgba(251,191,36,.14) 100%); --grad-text: linear-gradient(135deg, #6d28d9 0%, #db2777 50%, #d97706 100%); --shadow-card: 0 10px 32px -8px rgba(76, 29, 149, 0.18), 0 0 0 1px var(--border); --shadow-glow: 0 14px 50px -12px rgba(139, 92, 246, 0.25); } /* Light-mode-specific adjustments for elements that look wrong with just a variable swap. */ [data-theme='light'] body { background: var(--bg-deep); color: var(--t-body); } [data-theme='light'] .header.scrolled { background: rgba(250, 249, 255, 0.85); } [data-theme='light'] .hero-mockup { background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%); box-shadow: 0 30px 80px -20px rgba(139,92,246,.25), 0 0 0 1px rgba(139,92,246,.15); } [data-theme='light'] .mock-side { background: rgba(167, 139, 250, 0.06); } [data-theme='light'] .mock-r { background: rgba(15, 10, 46, 0.08); } [data-theme='light'] .trust-bar { background: rgba(255, 255, 255, 0.6); } [data-theme='light'] .trust-pill { background: rgba(255, 255, 255, 0.7); } [data-theme='light'] .footer { background: rgba(255, 255, 255, 0.5); } [data-theme='light'] .feature-card { background: rgba(255, 255, 255, 0.85); } [data-theme='light'] .plus-row { background: rgba(255, 255, 255, 0.85); } [data-theme='light'] .plus-pill { background: rgba(255, 255, 255, 0.85); } [data-theme='light'] .price-card { background: rgba(255, 255, 255, 0.92); } [data-theme='light'] .faq-item { background: rgba(255, 255, 255, 0.85); } [data-theme='light'] .step { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65)); } [data-theme='light'] .stat { background: rgba(255, 255, 255, 0.85); } [data-theme='light'] .cta-panel { background: linear-gradient(135deg, rgba(167,139,250,.10), rgba(236,72,153,.08) 50%, rgba(251,191,36,.10)); border-color: rgba(167,139,250,.30); } /* Theme toggle button — sits in the header next to the primary CTA. */ .theme-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: var(--t-body); border: 1px solid var(--border); backdrop-filter: blur(10px); cursor: pointer; transition: all 0.2s ease; } .theme-toggle:hover { color: var(--t-strong); background: rgba(255, 255, 255, 0.10); border-color: var(--c-violet-400); transform: translateY(-1px); } .theme-toggle svg { width: 17px; height: 17px; transition: opacity .2s ease; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme='light'] .theme-toggle .icon-sun { display: block; } [data-theme='light'] .theme-toggle .icon-moon { display: none; } [data-theme='light'] .theme-toggle { background: rgba(15, 10, 46, 0.04); color: var(--c-violet-600); } /* Hero badge row — sits above the H1, free trial + refund side-by-side. */ .hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; } /* Free-trial badge in the hero — uses brand gradient, lifts attention. */ .trial-strip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: var(--grad-brand); color: #1a0a1f; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; box-shadow: 0 6px 18px -4px var(--glow-pink); } .trial-strip span.ribbon-emoji { font-size: 14px; } /* 14-day refund guarantee badge — sits next to the trial strip. Emerald theme so it visually reads as "safety net" not "marketing". */ .refund-strip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 99px; background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(5,150,105,.12)); color: #047857; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; border: 1px solid rgba(16,185,129,.35); } [data-theme='dark'] .refund-strip, :root:not([data-theme='light']) .refund-strip { background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(5,150,105,.12)); color: #10b981; border-color: rgba(16,185,129,.45); } /* Hero terminal — replaces the static mockup. Looks like a tiny macOS terminal window with three traffic-light dots and a title. Body holds the typewriter line + a stat strip. The cursor blinks via CSS. */ .hero-terminal { position: relative; border-radius: var(--radius-lg); background: linear-gradient(135deg, #1a1330 0%, #110a2e 100%); border: 1px solid rgba(167, 139, 250, 0.24); box-shadow: 0 30px 80px -20px rgba(139,92,246,.45), 0 0 0 1px rgba(167,139,250,.16); overflow: hidden; transform: perspective(1500px) rotateY(-7deg) rotateX(3deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; min-height: 320px; } .hero-terminal:hover { transform: perspective(1500px) rotateY(-3deg) rotateX(1deg) translateY(-4px); } [data-theme='light'] .hero-terminal { background: linear-gradient(135deg, #1f1539 0%, #14102b 100%); } .hero-terminal-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: rgba(0,0,0,.25); border-bottom: 1px solid rgba(167,139,250,.14); } .hero-terminal-dot { width: 12px; height: 12px; border-radius: 50%; } .hero-terminal-dot.r { background: #ff5f57; } .hero-terminal-dot.y { background: #febc2e; } .hero-terminal-dot.g { background: #28c840; } .hero-terminal-title { margin-left: 14px; font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .04em; font-weight: 500; } .hero-terminal-body { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 16px; color: #e2def0; } .hero-terminal-prompt-row { display: flex; gap: 10px; font-size: 13.5px; } .hero-terminal-prompt { color: #6ee7b7; font-weight: 700; } .hero-terminal-cmd { color: rgba(255,255,255,.65); } .hero-terminal-output { display: flex; align-items: flex-start; gap: 10px; min-height: 5.2em; font-size: 17px; line-height: 1.55; font-weight: 600; } .hero-terminal-arrow { color: #fbbf24; font-weight: 800; flex-shrink: 0; font-size: 19px; } .hero-terminal-text { background: linear-gradient(135deg, #c4b5fd 0%, #f9a8d4 45%, #fcd34d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; flex: 1; } .hero-terminal-cursor { display: inline-block; width: 8px; height: 21px; background: #fcd34d; margin-top: 2px; margin-left: 2px; animation: terminal-blink 1.05s steps(1) infinite; flex-shrink: 0; border-radius: 1px; box-shadow: 0 0 6px rgba(252,211,77,.7); } @keyframes terminal-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .hero-terminal-stats { display: flex; gap: 16px; padding-top: 14px; border-top: 1px solid rgba(167,139,250,.12); flex-wrap: wrap; } .hero-terminal-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,.5); letter-spacing: .02em; } .hero-terminal-stat .dot { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; } .hero-terminal-stat .dot.warn { background: #fbbf24; } .hero-terminal-stat .dot.ok { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.6); animation: terminal-pulse 1.8s ease-in-out infinite; } @keyframes terminal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* 14-day refund callout under the pricing grid — bigger, less collapsible than the small hero badge. */ .refund-callout { margin-top: 34px; padding: 26px 30px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(5,150,105,.06) 70%); border: 1px solid rgba(16,185,129,.30); display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .refund-callout-icon { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 22px -6px rgba(16,185,129,.5); } .refund-callout-icon svg { width: 24px; height: 24px; } .refund-callout-text { flex: 1; min-width: 240px; } .refund-callout-headline { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; color: var(--t-strong); margin-bottom: 8px; line-height: 1.3; } .refund-callout-bold { background: linear-gradient(135deg, #10b981, #059669); -webkit-background-clip: text; background-clip: text; color: transparent; } .refund-callout-text p { font-size: 14px; color: var(--t-body); line-height: 1.6; margin: 0; } .refund-callout-text a { color: var(--c-violet-600); text-decoration: none; font-weight: 600; } .refund-callout-text a:hover { color: var(--c-pink-500); } [data-theme='light'] .refund-callout-text a { color: var(--c-violet-600); } .refund-callout-text a:hover { color: var(--c-pink-500); } /* Changelog entries — date + version chip + h2 heading + bullet list. */ .changelog-entry { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--border); } .changelog-entry:first-of-type { margin-top: 18px; padding-top: 0; border-top: none; } .changelog-version { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .changelog-tag { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; letter-spacing: .04em; } .changelog-tag-feature { background: var(--grad-brand); color: #1a0a1f; } .changelog-date { font-size: 12px; color: var(--t-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .changelog-entry h2 { margin: 0 0 12px; } .changelog-entry ul li code, .legal-page code { font-family: 'JetBrains Mono', monospace; font-size: .88em; padding: 2px 6px; border-radius: 5px; background: rgba(167,139,250,.12); color: var(--c-violet-600); } [data-theme='dark'] .legal-page code, :root:not([data-theme='light']) .legal-page code { background: rgba(167,139,250,.16); color: var(--c-violet-200); } /* Legal page typography — wider top padding so it clears the fixed header. */ .legal-page { padding: 50px 0 80px; } .legal-page h1 { font-size: clamp(1.8rem, 1vw + 1.6rem, 2.6rem); margin-bottom: 6px; } .legal-page .legal-meta { font-size: 12px; color: var(--t-muted); margin-bottom: 30px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .legal-page h2 { font-size: 1.35rem; margin: 36px 0 12px; } .legal-page h3 { font-size: 1.05rem; margin: 24px 0 8px; color: var(--c-violet-200); } [data-theme='light'] .legal-page h3 { color: var(--c-violet-600); } .legal-page p { margin-bottom: 14px; line-height: 1.7; } .legal-page ul, .legal-page ol { margin: 0 0 14px 22px; } .legal-page li { margin-bottom: 6px; line-height: 1.65; } .legal-page a { color: var(--c-violet-400); text-decoration: none; } .legal-page a:hover { color: var(--c-pink-400); } .legal-page a:hover { color: var(--c-pink-400); } [data-theme='light'] .legal-page a { color: var(--c-violet-600); } [data-theme='light'] .legal-page a:hover { color: var(--c-pink-600); } .legal-page strong { color: var(--t-strong); } .legal-toc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 22px; margin: 22px 0 36px; backdrop-filter: blur(8px); } .legal-toc-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 8px; } .legal-toc ol { list-style: decimal; margin: 0 0 0 20px; columns: 2; column-gap: 24px; } .legal-toc li { margin-bottom: 4px; font-size: 13px; } @media (max-width: 560px) { .legal-toc ol { columns: 1; } } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* v2.1.57 — Custom circle cursor removed by request. The site now uses the native OS cursor everywhere (default feels cleaner / less distracting). */ /* Skip-to-main accessibility link. Visually hidden until keyboard focus, then it slides down into view at the top-left so a keyboard user can jump past the nav directly to the page's main content. Required for WCAG 2.4.1 (Bypass Blocks) — Lighthouse penalises sites missing it. */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 14px; background: var(--c-violet-600); color: #fff !important; font-weight: 700; font-size: 14px; border-radius: 8px; text-decoration: none; transform: translateY(-150%); transition: transform .18s ease; } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--c-amber-400); } /* Custom gradient scrollbar — brand violet→pink→amber so the page chrome carries the same identity as the buttons + price-card borders. (Restored by request in v2.1.59 — the custom cursor stays off, only the scrollbar is back.) Firefox uses scrollbar-color (less control); WebKit gets the gradient thumb. */ html { scrollbar-width: thin; scrollbar-color: #ec4899 transparent; } ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: var(--bg-soft); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a78bfa 0%, #ec4899 50%, #fbbf24 100%); border-radius: 999px; min-height: 60px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #c4b5fd 0%, #f472b6 50%, #fcd34d 100%); background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, #a78bfa, #ec4899, #fbbf24); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: var(--bg-soft); } /* ========================================================================= Lifetime announcement bar — sits above the sticky header on every page. Strong gradient background, single line on desktop, wraps on mobile. Has a soft pulse next to the LIFETIME DEAL label for extra attention. ========================================================================= */ .announce-bar { background: linear-gradient(90deg, var(--c-violet-500), var(--c-pink-500) 50%, var(--c-amber-500)); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .01em; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; z-index: 60; } .announce-inner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 16px; flex-wrap: wrap; text-align: center; } .announce-text strong { font-weight: 800; letter-spacing: .06em; margin-right: 4px; background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 999px; } /* Mobile compaction — v2.1.43 brute-force rewrite. Previous rules were CSS-correct but a stubborn browser/proxy cache showed users a stale stylesheet where the announce bar still wrapped to three rows on phones. Adding !important to every mobile rule so nothing downstream (including any inline style or vendor reset) can re-show the hidden elements. Cache-bust query on the stylesheet link defeats the second half of the problem. */ @media (max-width: 720px) { .announce-bar { font-size: 11px !important; } .announce-inner { padding: 6px 10px !important; gap: 6px !important; flex-wrap: nowrap !important; overflow: hidden !important; justify-content: center !important; } .announce-text { overflow: hidden !important; white-space: nowrap !important; flex: 0 1 auto !important; } .announce-text .announce-text-tail { display: none !important; } .announce-pulse { width: 6px !important; height: 6px !important; } /* v2.1.43 — keep the See-pricing CTA visible on mobile, but compact: a small dark pill that sits right next to the LIFETIME DEAL pill so the bar stays on one line. The arrow SVG hides — pill alone is enough of an affordance on touch. */ .announce-cta { display: inline-flex !important; padding: 3px 9px !important; font-size: 10px !important; background: rgba(0, 0, 0, .25) !important; flex: 0 0 auto !important; } .announce-cta svg { display: none !important; } } .announce-pulse { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: announce-pulse 1.6s cubic-bezier(.66,0,0,1) infinite; } @keyframes announce-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.65); } 60% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .announce-cta { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.18); padding: 5px 11px; border-radius: 999px; font-weight: 700; font-size: 12px; color: #fff !important; transition: background .15s ease; } .announce-cta:hover { background: rgba(0,0,0,.32); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-deep); color: var(--t-body); line-height: 1.6; font-size: 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; transition: color .18s ease; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ::selection { background: var(--c-pink-500); color: #fff; } /* ========================================================================= Layout helpers ========================================================================= */ .container { width: min(1200px, 92%); margin-inline: auto; } .container-narrow { width: min(880px, 92%); margin-inline: auto; } section { padding: 110px 0; position: relative; } /* Subtle gradient mesh background — the "color mixer" the brief asked for */ .mesh-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(60vmax 40vmax at 18% 12%, rgba(167,139,250,.18), transparent 60%), radial-gradient(50vmax 36vmax at 82% 22%, rgba(236,72,153,.16), transparent 65%), radial-gradient(55vmax 40vmax at 50% 88%, rgba(251,191,36,.10), transparent 70%); } /* Wavy SVG section dividers — the "akabaka" curves */ .wave { display: block; width: 100%; height: 110px; line-height: 0; } .wave svg { width: 100%; height: 100%; } .wave-fill { fill: var(--bg); } .wave-fill-soft { fill: var(--bg-soft); } .wave-fill-deep { fill: var(--bg-deep); } /* ========================================================================= Typography ========================================================================= */ h1, h2, h3, h4 { color: var(--t-strong); font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4.8rem); font-weight: 900; letter-spacing: -.035em; } h2 { font-size: clamp(2rem, 3vw + 1rem, 3.2rem); } h3 { font-size: clamp(1.2rem, .8vw + 1rem, 1.55rem); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; border-radius: 99px; background: var(--grad-brand-soft); border: 1px solid var(--border); color: var(--c-violet-200); backdrop-filter: blur(8px); margin-bottom: 22px; } .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 0 8px var(--c-pink-500); } .gradient-text { background: var(--grad-text); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; animation: shimmer 7s ease-in-out infinite; } @keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .lede { font-size: clamp(1rem, .4vw + .9rem, 1.18rem); color: var(--t-body); max-width: 56ch; } .section-head { text-align: center; margin-bottom: 64px; } .section-head h2 { margin-bottom: 14px; } .section-head p { max-width: 60ch; margin-inline: auto; color: var(--t-body); } /* ========================================================================= Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-weight: 700; font-size: 14.5px; letter-spacing: .01em; border-radius: 14px; transition: transform .2s ease, box-shadow .25s ease, filter .2s ease; white-space: nowrap; } .btn-primary { background: var(--grad-brand); color: #1a0a1f; box-shadow: 0 8px 28px -8px var(--glow-pink), inset 0 1px 0 rgba(255,255,255,.45); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -10px var(--glow-pink), inset 0 1px 0 rgba(255,255,255,.55); filter: brightness(1.06); } .btn-ghost { background: rgba(255,255,255,.04); color: var(--t-strong); border: 1px solid var(--border); backdrop-filter: blur(10px); } .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--c-violet-400); transform: translateY(-2px); } .btn-arrow { transition: transform .2s ease; } .btn:hover .btn-arrow { transform: translateX(4px); } /* ========================================================================= Header ========================================================================= */ .header { position: sticky; top: 0; left: 0; right: 0; z-index: 50; padding: 14px 0; transition: backdrop-filter .25s ease, background .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; } .header.scrolled { backdrop-filter: blur(18px) saturate(1.4); background: rgba(7, 4, 26, .72); border-bottom-color: var(--border-soft); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 19px; color: var(--t-strong); letter-spacing: -.01em; } .brand img { width: 36px; height: 36px; } .nav { display: flex; align-items: center; gap: 6px; } .nav a { padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--t-body); } .nav a:hover { color: var(--t-strong); background: rgba(255,255,255,.04); } .header-actions { display: flex; align-items: center; gap: 10px; } .menu-btn { display: none; padding: 10px; border-radius: 10px; color: var(--t-strong); border: 1px solid var(--border); } @media (max-width: 880px) { .nav { display: none; position: absolute; top: 100%; left: 16px; right: 16px; flex-direction: column; align-items: stretch; padding: 16px; gap: 4px; background: rgba(12,8,32,.95); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 18px; margin-top: 10px; } .nav.open { display: flex; } .nav a { padding: 14px 16px; } .menu-btn { display: inline-flex; } .header-actions .btn-ghost { display: none; } } /* Phone — v2.1.41 rewrite of header layout. On phones the user wanted: [LOGO + Writerify wordmark] [theme toggle] [hamburger] So we HIDE both the "Pricing" ghost button (already done at 880px) AND the Start-Free-Trial primary CTA — both move INSIDE the hamburger menu when it's expanded. Only theme toggle + hamburger stay visible in the header bar. This keeps the brand wordmark fully readable; no more "Writerif☀" clipping. */ @media (max-width: 720px) { .header { padding: 10px 0 !important; } .header-inner { gap: 10px !important; } .brand { font-size: 16px !important; gap: 8px !important; } .brand img { width: 30px !important; height: 30px !important; } .header-actions { gap: 4px !important; } /* v2.1.43: !important added so even cached/legacy CSS can't keep these buttons visible. Hides every Pricing / Start-Free-Trial / etc. inside the header-actions row. Theme toggle and hamburger menu-btn use different selectors so they survive. */ .header-actions .btn, .header-actions a.btn, .header-actions .btn-primary, .header-actions .btn-ghost { display: none !important; } .header-actions .theme-toggle { display: inline-flex !important; padding: 8px !important; width: 38px !important; height: 38px !important; align-items: center !important; justify-content: center !important; } .menu-btn { padding: 8px !important; } /* Hamburger-injected Start-Free-Trial CTA link (class .nav-cta) shows as a full-width gradient button when the hamburger panel is open. */ .nav .nav-cta { margin-top: 8px; padding: 14px 16px !important; border-radius: 12px; background: var(--grad-brand); color: #1a0a1f !important; font-weight: 800; font-size: 15px; text-align: center; } .nav .nav-cta:hover { background: var(--grad-brand); filter: brightness(1.08); } } /* Hide the CTA link on desktop — header-actions area already has the primary CTA, so showing the link inside the nav too would duplicate it. */ @media (min-width: 881px) { .nav .nav-cta { display: none; } } /* ========================================================================= Hero ========================================================================= */ .hero { padding: 56px 0 80px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; } @media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 80px; } } .hero h1 { margin-bottom: 18px; } .hero p.lede { margin-bottom: 24px; font-size: clamp(1rem, .3vw + .95rem, 1.15rem); } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; } .hero-trust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--t-muted); } .trust-pills { display: inline-flex; gap: 8px; flex-wrap: wrap; } .trust-pill { padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid var(--border-soft); font-weight: 600; font-size: 12px; color: var(--t-body); } .hero-mockup { position: relative; border-radius: var(--radius-lg); background: linear-gradient(135deg, #150e36 0%, #0e0a23 100%); border: 1px solid var(--border); box-shadow: 0 30px 80px -20px rgba(139,92,246,.45), 0 0 0 1px rgba(167,139,250,.18); overflow: hidden; transform: perspective(1500px) rotateY(-7deg) rotateX(3deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); } .hero-mockup:hover { transform: perspective(1500px) rotateY(-3deg) rotateX(1deg) translateY(-4px); } .hero-mockup .mock-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); background: rgba(0,0,0,.25); } .mock-dot { width: 11px; height: 11px; border-radius: 50%; } .mock-dot.r { background: #ff5f57; } .mock-dot.y { background: #febc2e; } .mock-dot.g { background: #28c840; } .hero-mockup .mock-body { display: grid; grid-template-columns: 70px 1fr; min-height: 360px; } .mock-side { background: rgba(0,0,0,.2); border-right: 1px solid var(--border-soft); padding: 16px 10px; display: flex; flex-direction: column; gap: 10px; } .mock-side-i { width: 100%; aspect-ratio: 1; border-radius: 10px; background: rgba(167,139,250,.12); } .mock-side-i.active { background: var(--grad-brand); } .mock-main { padding: 22px; display: flex; flex-direction: column; gap: 14px; } .mock-h { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(167,139,250,.4), rgba(236,72,153,.3) 60%, transparent); width: 60%; } .mock-r { height: 9px; border-radius: 4px; background: rgba(255,255,255,.08); width: 100%; } .mock-r.short { width: 70%; } .mock-r.shorter { width: 45%; } .mock-card { padding: 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(255,255,255,.02); margin-top: 6px; } .mock-progress { height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 10px; } .mock-progress-fill { height: 100%; background: var(--grad-brand); width: 68%; border-radius: 3px; } /* Floating gradient blob behind hero mockup */ .hero-blob { position: absolute; right: -18%; top: 4%; width: 60%; aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, rgba(236,72,153,.5), rgba(167,139,250,.4) 50%, transparent 75%); filter: blur(60px); pointer-events: none; z-index: -1; } /* ========================================================================= Trust bar — provider logos ========================================================================= */ .trust-bar { padding: 50px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: rgba(0,0,0,.2); } .trust-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .trust-bar-label { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--t-muted); font-weight: 700; } .trust-bar-logos { display: flex; gap: 38px; flex-wrap: wrap; align-items: center; } .trust-logo { font-size: 17px; font-weight: 700; color: var(--t-body); opacity: .75; transition: opacity .25s ease; } .trust-logo:hover { opacity: 1; } .trust-logo .accent { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================================= Feature cards grid ========================================================================= */ .features-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .feature-card { position: relative; padding: 28px 26px; border-radius: var(--radius-lg); background: var(--bg-card); backdrop-filter: blur(14px); border: 1px solid var(--border); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .35s ease; } .feature-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; background: radial-gradient(circle at var(--mx,50%) var(--my,30%), rgba(236,72,153,.18), transparent 50%); pointer-events: none; } .feature-card:hover { transform: translateY(-6px); border-color: rgba(236,72,153,.45); box-shadow: var(--shadow-glow); } .feature-card:hover::before { opacity: 1; } .feature-icon { width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--grad-brand-soft); border: 1px solid var(--border); color: var(--c-pink-400); } .feature-icon svg { width: 22px; height: 22px; } .feature-card h3 { margin-bottom: 8px; font-size: 1.15rem; } .feature-card p { font-size: 14px; color: var(--t-body); line-height: 1.6; } /* ========================================================================= "Plus everything you'd expect" pill row — sits below the features grid as a visual breathing space + secondary feature dump (search intents, slug modes, etc. that don't deserve full cards). ========================================================================= */ .plus-row { margin-top: 56px; padding: 28px 30px; border-radius: var(--radius-lg); background: var(--bg-card); backdrop-filter: blur(10px); border: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .plus-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--c-violet-200); margin-right: 8px; display: inline-flex; align-items: center; gap: 8px; } .plus-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 0 10px var(--c-pink-500); } .plus-pill { font-size: 12.5px; font-weight: 600; color: var(--t-body); padding: 7px 13px; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid var(--border-soft); transition: border-color .2s ease, color .2s ease, transform .2s ease; } .plus-pill:hover { border-color: var(--c-pink-500); color: var(--t-strong); transform: translateY(-2px); } /* ========================================================================= How it works ========================================================================= */ .steps { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); position: relative; } .step { position: relative; padding: 36px 28px 30px; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(28,20,67,.55), rgba(28,20,67,.25)); border: 1px solid var(--border); } .step-num { position: absolute; top: -22px; left: 24px; width: 44px; height: 44px; border-radius: 14px; background: var(--grad-brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; color: #1a0a1f; box-shadow: 0 8px 22px -6px var(--glow-pink); } .step h3 { margin: 8px 0 8px; } .step p { font-size: 14px; color: var(--t-body); } /* ========================================================================= Stats strip ========================================================================= */ .stats { padding: 80px 0; } .stats-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .stat { text-align: center; padding: 30px 18px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); backdrop-filter: blur(10px); } .stat-num { font-size: 2.6rem; font-weight: 900; line-height: 1; margin-bottom: 6px; } .stat-num span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-label { font-size: 13px; color: var(--t-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; } /* ========================================================================= Pricing ========================================================================= */ .pricing-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; } .price-card { position: relative; padding: 36px 30px; border-radius: var(--radius-lg); background: var(--bg-card); backdrop-filter: blur(12px); border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform .3s ease, border-color .25s ease; } .price-card:hover { transform: translateY(-4px); } .price-card.featured { background: linear-gradient(180deg, rgba(167,139,250,.12), rgba(236,72,153,.06)); border: 1px solid transparent; background-clip: padding-box; box-shadow: 0 25px 70px -25px var(--glow-violet); } .price-card.featured::after { content: ''; position: absolute; inset: -1px; border-radius: var(--radius-lg); background: var(--grad-brand); z-index: -1; padding: 1px; opacity: .9; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .price-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--grad-brand); color: #1a0a1f; box-shadow: 0 6px 18px -4px var(--glow-pink); } /* LIFETIME pill — sits inside each pricing card top-right corner. Solid dark badge with the LIFETIME wording to anchor the one-time pricing model — visually distinct from the "Most Popular" badge above so the featured card can have both. */ .price-lifetime-tag { position: absolute; top: 16px; right: 16px; font-size: 10px; font-weight: 900; letter-spacing: .16em; padding: 3px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 4px 12px -3px rgba(34,197,94,.55); } [data-theme='light'] .price-lifetime-tag { color: #fff; } .price-tier { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-violet-200); margin-bottom: 12px; } .price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .price-amount .num { font-size: 3.2rem; font-weight: 900; color: var(--t-strong); letter-spacing: -.03em; } .price-amount .num span.dollar { font-size: 1.5rem; vertical-align: top; margin-right: 2px; opacity: .8; } .price-amount .per { color: var(--t-muted); font-size: 14px; font-weight: 500; } .price-tag { color: var(--t-body); font-size: 14px; margin-bottom: 24px; } .price-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; } .price-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--t-body); line-height: 1.5; } .price-features li svg { width: 16px; height: 16px; color: var(--c-amber-400); flex-shrink: 0; margin-top: 3px; } /* ========================================================================= FAQ accordion ========================================================================= */ .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; backdrop-filter: blur(8px); transition: border-color .2s ease, background .2s ease; } .faq-item.open { border-color: rgba(236,72,153,.4); } .faq-q { width: 100%; padding: 22px 26px; text-align: left; font-weight: 700; font-size: 15.5px; color: var(--t-strong); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-q-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--grad-brand-soft); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .25s ease; } .faq-item.open .faq-q-icon { transform: rotate(180deg); } .faq-q-icon svg { width: 12px; height: 12px; color: var(--c-violet-200); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .faq-item.open .faq-a { max-height: 320px; } .faq-a-inner { padding: 0 26px 22px; color: var(--t-body); font-size: 14.5px; line-height: 1.7; } /* ========================================================================= CTA panel ========================================================================= */ .cta-panel { position: relative; padding: 70px 50px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(167,139,250,.16), rgba(236,72,153,.10) 50%, rgba(251,191,36,.10)); border: 1px solid rgba(167,139,250,.25); overflow: hidden; text-align: center; } .cta-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40vmax 30vmax at 20% 20%, rgba(167,139,250,.25), transparent 60%), radial-gradient(40vmax 30vmax at 80% 80%, rgba(251,191,36,.20), transparent 60%); pointer-events: none; } .cta-panel > * { position: relative; } .cta-panel h2 { margin-bottom: 16px; } .cta-panel p { color: var(--t-body); margin-inline: auto; max-width: 50ch; margin-bottom: 28px; } .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ========================================================================= Footer ========================================================================= */ .footer { padding: 60px 0 40px; border-top: 1px solid var(--border-soft); } .footer-grid { display: grid; gap: 28px; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.5fr; margin-bottom: 36px; } @media (max-width: 1080px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer-payment { grid-column: 1 / -1; } } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-payment { grid-column: 1 / -1; } } .footer-brand p { font-size: 14px; color: var(--t-muted); margin-top: 14px; max-width: 36ch; } .footer-col h4 { color: var(--t-strong); font-size: 14px; font-weight: 700; margin-bottom: 14px; letter-spacing: .02em; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: var(--t-muted); } .footer-col a:hover { color: var(--c-violet-200); } /* v2.1.58 — Footer social / community icon row (Telegram, Facebook, YouTube, Instagram, TikTok). Sits under the brand blurb in the footer-brand column. v2.1.59 — each icon now wears its real BRAND colour (colourful at rest) and fills with that colour on hover. */ .footer-social { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .footer-social a { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px solid var(--border-soft); transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .footer-social svg { width: 19px; height: 19px; } /* v2.1.59 — support email line in the footer. */ .footer-email { margin-top: 14px; font-size: 13.5px; color: var(--t-muted); } .footer-email a { color: var(--c-violet-200); font-weight: 600; text-decoration: none; } .footer-email a:hover { text-decoration: underline; } /* v2.1.59 — logged-in account chip in the header (replaces "Login" via account-nav.js). */ .account-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 13px 4px 4px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-soft); color: var(--t-strong); font-weight: 600; font-size: 13.5px; text-decoration: none; transition: transform .15s ease, border-color .15s ease; } .account-chip:hover { transform: translateY(-1px); border-color: var(--c-violet-400); } .account-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--grad-brand); color: #fff; font-weight: 800; font-size: 12.5px; } /* Brand colour per platform — glyph tinted at rest. */ .footer-social a[aria-label="Telegram"] { color: #229ED9; } .footer-social a[aria-label="Facebook"] { color: #1877F2; } .footer-social a[aria-label="YouTube"] { color: #FF0000; } .footer-social a[aria-label="WhatsApp"] { color: #25D366; } .footer-social a[aria-label="Instagram"] { color: #E4405F; } .footer-social a[aria-label="TikTok"] { color: #FE2C55; } /* On hover: lift + fill with the brand colour, white glyph. */ .footer-social a:hover { transform: translateY(-2px); color: #fff; border-color: transparent; } .footer-social a[aria-label="Telegram"]:hover { background: #229ED9; box-shadow: 0 6px 16px -4px rgba(34, 158, 217, .55); } .footer-social a[aria-label="Facebook"]:hover { background: #1877F2; box-shadow: 0 6px 16px -4px rgba(24, 119, 242, .55); } .footer-social a[aria-label="YouTube"]:hover { background: #FF0000; box-shadow: 0 6px 16px -4px rgba(255, 0, 0, .5); } .footer-social a[aria-label="WhatsApp"]:hover { background: #25D366; box-shadow: 0 6px 16px -4px rgba(37, 211, 102, .55); } .footer-social a[aria-label="Instagram"]:hover { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); box-shadow: 0 6px 16px -4px rgba(214, 41, 118, .55); } .footer-social a[aria-label="TikTok"]:hover { background: #010101; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .45); } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--t-faint); } /* Rich footer-bottom — used on pages with Paddle merchant-of-record disclosure. Stacks the copyright/links row on top of the MoR line so the compliance text stays readable even on narrow screens. */ .footer-bottom-rich { display: block; } .footer-bottom-rich .footer-bottom-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--t-faint); } .footer-bottom-rich .footer-mor-line { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-soft); font-size: 12px; color: var(--t-muted); line-height: 1.6; } .footer-bottom-rich .footer-mor-line a { color: var(--t-muted); text-decoration: none; } .footer-bottom-rich .footer-mor-line a:hover { color: var(--t-strong); } /* Footer brand block — small MoR line under the brand description on pages that use the wide footer-grid layout (index.html). */ .footer-mor { font-size: 12px; color: var(--t-muted); margin-top: 10px; line-height: 1.55; } .footer-mor a { color: var(--t-muted); text-decoration: none; } .footer-mor a:hover { color: var(--t-strong); } /* Pricing-card fineprint — small subscription-renewal + refund disclosure that sits directly under the CTA. Paddle requires "auto-renews unless cancelled" to be visible at the point of sale, not buried in Terms. */ .price-fineprint { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-soft); font-size: 11.5px; color: var(--t-muted); line-height: 1.55; text-align: center; } /* Contact business card — boxed details block on contact.html so the business identity (operator name, country, address) is visually distinct from the surrounding copy. */ .contact-business-card { margin: 16px 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.6; } .contact-business-card strong { color: var(--t-strong); font-weight: 600; min-width: 170px; display: inline-block; } /* ========================================================================= Contact page — v2.1.44 redesign Hero → topic-cards grid → SLA + business-hours panel → "what to include" helper → business card → FAQ accordion → final CTA. Brand-gradient accents throughout (no flat 1990s legal-page look). ========================================================================= */ .contact-page { padding: 0 0 80px; background: radial-gradient(60% 50% at 50% 0%, rgba(167,139,250,.08), transparent 70%), var(--bg-base, transparent); } [data-theme='light'] .contact-page { background: radial-gradient(60% 50% at 50% 0%, rgba(236,72,153,.07), transparent 70%), transparent; } .contact-hero { padding: 64px 0 32px; text-align: center; } .contact-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-violet-400); padding: 5px 14px; border-radius: 999px; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.25); margin-bottom: 24px; } .contact-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-pink-400); box-shadow: 0 0 0 0 rgba(236,72,153,.6); animation: announce-pulse 1.6s cubic-bezier(.66,0,0,1) infinite; } .contact-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; margin-bottom: 18px; letter-spacing: -.02em; } .contact-sub { font-size: 17px; color: var(--t-muted); max-width: 640px; margin: 0 auto 28px; line-height: 1.6; } .contact-sub strong { color: var(--t-strong); font-weight: 700; } .contact-hero-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; } .contact-mail-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 14px; background: var(--grad-brand); color: #1a0a1f !important; font-weight: 800; font-size: 15px; letter-spacing: -.005em; box-shadow: 0 14px 32px -10px var(--glow-pink), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .2s ease, filter .2s ease, box-shadow .25s ease; } .contact-mail-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 40px -12px var(--glow-pink), inset 0 1px 0 rgba(255,255,255,.55); } .contact-mail-btn-lg { padding: 16px 32px; font-size: 17px; border-radius: 16px; } .contact-hero-meta { display: inline-flex; align-items: center; font-size: 13px; color: var(--t-muted); } .contact-section { padding: 36px 0; } .contact-section-title { font-size: 26px; letter-spacing: -.015em; margin-bottom: 8px; } .contact-section-sub { font-size: 15px; color: var(--t-muted); max-width: 640px; margin-bottom: 28px; line-height: 1.6; } /* Topic card grid — v2.1.45 rewrite. Previous layout used a horizontal flex (icon left, body right) which broke visually when content wrapped — the icon and body looked like separate cards on the rendered page. New layout: vertical flex per card (icon on top, title + paragraph + email link stacked below). Grid uses 3 fixed columns at desktop, 2 at tablet, 1 at phone. grid-auto-rows: 1fr keeps every card the same height so the row of email-link footers aligns cleanly across the grid. */ .contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; grid-auto-rows: 1fr; } @media (max-width: 880px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card { display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; height: 100%; position: relative; overflow: hidden; } [data-theme='light'] .contact-card { background: rgba(255,255,255,.96); } .contact-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--card-accent, transparent); opacity: 0; transition: opacity .25s ease; } .contact-card:hover { transform: translateY(-4px); border-color: var(--c-violet-300); box-shadow: 0 18px 36px -18px var(--glow-violet); } .contact-card:hover::before { opacity: 1; } .contact-card-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 16px; } .contact-card-icon svg { width: 22px; height: 22px; stroke-width: 2.2; } .icon-violet { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 10px 22px -8px rgba(124,58,237,.55); } .icon-emerald { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 10px 22px -8px rgba(16,185,129,.55); } .icon-sky { background: linear-gradient(135deg, #0284c7, #38bdf8); box-shadow: 0 10px 22px -8px rgba(56,189,248,.55); } .icon-amber { background: linear-gradient(135deg, #d97706, #fbbf24); box-shadow: 0 10px 22px -8px rgba(251,191,36,.55); } .icon-pink { background: linear-gradient(135deg, #db2777, #ec4899); box-shadow: 0 10px 22px -8px rgba(236,72,153,.55); } .icon-orange { background: linear-gradient(135deg, #ea580c, #f97316); box-shadow: 0 10px 22px -8px rgba(249,115,22,.55); } /* Card body now uses column flex so the email link can stick to the bottom regardless of paragraph length. */ .contact-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; } .contact-card-body h3 { font-size: 17px; margin: 0 0 8px; color: var(--t-strong); letter-spacing: -.005em; } .contact-card-body p { font-size: 13.5px; color: var(--t-muted); margin: 0; line-height: 1.6; flex: 1; } .contact-card-body p a { color: var(--c-pink-400); font-weight: 600; } .contact-card-link { display: inline-flex; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 12.5px; font-weight: 700; color: var(--c-pink-400); font-family: 'Inter', system-ui, sans-serif; letter-spacing: -.005em; transition: gap .2s ease, color .2s ease; gap: 4px; } .contact-card:hover .contact-card-link { gap: 8px; } /* SLA + Business Hours two-column panel */ .contact-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .contact-twocol { grid-template-columns: 1fr; } } .contact-panel { padding: 22px 24px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border); } [data-theme='light'] .contact-panel { background: rgba(255,255,255,.92); } .contact-panel h3 { font-size: 17px; color: var(--t-strong); margin-bottom: 14px; } .contact-panel p { font-size: 14px; color: var(--t-muted); line-height: 1.65; margin: 0; } .contact-panel p strong { color: var(--t-strong); } .contact-sla-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .contact-sla-list li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--t-body); } .contact-sla-tier { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 78px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; } .tier-starter { background: linear-gradient(135deg, #64748b, #94a3b8); } .tier-growth { background: linear-gradient(135deg, #7c3aed, #ec4899); } .tier-max { background: linear-gradient(135deg, #f59e0b, #ef4444); } .tier-refund { background: linear-gradient(135deg, #0891b2, #06b6d4); } .tier-critical { background: linear-gradient(135deg, #dc2626, #f97316); } /* "What to include" helper */ .contact-helper { padding: 28px 32px; border-radius: 22px; background: linear-gradient(135deg, rgba(167,139,250,.10), rgba(236,72,153,.06) 60%, rgba(251,191,36,.06)); border: 1px solid var(--border); position: relative; } .contact-helper h3 { font-size: 20px; color: var(--t-strong); margin-bottom: 10px; } .contact-helper > p { color: var(--t-muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; } .contact-helper-list { list-style: none; padding: 0; margin: 0; counter-reset: helper; display: grid; gap: 10px; } .contact-helper-list li { counter-increment: helper; position: relative; padding: 12px 16px 12px 50px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); font-size: 14px; color: var(--t-body); line-height: 1.55; } [data-theme='light'] .contact-helper-list li { background: rgba(255,255,255,.7); } .contact-helper-list li::before { content: counter(helper); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--grad-brand); color: #1a0a1f; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; } .contact-helper-list strong { color: var(--t-strong); font-weight: 700; } /* Business card row layout */ .contact-page .contact-business-card { margin-top: 0; display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; background: var(--bg-card); } [data-theme='light'] .contact-page .contact-business-card { background: rgba(255,255,255,.95); } .contact-page .contact-business-card > div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-soft); font-size: 14px; align-items: center; } .contact-page .contact-business-card > div:last-child { border-bottom: 0; } .contact-page .contact-business-card strong { color: var(--t-strong); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; min-width: 0; display: block; } .contact-page .contact-business-card span { color: var(--t-body); font-size: 14px; } @media (max-width: 560px) { .contact-page .contact-business-card > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; } } /* FAQ accordion */ .contact-faq { display: grid; gap: 10px; } .contact-faq-item { border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; transition: border-color .2s ease; } [data-theme='light'] .contact-faq-item { background: rgba(255,255,255,.95); } .contact-faq-item[open] { border-color: var(--c-pink-300); } .contact-faq-item summary { list-style: none; cursor: pointer; padding: 16px 22px; font-weight: 700; font-size: 15px; color: var(--t-strong); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .contact-faq-item summary::-webkit-details-marker { display: none; } .contact-faq-item summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--c-pink-400); transition: transform .2s ease; } .contact-faq-item[open] summary::after { content: '−'; transform: rotate(0); } .contact-faq-item p { padding: 0 22px 18px; margin: 0; font-size: 14px; color: var(--t-muted); line-height: 1.65; } .contact-faq-item p a { color: var(--c-pink-400); } .contact-faq-item p strong { color: var(--t-strong); } /* Final CTA panel */ .contact-final-cta { text-align: center; padding: 56px 32px; border-radius: 28px; background: linear-gradient(135deg, rgba(167,139,250,.14), rgba(236,72,153,.10) 50%, rgba(251,191,36,.10)); border: 1px solid var(--border); } .contact-final-cta h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 8px; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .contact-final-cta p { color: var(--t-muted); font-size: 16px; margin-bottom: 22px; } /* ========================================================================= Blog index — comparison-article landing page ========================================================================= */ .blog-hero { padding: 80px 0 40px; text-align: center; background: var(--bg-soft); } .blog-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 16px; } .blog-hero p { font-size: 17px; color: var(--t-muted); max-width: 640px; margin: 0 auto; } .blog-grid-section { padding: 60px 0 40px; } .blog-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); } /* Featured = full-width single row, but laid out HORIZONTALLY (image left, text right) so it stays short (~410px) instead of a giant full-width hero. The image keeps its 3:2 ratio at ~56% width → shows in full, no crop, and the post grid below peeks up to invite scrolling. */ .blog-card.blog-card-featured { grid-column: 1 / -1; flex-direction: row; align-items: stretch; } .blog-card-featured .blog-card-cover { width: 56%; flex-shrink: 0; } .blog-card-featured .blog-card-body { flex: 1; justify-content: center; padding: 30px 38px; } .blog-card-featured .blog-card-body h2 { font-size: clamp(22px, 2.6vw, 30px); } @media (max-width: 880px) { .blog-grid { grid-template-columns: 1fr; } .blog-card.blog-card-featured { grid-column: auto; flex-direction: column; } .blog-card-featured .blog-card-cover { width: 100%; } .blog-card-featured .blog-card-body { padding: 22px 24px 26px; } } .blog-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .28s ease, border-color .25s ease, box-shadow .28s ease; cursor: pointer; } [data-theme='light'] .blog-card { background: rgba(255,255,255,.95); } .blog-card:hover { transform: translateY(-6px); border-color: var(--c-violet-300); box-shadow: 0 18px 38px -16px var(--glow-violet); } .blog-card-cover { position: relative; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; overflow: hidden; color: white; } .blog-card-featured .blog-card-cover { aspect-ratio: 3 / 2; } .blog-card-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,.06), transparent 70%); pointer-events: none; } /* Branded feature image fills the card cover. Cards match the images' native 3:2 ratio (1536x1024) so object-fit:cover shows the WHOLE image — no top/bottom crop. The .blog-cover-* gradient stays underneath as a fallback. */ .blog-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .blog-cover-claude { background: linear-gradient(135deg, #c2410c 0%, #ea580c 50%, #f97316 100%); } .blog-cover-chatgpt { background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #10b981 100%); } .blog-cover-gemini { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #38bdf8 100%); } .blog-cover-jasper { background: linear-gradient(135deg, #7c2d12 0%, #b91c1c 50%, #ef4444 100%); } .blog-cover-surfer { background: linear-gradient(135deg, #0e7490 0%, #0891b2 50%, #06b6d4 100%); } .vs-mark { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; padding: 14px 22px; background: rgba(0,0,0,.28); backdrop-filter: blur(8px); border-radius: 999px; border: 1px solid rgba(255,255,255,.16); } .vs-logo-a, .vs-logo-b { font-family: 'Manrope', sans-serif; font-size: clamp(15px, 2.4vw, 22px); font-weight: 800; letter-spacing: -.01em; } .vs-logo-b { background: linear-gradient(135deg, #fff, #fbcfe8); -webkit-background-clip: text; background-clip: text; color: transparent; } .vs-sep { font-size: 11px; opacity: .8; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; } .blog-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; } .blog-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-violet-200); font-weight: 700; } .blog-card-body h2 { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.25; color: var(--t-strong); margin: 0; } .blog-card-body p { font-size: 14.5px; color: var(--t-muted); line-height: 1.6; margin: 0; } .blog-read { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--c-pink-300); letter-spacing: .01em; } .blog-cta { padding: 60px 0 100px; } /* ========================================================================= Article — long-form comparison post layout ========================================================================= */ .article-page { padding-bottom: 80px; } .article-cover { padding: 80px 0 50px; color: white; text-align: center; position: relative; overflow: hidden; } .article-cover.cover-claude { background: linear-gradient(135deg, #c2410c, #ea580c 50%, #f97316); } .article-cover.cover-chatgpt { background: linear-gradient(135deg, #064e3b, #047857 50%, #10b981); } .article-cover.cover-gemini { background: linear-gradient(135deg, #1d4ed8, #2563eb 50%, #38bdf8); } .article-cover.cover-jasper { background: linear-gradient(135deg, #7c2d12, #b91c1c 50%, #ef4444); } .article-cover.cover-surfer { background: linear-gradient(135deg, #0e7490, #0891b2 50%, #06b6d4); } .article-cover-inner { position: relative; z-index: 2; } .article-tag { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 5px 14px; background: rgba(0,0,0,.28); border-radius: 999px; margin-bottom: 18px; } .article-cover h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; max-width: 880px; margin: 0 auto 16px; color: #fff; } .article-cover .article-sub { font-size: 17px; opacity: .92; max-width: 720px; margin: 0 auto; } .article-meta { margin-top: 22px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 13px; opacity: .85; } .article-body { max-width: 760px; margin: 0 auto; padding: 50px 24px 0; font-size: 17px; line-height: 1.75; color: var(--t-body); } .article-body h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; margin: 48px 0 16px; color: var(--t-strong); } .article-body h3 { font-size: 20px; margin: 32px 0 10px; color: var(--t-strong); } .article-body p { margin-bottom: 18px; } .article-body ul, .article-body ol { margin: 16px 0 22px 20px; } .article-body li { margin-bottom: 8px; } .article-body a { color: var(--c-pink-300); text-decoration: none; } .article-body a:hover { color: var(--c-pink-200); } .article-tldr { margin: 8px 0 28px; padding: 22px 24px; background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.06)); border: 1px solid var(--border-soft); border-radius: 14px; border-left: 4px solid var(--c-violet-400); } .article-tldr-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-violet-300); font-weight: 800; margin-bottom: 10px; } .article-tldr p:last-child { margin-bottom: 0; } .cmp-table { width: 100%; border-collapse: collapse; margin: 22px 0 34px; font-size: 14.5px; border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; } .cmp-table th, .cmp-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .cmp-table th { background: var(--bg-soft); font-weight: 700; color: var(--t-strong); font-size: 13px; letter-spacing: .02em; } .cmp-table tr:last-child td { border-bottom: none; } .cmp-table .cmp-win { color: #16a34a; font-weight: 700; } .cmp-table .cmp-lose { color: var(--t-muted); } .cmp-table .cmp-row-header { font-weight: 700; color: var(--t-strong); background: var(--bg-soft); font-size: 13px; } .cmp-verdict { margin: 36px 0; padding: 24px; background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(16,185,129,.05)); border: 1px solid rgba(34,197,94,.18); border-radius: 14px; } .cmp-verdict-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #16a34a; font-weight: 800; margin-bottom: 8px; } .cmp-verdict h3 { margin: 4px 0 8px; color: var(--t-strong); font-size: 19px; } .proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0 34px; } @media (max-width: 600px) { .proscons { grid-template-columns: 1fr; } } .proscons-box { padding: 20px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--surface); } .proscons-box h4 { font-size: 14px; margin-bottom: 12px; color: var(--t-strong); letter-spacing: .04em; text-transform: uppercase; } .proscons-box ul { margin: 0; padding-left: 18px; font-size: 14.5px; } .proscons-pros h4 { color: #16a34a; } .proscons-cons h4 { color: #dc2626; } .article-cta-inline { margin: 40px 0; padding: 28px 24px; text-align: center; background: linear-gradient(135deg, var(--c-violet-500), var(--c-pink-500)); color: white; border-radius: 16px; } .article-cta-inline h3 { color: white; margin-bottom: 10px; font-size: 22px; } .article-cta-inline p { color: rgba(255,255,255,.92); margin-bottom: 16px; } .article-cta-inline .btn { background: white; color: var(--c-violet-600); } .article-cta-inline .btn:hover { background: rgba(255,255,255,.92); } /* "Active" nav link state for blog page */ .nav a.active { color: var(--t-strong); position: relative; } .nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--grad-brand); border-radius: 2px; } /* ========================================================================= Secure Payment footer column — Paddle trust strip ------------------------------------------------------------------------ Lives as the 5th column inside .footer-grid on index.html. The card has a subtle gradient border (drawn via a wrapper pseudo-element so it renders on both light + dark themes without recomputing the gradient per theme), and the payment badges use real-world brand colours so the strip looks credible to a payment-platform reviewer at a glance. ========================================================================= */ .footer-payment { position: relative; padding: 14px 14px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) padding-box, linear-gradient(135deg, var(--c-violet-300), var(--c-pink-300), var(--c-amber-300)) border-box; border: 1px solid transparent; box-shadow: 0 6px 20px -12px var(--glow-violet); /* Match the visual height of the other footer columns so the right side doesn't visually push the Brand column into a left-justified pocket of empty space. */ align-self: start; } [data-theme='light'] .footer-payment { background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1)) padding-box, linear-gradient(135deg, var(--c-violet-400), var(--c-pink-400), var(--c-amber-400)) border-box; box-shadow: 0 8px 22px -16px rgba(99,102,241,.3); } .footer-payment h4 { margin-bottom: 10px; } /* Compact trust line — single row with shield + "256-bit SSL · No hidden fees". Drops the standalone GUARANTEED pill that was eating vertical space inside the column. */ .pay-trust { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; } .pay-trust-icon { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #16a34a, #22c55e); color: white; border-radius: 8px; box-shadow: 0 4px 10px -3px rgba(34,197,94,.5); } .pay-trust-icon svg { width: 15px; height: 15px; } .pay-trust-badge { display: none; } /* hidden in compact mode */ .pay-trust-title { font-size: 12.5px; font-weight: 700; color: var(--t-strong); line-height: 1.15; } .pay-trust-sub { font-size: 10.5px; color: var(--t-muted); margin-top: 1px; } .pay-accept-label { margin-top: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: var(--t-faint); text-transform: uppercase; } .pay-badges { margin-top: 6px; display: grid; /* 4 cols × 2 rows = tight 8-badge block matching the column width while keeping each badge compact and readable. */ grid-template-columns: repeat(4, 1fr); gap: 4px; } .pay-badge { height: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; border-radius: 5px; font-family: 'Inter', system-ui, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .02em; color: white; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 1px 3px -1px rgba(0,0,0,.2); transition: transform .15s ease, box-shadow .15s ease; } .pay-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -4px rgba(0,0,0,.35); } .pay-visa { background: #1A1F71; } .pay-visa { letter-spacing: .08em; font-style: italic; } .pay-mc { background: #000; gap: 0; } .pay-mc .mc-c1, .pay-mc .mc-c2 { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .pay-mc .mc-c1 { background: #EB001B; } .pay-mc .mc-c2 { background: #F79E1B; margin-left: -3px; mix-blend-mode: screen; } .pay-paypal { background: #003087; } .pay-paypal em { font-style: normal; color: #009CDE; margin-left: 1px; } .pay-amex { background: #006FCF; letter-spacing: .06em; } .pay-apple { background: #000; color: #fff; } .pay-gpay { background: #fff; color: #5f6368; border: 1px solid #dadce0; } .pay-gpay em { font-style: normal; color: #4285F4; } .pay-paddle { background: linear-gradient(135deg, #2563eb, #6366f1); } .pay-2co { background: #e63946; } .pay-cta { margin-top: 10px; width: 100%; justify-content: center; font-size: 12px; padding: 8px 12px; /* Force solid white text — the default .btn-primary uses a dark text colour on the gradient background which reads as muddy gray inside the footer column. */ color: #fff !important; } .pay-cta svg { color: #fff; } /* Mobile: payment column drops to its own row at the bottom, full-width, and the badge grid expands to 4 wider columns to fill the new space. */ @media (max-width: 880px) { .pay-badges { grid-template-columns: repeat(4, 1fr); } .pay-badge { height: 28px; font-size: 11px; } .pay-mc .mc-c1, .pay-mc .mc-c2 { width: 13px; height: 13px; margin-left: -4px; } .footer-payment { margin-top: 12px; } } /* (Slim payment row removed — replaced by the Secure-Payment column as the 5th column of .footer-grid on every page that uses the rich footer. See .footer-payment above.) */ /* ========================================================================= Floating scroll-to-top ========================================================================= */ .scroll-top { position: fixed; bottom: 28px; right: 28px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; background: var(--grad-brand); color: #1a0a1f; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px -6px var(--glow-pink); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .scroll-top.visible { opacity: 1; pointer-events: auto; } .scroll-top:hover { transform: translateY(-3px); filter: brightness(1.08); } /* ========================================================================= Reveal-on-scroll animation ========================================================================= */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal:nth-child(1) { transition-delay: 0ms; } .reveal:nth-child(2) { transition-delay: 60ms; } .reveal:nth-child(3) { transition-delay: 120ms; } .reveal:nth-child(4) { transition-delay: 180ms; } .reveal:nth-child(5) { transition-delay: 240ms; } .reveal:nth-child(6) { transition-delay: 300ms; }