/* ─── RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ─── TOKENS ─── */ :root { --bg: #0a0a0a; --bg2: #111111; --bg3: #161616; --border: #1e1e1e; --text: #ffffff; --text2: #999999; --text3: #555555; --og: #ff6a00; --og-h: #ff8533; --og-f: rgba(255,106,0,0.08); --og-b: rgba(255,106,0,0.22); /* Ink for text sitting ON --og. White works for the orange brand, but the brand engine swaps --og for lime and tan, where white text on the button is barely legible. portal.js recomputes this from the chosen colour's luminance, so the demo stays readable in every skin. */ --og-ink: #ffffff; } /* ─── BASE ─── */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* DO NOT add overflow-x here. body already carries `overflow-x: hidden` (above). While stays `visible`, body's rule propagates to the viewport and body itself computes back to visible — no scroll container, and the portal's position:sticky works. Set anything non-visible on and that propagation flips: body's rule applies to BODY, body becomes the scrolling ancestor, and .ar-stage stops pinning — the £2,000 then scrolls off the top before the count-down reaches £250. The sideways scroll it was covering up is fixed at source below. */ .og { color: var(--og); } /* ─── NAV ─── */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 22px 0; transition: background .3s, border-bottom .3s, padding .25s; } #nav.scrolled { background: rgba(10,10,10,.95); border-bottom: 1px solid var(--border); padding: 14px 0; backdrop-filter: blur(16px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; } /* inline logo in nav */ .nav-logo { display: flex; align-items: center; } .nav-logo svg { height: 34px; width: auto; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 13.5px; font-weight: 500; color: var(--text2); transition: color .2s; } .nav-links a:hover { color: var(--text); } .nav-cta { background: var(--og); color: var(--og-ink, #fff); padding: 9px 18px; border-radius: 6px; font-size: 13px; font-weight: 700; transition: background .2s; } .nav-cta:hover { background: var(--og-h); } .nav-login { border: 1px solid var(--border); border-radius: 6px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; transition: border-color .2s, color .2s; } .nav-login:hover { border-color: var(--og); color: var(--og) !important; } /* ─── HERO ─── */ .hero { min-height: 100vh; display: flex; align-items: center; padding: 140px 0 100px; position: relative; overflow: hidden; } .hero-bg { position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: 560px; height: 560px; opacity: 0.035; pointer-events: none; } .hero-content { position: relative; z-index: 1; max-width: 820px; } .hero-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--og-f); border: 1px solid var(--og-b); color: var(--og); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; margin-bottom: 36px; opacity: 0; } .hero-pill .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--og); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.7); } } .hero-h1 { font-size: clamp(52px, 9vw, 100px); font-weight: 900; letter-spacing: -.04em; line-height: 1.0; margin-bottom: 30px; } /* Line-reveal animation setup */ .anim-line { display: block; overflow: hidden; } .anim-line > span { display: block; transform: translateY(105%); } .hero-sub { font-size: clamp(16px, 2.2vw, 20px); color: var(--text2); line-height: 1.65; max-width: 540px; margin-bottom: 44px; opacity: 0; transform: translateY(24px); } .hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 56px; opacity: 0; transform: translateY(24px); } .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--og); color: var(--og-ink, #fff); padding: 15px 28px; border-radius: 8px; font-size: 15px; font-weight: 700; transition: background .2s, transform .15s; } .btn-primary:hover { background: var(--og-h); transform: translateY(-2px); } .btn-ghost { font-size: 14px; font-weight: 500; color: var(--text2); transition: color .2s; } .btn-ghost:hover { color: var(--text); } .hero-proof { display: flex; flex-wrap: wrap; gap: 20px; opacity: 0; } .proof-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text2); } .proof-dot { width:5px; height:5px; border-radius:50%; background: var(--og); flex-shrink:0; } /* ─── SHARED SECTION STYLES ─── */ section { padding: 100px 0; } .sec-tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--og); margin-bottom: 14px; } .sec-title { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; } .sec-sub { font-size: 18px; color: var(--text2); line-height: 1.65; max-width: 560px; margin-bottom: 60px; } /* ─── PROCESS ─── */ .process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; border-radius: 18px; overflow: hidden; background: var(--border); } .process-step { background: var(--bg2); padding: 42px 36px; opacity: 0; transform: translateY(32px); } .step-num { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--og); margin-bottom: 22px; display: flex; align-items: center; gap: 8px; } .step-num::after { content:''; flex: 1; height: 1px; background: var(--border); } .step-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; } .step-desc { font-size: 14px; color: var(--text2); line-height: 1.7; } .step-badge { display: inline-block; margin-top: 22px; background: var(--og-f); border: 1px solid var(--og-b); color: var(--og); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; } /* ─── PRICING ─── */ .pricing-stack { display: flex; flex-direction: column; gap: 16px; } .pricing-wrap { opacity: 0; transform: translateY(32px); } .pricing-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; } .pricing-top { padding: 50px 50px 42px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; } .pricing-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--og); margin-bottom: 14px; } .pricing-headline { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; } .pricing-note-top { font-size: 14px; color: var(--text2); line-height: 1.6; } .price-block { text-align: right; } .price-was { font-size: 18px; font-weight: 700; color: var(--text3); text-decoration: line-through; margin-bottom: 4px; } .price-is { font-size: 64px; font-weight: 900; letter-spacing: -.04em; color: var(--og); line-height: 1; } .price-suffix { font-size: 13px; color: var(--text2); margin-top: 6px; } .pricing-features { padding: 42px 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; border-bottom: 1px solid var(--border); } .feat { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text2); } .feat-check { color: var(--og); font-weight: 800; font-size: 13px; flex-shrink:0; margin-top:1px; } .pricing-bottom { padding: 36px 50px 50px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .pricing-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--og); color: var(--og-ink, #fff); padding: 16px 36px; border-radius: 8px; font-size: 15px; font-weight: 700; transition: background .2s, transform .15s; } .pricing-cta:hover { background: var(--og-h); transform: translateY(-2px); } .pricing-yr2 { font-size: 13px; color: var(--text3); } .pricing-yr2 strong { color: var(--text2); } /* ─── PORTFOLIO ─── */ .portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } /* These are now, not
— the cards were never clickable before, despite carrying a "Live site" tag. A card with no href yet renders identically but doesn't pretend to be a link. */ .port-card { display: block; text-decoration: none; color: inherit; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .2s, transform .2s; opacity: 0; transform: translateY(32px); -webkit-tap-highlight-color: transparent; } .port-card[href] { cursor: pointer; } .port-card:not([href]) { cursor: default; } .port-card[href]:hover { border-color: rgba(255,106,0,.4); transform: translateY(-5px); } .port-card[href]:active { transform: translateY(-2px); } .port-thumb { width: 100%; aspect-ratio: 16/10; overflow: hidden; position: relative; } .port-thumb svg { width: 100%; height: 100%; } /* Real screenshots — see tools/shoot-thumbs.mjs. Shot at 16:10 to match the box, so object-fit only guards a future shot at another ratio. */ .port-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; transition: transform .35s ease; } .port-card:hover .port-thumb img { transform: scale(1.03); } .port-info { padding: 22px 22px 26px; } .port-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .port-type { font-size: 12px; color: var(--text2); margin-bottom: 14px; } .port-tag { display: inline-block; background: var(--og-f); color: var(--og); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; } /* ─── ABOUT ─── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-left { opacity: 0; transform: translateX(-32px); } /* translateY, not translateX. A 32px rightward offset on an element that is already full-width pushes the document 8px wider than the screen on a phone, which is what the overflow-x hack above was hiding. Revealing upward costs nothing visually and creates no horizontal overflow. reveal() animates x:0 AND y:0, so the same call still lands it. */ .about-right { opacity: 0; transform: translateY(24px); } .about-quote { border-left: 3px solid var(--og); padding: 4px 0 4px 24px; margin: 28px 0; } .about-quote p { font-size: 17px; color: var(--text2); line-height: 1.65; font-style: italic; } .about-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 36px; } .about-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid var(--border); font-size: 14px; } .about-row:first-child { border-top: none; padding-top: 0; } .about-row .label { color: var(--text2); } .about-row .val { font-weight: 700; } /* ─── AUTOMATION ─── */ .auto-band { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 56px 60px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; opacity: 0; transform: translateY(32px); } .auto-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .auto-chip { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 8px 14px; font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 7px; } /* ─── CONTACT ─── */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .contact-left { opacity: 0; transform: translateX(-32px); } .contact-right { opacity: 0; transform: translateY(24px); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text2); margin-bottom: 6px; } .form-input, .form-select, .form-textarea { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 14px; color: var(--text); font-family: inherit; outline: none; transition: border-color .2s; appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--og); } .form-textarea { resize: vertical; min-height: 100px; } .form-select option { background: var(--bg2); } .form-submit { width: 100%; background: var(--og); color: var(--og-ink, #fff); border: none; padding: 15px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 6px; transition: background .2s; letter-spacing: .01em; } .form-submit:hover { background: var(--og-h); } .contact-detail { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; } .contact-icon { width: 42px; height: 42px; border-radius: 9px; background: var(--og-f); border: 1px solid var(--og-b); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; } .contact-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); margin-bottom: 3px; } .contact-val { font-size: 15px; font-weight: 600; } .contact-val a:hover { color: var(--og); transition: color .2s; } /* ─── FOOTER ─── */ footer { border-top: 1px solid var(--border); padding: 38px 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-logo svg { height: 28px; width: auto; } .footer-links { display: flex; gap: 20px; } .footer-links a { font-size: 13px; color: var(--text3); transition: color .2s; } .footer-links a:hover { color: var(--text); } .footer-copy { font-size: 13px; color: var(--text3); } /* ─── DOT GRID ─── */ .hero-dots { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(255,106,0,0.18) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, black 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, black 30%, transparent 100%); } /* ─── ABOUT SVG GRAPHIC ─── */ .about-graphic { position: relative; width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .about-graphic svg { width: 80%; height: 80%; } /* ─── STRIPE BUTTON ─── */ .stripe-btn { display: inline-flex; align-items: center; gap: 10px; background: #635bff; color: #fff; padding: 16px 32px; border-radius: 8px; font-size: 15px; font-weight: 700; transition: background .2s, transform .15s; white-space: nowrap; } .stripe-btn:hover { background: #7a73ff; transform: translateY(-2px); } .stripe-logo { font-size: 17px; } /* ─── DIVIDER ─── */ hr { border: none; border-top: 1px solid var(--border); } /* ─── RESPONSIVE ─── */ @media (max-width: 900px) { .process-grid, .pricing-features { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: 1fr 1fr; } .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; } .pricing-top { grid-template-columns: 1fr; } .price-block { text-align: left; } .auto-band { grid-template-columns: 1fr; padding: 36px 32px; } .pricing-top, .pricing-features, .pricing-bottom { padding-left: 28px; padding-right: 28px; } } @media (max-width: 620px) { .portfolio-grid { grid-template-columns: 1fr; } .nav-links { display: none; } .hero { padding-top: 110px; } .form-row { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ INNER PAGES Everything below is used only by the generated pages (how-it-works, pricing, online-shops, portfolio, automation, contact and the keyword landing pages). index.html keeps the portal and doesn't touch any of it. ═══════════════════════════════════════════════════════════════════ */ /* The nav is fixed. On index.html the portal sits underneath it, so nothing needs an offset — inner pages have to make their own room. */ .page-hero { padding: 148px 0 56px; position: relative; } .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 320px at 15% 0%, var(--og-f), transparent 70%), linear-gradient(180deg, var(--bg3), var(--bg) 78%); } .page-h1 { font-size: clamp(38px, 6.2vw, 68px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; margin-bottom: 20px; } .lede { font-size: 19px; color: var(--text2); max-width: 62ch; line-height: 1.65; } .page-hero .hero-actions { margin-top: 30px; } /* current page in the nav */ .nav-links a.on { color: var(--text); } section.alt { background: var(--bg2); border-block: 1px solid var(--border); } .prose { max-width: 68ch; } .prose p { color: var(--text2); font-size: 16.5px; margin-bottom: 18px; } .prose p:last-child { margin-bottom: 0; } .prose b, .prose strong { color: var(--text); font-weight: 600; } /* ─── FAQ (also emitted as FAQPage schema) ─── */ .faq { max-width: 820px; margin-top: 34px; } .faq-item { border-top: 1px solid var(--border); padding: 24px 0; } .faq-item:last-child { border-bottom: 1px solid var(--border); } .faq-item h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .faq-item p { color: var(--text2); font-size: 15.5px; } /* ─── Two-column price comparison ─── */ .price-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pc-col { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 32px 30px; } .pc-us { border-color: var(--og-b); background: linear-gradient(180deg, var(--og-f), transparent 60%), var(--bg2); } .pc-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; } .pc-us .pc-label { color: var(--og); } .pc-price { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.04em; } .pc-price.was { color: var(--text3); text-decoration: line-through; text-decoration-thickness: 2px; } .pc-list { list-style: none; margin-top: 20px; } .pc-list li { color: var(--text2); font-size: 14.5px; padding: 9px 0 9px 22px; position: relative; border-top: 1px solid var(--border); } .pc-list li::before { content: "·"; position: absolute; left: 6px; color: var(--text3); font-weight: 700; } .pc-us .pc-list li::before { content: "✓"; color: var(--og); font-size: 12px; left: 2px; } .pc-list b { color: var(--text); } /* ─── Feature checklist ─── */ .feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; margin-top: 26px; } .feat { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text2); } .feat b { color: var(--text); font-weight: 600; } .feat-check { color: var(--og); font-weight: 700; flex-shrink: 0; } .fineprint { margin-top: 22px; font-size: 12.5px; color: var(--text3); } .fineprint b { color: var(--text2); } /* ─── Case studies ─── */ .case-grid { display: grid; gap: 20px; margin-top: 34px; } .case { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color .2s, transform .2s; } a.case:hover { border-color: var(--og-b); transform: translateY(-4px); } .case-thumb { background: var(--bg3); aspect-ratio: 16/10; overflow: hidden; } .case-thumb svg { width: 100%; height: 100%; display: block; } /* Screenshots are shot at the same 16:10, so object-fit only guards against a future shot at a different ratio. */ .case-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; transition: transform .35s ease; } a.case:hover .case-thumb img { transform: scale(1.03); } .case-body { padding: 28px 30px; } .case-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .case-meta { font-size: 12.5px; color: var(--text3); margin-bottom: 14px; } .case-body p { font-size: 15px; color: var(--text2); margin-bottom: 14px; } .case-url { font-size: 13px; color: var(--og); font-weight: 600; } .case-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .case-tag { font-size: 11px; font-weight: 600; letter-spacing: .04em; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 999px; padding: 5px 11px; } /* ─── Closing call to action ─── */ .cta-band { text-align: center; background: var(--bg2); border-top: 1px solid var(--border); } .cta-band .sec-sub { margin-left: auto; margin-right: auto; } @media (max-width: 820px) { .price-compare, .feat-grid { grid-template-columns: 1fr; } .case { grid-template-columns: 1fr; } .page-hero { padding: 124px 0 44px; } } /* ─── Mobile menu ─── Below 620px the links used to simply vanish. That was survivable on a single scrolling page; on a ten-page site the nav is the only way around, so it becomes a real menu instead. */ .nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin: -8px; -webkit-tap-highlight-color: transparent; flex-direction: column; gap: 5px; z-index: 2; } .nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s, opacity .25s; } .nav-burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.on span:nth-child(2) { opacity: 0; } .nav-burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 620px) { .nav-burger { display: flex; } .nav-links { display: none; position: absolute; top: calc(100% + 10px); right: 24px; left: 24px; flex-direction: column; align-items: stretch; gap: 0; background: rgba(14,14,14,.98); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.6); } .nav-links.open { display: flex; } .nav-links a { padding: 13px 14px; font-size: 15px; border-radius: 9px; border-bottom: 1px solid var(--border); } .nav-links a:last-of-type { border-bottom: 0; } .nav-cta { text-align: center; margin-top: 6px; } .nav-login { text-align: center; border: 0; } #nav { padding: 14px 0; background: rgba(10,10,10,.95); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); } .nav-inner { position: relative; } }