/* site.css: every public page (D14); /app has its own app.css. Tokens from site-original/index.html, self-hosted fonts. Sections: 1 fonts, tokens, base · 2 components (the design system) · 3 page chrome and documents · 4 agency site (/, services, contact, privacy, terms…) · 5 Website Security Patch pages. The funnel uses no class of section 4. */ /* ===== 1. fonts, tokens, base ===== */ /* Font URLs carry their content hash (Asset::url, ServerSpeedTest checks it). */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin.woff2?v=3910d3a9cd') format('woff2'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/hanken-grotesk-latin.woff2?v=0e025ac742') format('woff2'); } /* only the agency pages' labels use it; a browser fetches a font only when a page uses it, so the funnel never loads it */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2?v=f532b393f5') format('woff2'); } /* metric-matched fallbacks (measured from the woff2 files against Arial): the swap to the real font moves nothing */ @font-face { font-family: 'Bricolage Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 700 800; size-adjust: 103.84%; ascent-override: 89.56%; descent-override: 26%; line-gap-override: 0%; } @font-face { font-family: 'Hanken Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); size-adjust: 101.02%; ascent-override: 98.99%; descent-override: 29.99%; line-gap-override: 0%; } :root { --dark: #0A0F0A; --lime: #C7F94E; --green: #2A6F4E; --light: #F4F6EE; --sunken: #ECEFE3; --ink-soft: #44403A; --muted: #6B665B; --line: #DCE0D2; --danger: #B3261E; --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', sans-serif; --font-body: 'Hanken Grotesk', 'Hanken Fallback', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* type scale (§4.1): phone values, desktop from 720 px; no other sizes. --fs-display (the landing's hook and last heading) and --fs-stat (its stat wall: counts, hours, percentages, never dollars) are the landing's two display sizes. */ --fs-label: 15px; --fs-hook: 30px; --fs-sub: 17px; --fs-h2: 24px; --fs-h3: 18px; --fs-body: 16px; --fs-small: 14px; --fs-price: 40px; --fs-btn: 16px; --fs-display: 40px; --fs-stat: 40px; --gutter: 16px; } @media (min-width: 720px) { :root { --fs-label: 16px; --fs-hook: 44px; --fs-sub: 19px; --fs-h2: 32px; --fs-h3: 19px; --fs-body: 17px; --fs-price: 48px; --fs-btn: 17px; --gutter: 24px; --fs-display: 72px; --fs-stat: 56px; } } * { box-sizing: border-box; } body { margin: 0; background: var(--light); color: var(--dark); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; } a { color: var(--green); } [hidden] { display: none !important; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .site ::selection { background: var(--lime); color: var(--dark); } .site a:focus-visible, .site button:focus-visible, .site summary:focus-visible, .site input:focus-visible, .site select:focus-visible, .site textarea:focus-visible, .site legend:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } .muted { color: var(--muted); } .pre { white-space: pre-line; } .invalid { display: block; color: var(--danger); font-size: var(--fs-small); font-style: normal; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; min-height: 0; opacity: 0; } .ticket { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-small); line-height: 1.6; background: var(--light); border-radius: 12px; padding: 16px; } /* ===== 2. components (§4.4: the whole list) ===== */ .wrap { max-width: 1080px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .text { max-width: 640px; } .grid-7-5 { display: grid; gap: 24px; } @media (min-width: 720px) { .grid-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--dark); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-btn); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; } .btn::after { content: '→'; color: var(--lime); } .btn:hover { background: var(--green); } .btn-wide { display: flex; width: 100%; } .btn[aria-busy=true] { opacity: .7; cursor: progress; } .btn[aria-busy=true]::after { content: none; } .link { padding: 0; border: 0; background: none; color: var(--green); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .link:hover { color: var(--dark); } .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; } .sunken { background: var(--sunken); border-radius: 12px; padding: 16px 24px; } .dark { background: var(--dark); color: var(--light); border-radius: 12px; padding: 32px var(--gutter); } .dark a { color: var(--lime); } .card > :first-child, .sunken > :first-child, .dark > :first-child { margin-top: 0; } .card > :last-child, .sunken > :last-child, .dark > :last-child { margin-bottom: 0; } .ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .ticks li { position: relative; padding-left: 32px; } .ticks li::before { content: ''; position: absolute; left: 4px; top: 0.4em; width: 13px; height: 7px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg); } .dark .ticks li::before { border-color: var(--lime); } .price { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-price); line-height: 1; letter-spacing: -0.03em; } .steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 16px; } .steps li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 16px; align-items: start; } .steps li::before { content: counter(step); grid-row: span 2; width: 36px; height: 36px; border-radius: 999px; background: var(--dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-small); } .steps strong { padding-top: 6px; } .steps span { color: var(--ink-soft); } @media (min-width: 720px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } } .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; font-weight: 700; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; flex: none; font-size: 24px; font-weight: 400; color: var(--green); } .faq details[open] summary::after { content: '−'; } .faq details > :not(summary) { margin: 0 0 16px; color: var(--ink-soft); } /* phone landing only, shown (.on) once the hero button scrolls out; the only fixed element, and the only shadow */ .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; visibility: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -12px 24px -16px rgba(10, 15, 10, 0.35); font-size: var(--fs-small); text-align: center; transform: translateY(110%); transition: transform 0.2s, visibility 0.2s; } .cta-bar.on { visibility: visible; transform: none; } .cta-bar .php-btn { flex: none; min-height: 48px; padding: 0 20px; } .cta-bar p { margin: 0; color: var(--ink-soft); text-align: left; font-size: 13px; line-height: 1.3; } .cta-bar p strong { color: var(--dark); } @media (min-width: 720px) { .cta-bar { display: none; } } .field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } .field > label, .field > legend { padding: 0; font-weight: 600; } .field input:not([type=checkbox], [type=radio]), .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--muted); border-radius: 12px; background: #fff; color: var(--dark); font: inherit; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); } .field-error { margin: 0; color: var(--danger); font-size: var(--fs-small); font-style: normal; } .field-error:empty { display: none; } .field-error:not(:empty)::before { content: '! '; font-weight: 700; } .field-hint { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); } .field input[aria-invalid=true] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); } /* the error summary at the top of a funnel form (partials/form-errors) */ .form-errors { padding: 16px 20px; border: 2px solid var(--danger); border-radius: 12px; background: #fff; } .form-errors:focus { outline: 2px solid var(--dark); outline-offset: 2px; } .form-errors p { margin: 0 0 8px; } .form-errors ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; } .form-errors a { color: var(--danger); font-weight: 600; } .choice { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; } .choice:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); } .choice input { flex: none; align-self: flex-start; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--green); } .slots { display: grid; gap: 12px; } .slots .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .slots .days a, .slots .days .off { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--dark); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; text-decoration: none; } .slots .days span span, .slots .days a span { font-size: var(--fs-small); font-weight: 600; color: var(--muted); } .slots .days a:hover { border-color: var(--dark); } .slots .days a[aria-current] { background: var(--dark); border-color: var(--dark); color: #fff; } .slots .days a[aria-current] span { color: var(--lime); } .slots .days .off { border-color: transparent; background: transparent; color: var(--muted); font-weight: 400; } .slots .when { padding: 0 0 8px; font-weight: 600; } .slots .times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .slots label { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 600; white-space: nowrap; cursor: pointer; } .slots label:has(input:checked) { background: var(--dark); border-color: var(--dark); color: #fff; } .slots input { position: absolute; opacity: 0; pointer-events: none; } .slots label:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; } .chip-done { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--lime); color: var(--dark); font-weight: 600; font-size: var(--fs-small); } /* a printable document: invoice, offer, report, statement of work (A4 when printed) */ .doc { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: clamp(20px, 4vw, 48px); font-size: 15px; line-height: 1.55; } .doc h1, .doc h2, .doc h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .doc h1 { font-size: var(--fs-h2); margin: 0 0 16px; } .doc h2 { font-size: 20px; margin: 24px 0 8px; } .doc h3 { font-size: var(--fs-h3); margin: 24px 0 8px; } .doc .mono, .doc .eyebrow { display: block; font-weight: 600; font-size: var(--fs-small); color: var(--muted); } .doc table { width: 100%; border-collapse: collapse; } .doc th { text-align: left; font-weight: 600; font-size: var(--fs-small); color: var(--muted); } .doc th, .doc td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .doc .num { text-align: right; white-space: nowrap; } .doc tfoot td, .doc .offer-total td { border-bottom: 0; padding: 6px 8px; } .doc tr.total td { font-family: var(--font-display); font-weight: 700; font-size: 20px; border-top: 2px solid var(--dark); } .doc section { margin-top: 20px; } .invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-bottom: 32px; } .invoice-head h2 { margin: 0 0 8px; } .invoice-logo { display: block; max-height: 64px; max-width: 220px; margin-bottom: 12px; } .invoice-meta { text-align: left; } .invoice-to { margin-bottom: 24px; } .invoice-to strong { display: block; } .stamp { display: inline-block; margin-top: 8px; padding: 4px 12px; border: 2px solid var(--danger); border-radius: 999px; color: var(--danger); font-weight: 700; } .stamp.paid { border-color: var(--green); color: var(--green); } .offer-head { margin-bottom: 24px; } .offer-head h2 { margin: 0; font-size: var(--fs-h2); } .doc .offer-item { margin: 0; } .offer-item { padding: 16px 0; border-bottom: 1px solid var(--line); break-inside: avoid; } .offer-item-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; } .offer-item h3 { margin: 0 0 8px; } .offer-price { white-space: nowrap; } .php-doc td, .php-doc th { border: 1px solid var(--line); padding: 4px 8px; } .php-report-server { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; } .php-report-server dl { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 8px 16px; margin: 0 0 12px; } .php-report-server dt { color: var(--muted); } .php-report-server dd { margin: 0; } /* W17: invoice and report details; one offer block per report; the offer page */ .invoice-head { margin-bottom: 24px; gap: 16px 24px; } .invoice-number { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); letter-spacing: 0; color: var(--muted); } .line-qty { display: none; } .invoice-lines th:first-child, .invoice-lines td:first-child { padding-left: 0; } .invoice-lines th:last-child, .invoice-lines td:last-child { padding-right: 0; } .invoice-tax-note { margin: 12px 0 0; font-size: 13px; } .invoice-offline { margin: 0; color: var(--ink-soft); } .report-to { font-family: var(--font-display); font-size: var(--fs-h3); } .php-report .invoice-head { display: grid; gap: 16px; } .php-report .invoice-meta { text-align: left; } .php-report .invoice-meta h2 { margin: 0 0 4px; } .php-report-server h4 { margin: 16px 0 4px; font-size: 15px; } .report-offer { margin-top: 32px; padding: 20px 24px; background: var(--sunken); border-radius: 12px; } .report-offer h3 { margin-top: 0; } .report-offer p:last-child { margin-bottom: 0; } .report-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-small); } .eyebrow { margin: 0 0 4px; font-weight: 600; font-size: var(--fs-label); color: var(--green); } .offer-page { max-width: 640px; } .offer-page h1 { font-size: var(--fs-h2); margin: 0 0 12px; } .offer-page .card { display: grid; gap: 4px; } .offer-page .ticks { margin: 8px 0 16px; } .offer-page .chip-done { justify-self: start; margin: 8px 0 4px; } .offer-amount { color: var(--ink-soft); } .offer-amount .price { color: var(--dark); margin-right: 4px; } .offer-total { display: block; margin-top: 4px; font-size: var(--fs-small); } .offer-fine { font-size: var(--fs-small); color: var(--muted); margin: 8px 0 0; } @media (max-width: 719px) { .doc { padding: 20px 16px; font-size: var(--fs-small); } .doc th, .doc td { padding: 10px 4px; } .doc tr.total td { font-size: 17px; } /* invoice lines stack: description (with "qty × unit price") and the amount, then the totals as rows */ .invoice-lines, .invoice-lines tbody, .invoice-lines tfoot { display: block; } .invoice-lines thead, .invoice-lines tbody td:nth-child(2), .invoice-lines tbody td:nth-child(3) { display: none; } .invoice-lines tr { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); } .invoice-lines td { display: block; padding: 12px 0; border: 0; } .doc .invoice-lines tfoot td { padding: 6px 0; } .invoice-lines tfoot tr { border: 0; } .invoice-lines tr.total { margin-top: 6px; border-top: 2px solid var(--dark); } .doc .invoice-lines tr.total td { border-top: 0; } .line-qty { display: block; } .php-report-server dl { grid-template-columns: 1fr; gap: 2px; } .php-report-server dd { margin-bottom: 8px; } } @media (min-width: 720px) { .invoice-meta { text-align: right; } } /* the cookie banner (owner, 26 Oct; components/site): a slim dark bar along the bottom, no overlay, two equal buttons; it sits above the phone landing's .cta-bar while that is shown, never over its order button */ .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--dark); border-top: 1px solid #2E3B2F; color: #E9EDE1; font-size: 12px; line-height: 1.35; } .consent[hidden] { display: none; } .consent p { margin: 0; } .consent a { color: #fff; } .consent-buttons { display: flex; flex: none; gap: 6px; } .consent button { min-width: 64px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--lime); color: var(--dark); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .consent button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (min-width: 720px) { .consent { gap: 24px; font-size: 13px; } } body:has(.consent:not([hidden])) { padding-bottom: 120px; } body:has(.cta-bar.on) .consent { bottom: calc(65px + env(safe-area-inset-bottom)); padding-bottom: 8px; } /* ===== 3. page chrome and standalone pages ===== */ .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.04em; line-height: 1; color: var(--dark); background: var(--lime); padding: 2px 4px; } /* the funnel's header: static, one row, at most 60 px (§4.3) */ .funnel-header { border-bottom: 1px solid var(--line); } .funnel-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 59px; } .funnel-header .brand svg { width: 26px; height: 26px; } .funnel-header .wordmark { font-size: 21px; } .funnel-footer { margin-top: 24px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-soft); } .funnel-footer .wrap { padding-top: 24px; padding-bottom: 32px; } /* a dot before every item; the one that starts a line falls into the clipped 20 px on the left */ .funnel-footer p { margin: 0 0 0 -20px; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; clip-path: inset(0 0 0 20px); } .funnel-footer p > * { position: relative; padding-left: 20px; } .funnel-footer p > *::before { content: '·'; position: absolute; left: 0; width: 20px; text-align: center; color: var(--muted); } .funnel-footer a, .funnel-footer .link { color: var(--ink-soft); } .funnel-footer a:hover, .funnel-footer .link:hover { color: var(--green); } /* standalone pages (invoice, offer, report, statement of work, call): one column of cards and the document */ .page { max-width: 880px; padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; } .page h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 12px; } .page h3 { font-size: var(--fs-h3); margin: 16px 0 8px; } .page p { margin: 0 0 12px; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .actions form { margin: 0; } /* the questionnaire and signature forms on those pages */ .php-fix form { display: flex; flex-direction: column; gap: 16px; } .php-fix fieldset { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 12px; } .php-fix label:not(.choice) { display: grid; gap: 6px; font-weight: 600; } .php-fix input:not([type=checkbox], [type=radio]), .php-fix select, .php-fix textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--muted); border-radius: 12px; background: #fff; font: inherit; font-weight: 400; } .php-fix .choice { font-weight: 400; } .php-fix .btn { align-self: flex-start; } @page { size: A4; margin: 16mm; } @media print { body { background: #fff; font-size: 11pt; } .no-print, .funnel-header, .funnel-footer { display: none !important; } .page { max-width: none; padding: 0; } .doc { border: 0; border-radius: 0; padding: 0; overflow: visible; } .doc tr { break-inside: avoid; } .php-report-server { break-before: page; } .php-report-server:first-of-type { break-before: auto; } } /* ===== 4. agency site (the funnel never uses these classes) ===== */ /* headline widths in em, not ch: ch is the width of "0", which changes when the fallback font swaps to Bricolage (layout shift) */ :root { --paper: #FAFAF7; --rule: #e4e6dc; --rule-nav: #e0e2d8; --dot: #1b2418; --dim: #6f7a63; } .mono-label { font-family: var(--font-mono); text-transform: uppercase; } /* ----- header ----- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(244, 246, 238, 0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule-nav); } .nav-inner { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 34px; } .nav-links, .nav-actions { display: flex; align-items: center; gap: 34px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .nav-links { margin-left: auto; } .nav-links a { text-decoration: none; color: var(--ink-soft); } .nav-links a:hover, .nav-links a[aria-current=page] { color: var(--dark); } .menu-toggle { display: none; font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 1px solid var(--dark); color: var(--dark); border-radius: 100px; padding: 10px 16px; cursor: pointer; } /* ----- buttons ----- */ .pill { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--dark); color: var(--light); padding: 17px 28px; border: none; border-radius: 100px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; } .pill:hover { background: var(--green); } .pill:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } .pill .arrow { color: var(--lime); } .nav-actions .pill { font-size: 12px; padding: 11px 18px; } .pill-lg { font-size: 14px; padding: 19px 32px; } .link-mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark); padding: 17px 8px; text-decoration: none; } .link-mono:hover { color: var(--green); } /* ----- type ----- */ .eyebrow-dot { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; } .eyebrow-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .eyebrow-dot span, .kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .kicker { margin-bottom: 18px; } .display { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 8vw, 104px); line-height: 0.96; letter-spacing: -0.035em; margin: 0 0 30px; max-width: 9.4em; } .display-sm { font-size: clamp(44px, 6.5vw, 84px); max-width: 12em; } .display .accent { color: var(--green); } .hero-sub { font-size: clamp(19px, 2.4vw, 26px); line-height: 1.5; max-width: 56ch; color: var(--ink-soft); margin: 0 0 40px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.5vw, 56px); letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 16px; max-width: 13.3em; } .intro { font-size: 19px; line-height: 1.55; max-width: 54ch; color: var(--ink-soft); margin: 0 0 56px; } .more { display: inline-block; margin-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); text-decoration: none; } .more:hover { color: var(--dark); } /* ----- sections ----- */ .hero { padding-top: 100px; padding-bottom: 88px; } .section { padding-top: 110px; padding-bottom: 90px; } .section-tight { padding-top: 110px; padding-bottom: 110px; } .band { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .band > .wrap { padding-top: 100px; padding-bottom: 100px; } .dots { background: var(--dark); position: relative; overflow: hidden; } .dots::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 22px 22px; opacity: 0.5; } .stat-grid { position: relative; padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.04em; line-height: 0.92; color: var(--light); } .stat-grid > div:first-child .stat-num { color: var(--lime); } .stat-num small { font-size: 0.5em; } .stat-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-top: 12px; } /* ----- services ----- */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .svc { background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; padding: 34px; display: flex; flex-direction: column; color: var(--dark); text-decoration: none; } a.svc:hover { border-color: var(--green); } .svc h3, .svc-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; } .svc p, .step p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; } .svc .more { margin-top: auto; padding-top: 18px; } .svc-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--green); margin-bottom: 14px; } .bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-bottom: 26px; } .bars i { width: 11px; border-radius: 4px 4px 0 0; background: var(--lime); height: 100%; } .bars i:nth-child(1) { background: var(--green); height: 42%; } .bars i:nth-child(2) { background: #5FBF6E; height: 68%; } .bars-2 i:nth-child(1) { height: 38%; } .bars-2 i:nth-child(2) { height: 60%; } .bars-3 i:nth-child(1) { height: 34%; } .bars-3 i:nth-child(2) { height: 56%; } /* ----- approach ----- */ .approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .steps-title { margin-bottom: 64px; max-width: 12em; } .step { border-top: 2px solid var(--dark); padding-top: 24px; } .step:last-child { border-top-color: var(--lime); } .step-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 20px; } .step:last-child .step-num { color: var(--green); } .step h3 { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.025em; margin: 0 0 14px; } /* ----- proof ----- */ .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .proof-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 68px); letter-spacing: -0.035em; line-height: 0.98; margin: 0 0 22px; } .proof-text { font-size: 19px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 32px; max-width: 42ch; } .proof-text strong { color: var(--dark); font-weight: 700; } .proof-nums { display: flex; gap: 40px; } .proof-num { font-family: var(--font-display); font-weight: 800; font-size: 44px; letter-spacing: -0.03em; line-height: 1; color: var(--green); } .proof-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; } .chart { border-radius: 24px; padding: 40px; } .chart > * { position: relative; } .chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; font-family: var(--font-mono); font-size: 12px; } .chart-head span:first-child { letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); } .chart-head span:last-child { color: var(--lime); } .chart-bars { display: flex; align-items: flex-end; gap: 12px; height: 220px; } .chart-bars div { flex: 1; border-radius: 6px 6px 0 0; position: relative; } .chart-bars div:nth-child(1) { background: #1f3322; height: 3%; } .chart-bars div:nth-child(2) { background: var(--green); height: 7%; } .chart-bars div:nth-child(3) { background: #5FBF6E; height: 20%; } .chart-bars div:nth-child(4) { background: var(--lime); height: 100%; } .chart-bars span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--dim); white-space: nowrap; } .chart-bars div:nth-child(4) span { color: var(--lime); } .chart-months { display: flex; justify-content: space-between; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: #4f5a45; } .quote { margin: 80px 0 0; border-top: 1px solid var(--rule-nav); padding-top: 56px; max-width: 60ch; } .quote blockquote { margin: 0 0 24px; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); line-height: 1.25; letter-spacing: -0.02em; } .quote blockquote span { color: var(--green); } .quote-by { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--muted); } /* ----- call to action ----- */ .cta { background: var(--lime); } .cta > .wrap { padding-top: 110px; padding-bottom: 110px; } .cta .kicker { color: #52662b; margin-bottom: 24px; } .cta-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 7vw, 92px); letter-spacing: -0.035em; line-height: 0.96; margin: 0 0 32px; color: var(--dark); max-width: 10.7em; } .cta-text { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.5; color: var(--dark); opacity: 0.78; max-width: 50ch; margin: 0 0 44px; } /* ----- plain text pages (about, privacy) ----- */ .prose { max-width: 64ch; font-size: 18px; line-height: 1.6; color: var(--ink-soft); } .prose p, .prose ul { margin: 0 0 18px; } .prose code { overflow-wrap: anywhere; } .prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--dark); margin: 40px 0 12px; } /* ----- legal documents (terms, privacy): title, date and version, contents, numbered clauses ----- */ .legal { max-width: 760px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); } .doc-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; color: var(--dark); margin: 0 0 8px; } .doc-meta { font-size: 14px; color: var(--muted); margin: 0 0 32px; } .doc-toc { background: var(--rule); border-radius: 12px; padding: 24px; margin: 0 0 48px; } .doc-toc ol { margin: 0; padding-left: 24px; columns: 2; column-gap: 32px; font-size: 15px; line-height: 1.5; } .doc-toc li { break-inside: avoid; padding: 4px 0; color: var(--muted); } .doc-toc a { color: var(--dark); text-decoration: none; } .doc-toc a:hover { color: var(--green); text-decoration: underline; } .legal section { border-top: 1px solid var(--line); padding: 32px 0 8px; scroll-margin-top: 120px; } .legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; color: var(--dark); margin: 0 0 16px; scroll-margin-top: 120px; } .legal h2 span { color: var(--green); font-variant-numeric: tabular-nums; } .legal h3 { font-size: 18px; color: var(--dark); } .legal p, .legal ul, .legal ol, .legal dl { margin: 0 0 16px; } .doc-note { background: var(--rule); border-radius: 12px; padding: 16px; font-size: 15px; color: var(--dark); } .doc-list dt { font-weight: 700; color: var(--dark); margin-top: 12px; } .doc-list dd { margin: 4px 0 0; } .doc-table { overflow-x: auto; margin: 0 0 16px; } .legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; } .legal th { text-align: left; font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--dark); border-bottom: 1px solid var(--dark); padding: 8px 12px 8px 0; } .legal td { vertical-align: top; border-bottom: 1px solid var(--line); padding: 12px 12px 12px 0; } .legal td:first-child { color: var(--dark); font-weight: 600; } .legal code { white-space: nowrap; font-family: inherit; font-weight: 700; background: var(--rule); border-radius: 4px; padding: 1px 6px; } @media (min-width: 720px) { .legal { font-size: 17px; } .doc-head h1 { font-size: 44px; } .legal h2 { font-size: 32px; } .doc-toc { padding: 24px 32px; } } @media (max-width: 600px) { .doc-toc ol { columns: 1; } .legal thead { display: none; } .legal tr, .legal td { display: block; } .legal tr { border-bottom: 1px solid var(--line); padding: 12px 0; } .legal td { border: 0; padding: 2px 0; } .legal td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); } } /* ----- the audit form ----- */ .form-card { background: var(--paper); border-radius: 24px; border: 1px solid var(--rule); max-width: 564px; padding: 38px 40px 40px; } .form-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 10px; } .form-card .eyebrow-dot { margin-bottom: 16px; } .form-card .eyebrow-dot span { font-size: 12px; } .form-note { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 28px; } .form-fields { display: flex; flex-direction: column; gap: 16px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-fields label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; display: block; } .form-fields input, .form-fields select, .form-fields textarea { width: 100%; padding: 13px 15px; border: 1px solid #d9dccf; border-radius: 11px; background: #fff; font-family: var(--font-body); font-size: 15px; color: var(--dark); outline: none; } .form-fields select { appearance: none; } .form-fields textarea { resize: vertical; } .form-fields input:focus, .form-fields select:focus, .form-fields textarea:focus { border-color: var(--green); } .form-card .pill { width: 100%; margin-top: 26px; } .form-card > form:first-child .pill { margin-top: 0; } .form-small { font-size: 13px; line-height: 1.5; color: #8a857a; margin: 16px 0 0; text-align: center; } .thanks { text-align: center; padding: 56px 44px 52px; } .thanks-mark { width: 66px; height: 66px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; } .thanks p { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0 auto 30px; max-width: 38ch; } /* ----- footer ----- */ .site-footer { background: var(--dark); } .site-footer .wrap { padding-top: 56px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; } .site-footer .wordmark { font-size: 20px; } .footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; } .footer-links a, .footer-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--dim); text-decoration: none; text-transform: uppercase; } .footer-links a:hover { color: var(--lime); } .footer-company { flex-basis: 100%; font-style: normal; font-size: 13px; color: var(--dim); } .footer-company a { color: inherit; } /* ----- responsive / mobile ----- */ @media (max-width: 860px) { .hero, .section, .section-tight, .band > .wrap, .cta > .wrap { padding-top: 60px; padding-bottom: 60px; } .nav-inner { padding-top: 14px; padding-bottom: 14px; } .nav-inner { gap: 0 16px; } .nav-actions { gap: 10px; } .nav-actions .pill { padding: 10px 14px; font-size: 11px; } .menu-toggle { display: inline-block; } .nav-links { display: none; order: 3; width: 100%; flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 0 6px; } .site-header.open .nav-links { display: flex; } .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; } .svc-grid, .approach, .proof-grid, .form-grid { grid-template-columns: 1fr; } .approach { gap: 30px; } .proof-grid { gap: 38px; } .form-card { padding: 30px 22px; } } /* ===== end of the agency site ===== */ /* ===== 5. Website Security Patch pages (/php-fix*, the guide, the client's order page after payment) ===== */ .php-wrap { max-width: 1080px; margin: 0 auto; padding-left: 24px; padding-right: 24px; font-size: 18px; line-height: 1.55; } .php-wrap.php-stack { padding-top: 64px; padding-bottom: 64px; } .php-stack { display: flex; flex-direction: column; gap: 24px; } .php-secure { margin: 0; display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-soft); } .php-secure svg { color: var(--green); flex: none; } /* type and buttons */ .php-h1 { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.03em; } .php-h1-sm { font-size: clamp(30px, 4vw, 50px); } .php-lead { margin: 0; font-size: 20px; color: var(--ink-soft); max-width: 32em; } .php-tag { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--green); } .php-fine { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); } .php-fine a { color: var(--ink-soft); } .php-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--green); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; } .php-btn:hover { background: var(--dark); color: #fff; } .php-btn-line { background: transparent; color: var(--dark); border: 1.5px solid var(--dark); padding: 0 22px; font-size: 17px; } .php-btn-wide { width: 100%; } .php-btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; align-self: flex-start; } /* boxes, numbered steps */ .php-box { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 16px; background: #fff; border: 1px solid var(--line); } .php-box-title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 20px; letter-spacing: 0; line-height: 1.3; } .php-box > p { margin: 0; color: var(--ink-soft); } .php-box > form { display: flex; flex-direction: column; gap: 16px; } .php-box > form > .btn { align-self: flex-start; } .php-numbered { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .php-numbered li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--light); font-size: 16px; } .php-numbered li > span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--dark); color: var(--light); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .php-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; color: var(--ink-soft); } .faq .ticket { margin-top: -4px; font-family: inherit; font-size: var(--fs-body); color: var(--dark); background: var(--sunken); } @media (max-width: 600px) { .php-wrap.php-stack { padding-top: 48px; padding-bottom: 48px; } .php-wrap { padding-left: 16px; padding-right: 16px; } .php-box { padding: 24px 20px; } } /* the landing (/php-fix, /php-fix/{platform}): a long offer page in Hormozi's order, dressed in bands that alternate dark and light. Display type for the hook and the last heading, big lime numbers for the stat wall, line icons in outlined tiles, one accent (lime). Sizes are fixed per breakpoint, nothing loads late (CLS 0); labels use the system's monospace (the funnel loads two fonts only). */ :root { --lp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; --lp-line: #DCE0D2; --lp-line-dark: #1F2A20; --lp-soft: #3E4A3F; --lp-soft-dark: #B7C2B3; } /* the landings' header: the logo alone, centred on the dark band (the order buttons are in the page and the phone's bar) */ .landing-header { background: var(--dark); border-bottom-color: var(--lp-line-dark); } .landing-header .wrap { max-width: 1200px; padding-left: 20px; padding-right: 20px; justify-content: center; } .lp-wrap { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } .lp-section { padding-top: 40px; padding-bottom: 40px; } .lp-light { background: var(--light); } .lp-band { background: #E9EDE1; border-top: 1px solid #D5DBCC; border-bottom: 1px solid #D5DBCC; } .lp-dark { background: var(--dark); color: var(--light); } .lp-dark a:not(.lp-btn) { color: var(--lime); } .lp-lime { background: var(--lime); color: var(--dark); } .lp-mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; margin-right: 10px; vertical-align: -1px; } .lp-mark i { width: 5px; border-radius: 2px; background: var(--green); } .lp-mark i:nth-child(1) { height: 6px; } .lp-mark i:nth-child(2) { height: 10px; background: #5FBF6E; } .lp-mark i:nth-child(3) { height: 14px; background: var(--lime); } .lp-eyebrow, .lp-label { margin: 0; font-family: var(--lp-mono); font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); } .lp-label { color: var(--green); } .lp-h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; } .lp-h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; } .lp-head { display: flex; flex-direction: column; gap: 12px; max-width: 780px; } .lp-head p { margin: 0; font-size: 17px; color: var(--lp-soft); } .lp-dark .lp-head p { color: var(--lp-soft-dark); } .lp-small { margin: 0; font-size: 14px; } .lp-fine { margin: 0; font-size: 14px; line-height: 1.5; color: #4A554A; } .lp-btn { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--lime); color: var(--dark); font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; } .lp-btn:hover { background: #b3e83a; } .lp-btn-ink { background: var(--dark); color: var(--lime); } .lp-btn-ink:hover { background: #1a241b; color: var(--lime); } .lp-btn-line { background: transparent; color: var(--dark); border: 1.5px solid var(--dark); } .lp-btn-line:hover { background: var(--dark); color: var(--lime); } .lp-btn-sm { justify-self: start; min-height: 48px; padding: 0 28px; font-size: 16px; } .lp-source { margin: 0; font-size: 13px; color: #4A554A; } .lp-source a { color: inherit; text-underline-offset: 2px; } .lp-dark .lp-source, .lp-dark .lp-fine { color: #A3AE9F; } .lp-dark .lp-source a { color: inherit; } .lp-icon { display: block; flex: none; } .lp-tile-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid #B9C4AE; color: var(--green); } .lp-dark .lp-tile-ico { border-color: var(--lime); color: var(--lime); } /* hook: the eyebrow h1, the display line, its sub, the season's plain line; the lime order card; the trust strip */ .lp-hero-cols { padding-top: 28px; padding-bottom: 28px; } .lp-hero .lp-eyebrow { display: flex; align-items: baseline; } .hook { margin: 18px 0 0; max-width: 11.5em; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: 1.0; letter-spacing: -0.04em; text-wrap: balance; } .hook[data-long] { max-width: 19em; font-size: 30px; line-height: 1.08; letter-spacing: -0.03em; } .lp-sub { margin: 20px 0 0; max-width: 36em; font-size: 17px; line-height: 1.55; color: #C9D1C4; } .lp-stack { display: none; } .lp-soon { margin: 18px 0 0; color: var(--lime); font-weight: 700; font-size: 18px; } .lp-path-a { margin-top: 24px; padding: 22px 20px; border-radius: 20px; background: var(--lime); color: var(--dark); box-shadow: 0 30px 80px -30px rgba(199, 249, 78, 0.45); } .lp-buy, .lp-card { display: flex; flex-direction: column; gap: 14px; } .lp-buy p, .lp-card p { margin: 0; } .lp-name { font-family: var(--lp-mono); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .lp-buy .lp-btn { min-height: 60px; font-size: 19px; } .lp-buy .lp-promise-short { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--dark); } .lp-promise-short svg { flex: none; margin-top: 3px; } .lp-buy .lp-small { padding-top: 12px; border-top: 1px solid rgba(10, 15, 10, 0.18); color: #1d2a1f; font-size: 15px; } /* the one quiet line to /store-growth, under the hero card's effort line */ .lp-buy .lp-fit-line { font-size: 13px; line-height: 1.45; color: rgba(10, 15, 10, 0.68); } .lp-dark .lp-buy .lp-fit-line a { color: var(--dark); text-decoration: underline; text-underline-offset: 2px; } .lp-trust { margin: 0; padding: 18px 0 32px; border-top: 1px solid var(--lp-line-dark); list-style: none; display: flex; flex-direction: column; gap: 8px; } .lp-trust li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #C9D1C4; } .lp-trust svg { color: var(--lime); } /* hold: what happened (sunken), then the stat wall (dark) */ .lp-what { background: #E9EDE1; border-bottom: 1px solid #D5DBCC; } .lp-what .lp-wrap { padding-top: 32px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 12px; } .lp-what .lp-label { display: flex; align-items: center; } .lp-what p { margin: 0; max-width: 44em; font-size: 18px; line-height: 1.5; } .lp-what .lp-source { font-size: 14px; } .lp-facts { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .lp-fact { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; border-radius: 16px; background: #111811; border: 1px solid var(--lp-line-dark); } .lp-fact p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lp-soft-dark); } .lp-fact .lp-stat { margin-bottom: 4px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-stat); line-height: 1; letter-spacing: -0.04em; color: var(--lime); } .lp-fact h3 { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 18px; letter-spacing: 0; color: #fff; } .lp-fact .lp-source { margin-top: auto; padding-top: 8px; font-size: 13px; color: #A3AE9F; } .lp-more summary { margin-top: 4px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--lime); } .lp-more p { margin-top: 8px; } /* a phone: the first three cut to two lines, the last three a compact grid with their text behind "Read more" */ @media (max-width: 599px) { .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-fact { padding: 16px; gap: 4px; } .lp-fact .lp-stat { margin: 0; } .lp-fact h3 { font-size: 17px; line-height: 1.3; } .lp-facts .lp-fact:nth-child(-n+3), .lp-facts .lp-fact:last-child { grid-column: 1 / -1; } .lp-facts .lp-fact:nth-child(-n+3) > p:not(.lp-stat, .lp-source) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } @media (min-width: 600px) { .lp-more { flex: 1; display: flex; flex-direction: column; gap: 8px; } .lp-more summary { display: none; } .lp-more::details-content { content-visibility: visible; display: contents; } .lp-more p { margin: 0; } } /* warm up: what an open hole can cost, the two paths, the hacked form */ #risk .lp-section { padding-bottom: 0; } #cost .lp-section { padding-top: 44px; } .lp-tiles { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } #cost .lp-stat { font-size: 32px; } #cost .lp-fact > p:not(.lp-stat, .lp-source) { font-size: 16px; color: #fff; } .lp-close { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; } .lp-close p { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; } .lp-qa summary::after { content: '+'; flex: none; font-weight: 700; font-size: 22px; line-height: 1; color: var(--green); } .lp-qa[open] summary::after { content: '\2212'; } /* what happens after you order: a numbered timeline */ .lp-next { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 0; } .lp-next li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding-bottom: 24px; } .lp-next li:last-child { padding-bottom: 0; } .lp-next li:not(:last-child)::before { content: ''; position: absolute; left: 23px; top: 56px; bottom: 8px; width: 2px; background: #C9D0BF; } .lp-num { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--dark); color: var(--lime); font-family: var(--lp-mono); font-size: 16px; font-weight: 500; } .lp-next h3 { margin: 10px 0 6px; display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; } .lp-next h3 svg { color: var(--green); } .lp-next p { margin: 0; font-size: 16px; color: var(--lp-soft); } /* sell: everything you get as icon rows, the price card beside it */ .lp-sell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 64px; align-items: start; } .lp-steps { margin: 24px 0 0; padding: 0; list-style: none; } .lp-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--lp-line-dark); } .lp-steps li:last-child { border-bottom: 1px solid var(--lp-line-dark); } .lp-steps p { margin: 0; font-size: 16px; font-weight: 500; color: #fff; } .lp-steps p strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--lime); } .lp-steps small { display: block; margin-top: 4px; font-size: 14px; color: var(--lp-soft-dark); } .lp-plus strong::before { content: '+'; margin-right: -4px; } .lp-inc { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--lime); font-family: var(--lp-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .lp-card { padding: 26px 22px; border-radius: 24px; background: var(--lime); color: var(--dark); box-shadow: 0 30px 80px -36px rgba(199, 249, 78, 0.5); } .lp-outcome { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; } .lp-card-list { margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(10, 15, 10, 0.18); list-style: none; display: grid; gap: 6px; } .lp-card-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.3; } .lp-card-list svg { flex: none; } .lp-card-list .lp-inc { display: none; margin-left: auto; border-color: rgba(10, 15, 10, 0.45); font-size: 10px; } .lp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 14px; border-top: 1px solid rgba(10, 15, 10, 0.18); font-size: 17px; font-weight: 600; } .lp-price strong { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-price); line-height: 1; letter-spacing: -0.03em; } .lp-card .lp-btn { min-height: 60px; font-size: 19px; } .lp-dark .lp-card .lp-fine { color: #2b3a22; } .lp-card a:not(.lp-btn) { color: var(--dark); text-underline-offset: 3px; } /* three ways to handle it: one card per option on a phone (ours last), a table with ours highlighted on a desktop */ .lp-cmp { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .lp-cmp-keys { display: none; } .lp-opt { border-radius: 20px; background: #fff; border: 1px solid var(--lp-line); overflow: hidden; } .lp-opt h3 { margin: 0; padding: 14px 16px; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; } .lp-opt dl { margin: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .lp-opt dt, .lp-opt dd { margin: 0; padding: 7px 16px; border-top: 1px solid #EEF0E6; font-size: 14px; line-height: 1.4; } .lp-opt dt { padding-right: 0; font-weight: 700; color: #4A554A; } .lp-opt dd { padding-left: 12px; } .lp-opt dd { color: var(--lp-soft); } .lp-opt-us { border: 2px solid var(--dark); } .lp-opt-us h3 { background: var(--dark); color: #fff; box-shadow: inset 0 4px 0 var(--lime); } .lp-opt-us dl { background: #F6FBE8; } .lp-opt-us dd { font-weight: 600; color: var(--dark); } .lp-opt-us a { color: var(--green); } .lp-cmp-link { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; } .lp-vs { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.4; color: var(--lp-soft); } .lp-vs caption { padding-bottom: 8px; text-align: left; font-family: var(--lp-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #4A554A; } .lp-vs thead th { padding: 0 8px 8px 0; text-align: left; vertical-align: bottom; font-family: var(--font-display); font-size: 16px; line-height: 1.2; color: var(--dark); } .lp-vs tbody th { padding: 10px 0 2px; border-top: 1px solid var(--lp-line); text-align: left; font-size: 12px; font-weight: 700; color: #4A554A; } .lp-vs td { padding: 0 12px 10px 0; vertical-align: top; } @media (max-width: 899px) { .lp-opt-us { order: -2; } .lp-cmp-cta { order: -1; } .lp-opt:not(.lp-opt-us) { display: none; } } /* the Promise: a full-bleed lime band */ .lp-promise { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } .lp-promise-main { display: flex; flex-direction: column; gap: 14px; } .lp-promise .lp-h2 { text-wrap: wrap; } .lp-promise-lead { max-width: 40em; } .lp-promise-lead { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; } .lp-promise ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .lp-promise li { padding: 18px 20px; border-radius: 16px; background: #F1FDD3; border: 1px solid #A9D63A; font-size: 17px; font-weight: 600; line-height: 1.45; } .lp-claim { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: #1d2a1f; } .lp-claim p { margin: 0; } .lp-claim a { color: var(--dark); text-underline-offset: 3px; } .lp-promise-cta { justify-self: start; min-width: min(100%, 360px); } .lp-acl { padding-top: 24px; } /* for those who hesitate: the questions (closed, = the FAQPage), the last call */ .lp-qas { margin-top: 24px; } .lp-qa { border-top: 1px solid #C9D0BF; } .lp-qa:last-child { border-bottom: 1px solid #C9D0BF; } .lp-qa summary { min-height: 52px; padding: 12px 0; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .lp-qa summary::-webkit-details-marker { display: none; } .lp-qa h3 { margin: 0; font-family: var(--font-body); font-size: 17px; letter-spacing: 0; line-height: 1.35; } .lp-qa p { margin: 0 0 18px; font-size: 16px; color: var(--lp-soft); } .lp-last .lp-wrap { padding-top: 56px; padding-bottom: 56px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; } .lp-last-text { flex: 1 1 560px; display: flex; flex-direction: column; gap: 16px; } .lp-last .lp-h2 { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.04em; max-width: 11em; } .lp-last-text p { margin: 0; font-size: 18px; color: #C9D1C4; } .lp-last-cta { flex: 1 1 280px; max-width: 400px; } .lp-last-cta .lp-btn { min-height: 60px; font-size: 19px; } .lp-legal { padding-top: 32px; padding-bottom: 24px; } .cta-bar .lp-btn { flex: none; min-height: 48px; padding: 0 14px; font-size: 16px; } @media (min-width: 720px) { .lp-wrap, .landing-header .wrap { padding-left: 32px; padding-right: 32px; } .lp-section { padding-top: 112px; padding-bottom: 112px; } .lp-h2 { font-size: 48px; } .lp-h3 { font-size: 28px; } .lp-head { gap: 16px; } .lp-head p { font-size: 20px; } .hook[data-long] { font-size: 44px; } .lp-sub { font-size: 19px; } .lp-trust { flex-direction: row; flex-wrap: wrap; gap: 12px 40px; padding-bottom: 48px; } .lp-what .lp-wrap { padding-top: 56px; padding-bottom: 56px; } .lp-what p { font-size: 20px; } .lp-facts { margin-top: 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lp-fact { padding: 30px 28px; gap: 8px; } .lp-steps li { gap: 20px; padding: 24px 0; } .lp-steps p { font-size: 17px; } .lp-steps p strong { font-size: 21px; } .lp-steps small { margin-top: 6px; font-size: 15px; } .lp-promise-lead { font-size: 20px; } .lp-close p { font-size: 22px; max-width: 30em; } .lp-tiles { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } #cost .lp-section { padding-top: 88px; } #cost .lp-stat { font-size: 40px; } #cost .lp-fact > p:not(.lp-stat, .lp-source) { font-size: 18px; } .lp-close { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } .lp-close .lp-btn { flex: none; padding: 0 32px; } .lp-path-a { padding: 32px; } .lp-card { padding: 36px 32px; } .lp-card-list li { font-size: 16px; } .lp-card-list .lp-inc { display: inline-block; } .lp-qa summary { min-height: 64px; padding: 14px 0; } .lp-promise li { padding: 24px; } } @media (min-width: 900px) { .lp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-next { margin-top: 56px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .lp-next li { display: flex; flex-direction: column; gap: 12px; padding-bottom: 0; } .lp-next li:not(:last-child)::before { left: 64px; right: -28px; top: 23px; bottom: auto; width: auto; height: 2px; } .lp-next p { font-size: 17px; } .lp-promise { gap: 40px; } .lp-promise ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lp-promise li { padding: 28px; font-size: 18px; } .lp-cmp { grid-template-columns: minmax(150px, 0.8fr) repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: 0 12px; } .lp-cmp-keys, .lp-opt { grid-row: 1 / span 8; display: grid; grid-template-rows: subgrid; } .lp-cmp-keys { margin: 0; padding: 0; list-style: none; } .lp-cmp-keys li { padding: 14px 0; border-top: 1px solid var(--lp-line); font-size: 15px; font-weight: 700; color: var(--dark); } .lp-cmp-keys li:first-child { border-top: 0; } .lp-opt dl { display: contents; } .lp-opt dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lp-opt h3 { padding: 18px 20px; font-size: 20px; } .lp-opt dd { padding: 14px 20px; font-size: 15px; line-height: 1.45; } .lp-opt-us dd { background: #F6FBE8; } .lp-vs { display: none; } .lp-cmp-cta { grid-column: 4; grid-row: 9; margin-top: 16px; } } /* a desktop reads in two columns: the hook beside the order card, the stack beside the price, the questions side by side */ @media (min-width: 1024px) { .lp-hero-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); grid-template-rows: auto auto auto auto 1fr; gap: 0 72px; padding-top: 88px; padding-bottom: 72px; } .lp-hero-text { display: contents; } .lp-hero-cols .lp-eyebrow, .lp-hero-cols .hook { grid-column: 1 / -1; } .lp-hero-cols .hook { max-width: 14em; } .lp-hero-cols .hook[data-long] { max-width: 24em; } .lp-hero-cols .lp-sub, .lp-hero-cols .lp-stack, .lp-hero-cols .lp-soon { grid-column: 1; } .lp-sub { margin-top: 28px; } .lp-stack { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 32px; } .lp-stack li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #fff; } .lp-stack svg { color: var(--lime); } .lp-hero-cols .lp-path-a { grid-column: 2; grid-row: 3 / span 3; align-self: start; margin-top: 28px; } .lp-sell { grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); } .lp-card { position: sticky; top: 96px; } .lp-qas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; } .lp-qa:nth-last-child(2) { border-bottom: 1px solid #C9D0BF; } .lp-last .lp-wrap { padding-top: 112px; padding-bottom: 112px; } } @media (max-width: 380px) { .hook { font-size: 36px; } } /* the order (/php-fix/order, W5): one column, two steps in one card */ .order { max-width: 640px; padding-top: 16px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 16px; } .order-head h1 { margin: 0 0 8px; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--green); } .order-top { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance; } .order-card { display: flex; flex-direction: column; gap: 24px; padding: 20px var(--gutter); } .order-card h2 { margin: 0; font-size: var(--fs-h2); } .order-card p { margin: 0; } .order-step { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .order .field { gap: 6px; } .order-step legend { padding: 0; margin-bottom: 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.15; scroll-margin-top: 24px; } .order-step legend span { display: inline; margin-right: 8px; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; color: var(--muted); } .order-step legend:focus { outline: none; } .field-label { font-weight: 600; } .field-error:empty { display: none; } .field input[aria-invalid] { border-color: var(--danger); } .order-servers strong { font-weight: 600; } .order-more summary { width: fit-content; min-height: 44px; display: flex; align-items: center; color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .order-more[open] summary { margin-bottom: 8px; } .stepper { display: flex; gap: 8px; align-items: center; } .stepper button { flex: none; width: 52px; height: 52px; border: 1px solid var(--muted); border-radius: 12px; background: #fff; color: var(--dark); font: inherit; font-size: 22px; cursor: pointer; } .field .stepper input { width: 88px; text-align: center; font-weight: 700; -moz-appearance: textfield; } .stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .order-hint { margin-top: 12px !important; font-size: var(--fs-small); color: var(--ink-soft); } .order-notice { color: var(--ink-soft); } .order-review { display: flex; flex-direction: column; gap: 8px; } .order-review-who { font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; } .order-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; color: var(--ink-soft); } .order-sum { margin-left: auto; } .order-head .order-title { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 5.2vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--dark); } .order-title + .order-top { margin-top: 4px; font-family: var(--font-body); font-size: var(--fs-sub); font-weight: 400; color: var(--ink-soft); max-width: none; } .order-total strong { margin-left: 6px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); letter-spacing: -0.02em; color: var(--dark); } .order-starts { font-size: var(--fs-small); } .order-secure, .order-clickwrap { font-size: var(--fs-small); color: var(--ink-soft); } .order-pay { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .order-pay .btn { flex: 1 1 auto; max-width: 280px; gap: 0.3em; } .order-pay .btn::after { margin-left: 6px; } .order-secure { margin-top: -8px !important; text-align: center; } .order-secure span { white-space: nowrap; } .order-secure svg { margin-right: 4px; vertical-align: -2px; color: var(--green); } .order-unavailable { display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: var(--sunken); } .order-memory { align-self: flex-start; padding: 6px 16px; border-radius: 999px; background: var(--sunken); font-size: var(--fs-small); color: var(--ink-soft); } .order-memory .link { font-size: inherit; } /* a phone (Safari shows about 664 px of a 390 px wide screen) keeps Continue in view; more air from 720 px */ @media (min-width: 720px) { .order { padding-top: 48px; gap: 24px; } .order-card { padding: 40px; } .order-step { gap: 20px; } .order-step legend { margin-bottom: 20px; } .order-step legend span { display: block; margin: 0 0 4px; } .order .field { gap: 8px; } } /* without JavaScript (the