/* ============================================================ CaesarMails, 2026 rebuild Dark "gold glass" is the DEFAULT (:root). Light cream is the override, via [data-theme="light"], set by the nav toggle and the render-blocking script in each page's . Display: Space Grotesk / Body: Inter / Labels: JetBrains Mono One accent: gold #f0b429 dark, #c78500 light ============================================================ */ :root { --bg: #060504; --bg-alt: #0b0a08; --block: #0d0b08; --block-ink: #ffffff; --block-body: #b3aea3; --block-border: rgba(255, 255, 255, 0.12); --block-card: rgba(255, 255, 255, 0.04); --ink: #ffffff; --body-c: #b9b4a9; --muted: #837e73; --card: #0e0c09; --card-grad: radial-gradient(130% 130% at 0% 0%, #171308 0%, #0d0b08 60%); --border: rgba(255, 255, 255, 0.11); --shadow: 0 22px 60px rgba(0, 0, 0, 0.55); --shadow-big: 0 30px 80px rgba(0, 0, 0, 0.7); --accent: #f0b429; --accent-hover: #ffc94d; --accent-ink: #171203; --accent-soft: rgba(240, 180, 41, 0.12); --accent-line: rgba(240, 180, 41, 0.38); --accent-glow: 0 12px 28px rgba(240, 180, 41, 0.3); --hero-glow: radial-gradient(720px 480px at 50% 8%, rgba(240, 180, 41, 0.13), transparent 70%); --font-display: "Space Grotesk", sans-serif; --font-body: "Inter", sans-serif; --font-mono: "JetBrains Mono", monospace; --r-card: 16px; --r-chip: 8px; --r-pill: 999px; } [data-theme="light"] { --bg: #f7f5f0; --bg-alt: #ffffff; --block: #17130d; --block-ink: #ffffff; --block-body: #b8b2a6; --block-border: rgba(255, 255, 255, 0.14); --block-card: rgba(255, 255, 255, 0.05); --ink: #17130d; --body-c: #57503f; --muted: #8a8271; --card: #ffffff; --card-grad: #ffffff; --border: #e4ddce; --shadow: 0 2px 6px rgba(23, 19, 13, 0.05), 0 18px 40px rgba(23, 19, 13, 0.08); --shadow-big: 0 6px 14px rgba(23, 19, 13, 0.08), 0 30px 60px rgba(23, 19, 13, 0.14); --accent: #c78500; --accent-hover: #e09a0e; --accent-ink: #ffffff; --accent-soft: rgba(199, 133, 0, 0.1); --accent-line: rgba(199, 133, 0, 0.35); --accent-glow: 0 12px 28px rgba(199, 133, 0, 0.3); --hero-glow: none; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--body-c); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(240, 180, 41, 0.18); } html { scroll-padding-top: 88px; } h1, h2, h3 { text-wrap: balance; } .lede, .faq-body p { text-wrap: pretty; } /* height:auto is load-bearing. Every carries width/height attributes so the browser can reserve space and avoid layout shift. Those attributes also act as presentational hints, so without this an image whose CSS sets only width gets stretched to its full pixel height. Rules that set an explicit height (.marquee img, .brand-logo) are more specific and still win. */ img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--accent); color: var(--accent-ink); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); } h3 { font-size: 1.3rem; } .accent { color: var(--accent); } .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; } /* Prevent grid blowout from wide intrinsic-size images */ .hero-grid > *, .case > *, .booking-grid > *, .results-split > *, .vs-grid > *, .service-grid > *, .process-grid > *, .metric-grid > * { min-width: 0; } .section { padding: 96px 0; } .section-alt { background: var(--bg-alt); } .center { text-align: center; } /* Ink color-block sections (stay dark in both themes) */ .block { background: var(--block); border-top: 1px solid var(--block-border); border-bottom: 1px solid var(--block-border); } .block h2, .block h3 { color: var(--block-ink); } .block .lede, .block p, .block li { color: var(--block-body); } [data-theme="light"] .block { border-color: transparent; } .lede { font-size: 1.13rem; max-width: 620px; } .section-head { margin-bottom: 56px; } .section-head .lede { margin-top: 18px; } .section-head.center .lede { margin-left: auto; margin-right: auto; } .section-head h2 { margin-top: 16px; } /* ---------- Kicker pill ---------- */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--r-pill); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .pill svg { width: 13px; height: 13px; flex: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 30px; border-radius: var(--r-pill); font-family: var(--font-display); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; cursor: pointer; white-space: nowrap; } .btn svg { width: 15px; height: 15px; flex: none; transition: transform 0.2s ease; } .btn:hover svg { transform: translateX(3px); } .btn-gold { background: var(--accent); color: var(--accent-ink); } .btn-gold:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--accent-glow); } .btn-ghost { border: 1px solid var(--border); color: var(--ink); background: transparent; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .block .btn-ghost { border-color: var(--block-border); color: var(--block-ink); } .cta-center { text-align: center; margin-top: 56px; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.02em; } .brand svg { width: 30px; height: 30px; } .brand-logo { height: 38px; width: auto; display: block; } .brand-logo-light { display: none; } [data-theme="light"] .brand-logo-dark { display: none; } [data-theme="light"] .brand-logo-light { display: block; } .footer .brand-logo { height: 40px; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--body-c); transition: color 0.15s; white-space: nowrap; } .nav-links a:hover { color: var(--accent); } .nav-links a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: var(--accent); } .nav-links .btn { padding: 12px 22px; font-size: 0.78rem; color: var(--accent-ink); } .nav-links .btn:hover { color: var(--accent-ink); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--ink); cursor: pointer; transition: border-color 0.15s, transform 0.2s; } .theme-toggle:hover { border-color: var(--accent); transform: rotate(15deg); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } /* ---------- Mobile menu (burger + sheet, <=860px only) ---------- */ .nav-burger-li { display: none; } .nav-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: transparent; cursor: pointer; padding: 0; } .nav-burger span { display: block; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 22px; border-top: 1px solid var(--border); background: var(--bg); } .mobile-menu a:not(.mm-cta) { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); padding: 15px 2px; border-bottom: 1px solid var(--border); } .mm-theme { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; text-align: left; padding: 16px 2px 4px; cursor: pointer; } .mm-theme-dark { display: inline; } .mm-theme-light { display: none; } [data-theme="light"] .mm-theme-dark { display: none; } [data-theme="light"] .mm-theme-light { display: inline; } .mm-cta { margin-top: 12px; width: 100%; justify-content: center; } .menu-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.25s ease; } .menu-scrim.on { opacity: 1; } body.menu-open { overflow: hidden; } /* The burger takes over at 1040px, not 860px. With four text links plus the CTA the bar runs out of room well before the old breakpoint, and "Email Marketing Agency" wrapped onto two lines and collided with the wordmark. */ @media (max-width: 1040px) { .nav-burger-li { display: block; } .nav-links .nav-toggle { display: none; } .nav-links li:not(.nav-cta):not(.nav-toggle):not(.nav-burger-li) { display: none; } .nav-links { gap: 12px; } .nav-links .btn { padding: 11px 16px; font-size: 0.72rem; } /* matches live */ .mobile-menu[data-open="true"] { display: flex; } } /* ---------- Hero (centered, decor floats behind/around copy) ---------- */ .hero { padding: 100px 0 120px; position: relative; overflow: hidden; text-align: center; } .hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-glow); pointer-events: none; z-index: 0; } .hero-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; padding: 0 24px; } .hero h1 { margin-top: 20px; } .hero h1 .accent { white-space: nowrap; } .hero .lede { margin: 22px auto 0; max-width: 640px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; justify-content: center; } .hero-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .decor-card { position: absolute; background: #ffffff; padding: 7px; border-radius: 13px; border: 1px solid rgba(240, 180, 41, 0.4); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 38px rgba(240, 180, 41, 0.18); opacity: 0.85; } .decor-card img { width: 100%; border-radius: 8px; display: block; } .dc1 { width: 290px; top: 8%; left: 12%; transform: rotate(-7deg); } .dc2 { width: 320px; bottom: 10%; right: 10%; transform: rotate(5deg); } .dc3 { width: 235px; top: 5%; right: 8%; transform: rotate(6deg); } .dc4 { width: 255px; bottom: 7%; left: 9%; transform: rotate(-5deg); } .dchip-1 { top: 16%; right: 16%; transform: rotate(4deg); } .dchip-2 { top: 47%; left: 14%; transform: rotate(-5deg); } .dchip-3 { bottom: 24%; left: 23%; transform: rotate(-3deg); } .hero-decor .proof-chip { opacity: 0.65; } .hero-decor .proof-chip.orange { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 26px rgba(240, 180, 41, 0.35); } .hero-decor .proof-chip.ink { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); border-color: rgba(240, 180, 41, 0.3); } .rating-badge { margin-top: 22px; } .stars { display: inline-flex; gap: 3px; color: var(--accent); } .stars svg { width: 16px; height: 16px; } .rating-line { font-size: 0.92rem; color: var(--body-c); margin-top: 6px; } .rating-line .accent { font-weight: 600; } .rating-partners { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 16px; flex-wrap: wrap; } .rating-partners img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; } [data-theme="light"] .rating-partners img { filter: brightness(0); opacity: 0.65; } .btn-rating { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.85rem; color: var(--muted); } .btn-rating .stars svg { width: 13px; height: 13px; } .proof-chip { position: absolute; z-index: 3; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 9px 15px; border-radius: var(--r-pill); box-shadow: var(--shadow); white-space: nowrap; } .proof-chip.orange { background: var(--accent); color: var(--accent-ink); } .proof-chip.ink { background: var(--block); color: #fff; border: 1px solid var(--block-border); } /* ---------- Logo marquee ---------- */ .logos { padding: 56px 0 64px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); } .logos-caption { text-align: center; font-size: 0.95rem; color: var(--muted); } .logos-caption-strong { text-align: center; font-size: 0.98rem; font-weight: 600; color: var(--ink); margin: 4px 0 36px; } .logo-marquee { max-width: 1040px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); } .logo-track { display: flex; width: max-content; animation: marquee-x 75s linear infinite; } .logo-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; flex: none; } .logo-track img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.75; } [data-theme="light"] .logo-track img { filter: brightness(0); opacity: 0.6; } .logo-track span { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } @keyframes marquee-x { to { transform: translateX(-50%); } } /* ---------- Email showcase rail ---------- */ .email-rail-wrap { position: relative; } .email-rail { display: flex; justify-content: safe center; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 4px 22px; scrollbar-width: none; } .email-rail::-webkit-scrollbar { display: none; } .email-card { flex: 0 0 calc(25% - 17px); min-width: 236px; scroll-snap-align: center; padding: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease; } .email-card:hover { transform: translateY(-6px); box-shadow: 0 32px 72px rgba(0, 0, 0, 0.65), 0 0 34px rgba(240, 180, 41, 0.14); } [data-theme="light"] .email-card { box-shadow: var(--shadow-big); } .email-scroll { height: 560px; overflow-y: auto; scrollbar-width: none; } .email-scroll::-webkit-scrollbar { display: none; } .email-scroll img { width: 100%; display: block; } .rail-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; z-index: 2; box-shadow: var(--accent-glow); transition: transform 0.2s ease, background 0.2s ease; } .rail-btn:hover { background: var(--accent-hover); transform: translateY(-50%) scale(1.08); } .rail-btn.prev { left: -10px; } .rail-btn.next { right: -10px; } .rail-btn svg { width: 18px; height: 18px; } @media (max-width: 860px) { .email-card { flex: 0 0 264px; } .email-scroll { height: 480px; } .rail-btn { width: 44px; height: 44px; } .rail-btn.prev { left: 4px; } .rail-btn.next { right: 4px; } } /* ---------- CTA pitch panel ---------- */ .cta-pitch { padding-top: 0; } .cta-panel { position: relative; text-align: center; border: 1px solid var(--border); border-radius: 32px; padding: 88px 40px; overflow: hidden; background-color: var(--bg-alt); background-image: radial-gradient(520px 340px at 50% 115%, rgba(240, 180, 41, 0.14), transparent 70%), linear-gradient(rgba(240, 180, 41, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 180, 41, 0.045) 1px, transparent 1px); background-size: auto, 44px 44px, 44px 44px; } .cta-panel h2 { margin-top: 16px; } .cta-panel .lede { margin: 16px auto 32px; } .cta-panel .ps { margin: 30px auto 0; max-width: 480px; font-size: 0.9rem; color: var(--muted); } @media (max-width: 640px) { .hb { display: none; } } @media (max-width: 860px) { .cta-panel { padding: 60px 22px; border-radius: 22px; } } /* ---------- Metrics (ink block) ---------- */ .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .metric { background: var(--block-card); border: 1px solid var(--block-border); border-radius: var(--r-card); padding: 36px 30px; } .metric strong { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 4.6vw, 3.4rem); font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 12px; } .metric span { font-size: 0.92rem; } /* ---------- Cards / services ---------- */ .service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .service { position: relative; background: var(--card-grad); border: 1px solid var(--border); border-radius: var(--r-card); padding: 44px 32px 34px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .service:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .num-chip { position: absolute; top: -15px; left: 22px; display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; border-radius: var(--r-chip); transform: rotate(-4deg); box-shadow: var(--shadow); } .service > p { margin-top: 10px; font-size: 0.95rem; } .service ul { margin-top: 18px; display: grid; gap: 10px; } .service ul li, .check-list li { position: relative; padding-left: 28px; font-size: 0.93rem; } .service ul li::before, .check-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 5px; background-color: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eab234' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: 11px; background-position: center; background-repeat: no-repeat; } /* ---------- Not cookie-cutter ---------- */ .notcc-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .notcc-rows { display: grid; gap: 14px; } .notcc-row { background: var(--card-grad); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; padding: 20px 24px; } .notcc-row h3 { font-size: 1.15rem; } .notcc-row p { margin-top: 6px; font-size: 0.93rem; } .sticker-cloud { position: relative; min-height: 380px; } .word-sticker { position: absolute; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1; padding: 14px 28px; border-radius: 18px; box-shadow: var(--shadow-big); white-space: nowrap; } .ws-gold { background: var(--accent); color: var(--accent-ink); } .ws-ink { background: #17130d; color: #ffffff; border: 1px solid var(--block-border); } .ws-white { background: #ffffff; color: #17130d; } .ws-line { background: var(--bg); border: 2px solid var(--accent); color: var(--accent); } .ws-1 { top: 4%; left: 12%; transform: rotate(-6deg); z-index: 2; } .ws-2 { top: 26%; left: 0; transform: rotate(3deg); z-index: 3; } .ws-3 { top: 22%; right: 0; transform: rotate(-4deg); z-index: 1; } .ws-4 { top: 48%; left: 34%; transform: rotate(5deg); z-index: 4; } .ws-5 { top: 70%; left: 8%; transform: rotate(-4deg); z-index: 2; } .notcc-grid > .reveal:first-child { transform: translateX(-44px); } .notcc-grid > .reveal:last-child { transform: translateX(44px); } .notcc-grid > .reveal.in { transform: none; } @media (max-width: 1000px) { .notcc-grid { grid-template-columns: 1fr; gap: 40px; } .sticker-cloud { min-height: 300px; } } /* ---------- Case studies ---------- */ .block.cs-bg { background-color: var(--block); } .cs-bg { background-color: var(--bg-alt); background-image: radial-gradient(720px 420px at 88% 6%, rgba(240, 180, 41, 0.08), transparent 70%), radial-gradient(640px 460px at 8% 55%, rgba(240, 180, 41, 0.06), transparent 70%), linear-gradient(rgba(240, 180, 41, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 180, 41, 0.04) 1px, transparent 1px); background-size: auto, auto, 44px 44px, 44px 44px; } .case { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; margin-bottom: 96px; } .case:last-of-type { margin-bottom: 0; } .case-media { display: grid; gap: 26px; padding: 14px; } .case-media figure { position: relative; background: #ffffff; padding: 10px; border-radius: var(--r-card); border: 1px solid #e5e0d4; box-shadow: var(--shadow); transition: transform 0.3s ease; } .case-media figure img { border-radius: 9px; } .case-media figure:first-child { transform: rotate(-1.5deg); } .case-media figure.after { transform: rotate(1.25deg); } .case-media figure:hover { transform: rotate(0deg) scale(1.015); } .case-media figcaption { position: absolute; top: -13px; left: 16px; padding: 5px 13px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--block); color: #fff; transform: rotate(-2deg); box-shadow: var(--shadow); } .case-media figure.after figcaption { background: var(--accent); color: var(--accent-ink); } .case-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .case-result { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; color: var(--ink); line-height: 1.05; margin: 12px 0 14px; } .case-body > p { font-size: 1rem; } .case-body ul { margin-top: 18px; display: grid; gap: 10px; } .case-strategy { margin-top: 20px; font-size: 0.85rem; color: var(--muted); font-family: var(--font-mono); line-height: 1.55; } /* ---------- Summary cards (what you get) ---------- */ .sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .sum-card { position: relative; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--card-grad); padding: 24px 26px 30px; transition: transform 0.25s ease, border-color 0.25s ease; } .sum-card:hover { transform: translateY(-4px); border-color: var(--accent-line); } .step-chip { position: absolute; top: 20px; left: 20px; z-index: 2; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; padding: 6px 13px; border-radius: var(--r-chip); transform: rotate(-2deg); box-shadow: var(--shadow); } .sum-visual { height: 190px; margin-bottom: 20px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(240px 160px at 50% 100%, rgba(240, 180, 41, 0.08), transparent 70%), linear-gradient(rgba(240, 180, 41, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 180, 41, 0.05) 1px, transparent 1px); background-size: auto, 34px 34px, 34px 34px; } .sum-visual svg { width: 170px; height: 130px; } .sum-card h3 { font-size: 1.25rem; } .sum-card p { margin-top: 8px; font-size: 0.95rem; } .sum-grid > .reveal:nth-child(2) { transition-delay: 0.1s; } .sum-grid > .reveal:nth-child(3) { transition-delay: 0.2s; } .sum-grid > .reveal:nth-child(4) { transition-delay: 0.3s; } @media (max-width: 860px) { .sum-grid { grid-template-columns: 1fr; } } /* ---------- Marquee band ---------- */ .marquee-section { padding-bottom: 0; overflow: hidden; } .marquee-band { padding: 56px 0 72px; } .marquee-tilt { transform: none; } .marquee { display: flex; align-items: center; gap: 20px; width: max-content; animation: marquee-x 55s linear infinite; } .marquee img { height: 250px; width: auto; background: #ffffff; padding: 8px; border-radius: 14px; border: 1px solid #e5e0d4; box-shadow: var(--shadow); } /* ---------- Booking (ink block) ---------- */ .booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .booking-check { margin-top: 34px; display: grid; gap: 26px; } .booking-check h3 { font-size: 1.02rem; margin-bottom: 12px; } .booking-check ul { display: grid; gap: 10px; } .calendly-shell { background: #ffffff; border-radius: 18px; border: 1px solid var(--block-border); overflow: hidden; box-shadow: var(--shadow-big); } /* ---------- FAQ ---------- */ .faq-list { display: grid; gap: 12px; } .faq-item { background: var(--card-grad); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); position: relative; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background-color: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eab234' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-size: 13px; background-position: center; background-repeat: no-repeat; transition: transform 0.25s ease; } .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-body { padding: 0 24px 22px; font-size: 0.95rem; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--border); padding: 72px 0 150px; background: var(--bg-alt); position: relative; overflow: hidden; } .footer .wrap { position: relative; z-index: 1; } .footer p.footer-wordmark { position: absolute; left: 0; right: 0; bottom: -0.16em; margin: 0; z-index: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(4.5rem, 13.5vw, 12rem); line-height: 1; letter-spacing: -0.04em; color: rgba(240, 180, 41, 0.05); -webkit-text-stroke: 1.5px rgba(240, 180, 41, 0.17); filter: blur(1.2px); -webkit-mask-image: linear-gradient(180deg, #000 12%, rgba(0, 0, 0, 0.25) 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 12%, rgba(0, 0, 0, 0.25) 78%, transparent 100%); pointer-events: none; user-select: none; white-space: nowrap; } [data-theme="light"] .footer p.footer-wordmark { color: rgba(199, 133, 0, 0.05); -webkit-text-stroke-color: rgba(199, 133, 0, 0.2); } .partners-mini { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .partners-mini img { height: 30px; width: auto; background: #ffffff; padding: 4px 9px; border-radius: 7px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .footer .brand { margin-bottom: 14px; } .footer p { font-size: 0.9rem; } .footer h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; font-weight: 600; } .footer ul { display: grid; gap: 10px; } .footer ul a { font-size: 0.92rem; transition: color 0.15s; } .footer ul a:hover { color: var(--accent); } .footer-legal { border-top: 1px solid var(--border); padding-top: 28px; } .footer-legal .copyright { font-family: var(--font-mono); font-size: 0.76rem; margin-bottom: 14px; color: var(--ink); } .footer-legal p:last-child { font-size: 0.74rem; line-height: 1.6; color: var(--muted); } /* ---------- Sticky CTA ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); text-align: center; transform: translateY(110%); transition: transform 0.3s ease; } .sticky-cta.on { transform: translateY(0); } .sticky-cta .btn { width: 100%; max-width: 440px; justify-content: center; } @media (min-width: 901px) { .sticky-cta { display: none; } } /* ---------- Section glows ---------- */ .glow-a { background-image: radial-gradient(760px 480px at 82% 0%, rgba(240, 180, 41, 0.07), transparent 70%); } /* ---------- Reveal system ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-pop { opacity: 0; transform: scale(0.94) translateY(18px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-pop.in { opacity: 1; transform: none; } /* Two-column blocks combine from the sides */ .booking-grid > .reveal:first-child { transform: translateX(-44px); } .booking-grid > .reveal:last-child { transform: translateX(44px); } .booking-grid > .reveal.in { transform: none; } /* Case studies: media and copy slide in from opposite sides */ .case.reveal { opacity: 1; transform: none; } .case > * { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; } .case > :first-child { transform: translateX(-44px); } .case > :last-child { transform: translateX(44px); } .case.in > * { opacity: 1; transform: none; } /* Grid stagger */ .service-grid > .reveal:nth-child(2) { transition-delay: 0.1s; } .service-grid > .reveal:nth-child(3) { transition-delay: 0.2s; } .service-grid > .reveal:nth-child(4) { transition-delay: 0.3s; } .service-grid > .reveal:nth-child(5) { transition-delay: 0.4s; } .service-grid > .reveal:nth-child(6) { transition-delay: 0.5s; } .metric-grid > .reveal:nth-child(2), .process-grid > .reveal:nth-child(2) { transition-delay: 0.12s; } .metric-grid > .reveal:nth-child(3), .process-grid > .reveal:nth-child(3) { transition-delay: 0.24s; } /* ---------- Responsive ---------- */ @media (max-width: 1150px) { .hero { padding: 72px 0 88px; } /* keep the desktop collage feel: small ambient cards, no chips */ .hero-decor .proof-chip { display: none; } /* Values taken from the live site: at 0.55 the cards read as texture behind the headline instead of competing with it. Do not raise these back to 0.85. */ .dc1 { width: 140px; top: 1%; left: -24px; opacity: 0.55; } .dc2 { width: 160px; bottom: 1%; right: -28px; opacity: 0.55; } .dc3, .dc4 { display: none; } } @media (max-width: 1000px) { .booking-grid { grid-template-columns: 1fr; gap: 44px; } .results-split { grid-template-columns: 1fr; } } @media (max-width: 860px) { .section { padding: 72px 0; } .service-grid, .vs-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .metric-grid { grid-template-columns: 1fr; } .cs-statbar { grid-template-columns: 1fr 1fr; } .case { grid-template-columns: 1fr; gap: 40px; margin-bottom: 72px; } .case .case-media { order: -1; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .marquee img { height: 190px; } .marquee-card img { height: 158px; } .hero { padding: 56px 0 72px; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .word-sticker { font-size: 1.25rem; padding: 10px 18px; } .sticker-cloud { min-height: 240px; } } @media (max-width: 560px) { /* the wordmark + CTA + toggle must never exceed the viewport */ .brand-logo { height: 26px; } .nav-inner { height: 62px; } .nav-links { gap: 10px; } .nav-links .btn { padding: 10px 14px; font-size: 0.68rem; letter-spacing: 0.08em; gap: 7px; } .nav-links .btn svg { width: 13px; height: 13px; } .theme-toggle { width: 38px; height: 38px; } .theme-toggle svg { width: 15px; height: 15px; } } @media (max-width: 400px) { .brand-logo { height: 22px; } .nav-links .btn { padding: 9px 12px; font-size: 0.62rem; } .theme-toggle { width: 34px; height: 34px; } } @media (max-width: 480px) { .brand { font-size: 1rem; gap: 7px; } .brand svg { width: 24px; height: 24px; } .proof-chip { font-size: 0.66rem; padding: 7px 11px; } .cs-statbar { grid-template-columns: 1fr; } } /* ---------- Cookie banner ---------- */ .cookie-bar { position: fixed; left: 20px; bottom: 20px; max-width: 460px; z-index: 120; background: var(--card-grad); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-big); transform: translateY(140%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; } .cookie-bar.on { transform: none; opacity: 1; } .cookie-bar p { font-size: 0.85rem; color: var(--body-c); } .cookie-bar a { color: var(--accent); text-decoration: underline; } .cookie-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .cookie-actions .btn { padding: 10px 18px; font-size: 0.7rem; } @media (max-width: 560px) { .cookie-bar { left: 12px; right: 12px; bottom: 12px; } } /* The sticky CTA and the cookie bar both pin to the bottom on mobile. While the sticky bar is up, lift the cookie card clear of it instead of burying the CTA. */ @media (max-width: 900px) { .sticky-cta.on ~ .cookie-bar { bottom: calc(84px + env(safe-area-inset-bottom)); } } /* ---------- Guides / blog ---------- Deliberately NOT the landing-page look. No glows, no glass cards, no rotated proof. Editorial instead: hairline rules, a numbered index, mono metadata. */ .blog-masthead { padding: 64px 0 40px; border-bottom: 1px solid var(--border); } .blog-crumb { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; } .blog-crumb a { color: var(--muted); } .blog-crumb a:hover { color: var(--accent); } .blog-masthead h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } .blog-lead { font-size: 1.1rem; max-width: 720px; margin-top: 18px; } .blog-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; } .blog-stats span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .blog-stats strong { color: var(--accent); font-size: 0.86rem; } .blog-index-section { padding-top: 64px; } .blog-index-head { margin-bottom: 12px; } .blog-index-head h2 { font-size: 1.5rem; } .blog-index-head p { margin-top: 10px; max-width: 640px; } .post-list { counter-reset: none; margin-top: 26px; border-top: 1px solid var(--border); } .post-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 26px; align-items: start; padding: 30px 4px; border-bottom: 1px solid var(--border); transition: background 0.2s ease; } .post-row:hover { background: var(--accent-soft); } .post-num { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; color: var(--accent); padding-top: 2px; } .post-body h3 { font-size: 1.22rem; margin: 10px 0 8px; line-height: 1.22; } .post-body p { font-size: 0.92rem; max-width: 62ch; } .post-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: var(--r-chip); padding: 4px 9px; } .post-state { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--r-chip); padding: 5px 10px; white-space: nowrap; margin-top: 2px; } .blog-note { margin-top: 30px; font-size: 0.9rem; color: var(--muted); } .blog-note a { color: var(--accent); text-decoration: underline; } .blog-cta-section { padding-top: 0; } .blog-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .blog-link { display: block; border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px 22px; transition: border-color 0.2s ease, transform 0.2s ease; } .blog-link:hover { border-color: var(--accent); transform: translateY(-3px); } .blog-link h3 { font-size: 1.05rem; margin: 12px 0 8px; } .blog-link p { font-size: 0.86rem; } @media (max-width: 860px) { .post-row { grid-template-columns: 34px 1fr; gap: 16px; padding: 24px 2px; } .post-state { grid-column: 2; justify-self: start; margin-top: 12px; } .blog-links { grid-template-columns: 1fr; } .blog-stats { gap: 16px; } } /* ---------- Blog post (two column, sticky contents) ---------- Intentionally unlike both the landing pages and the usual centred-column article layout: a sticky contents rail and CTA on the left, prose on the right, key points boxed at the top. */ .post-head { padding: 56px 0 34px; border-bottom: 1px solid var(--border); } .post-head h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin: 16px 0 0; max-width: 20ch; } .post-head .post-tag { margin-bottom: 4px; } .post-meta { margin-top: 18px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .post-shell { display: grid; grid-template-columns: 236px 1fr; gap: 64px; align-items: start; padding-top: 52px; padding-bottom: 72px; } .post-shell > * { min-width: 0; } .post-side { position: sticky; top: 96px; } .post-toc-title, .post-next-title, .post-key-title { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .post-toc ul { border-left: 1px solid var(--border); } .post-toc li a { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 0.84rem; line-height: 1.35; color: var(--body-c); transition: color 0.15s, border-color 0.15s; } .post-toc li a:hover { color: var(--accent); border-left-color: var(--accent); } .post-cta { margin-top: 30px; padding: 20px 18px; border: 1px solid var(--border); border-radius: var(--r-card); } .post-cta p { font-size: 0.86rem; margin-bottom: 14px; color: var(--ink); } .post-cta .btn { width: 100%; justify-content: center; padding: 13px 16px; font-size: 0.72rem; } .post-main { max-width: 72ch; } .post-key { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-card); padding: 22px 24px 20px; margin-bottom: 38px; } .post-key-title { display: flex; align-items: center; gap: 8px; color: var(--accent); margin-bottom: 14px; } .post-key-title svg { width: 13px; height: 13px; } .post-key ul { display: grid; gap: 10px; } .post-key li { font-size: 0.92rem; padding-left: 18px; position: relative; line-height: 1.5; } .post-key li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .post-intro { font-size: 1.08rem; line-height: 1.68; margin-bottom: 18px; color: var(--ink); } .post-main h2 { font-size: 1.45rem; margin: 46px 0 16px; padding-top: 10px; scroll-margin-top: 100px; } .post-main p { margin-bottom: 17px; line-height: 1.72; } .post-next { margin-top: 52px; padding: 24px 26px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-alt); } .post-next-list { display: grid; gap: 9px; } .post-next-list a { color: var(--accent); font-weight: 500; font-size: 0.94rem; } .post-next-list a:hover { text-decoration: underline; } .post-rel-title { font-size: 1.35rem; margin-bottom: 22px; } .post-read { color: var(--accent); border-style: solid; border-color: var(--accent-line); } .post-read:hover { background: var(--accent-soft); } .post-body h3 a { color: var(--ink); } .post-row:hover .post-body h3 a { color: var(--accent); } @media (max-width: 1000px) { .post-shell { grid-template-columns: 1fr; gap: 30px; padding-top: 34px; } .post-side { position: static; } .post-toc { display: none; } /* the contents rail only earns its space on desktop */ .post-cta { margin-top: 0; } .post-main { max-width: none; } } /* ---------- Revenue calculator (homepage, between Services and Why CaesarMails) ---------- */ .calc-section { background: var(--bg-alt); } .calc-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; } .calc-grid > * { min-width: 0; } .calc-copy .lede { margin: 18px 0 30px; } .calc-copy h2 { margin-top: 16px; } .calc-card { background: var(--card-grad); border: 1px solid var(--border); border-radius: var(--r-card); padding: 34px 32px 28px; box-shadow: var(--shadow-big); } [data-theme="light"] .calc-card { background: #ffffff; } .calc-label { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .calc-big { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 3rem); letter-spacing: -0.02em; color: var(--ink); margin: 10px 0 22px; font-variant-numeric: tabular-nums; } /* range input needs resetting on every engine before it can be styled */ .calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--border); outline: none; cursor: pointer; } .calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-alt); box-shadow: var(--accent-glow); cursor: grab; transition: transform 0.15s ease; } .calc-range::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; } .calc-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-alt); box-shadow: var(--accent-glow); cursor: grab; } .calc-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } .calc-scale { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--muted); } .calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; } .calc-box { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-chip); padding: 18px 18px 16px; } .calc-box strong { display: block; font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .calc-box span { font-size: 0.8rem; line-height: 1.45; color: var(--body-c); display: block; } .calc-foot { margin-top: 18px; font-size: 0.78rem; color: var(--muted); line-height: 1.5; } @media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; gap: 40px; } .calc-card { padding: 28px 20px 24px; } .calc-out { grid-template-columns: 1fr; } } /* ---------- SEO landing pages (email-marketing-agency.html) ---------- Long-form keyword pages. They reuse the homepage components almost entirely, so this block only adds the shorter hero, the text/screenshot split, and readable long-form prose. */ .seo-hero { padding: 68px 0 60px; } .seo-hero .lede { margin: 22px auto 0; } .seo-split { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 60px; align-items: center; } .seo-split > * { min-width: 0; } .seo-shot { background: var(--card-grad); border: 1px solid var(--border); border-radius: var(--r-card); padding: 10px; box-shadow: var(--shadow-big); max-width: 400px; margin-left: auto; transform: rotate(1.25deg); } .seo-shot .email-scroll { height: 500px; border-radius: 9px; } [data-theme="light"] .seo-shot { background: #ffffff; } .seo-prose h2 { margin-bottom: 20px; } .seo-prose p { margin-bottom: 18px; max-width: 68ch; } .seo-prose p:last-of-type { margin-bottom: 0; } .seo-prose.wide { max-width: 900px; margin: 0 auto; } .seo-prose.wide p { max-width: none; } @media (max-width: 900px) { .seo-split { grid-template-columns: 1fr; gap: 40px; } .seo-shot { margin: 0 auto; transform: none; max-width: 340px; } .seo-shot .email-scroll { height: 420px; } } /* ---------- Legal pages ---------- */ .legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 10px 0 8px; } .legal .updated { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 40px; } .legal h2 { font-size: 1.45rem; margin: 42px 0 14px; } .legal h3 { font-size: 1.08rem; margin: 26px 0 10px; } .legal p { font-size: 0.95rem; margin-bottom: 12px; } .legal ul { padding-left: 22px; list-style: disc; margin-bottom: 14px; } .legal li { font-size: 0.95rem; margin-bottom: 8px; } .legal a { color: var(--accent); } /* ---------- Light theme fixes ---------- */ /* Dark ink blocks keep their bright dark-mode palette even in light theme */ [data-theme="light"] .block { --accent: #f0b429; --accent-hover: #ffc94d; --accent-ink: #171203; --accent-soft: rgba(240, 180, 41, 0.12); --accent-line: rgba(240, 180, 41, 0.38); --ink: #ffffff; --body-c: #b3aea3; --muted: #8a867d; --border: rgba(255, 255, 255, 0.11); --card-grad: radial-gradient(130% 130% at 0% 0%, #171308 0%, #0d0b08 60%); --shadow: 0 22px 60px rgba(0, 0, 0, 0.55); } /* White sticker would vanish on a light background */ [data-theme="light"] .ws-white { background: #17130d; color: #ffffff; } /* Pale SVG strokes would vanish on white cards */ [data-theme="light"] .sum-visual svg [stroke="#d9d4c8"] { stroke: #57503f; } [data-theme="light"] .sum-visual svg [fill="#d9d4c8"] { fill: #57503f; } /* ---------- Mobile density pass (desktop proportions, scaled down) ---------- */ @media (max-width: 640px) { .section { padding: 54px 0; } .section-head { margin-bottom: 34px; } h2 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); } .hero h1 { font-size: 1.95rem; } .lede { font-size: 0.97rem; } .btn { padding: 14px 22px; font-size: 0.78rem; } .pill { font-size: 0.63rem; padding: 5px 11px; letter-spacing: 0.1em; } .hero { padding: 44px 0 58px; } .hero .lede { margin-top: 14px; } .hero-ctas { margin-top: 22px; gap: 10px; } .rating-badge { margin-top: 16px; } .rating-partners { gap: 18px; margin-top: 12px; } .rating-partners img { height: 22px; } .logos { padding: 40px 0 44px; } .logo-track img { height: 24px; } .logo-set { gap: 44px; padding-right: 44px; } .email-card { flex: 0 0 228px; } .email-scroll { height: 410px; } .service, .step { padding: 34px 20px 24px; } .service ul li, .check-list li { font-size: 0.88rem; } .sum-card { padding: 20px 18px 24px; } .sum-visual { height: 138px; margin-bottom: 14px; } .sum-visual svg { width: 128px; height: 98px; } .notcc-row { padding: 15px 18px; } .notcc-row p { font-size: 0.88rem; } .case { gap: 24px; margin-bottom: 52px; } .case-media { gap: 16px; padding: 8px; } .case-result { font-size: 1.7rem; } .cta-panel { padding: 44px 18px; } .cta-panel .ps { font-size: 0.84rem; margin-top: 22px; } .faq-item summary { padding: 15px 46px 15px 17px; font-size: 0.93rem; } .faq-body { padding: 0 17px 17px; font-size: 0.89rem; } .metric { padding: 26px 22px; } .metric strong { font-size: 2.2rem; } .booking-check { gap: 18px; margin-top: 24px; } .marquee { gap: 12px; } .marquee img { height: 150px; padding: 5px; border-radius: 10px; } .marquee-card img { height: 122px; } .footer { padding: 52px 0 104px; } .btn-rating { font-size: 0.78rem; } } /* ---------- Mobile: touch, performance, overflow safety ---------- */ @media (max-width: 860px) { /* nothing may push the page sideways */ .wrap, .wrap-narrow, .hero-inner { max-width: 100%; } .cta-panel, .sum-card, .service, .step, .vs-card, .faq-item, .notcc-row { overflow-wrap: anywhere; } /* lighter compositing so scrolling stays smooth on phones */ .nav { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .decor-card { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); } .email-card { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5); } .email-card:hover { transform: none; } .service:hover, .sum-card:hover, .case-media figure:hover, .proof-card:hover, .email-card:hover { transform: none; } /* momentum scrolling inside the email rail */ .email-rail { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* comfortable tap targets (Apple/Google minimum is 44px) */ .footer ul a, .nav-links a { display: inline-block; padding: 6px 0; min-height: 34px; } .faq-item summary { min-height: 52px; display: flex; align-items: center; } .rail-btn { width: 46px; height: 46px; } .theme-toggle { width: 44px; height: 44px; } } @media (max-width: 560px) { /* one thumb-friendly action per row */ .hero-ctas { flex-direction: column; align-items: stretch; } .hero-ctas .btn { width: 100%; justify-content: center; } .cta-center .btn, .cta-panel .btn { width: 100%; max-width: 340px; justify-content: center; } .btn { padding: 15px 20px; } /* keep the email designs readable rather than tiny */ .email-card { flex: 0 0 78vw; } .email-rail { gap: 14px; scroll-padding: 0 12px; } .case-media figure:first-child, .case-media figure.after { transform: none; } .case-media figcaption { transform: none; } .cookie-bar { padding: 16px 16px 18px; border-radius: 14px; } .cookie-bar p { font-size: 0.8rem; } .cookie-actions .btn { flex: 1; justify-content: center; } .sticker-cloud { min-height: 210px; } .word-sticker { font-size: 1.1rem; padding: 9px 15px; } .ws-1 { top: 2%; left: 4%; } .ws-2 { top: 24%; left: 0; } .ws-3 { top: 22%; right: 2%; } .ws-4 { top: 50%; left: 30%; } .ws-5 { top: 72%; left: 4%; } .logos-caption, .logos-caption-strong { font-size: 0.88rem; } .footer-wordmark { font-size: 3.4rem; } } @media (max-width: 400px) { .wrap, .wrap-narrow, .hero-inner { padding-left: 18px; padding-right: 18px; } .hero h1 { font-size: 1.75rem; } .email-card { flex: 0 0 82vw; } .digit { min-width: 24px; height: 38px; font-size: 1.05rem; } } /* ---------- Motion safety ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .logo-track, .marquee { animation: none; } .reveal, .reveal-pop, .case > *, .deliver-list.reveal li, .vs-grid .vs-card.reveal, .booking-grid > .reveal { opacity: 1; transform: none; transition: none; } * { transition-duration: 0.01ms !important; } }