/* Switzer is now loaded non-render-blocking from each page's (was a chained, render-blocking @import here — the worst place for a font). */ :root { --ink: #1a1a1a; --gray: #5c5c5c; --border: #e3e3e3; --card-gray: #f7f7f7; --accent: #e8480f; /* Porsche blood orange — operator brand token */ --accent-deep: #c23a0c; --black: #0d0d0d; --maxw: 1040px; /* side gutter centers a fixed-width content column; nav, hero and every section share it so all left/right edges line up */ --pad: max(20px, calc((100% - var(--maxw)) / 2)); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, sans-serif; background: #fff; color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } .display { font-family: 'Switzer', 'Inter', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; line-height: 0.96; letter-spacing: -0.035em; } /* ---------- HEADER LINE-REVEAL (Framer-style hero effect) ---------- */ .line-reveal .ln { display: block; overflow: hidden; padding-bottom: .04em; } .line-reveal .ln > span { display: block; transform: translateY(110%); animation: lnUp .95s cubic-bezier(.19,1,.22,1) forwards; } .line-reveal .ln:nth-child(1) > span { animation-delay: .08s; } .line-reveal .ln:nth-child(2) > span { animation-delay: .20s; } .line-reveal .ln:nth-child(3) > span { animation-delay: .32s; } .line-reveal .ln:nth-child(4) > span { animation-delay: .44s; } @keyframes lnUp { to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .line-reveal .ln > span { animation: none; transform: none; } } /* ---------- NAV ---------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--pad); border-bottom: 1px solid transparent; transition: transform .42s cubic-bezier(.4, 0, .2, 1), background .3s ease, border-color .3s ease, padding .3s ease; } /* once scrolled past the top: frosted white bar with a hairline divider */ nav.nav--scrolled { padding-top: 14px; padding-bottom: 14px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom-color: var(--line); } /* auto-hide: slide up when scrolling down, drop back in when scrolling up */ nav.nav--hidden { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { nav { transition: background .3s ease, border-color .3s ease; } nav.nav--hidden { transform: none; } } .logo { font-family: 'Switzer', 'Inter', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; } .logo span { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 400; color: var(--ink); } .nav-links a:not(.btn) { transition: opacity .2s; } .nav-links a:not(.btn):hover { opacity: .55; } .nav-links .btn { padding: 10px 20px; } .lang { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .05em; color: var(--gray); } .lang b { color: var(--ink); } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; padding: 13px 26px; border-radius: 100px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; transition: transform .25s, box-shadow .25s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.18); } .btn.accent { background: var(--accent); border-color: var(--accent); } .btn.accent:hover { box-shadow: 0 12px 30px rgba(232,72,15,.32); } .btn.ghost { background: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: #fff; } .btn.block { width: 100%; justify-content: center; } .btn.on-dark { background: #fff; color: var(--ink); border-color: #fff; } .btn.on-dark:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* cool hover: label swaps vertically while a dark panel sweeps up behind it */ .btn.swap { position: relative; overflow: hidden; z-index: 0; } .btn.swap::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .45s cubic-bezier(.19,1,.22,1); } .btn.accent.swap::before { background: var(--ink); } .btn.on-dark.swap::before { background: var(--accent); } .btn.swap:hover::before { transform: translateY(0); } .btn.on-dark.swap:hover { color: #fff; } .swap-label { position: relative; display: inline-block; overflow: hidden; line-height: 1.2; vertical-align: bottom; } .swap-label span { display: block; transition: transform .45s cubic-bezier(.19,1,.22,1); } .swap-label span.b { position: absolute; top: 0; left: 0; transform: translateY(105%); } .btn.swap:hover .swap-label span.a { transform: translateY(-105%); } .btn.swap:hover .swap-label span.b { transform: translateY(0); } /* ---------- HERO ---------- */ .hero { min-height: 100vh; padding: 0 var(--pad); display: flex; flex-direction: column; justify-content: flex-end; position: relative; background: #fff; } /* milky glass fade — pinned to the bottom of the viewport */ .page-glass { position: fixed; left: 0; right: 0; bottom: 0; height: 120px; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: linear-gradient(to bottom, rgba(250,250,250,0), rgba(250,250,250,.7)); mask-image: linear-gradient(to bottom, transparent, black 72%); -webkit-mask-image: linear-gradient(to bottom, transparent, black 72%); pointer-events: none; transition: opacity .25s ease; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .04em; color: var(--accent); margin-bottom: 20px; } .hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 48px; flex-wrap: wrap; } .hero-head { max-width: 760px; } .hero h1 { font-size: clamp(30px, 3.6vw, 54px); max-width: 15ch; } /* German runs ~20% longer than English — give its headlines room so they don't over-wrap. */ html[lang="de"] .hero h1 { max-width: 22ch; } html[lang="de"] .subhero h1 { max-width: 24ch; } .hero-sub { margin-top: 22px; font-size: 16px; line-height: 1.55; color: var(--gray); max-width: 44ch; } .hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .hero-cta .sec { font-size: 14px; font-weight: 500; color: var(--gray); } .hero-cta .sec:hover { color: var(--ink); } .hero-cards { /* Card height as a multiple of the column width. Single source of truth: the aspect-ratio below and the desktop height lock further down both read it, so they can never drift apart. */ --hcard-ratio: 1.6; /* Tracks are written out rather than repeat(4, 1fr) on purpose: a repeat() value does NOT interpolate, so the hover widen below would snap instead of animating. Same reason the bento grid lists its tracks explicitly. */ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; margin-bottom: 20px; /* lift the row clear of the hero's bottom edge */ } .hcard { /* rounded all round now the cards no longer sit flush on the bottom edge */ border-radius: 14px; overflow: hidden; position: relative; aspect-ratio: 1 / var(--hcard-ratio); max-height: 42vh; } /* ---- hovered hero card widens, neighbours yield (same idiom as the bento) ---- Desktop pointers only: below 901px the grid drops to 2 columns and there's no hover to speak of. The row height is pinned to the value the 4-column aspect-ratio produces today, so a widening card can only ever grow SIDEWAYS — it can never push up into the headline. */ @media (hover: hover) and (min-width: 1100px) { .hero-cards { /* = (content width - 3 gaps) / 4 columns × --hcard-ratio, i.e. exactly what the aspect-ratio above would produce. Gated at 1100px because only there is the column pinned to --maxw regardless of scrollbar width — so this stays pixel-exact. Below that the cards keep their aspect-ratio sizing. */ height: min(42vh, calc((var(--maxw) - 54px) / 4 * var(--hcard-ratio))); /* A touch longer than the bento's .55s: these cards travel less distance, so the same duration reads slightly quicker here. */ transition: grid-template-columns .65s cubic-bezier(.4,0,.2,1); } /* height now comes from the locked row, not from the card's own ratio */ .hcard { aspect-ratio: auto; max-height: none; height: 100%; } .hero-cards:has(.hcard:nth-child(1):hover) { grid-template-columns: 1.48fr .84fr .84fr .84fr; } .hero-cards:has(.hcard:nth-child(2):hover) { grid-template-columns: .84fr 1.48fr .84fr .84fr; } .hero-cards:has(.hcard:nth-child(3):hover) { grid-template-columns: .84fr .84fr 1.48fr .84fr; } .hero-cards:has(.hcard:nth-child(4):hover) { grid-template-columns: .84fr .84fr .84fr 1.48fr; } } @media (prefers-reduced-motion: reduce) { .hero-cards { transition: none; } } /* real website footage / screenshots filling the hero cards */ .hcard.has-video, .hcard.has-shot { background: #0d0d0d; } .hcard-video, .hcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* mockup scene helpers */ .scene { position: absolute; inset: 0; } .tilt { position: absolute; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.18); } .phone { position: absolute; border-radius: 34px; background: #111; box-shadow: 0 30px 70px rgba(0,0,0,.35); padding: 9px; } .phone .screen { width: 100%; height: 100%; border-radius: 26px; background: #fff; position: relative; overflow: hidden; } .phone .notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 26%; height: 9px; border-radius: 6px; background: #111; z-index: 2; } .ui-line { position: absolute; border-radius: 4px; background: #e8e8e8; } .ui-pill { position: absolute; border-radius: 100px; background: #efefef; } /* hero scene 1: fanned cards */ .s1 { background: linear-gradient(160deg, #fbfbfb, #e9e9ec); } .s1 .c1 { width: 62%; height: 58%; left: -6%; top: 34%; background: linear-gradient(150deg,#fdfdfd,#ececef); transform: rotate(-24deg); } .s1 .c2 { width: 58%; height: 60%; left: 26%; top: 6%; background: linear-gradient(160deg,#8a3f22,#c8623a 55%,#e7a480); transform: rotate(14deg); } .s1 .c3 { width: 54%; height: 46%; left: 40%; top: 48%; background: linear-gradient(150deg,#15171d,#2c2f3a); transform: rotate(24deg); } .s1 .c4 { width: 48%; height: 42%; left: 4%; top: -8%; background: linear-gradient(150deg,#ffffff,#f2e2da); transform: rotate(-10deg); } /* hero scene 2: phone on dark table */ .s2 { background: linear-gradient(145deg, #3c3f45 0%, #191b1f 70%); } .s2::before { content:''; position:absolute; left:-20%; top:18%; width:140%; height:2px; background:rgba(255,255,255,.06); transform:rotate(-14deg); } .s2 .phone { width: 52%; height: 68%; left: 24%; top: 18%; transform: rotate(-18deg); } /* hero scene 3: white tablet flatlay */ .s3 { background: linear-gradient(140deg, #f4f4f6, #dcdde2); } .s3 .c1 { width: 84%; height: 74%; left: 10%; top: 16%; background: #fff; transform: rotate(52deg); border-radius: 22px; } .s3 .c2 { width: 56%; height: 40%; left: 24%; top: 33%; background: #f3f4f6; transform: rotate(52deg); border-radius: 10px; box-shadow: inset 0 0 0 1px #e6e6e6; } /* hero scene 4: dark slab */ .s4 { background: linear-gradient(140deg, #b9b9bd, #8f8f94); } .s4 .c1 { width: 120%; height: 58%; left: -10%; top: 56%; background: linear-gradient(160deg, #17181c, #060607); border-radius: 26px; transform: rotate(-7deg); box-shadow: 0 -20px 60px rgba(0,0,0,.35); } .s4 .c2 { width: 70%; height: 10%; left: 12%; top: 60%; background: linear-gradient(90deg,#3a3b40,#232428); border-radius: 8px; transform: rotate(-7deg); } /* ---------- SECTION SCAFFOLD ---------- */ section { padding: clamp(56px, 7.5vw, 100px) var(--pad); } .center { text-align: center; } .pill { display: inline-block; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 400; color: var(--accent); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 22px; } .h-section { font-size: clamp(25px, 2.7vw, 38px); margin-bottom: 18px; } .sub { font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 640px; margin: 0 auto; } .sub.gray { color: var(--gray); } .accent-link { display: inline-block; margin-top: 18px; color: var(--accent); font-size: 14.5px; font-weight: 600; } .accent-link:hover { text-decoration: underline; } /* ---------- TRUST STRIP ---------- */ .trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; padding: 26px var(--pad); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; } .trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; } .trust-item svg { width: 17px; height: 17px; color: var(--accent); flex: none; } /* ---------- INCLUDES GRID ---------- */ .incl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; text-align: left; } .incl { background: var(--card-gray); border: 1px solid #ececec; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 9px; min-height: 148px; transition: transform .25s, box-shadow .25s, border-color .25s; } a.incl:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.08); border-color: var(--accent); } .incl .tag { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .incl h3 { font-size: 16px; font-weight: 700; } .incl p { font-size: 12.5px; line-height: 1.5; color: var(--gray); margin-top: auto; } .incl .go { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 4px; } .incl.cta { background: var(--ink); color: #fff; justify-content: center; align-items: flex-start; gap: 14px; } .incl.cta h3 { font-size: 18px; line-height: 1.2; } .incl.cta .arr { color: var(--accent); font-size: 20px; } /* ---------- STEPS ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; text-align: left; } .step { border-top: 2px solid var(--ink); padding-top: 20px; } .step .no { font-family: 'Switzer', 'Inter', sans-serif; font-weight: 800; font-size: 14px; color: var(--accent); letter-spacing: .02em; } .step h3 { font-size: 19px; font-weight: 700; margin: 12px 0 8px; } .step p { font-size: 14px; line-height: 1.55; color: var(--gray); } /* ---------- STATS ---------- */ .stats-section { padding-top: clamp(56px, 7.5vw, 100px); } .stats-bar { position: relative; overflow: hidden; background: #0b0b0c; border-radius: 20px; color: #fff; margin-top: 36px; padding: clamp(32px, 4vw, 54px) clamp(24px, 3.2vw, 48px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 48px); text-align: left; } .stats-bar::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 2px, transparent 2px 26px); mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 45%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 45%); pointer-events: none; } .stat { position: relative; } .stat .num { font-family: 'Switzer', 'Inter', sans-serif; font-weight: 800; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.01em; color: var(--accent); } .stat p { font-size: 13.5px; line-height: 1.5; margin-top: 13px; color: rgba(255,255,255,.92); } .stats-foot { margin-top: 30px; font-size: 14.5px; color: var(--gray); max-width: 640px; margin-left: auto; margin-right: auto; } .stats-foot b { color: var(--ink); font-weight: 700; } /* ---------- PLANS (3-tier pricing) ---------- */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; text-align: left; align-items: stretch; } .plan { position: relative; background: var(--card-gray); border: 1px solid #ececec; border-radius: 16px; padding: 30px 26px; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; } .plan:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,.08); } .plan.featured { background: #0e0e10; color: #fff; border-color: #0e0e10; box-shadow: 0 24px 60px rgba(0,0,0,.22); } .plan .ptier { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .plan .pos { font-size: 13px; color: var(--gray); margin-top: 6px; min-height: 2.6em; } .plan.featured .pos { color: rgba(255,255,255,.62); } .plan .price { font-family: 'Switzer', 'Inter', sans-serif; font-weight: 800; font-size: 40px; margin: 16px 0 2px; letter-spacing: -.02em; } .plan .price small { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--gray); } .plan.featured .price small { color: rgba(255,255,255,.62); } .plan .term { font-size: 12px; color: var(--gray); } .plan.featured .term { color: rgba(255,255,255,.55); } .plan ul { list-style: none; margin: 22px 0; display: grid; gap: 11px; flex-grow: 1; } .plan li { position: relative; padding-left: 23px; font-size: 13.5px; line-height: 1.45; } .plan li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } .plan li.head { font-weight: 700; padding-left: 0; font-size: 13px; opacity: .75; text-transform: uppercase; letter-spacing: .04em; } .plan li.head::before { content: none; } .ribbon { position: absolute; top: 18px; right: 18px; background: var(--accent); color: #fff; font-family: 'Space Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; } .pricing-note { margin-top: 26px; font-size: 13px; color: var(--gray); } /* ---------- WORK GRID ---------- */ .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; } .chip { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; background: #fff; border: 1px solid var(--border); border-radius: 100px; font-size: 13.5px; font-weight: 500; color: #6b6b70; } .work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; } .wcard { border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 622 / 500; } .wcard .label { position: absolute; left: 20px; bottom: 18px; z-index: 3; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4); } .wcard .label b { display: block; font-size: 16px; font-weight: 700; } .wcard .label span { display: block; font-size: 12px; opacity: .8; margin-top: 2px; } .wcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 45%); z-index: 2; } .w1 { background: linear-gradient(150deg, #f6f6f8, #dfe1e6); } .w1 .c1 { width: 46%; height: 66%; left: 6%; top: 24%; background: linear-gradient(160deg,#fff,#f0e6df); transform: rotate(-26deg); } .w1 .c2 { width: 44%; height: 68%; left: 34%; top: 2%; background: linear-gradient(160deg,#8a3f22,#c8623a 60%,#e7b79c); transform: rotate(10deg); } .w1 .c3 { width: 42%; height: 52%; left: 56%; top: 42%; background: linear-gradient(150deg,#101218,#262a34); transform: rotate(26deg); } .w2 { background: linear-gradient(150deg, #45484f 0%, #17181c 75%); } .w2 .phone { width: 30%; height: 74%; left: 36%; top: 14%; transform: rotate(-32deg); } .w3 { background: linear-gradient(160deg, #131313, #2a2118 85%); } .w3 .watch { position: absolute; left: 34%; top: 18%; width: 34%; height: 52%; background: #0a0a0a; border-radius: 26%; box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 0 0 3px #1e1e1e; } .w3 .watch::before { content:'2:12'; position: absolute; inset: 12%; border-radius: 22%; background: radial-gradient(80% 80% at 30% 100%, #6b3a17, #100b07 70%); color:#f0f0f0; font-family:'Switzer','Inter',sans-serif; font-weight:800; font-size: 30px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:10%; } .w3 .strap { position: absolute; left: 44%; top: -10%; width: 14%; height: 40%; background: linear-gradient(#a34f14, #6d3810); border-radius: 10px; } .w3 .strap.b { top: auto; bottom: -12%; height: 46%; background: linear-gradient(#6d3810, #3c2009); } .w4 { background: linear-gradient(150deg, #ececee, #d4d5da); } .w4 .c1 { width: 78%; height: 66%; left: 12%; top: 20%; background: #fbfbfc; transform: rotate(40deg); border-radius: 18px; } .w4 .c2 { width: 40%; height: 40%; left: 30%; top: 32%; background: #fff; transform: rotate(40deg); border-radius: 10px; box-shadow: inset 0 0 0 1px #e4e4e6; } .w5 { background: linear-gradient(160deg, #d97a2b 0%, #b35311 55%, #7c3808 100%); } .w5 .laptop { position: absolute; left: 10%; top: 22%; width: 62%; height: 58%; background: linear-gradient(160deg,#1b1b1d,#000); border-radius: 12px; transform: rotate(-4deg); box-shadow: 0 40px 80px rgba(0,0,0,.45); } .w5 .laptop::before { content:''; position:absolute; inset: 5% 4%; border-radius: 8px; background: radial-gradient(120% 100% at 50% 0%, #35271c, #0c0906 70%); } .w5 .base { position: absolute; left: 4%; top: 78%; width: 74%; height: 8%; background: linear-gradient(#3f3f42,#151517); border-radius: 8px; transform: rotate(-4deg); } .w6 { background: linear-gradient(160deg, #e8b39c 0%, #c8623a 60%, #8a3f22 100%); } .w6 .c1 { width: 66%; height: 74%; left: 17%; top: 14%; background: #fff; border-radius: 14px; transform: rotate(-6deg); box-shadow: 0 34px 70px rgba(80,30,10,.35); } .w6 .c1::before { content:''; position:absolute; left:8%; top:10%; width:60%; height:8%; background:#111; border-radius:4px; } .w6 .c1::after { content:''; position:absolute; left:8%; top:26%; width:84%; height:38%; background:linear-gradient(140deg,#c8623a,#e7a480); border-radius:8px; } /* ---------- RECOGNIZED CARD ---------- */ .dark-card-wrap { margin-top: 40px; } .recognized { position: relative; overflow: hidden; background: #0b0b0c; border-radius: 20px; color: #fff; padding: clamp(32px, 4vw, 60px); min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; text-align: left; } .recognized::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.3px); background-size: 26px 18px; mask-image: linear-gradient(115deg, transparent 32%, black 60%); -webkit-mask-image: linear-gradient(115deg, transparent 32%, black 60%); } .recognized h2 { font-size: clamp(28px, 3.4vw, 46px); position: relative; max-width: 16ch; } .laurels { display: flex; flex-wrap: wrap; gap: 34px 42px; position: relative; max-width: 520px; } .laurel { display: flex; align-items: center; gap: 8px; } .laurel svg { width: 21px; height: 36px; opacity: .9; } .laurel .txt { text-align: center; } .laurel .txt b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; } .laurel .txt span { display: block; font-size: 7.5px; letter-spacing: .26em; opacity: .65; margin-top: 3px; text-transform: uppercase; } .trophy { position: absolute; right: 6%; top: -12%; width: 120px; height: 135%; background: linear-gradient(115deg, #232325 0%, #0e0e10 45%, #1b1b1e 100%); transform: rotate(16deg); border-radius: 10px; box-shadow: -30px 30px 80px rgba(0,0,0,.6), inset 2px 0 1px rgba(255,255,255,.08); } .trophy::after { content: 'K'; position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%); font-family: 'Switzer', 'Inter', sans-serif; font-weight: 800; font-size: 52px; background: linear-gradient(160deg, #e7a480, #a34d2b); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- CONTACT ---------- */ .contact-wrap { max-width: 620px; margin: 0 auto; } .contact-form { display: grid; gap: 12px; margin-top: 30px; text-align: left; } .contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; font-family: inherit; font-size: 14px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); transition: border-color .2s; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--accent); } .contact-form textarea { min-height: 108px; resize: vertical; } .contact-note { margin-top: 14px; font-size: 12.5px; color: var(--gray); } .form-ok { margin-top: 16px; font-size: 14.5px; color: var(--accent); font-weight: 600; display: none; } .form-err { margin-top: 12px; font-size: 14px; color: #c0392b; font-weight: 600; display: none; } .form-err a { text-decoration: underline; } .form-consent { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--gray); } .form-consent a { text-decoration: underline; } .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; } .badge2 { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: #fff; } .badge2 svg { width: 14px; height: 14px; color: var(--accent); } /* ---------- SUBPAGE HERO (pricing / development) ---------- */ .subhero { padding: 160px var(--pad) clamp(40px, 6vw, 70px); position: relative; background: #fff; } .subhero .hero-eyebrow { margin-bottom: 18px; } .subhero h1 { font-size: clamp(34px, 5vw, 74px); max-width: 16ch; } .subhero .sub { margin: 22px 0 0 0; max-width: 620px; } .subhero.center .sub { margin-left: auto; margin-right: auto; } .subhero .hero-cta { margin-top: 30px; flex-direction: row; align-items: center; } /* generic CTA band */ .cta-band { text-align: center; } .cta-band h2 { font-size: clamp(26px, 3.2vw, 44px); margin-bottom: 26px; } .cta-band .hero-cta { flex-direction: row; justify-content: center; align-items: center; gap: 18px; } /* ---------- REVEAL ---------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- RESPONSIVE ---------- */ /* Narrowest screens: the "CHRIS KATZER" wordmark + all links won't share one row, so keep only the primary CTA in the header (full nav lives in the footer). */ @media (max-width: 560px) { .logo { font-size: 18px; } .nav-links a:not(.txt-cta) { display: none; } .nav-links .txt-cta { white-space: nowrap; } } @media (max-width: 900px) { .nav-links { gap: 14px; font-size: 13px; } .nav-links a:not(.btn):nth-child(-n+3) { display: none; } .lang { display: none; } .hero-cards { grid-template-columns: repeat(2, 1fr); } .hcard:nth-child(n+3) { display: none; } .work-grid, .plans, .steps { grid-template-columns: 1fr; } .incl-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } .incl-grid.bento { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; } .incl-grid > .incl { grid-column: auto !important; grid-row: auto !important; min-height: 150px; } .incl-grid.bento .incl { overflow: visible; } .stats-bar { grid-template-columns: 1fr; } .contact-form .row2 { grid-template-columns: 1fr; } .subhero .hero-cta { flex-direction: column; align-items: flex-start; } .trophy { display: none; } .incl-grid::before, .incl-grid::after { display: none; } } /* ==================== FROST + BIGGER TILES + TEXT CTAs ==================== */ /* white background on all pages (frost now reads over local glows only) */ body { background: #fff; } /* frosted surfaces everywhere */ .incl:not(.cta), .step, .badge2, .chip, .pill, .plan:not(.featured) { background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 10px 40px rgba(60,30,15,.09), inset 0 1px 0 rgba(255,255,255,.6); } .trust-strip { background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-color: rgba(255,255,255,.6); } .plan.featured { background: rgba(13,13,15,.68); -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3); border: 1px solid rgba(255,255,255,.14); } /* BENTO "what's included": varied tile sizes + grow-on-hover, frosted over a colour glow */ .incl-grid { gap: 16px; margin-top: 52px; position: relative; z-index: 0; isolation: isolate; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(188px, auto); } .incl-grid::before, .incl-grid::after { content: ''; position: absolute; z-index: -1; pointer-events: none; filter: blur(55px); border-radius: 50%; } .incl-grid::before { left: -8%; top: 18%; width: 48%; height: 72%; background: rgba(232,72,15,.32); } .incl-grid::after { right: -8%; top: 2%; width: 44%; height: 66%; background: rgba(120,150,255,.24); } .incl { position: relative; z-index: 1; padding: 26px; min-height: 0; border-radius: 18px; gap: 12px; transition: border-color .3s ease; } .incl .tag { font-size: 11.5px; } .incl h3 { font-size: 20px; letter-spacing: -.01em; } .incl p { font-size: 13.5px; } .incl:hover, a.incl:hover { z-index: 6; } /* bento placement — some large, some small */ .i-design { grid-column: 1 / 3; grid-row: 1 / 3; } /* big */ .i-dev { grid-column: 3 / 5; grid-row: 1 / 2; } /* wide */ .i-host { grid-column: 3 / 4; grid-row: 2 / 3; } /* small */ .i-seo { grid-column: 4 / 5; grid-row: 2 / 3; } /* small */ .i-updates { grid-column: 1 / 2; grid-row: 3 / 4; } /* small */ .i-traffic { grid-column: 2 / 3; grid-row: 3 / 4; } /* small */ .i-conv { grid-column: 1 / 3; grid-row: 4 / 5; } /* wide */ .i-cta { grid-column: 3 / 5; grid-row: 3 / 5; } /* big */ /* fill the larger tiles with bigger type */ .i-design h3, .i-cta h3 { font-size: 28px; line-height: 1.04; } .i-design p { font-size: 15px; max-width: 26ch; } .i-dev h3, .i-conv h3 { font-size: 23px; } .incl.cta { padding: 30px; } .i-cta .arr { font-size: 22px; } /* frosted step cards */ .step { border-top: none; border-radius: 16px; padding: 26px 24px; transition: transform .3s, box-shadow .3s; } .step:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(60,30,15,.13); } /* ---------- TEXT CTA (pure text form + cool hover) ---------- */ .txt-cta { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 2px 0 9px; font-family: inherit; cursor: pointer; } .txt-cta .swap-label span.b { color: var(--accent); } .txt-cta:hover .swap-label span.a { transform: translateY(-105%); } .txt-cta:hover .swap-label span.b { transform: translateY(0); } .txt-cta .arr { color: var(--accent); transition: transform .35s cubic-bezier(.19,1,.22,1); } .txt-cta:hover .arr { transform: translate(4px,-4px); } .txt-cta::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .16; } .txt-cta::before { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width .4s cubic-bezier(.19,1,.22,1); } .txt-cta:hover::before { width: 100%; } .txt-cta.big { font-size: 17px; } .txt-cta.light { color: #fff; } .plan .txt-cta { margin-top: 8px; align-self: flex-start; } /* ============ FLAT: plain white, no shadows, 1px light-grey borders ============ */ :root { --line: #e6e6e6; } /* kill the colour glow behind the bento */ .incl-grid::before, .incl-grid::after { display: none !important; } /* nuke every shadow on the site */ *, *::before, *::after { box-shadow: none !important; } /* white boxes: 1px light-grey border, no frost */ .incl:not(.cta), .step, .plan:not(.featured), .pill, .badge2, .chip, .contact-form input, .contact-form textarea, .contact-form select { background: #fff; border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; } /* boxes that keep their own fill still get the same thin border */ .wcard, .incl.cta, .plan.featured, .stats-bar, .recognized { border: 1px solid var(--line); } .incl.cta, .plan.featured { background: #0e0e10; -webkit-backdrop-filter: none; backdrop-filter: none; } /* full-width strip: only top & bottom lines */ .trust-strip { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--line); border-left: 0; border-right: 0; } /* hover feedback without shadow — border darkens */ .incl:hover, a.incl:hover { border-color: #b8b8b8; } .step:hover, .plan:hover, .incl:not(.cta):hover { border-color: #b8b8b8; } /* ============ EXPANDING BENTO — hovered tile grows into neighbours' space ============ */ .incl-grid.bento { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; grid-auto-rows: unset; height: clamp(750px, 76vw, 908px); transition: grid-template-columns .55s cubic-bezier(.4,0,.2,1), grid-template-rows .55s cubic-bezier(.4,0,.2,1); } .incl-grid.bento .incl { overflow: hidden; } /* on hover, expand the tracks the hovered tile occupies; neighbours yield */ .incl-grid.bento:has(.i-design:hover) { grid-template-columns: 1.42fr 1.42fr .78fr .78fr; grid-template-rows: 1.4fr 1.4fr .8fr .8fr; } .incl-grid.bento:has(.i-dev:hover) { grid-template-columns: .78fr .78fr 1.42fr 1.42fr; grid-template-rows: 1.55fr .82fr .82fr .82fr; } .incl-grid.bento:has(.i-host:hover) { grid-template-columns: .8fr .8fr 1.62fr .78fr; grid-template-rows: .82fr 1.55fr .82fr .82fr; } .incl-grid.bento:has(.i-seo:hover) { grid-template-columns: .78fr .8fr .8fr 1.62fr; grid-template-rows: .82fr 1.55fr .82fr .82fr; } .incl-grid.bento:has(.i-updates:hover) { grid-template-columns: 1.62fr .8fr .8fr .78fr; grid-template-rows: .82fr .82fr 1.55fr .82fr; } .incl-grid.bento:has(.i-traffic:hover) { grid-template-columns: .8fr 1.62fr .8fr .78fr; grid-template-rows: .82fr .82fr 1.55fr .82fr; } .incl-grid.bento:has(.i-conv:hover) { grid-template-columns: 1.42fr 1.42fr .78fr .78fr; grid-template-rows: .8fr .8fr .82fr 1.55fr; } .incl-grid.bento:has(.i-cta:hover) { grid-template-columns: .78fr .78fr 1.42fr 1.42fr; grid-template-rows: .78fr .78fr 1.36fr 1.36fr; } @media (prefers-reduced-motion: reduce) { .incl-grid.bento { transition: none; } } /* ============ BILLING TOGGLE (pricing) ============ */ .billing-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 30px; padding: 5px; border: 1px solid var(--line); border-radius: 100px; background: #fff; } .bt-opt { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--gray); padding: 10px 22px; border-radius: 100px; transition: color .25s ease, background .25s ease; } .bt-opt:hover { color: var(--ink); } .bt-opt.active { background: var(--ink); color: #fff; } .bt-opt .save { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 100px; } /* struck original monthly price shown inline before the discounted rate */ .plan .price { white-space: nowrap; } .price s { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 20px; color: var(--gray); margin-right: 8px; letter-spacing: 0; text-decoration-thickness: 1px; } .plan.featured .price s { color: rgba(255,255,255,.5); } /* ============ FOOTER — full-width blood-orange band, white text ============ */ .site-footer { background: var(--accent-deep); border-top: none; padding: clamp(48px, 6vw, 84px) var(--pad) 26px; color: #fff; } /* CTA row sits above the link grid, separated by a divider */ .footer-cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-bottom: clamp(38px, 5vw, 60px); } .footer-cta h2 { font-size: clamp(30px, 3.6vw, 52px); max-width: 14ch; letter-spacing: -.01em; color: #fff; } /* CTA link goes white on the orange (its default ink/accent colours vanish here) */ .site-footer .txt-cta { color: #fff; } .site-footer .txt-cta .swap-label span.b, .site-footer .txt-cta .arr { color: #fff; } .site-footer .txt-cta::after { background: #fff; opacity: .3; } .site-footer .txt-cta::before { background: #fff; } .f-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; padding-top: clamp(34px, 4vw, 48px); border-top: 1px solid rgba(255,255,255,.24); } .f-brand .logo { font-size: 22px; color: #fff; } .f-brand .logo span { color: #fff; } .f-brand p { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.9); max-width: 30ch; } .f-col h3 { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); margin-bottom: 13px; } .f-col a { display: block; font-size: 14px; color: #fff; padding: 5px 0; transition: color .2s; } .f-col a:hover { color: #ffe4d9; } .f-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: clamp(36px, 5vw, 60px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.24); font-size: 12.5px; color: rgba(255,255,255,.9); } .f-bottom .lang { color: rgba(255,255,255,.9); } .f-bottom .lang b { color: #fff; } @media (max-width: 900px) { .f-grid { grid-template-columns: 1fr 1fr; } .f-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .f-grid { grid-template-columns: 1fr; } } /* ============ COMPARISON TABLE ============ */ .compare-wrap { margin-top: 46px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .compare { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; } .compare th, .compare td { padding: 15px 20px; font-size: 14px; border-bottom: 1px solid var(--line); } .compare tfoot td { border-bottom: 0; } .compare thead th { font-family: 'Switzer', 'Inter', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); vertical-align: bottom; padding-top: 26px; padding-bottom: 20px; } .compare .corner { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 12px; color: var(--gray); text-transform: uppercase; letter-spacing: .05em; } .compare td.feat { color: var(--ink); font-weight: 500; width: 32%; } .compare td.val, .compare th.val { text-align: center; color: var(--gray); } .compare .tick { color: var(--accent); font-weight: 700; } .compare .no { color: #cccccc; } .compare .mp { display: inline-block; margin-left: 6px; vertical-align: middle; font-family: 'Space Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 100px; } .compare .hi { background: #fdf4f0; } /* highlight the Growth column */ .compare thead th.hi, .compare td.feat { color: var(--ink); } .cmp-cta { color: var(--accent); font-weight: 600; font-size: 13.5px; } .cmp-cta:hover { text-decoration: underline; } /* ============ "MOST WEBSITES ARE PRETTY" STAT CARD ============ */ .stats-bar { display: block; background: #0b0b0c; border-radius: 22px; padding: clamp(26px, 3.2vw, 40px) clamp(24px, 3.2vw, 46px) clamp(22px, 2.4vw, 30px); text-align: left; overflow: hidden; } /* replace the hard diagonal hatch with a soft warm/cool wash */ .stats-bar::before { background-image: radial-gradient(75% 130% at 0% 0%, rgba(232,72,15,.20), transparent 62%), radial-gradient(65% 120% at 100% 4%, rgba(120,150,255,.11), transparent 64%); mask-image: none; -webkit-mask-image: none; } .stats-head { position: relative; padding-bottom: clamp(18px, 2vw, 24px); border-bottom: 1px solid rgba(255,255,255,.13); } .sb-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .sb-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .stats-cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .stats-cols .stat { padding: clamp(24px, 2.6vw, 34px) clamp(16px, 2vw, 30px) clamp(22px, 2.4vw, 30px); } .stats-cols .stat:first-child { padding-left: 0; } .stats-cols .stat:last-child { padding-right: 0; } .stats-cols .stat + .stat { border-left: 1px solid rgba(255,255,255,.13); } .stat .num { font-size: clamp(38px, 4.4vw, 58px); line-height: 1; letter-spacing: -.02em; } .stat h3 { margin-top: 15px; font-size: 15.5px; font-weight: 600; color: #fff; letter-spacing: -.01em; line-height: 1.3; } .stat p { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.6); max-width: 32ch; } .stats-note { position: relative; padding-top: clamp(18px, 2vw, 24px); border-top: 1px solid rgba(255,255,255,.13); font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: none; margin: 0; } .stats-note b { color: #fff; font-weight: 600; } @media (max-width: 900px) { .stats-cols { grid-template-columns: 1fr; } .stats-cols .stat { padding-left: 0; padding-right: 0; } .stats-cols .stat + .stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.13); } .stat p { max-width: none; } } /* --- hover a row to slide its explanation open (rows below shift down) --- */ .compare tr.has-info td { cursor: help; transition: background .25s ease, color .25s ease; } /* small "?" marker so it's obvious which rows explain themselves */ .compare tr.has-info td.feat::after { content: '?'; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 8px; vertical-align: 1px; border: 1px solid #d0d0d0; border-radius: 50%; font-family: 'Space Mono', monospace; font-size: 9.5px; color: #9a9a9a; transition: border-color .25s ease, color .25s ease; } .compare tr.has-info:hover td.feat { color: var(--accent); } .compare tr.has-info:hover td.feat::after { border-color: var(--accent); color: var(--accent); } .compare tr.has-info:hover td:not(.hi) { background: #fbfaf9; } /* the explanation row: zero-height until revealed */ .compare tr.info-row > td { padding: 0 20px; border-bottom: 0; } .info-inner { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.4, 0, .2, 1); } .info-body { overflow: hidden; } .info-body p { margin: 0; padding: 2px 0 16px; font-size: 13px; line-height: 1.6; color: var(--gray); max-width: 78ch; opacity: 0; transform: translateY(-4px); transition: opacity .3s ease .06s, transform .3s ease .06s; } .info-body p b { color: var(--ink); font-weight: 600; } /* open while the trigger row — or the revealed row itself — is hovered */ .compare tr.has-info:hover + tr.info-row .info-inner, .compare tr.info-row:hover .info-inner { grid-template-rows: 1fr; } .compare tr.has-info:hover + tr.info-row .info-body p, .compare tr.info-row:hover .info-body p { opacity: 1; transform: none; } /* the trigger row keeps its divider; the open row draws one underneath */ .compare tr.has-info:hover + tr.info-row > td { border-bottom: 1px solid var(--line); } @media (prefers-reduced-motion: reduce) { .info-inner, .info-body p { transition: none; } } /* ============================================================ CONTENT REBUILD — proof, why-us, monthly rhythm, founder, FAQ ============================================================ */ /* ---------- PROBLEM: source footnote ---------- */ .stats-source { margin-top: 18px; font-size: 12px; color: #9a9a9a; } /* ---------- WHY US: 4-column comparison ---------- */ .cmp-why td.feat, .cmp-why th.corner { width: 22%; } .cmp-why td.val, .cmp-why th.val { width: 26%; font-size: 13.5px; } .cmp-why td.val b { color: var(--ink); font-weight: 600; } .cmp-why thead th.val { font-size: 15px; color: var(--gray); font-weight: 500; } .cmp-why thead th.val.hi { font-family: 'Switzer', 'Inter', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -.01em; } .cmp-why .hi { background: #fdf4f0; } .cmp-foot { margin-top: 20px; font-size: 13px; color: var(--gray); } /* ---------- WHY US: differentiator cards ---------- */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; text-align: left; } .why { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s, border-color .3s; } .why:hover { transform: translateY(-4px); border-color: #b8b8b8; } .why .tag { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .why h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; } .why p { font-size: 14px; line-height: 1.55; color: var(--gray); } .why p a { color: var(--accent); font-weight: 600; } .why p a:hover { text-decoration: underline; } /* ---------- MONTHLY RHYTHM: 4-up steps ---------- */ .steps.four { grid-template-columns: repeat(4, 1fr); } .steps.four .no { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; } .steps.four h3 { font-size: 18px; } .steps.four p { font-size: 13.5px; } /* ---------- PROOF: real screenshot + real metrics ---------- */ .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; align-items: stretch; } .w-shot { aspect-ratio: 622 / 500; background: #0b0b0c; } .w-shot picture, .w-shot img { display: block; width: 100%; height: 100%; } .w-shot img { object-fit: cover; object-position: center top; } .w-shot .label { text-align: left; } /* the metrics card is content, not a mockup — drop the .wcard gradient scrim */ .w-metrics { aspect-ratio: auto; background: #0b0b0c; color: #fff; padding: clamp(24px, 2.8vw, 34px); display: flex; flex-direction: column; gap: 22px; text-align: left; } .w-metrics::after { content: none; } .wm-head { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.13); } .wm-stats { display: grid; gap: 20px; flex-grow: 1; align-content: center; } .wm-stat { display: grid; grid-template-columns: 108px 1fr; align-items: baseline; gap: 4px 18px; } .wm-stat .num { font-family: 'Switzer', 'Inter', sans-serif; font-weight: 800; font-size: clamp(30px, 3.2vw, 42px); line-height: 1; letter-spacing: -.02em; color: var(--accent); } .wm-stat h3 { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -.01em; } .wm-stat p { grid-column: 2; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.6); } .wm-foot { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.55); } .wm-foot b { color: #fff; font-weight: 600; } /* ---------- FOUNDER ---------- */ /* two separate boxes: a square image card + a text card, matching the site's thin-border card language */ .founder { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: stretch; margin-top: 44px; text-align: left; } .founder > picture { display: block; align-self: start; aspect-ratio: 1 / 1; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; } .founder img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .founder-body { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; } .founder-lead { font-size: 18px; line-height: 1.5; color: var(--ink); letter-spacing: -.01em; } .founder-body p + p { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--gray); } /* homepage: a larger image card that stretches to follow the text box height (the About page keeps its compact square) */ @media (min-width: 901px) { #who .founder { grid-template-columns: 340px 1fr; } #who .founder > picture { align-self: stretch; aspect-ratio: auto; } } .founder-body .txt-cta { margin-top: 22px; align-self: flex-start; } /* ---------- FAQ (native
, no JS required) ---------- */ .faq-list { margin-top: 40px; text-align: left; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); transition: color .2s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--accent); } .faq-item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(var(--accent), var(--accent)) center/12px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center/2px 12px no-repeat; transition: transform .3s cubic-bezier(.19,1,.22,1); } .faq-item[open] summary::after { transform: rotate(135deg); } .faq-body { padding: 0 60px 24px 0; } .faq-body p { font-size: 14.5px; line-height: 1.65; color: var(--gray); } .faq-body p a { color: var(--accent); font-weight: 600; } .faq-body p a:hover { text-decoration: underline; } /* ---------- CONTACT: low-friction alternative ---------- */ .contact-alt { margin-top: 22px; font-size: 13.5px; line-height: 1.6; color: var(--gray); } .contact-alt a { color: var(--accent); font-weight: 600; } .contact-alt a:hover { text-decoration: underline; } /* ---------- PROSE (about, imprint, privacy) ---------- */ .prose { max-width: 720px; margin: 0 auto; text-align: left; } .prose h2 { font-family: 'Switzer', 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; font-size: 24px; line-height: 1.1; margin: 46px 0 14px; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 16px; font-weight: 700; margin: 28px 0 8px; } .prose p, .prose li { font-size: 15px; line-height: 1.7; color: var(--gray); } .prose p + p { margin-top: 14px; } .prose b, .prose strong { color: var(--ink); font-weight: 600; } .prose ul { margin: 14px 0 0 20px; display: grid; gap: 8px; } .prose a { color: var(--accent); font-weight: 600; } .prose a:hover { text-decoration: underline; } .prose address { font-style: normal; } .prose .lede { font-size: 18px; line-height: 1.6; color: var(--ink); letter-spacing: -.01em; } .prose .meta { margin-top: 40px; font-size: 12.5px; color: #9a9a9a; } .todo { display: block; margin: 16px 0; padding: 14px 16px; border: 1px dashed var(--accent); border-radius: 10px; background: #fdf4f0; color: var(--accent-deep); font-size: 13px; line-height: 1.55; } .todo b { color: var(--accent-deep); } /* FAQ page: grouped */ .faq-group { max-width: 780px; margin: 0 auto; text-align: left; } .faq-group + .faq-group { margin-top: 54px; } .faq-group > h2 { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 900px) { .why-grid, .proof-grid, .steps.four { grid-template-columns: 1fr; } .founder { grid-template-columns: 1fr; gap: 14px; justify-items: stretch; } .founder > picture { width: 220px; max-width: 100%; } .w-shot { aspect-ratio: 16 / 10; } .wm-stat { grid-template-columns: 92px 1fr; } .hero-proof { margin-bottom: 28px; } .faq-body { padding-right: 20px; } } /* ============================================================ ACCESSIBILITY — WCAG 2.1 AA contrast The brand blood orange (#e8480f) is only 3.91:1 on white. That passes for large text (3:1) and for icons, but fails the 4.5:1 bar for small text. We sell accessibility, so small accent text uses a darker tint (5.38:1) and the brand colour is kept for fills, icons and big numbers. ============================================================ */ :root { --accent-text: #c23a0c; /* 5.38:1 on #fff — AA for small text */ --gray-min: #6f6f6f; /* 5.02:1 on #fff — replaces #9a9a9a */ } /* small accent text on light backgrounds */ .pill, .hero-eyebrow, .incl .tag, .why .tag, .step .no, .steps.four .no, .incl .go, .accent-link, .cmp-cta, .form-ok, .plan .ptier, .compare .tick, .why p a, .faq-body p a, .prose a, .contact-alt a, .faq-item summary:hover, .faq-group > h2, .txt-cta .arr, .txt-cta .swap-label span.b { color: var(--accent-text); } /* muted greys were 2.81:1 — well under the bar */ .stats-source, .prose .meta { color: var(--gray-min); } /* white-on-accent badges were 3.99:1 at small sizes */ .ribbon, .compare .mp, .bt-opt .save { background: var(--accent-text); } /* .sb-eyebrow and .num sit on near-black (#0b0b0c), where the brand accent reaches 4.93:1 — those stay untouched. */ /* ============ "WHAT EVERY PLAN INCLUDES" — guarantee grid ============ */ .guarantees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 56px); } .gtee { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; text-align: left; transition: border-color .3s ease, transform .3s cubic-bezier(.19,1,.22,1); } .gtee:hover { border-color: #b8b8b8; transform: translateY(-4px); } /* accent-tinted icon chip that fills solid on hover */ .gtee-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #ffe4d9; color: var(--accent-text); transition: background .3s ease, color .3s ease, transform .5s cubic-bezier(.19,1,.22,1); } .gtee-ic svg { width: 23px; height: 23px; } .gtee:hover .gtee-ic { background: var(--accent); color: #fff; transform: rotate(-6deg) scale(1.06); } .gtee-body { padding-right: 18px; } .gtee-body h3 { font-family: 'Switzer', 'Inter', sans-serif; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; } .gtee-body p { margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--gray); } /* editorial mono index in the corner */ .gtee-no { position: absolute; top: 20px; right: 20px; font-family: 'Space Mono', monospace; font-size: 12px; color: #cfcfcf; letter-spacing: .02em; transition: color .3s ease; } .gtee:hover .gtee-no { color: var(--accent-text); } /* staggered entrance once the grid reveals */ .guarantees .gtee { opacity: 0; transform: translateY(18px); } .guarantees.in .gtee { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .guarantees.in .gtee:nth-child(1) { transition-delay: .00s; } .guarantees.in .gtee:nth-child(2) { transition-delay: .07s; } .guarantees.in .gtee:nth-child(3) { transition-delay: .14s; } .guarantees.in .gtee:nth-child(4) { transition-delay: .21s; } .guarantees.in .gtee:nth-child(5) { transition-delay: .28s; } .guarantees.in .gtee:nth-child(6) { transition-delay: .35s; } /* keep the hover lift working after entrance settles */ .guarantees.in .gtee:hover { transform: translateY(-4px); } @media (max-width: 860px) { .guarantees { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .guarantees { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .gtee, .gtee-ic, .guarantees.in .gtee { transition: none; } .guarantees .gtee { opacity: 1; transform: none; } } /* ============================================================ MOBILE-FRIENDLY REFINEMENTS (Jul 2026) ============================================================ */ /* --- BENTO: the unconditional 4-col rule above overrides the earlier mobile media query, so phones got 4 cramped columns. Force 2 cols here (later source order + !important) and give rhythm: the big feature tile and the CTA go full-width, the six small ones sit 2-up. --- */ @media (max-width: 900px) { .incl-grid.bento { grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; grid-auto-rows: auto !important; height: auto !important; } .incl-grid.bento .incl { grid-column: auto !important; grid-row: auto !important; overflow: visible; } .incl-grid.bento .i-design, .incl-grid.bento .i-cta { grid-column: 1 / -1 !important; } .incl-grid.bento .incl { min-height: 148px; padding: 22px; } } /* --- FOUNDER: integrate the photo into the copy (float it in) instead of a big standalone card stacked above the text --- */ @media (max-width: 700px) { .founder { display: block; margin-top: 30px; } .founder > picture { float: left; width: 128px; aspect-ratio: 1 / 1; margin: 5px 18px 6px 0; border-radius: 16px; align-self: auto; } .founder-body { border: none; background: none; padding: 0; display: block; } .founder-lead { font-size: 16.5px; } .founder-body p + p { font-size: 14.5px; } .founder-body .txt-cta { margin-top: 16px; } .founder::after { content: ''; display: block; clear: both; } } /* --- COMPARISON TABLES: no more horizontal scroll. Each feature becomes a labelled card so every plan stays visible. Column names are stamped onto the value cells as data-label by main.js. --- */ @media (max-width: 700px) { .compare-wrap { border: none; border-radius: 0; overflow: visible; background: none; margin-top: 30px; } .compare { min-width: 0; width: 100%; display: block; } .compare thead, .compare tfoot { display: none; } .compare tbody, .compare tr, .compare td { display: block; } .compare tbody tr { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 2px 16px 8px; margin-bottom: 12px; } .compare td { border: none; padding: 0; } .compare td.feat { width: auto; font-size: 15px; font-weight: 600; color: var(--ink); cursor: default; padding: 13px 0 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .compare td.val { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; text-align: right; padding: 7px 0; font-size: 13.5px; color: var(--gray); } .compare td.val::before { content: attr(data-label); flex: none; text-align: left; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 400; color: var(--ink); } .compare td.val.hi { background: none; color: var(--accent-text); font-weight: 600; } .compare td.val.hi::before { color: var(--accent-text); } .compare .tick, .compare .no { font-size: 15px; } /* hover-only ?-explanations don't work on touch: hide markers + info rows */ .compare tr.info-row { display: none; } .compare td.feat::after { display: none !important; } /* why-us table has long column labels + long values — stacking label OVER value reads better than the cramped side-by-side used for the short pricing labels */ .cmp-why td.val { display: block; width: 100%; text-align: left; padding: 10px 0 2px; color: var(--ink); } .cmp-why td.val::before { display: block; margin-bottom: 3px; color: var(--gray); } .cmp-why td.val.hi { color: var(--accent-text); } } /* ============ METALLIC GRAIN (Jul 2026) ============ Reusable fractal-noise texture (inline SVG, no asset) blended over coloured dark/orange surfaces to suggest brushed metal. */ :root { --grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='150'%20height='150'%20filter='url(%23n)'/%3E%3C/svg%3E"); } /* footer: radial "lava" glow — vivid blood-orange spotlight up top falling off to a deep near-black burnt edge (Porsche PTS showcase vibe) + metallic grain */ .site-footer { background: radial-gradient(120% 135% at 50% -15%, #e8480f 0%, #cc3c0c 24%, #a5300a 50%, #6f2205 76%, #2c0e03 100%); position: relative; overflow: hidden; } .site-footer::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); background-size: 150px 150px; opacity: .4; mix-blend-mode: overlay; } .site-footer > * { position: relative; z-index: 1; } /* stats-bar: the black tile whose colour tint (orange/blue wash) now reads as grainy metal. Grain sits above the ::before wash, below the content. */ .stats-bar::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--grain); background-size: 150px 150px; opacity: .55; mix-blend-mode: overlay; } .stats-bar > * { position: relative; z-index: 2; } @media (prefers-reduced-motion: no-preference) { /* grain is static; no motion concerns */ }