/* ============================================================ /services — shared styles for the service detail pages and the /services overview. One stylesheet covers: · hero + eyebrow · asymmetric prose sections (sticky heading + body) · pricing tiers (reuse the homepage service card feel) · comparison table with accent column · stack pills + checklist · contractor callout (UI/UX only) · FAQ accordion (

) · featured work carousel (native overflow scroll) Service accent is set via --svc-accent on the , so every local rule can pick it up without repeating branching logic. ============================================================ */ body { /* Default accent when not overridden by a service page */ --svc-accent: var(--blue); --svc-accent-soft: rgba(91, 90, 255, .12); } body.svc-blue { --svc-accent: var(--blue); --svc-accent-soft: rgba(91, 90, 255, .12); } body.svc-red { --svc-accent: var(--red); --svc-accent-soft: rgba(232, 69, 60, .12); } body.svc-cream { --svc-accent: var(--cream); --svc-accent-soft: rgba(245, 240, 220, .10); } body.svc-neutral { --svc-accent: #fff; --svc-accent-soft: rgba(255, 255, 255, .08); } /* ---------- HERO ---------- */ .svc-hero { min-height: 78svh; padding: calc(var(--nav-h) + 40px) var(--pad-x) clamp(64px, 8vh, 120px); display: flex; flex-direction: column; /* Eyebrow pins to padding-top so the nav-to-text gap matches every other hero on the site (work, about, journal, home). The min-height reserves vertical room for the visual but doesn't push the text into the middle of the section. */ justify-content: flex-start; gap: clamp(18px, 2.4vw, 28px); border-bottom: 1px solid var(--border); position: relative; } /* Two-column hero variant — copy on the left, PXL pixel grid on the right. Used on /services. Detail pages keep the single-column hero above. On mobile the columns stack with the grid above the copy. */ .svc-hero--with-pxl { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); /* Both columns top-align so the eyebrow sits at the same nav-to-text distance as every other hero on the site. Each column then internally vertically centres its own children. */ align-items: start; } .svc-hero--with-pxl .svc-hero__main { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); } .svc-hero--with-pxl .svc-hero__pxl { display: flex; align-items: center; justify-content: center; /* Lift the grid into the optical centre of the text column rather than pinning it to the column top. */ padding-top: clamp(8px, 1.5vh, 24px); } @media (max-width: 768px) { /* Single column on mobile — pixel grid stacks ABOVE the copy and sits a little higher than the standard column-top so it hugs the nav. The grid is z-index-layered BEHIND the copy so where the rotating grid extends down into the headline area the text reads cleanly on top. Wider gap below the grid gives the subtitle/CTAs clear breathing room. */ .svc-hero--with-pxl { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 56px); position: relative; } .svc-hero--with-pxl .svc-hero__pxl { order: -1; justify-content: flex-start; padding-top: 0; margin-top: clamp(-24px, -2vh, -8px); position: relative; z-index: 0; } .svc-hero--with-pxl .svc-hero__main { position: relative; z-index: 1; } } .svc-hero__eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; } /* Light-hero variant — applied via .svc-hero--light on specific pages where a cream/off-white hero feels better than the default dark. */ .svc-hero--light { background: #F5F5F0; --border: #E3E0D3; --muted: #6a6250; } .svc-hero--light .svc-hero__title { color: #111111; } .svc-hero--light .svc-hero__title em { color: var(--svc-accent); } .svc-hero--light .svc-hero__sub { color: #444444; } .svc-hero--light .svc-hero__eye { color: #6a6250; } .svc-hero__eye .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--svc-accent); box-shadow: 0 0 0 3px var(--svc-accent-soft); } .svc-hero__title { font-family: var(--font-display); font-weight: var(--heading-weight); font-size: clamp(38px, 5.6vw, 108px); letter-spacing: -.035em; line-height: 1.03; max-width: 20ch; } .svc-hero__title em { font-style: italic; font-weight: 500; color: var(--svc-accent); } .svc-hero__sub { font-size: 17px; line-height: 1.55; color: #cfcfcf; max-width: 62ch; letter-spacing: var(--body-letter-spacing); } /* ---------- ASYMMETRIC PROSE SECTION ---------- */ .svc-section { padding: clamp(72px, 8vw, 120px) var(--pad-x); display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 96px); border-bottom: 1px solid var(--border); } .svc-section--wide { /* For sections that need full-width content below the header (e.g. tables, tiers) */ grid-template-columns: 1fr; gap: clamp(32px, 3vw, 48px); } .svc-section__head { position: sticky; top: 96px; align-self: start; } .svc-section--wide .svc-section__head { position: static; } .svc-section__eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .svc-section__title { font-family: var(--font-display); font-weight: var(--heading-weight); font-size: clamp(28px, 2.6vw + 1rem, 48px); letter-spacing: var(--heading-letter-spacing); line-height: 1.1; } .svc-section__title em { font-style: italic; font-weight: 500; color: var(--svc-accent); } .svc-section__body { font-size: clamp(16.5px, .3vw + 1rem, 19px); line-height: 1.65; color: #cfcfcf; max-width: 64ch; } .svc-section__body p + p { margin-top: 1em; } .svc-section__body strong { color: #fff; font-weight: 500; } @media (max-width: 820px) { .svc-section { grid-template-columns: 1fr; } .svc-section__head { position: static; } } /* ---------- PRICING TIERS ---------- Keep the homepage service-card feel but always 3-col, price fixed at the bottom. Accent chip top-right. */ .svc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 960px) { .svc-tiers { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .svc-tiers { grid-template-columns: 1fr; } } .svc-tier { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--border); border-radius: 4px; padding: 28px; background: linear-gradient(180deg, #141414, #111); display: flex; flex-direction: column; gap: 16px; min-height: 420px; transition: transform .3s var(--ease-out, ease), border-color .25s; } /* Internal radial glow on hover, matching homepage + overview cards */ .svc-tier::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--svc-accent-soft) 0%, transparent 65%); opacity: 0; transition: opacity 400ms ease; pointer-events: none; z-index: 0; } .svc-tier > * { position: relative; z-index: 1; } .svc-tier:hover { transform: translateY(-3px); border-color: var(--svc-accent); } .svc-tier:hover::before { opacity: 1; } .svc-tier__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .svc-tier__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .svc-tier__chip { width: 10px; height: 10px; border-radius: 50%; background: var(--svc-accent); box-shadow: 0 0 14px var(--svc-accent); margin-top: 4px; } .svc-tier__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 1.6vw + .5rem, 32px); letter-spacing: -.025em; line-height: 1.15; max-width: 14ch; margin-top: auto; } .svc-tier__body { color: #b8b8b8; font-size: 14.5px; line-height: 1.6; max-width: 36ch; } .svc-tier__list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; } .svc-tier__list li { font-size: 13.5px; line-height: 1.55; color: #cfcfcf; padding-left: 18px; position: relative; } .svc-tier__list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 8px; border-radius: 1px; background: var(--svc-accent); opacity: .7; } .svc-tier__footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .svc-tier__price { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -.01em; } .svc-tier__price small { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 11px; color: var(--muted); letter-spacing: .08em; margin-top: 2px; } .svc-tier__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: right; } /* ---------- STACK PILLS ---------- */ .svc-stack { display: flex; flex-wrap: wrap; gap: 8px; } .svc-stack span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #cfcfcf; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; } /* ---------- INCLUDED CHECKLIST ---------- */ .svc-included { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } @media (max-width: 640px) { .svc-included { grid-template-columns: 1fr; } } .svc-included li { position: relative; padding-left: 28px; color: #cfcfcf; font-size: 15px; line-height: 1.55; } .svc-included li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border: 1px solid var(--svc-accent); border-radius: 3px; background: var(--svc-accent-soft); } .svc-included li::after { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 4px; border-left: 1.5px solid var(--svc-accent); border-bottom: 1.5px solid var(--svc-accent); transform: rotate(-45deg); } /* ---------- COMPARISON TABLE ---------- */ .svc-compare { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #0f0f0f; } .svc-compare__table { width: 100%; border-collapse: collapse; table-layout: auto; } .svc-compare__table caption { caption-side: bottom; padding: 14px 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; border-top: 1px solid var(--border); background: #0a0a0a; } .svc-compare__table th, .svc-compare__table td { padding: 16px 18px; text-align: left; font-size: 13.5px; line-height: 1.5; border-bottom: 1px solid var(--border); vertical-align: top; } .svc-compare__table thead th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; background: var(--surface); white-space: nowrap; } .svc-compare__table thead th.is-pxl { color: #fff; background: var(--svc-accent); } /* svc-neutral override — when --svc-accent is #fff (Ongoing Support page) the PXL column header used to be white text on a white background and read as empty. Force ink text on a dark surface here so the column is always legible regardless of accent. */ body.svc-neutral .svc-compare__table thead th.is-pxl { color: #fff; background: #1a1a1a; } body.svc-neutral .svc-section--light .svc-compare__table thead th.is-pxl { color: #fff; background: #1a1a1a; } .svc-compare__table tbody th { font-family: var(--font-ui); font-weight: 500; font-size: 13.5px; color: #e7e7e7; background: #0d0d0d; white-space: nowrap; } .svc-compare__table tbody td { color: #bdbdbd; } .svc-compare__table tbody tr:nth-child(even) th, .svc-compare__table tbody tr:nth-child(even) td { background: #131313; } .svc-compare__table tbody tr:last-child th, .svc-compare__table tbody tr:last-child td { border-bottom: 0; } .svc-compare__table td.is-pxl, .svc-compare__table tbody tr:nth-child(even) td.is-pxl { background: var(--svc-accent-soft); color: #fff; font-weight: 500; } /* svc-neutral override — accent-soft is rgba(255,255,255,.08) which is barely visible behind white text on the dark page background, and essentially invisible on light. Switch to ink-on-cream so the column reads cleanly in both contexts. */ body.svc-neutral .svc-compare__table td.is-pxl, body.svc-neutral .svc-compare__table tbody tr:nth-child(even) td.is-pxl { background: rgba(255, 255, 255, .04); color: #ffffff; } body.svc-neutral .svc-section--light .svc-compare__table td.is-pxl, body.svc-neutral .svc-section--light .svc-compare__table tbody tr:nth-child(even) td.is-pxl { background: #F5F0DC; color: #111111; } /* Horizontal scroll if narrow */ .svc-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------------------------------------------------------- Mobile comparison — stacked cards. The full table is shown on tablet+ and hidden on mobile, where a parallel set of cards (one per option) is shown instead. Each card lists every criterion with its value. The PXL card uses the brand accent so it visually stands out. ---------------------------------------------------------- */ .svc-compare-cards { display: none; } .svc-compare-cards__caption { display: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 14px; } @media (max-width: 768px) { .svc-compare { background: transparent; border: 0; } .svc-compare__table { display: none; } .svc-compare-cards { display: grid; grid-template-columns: 1fr; gap: 12px; } .svc-compare-cards__caption { display: block; } } .svc-compare-card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .svc-compare-card__head { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.02em; color: var(--white); margin-bottom: 4px; } .svc-compare-card__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); align-items: baseline; } .svc-compare-card__row:first-of-type { border-top: 0; padding-top: 4px; } .svc-compare-card__lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .svc-compare-card__val { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.4; color: #d6d6d6; } /* PXL card — accent-tinted surface, accent border, white type. The accent is whichever service this page is set to (blue/red/cream/ white for neutral). For neutral we use ink-on-cream so it doesn't wash out on light surfaces. */ .svc-compare-card--pxl { background: var(--svc-accent-soft); border-color: var(--svc-accent); position: relative; } .svc-compare-card--pxl .svc-compare-card__head { color: #fff; } .svc-compare-card--pxl::before { content: "PXL"; position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--svc-accent); color: #fff; } body.svc-cream .svc-compare-card--pxl::before { color: var(--ink); } body.svc-neutral .svc-compare-card--pxl { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .35); } body.svc-neutral .svc-compare-card--pxl::before { background: #fff; color: var(--ink); } /* Light section overrides — when the comparison sits on a cream .svc-section--light, swap the surface + border colours. */ .svc-section--light .svc-compare-card { background: #ffffff; border-color: #E3E0D3; } .svc-section--light .svc-compare-card__head { color: var(--ink); } .svc-section--light .svc-compare-card__lbl { color: #6a6250; } .svc-section--light .svc-compare-card__val { color: #444; } .svc-section--light .svc-compare-card__row { border-top-color: #E3E0D3; } .svc-section--light .svc-compare-card--pxl { background: #fff; border-color: var(--svc-accent); box-shadow: 0 0 0 2px var(--svc-accent-soft); } .svc-section--light .svc-compare-cards__caption { color: #6a6250; } /* ---------- CONTRACTOR CALLOUT (UI/UX only) ---------- */ .svc-contractor { background: radial-gradient(60% 120% at 100% 0%, rgba(232, 69, 60, .10), transparent 60%), #0a0a0a; border: 1px solid var(--red); border-radius: 6px; padding: clamp(28px, 3.6vw, 48px); position: relative; } .svc-contractor__tag { position: absolute; top: -11px; left: 24px; background: var(--red); color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; } .svc-contractor h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2vw + .5rem, 36px); letter-spacing: -.025em; margin-bottom: 16px; max-width: 24ch; } .svc-contractor p { font-size: 16px; line-height: 1.65; color: #cfcfcf; max-width: 64ch; } .svc-contractor p + p { margin-top: 1em; } .svc-contractor__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } /* Photo variant — text left, portrait right. The portrait is square rather than the taller hero crop so the block balances when the body copy is short. */ .svc-contractor--with-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: clamp(28px, 4vw, 56px); align-items: center; } @media (max-width: 860px) { .svc-contractor--with-photo { grid-template-columns: 1fr; } } .svc-contractor__photo { position: relative; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.04), transparent 55%), #151515; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 12px); border: 1px solid rgba(232, 69, 60, .45); } .svc-contractor__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- PROCESS / HOW WE WORK ---------- */ .svc-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 4px; background: #0f0f0f; } @media (max-width: 960px) { .svc-process { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .svc-process { grid-template-columns: 1fr; } } .svc-step { padding: 22px 24px; border-right: 1px solid var(--border); } .svc-step:last-child { border-right: 0; } @media (max-width: 960px) { .svc-step { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .svc-step:nth-child(2n) { border-right: 0; } .svc-step:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 560px) { .svc-step { border-right: 0; border-bottom: 1px solid var(--border); } .svc-step:last-child { border-bottom: 0; } } .svc-step__num { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--muted); margin-bottom: 10px; } .svc-step__title { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -.01em; color: #fff; } /* ---------- FAQ ACCORDION ---------- */ .svc-faqs { border-top: 1px solid var(--border); max-width: 1100px; margin: 0 auto; } .svc-faq { border-bottom: 1px solid var(--border); } .svc-faq > summary { list-style: none; cursor: none; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, .7vw + .75rem, 24px); letter-spacing: -.015em; color: #fff; transition: color .2s; } .svc-faq > summary::-webkit-details-marker { display: none; } .svc-faq > summary:hover { color: var(--svc-accent); } .svc-faq__icon { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; position: relative; flex: 0 0 28px; transition: transform .3s, background .2s, border-color .2s, color .2s; } .svc-faq__icon::before, .svc-faq__icon::after { content: ""; position: absolute; background: currentColor; top: 50%; left: 50%; } .svc-faq__icon::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); } .svc-faq__icon::after { width: 1.5px; height: 10px; transform: translate(-50%, -50%); } .svc-faq[open] .svc-faq__icon { transform: rotate(45deg); background: var(--svc-accent); border-color: var(--svc-accent); color: #fff; } .svc-faq__answer { padding: 0 0 24px; font-family: var(--font-ui); font-weight: 300; font-size: 16.5px; line-height: 1.65; color: #cfcfcf; max-width: 70ch; } /* ---------- FEATURED WORK CAROUSEL ---------- Matches the /work grid card style, horizontal native scroll with snap — same flavour as .cs-related--native on case-study pages. */ .svc-featured { padding: clamp(72px, 9vw, 120px) 0; border-bottom: 1px solid var(--border); } .svc-featured__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 0 var(--pad-x); margin-bottom: clamp(28px, 3vw, 48px); flex-wrap: wrap; } .svc-featured__head h2 { font-family: var(--font-display); font-weight: var(--heading-weight); font-size: clamp(32px, 3.6vw + .5rem, 64px); letter-spacing: var(--heading-letter-spacing); line-height: 1.05; } .svc-featured__track { display: flex; gap: clamp(14px, 1.4vw, 20px); padding: 2px var(--pad-x) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .svc-featured__track::-webkit-scrollbar { height: 6px; } .svc-featured__track::-webkit-scrollbar-track { background: transparent; } .svc-featured__track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .svc-featured__track::-webkit-scrollbar-thumb:hover { background: #3a3a3a; } .svc-featured__track .pcard { flex: 0 0 clamp(280px, 24vw, 380px); scroll-snap-align: start; } .svc-featured__track .pcard .pcard__media { aspect-ratio: 4/3; } .svc-featured__track .pcard .pcard__body { padding: 14px 18px 18px; } .svc-featured__track .pcard .pcard__title { font-size: clamp(18px, .8vw + 1rem, 24px); } .svc-featured__track .pcard .pcard__desc { display: none; } /* ---------- CTA BAND OVERRIDES ---------- The CTA band uses the shared .cta-band component from work.css. Service pages add a secondary "Shoot your own pixels" button styled to read as a game trigger — subtle, monospace, cream edge. */ .cta-band__actions .btn-shoot { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 14px 18px; border-radius: 999px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); cursor: none; display: inline-flex; align-items: center; gap: 10px; transition: background .2s, border-color .2s, color .2s; } .cta-band__actions .btn-shoot:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } .cta-band__actions .btn-shoot .ast { display: inline-block; animation: pxl-reveal-spin 3.5s linear infinite; } /* ---------- /SERVICES OVERVIEW ---------- */ .services-overview { padding: clamp(56px, 8vw, 120px) var(--pad-x); display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 820px) { .services-overview { grid-template-columns: 1fr; } } .service-card-lg { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--border); border-radius: 6px; background: linear-gradient(180deg, #141414, #111); color: inherit; text-decoration: none; transition: transform .3s, border-color .25s; min-height: 360px; } .service-card-lg:hover { transform: translateY(-4px); border-color: var(--svc-accent-hover, var(--blue)); } .service-card-lg--blue { --svc-accent-hover: var(--blue); } .service-card-lg--red { --svc-accent-hover: var(--red); } .service-card-lg--cream { --svc-accent-hover: var(--cream); } .service-card-lg--neutral { --svc-accent-hover: #fff; } .service-card-lg__top { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .service-card-lg__icon { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--svc-accent-hover, #fff); } .service-card-lg__icon svg { width: 22px; height: 22px; } .service-card-lg--blue .service-card-lg__icon { border-color: rgba(91, 90, 255, .35); background: rgba(91, 90, 255, .06); } .service-card-lg--red .service-card-lg__icon { border-color: rgba(232, 69, 60, .35); background: rgba(232, 69, 60, .06); } .service-card-lg--cream .service-card-lg__icon { border-color: rgba(245, 240, 220, .30); background: rgba(245, 240, 220, .04); } .service-card-lg__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 2.2vw + .5rem, 40px); letter-spacing: -.025em; line-height: 1.1; margin-top: auto; } .service-card-lg__title em { font-style: italic; font-weight: 500; color: var(--svc-accent-hover); } .service-card-lg__desc { font-size: 15px; line-height: 1.6; color: #b8b8b8; max-width: 44ch; } .service-card-lg__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; } .service-card-lg__cta .arr { transition: transform .25s; } .service-card-lg:hover .service-card-lg__cta .arr { transform: translate(3px, -3px); } /* Soft radial gradient glow on hover — service accent at low opacity, glowing in from the centre. 400ms ease as specified. */ .service-card-lg { position: relative; overflow: hidden; isolation: isolate; } .service-card-lg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--card-glow, transparent) 0%, transparent 60%); opacity: 0; transition: opacity 400ms ease; pointer-events: none; z-index: 0; } .service-card-lg:hover::before { opacity: 1; } .service-card-lg > * { position: relative; z-index: 1; } .service-card-lg--blue { --card-glow: rgba(91, 90, 255, 0.15); } .service-card-lg--red { --card-glow: rgba(232, 69, 60, 0.15); } .service-card-lg--cream { --card-glow: rgba(245, 240, 220, 0.10); } .service-card-lg--neutral { --card-glow: rgba(136, 136, 136, 0.12); } /* ============================================================ LIGHT / DARK SECTION ALTERNATION Dark sections (#111) get a subtle dot texture at 3% opacity. Light sections use warm off-white #F5F5F0 with ink headings and #444 body copy. ============================================================ */ .svc-section--dark { background-color: var(--bg); background-image: radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 28px 28px; } .svc-section--light { background: #F5F5F0; color: #444444; --border: #E3E0D3; --muted: #6a6250; } /* Accessibility: cream is invisible on cream, and the neutral white accent washes out on the same warm off-white. Inside light sections of cream/neutral-accent services, promote the accent to ink. Blue and red already have enough contrast and stay on brand. */ body.svc-cream .svc-section--light, body.svc-neutral .svc-section--light { --svc-accent: #111111; --svc-accent-soft: rgba(0, 0, 0, .08); } .svc-section--light .svc-section__eye { color: #6a6250; } .svc-section--light .svc-section__title { color: #111111; } .svc-section--light .svc-section__title em { color: var(--svc-accent); } .svc-section--light .svc-section__body { color: #444444; } .svc-section--light .svc-section__body strong { color: #111111; } .svc-section--light .svc-section__body a { color: var(--svc-accent); } /* Pricing tiers on light bg */ .svc-section--light .svc-tier { background: #ffffff; border-color: #E3E0D3; color: #444444; } .svc-section--light .svc-tier:hover { border-color: var(--svc-accent); } .svc-section--light .svc-tier__num { color: #6a6250; } .svc-section--light .svc-tier__title { color: #111111; } .svc-section--light .svc-tier__body { color: #444444; } .svc-section--light .svc-tier__list li { color: #333333; } .svc-section--light .svc-tier__footer { border-top-color: #E3E0D3; } .svc-section--light .svc-tier__price { color: #111111; } .svc-section--light .svc-tier__meta { color: #6a6250; } /* Stack pills on light */ .svc-section--light .svc-stack span { color: #333333; border-color: #D9D3C2; background: #ffffff; } /* Included checklist on light */ .svc-section--light .svc-included li { color: #333333; } .svc-section--light .svc-included li::before { background: rgba(91, 90, 255, .08); } /* Comparison on light */ .svc-section--light .svc-compare { background: #ffffff; border-color: #E3E0D3; } .svc-section--light .svc-compare__table thead th { background: #EFECE0; color: #6a6250; } .svc-section--light .svc-compare__table tbody th { background: #F8F6EE; color: #111111; } .svc-section--light .svc-compare__table tbody td { color: #444444; } .svc-section--light .svc-compare__table tbody tr:nth-child(even) th, .svc-section--light .svc-compare__table tbody tr:nth-child(even) td { background: #FCFAF2; } .svc-section--light .svc-compare__table caption { background: #EFECE0; color: #6a6250; border-top-color: #E3E0D3; } /* Process on light */ .svc-section--light .svc-process { background: #ffffff; border-color: #E3E0D3; } .svc-section--light .svc-step { border-right-color: #E3E0D3; } .svc-section--light .svc-step__num { color: #6a6250; } .svc-section--light .svc-step__title { color: #111111; } /* FAQs on light */ .svc-section--light .svc-faqs { border-top-color: #E3E0D3; } .svc-section--light .svc-faq { border-bottom-color: #E3E0D3; } .svc-section--light .svc-faq > summary { color: #111111; } .svc-section--light .svc-faq__icon { border-color: #D9D3C2; } .svc-section--light .svc-faq__answer { color: #444444; } /* Featured title visible on dark even when dot grid is applied */ .svc-featured { background: var(--bg); } .svc-featured.is-dark-texture { background-image: radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; } /* ============================================================ HERO RIGHT-SIDE ANIMATION Hero becomes a two-column grid at desktop with the visual element on the right. Stacks under the text on mobile. ============================================================ */ .svc-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; } .svc-hero > .svc-hero__eye, .svc-hero > .svc-hero__title, .svc-hero > .svc-hero__sub { grid-column: 1; } .svc-hero__vis { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; width: 100%; max-width: 420px; /* was 520 — trimmed */ aspect-ratio: 5 / 4; position: relative; pointer-events: none; opacity: 0; transform: translateY(12px); animation: svc-vis-enter .8s cubic-bezier(.2,.8,.2,1) .25s forwards; } @keyframes svc-vis-enter { to { opacity: 1; transform: none; } } @media (max-width: 900px) { .svc-hero { grid-template-columns: 1fr; } .svc-hero__vis { grid-column: 1; grid-row: auto; justify-self: stretch; max-width: none; margin-top: 24px; aspect-ratio: 16/9; } } /* ============================================================ HERO VISUALS (per service) Ported from the PXL Design System (Claude Design bundle). Every visual has a light + dark variant driven by the surrounding .svc-section--light / .svc-section--dark class on the hero. Animations loop on 4–10s, ease-in-out. All SVG + CSS; no libraries. ============================================================ */ /* ────────────────────────────────────────────────────────── 1 · BROWSER (Websites / blue) Loading bar in URL, CTA pulses, cursor tours → clicks → toast slides in, feature cards bob in sequence. ────────────────────────────────────────────────────────── */ .svc-hero-vis--browser { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #ffffff; color: var(--ink); box-shadow: 0 18px 40px -22px rgba(91, 90, 255, .18), 0 0 0 1px rgba(0, 0, 0, .06); display: flex; flex-direction: column; } /* Dark variant — internal UI mirrors dark mode when the hero sits on a dark section */ .svc-section--dark .svc-hero-vis--browser { background: #0f0f0f; color: var(--fg-1, #d6d6d6); box-shadow: 0 18px 40px -22px rgba(91, 90, 255, .22), 0 0 0 1px rgba(255, 255, 255, .08); } /* Chrome bar */ .svc-hero-vis--browser .chrome { height: 30px; padding: 0 12px; gap: 5px; display: flex; align-items: center; background: #f3f1ec; border-bottom: 1px solid rgba(0, 0, 0, .08); } .svc-section--dark .svc-hero-vis--browser .chrome { background: #151515; border-bottom-color: rgba(255, 255, 255, .08); } .svc-hero-vis--browser .bub { width: 9px; height: 9px; border-radius: 50%; background: #d8d4c9; } .svc-hero-vis--browser .bub:nth-child(1) { background: #ff7369; } .svc-hero-vis--browser .bub:nth-child(2) { background: #ffc04e; } .svc-hero-vis--browser .bub:nth-child(3) { background: #7ad17f; } .svc-hero-vis--browser .url { flex: 1; height: 16px; margin-left: 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); font-family: var(--font-mono); font-size: 9px; color: #a8a08a; letter-spacing: .08em; display: flex; align-items: center; padding: 0 10px; position: relative; overflow: hidden; } .svc-section--dark .svc-hero-vis--browser .url { background: #1a1a1a; border-color: rgba(255, 255, 255, .1); color: #666; } .svc-hero-vis--browser .url::before { content: "pxldesign.agency"; } /* Loading bar sweeps across the URL every 5s */ .svc-hero-vis--browser .url::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue) 30%, var(--blue) 70%, transparent); animation: svc-url-load 5s ease-in-out infinite; } @keyframes svc-url-load { 0%, 6% { transform: translateX(-100%); opacity: 1; } 20% { transform: translateX(0); opacity: 1; } 35%, 100% { transform: translateX(100%); opacity: 0; } } /* Body */ .svc-hero-vis--browser .body { flex: 1; padding: 18px 22px; position: relative; display: flex; flex-direction: column; gap: 10px; } .svc-hero-vis--browser .page-hero { display: flex; flex-direction: column; gap: 8px; } .svc-hero-vis--browser .pill-eye { font-family: var(--font-mono); font-size: 8px; color: #8a8170; letter-spacing: .2em; text-transform: uppercase; } .svc-section--dark .svc-hero-vis--browser .pill-eye { color: #666; } .svc-hero-vis--browser .h { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.05; letter-spacing: -.022em; color: var(--ink); max-width: 16ch; margin: 2px 0 0; } .svc-section--dark .svc-hero-vis--browser .h { color: var(--fg-1, #fff); } .svc-hero-vis--browser .h em { font-style: italic; font-weight: 500; color: var(--blue); } .svc-hero-vis--browser .sub { height: 4px; width: 70%; margin-top: 4px; background: #ece7d9; border-radius: 2px; } .svc-section--dark .svc-hero-vis--browser .sub { background: #2a2a2a; } /* CTA buttons */ .svc-hero-vis--browser .btn-row { display: flex; gap: 8px; margin-top: 6px; } .svc-hero-vis--browser .btn-p, .svc-hero-vis--browser .btn-g { height: 24px; padding: 0 14px; border-radius: 999px; display: flex; align-items: center; font-family: var(--font-ui); font-weight: 500; font-size: 11px; } .svc-hero-vis--browser .btn-p { background: var(--blue); color: #fff; box-shadow: 0 0 0 0 rgba(91, 90, 255, .4); animation: svc-btn-pulse 5s ease-in-out infinite; } .svc-hero-vis--browser .btn-p::after { content: "→"; margin-left: 6px; } @keyframes svc-btn-pulse { 0%, 35%, 55%, 100% { box-shadow: 0 0 0 0 rgba(91, 90, 255, .4); transform: scale(1); } 42% { box-shadow: 0 0 0 8px rgba(91, 90, 255, 0); transform: scale(.95); } 46% { transform: scale(1); } } .svc-hero-vis--browser .btn-g { background: #fff; color: var(--ink); border: 1px solid rgba(0, 0, 0, .15); } .svc-section--dark .svc-hero-vis--browser .btn-g { background: #1a1a1a; color: var(--fg-1, #fff); border-color: rgba(255, 255, 255, .15); } /* 3-card feature grid — each card bobs in sequence */ .svc-hero-vis--browser .grid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .svc-hero-vis--browser .c { aspect-ratio: 4/3; border-radius: 3px; position: relative; overflow: hidden; background: linear-gradient(135deg, #f5f1e7, #ece7d9); animation: svc-card-hover 5s ease-in-out infinite; } .svc-section--dark .svc-hero-vis--browser .c { background: linear-gradient(135deg, #1a1a1a, #222); } .svc-hero-vis--browser .c:nth-child(1) { animation-delay: 0s; } .svc-hero-vis--browser .c:nth-child(2) { animation-delay: .3s; background: linear-gradient(135deg, rgba(91, 90, 255, .18), #ece7d9); } .svc-section--dark .svc-hero-vis--browser .c:nth-child(2) { background: linear-gradient(135deg, rgba(91, 90, 255, .4), #1a1a1a); } .svc-hero-vis--browser .c:nth-child(3) { animation-delay: .6s; } @keyframes svc-card-hover { 0%, 70%, 100% { transform: translateY(0); } 85% { transform: translateY(-3px); } } /* Scripted cursor tour: idle → over CTA → click → idle */ .svc-hero-vis--browser .svc-cursor { position: absolute; width: 16px; height: 20px; left: 55%; top: 80%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); animation: svc-cursor-tour 5s cubic-bezier(.4, 0, .2, 1) infinite; pointer-events: none; z-index: 2; } .svc-hero-vis--browser .svc-cursor svg { width: 100%; height: 100%; } @keyframes svc-cursor-tour { 0% { left: 55%; top: 78%; transform: scale(1); } 15% { left: 18%; top: 50%; transform: scale(1); } 35% { left: 18%; top: 50%; transform: scale(1); } /* hovering CTA */ 42% { transform: scale(.85); } /* click down */ 46% { transform: scale(1); } 70% { left: 70%; top: 85%; transform: scale(1); } 100% { left: 55%; top: 78%; } } /* Toast — slides in right after the cursor click, acknowledges the action */ .svc-hero-vis--browser .svc-toast { position: absolute; right: 14px; bottom: 14px; background: var(--ink); color: #fff; border-radius: 6px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 10px; font-weight: 500; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .3); transform: translateX(calc(100% + 20px)); opacity: 0; animation: svc-toast-in 5s ease-in-out infinite; z-index: 3; } .svc-hero-vis--browser .svc-toast .tick { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; } @keyframes svc-toast-in { 0%, 48% { transform: translateX(calc(100% + 20px)); opacity: 0; } 55% { transform: translateX(0); opacity: 1; } 85% { transform: translateX(0); opacity: 1; } 92%, 100% { transform: translateX(calc(100% + 20px)); opacity: 0; } } @keyframes svc-line-in { to { opacity: 1; transform: none; } } /* ────────────────────────────────────────────────────────── 2 · DESIGN-SYSTEM SAMPLER (UI/UX / red) Nine tiles, all live — type swap, swatch pop, ripple, toggle, shimmer, grid pan, tag morph, slider, typed input. ────────────────────────────────────────────────────────── */ .svc-hero-vis--grid { position: absolute; inset: 0; border: 1px solid var(--border); border-radius: 10px; background: #0f0f0f; padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; box-shadow: 0 18px 40px -22px rgba(232, 69, 60, .18); } .svc-section--light .svc-hero-vis--grid { background: #fbfaf4; border-color: #e3e0d3; } .svc-hero-vis--grid .cell { border: 1px solid var(--border); background: #151515; border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 10px; position: relative; overflow: hidden; } .svc-section--light .svc-hero-vis--grid .cell { background: #ffffff; border-color: #e3e0d3; } /* Aa — roman ↔ italic crossfade */ .svc-hero-vis--grid .cell--type { font-family: var(--font-display); font-weight: 600; font-size: 36px; letter-spacing: -.022em; color: #fff; } .svc-section--light .svc-hero-vis--grid .cell--type { color: var(--ink); } .svc-hero-vis--grid .cell--type .t1, .svc-hero-vis--grid .cell--type .t2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .svc-hero-vis--grid .cell--type .t1 { animation: svc-type-swap 4s ease-in-out infinite; } .svc-hero-vis--grid .cell--type .t2 { font-style: italic; font-weight: 500; color: var(--red); animation: svc-type-swap 4s ease-in-out infinite -2s; } @keyframes svc-type-swap { 0%, 45%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50%, 95% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } } /* Swatches — pop in staggered, on a loop */ .svc-hero-vis--grid .cell--swatches { gap: 7px; display: flex; } .svc-hero-vis--grid .sw { width: 14px; height: 14px; border-radius: 50%; transform: scale(0); animation: svc-sw-pop 4s ease-in-out infinite; } .svc-hero-vis--grid .sw-1 { background: var(--blue); animation-delay: 0s; } .svc-hero-vis--grid .sw-2 { background: var(--red); animation-delay: .15s; } .svc-hero-vis--grid .sw-3 { background: var(--cream); border: 1px solid rgba(0,0,0,.15); animation-delay: .3s; } .svc-hero-vis--grid .sw-4 { background: #2a2a2a; border: 1px solid var(--border); animation-delay: .45s; } .svc-section--light .svc-hero-vis--grid .sw-4 { background: var(--ink); border: 0; } @keyframes svc-sw-pop { 0% { transform: scale(0); } 15% { transform: scale(1.25); } 25%, 80% { transform: scale(1); } 92%, 100% { transform: scale(0); } } /* Button — ripple */ .svc-hero-vis--grid .cell--button .btn-fake { background: var(--red); color: #fff; border-radius: 999px; padding: 6px 14px; font-family: var(--font-ui); font-weight: 500; font-size: 11px; position: relative; overflow: hidden; } .svc-hero-vis--grid .cell--button .btn-fake::after { content: ""; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; background: rgba(255, 255, 255, .3); border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: svc-ripple 3s ease-out infinite; } @keyframes svc-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: .8; } 60%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* Toggle — flips on + colour swaps */ .svc-hero-vis--grid .cell--toggle .toggle { width: 38px; height: 20px; border-radius: 999px; background: #333; position: relative; animation: svc-tg-bg 4s ease-in-out infinite; } .svc-section--light .svc-hero-vis--grid .cell--toggle .toggle { background: #ccc; } .svc-hero-vis--grid .cell--toggle .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); animation: svc-tg-knob 4s ease-in-out infinite; } @keyframes svc-tg-bg { 0%, 45% { background: #333; } 50%, 95% { background: var(--red); } } .svc-section--light .svc-hero-vis--grid .cell--toggle .toggle { animation-name: svc-tg-bg-light; } @keyframes svc-tg-bg-light { 0%, 45% { background: #ddd; } 50%, 95% { background: var(--red); } } @keyframes svc-tg-knob { 0%, 45% { left: 2px; } 50%, 95% { left: 20px; } } /* Lines — shimmer */ .svc-hero-vis--grid .cell--lines { flex-direction: column; gap: 5px; align-items: stretch; justify-content: center; padding: 14px; } .svc-hero-vis--grid .mini { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .15); position: relative; overflow: hidden; } .svc-section--light .svc-hero-vis--grid .mini { background: rgba(0, 0, 0, .08); } .svc-hero-vis--grid .mini:nth-child(1) { width: 80%; } .svc-hero-vis--grid .mini:nth-child(2) { width: 60%; } .svc-hero-vis--grid .mini:nth-child(3) { width: 40%; background: rgba(232, 69, 60, .45); } .svc-hero-vis--grid .mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(232, 69, 60, .6), transparent); transform: translateX(-100%); animation: svc-shimmer 3s ease-in-out infinite; } .svc-hero-vis--grid .mini:nth-child(2)::after { animation-delay: .2s; } .svc-hero-vis--grid .mini:nth-child(3)::after { animation-delay: .4s; } @keyframes svc-shimmer { 0%, 30% { transform: translateX(-100%); } 70%, 100% { transform: translateX(120%); } } /* Grid — pan */ .svc-hero-vis--grid .cell--grid { padding: 0; overflow: hidden; } .svc-hero-vis--grid .cell--grid .g { width: 140%; height: 140%; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 12px 12px; opacity: .7; animation: svc-grid-pan 6s linear infinite; } .svc-section--light .svc-hero-vis--grid .cell--grid .g { background-image: linear-gradient(#e3e0d3 1px, transparent 1px), linear-gradient(90deg, #e3e0d3 1px, transparent 1px); } @keyframes svc-grid-pan { 0% { transform: translate(0, 0); } 100% { transform: translate(-12px, -12px); } } /* Tag — morphs text (Primary ↔ Default) */ .svc-hero-vis--grid .cell--tag .pill-fake { font-family: var(--font-mono); font-size: 9px; color: #fff; border: 1px solid var(--red); border-radius: 999px; padding: 5px 10px; background: rgba(232, 69, 60, .1); letter-spacing: .1em; text-transform: uppercase; position: relative; min-width: 70px; text-align: center; } .svc-section--light .svc-hero-vis--grid .cell--tag .pill-fake { color: var(--ink); } .svc-hero-vis--grid .cell--tag .pill-fake .l1, .svc-hero-vis--grid .cell--tag .pill-fake .l2 { display: block; } .svc-hero-vis--grid .cell--tag .pill-fake .l1 { animation: svc-tag-swap 4s ease-in-out infinite; } .svc-hero-vis--grid .cell--tag .pill-fake .l2 { position: absolute; inset: 5px 10px; animation: svc-tag-swap 4s ease-in-out infinite -2s; } @keyframes svc-tag-swap { 0%, 45%, 100% { opacity: 1; } 50%, 95% { opacity: 0; } } /* Slider — thumb travels, track fills */ .svc-hero-vis--grid .cell--slider .track { width: 75%; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); position: relative; } .svc-section--light .svc-hero-vis--grid .cell--slider .track { background: rgba(0, 0, 0, .08); } .svc-hero-vis--grid .cell--slider .track::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; background: var(--red); border-radius: 2px; animation: svc-slide-fill 4s ease-in-out infinite; } .svc-hero-vis--grid .cell--slider .thumb { position: absolute; top: 50%; left: 20%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); animation: svc-slider 4s ease-in-out infinite; } @keyframes svc-slider { 0%, 100% { left: 20%; } 50% { left: 80%; } } @keyframes svc-slide-fill { 0%, 100% { width: 20%; } 50% { width: 80%; } } /* Input — caret + typed text */ .svc-hero-vis--grid .cell--input { justify-content: flex-start; padding: 0 10px; gap: 2px; border-color: var(--red); box-shadow: inset 0 0 0 1px rgba(232, 69, 60, .3); } .svc-hero-vis--grid .cell--input .typed { font-family: var(--font-mono); font-size: 10px; color: #fff; overflow: hidden; white-space: nowrap; animation: svc-type-in 4s steps(14, end) infinite; width: 0; } .svc-section--light .svc-hero-vis--grid .cell--input .typed { color: var(--ink); } .svc-hero-vis--grid .cell--input .caret { width: 1.5px; height: 12px; background: var(--red); animation: svc-caret 1s steps(2) infinite; } @keyframes svc-caret { 50% { opacity: 0; } } @keyframes svc-type-in { 0%, 10% { width: 0; } 50%, 80% { width: 7ch; } 90%, 100% { width: 0; } } /* Remove the old generic cell-in stagger — cells now animate themselves */ /* ────────────────────────────────────────────────────────── 3 · TERMINAL (AI Product / cream) Code types out line-by-line, AI badge glows + spins. ────────────────────────────────────────────────────────── */ .svc-hero-vis--terminal { position: absolute; inset: 0; border: 1px solid var(--border); border-radius: 10px; background: #0d0d0d; color: #d6d6d6; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 40px -22px rgba(245, 240, 220, .14); } .svc-section--light .svc-hero-vis--terminal { background: #1a1a1a; /* terminal is always dark-chrome */ box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .25); } .svc-hero-vis--terminal .bar { height: 34px; padding: 0 14px; gap: 5px; display: flex; align-items: center; background: #151515; border-bottom: 1px solid var(--border); position: relative; } .svc-hero-vis--terminal .bar .bub { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; } .svc-hero-vis--terminal .bar .bub:nth-child(1) { background: #ff7369; } .svc-hero-vis--terminal .bar .bub:nth-child(2) { background: #ffc04e; } .svc-hero-vis--terminal .bar .bub:nth-child(3) { background: #7ad17f; } .svc-hero-vis--terminal .bar .file { margin: 0 auto; padding-right: 60px; font-family: var(--font-mono); font-size: 11px; color: #b8b8b8; letter-spacing: .05em; } .svc-hero-vis--terminal .bar .ai-badge { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; color: var(--cream); border: 1px solid rgba(245, 240, 220, .4); padding: 4px 10px; border-radius: 999px; background: rgba(245, 240, 220, .05); box-shadow: 0 0 0 0 rgba(245, 240, 220, .3); animation: svc-ai-glow 3s ease-in-out infinite; } .svc-hero-vis--terminal .bar .ai-badge svg { width: 11px; height: 11px; animation: svc-ai-spin 6s linear infinite; } @keyframes svc-ai-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 240, 220, .3); } 50% { box-shadow: 0 0 0 6px rgba(245, 240, 220, 0); } } @keyframes svc-ai-spin { 0%, 80% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .svc-hero-vis--terminal pre { margin: 0; padding: 16px 20px 0; flex: 1; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75; color: #d6d6d6; overflow: hidden; } /* Each line types out character-by-character, staggered. 8s loop. */ .svc-hero-vis--terminal .ln { display: block; white-space: nowrap; overflow: hidden; width: 0; animation: svc-typeline 8s steps(30, end) infinite; } .svc-hero-vis--terminal .ln:nth-child(1) { animation-delay: 0.1s; } .svc-hero-vis--terminal .ln:nth-child(2) { animation-delay: 0.7s; } .svc-hero-vis--terminal .ln:nth-child(3) { animation-delay: 1.3s; } .svc-hero-vis--terminal .ln:nth-child(4) { animation-delay: 1.9s; } .svc-hero-vis--terminal .ln:nth-child(5) { animation-delay: 2.5s; } .svc-hero-vis--terminal .ln:nth-child(6) { animation-delay: 3.1s; } @keyframes svc-typeline { 0% { width: 0; } 8%, 80% { width: 100%; } 90%, 100% { width: 0; } } .svc-hero-vis--terminal .mut { color: #666; font-style: italic; } .svc-hero-vis--terminal .kw { color: var(--cream); } .svc-hero-vis--terminal .fn { color: #ffc04e; } .svc-hero-vis--terminal .str { color: #7ad17f; } .svc-hero-vis--terminal .caret { display: inline-block; width: 7px; height: 12px; background: var(--cream); margin-left: 2px; vertical-align: middle; animation: svc-caret 1s steps(2) infinite; } @keyframes svc-blink { 50% { opacity: 0; } } /* ────────────────────────────────────────────────────────── 4 · DASHBOARD (Ongoing Support / neutral) Ticking uptime + response counters, redrawing line with gradient fill, waypoint ticks, green pulse on best reading. ────────────────────────────────────────────────────────── */ .svc-hero-vis--dash { position: absolute; inset: 0; border: 1px solid var(--border); border-radius: 10px; background: #151515; padding: 18px 22px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; gap: 14px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .4); } .svc-section--light .svc-hero-vis--dash { background: #ffffff; border-color: #e3e0d3; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .15); } .svc-hero-vis--dash .head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .svc-section--light .svc-hero-vis--dash .head { border-bottom-color: #e6e0cb; } .svc-hero-vis--dash .head > span:first-child { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--muted); } .svc-section--light .svc-hero-vis--dash .head > span:first-child { color: #6a6250; } .svc-hero-vis--dash .head .live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; color: #7CE17C; text-transform: uppercase; } .svc-hero-vis--dash .head .dot { width: 8px; height: 8px; border-radius: 50%; background: #7CE17C; box-shadow: 0 0 12px #7CE17C; animation: svc-pulse-strong 1.4s ease-in-out infinite; } @keyframes svc-pulse-strong { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 225, 124, .6); } 50% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(124, 225, 124, 0); } } .svc-hero-vis--dash .metric { display: flex; flex-direction: column; gap: 6px; } .svc-hero-vis--dash .metric .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .svc-section--light .svc-hero-vis--dash .metric .lbl { color: #6a6250; } .svc-hero-vis--dash .metric .val { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -.02em; color: #ffffff; line-height: 1; display: inline-flex; align-items: baseline; gap: 0; } .svc-section--light .svc-hero-vis--dash .metric .val { color: var(--ink); } .svc-hero-vis--dash .metric .val small { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 2px; } .svc-section--light .svc-hero-vis--dash .metric .val small { color: #6a6250; } /* Ticking counters — each value is stacked, cycling 0→25% of a 4s loop */ .svc-hero-vis--dash .up-num, .svc-hero-vis--dash .rs-num { position: relative; display: inline-block; line-height: 1; font-variant-numeric: tabular-nums; } .svc-hero-vis--dash .up-num { min-width: 4.5ch; } .svc-hero-vis--dash .rs-num { min-width: 1.6ch; text-align: right; } .svc-hero-vis--dash .up-num .uv, .svc-hero-vis--dash .rs-num .rv { position: absolute; right: 0; top: 0; opacity: 0; } .svc-hero-vis--dash .up-num .uv:first-child, .svc-hero-vis--dash .rs-num .rv:first-child { position: relative; } .svc-hero-vis--dash .uv-1 { animation: svc-num-step 4s steps(1) infinite; animation-delay: 0s; } .svc-hero-vis--dash .uv-2 { animation: svc-num-step 4s steps(1) infinite; animation-delay: -3s; } .svc-hero-vis--dash .uv-3 { animation: svc-num-step 4s steps(1) infinite; animation-delay: -2s; } .svc-hero-vis--dash .uv-4 { animation: svc-num-step 4s steps(1) infinite, svc-num-pulse 4s ease-out infinite; animation-delay: -1s, -1s; } .svc-hero-vis--dash .rv-1 { animation: svc-num-step 4s steps(1) infinite; animation-delay: 0s; } .svc-hero-vis--dash .rv-2 { animation: svc-num-step 4s steps(1) infinite; animation-delay: -3s; } .svc-hero-vis--dash .rv-3 { animation: svc-num-step 4s steps(1) infinite; animation-delay: -2s; } .svc-hero-vis--dash .rv-4 { animation: svc-num-step 4s steps(1) infinite; animation-delay: -1s; } @keyframes svc-num-step { 0%, 25% { opacity: 1; } 25.01%, 100% { opacity: 0; } } @keyframes svc-num-pulse { 0%, 25% { color: #ffffff; } 5% { color: #7CE17C; text-shadow: 0 0 8px rgba(124, 225, 124, .6); } 25.01%, 100% { color: #ffffff; text-shadow: none; } } .svc-section--light .svc-hero-vis--dash .uv-1, .svc-section--light .svc-hero-vis--dash .uv-2, .svc-section--light .svc-hero-vis--dash .uv-3, .svc-section--light .svc-hero-vis--dash .rv-1, .svc-section--light .svc-hero-vis--dash .rv-2, .svc-section--light .svc-hero-vis--dash .rv-3, .svc-section--light .svc-hero-vis--dash .rv-4 { color: var(--ink); } .svc-section--light .svc-hero-vis--dash .uv-4 { animation-name: svc-num-step, svc-num-pulse-light; } @keyframes svc-num-pulse-light { 0%, 25% { color: var(--ink); } 5% { color: #2b8a2b; text-shadow: 0 0 8px rgba(124, 225, 124, .5); } 25.01%, 100% { color: var(--ink); text-shadow: none; } } /* Graph — line redraws with gradient fill + waypoint ticks */ .svc-hero-vis--dash .graph { grid-column: 1 / -1; height: 56px; position: relative; } .svc-hero-vis--dash .graph svg { width: 100%; height: 100%; overflow: visible; } .svc-hero-vis--dash .graph .line { fill: none; stroke: #7CE17C; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: svc-graph-draw 4s ease-out infinite; filter: drop-shadow(0 0 6px rgba(124, 225, 124, .5)); } @keyframes svc-graph-draw { 0% { stroke-dashoffset: 400; } 50%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -400; } } .svc-hero-vis--dash .graph .fill { fill: url(#svc-graph-gradient); stroke: none; opacity: 0; animation: svc-graph-fill 4s ease-out infinite; } @keyframes svc-graph-fill { 0%, 30% { opacity: 0; } 55%, 85% { opacity: .5; } 100% { opacity: 0; } } .svc-hero-vis--dash .graph .tick { fill: #7CE17C; opacity: 0; filter: drop-shadow(0 0 4px #7CE17C); animation: svc-tick-appear 4s ease-out infinite; } .svc-hero-vis--dash .graph .tick:nth-of-type(1) { animation-delay: 1.2s; } .svc-hero-vis--dash .graph .tick:nth-of-type(2) { animation-delay: 1.7s; } .svc-hero-vis--dash .graph .tick:nth-of-type(3) { animation-delay: 2.2s; } .svc-hero-vis--dash .graph .tick:nth-of-type(4) { animation-delay: 2.7s; } @keyframes svc-tick-appear { 0%, 10% { opacity: 0; r: 2; } 30% { opacity: 1; r: 4; } 60%, 85% { opacity: 1; r: 3; } 100% { opacity: 0; r: 2; } } /* Respect reduced motion on every visual */ @media (prefers-reduced-motion: reduce) { .svc-hero-vis--browser .svc-cursor, .svc-hero-vis--browser .svc-toast, .svc-hero-vis--browser .btn-p, .svc-hero-vis--browser .url::after, .svc-hero-vis--browser .c, .svc-hero-vis--grid .cell--type .t1, .svc-hero-vis--grid .cell--type .t2, .svc-hero-vis--grid .sw, .svc-hero-vis--grid .cell--button .btn-fake::after, .svc-hero-vis--grid .cell--toggle .toggle, .svc-hero-vis--grid .cell--toggle .knob, .svc-hero-vis--grid .mini::after, .svc-hero-vis--grid .cell--grid .g, .svc-hero-vis--grid .cell--tag .pill-fake .l1, .svc-hero-vis--grid .cell--tag .pill-fake .l2, .svc-hero-vis--grid .cell--slider .track::before, .svc-hero-vis--grid .cell--slider .thumb, .svc-hero-vis--grid .cell--input .typed, .svc-hero-vis--grid .cell--input .caret, .svc-hero-vis--terminal .bar .ai-badge, .svc-hero-vis--terminal .bar .ai-badge svg, .svc-hero-vis--terminal .ln, .svc-hero-vis--terminal .caret, .svc-hero-vis--dash .head .dot, .svc-hero-vis--dash .up-num .uv, .svc-hero-vis--dash .rs-num .rv, .svc-hero-vis--dash .graph .line, .svc-hero-vis--dash .graph .fill, .svc-hero-vis--dash .graph .tick { animation: none !important; } } /* ============================================================ SECTION-LEVEL MOCKUP VISUAL (right side of prose / split / tiers section). Reuses the same hero-vis markup. ============================================================ */ .svc-section__body--has-vis { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 48px); } .svc-section-vis { position: relative; width: 100%; aspect-ratio: 16 / 10; max-width: 560px; } /* ============================================================ PROCESS STEPS — bigger icon tile, numbered label, title, and a one-line description per step. ============================================================ */ .svc-step { padding: 28px 24px; position: relative; display: flex; flex-direction: column; gap: 10px; } .svc-step__icon { width: 48px; height: 48px; border-radius: 10px; background: var(--svc-accent-soft); border: 1px solid var(--svc-accent); color: var(--svc-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; } .svc-step__icon svg { width: 26px; height: 26px; } .svc-section--light .svc-step__icon { background: var(--svc-accent-soft); border-color: var(--svc-accent); color: var(--svc-accent); } .svc-step__desc { font-family: var(--font-ui); font-weight: 300; font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; max-width: 28ch; } .svc-section--light .svc-step__desc { color: #5a5a5a; } /* Entrance animation as each step scrolls in */ .svc-step { opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .6s; transition-timing-function: cubic-bezier(.2,.8,.2,1); } .svc-step.is-visible { opacity: 1; transform: none; } /* ============================================================ ACCESSIBILITY ICON — appears beside the WCAG callout ============================================================ */ .svc-access { display: flex; align-items: flex-start; gap: 18px; padding: 22px; border: 1px solid var(--border); border-radius: 6px; margin-top: 24px; background: rgba(255, 255, 255, 0.02); } .svc-section--light .svc-access { background: #ffffff; } .svc-access__icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; border: 1px solid var(--border); background: rgba(91, 90, 255, .08); color: var(--svc-accent); display: inline-flex; align-items: center; justify-content: center; } .svc-access__icon svg { width: 22px; height: 22px; } .svc-access__body { color: inherit; } /* ============================================================ FEATURED WORK → PINNED HORIZONTAL SCROLL Same technique as .cs-related on case-study pages. ============================================================ */ .svc-featured--pinned { padding: 0; } .svc-featured__stage { position: relative; } .svc-featured__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(64px, 8vw, 120px) 0 clamp(64px, 8vw, 120px) var(--pad-x); box-sizing: border-box; overflow: hidden; } .svc-featured--pinned .svc-featured__head { padding: 0 var(--pad-x) clamp(28px, 3vw, 48px) 0; margin: 0; } .svc-featured--pinned .svc-featured__frame { flex: 0 0 auto; overflow: visible; } .svc-featured--pinned .svc-featured__track { overflow: visible; padding: 2px var(--pad-x) 2px 0; will-change: transform; scroll-snap-type: none; gap: clamp(16px, 1.6vw, 28px); } .svc-featured--pinned .svc-featured__track .pcard { flex: 0 0 clamp(300px, 26vw, 400px); scroll-snap-align: none; } /* Trailing "See all work" CTA card — sits at the end of the carousel so the final slide is a clear signpost to the full work index. */ .pcard--cta { background: linear-gradient(180deg, rgba(91,90,255,.04), #111); border: 1px solid var(--border); transition: border-color .25s, transform .3s; } .pcard--cta:hover { border-color: var(--svc-accent); transform: translateY(-3px); } .pcard--cta__media { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: radial-gradient(60% 80% at 50% 50%, var(--svc-accent-soft), transparent 70%), #0f0f0f; } .pcard--cta__arrow { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 5vw, 88px); color: var(--svc-accent); line-height: 1; transition: transform .35s cubic-bezier(.2,.8,.2,1); } .pcard--cta:hover .pcard--cta__arrow { transform: translate(6px, -6px); } .svc-featured--native .svc-featured__stage { height: auto !important; } .svc-featured--native .svc-featured__sticky { position: static; height: auto; padding: clamp(64px, 8vw, 120px) 0 clamp(64px, 8vw, 120px) var(--pad-x); } .svc-featured--native .svc-featured__frame { margin-right: calc(var(--pad-x) * -1); overflow-x: auto; scroll-snap-type: x mandatory; } .svc-featured--native .svc-featured__track { transform: none !important; padding-right: var(--pad-x); } @media (max-width: 820px) { .svc-featured--pinned .svc-featured__stage { height: auto !important; } .svc-featured--pinned .svc-featured__sticky { position: static; height: auto; padding: clamp(56px, 8vw, 96px) 0 clamp(56px, 8vw, 96px) var(--pad-x); } .svc-featured--pinned .svc-featured__frame { margin-right: calc(var(--pad-x) * -1); overflow-x: auto; scroll-snap-type: x mandatory; } .svc-featured--pinned .svc-featured__track { transform: none !important; padding-right: var(--pad-x); } .svc-featured--pinned .svc-featured__track .pcard { scroll-snap-align: start; flex-basis: 280px; } } /* Subhead + lede helpers used by the SEO + AI-unlocks sections */ .svc-section__lede { margin-top: 10px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(18px, 1vw + .5rem, 22px); line-height: 1.35; color: var(--svc-accent); } .svc-section--light .svc-section__lede { color: var(--svc-accent); } .svc-section__subhead { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -.02em; margin: 32px 0 14px; color: #fff; } .svc-section--light .svc-section__subhead { color: #111; } /* ============================================================ SEO SECTION — RANK TRACKER CHART (replaces the SERP list) A line chart: Y-axis = Google rank (#1 top → #10 bottom), X-axis = weeks. PXL's blue line draws from rank 9 up to rank 1 over 6 waypoints; competitor lines stay muted and flat. Big rank readout in the header cycles 9 → 7 → 5 → 3 → 2 → 1. ============================================================ */ .svc-seo-vis { width: 100%; max-width: 520px; aspect-ratio: 16 / 10; position: relative; margin: 0 0 clamp(24px, 3vw, 40px); } .svc-seo-vis .serp-frame { position: absolute; inset: 0; border-radius: 10px; background: #ffffff; color: var(--ink); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .08); } .svc-section--dark .svc-seo-vis .serp-frame { background: #0f0f0f; color: var(--fg-1, #d6d6d6); box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); } /* Header strip — query + big rank readout */ .svc-seo-vis .rt-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; border-bottom: 1px solid rgba(0, 0, 0, .06); } .svc-section--dark .svc-seo-vis .rt-head { border-bottom-color: rgba(255, 255, 255, .06); } .svc-seo-vis .rt-head .lbl { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: #8a8170; } .svc-section--dark .svc-seo-vis .rt-head .lbl { color: #777; } .svc-seo-vis .rt-head .query { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 6px; } .svc-section--dark .svc-seo-vis .rt-head .query { color: var(--fg-1, #fff); } .svc-seo-vis .rt-head .query svg { width: 10px; height: 10px; opacity: .5; } /* Big rank readout — cycles 9 → 1 over 8s */ .svc-seo-vis .rt-rank { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--blue); display: flex; align-items: baseline; gap: 4px; } .svc-seo-vis .rt-rank .hash { font-family: var(--font-mono); font-size: 14px; opacity: .6; font-weight: 400; } .svc-seo-vis .rt-rank .n { position: relative; display: inline-block; width: 24px; height: 34px; text-align: right; } .svc-seo-vis .rt-rank .n .d { position: absolute; right: 0; top: 0; opacity: 0; } .svc-seo-vis .rt-rank .n .d-9 { animation: svc-rank-show 8s linear infinite; animation-delay: 0s; } .svc-seo-vis .rt-rank .n .d-7 { animation: svc-rank-show 8s linear infinite; animation-delay: -7s; } .svc-seo-vis .rt-rank .n .d-5 { animation: svc-rank-show 8s linear infinite; animation-delay: -6s; } .svc-seo-vis .rt-rank .n .d-3 { animation: svc-rank-show 8s linear infinite; animation-delay: -5s; } .svc-seo-vis .rt-rank .n .d-2 { animation: svc-rank-show 8s linear infinite; animation-delay: -4s; } .svc-seo-vis .rt-rank .n .d-1 { animation: svc-rank-show 8s linear infinite; animation-delay: -3s; } @keyframes svc-rank-show { 0%, 12.5% { opacity: 1; } 12.51%, 100% { opacity: 0; } } /* Chart body — SVG fills the remaining space */ .svc-seo-vis .rt-chart { flex: 1; position: relative; padding: 12px 14px 16px; min-height: 0; } .svc-seo-vis .rt-chart svg { width: 100%; height: 100%; overflow: visible; display: block; } /* Axis + grid */ .svc-seo-vis .rt-chart .grid-line { stroke: rgba(0, 0, 0, .06); stroke-width: 1; } .svc-section--dark .svc-seo-vis .rt-chart .grid-line { stroke: rgba(255, 255, 255, .06); } .svc-seo-vis .rt-chart .axis-lbl { font-family: var(--font-mono); font-size: 7px; fill: #a8a08a; letter-spacing: .08em; } .svc-section--dark .svc-seo-vis .rt-chart .axis-lbl { fill: #666; } /* Competitor lines — flat mid-pack, muted */ .svc-seo-vis .rt-chart .comp-line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke: #bfb49a; opacity: .5; } .svc-section--dark .svc-seo-vis .rt-chart .comp-line { stroke: #555; opacity: .55; } .svc-seo-vis .rt-chart .comp-line.c2 { stroke-dasharray: 3 3; } /* PXL line — the hero; draws 8s, holds, exits */ .svc-seo-vis .rt-chart .pxl-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: svc-rt-draw 8s cubic-bezier(.5, 0, .3, 1) infinite; filter: drop-shadow(0 0 6px rgba(91, 90, 255, .4)); } @keyframes svc-rt-draw { 0% { stroke-dashoffset: 320; } 70%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -320; } } /* Gradient fill underneath */ .svc-seo-vis .rt-chart .pxl-fill { fill: url(#svc-rt-gradient); stroke: none; opacity: 0; animation: svc-rt-fill 8s ease-out infinite; } @keyframes svc-rt-fill { 0%, 20% { opacity: 0; } 60%, 92% { opacity: .35; } 100% { opacity: 0; } } /* Waypoints pop progressively */ .svc-seo-vis .rt-chart .wp { fill: var(--blue); opacity: 0; r: 2; filter: drop-shadow(0 0 3px var(--blue)); } .svc-seo-vis .rt-chart .wp-1 { animation: svc-wp-pop 8s ease-out infinite; animation-delay: .6s; } .svc-seo-vis .rt-chart .wp-2 { animation: svc-wp-pop 8s ease-out infinite; animation-delay: 1.4s; } .svc-seo-vis .rt-chart .wp-3 { animation: svc-wp-pop 8s ease-out infinite; animation-delay: 2.2s; } .svc-seo-vis .rt-chart .wp-4 { animation: svc-wp-pop 8s ease-out infinite; animation-delay: 3.0s; } .svc-seo-vis .rt-chart .wp-5 { animation: svc-wp-pop 8s ease-out infinite; animation-delay: 3.8s; } @keyframes svc-wp-pop { 0%, 5% { opacity: 0; r: 1; } 10% { opacity: 1; r: 4; } 25%, 88% { opacity: 1; r: 2.5; } 95%, 100% { opacity: 0; r: 1; } } /* Final #1 beacon at the pole position */ .svc-seo-vis .rt-chart .beacon { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0; animation: svc-rt-beacon 8s ease-out infinite; } @keyframes svc-rt-beacon { 0%, 72% { opacity: 0; r: 3; } 78% { opacity: .8; r: 6; } 92% { opacity: 0; r: 14; } 100% { opacity: 0; r: 14; } } /* PXL callout */ .svc-seo-vis .rt-chart .callout { font-family: var(--font-ui); font-size: 8px; font-weight: 600; fill: var(--blue); letter-spacing: -.005em; } @media (prefers-reduced-motion: reduce) { .svc-seo-vis .rt-rank .n .d, .svc-seo-vis .rt-chart .pxl-line, .svc-seo-vis .rt-chart .pxl-fill, .svc-seo-vis .rt-chart .wp, .svc-seo-vis .rt-chart .beacon { animation: none !important; } /* Snapshot state: show PXL at rank 1 with all waypoints lit */ .svc-seo-vis .rt-rank .n .d-1 { opacity: 1 !important; } .svc-seo-vis .rt-chart .pxl-line { stroke-dashoffset: 0 !important; } .svc-seo-vis .rt-chart .wp { opacity: 1 !important; r: 2.5 !important; } } /* ============================================================ AI UNLOCKS — Wire → Design → Live morph Three stages in a row. A blue spotlight walks across them every 6s, ringing each stage and lifting it a touch. In the Design and Live stages an AI star flashes in, marking the AI-assisted leap. The Live stage has a shimmer across its hero block. ============================================================ */ .svc-morph { position: relative; margin: 0 0 clamp(28px, 3vw, 40px); aspect-ratio: 16 / 10; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg, #0f0f0f, #141414); overflow: hidden; max-width: 560px; padding: 14px; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; box-shadow: 0 14px 34px -20px rgba(245, 240, 220, .14); } .svc-section--light .svc-morph { background: #ffffff; box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .18); } .svc-morph .morph-stage { position: relative; border: 1px solid var(--border); border-radius: 6px; background: #151515; padding: 14px 12px 24px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 0; opacity: 1; transform: none; } .svc-section--light .svc-morph .morph-stage { background: #fbfaf4; border-color: #e3e0d3; } .svc-morph .morph-stage.stage-wire { animation: svc-spot 6s ease-in-out infinite -0s; } .svc-morph .morph-stage.stage-design { animation: svc-spot 6s ease-in-out infinite -2s; } .svc-morph .morph-stage.stage-live { animation: svc-spot 6s ease-in-out infinite -4s; } @keyframes svc-spot { 0%, 10%, 95%, 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); border-color: var(--border); } 20%, 28% { box-shadow: 0 0 0 2px var(--blue); transform: scale(1.02); border-color: var(--blue); } 40%, 100% { transform: scale(1); } } .svc-section--light .svc-morph .morph-stage.stage-wire, .svc-section--light .svc-morph .morph-stage.stage-design, .svc-section--light .svc-morph .morph-stage.stage-live { animation-name: svc-spot-light; } @keyframes svc-spot-light { 0%, 10%, 95%, 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); border-color: #e3e0d3; } 20%, 28% { box-shadow: 0 0 0 2px var(--blue); transform: scale(1.02); border-color: var(--blue); } 40%, 100% { transform: scale(1); } } /* Stage tag — tiny label at the bottom of each stage */ .svc-morph .morph-tag { position: absolute; bottom: 6px; left: 10px; right: 10px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .svc-section--light .svc-morph .morph-tag { color: #6a6250; } /* Stage 1 — wireframe blocks */ .svc-morph .stage-wire .wf { display: block; border-radius: 2px; background: #333; } .svc-section--light .svc-morph .stage-wire .wf { background: var(--border); } .svc-morph .stage-wire .wf-1 { height: 10px; width: 70%; } .svc-morph .stage-wire .wf-2 { height: 4px; width: 90%; } .svc-morph .stage-wire .wf-3 { height: 4px; width: 60%; } .svc-morph .stage-wire .wf-4 { height: 18px; width: 45%; margin-top: 6px; border-radius: 999px; } .svc-morph .stage-wire .wf-5 { height: 30px; width: 100%; border: 1px dashed #444; background: transparent; } .svc-section--light .svc-morph .stage-wire .wf-5 { border-color: var(--border); } /* Stage 2 — polished design */ .svc-morph .stage-design .ds { display: block; border-radius: 2px; } .svc-morph .stage-design .ds-head { height: 11px; width: 75%; background: #fff; } .svc-section--light .svc-morph .stage-design .ds-head { background: var(--ink); } .svc-morph .stage-design .ds-sub { height: 3px; width: 90%; background: rgba(255,255,255,.35); opacity: .8; } .svc-section--light .svc-morph .stage-design .ds-sub { background: rgba(0,0,0,.3); } .svc-morph .stage-design .ds-cta { height: 18px; width: 45%; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 0 rgba(91, 90, 255, .4); animation: svc-morph-cta-pulse 3s ease-in-out infinite; } @keyframes svc-morph-cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 90, 255, .4); } 50% { box-shadow: 0 0 0 6px rgba(91, 90, 255, 0); } } .svc-morph .stage-design .ds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; } .svc-morph .stage-design .ds-grid i { height: 24px; background: linear-gradient(135deg, #222, #181818); border-radius: 3px; display: block; border: 1px solid var(--border); } .svc-section--light .svc-morph .stage-design .ds-grid i { background: linear-gradient(135deg, #f5f1e7, #ffffff); border-color: #e3e0d3; } /* Stage 3 — live browser */ .svc-morph .stage-live { padding: 0 0 24px; } .svc-morph .stage-live .chr { height: 18px; background: #1a1a1a; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 8px; gap: 3px; } .svc-section--light .svc-morph .stage-live .chr { background: #f5f1e7; border-bottom-color: #e3e0d3; } .svc-morph .stage-live .chr i { width: 6px; height: 6px; border-radius: 50%; background: #3a3a3a; display: block; } .svc-morph .stage-live .chr i:nth-child(1) { background: #ff7369; } .svc-morph .stage-live .chr i:nth-child(2) { background: #ffc04e; } .svc-morph .stage-live .chr i:nth-child(3) { background: #7ad17f; } .svc-morph .stage-live .bd { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .svc-morph .stage-live .lh { height: 9px; width: 70%; background: #fff; border-radius: 2px; } .svc-section--light .svc-morph .stage-live .lh { background: var(--ink); } .svc-morph .stage-live .ls { height: 3px; width: 90%; background: rgba(255,255,255,.35); opacity: .6; border-radius: 2px; } .svc-section--light .svc-morph .stage-live .ls { background: rgba(0,0,0,.3); } .svc-morph .stage-live .lhero { height: 36px; border-radius: 3px; margin-top: 4px; background: linear-gradient(135deg, rgba(91, 90, 255, .4), rgba(232, 69, 60, .25)); position: relative; overflow: hidden; } /* Shimmer across the live hero block */ .svc-morph .stage-live .lhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-100%); animation: svc-hero-shimmer 3s ease-in-out infinite; } @keyframes svc-hero-shimmer { 0%, 30% { transform: translateX(-100%); } 60%, 100% { transform: translateX(120%); } } .svc-morph .stage-live .lrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .svc-morph .stage-live .lrow i { height: 12px; background: #1a1a1a; border-radius: 2px; border: 1px solid var(--border); display: block; } .svc-section--light .svc-morph .stage-live .lrow i { background: #fbfaf4; border-color: #e3e0d3; } /* AI star — flashes in on Design and Live as the spotlight hits each stage */ .svc-morph .ai-star { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; color: var(--blue); filter: drop-shadow(0 0 6px rgba(91, 90, 255, .7)); opacity: 0; transform: scale(.4) rotate(-20deg); pointer-events: none; } .svc-morph .ai-star svg { width: 100%; height: 100%; } .svc-morph .ai-star--design { animation: svc-ai-spark 6s ease-in-out infinite -2s; } .svc-morph .ai-star--live { animation: svc-ai-spark 6s ease-in-out infinite -4s; } @keyframes svc-ai-spark { 0%, 10% { opacity: 0; transform: scale(.4) rotate(-20deg); } 18% { opacity: 1; transform: scale(1.25) rotate(10deg); } 24% { opacity: 1; transform: scale(1) rotate(0); } 45%, 100% { opacity: .55; transform: scale(1) rotate(0); } } @media (prefers-reduced-motion: reduce) { .svc-morph .morph-stage, .svc-morph .stage-design .ds-cta, .svc-morph .stage-live .lhero::after, .svc-morph .ai-star { animation: none !important; } .svc-morph .ai-star { opacity: .8; transform: scale(1) !important; } } /* ============================================================ PULL QUOTE / CALLOUT inside a prose section ============================================================ */ .svc-callout { margin: clamp(28px, 3vw, 40px) 0; padding: clamp(20px, 2.4vw, 32px); border-left: 2px solid var(--svc-accent); background: rgba(255, 255, 255, .02); font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1vw + .75rem, 26px); letter-spacing: -.015em; line-height: 1.35; color: #fff; } .svc-section--light .svc-callout { background: rgba(91, 90, 255, .04); color: #111111; } /* ============================================================ Services overview cards — embedded animated illustration Each .service-card-lg now mounts the matching service hero illustration in a compact frame between the top row and the description, mirroring the homepage service card pattern. ============================================================ */ .service-card-lg--has-vis .service-card-lg__vis { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 220px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(180deg, #0e0e0e, #0a0a0a); margin: 8px 0 4px; isolation: isolate; } /* Re-anchor the hero visual to fill the smaller frame regardless of the absolute / aspect-ratio sizing it normally inherits. */ .service-card-lg--has-vis .service-card-lg__vis .svc-hero__vis { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0; padding: 10px; display: flex; animation: none; opacity: 1; transform: none; pointer-events: none; } .service-card-lg--has-vis .service-card-lg__vis .svc-hero-vis--browser, .service-card-lg--has-vis .service-card-lg__vis .svc-hero-vis--grid, .service-card-lg--has-vis .service-card-lg__vis .svc-hero-vis--terminal, .service-card-lg--has-vis .service-card-lg__vis .svc-hero-vis--dash { width: 100%; height: 100%; flex: 1; } /* Trim the inline browser headline so it doesn't dominate at the smaller card width. */ .service-card-lg--has-vis .svc-hero-vis--browser .page-hero .h { font-size: clamp(14px, 1.2vw + .4rem, 22px); }