/* Generated by tools/build-ar.py from ../style.css. Do not edit. */
/* ============================================================
Cardi — midnight + signal teal (2026-10 relaunch, matches the home page)
Geist throughout
Accent = teal #0DC5B4; "light" sections are a lighter navy, not cream
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* Surface palette — dark navy, lifted ~20% lighter than the original */
--bg: #212936;
--bg-alt: #263143;
--bg-soft: #29364C;
--surface: #263143;
--line: #324158;
--line-soft: rgba(255,255,255,0.06);
/* Text — light on dark */
--text: #E9EEF3;
--text-mute: #8D9AAD;
--text-soft: #61708A;
--text-invert: #04211E;
/* Brand accent — brand blue #0AA597 (tuned brighter for the dark navy) */
--accent: #0DC5B4;
--accent-2: #2DD4C4;
--accent-soft: rgba(13,197,180,0.16);
--accent-deep: #0AA597;
--accent-glow: rgba(13,197,180,0.32);
/* Card material visuals — true blank stock colours */
--card-dark: #14110F;
--card-dark-2: #221E1B;
--pvc-1: #FBFAF8; /* warm white blank rPVC */
--pvc-2: #EEEAE2; /* soft shadow tint */
--pvc-ink: #1A1815; /* dark print on white PVC */
--cork-1: #D6BB89;
--cork-2: #BA995F;
--cork-3: #9C7B45;
--cork-ink: #3A2A12;
/* Type: Geist throughout */
--font-display: 'Geist', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-ui: 'Geist', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
/* Spacing rhythm */
--section-pad: clamp(40px, 5vw, 64px);
--container: 1180px;
/* Radii */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 22px;
/* Shadows — deep on dark */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.36), 0 2px 8px rgba(0,0,0,0.27);
--shadow-md: 0 4px 16px rgba(0,0,0,0.41), 0 12px 32px rgba(0,0,0,0.36);
--shadow-lg: 0 18px 60px rgba(0,0,0,0.50);
--shadow-card: 0 14px 50px rgba(0,0,0,0.54);
}
/* Light sections — alternate with the dark ones down the page.
Re-points the surface/text/shadow tokens, so anything inside inherits
the light treatment without per-component overrides. */
.section-light {
--bg: #263143;
--bg-alt: #29364C;
--bg-soft: #2D3B56;
--surface: #29364C;
--line: #384965;
--line-soft: rgba(255,255,255,0.06);
--text: #E9EEF3;
--text-mute: #8D9AAD;
--text-soft: #61708A;
/* Brand blue — reads crisp on white, exact hex on light sections */
--accent: #0DC5B4;
--accent-2: #0DC5B4;
--accent-soft: rgba(13,197,180,0.14);
--accent-glow: rgba(13,197,180,0.28);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 4px 16px rgba(0,0,0,0.45);
--shadow-lg: 0 18px 60px rgba(0,0,0,0.5);
--shadow-card: 0 14px 50px rgba(0,0,0,0.5);
position: relative;
background: var(--bg);
color: var(--text);
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ---------- Waving net background — HOMEPAGE ONLY ---------- */
body.home { background: #212936; }
/* Animated waving net (canvas) */
body.home #net-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
display: block;
pointer-events: none;
}
/* Static warped-net fallback (no-JS) */
body.home::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(140% 110% at 50% 8%, rgba(14,19,38,0) 55%, rgba(12,18,36,0.66) 100%),
url('/assets/net-bg.svg') center center / cover no-repeat,
#182146;
}
/* The hero page (index.html carries .landing; design.html does not) runs clean —
no net grid. Its animated mesh + brand watermark canvas is omitted there too. */
body.home.landing::before {
background:
radial-gradient(140% 110% at 50% 8%, rgba(14,19,38,0) 55%, rgba(12,18,36,0.66) 100%),
#182146;
}
/* The hero's own faint dot lattice is part of the same "net" look. */
body.home.landing .hero::before { display: none; }
/* ...and the oversized Cardi wave watermark behind the headline. */
body.home.landing .hero-text::before { display: none; }
/* Flow steps (design / confirm / checkout) are separate pages from the
marketing home — drop the net there and use the normal background. */
body.home.is-designing,
body.home.is-editing,
body.home.is-capturing { background: #212936; }
body.home.is-designing::before,
body.home.is-editing::before,
body.home.is-capturing::before { content: none; display: none; }
body.home.is-designing #net-canvas,
body.home.is-editing #net-canvas,
body.home.is-capturing #net-canvas { display: none !important; }
body.home.is-designing .flow-section,
body.home.is-editing .flow-section,
body.home.is-capturing .flow-section { background: transparent !important; }
/* Paste-your-website page: a two-column layout — the paste form on the left,
a card showcase on the right — centred as a single block in the viewport so
the page reads full instead of a lone form floating in empty navy. The top
bar stays pinned; the .capture-body grid fills the space between. */
body.home.is-capturing #step-1 { padding-top: 0; padding-bottom: 0; }
body.home.is-capturing #step-1 > .container {
min-height: 100vh;
display: flex;
flex-direction: column;
padding-top: 28px;
padding-bottom: 28px;
}
.capture-body {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
width: 100%;
}
.capture-main { min-width: 0; }
.capture-main .section-head { text-align: left; margin-bottom: 32px; }
.capture-main #extract-form-wrap { margin: 0; max-width: 560px; }
.capture-main .url-examples,
.capture-main .url-capture { justify-content: flex-start; }
.capture-main .order-hint { text-align: left !important; }
/* Right-hand showcase panel */
.capture-aside { min-width: 0; }
.capture-showcase {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
border-radius: 22px;
padding: clamp(24px, 3vw, 36px);
box-shadow: 0 24px 70px rgba(13, 197, 180, 0.10), var(--shadow-md);
backdrop-filter: blur(8px);
}
.capture-showcase__eyebrow {
display: inline-block;
font-family: var(--font-ui);
font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.capture-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.capture-cards img {
width: 100%;
aspect-ratio: 1.586 / 1;
object-fit: cover;
border-radius: 11px;
box-shadow: 0 10px 26px rgba(20, 17, 15, 0.28), 0 3px 8px rgba(20, 17, 15, 0.16);
}
.capture-showcase__lede {
margin: 22px 0 18px;
color: var(--text-soft);
font-size: 15px; line-height: 1.55;
}
.capture-points {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 11px;
}
.capture-points li {
position: relative;
padding-left: 26px;
font-family: var(--font-ui);
font-size: 14px; line-height: 1.4;
color: var(--text);
}
.capture-points li::before {
content: '';
position: absolute; left: 0; top: 3px;
width: 16px; height: 16px; border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(13, 197, 180, 0.14);
}
.capture-points li::after {
content: '';
position: absolute; left: 5px; top: 7px;
width: 6px; height: 3px;
border-left: 1.6px solid #0b1730; border-bottom: 1.6px solid #0b1730;
transform: rotate(-45deg);
}
@media (max-width: 900px) {
/* Stack top-to-bottom in normal flow — no forced full-height centring that
would pool empty space between the form and the showcase on tall phones. */
body.home.is-capturing #step-1 > .container {
min-height: 0;
display: block;
padding-top: 20px;
padding-bottom: 40px;
}
.capture-body {
display: block;
margin-top: 8px;
}
.capture-main #extract-loading,
.capture-main #extract-form-wrap { margin: 0 auto; }
.capture-aside { margin-top: 40px; }
.capture-main .section-head { text-align: center; }
.capture-main #extract-form-wrap { margin: 0 auto; }
.capture-main .url-examples,
.capture-main .url-capture { justify-content: center; }
.capture-main .order-hint { text-align: center !important; }
.capture-aside { max-width: 560px; margin: 0 auto; width: 100%; }
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
@media (min-width: 720px) {
.container { padding: 0 40px; }
}
/* ---------- Headings & text ---------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--text);
}
h1 { font-size: clamp(40px, 5.5vw, 72px); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; line-height: 1.1; }
h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.3; }
h4 { font-size: 17px; letter-spacing: -0.01em; font-weight: 700; }
/* Bolded keyword accent (Tapt-style "smarter way to network") */
.accent { color: var(--accent); font-weight: 800; }
.accent--blue { color: var(--accent); font-weight: 800; }
.eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.lede, .section-lede {
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.65;
color: var(--text-mute);
max-width: 560px;
margin-top: 22px;
}
.section-head {
max-width: 720px;
margin: 0 auto 60px;
text-align: center;
}
.section-head .section-lede { margin-left: auto; margin-right: auto; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-ui);
font-weight: 700;
font-size: 14px;
padding: 13px 26px;
border-radius: 999px;
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--accent);
color: var(--text-invert);
box-shadow: 0 8px 26px var(--accent-glow);
}
.btn-primary:hover {
background: var(--accent-2);
color: var(--text-invert);
box-shadow: var(--shadow-md);
}
.btn-ghost {
background: transparent;
color: var(--text);
border-color: var(--line);
}
.btn-ghost:hover {
background: var(--bg-alt);
border-color: var(--text);
}
.btn-small { padding: 10px 18px; font-size: 14px; }
.btn-large { padding: 16px 28px; font-size: 16px; }
/* ---------- Nav ---------- */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(26, 32, 41, 0.94);
backdrop-filter: saturate(160%) blur(16px);
-webkit-backdrop-filter: saturate(160%) blur(16px);
border-bottom: 1px solid var(--line-soft);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
border-bottom-color: var(--line-soft);
box-shadow: 0 1px 0 rgba(20,17,15,0.02);
}
.nav-inner {
max-width: var(--container);
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (min-width: 720px) {
.nav-inner { padding: 16px 40px; }
}
.logo {
display: inline-flex;
align-items: center;
gap: 9px;
text-decoration: none;
color: var(--text);
}
.logo-mark {
width: 28px; height: 28px;
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.logo:hover .logo-mark {
transform: translateY(-1px) rotate(-3deg);
}
.logo-mark svg { width: 26px; height: 26px; display: block; }
.logo-word {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
/* Stacks the "solutions" line under the wordmark */
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
}
.logo-word::after {
content: "solutions";
font-family: var(--font-ui);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.19em;
text-transform: lowercase;
color: currentColor;
opacity: 0.72;
margin-top: 4px;
}
/* Brand blue reads brighter than muted white against the navy bar */
.nav .logo-word::after { color: var(--accent-2); opacity: 1; }
.nav-links {
display: flex;
align-items: center;
gap: 14px;
}
/* Below 820px only the auth controls stay in the bar; the section anchors are
reachable by scrolling. */
.nav-links .nav-link--page { display: none; }
.nav-links a {
font-size: 14.5px;
color: #dfe4ef;
text-decoration: none;
font-weight: 600;
transition: color 0.15s ease;
}
.nav-links a:hover { color: #fff; }
.nav-cta {
background: var(--accent);
color: var(--text-invert) !important;
padding: 9px 18px;
border-radius: 999px;
box-shadow: 0 6px 20px var(--accent-glow);
}
.nav-cta:hover { background: var(--accent-2) !important; color: var(--text-invert) !important; }
@media (min-width: 820px) {
.nav-links { gap: 28px; }
.nav-links .nav-link--page { display: inline-flex; }
}
/* ---------- Hero ---------- */
.hero {
padding: 96px 0 calc(var(--section-pad) + 24px);
position: relative;
overflow: hidden;
background:
radial-gradient(55% 45% at 85% 15%, rgba(13, 197, 180,0.18), transparent 70%),
radial-gradient(50% 50% at 5% 100%, rgba(13, 197, 180,0.10), transparent 70%),
linear-gradient(180deg, #0D1733 0%, #101C38 100%);
border-bottom: 1px solid var(--line-soft);
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(124,58,237,0.06) 1px, transparent 1px);
background-size: 24px 24px;
background-position: 0 0;
mask-image: radial-gradient(60% 50% at 50% 30%, black, transparent 80%);
-webkit-mask-image: radial-gradient(60% 50% at 50% 30%, black, transparent 80%);
pointer-events: none;
}
.hero > * { position: relative; }
@keyframes cardi-drift {
0%,100% {
transform:
translate(var(--card-tx, 0%), var(--card-ty, 0%))
rotate(calc(var(--card-rot, 0deg) - 1.5deg));
}
25% {
transform:
translate(calc(var(--card-tx, 0%) + 6px), calc(var(--card-ty, 0%) - 6px))
rotate(calc(var(--card-rot, 0deg) + 1.5deg));
}
50% {
transform:
translate(var(--card-tx, 0%), calc(var(--card-ty, 0%) - 12px))
rotate(calc(var(--card-rot, 0deg) + 0.5deg));
}
75% {
transform:
translate(calc(var(--card-tx, 0%) - 6px), calc(var(--card-ty, 0%) - 6px))
rotate(calc(var(--card-rot, 0deg) - 0.5deg));
}
}
.hero .card-stack .card {
animation: cardi-drift 11s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
box-shadow: 0 30px 80px var(--accent-glow), 0 12px 40px rgba(20,17,15,0.18);
will-change: transform;
}
.hero .card-stack:hover .card {
animation-play-state: paused;
}
.hero-inner {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: center;
}
.hero-text { max-width: 640px; position: relative; z-index: 0; }
/* Cardi logo watermark sitting behind the hero text. */
.hero-text::before {
content: '';
position: absolute; z-index: -1; pointer-events: none;
top: 50%; left: 44%;
width: 540px; height: 540px;
transform: translate(-50%, -50%);
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
opacity: 0.06;
}
.hero-text h1 { margin-bottom: 0; font-size: clamp(32px, 3.6vw, 50px); }
.hero-text .lede { margin-top: 20px; max-width: 440px; font-size: 16px; }
.hero-text .eyebrow { font-size: 12px; }
/* URL input bar in the hero */
.hero-url {
display: flex;
align-items: center;
gap: 0;
margin-top: 32px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 6px 6px 18px;
box-shadow: var(--shadow-md);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
max-width: 540px;
}
.hero-url:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md);
}
.hero-url__icon {
display: inline-flex;
align-items: center;
color: var(--text-soft);
margin-right: 8px;
}
.hero-url__icon svg { width: 18px; height: 18px; }
.hero-url input {
flex: 1;
border: 0;
background: transparent;
font: 500 15px/1 var(--font-ui);
color: var(--text);
padding: 12px 6px;
outline: none;
min-width: 0;
}
.hero-url input::placeholder { color: var(--text-soft); font-weight: 400; }
.hero-url button {
flex-shrink: 0;
}
.hero-url.is-loading {
pointer-events: none;
opacity: 0.7;
}
.hero-url.is-loading button { background: var(--accent); color: white; }
.hero-url__hint {
font-size: 12.5px;
color: var(--text-soft);
margin-top: 10px;
margin-left: 18px;
max-width: 540px;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.hero-cta .btn-primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
box-shadow: 0 12px 32px var(--accent-glow), 0 2px 6px rgba(20,17,15,0.08);
border: 0;
}
.hero-cta .btn-primary:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
/* Hero URL entry — the primary call to action */
.hero-form {
margin-top: 30px;
max-width: 540px;
}
.hero-form .url-pill {
box-shadow: 0 18px 60px rgba(13, 197, 180,0.14), var(--shadow-md);
}
.hero-form .url-pill input { font-size: 16px; padding: 13px 10px; }
.hero-examples {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 16px;
}
.hero-examples__label {
font-size: 13px;
color: var(--text-soft);
font-weight: 500;
}
@media (max-width: 600px) {
.hero-form .url-pill { flex-wrap: wrap; border-radius: 20px; padding: 10px; gap: 8px; }
.hero-form .url-pill input { flex: 1 1 100%; padding: 8px 12px; }
.hero-form .url-pill__icon { display: none; }
.hero-form .url-pill__btn { flex: 1 1 100%; justify-content: center; }
}
.hero-steps {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 28px;
padding: 0;
list-style: none;
font: 500 13.5px/1 var(--font-ui);
color: var(--text-mute);
}
.hero-steps li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hero-steps__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-deep);
font: 700 11.5px/1 var(--font-ui);
}
/* ---------- How it works ---------- */
.how {
padding: var(--section-pad) 0;
background: var(--bg-alt);
border-top: 1px solid var(--line-soft);
}
.how-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.how-step {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 34px 28px 30px;
box-shadow: var(--shadow-sm);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.how-step:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--accent-2);
}
.how-step__num {
position: absolute;
top: 20px; right: 22px;
font: 600 13px/1 var(--font-display);
color: var(--text-soft);
}
.how-step__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px; height: 52px;
border-radius: 14px;
background: var(--accent-soft);
color: var(--accent-deep);
margin-bottom: 20px;
}
.how-step__icon svg { width: 26px; height: 26px; }
.how-step__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 8px;
}
.how-step__text {
font-size: 15px;
line-height: 1.6;
color: var(--text-mute);
margin: 0;
}
.how-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 48px;
}
.how-cta__note {
font: 500 13px/1 var(--font-ui);
letter-spacing: 0.02em;
color: var(--text-soft);
}
@media (max-width: 860px) {
.how-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* ---------- URL pill (Step 1) ---------- */
.url-pill {
display: flex;
align-items: center;
gap: 0;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 8px 8px 22px;
box-shadow: 0 18px 60px rgba(124,58,237,0.10), var(--shadow-md);
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.url-pill:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 60px rgba(124,58,237,0.16);
transform: translateY(-1px);
}
.url-pill__icon {
display: inline-flex;
align-items: center;
color: var(--text-soft);
margin-right: 12px;
flex: 0 0 auto;
}
.url-pill__icon svg { width: 20px; height: 20px; }
.url-pill input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font: 500 17px/1 var(--font-ui);
color: var(--text);
padding: 14px 10px;
outline: none;
}
.url-pill input::placeholder { color: var(--text-soft); font-weight: 400; }
.url-pill__btn {
flex: 0 0 auto;
padding: 14px 22px;
border-radius: 999px;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: white !important;
box-shadow: 0 8px 22px var(--accent-glow);
}
.url-pill__btn:hover { filter: brightness(1.08); }
.url-pill.is-loading { pointer-events: none; opacity: 0.7; }
.url-examples {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.url-examples__label {
font-size: 13px;
color: var(--text-soft);
margin-right: 4px;
}
.url-chip {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 14px;
font: 500 13px/1 var(--font-ui);
color: var(--text-mute);
cursor: pointer;
transition: all 0.15s ease;
}
.url-chip:hover {
border-color: var(--accent);
color: var(--accent-deep);
background: var(--accent-soft);
transform: translateY(-1px);
}
.url-capture {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
margin: 32px 0 0;
padding: 0;
list-style: none;
font: 500 13px/1 var(--font-ui);
color: var(--text-mute);
letter-spacing: 0.04em;
}
.url-capture li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.url-capture__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
@media (max-width: 560px) {
.url-pill { flex-wrap: wrap; padding: 14px; border-radius: 18px; }
.url-pill__icon { margin-right: 6px; }
.url-pill input { width: 100%; flex-basis: 100%; padding: 10px 4px; }
.url-pill__btn { width: 100%; }
}
.hero-meta {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
margin-top: 40px;
font-size: 14px;
color: var(--text-mute);
}
.hero-meta .check {
display: inline-flex;
width: 18px; height: 18px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-deep);
margin-right: 8px;
font-size: 11px;
font-weight: 700;
}
@media (min-width: 960px) {
.hero-inner {
grid-template-columns: 0.9fr 1.1fr;
gap: 64px;
}
.hero-meta {
flex-direction: row;
flex-wrap: wrap;
gap: 18px;
margin-top: 48px;
}
}
/* ---------- Hero card stack (legacy: .card-stack markup is gone) ----------
min-height lived here and clamped the hero stage's own box taller than it
needs to be at small widths, so it's dropped. */
.hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0 16px;
}
/* Hero: simple "paste your website" panel (replaces the card fan) */
.hero-paste {
width: 100%;
max-width: 480px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 22px;
padding: clamp(24px, 3vw, 34px);
box-shadow: var(--shadow-card);
text-align: left;
}
.hero-paste__step {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px;
background: var(--accent-soft); color: var(--accent);
font-family: var(--font-display); font-weight: 600; font-size: 17px;
margin-bottom: 16px;
}
.hero-paste__title {
font-family: var(--font-display);
font-size: clamp(26px, 3vw, 32px);
line-height: 1.05; letter-spacing: -0.01em;
margin: 0 0 10px;
}
.hero-paste__lede {
color: var(--text-mute); font-size: 15px; line-height: 1.5;
margin: 0 0 22px; max-width: 420px;
}
.hero-paste .hero-form { margin: 0; }
.hero-paste .url-capture { margin-top: 20px; }
.card-stack {
position: relative;
width: 320px;
height: 240px;
}
/* Generic card mockup */
.card {
position: absolute;
width: 320px;
height: 200px;
border-radius: 14px;
padding: 18px 20px;
display: flex;
align-items: flex-start;
justify-content: space-between;
box-shadow: var(--shadow-card);
color: #F5EFE2;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card-tag {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
text-transform: none;
letter-spacing: -0.01em;
}
.card-nfc {
width: 22px; height: 22px;
border-radius: 50%;
border: 1px solid currentColor;
position: relative;
opacity: 0.7;
}
.card-nfc::before, .card-nfc::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
border: 1px solid currentColor;
opacity: 0.6;
}
.card-nfc::after { inset: 8px; opacity: 0.4; }
/* PVC (standard) — blank white rPVC stock */
.card--pvc {
background:
radial-gradient(circle at 30% 30%, rgba(0,0,0,0.012) 0 0.6px, transparent 0.6px) 0 0/4px 4px,
linear-gradient(135deg, var(--pvc-1) 0%, var(--pvc-2) 100%);
color: var(--pvc-ink);
border: 1px solid rgba(20,17,15,0.08);
}
/* Cork (legacy) — natural cork tan with grain */
.card--cork {
background:
radial-gradient(circle at 20% 30%, rgba(0,0,0,0.10) 0 1px, transparent 1px) 0 0/3px 3px,
radial-gradient(circle at 70% 60%, rgba(0,0,0,0.07) 0 0.6px, transparent 0.6px) 0 0/2px 2px,
radial-gradient(circle at 45% 80%, rgba(0,0,0,0.06) 0 0.8px, transparent 0.8px) 0 0/2.5px 2.5px,
linear-gradient(135deg, var(--cork-1) 0%, var(--cork-3) 100%);
color: var(--cork-ink);
border: 1px solid rgba(58,42,18,0.10);
}
/* Dual chip (premium) — dark slate with gold contact chip */
.card--dual {
background:
linear-gradient(135deg, #E8C766 0%, #B8912E 100%) 14px 58% / 24px 17px no-repeat,
radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.10), transparent 60%),
linear-gradient(135deg, #26314A 0%, #101828 100%);
color: #E8EAF0;
border: 1px solid rgba(255,255,255,0.12);
}
/* Brand sample card colours (hero fan) */
.card--violet {
background:
radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.18), transparent 60%),
linear-gradient(135deg, #6D28D9 0%, #4C1D95 100%);
color: #EDE4FF;
border: 1px solid rgba(0,0,0,0.06);
}
.card--mint {
background:
radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.20), transparent 60%),
linear-gradient(135deg, #34D399 0%, #0F766E 100%);
color: #F0FDF4;
border: 1px solid rgba(0,0,0,0.06);
}
.card--coral {
background:
radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.18), transparent 60%),
linear-gradient(135deg, #FB7185 0%, #BE123C 100%);
color: #FFF1F2;
border: 1px solid rgba(0,0,0,0.06);
}
/* Fan arrangement (5 cards, deepest in the middle) — negative delays stagger phase */
.hero-visual .card-stack .card--cork { z-index: 1; --card-tx: -42%; --card-ty: 10%; --card-rot: -14deg; animation-delay: 0s; }
.hero-visual .card-stack .card--violet { z-index: 3; --card-tx: -22%; --card-ty: -2%; --card-rot: -7deg; animation-delay: -2.2s; }
.hero-visual .card-stack .card--mint { z-index: 5; --card-tx: 0%; --card-ty: -10%; --card-rot: 0deg; animation-delay: -4.4s; }
.hero-visual .card-stack .card--coral { z-index: 3; --card-tx: 22%; --card-ty: -2%; --card-rot: 7deg; animation-delay: -6.6s; }
.hero-visual .card-stack .card--pvc { z-index: 1; --card-tx: 42%; --card-ty: 10%; --card-rot: 14deg; animation-delay: -8.8s; }
/* ---------- Features ---------- */
.features {
padding: var(--section-pad) 0;
background: var(--bg);
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 700px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
.feature {
background: var(--bg-alt);
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
padding: 28px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.feature:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--line);
}
.feature-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent-deep);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 {
font-size: 20px;
margin-bottom: 8px;
}
.feature p {
color: var(--text-mute);
font-size: 15px;
line-height: 1.6;
}
/* ---------- Cards / products ---------- */
.cards {
padding: var(--section-pad) 0;
background: var(--bg-alt);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.product-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
@media (min-width: 820px) {
.product-grid {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
}
.product {
background: var(--bg);
border: 1px solid var(--line-soft);
border-radius: var(--r-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.product:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--line);
}
.product--featured {
border: 1.5px solid var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.product-visual {
padding: 56px 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 260px;
}
.product-visual--pvc {
background:
radial-gradient(80% 60% at 50% 40%, #EEF1F6 0%, #DDE2EB 100%);
}
.product-visual--cork {
background:
radial-gradient(80% 60% at 50% 40%, #EFE5D2 0%, #D7C29B 100%);
}
.card.card-large {
position: static;
width: min(82%, 320px);
height: auto;
aspect-ratio: 1.586;
transform: rotate(-3deg);
transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.product:hover .card.card-large {
transform: rotate(-1deg) scale(1.03);
}
.product-info { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.product-flag {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 14px;
width: fit-content;
}
.product-flag--standard {
background: var(--bg-soft);
color: var(--text-mute);
}
.product-flag--premium {
background: var(--accent-soft);
color: var(--accent-deep);
}
.product-info h3 { margin-bottom: 4px; }
.product-tag {
color: var(--text-mute);
font-size: 13px;
letter-spacing: 0.04em;
margin-bottom: 14px;
}
.product-desc {
color: var(--text-mute);
font-size: 15px;
line-height: 1.6;
margin-bottom: 18px;
}
.product-spec {
list-style: none;
margin-bottom: 22px;
display: flex;
flex-direction: column;
gap: 7px;
}
.product-spec li {
font-size: 13.5px;
color: var(--text-mute);
padding-left: 16px;
position: relative;
}
.product-spec li::before {
content: '';
position: absolute;
left: 0; top: 9px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent);
}
.product-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--line-soft);
margin-top: auto;
}
.product-price {
font-family: var(--font-ui);
font-size: 30px;
font-weight: 700;
letter-spacing: -0.02em;
}
.product-price .ccy {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
color: var(--text-soft);
letter-spacing: 0.06em;
margin-left: 4px;
}
/* ---------- How it works ---------- */
.how {
padding: var(--section-pad) 0;
background: var(--bg);
}
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.step {
background: var(--bg-alt);
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
padding: 32px 28px;
position: relative;
}
.step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent-deep);
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
line-height: 1;
margin-bottom: 22px;
letter-spacing: -0.01em;
}
.step h3 { margin-bottom: 8px; font-size: 22px; }
.step p { color: var(--text-mute); font-size: 15px; line-height: 1.6; }
/* ---------- Example / demo card ---------- */
.example {
padding: var(--section-pad) 0;
background: var(--bg-alt);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.example-inner {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}
@media (min-width: 880px) {
.example-inner { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.example-text p { color: var(--text-mute); margin: 18px 0 12px; max-width: 480px; }
.example-meta { font-size: 13px; color: var(--text-soft); letter-spacing: 0.04em; }
.example-text .btn { margin-top: 12px; }
.example-visual {
perspective: 1500px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.demo-card-tilt {
--rx: 0deg;
--ry: 0deg;
--gx: 50%;
--gy: 50%;
width: 100%;
max-width: 460px;
aspect-ratio: 1.586;
position: relative;
transform-style: preserve-3d;
transition: transform 0.2s ease;
}
.demo-card-tilt.is-tilting {
transform: rotateY(var(--rx)) rotateX(var(--ry));
}
.demo-card {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.demo-card.is-flipped { transform: rotateY(180deg); }
.demo-card__face {
position: absolute;
inset: 0;
border-radius: 12px;
padding: 24px 26px;
display: flex;
flex-direction: column;
justify-content: space-between;
backface-visibility: hidden;
box-shadow: var(--shadow-card);
background:
radial-gradient(circle at 30% 40%, rgba(255,255,255,0.025) 0 0.4mm, transparent 0.4mm) 0 0/1.6mm 1.6mm,
radial-gradient(circle at 80% 60%, rgba(255,255,255,0.018) 0 0.4mm, transparent 0.4mm) 0 0/2.2mm 2.2mm,
linear-gradient(135deg, var(--card-dark-2) 0%, var(--card-dark) 100%);
color: #F5EFE2;
}
.demo-card__face::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(220px at var(--gx) var(--gy), rgba(255,255,255,0.07), transparent 70%),
linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
pointer-events: none;
}
.demo-card__face--back { transform: rotateY(180deg); align-items: center; text-align: center; }
.demo-card__row { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.demo-card__logo { display: flex; flex-direction: column; gap: 3px; }
.demo-card__logo .bar { height: 4px; border-radius: 1px; }
.demo-card__logo .bar--1 { width: 16px; background: var(--accent-2); }
.demo-card__logo .bar--2 { width: 26px; background: var(--accent); }
.demo-card__logo .bar--3 { width: 36px; background: var(--accent-deep); }
.demo-card__nfc { width: 24px; height: 24px; color: var(--accent-2); }
.demo-card__nfc svg { width: 100%; height: 100%; }
.demo-card__brand h4 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: #F5EFE2;
}
.demo-card__brand p {
font-size: 11px;
color: rgba(234,224,208,0.55);
letter-spacing: 0.05em;
margin-top: 4px;
}
.demo-card__tap {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-2);
font-weight: 500;
align-self: flex-end;
}
.demo-card__qr {
width: 60px; height: 60px;
background: var(--card-dark);
border: 1px solid rgba(234,224,208,0.12);
border-radius: 4px;
padding: 4px;
flex-shrink: 0;
}
.demo-card__qr svg { width: 100%; height: 100%; }
.demo-card__back-logo { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.demo-card__back-logo .bar { height: 8px; border-radius: 1.5px; }
.demo-card__back-logo .bar--1 { width: 30px; background: var(--accent-2); }
.demo-card__back-logo .bar--2 { width: 48px; background: var(--accent); }
.demo-card__back-logo .bar--3 { width: 68px; background: var(--accent-deep); }
.demo-card__back-wordmark h4 {
font-family: var(--font-display);
font-size: 22px;
color: #F5EFE2;
margin-bottom: 6px;
}
.demo-card__back-tagline {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 13px;
color: rgba(234,224,208,0.6);
}
.demo-card__back-foot {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.demo-card__back-tap {
display: inline-flex; align-items: center; gap: 6px;
color: var(--accent-2);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.demo-card__back-tap svg { width: 14px; height: 14px; }
.demo-card__back-url {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(234,224,208,0.55);
}
.demo-toggle {
display: inline-flex;
gap: 4px;
padding: 4px;
background: var(--bg-soft);
border-radius: 999px;
}
.demo-toggle__btn {
background: transparent;
border: 0;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--text-mute);
padding: 8px 18px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.demo-toggle__btn.is-active { background: var(--text); color: var(--text-invert); }
/* ---------- Design variants gallery ---------- */
:root {
/* CoreStack brand tokens for sample cards */
--cs-bg-1: #221E1B;
--cs-bg-2: #0E0B0A;
--cs-ink: #F5EFE2;
--cs-ink-mute: rgba(234,224,208,0.55);
--cs-teal-1: #5FE0D5;
--cs-teal-2: #0AA597;
--cs-teal-3: #099B8E;
}
.variants {
padding: var(--section-pad) 0;
background: var(--bg);
}
.variants-grid {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
@media (min-width: 720px) { .variants-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .variants-grid { grid-template-columns: repeat(3, 1fr); } }
.vcard {
display: flex;
flex-direction: column;
gap: 10px;
}
.vcard__label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-mute);
}
.vcard__face {
aspect-ratio: 1.586;
border-radius: 12px;
padding: 5.5%;
display: flex;
flex-direction: column;
justify-content: space-between;
background:
radial-gradient(circle at 30% 40%, rgba(255,255,255,0.025) 0 0.5px, transparent 0.5px) 0 0/4px 4px,
radial-gradient(circle at 80% 60%, rgba(255,255,255,0.018) 0 0.4px, transparent 0.4px) 0 0/6px 6px,
linear-gradient(135deg, var(--cs-bg-1) 0%, var(--cs-bg-2) 100%);
color: var(--cs-ink);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.25s;
}
.vcard:hover .vcard__face {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.vcard__face::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
pointer-events: none;
}
.vcard__face--center {
align-items: center;
text-align: center;
}
.vc-row { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.vc-middle { position: relative; z-index: 1; padding: 4% 0; }
.vc-middle--bold { display: flex; flex-direction: column; gap: 8px; }
.vc-stack { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.vc-foot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 1; }
.vc-foot--center { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.vc-bars { display: flex; flex-direction: column; gap: 2px; }
.vc-bars i { display: block; height: 3px; border-radius: 1px; }
.vc-bars i:nth-child(1) { width: 12px; background: var(--cs-teal-1); }
.vc-bars i:nth-child(2) { width: 18px; background: var(--cs-teal-2); }
.vc-bars i:nth-child(3) { width: 26px; background: var(--cs-teal-3); }
.vc-bars--center { align-items: center; }
.vc-bars--invert i:nth-child(1) { background: rgba(20,17,15,0.7); }
.vc-bars--invert i:nth-child(2) { background: rgba(20,17,15,0.9); }
.vc-bars--invert i:nth-child(3) { background: #0E0B0A; }
.vc-nfc { display: inline-flex; color: var(--cs-teal-2); width: 18px; height: 18px; }
.vc-nfc svg { width: 100%; height: 100%; }
.vc-nfc--invert { color: var(--cs-bg-2); }
.vc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cs-teal-2); }
.vc-name {
font-family: var(--font-display);
font-weight: 500;
font-size: 15px;
letter-spacing: -0.02em;
line-height: 1.05;
}
.vc-name--lg { font-size: 18px; font-weight: 600; }
.vc-name--serif { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.vc-tag {
font-family: var(--font-ui);
font-size: 9px;
color: var(--cs-ink-mute);
letter-spacing: 0.04em;
margin-top: 3px;
}
.vc-tagline {
font-family: var(--font-ui);
font-size: 9px;
color: var(--cs-ink-mute);
}
.vc-tagline--italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 10px;
}
.vc-tap {
font-family: var(--font-ui);
font-size: 7.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cs-teal-2);
font-weight: 500;
}
.vc-url {
font-family: var(--font-ui);
font-size: 8px;
color: var(--cs-ink-mute);
letter-spacing: 0.04em;
}
.vc-eyebrow {
font-family: var(--font-ui);
font-size: 7.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cs-ink-mute);
position: relative; z-index: 1;
}
.vc-qr {
width: 28px;
height: 28px;
border-radius: 2px;
background:
linear-gradient(90deg, #F5EFE2 1px, transparent 1px) 0 0/3px 3px,
linear-gradient(0deg, #F5EFE2 1px, transparent 1px) 0 0/3px 3px,
var(--cs-bg-2);
border: 1px solid rgba(234,224,208,0.15);
}
.vc-rule { display: flex; align-items: center; gap: 8px; }
.vc-rule__line { flex: 1; height: 1px; background: var(--cs-teal-2); opacity: 0.5; }
.vc-rule__txt {
font-family: var(--font-ui);
font-size: 8px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cs-teal-2);
}
/* Monogram variant */
.vc-monogram {
position: absolute;
right: -8%;
top: -18%;
font-family: var(--font-display);
font-weight: 500;
font-size: 220px;
line-height: 1;
color: var(--cs-teal-2);
opacity: 0.14;
pointer-events: none;
z-index: 0;
}
/* Stripe variant */
.vcard__face--stripe { padding: 0; flex-direction: row; }
.vc-stripe-bar { width: 12px; background: var(--cs-teal-2); flex-shrink: 0; }
.vc-stripe-body {
flex: 1;
padding: 5.5% 5.5% 5.5% 8%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Split variant */
.vcard__face--split { padding: 0; }
.vc-split-top {
background: var(--cs-teal-2);
padding: 12px 6%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.vc-split-body {
flex: 1;
padding: 6% 6% 5.5%;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
z-index: 1;
}
.variants-foot {
text-align: center;
font-size: 13.5px;
color: var(--text-mute);
margin-top: 36px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* ---------- Comparison ---------- */
.compare {
padding: var(--section-pad) 0;
background: var(--bg);
}
.compare-table {
background: var(--bg-alt);
border: 1px solid var(--line-soft);
border-radius: var(--r-xl);
overflow: hidden;
max-width: 920px;
margin: 0 auto;
}
.compare-head, .compare-row {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 8px;
padding: 16px 18px;
align-items: center;
}
.compare-head {
background: var(--bg);
border-bottom: 1px solid var(--line-soft);
}
.compare-row + .compare-row { border-top: 1px solid var(--line-soft); }
.compare-col {
font-family: var(--font-ui);
font-weight: 500;
font-size: 13px;
text-align: center;
color: var(--text-mute);
letter-spacing: 0.04em;
}
.compare-col--us { color: var(--accent); font-weight: 600; }
.compare-feature {
font-size: 14px;
color: var(--text);
font-weight: 500;
}
.compare-cell {
text-align: center;
font-size: 14px;
color: var(--text-mute);
}
.compare-cell--us { background: rgba(13,197,180,0.05); border-radius: 6px; padding: 8px 0; }
.compare-cell .yes { color: var(--accent); font-weight: 700; font-size: 16px; }
.compare-cell .no { color: var(--text-soft); }
@media (max-width: 720px) {
.compare-head, .compare-row {
grid-template-columns: 1fr 1fr 1fr 1fr;
font-size: 12px;
padding: 12px;
}
.compare-feature { font-size: 12px; }
}
/* ---------- Materials ---------- */
.materials {
padding: var(--section-pad) 0;
background: var(--bg-alt);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.materials-inner {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}
@media (min-width: 880px) {
.materials-inner { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.materials-text p { color: var(--text-mute); margin: 16px 0; max-width: 480px; }
.materials-list { list-style: none; margin-top: 18px; }
.materials-list li {
font-size: 14px;
color: var(--text-mute);
padding: 8px 0;
border-top: 1px solid var(--line-soft);
}
.materials-list li:first-child { border-top: 0; padding-top: 0; }
.materials-list li span {
color: var(--accent);
font-weight: 700;
margin-right: 10px;
}
.materials-visual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.material-swatch {
aspect-ratio: 1.586;
border-radius: var(--r-lg);
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px;
color: var(--text-invert);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.material-swatch--pvc {
background:
radial-gradient(circle at 30% 30%, rgba(0,0,0,0.012) 0 0.6px, transparent 0.6px) 0 0/4px 4px,
linear-gradient(135deg, var(--pvc-1) 0%, var(--pvc-2) 100%);
color: var(--pvc-ink);
border: 1px solid rgba(20,17,15,0.08);
}
.material-swatch--cork {
background:
radial-gradient(circle at 20% 30%, rgba(0,0,0,0.10) 0 1px, transparent 1px) 0 0/3px 3px,
radial-gradient(circle at 70% 60%, rgba(0,0,0,0.07) 0 0.6px, transparent 0.6px) 0 0/2px 2px,
linear-gradient(135deg, var(--cork-1) 0%, var(--cork-3) 100%);
color: var(--cork-ink);
border: 1px solid rgba(58,42,18,0.10);
}
.swatch-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
}
.swatch-tag {
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
opacity: 0.7;
margin-top: 2px;
}
/* ---------- Order flow ---------- */
.order {
padding: var(--section-pad) 0;
background:
radial-gradient(60% 50% at 50% 0%, rgba(13, 197, 180, 0.08), transparent 70%),
var(--bg);
}
.order-flow {
max-width: 820px;
margin: 0 auto;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
}
/* Progress strip */
.order-progress {
position: relative;
background: var(--bg-alt);
border-bottom: 1px solid var(--line-soft);
padding: 24px 24px 28px;
}
.order-progress__track {
position: absolute;
left: 48px; right: 48px;
top: 50px;
height: 2px;
background: var(--line);
border-radius: 2px;
z-index: 0;
}
.order-progress__fill {
position: absolute;
left: 48px;
top: 50px;
height: 2px;
background: var(--accent);
width: 0%;
border-radius: 2px;
transition: width 0.3s ease;
z-index: 1;
}
.order-progress__steps {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
position: relative;
z-index: 2;
}
.order-progress__steps li {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.order-progress__steps li span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg);
border: 2px solid var(--line);
font-size: 13px;
font-weight: 700;
color: var(--text-soft);
transition: all 0.2s ease;
}
.order-progress__steps li em {
font-style: normal;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-soft);
text-align: center;
}
.order-progress__steps li.is-active span {
border-color: var(--accent);
background: var(--accent);
color: white;
box-shadow: 0 0 0 4px var(--accent-soft);
}
.order-progress__steps li.is-active em { color: var(--text); }
.order-progress__steps li.is-done span {
border-color: var(--accent);
background: var(--accent);
color: white;
}
.order-progress__steps li.is-done em { color: var(--text-mute); }
/* Steps */
.order-form { padding: 32px 28px 28px; }
@media (min-width: 720px) { .order-form { padding: 40px 40px 32px; } }
.order-step { display: none; animation: fadeIn 0.25s ease; }
.order-step.is-active { display: block; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.order-step h3 { font-size: 22px; margin-bottom: 6px; }
.order-step__lede {
color: var(--text-mute);
font-size: 14.5px;
margin-bottom: 24px;
}
.order-fields {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-bottom: 20px;
}
@media (min-width: 600px) {
.order-fields { grid-template-columns: 1fr 1fr; }
.order-step[data-step="3"] .order-fields { grid-template-columns: 1fr; }
}
.order-field { display: flex; flex-direction: column; gap: 6px; }
.order-field span {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-mute);
}
.order-field input {
border: 1px solid var(--line);
background: var(--bg);
border-radius: 10px;
padding: 14px 16px;
font: 500 15px/1 var(--font-ui);
color: var(--text);
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.order-field input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.order-field input::placeholder { color: var(--text-soft); font-weight: 400; }
/* Card selector */
.order-cards {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-bottom: 24px;
}
@media (min-width: 600px) { .order-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .order-cards--five { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .order-cards--four { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .order-cards--five { grid-template-columns: repeat(5, 1fr); } }
.order-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg);
border: 1.5px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.order-card:hover { border-color: var(--text-soft); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.order-card input[type=radio] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.order-card:has(input[type=radio]:checked) {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.order-card__preview {
padding: 32px 16px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-soft);
}
.order-card__preview--photo { padding: 0; }
.order-card__preview--photo img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
}
.order-card__preview .card {
position: static;
width: 70%;
height: auto;
aspect-ratio: 1.586;
transform: rotate(-2deg);
}
.order-card__body {
padding: 18px 20px 22px;
}
.order-card__flag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
margin-bottom: 8px;
}
.order-card__flag--standard { background: var(--bg-soft); color: var(--text-mute); }
.order-card__flag--premium { background: var(--accent-soft); color: var(--accent-deep); }
.order-card__body h4 { font-size: 18px; margin-bottom: 2px; }
.order-card__body p { font-size: 13px; color: var(--text-mute); margin-bottom: 10px; }
.order-card__price {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.order-card__price span {
font-size: 11px;
font-weight: 500;
color: var(--text-soft);
letter-spacing: 0.04em;
margin-left: 3px;
}
.order-hint {
font-size: 13px;
color: var(--text-mute);
margin-top: 4px;
margin-bottom: 20px;
}
.order-hint a { color: var(--accent); text-decoration: none; font-weight: 500; }
.order-hint a:hover { text-decoration: underline; }
/* Summary */
.order-summary {
background: var(--bg-alt);
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
padding: 18px 20px;
margin-bottom: 22px;
}
.order-summary__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
font-size: 14px;
color: var(--text-mute);
}
.order-summary__row + .order-summary__row { border-top: 1px solid var(--line-soft); }
.order-summary__row strong { color: var(--text); font-weight: 600; }
.order-summary__row--total {
border-top: 2px solid var(--line) !important;
padding-top: 14px;
margin-top: 4px;
font-size: 16px;
}
.order-summary__row--total strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.order-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
margin-top: 20px;
}
.order-note {
font-size: 12.5px;
color: var(--text-soft);
}
.order-help {
text-align: center;
font-size: 14px;
color: var(--text-mute);
margin-top: 24px;
}
.order-help a { color: var(--accent); text-decoration: none; font-weight: 500; }
/* ---------- Footer ---------- */
.footer {
background: var(--bg);
color: rgba(250,247,241,0.7);
padding: 32px 0 16px;
border-top: 1px solid var(--line);
}
.footer-inner {
display: grid;
grid-template-columns: 1fr;
gap: 36px;
}
@media (min-width: 720px) {
.footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
}
.footer-brand .logo-word { color: var(--text-invert); }
.footer-brand p {
margin-top: 14px;
font-size: 14px;
color: rgba(250,247,241,0.55);
line-height: 1.5;
}
.footer-links h4 {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-invert);
margin-bottom: 16px;
}
.footer-links a {
display: block;
font-size: 14px;
color: rgba(250,247,241,0.55);
text-decoration: none;
padding: 6px 0;
transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--accent-2); }
.footer-bottom {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid rgba(250,247,241,0.08);
text-align: center;
font-size: 12px;
color: rgba(250,247,241,0.4);
}
/* ---------- Nav page links ---------- */
.nav-link--page {
font-size: 14.5px;
color: #dfe4ef;
text-decoration: none;
font-weight: 600;
transition: color 0.15s ease;
}
.nav-link--page:hover { color: #fff; }
/* ---------- Hero centered variant ---------- */
.hero--centered {
padding: 88px 0 72px;
text-align: center;
}
.hero-centered-text {
max-width: 780px;
margin: 0 auto;
}
.hero-centered-text h1 {
margin-bottom: 0;
}
.hero-centered-text .lede {
margin-top: 24px;
max-width: 580px;
}
.hero-trust-badges {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
margin: 28px 0;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--text-mute);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 14px;
}
/* Glowing status "light" on each hero trust badge */
.hero-badge::before {
content: "";
width: 7px; height: 7px; border-radius: 50%;
flex: 0 0 auto;
background: var(--accent);
animation: heroBadgePulse 2.4s ease-in-out infinite;
}
.hero-badge:nth-child(2)::before { animation-delay: -0.8s; }
.hero-badge:nth-child(3)::before { animation-delay: -1.6s; }
@keyframes heroBadgePulse {
0%, 100% { box-shadow: 0 0 5px 0 var(--accent-glow); opacity: 0.8; }
50% { box-shadow: 0 0 11px 2px var(--accent-glow); opacity: 1; }
}
/* Hero visual centered */
.hero-visual--centered {
margin-top: 56px;
min-height: 240px;
justify-content: center;
}
/* 6-card material row in hero */
.hero-cards-fan {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
width: 100%;
max-width: 560px;
margin: 0 auto;
padding: 28px;
background: rgba(255,255,255,0.035);
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 20px 60px rgba(13, 197, 180,0.10), var(--shadow-md);
backdrop-filter: blur(8px);
}
.hero-mock {
width: 184px;
height: 116px;
flex-shrink: 0;
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
overflow: hidden;
border-radius: 12px;
padding: 0;
display: block;
box-shadow: 0 16px 36px rgba(20,17,15,0.28), 0 4px 10px rgba(20,17,15,0.16);
}
/* Glossy diagonal highlight for a real-card sheen */
.hero-mock .mock-sheen {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: linear-gradient(125deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.07) 26%, transparent 46%);
}
/* Crisp inner edge: top light, bottom shadow → printed-card depth */
.hero-mock::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
box-shadow: inset 0 1px 1.5px rgba(255,255,255,0.4), inset 0 -2px 5px rgba(0,0,0,0.16);
}
.hero-mock .mock-mono {
position: absolute; top: 13px; left: 15px; z-index: 3;
font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1;
}
.hero-mock .mock-nfc {
position: absolute; top: 13px; right: 14px; z-index: 3;
width: 18px; height: 18px; opacity: 0.9;
}
.hero-mock .mock-nfc svg { width: 100%; height: 100%; display: block; }
.hero-mock .material-card__mock-label {
position: absolute; bottom: 13px; left: 15px; z-index: 3;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.62;
}
.hero-cards-fan .hero-mock {
position: relative;
left: auto; top: auto;
width: 100%;
height: auto;
aspect-ratio: 1.586 / 1;
margin: 0;
transform: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 8px 20px rgba(20,17,15,0.18);
}
.hero-cards-fan { position: relative; }
/* Cards sit straight and static — no float animation, no splay rotation. */
.hero-cards-fan .hero-mock {
position: relative;
z-index: 1;
rotate: 0deg;
transition: box-shadow 0.2s ease, filter 0.2s ease;
}
/* Hover: subtle lift with light + shadow (no movement). */
.hero-cards-fan .hero-mock:hover {
box-shadow: 0 18px 40px rgba(20,17,15,0.32);
filter: brightness(1.07);
z-index: 3;
}
/* ---------- Hero: four finished card designs ----------
Each card is its own container, so every dimension below is in cqw and the
whole design scales with the card instead of breaking at small widths. */
.hero-cards-fan .hero-card {
container-type: inline-size;
position: relative;
z-index: 1;
aspect-ratio: 1.586 / 1;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 6.5%;
font-family: var(--font-ui);
box-shadow: 0 8px 20px rgba(20,17,15,0.22);
transition: box-shadow 0.2s ease, filter 0.2s ease;
}
.hero-cards-fan .hero-card:hover {
box-shadow: 0 18px 40px rgba(20,17,15,0.36);
filter: brightness(1.06);
z-index: 3;
}
/* Rows: header / name block / footer */
.hero-card .hc-top {
display: flex; align-items: flex-start; justify-content: space-between;
position: relative; z-index: 2;
}
.hero-card .hc-body {
flex: 1; display: flex; flex-direction: column; justify-content: center;
padding: 2cqw 0; position: relative; z-index: 2;
}
.hero-card .hc-foot {
display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqw;
position: relative; z-index: 2;
}
/* Type */
.hero-card .hc-name {
font-family: var(--font-display);
font-weight: 700; font-size: 5.6cqw; letter-spacing: -0.02em; line-height: 1.05;
}
.hero-card .hc-name--xl { font-size: 9cqw; letter-spacing: -0.03em; }
.hero-card .hc-tag { font-size: 2.6cqw; line-height: 1.35; margin-top: 1.4cqw; opacity: 0.78; }
.hero-card .hc-site { font-size: 2.6cqw; opacity: 0.85; }
/* Boxed monogram mark — an alternate to the stacked-bar logo (bold layout) */
.hero-card .hc-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 9.5cqw; height: 9.5cqw; border-radius: 2.4cqw;
font-family: var(--font-display); font-weight: 700; font-size: 6cqw; line-height: 1;
background: var(--hc-accent); color: #fff;
}
.hero-card--matte .hc-badge { background: #e9edf0; color: #17191b; }
.hero-card .hc-tap {
display: inline-flex; align-items: center; gap: 1.4cqw;
color: var(--hc-accent);
font-size: 1.9cqw; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
/* Stacked-bar logo mark (stands in for the customer's real logo) */
.hero-card .hc-logo { display: flex; flex-direction: column; gap: 0.9cqw; }
.hero-card .hc-logo i { display: block; height: 1.3cqw; border-radius: 999px; background: currentColor; }
.hero-card .hc-logo i:nth-child(1) { width: 3.2cqw; }
.hero-card .hc-logo i:nth-child(2) { width: 5.8cqw; }
.hero-card .hc-logo i:nth-child(3) { width: 8.8cqw; }
.hero-card .hc-nfc { width: 3.4cqw; height: 3.4cqw; flex: 0 0 auto; }
.hero-card .hc-nfc--corner { width: 4.6cqw; height: 4.6cqw; color: var(--hc-accent); }
.hero-card .hc-qr {
background: #fff; border-radius: 1.4cqw; padding: 1cqw; line-height: 0; flex: 0 0 auto;
}
.hero-card .hc-qr img { display: block; width: 14cqw; height: 14cqw; }
.hero-card .hc-pill {
display: inline-flex; align-items: center; gap: 1.2cqw;
background: var(--hc-accent); color: #fff;
padding: 1.4cqw 3cqw; border-radius: 999px;
font-size: 1.9cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
/* 1 · Playful — light mint, tap-me pill */
.hero-card--mint {
--hc-accent: #4f9e8f;
background: linear-gradient(135deg, #f4fbf9 0%, #dcefe9 100%);
color: #1a1d1f;
}
.hero-card--mint .hc-logo { color: #5aa99a; }
/* 2 · Split — dark slate with an accent edge */
.hero-card--stripe {
--hc-accent: #4ecfb5;
background: linear-gradient(135deg, #363c4d 0%, #23272f 100%);
color: #fff;
padding-left: 11%;
}
.hero-card--stripe .hc-stripe {
position: absolute; left: 0; top: 0; bottom: 0; width: 4.5%; z-index: 1;
background: linear-gradient(180deg, #6ed9c0 0%, #46b39d 100%);
}
/* 3 · Monogram — deep green with an initial watermark */
.hero-card--mono {
--hc-accent: #4ecfb5;
background: linear-gradient(135deg, #1f4f45 0%, #14302b 100%);
color: #fff;
}
.hero-card--mono .hc-mono {
position: absolute; right: -2cqw; top: -8cqw; z-index: 1;
font-family: var(--font-display); font-weight: 600; font-size: 52cqw; line-height: 1;
color: #fff; opacity: 0.07; pointer-events: none;
}
/* 4 · Minimal — clear PVC. A real clear card is transparent plastic: the page
behind it has to show through almost untouched, so the fill is a whisper of
white and the blur is barely there. What sells it as plastic is the edge — a
bright rim, a lit top edge, and a specular streak across the face. The art is
printed in white ink, the way clear cards actually are. */
.hero-card--clear {
--hc-accent: #4ee0cc;
background: linear-gradient(135deg,
rgba(255,255,255,0.10) 0%,
rgba(255,255,255,0.04) 45%,
rgba(255,255,255,0.08) 100%);
backdrop-filter: blur(1.5px) saturate(108%) brightness(1.06);
-webkit-backdrop-filter: blur(1.5px) saturate(108%) brightness(1.06);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.30),
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -1px 0 rgba(255,255,255,0.16),
0 10px 26px rgba(0,0,0,0.28);
color: #ffffff;
}
.hero-card--clear::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(118deg,
rgba(255,255,255,0) 18%,
rgba(255,255,255,0.22) 38%,
rgba(255,255,255,0.05) 47%,
rgba(255,255,255,0) 62%);
}
.hero-card--clear::after {
content: '';
position: absolute;
z-index: 0;
pointer-events: none;
width: 42cqw;
aspect-ratio: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: repeating-radial-gradient(circle,
rgba(255,255,255,0.22) 0 0.35cqw,
rgba(255,255,255,0) 0.35cqw 1.7cqw);
mask-image: radial-gradient(circle, #000 58%, transparent 74%);
-webkit-mask-image: radial-gradient(circle, #000 58%, transparent 74%);
opacity: 0.45;
}
/* White-ink print: the tagline is a lighter pass, the QR keeps its printed
white backing plate so it still scans against a see-through card. */
.hero-card--clear .hc-tag { opacity: 0.72; }
.hero-card--clear .hc-site { opacity: 0.9; }
/* 5 · Luxury metal — brushed gold. Art is laser-etched, so the QR is
engraved into the metal rather than printed on a white sticker. */
.hero-card--gold {
--hc-accent: #6b5417;
background:
linear-gradient(115deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0.28) 46%, rgba(255,255,255,0) 68%),
linear-gradient(135deg, #e6c471 0%, #c9a648 40%, #a8842c 72%, #dcb85f 100%);
color: #2b2410;
}
.hero-card--gold .hc-logo { color: #4a3a12; }
.hero-card--gold .hc-tag { opacity: 0.72; }
/* 6 · Luxury metal — matte black */
.hero-card--matte {
--hc-accent: #9aa3ab;
background:
linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 74%),
linear-gradient(135deg, #3a3d41 0%, #26282b 45%, #17191b 100%);
color: #e9edf0;
}
.hero-card--matte .hc-logo { color: #c8ced4; }
/* Krynta — light lavender PVC with a purple monogram watermark */
.hero-card--krynta {
--hc-accent: #7c5cff;
background: linear-gradient(135deg, #efe9ff 0%, #e7ddfb 52%, #f4efff 100%);
color: #1c1633;
}
.hero-card--krynta .hc-mono {
position: absolute; right: 3cqw; top: 50%; transform: translateY(-52%);
font-family: var(--font-display); font-weight: 700; font-size: 66cqw; line-height: 1;
color: #7c5cff; opacity: 0.16; pointer-events: none; z-index: 1;
}
.hero-card--krynta .hc-tag { opacity: 0.72; }
.hero-card .hc-avatar { display: inline-flex; }
.hero-card .hc-avatar svg { width: 9cqw; height: 9cqw; display: block; }
/* Luxury metal — brushed silver */
.hero-card--silver {
--hc-accent: #5c6470;
background:
linear-gradient(115deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0.34) 48%, rgba(255,255,255,0) 70%),
linear-gradient(135deg, #e8ebee 0%, #c3c9d0 42%, #9aa1ab 74%, #d5d9de 100%);
color: #24282e;
}
.hero-card--silver .hc-logo { color: #3a3f47; }
.hero-card--silver .hc-tag { opacity: 0.72; }
/* Etched QR sits straight on the metal — no white backing plate */
.hero-card .hc-qr--etched { background: transparent; padding: 0; border-radius: 0; }
.hero-card--stripe .hc-logo,
.hero-card--mono .hc-logo { color: #1A1815; }
.hero-card--clear .hc-logo { color: rgba(255,255,255,0.9); }
/* Material caption under each card */
.hero-card-item { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.hero-card-label {
font-family: var(--font-ui);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
text-align: center;
}
/* Animated "paste your website" cue pointing at the hero input. */
.hero-form { position: relative; }
.hero-cue {
display: inline-flex;
align-items: flex-end;
gap: 9px;
margin: 0 0 8px 6px;
color: var(--accent);
animation: heroCueBob 2.3s ease-in-out infinite;
pointer-events: none;
}
.hero-cue__arrow { width: 46px; height: 36px; flex: 0 0 auto; transform: rotate(-2deg); }
.hero-cue__label {
font-family: var(--font-display);
font-style: italic;
font-size: 16px;
font-weight: 500;
line-height: 1.1;
padding-bottom: 4px;
white-space: nowrap;
}
@keyframes heroCueBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
/* Soft attention glow on the hero input so the eye lands where you type. */
@keyframes heroPillGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(13, 197, 180,0.0), var(--shadow-md); }
50% { box-shadow: 0 0 0 5px rgba(13, 197, 180,0.14), var(--shadow-md); }
}
.hero-form .url-pill { animation: heroPillGlow 2.8s ease-in-out infinite; }
.hero-form .url-pill:focus-within { animation: none; } /* stop nudging once they engage */
@media (max-width: 760px) {
.hero-cards-fan { max-width: 380px; padding: 18px; gap: 12px; }
/* "…website or LinkedIn" is too long to hold one line on a phone. */
.hero-cue__label { font-size: 14px; white-space: normal; }
.hero-cue__arrow { width: 38px; height: 30px; }
}
/* Card stack row mode (hero centered) */
.card-stack--row {
position: relative;
width: 100%;
max-width: 900px;
height: 200px;
margin: 0 auto;
}
/* Override the fan arrangement for centered hero row */
.hero-visual--centered .card-stack--row .card--cork { z-index: 1; --card-tx: -80%; --card-ty: 5%; --card-rot: -8deg; }
.hero-visual--centered .card-stack--row .card--violet { z-index: 2; --card-tx: -40%; --card-ty: -3%; --card-rot: -4deg; }
.hero-visual--centered .card-stack--row .card--mint { z-index: 5; --card-tx: 0%; --card-ty: -8%; --card-rot: 0deg; }
.hero-visual--centered .card-stack--row .card--coral { z-index: 2; --card-tx: 40%; --card-ty: -3%; --card-rot: 4deg; }
.hero-visual--centered .card-stack--row .card--pvc { z-index: 1; --card-tx: 80%; --card-ty: 5%; --card-rot: 8deg; }
@media (max-width: 860px) {
.hero-visual--centered { min-height: 220px; }
.card-stack--row { height: 160px; max-width: 660px; }
.card-stack--row .card { width: 220px; height: 140px; }
.hero-visual--centered .card-stack--row .card--cork { --card-tx: -70%; }
.hero-visual--centered .card-stack--row .card--violet { --card-tx: -35%; }
.hero-visual--centered .card-stack--row .card--coral { --card-tx: 35%; }
.hero-visual--centered .card-stack--row .card--pvc { --card-tx: 70%; }
}
@media (max-width: 560px) {
.hero--centered { padding: 60px 0 48px; }
.hero-visual--centered { display: none; }
}
/* ---------- Trust bar ---------- */
.trust-bar {
background: var(--bg-soft);
padding: 16px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
/* A short edge fade only — just enough to soften the clip at each end. The old
7% ramp (and a wider one) left a big dim zone where items were legible but
washed out; keeping it tight means almost the whole strip reads at full
contrast, which is the point of the bar. */
.trust-marquee {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
.trust-track {
display: flex;
width: max-content;
animation: trust-scroll 30s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
/* Two identical groups; translating by half the track loops seamlessly */
.trust-group {
display: flex;
align-items: center;
flex-shrink: 0;
}
@keyframes trust-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.trust-item {
position: relative;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 0 30px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.01em;
white-space: nowrap;
}
/* Dot sits midway between neighbours, including across the loop seam */
.trust-item::after {
content: "";
position: absolute;
right: -2px;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
border-radius: 50%;
background: var(--accent);
opacity: 0.55;
}
.trust-item__ic { font-size: 15px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
.trust-track { animation: none; width: 100%; justify-content: center; }
.trust-group + .trust-group { display: none; }
.trust-marquee { -webkit-mask-image: none; mask-image: none; }
}
/* ---------- Materials section (new) ---------- */
.materials-section {
padding: var(--section-pad) 0;
background: var(--bg-alt);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.materials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1140px;
margin: 0 auto;
}
.materials-grid--four { grid-template-columns: repeat(4, 1fr); max-width: 1180px; }
@media (max-width: 1080px) {
.materials-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
.materials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.materials-grid,
.materials-grid--four { grid-template-columns: 1fr; }
}
.material-card__price {
font-family: var(--font-display);
font-weight: 800;
font-size: 20px;
color: var(--text);
margin: 4px 0 14px;
}
.material-card__price small { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.material-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.material-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--accent-2);
}
.material-card--premium {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.material-card--premium:hover {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lg);
}
.material-card__visual {
height: 220px;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px;
}
.material-card__visual--photo {
padding: 0;
background: #F2F3F6;
}
.material-card__visual--photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.material-card__visual--pvc {
background: radial-gradient(80% 60% at 50% 40%, #EEF1F6 0%, #DDE2EB 100%);
}
.material-card__visual--dual {
background: radial-gradient(80% 60% at 50% 40%, #E4E9F7 0%, #AEBBD8 100%);
}
.material-card__visual--metal {
background: radial-gradient(80% 60% at 50% 40%, #E8ECF0 0%, #B8BFC8 100%);
}
.material-card__visual--colour {
background: radial-gradient(80% 60% at 50% 40%, #FDF0F4 0%, #F3D5E8 45%, #CFE0F8 100%);
}
.material-card__visual--clear {
background: radial-gradient(80% 60% at 50% 40%, #EEF4FF 0%, #C8D8F8 100%);
}
.material-card__visual--eco {
background: radial-gradient(80% 60% at 50% 40%, #E8F5E0 0%, #B8D898 100%);
}
/* ============================================================
Simulated card designs (materials grid)
Each material shows a different fictional brand on a different layout, so
the row reads as four real cards rather than four copies of one photo.
The three metals are laser-engraved: their marks are cut from the metal's
own tone (dark etch + light rim on gold/silver, light etch on matte), never
a brand colour. Only Classic PVC is printed in full colour.
============================================================ */
.material-card__visual--sim {
background: radial-gradient(80% 60% at 50% 38%, #EFF2F7 0%, #D7DDE7 100%);
perspective: 700px;
}
.simcard {
position: relative;
width: 208px;
aspect-ratio: 1.586; /* ISO ID-1, same as the real card */
border-radius: 9px;
padding: 12px 13px;
display: flex; flex-direction: column; justify-content: space-between;
overflow: hidden;
font-family: var(--font-ui);
box-shadow: 0 10px 26px rgba(10,18,38,0.28), 0 2px 6px rgba(10,18,38,0.16);
transform: rotate(-2deg);
transition: transform 0.35s ease;
}
.material-card:hover .simcard { transform: rotate(0deg) translateY(-2px); }
/* Shared bits */
.simcard__brand { font-family: var(--font-display); font-size: 11px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.simcard__brand b { font-weight: 700; }
.simcard__brand--wide { letter-spacing: 0.02em; }
.simcard__sub { font-size: 6.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.simcard__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.simcard__who b { font-size: 9px; font-weight: 700; letter-spacing: -0.01em; }
.simcard__who i { font-style: normal; font-size: 6.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.78; }
.simcard__who u { text-decoration: none; font-size: 6.5px; letter-spacing: 0.05em; opacity: 0.7; margin-top: 2px; }
.simcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.simcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.simcard__tap { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.simcard__tap svg { width: 12px; height: 12px; opacity: 0.8; }
.simcard__tap--corner { position: absolute; right: 13px; bottom: 12px; }
/* QR stand-in — see the #qr-mock symbol; inherits each card's engraving tone */
.simcard__qr {
width: 26px; height: 26px; flex: 0 0 auto;
display: block;
opacity: 0.92;
}
/* Stacked-bar brand mark */
.simcard__mark { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; padding-top: 2px; }
.simcard__mark i { display: block; height: 2.5px; border-radius: 999px; }
.simcard__mark i:nth-child(1) { width: 6px; }
.simcard__mark i:nth-child(2) { width: 11px; }
.simcard__mark i:nth-child(3) { width: 16px; }
/* ---------- Classic PVC — printed, full colour ---------- */
.simcard--pvc {
background: #fff;
color: #101828;
box-shadow: 0 10px 26px rgba(10,18,38,0.24), 0 0 0 1px rgba(16,24,40,0.07);
}
.simcard--pvc .simcard__top { padding-left: 6px; }
.simcard__bar {
position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: linear-gradient(180deg, #0AA597, #1E3FAF);
}
.simcard__mark--pvc i:nth-child(1) { background: #7BA6FA; }
.simcard__mark--pvc i:nth-child(2) { background: #0DC5B4; }
.simcard__mark--pvc i:nth-child(3) { background: #0AA597; }
.simcard--pvc .simcard__foot { padding-left: 6px; }
.simcard--pvc .simcard__who u { color: #0AA597; opacity: 1; font-weight: 600; }
.simcard--pvc .simcard__tap { color: #101828; }
.simcard--pvc .simcard__tap svg { color: #0AA597; opacity: 1; }
/* ---------- Metal — brushed finish, laser engraving ----------
The brushed grain and the etch tone come from the metal itself, so a brand
colour can never leak in. */
.simcard--gold,
.simcard--silver,
.simcard--matte { text-shadow: 0 1px 0 var(--sim-rim); }
.simcard--gold::after,
.simcard--silver::after,
.simcard--matte::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
repeating-linear-gradient(102deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 3px),
linear-gradient(118deg, rgba(255,255,255,0.34) 0%, transparent 34%, transparent 62%, rgba(255,255,255,0.20) 100%);
mix-blend-mode: soft-light;
}
.simcard--gold {
--sim-rim: rgba(255,244,214,0.42);
background: linear-gradient(126deg, #E9CE93 0%, #C79E4F 38%, #B78A38 62%, #E4C689 100%);
color: #5A431A;
}
.simcard--gold .simcard__mark i,
.simcard--gold .simcard__rule { background: currentColor; opacity: 0.8; }
.simcard--silver {
--sim-rim: rgba(255,255,255,0.6);
background: linear-gradient(126deg, #DBE0E7 0%, #A9B2BE 36%, #939CAA 62%, #C9D0D9 100%);
color: #2E3742;
}
/* Silver's rim highlight is the brightest of the three, so its etch needs the
least help from the soft-light pass or the type goes milky. */
.simcard--silver::after { opacity: 0.7; }
.simcard--silver .simcard__mark i { background: currentColor; opacity: 0.75; }
.simcard--silver .simcard__rail { background: currentColor; opacity: 0.55; }
.simcard--matte {
--sim-rim: rgba(0,0,0,0.55);
background: linear-gradient(126deg, #35353B 0%, #212126 42%, #17171B 100%);
color: #C9CBD2;
}
.simcard--matte::after { background: repeating-linear-gradient(102deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px); }
/* Gold — centred monogram */
.simcard__centre { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding-top: 6px; }
.simcard__monogram { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.06em; line-height: 1; }
.simcard__monogram span { font-size: 13px; opacity: 0.7; margin: 0 1px; }
.simcard__rule { display: block; width: 46px; height: 1px; }
.simcard--gold .simcard__foot { align-items: flex-end; }
/* Silver — hairline rail down the left */
.simcard--silver { padding: 0; }
.simcard__split { display: flex; gap: 11px; flex: 1; padding: 12px 13px; }
.simcard__rail { width: 1.5px; flex: 0 0 auto; border-radius: 1px; }
.simcard__col { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; flex: 1; }
.simcard--silver .simcard__mark { padding-top: 0; }
/* Matte — oversized initial behind the type */
.simcard__big {
position: absolute; right: 8px; bottom: -20px;
font-family: var(--font-display); font-size: 78px; font-weight: 700; line-height: 1;
color: currentColor; opacity: 0.12; text-shadow: none;
}
.simcard--matte .simcard__foot { position: relative; z-index: 1; }
@media (max-width: 1080px) { .simcard { width: 100%; max-width: 236px; } }
/* ---------- Real design templates as material samples ----------
The four material cards show our actual editor layouts (PVC in Corporate; the
three metals in Corporate, Stripe and Bold) rendered from the same card markup
a customer approves — not a
bespoke mock. The face is authored once at the editor's native 420px width and
scaled into the 208px slot (--tc-s = 208/420), so proportions match the proofs
we print. Finishes (PVC / gold / silver / matte) reuse the simcard palette. */
.tmpl-frame {
width: 208px; max-width: 100%;
aspect-ratio: 1.586; position: relative;
transform: rotate(-2deg); transition: transform 0.35s ease;
}
.material-card:hover .tmpl-frame { transform: rotate(0deg) translateY(-2px); }
.tmpl-card {
--tc-s: 0.4952; /* 208 / 420 */
width: 420px; height: 264.8px;
position: absolute; top: 0; left: 0;
transform: scale(var(--tc-s)); transform-origin: top left;
border-radius: 16px; padding: 6%; overflow: hidden;
display: flex; flex-direction: column;
font-family: var(--font-ui); font-size: 13px; line-height: 1.2;
container-type: inline-size;
color: var(--ink);
box-shadow: 0 16px 40px rgba(10,18,38,0.30), 0 3px 8px rgba(10,18,38,0.16);
}
.tmpl-card::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
}
.tmpl-card > .cs-mid { flex: 1; min-height: 0; }
.tmpl-card .cs-row, .tmpl-card .cs-foot { flex-shrink: 0; }
.tmpl-card .cs-row { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.tmpl-card .cs-foot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 1; }
.tmpl-card .cs-name {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(18px, 7cqw, 30px); letter-spacing: -0.02em; line-height: 1.05;
}
.tmpl-card .cs-tag {
font-family: var(--font-ui); font-size: 11px; opacity: 0.62; letter-spacing: 0.04em;
margin-top: 6px; max-width: 62%;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tmpl-card .cs-logo-bars { display: flex; flex-direction: column; gap: 3px; }
.tmpl-card .cs-logo-bars .bar { display: block; height: 5px; border-radius: 1px; background: var(--logo); }
.tmpl-card .cs-nfc { width: 22px; height: 22px; opacity: 0.9; color: var(--accent); }
.tmpl-card .cs-qr { width: 52px; height: 52px; line-height: 0; color: var(--ink); }
.tmpl-card .cs-qr.box { background: #fff; padding: 5px; border-radius: 4px; color: #0b1220; box-sizing: border-box; }
.tmpl-card .cs-qr svg { width: 100%; height: 100%; display: block; }
.tmpl-card .cs-tapword {
display: inline-flex; align-items: center; gap: 6px; color: var(--accent);
font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
/* Finishes — same palette as the simcards */
.tmpl-card--pvc {
--ink: #101828; --accent: #0AA597; --logo: #0AA597;
background: #fff; box-shadow: 0 16px 40px rgba(10,18,38,0.24), 0 0 0 1px rgba(16,24,40,0.07);
}
.tmpl-card--gold { --ink: #5A431A; --accent: #5A431A; --logo: #5A431A;
background: linear-gradient(126deg, #E9CE93 0%, #C79E4F 38%, #B78A38 62%, #E4C689 100%); }
.tmpl-card--silver { --ink: #2E3742; --accent: #2E3742; --logo: #2E3742;
background: linear-gradient(126deg, #DBE0E7 0%, #A9B2BE 36%, #939CAA 62%, #C9D0D9 100%); }
.tmpl-card--matte { --ink: #C9CBD2; --accent: #C9CBD2; --logo: #C9CBD2;
background: linear-gradient(126deg, #35353B 0%, #212126 42%, #17171B 100%); }
.tmpl-card--metal::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: soft-light;
background:
repeating-linear-gradient(102deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 3px),
linear-gradient(118deg, rgba(255,255,255,0.34) 0%, transparent 34%, transparent 62%, rgba(255,255,255,0.20) 100%);
}
.tmpl-card--matte.tmpl-card--metal::before {
background: repeating-linear-gradient(102deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
}
/* Template-specific bits */
.tmpl-card .cs-corp-name { border-left: 3px solid var(--accent); padding-left: 16px; }
.tmpl-card .cs-mono-ghost {
position: absolute; right: -4%; top: -12%;
font-family: var(--font-display); font-weight: 700; font-size: 240px; line-height: 1;
color: var(--accent); opacity: 0.13; pointer-events: none; z-index: 0;
}
.tmpl-card .cs-name--mono { font-weight: 300; font-size: clamp(24px, 10cqw, 42px); letter-spacing: -0.03em; line-height: 0.95; }
.tmpl-card .cs-split-band {
position: absolute; left: 0; right: 0; top: 0; height: 30%;
background: var(--accent); display: flex; align-items: center; justify-content: space-between; padding: 0 7%; z-index: 1;
}
.tmpl-card .cs-split-band .cs-nfc { color: var(--band-ink); }
.tmpl-card .cs-split-band .cs-logo-bars .bar { background: var(--band-ink); }
/* Stripe — an accent spine down the left edge, content nudged clear of it */
.tmpl-card--stripe { padding-left: 11%; }
.tmpl-card .cs-stripe-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: var(--accent); z-index: 1; }
/* Bold — name dropped to the baseline over an accent rule with an uppercase tag */
.tmpl-card .cs-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.tmpl-card .cs-bold-rule { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tmpl-card .cs-bold-rule .line { height: 1px; flex: 1; background: var(--accent); opacity: 0.5; }
.tmpl-card .cs-bold-tag {
font-family: var(--font-ui); font-size: 10px; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent);
}
@media (max-width: 1080px) { .tmpl-frame { width: 236px; } .tmpl-card { --tc-s: 0.562; } }
/* Plain variant — a blank card showing just the material, mark and tap
hardware, no brand text. Used on the "Confirm the design" material picker so
the customer sees the finish they're choosing, not a fictional brand. */
.simcard--plain { justify-content: space-between; }
.simcard--plain .simcard__mark { align-self: flex-start; }
.simcard--plain .simcard__tap { align-self: flex-end; }
/* Matte's mark has no colour rule of its own (its brand layout used the big N);
give it the engraved tone so the plain card isn't blank up top. */
.simcard--matte .simcard__mark i { background: currentColor; opacity: 0.85; }
/* Material previews on the confirm-design cards: the sim card floats on the
soft panel instead of a full-bleed photo. */
.order-card__preview--sim { padding: 22px 16px; }
.order-card__preview--sim .simcard {
width: 100%; max-width: 188px;
transform: none; /* the picker reads cleaner flat than tilted */
}
/* Card mock shapes inside material visuals */
.material-card__mock {
width: 170px;
height: 107px;
border-radius: 9px;
box-shadow: 0 8px 28px rgba(0,0,0,0.22);
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 9px 12px;
}
.material-card__mock-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.55;
}
.material-card__mock--pvc {
background: linear-gradient(135deg, #F5F3EF 0%, #E2DDD5 100%);
color: #1A1815;
}
.material-card__mock--dual {
background:
linear-gradient(135deg, #E8C766 0%, #B8912E 100%) 12px 62% / 26px 18px no-repeat,
linear-gradient(135deg, #26314A 0%, #101828 100%);
color: #7FE8DE;
border: 1px solid rgba(255,255,255,0.14);
}
.material-card__mock--metal {
background: linear-gradient(135deg, #D8DDE6 0%, #9AA2B0 50%, #C8CDD8 100%);
color: #2A3040;
}
.material-card__mock--colour {
background: linear-gradient(135deg, #F43F5E 0%, #F59E0B 32%, #10B981 66%, #0AA597 100%);
color: #FFFFFF;
}
.material-card__mock--clear {
background: linear-gradient(135deg, rgba(210,225,255,0.6) 0%, rgba(170,195,245,0.4) 100%);
border: 1.5px solid rgba(140,170,230,0.35);
color: #2A3A7A;
}
.material-card__mock--eco {
background: linear-gradient(135deg, #C8E0A8 0%, #88B860 100%);
color: #1A3A10;
}
/* Coming soon state */
.material-card--coming-soon {
opacity: 0.82;
}
.material-card--coming-soon:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--line);
}
.material-card__coming-soon {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text-soft);
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 16px;
margin-top: auto;
width: fit-content;
}
/* Back-to-URL button in step 2 */
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 0;
font-size: 14px;
font-weight: 500;
color: var(--text-soft);
cursor: pointer;
margin-bottom: 18px;
transition: color 0.15s;
}
.back-link:hover { color: var(--accent); }
/* Badge colour variants */
.material-card__badge--luxury {
background: #FEF3C7;
color: #92400E;
}
.material-card__badge--colour {
background: #FDF2F8;
color: #BE185D;
}
.material-card__badge--transparent {
background: #EFF6FF;
color: #1D4ED8;
}
.material-card__badge--eco {
background: #F0FDF4;
color: #166534;
}
.material-card__body {
padding: 28px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.material-card__body h3 {
margin: 0;
font-size: clamp(20px, 2.2vw, 26px);
}
.material-card__body p {
color: var(--text-mute);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.material-card__badge {
display: inline-block;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: var(--bg-soft);
color: var(--text-mute);
width: fit-content;
}
.material-card__badge--premium {
background: var(--accent-soft);
color: var(--accent-deep);
}
.material-card__features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.material-card__features li {
font-size: 14px;
color: var(--text-mute);
padding-left: 20px;
position: relative;
}
.material-card__features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--accent);
font-weight: 700;
font-size: 13px;
}
.material-card__price {
font-family: var(--font-ui);
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
margin-top: auto;
padding-top: 4px;
}
.material-card__price span {
font-size: 13px;
font-weight: 500;
color: var(--text-soft);
letter-spacing: 0.04em;
margin-left: 3px;
}
.material-card__body .btn {
width: 100%;
justify-content: center;
}
/* ---------- Footer multi-column (updated) ---------- */
.footer-inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 32px;
padding-top: 22px;
padding-bottom: 19px;
}
@media (max-width: 720px) {
.footer-inner { grid-template-columns: 1fr; gap: 19px; padding-top: 19px; }
}
.footer-col {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-brand p {
font-size: 14px;
color: rgba(250,247,241,0.78);
line-height: 1.55;
max-width: 280px;
}
.footer-logo .logo-word { color: #fff; }
.footer-logo .logo-mark { color: #fff; }
.footer-copy {
font-size: 12px;
color: rgba(250,247,241,0.55);
margin-top: 6px;
}
.footer-social {
display: flex;
gap: 10px;
margin-top: 2px;
}
.footer-social__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 9px;
color: rgba(250,247,241,0.78);
background: rgba(250,247,241,0.08);
transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.footer-social__link:hover {
color: #fff;
background: var(--accent);
transform: translateY(-1px);
}
.footer-social__link svg { width: 18px; height: 18px; display: block; }
.footer-links-heading {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
margin: 0 0 4px;
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.footer-links a {
font-size: 14px;
color: rgba(250,247,241,0.78);
text-decoration: none;
transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--accent-2); }
.footer-text-mute {
font-size: 14px;
color: rgba(250,247,241,0.6);
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
/* ---------- Review cards section ---------- */
.review-section {
padding: var(--section-pad) 0;
border-top: 1px solid var(--line-soft);
background: var(--bg-alt);
}
.review-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 860px) { .review-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.review-copy .section-lede { margin-top: 18px; }
.review-features { margin-top: 22px; }
.review-cta-row {
display: flex;
align-items: center;
gap: 22px;
margin-top: 30px;
flex-wrap: wrap;
}
.review-price {
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
color: var(--text);
}
.review-price small {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--text-mute);
}
.review-photos img {
width: 100%;
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
display: block;
}
/* ---------- Cardi for Business ---------- */
.business-section {
padding: var(--section-pad) 0;
border-top: 1px solid var(--line-soft);
background: var(--bg);
}
.business-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 860px) { .business-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; } }
.business-copy .section-lede { margin-top: 18px; }
.business-features { margin-top: 22px; }
.business-cta-row {
display: flex;
align-items: center;
gap: 18px;
margin-top: 30px;
flex-wrap: wrap;
}
.business-cta-note {
font-size: 13px;
color: var(--text-mute);
max-width: 240px;
line-height: 1.45;
}
@media (max-width: 859px) { .business-dash { order: 2; } }
/* Dashboard mock */
.biz-dash {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 22px;
box-shadow: var(--shadow-card);
}
.biz-dash__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.biz-dash__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
}
.biz-dash__range {
font-size: 12px;
color: var(--text-mute);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px 10px;
}
.biz-dash__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.biz-stat {
background: var(--bg-soft);
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
padding: 12px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.biz-stat__label {
font-size: 11px;
color: var(--text-mute);
line-height: 1.3;
}
.biz-stat__value {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
line-height: 1.2;
}
.biz-stat__delta {
font-size: 11px;
color: var(--accent);
font-weight: 600;
}
.biz-dash__board {
display: flex;
flex-direction: column;
gap: 10px;
}
.biz-dash__board-label {
font-size: 12px;
color: var(--text-mute);
margin-bottom: 2px;
}
.biz-row {
display: grid;
grid-template-columns: 72px 1fr 34px;
align-items: center;
gap: 10px;
}
.biz-row__name {
font-size: 12.5px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.biz-row__track {
display: block;
height: 6px;
border-radius: 4px;
background: var(--bg-soft);
overflow: hidden;
}
.biz-row__bar {
display: block;
height: 100%;
border-radius: 4px;
background: var(--accent);
}
.biz-row__val {
font-size: 12px;
color: var(--text-mute);
text-align: right;
font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
.biz-dash { padding: 16px; }
.biz-dash__stats { grid-template-columns: 1fr 1fr; }
.biz-stat:last-child { grid-column: 1 / -1; }
.biz-stat__value { font-size: 19px; }
}
/* ---------- Checkout add-ons ---------- */
.addons {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 26px;
}
.addon {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg);
border: 1.5px solid var(--line);
border-radius: var(--r-md);
padding: 10px 14px 10px 10px;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.addon:hover { border-color: var(--text-soft); }
.addon:has(input:checked) {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.addon input[type=checkbox] {
accent-color: var(--accent);
width: 16px;
height: 16px;
flex-shrink: 0;
}
.addon img {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.addon__name {
flex: 1;
font-size: 13.5px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.addon__name small {
display: block;
font-weight: 400;
color: var(--text-mute);
font-size: 12px;
}
.addon__price {
font-weight: 700;
font-size: 14px;
color: var(--accent);
white-space: nowrap;
}
/* ---------- Business packages ---------- */
.packages-section {
padding: var(--section-pad) 0;
border-top: 1px solid var(--line-soft);
}
.packages-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 880px) { .packages-grid { grid-template-columns: repeat(3, 1fr); } }
.package-card {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.package-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--accent-2);
}
.package-card--featured {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.package-card__flag {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--accent);
color: var(--text-invert);
padding: 5px 12px;
border-radius: 999px;
}
.package-card__imgs {
height: 180px;
background: #F2F3F6;
}
.package-card__imgs img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.package-card__body {
padding: 26px 26px 28px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.package-card__who {
color: var(--text-mute);
font-size: 14px;
margin: -6px 0 0;
}
.package-card__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.package-card__items li {
font-size: 14px;
color: var(--text-mute);
padding-left: 22px;
position: relative;
}
.package-card__items li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--accent);
font-weight: 700;
}
.package-card__pricing {
display: flex;
align-items: baseline;
gap: 12px;
margin-top: auto;
padding-top: 10px;
}
.package-card__was {
color: var(--text-soft);
text-decoration: line-through;
font-size: 15px;
}
.package-card__price {
font-family: var(--font-display);
font-size: 30px;
font-weight: 800;
color: var(--text);
}
.package-card__price small {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--text-mute);
}
/* Packs quoted on enquiry rather than sold at a fixed price */
.package-card__price--quote {
font-size: 24px;
letter-spacing: -0.01em;
}
.packages-note {
text-align: center;
color: var(--text-soft);
font-size: 13.5px;
margin-top: 32px;
}
/* ============================================================
Team dashboard showcase
============================================================ */
.dashboard-section {
padding: var(--section-pad) 0;
position: relative;
}
.dash-showcase {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
margin-top: clamp(36px, 5vw, 56px);
}
@media (max-width: 900px) {
.dash-showcase { grid-template-columns: 1fr; }
}
/* --- Mockup window --- */
.dash-window {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.dash-window__bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--bg-alt);
border-bottom: 1px solid var(--line-soft);
}
.dash-window__dots { display: inline-flex; gap: 6px; }
.dash-window__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dash-window__url {
flex: 1;
font-size: 12.5px;
color: var(--text-soft);
text-align: center;
font-family: var(--font-ui);
}
.dash-window__pill {
font-size: 11.5px;
font-weight: 600;
color: var(--accent-2);
background: var(--accent-soft);
border-radius: 999px;
padding: 4px 10px;
white-space: nowrap;
}
.dash-window__body { padding: clamp(16px, 2.4vw, 26px); }
.dash-greeting { margin-bottom: 18px; }
.dash-greeting__title { display: block; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text); }
.dash-greeting__meta { display: block; font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }
.dash-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.dash-stat {
background: var(--bg-alt);
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
padding: 12px 14px;
}
.dash-stat__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.dash-stat__value { display: block; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--text); margin-top: 4px; }
.dash-stat__delta { font-size: 11.5px; font-weight: 700; color: var(--accent-2); }
.dash-stat__sub { font-size: 12px; font-weight: 500; color: var(--text-soft); }
.dash-panel {
background: var(--bg-alt);
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
padding: 14px 16px;
margin-top: 12px;
}
.dash-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12.5px;
color: var(--text-mute);
margin-bottom: 12px;
}
.dash-panel__legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-soft); }
.dash-panel__legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
.dash-chart {
display: flex;
align-items: flex-end;
gap: 5px;
height: 96px;
}
.dash-chart span {
flex: 1;
background: linear-gradient(180deg, var(--accent-2), var(--accent));
border-radius: 3px 3px 0 0;
min-height: 3px;
opacity: 0.9;
}
.dash-chart span:last-child { opacity: 1; box-shadow: 0 0 14px var(--accent-glow); }
.dash-board { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.dash-board li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dash-board__rank {
width: 20px; height: 20px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft); color: var(--accent-2);
border-radius: 50%; font-size: 11px; font-weight: 700;
}
.dash-board__rank--owner { background: rgba(212,175,55,0.20); color: #E7C24B; }
.dash-board__name { flex: 0 0 auto; width: 150px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-board__bar { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.dash-board__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }
.dash-board__num { flex: 0 0 auto; width: 40px; text-align: right; color: var(--text-mute); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .dash-board__name { width: 96px; } }
/* --- Benefits --- */
.dash-benefits__title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(20px, 2.6vw, 26px);
line-height: 1.2;
color: var(--text);
margin-bottom: 22px;
}
.dash-benefit-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.dash-benefit { display: flex; gap: 14px; align-items: flex-start; }
.dash-benefit__icon {
flex: 0 0 auto;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft);
color: var(--accent-2);
border-radius: 11px;
}
.dash-benefit__icon svg { width: 22px; height: 22px; }
.dash-benefit h4 { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.dash-benefit p { font-size: 14px; color: var(--text-mute); line-height: 1.55; }
.dash-benefits__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.dash-benefits__note { font-size: 13px; color: var(--text-soft); }
/* ---------- Full-screen design mode ----------
After analysing, hide the marketing page so only the editor + checkout show. */
body.is-designing .nav,
body.is-designing .hero,
body.is-designing .trust-bar,
body.is-designing #how,
body.is-designing #materials,
body.is-designing #review-cards,
body.is-designing #packages,
body.is-designing #dashboard,
body.is-designing .footer {
display: none !important;
}
body.is-designing #step-2,
body.is-designing #step-3 {
border-top: 0;
padding-top: clamp(28px, 5vw, 48px);
}
/* Step 1 ("Paste your website") as its own full-screen page — same treatment as Step 2. */
body.is-capturing .nav,
body.is-capturing .hero,
body.is-capturing .trust-bar,
body.is-capturing #how,
body.is-capturing #materials,
body.is-capturing #review-cards,
body.is-capturing #packages,
body.is-capturing #dashboard,
body.is-capturing .footer {
display: none !important;
}
body.is-capturing #step-1 {
border-top: 0;
padding-top: clamp(28px, 5vw, 48px);
}
/* ============================================================
Warped-net background — let it show through major sections
Sections carry a translucent dark scrim so text stays crisp
while the mesh reads continuously behind the whole page.
============================================================ */
body.home .features,
body.home .product,
body.home .how,
body.home .variants,
body.home .compare,
body.home .materials-section,
body.home .packages-section,
body.home .dashboard-section,
body.home .flow-section {
background: rgba(6,10,20,0.42) !important;
}
/* …except the light sections, which are opaque and hide the net entirely. */
body.home .section-light {
background: var(--bg) !important;
}
body.home .trust-bar {
background: rgba(6,10,20,0.5) !important;
}
body.home .footer {
background: rgba(4,7,14,0.68) !important;
}
body.home .hero {
background:
radial-gradient(55% 45% at 85% 15%, rgba(13, 197, 180,0.16), transparent 70%),
radial-gradient(50% 50% at 5% 100%, rgba(13, 197, 180,0.10), transparent 70%),
linear-gradient(180deg, rgba(7,13,28,0.58) 0%, rgba(10,17,34,0.55) 100%) !important;
}
/* ============================================================
Hosted profile showcase (homepage)
Self-contained phone mockup that mirrors the real profile page.
============================================================ */
.profile-demo { padding: var(--section-pad) 0; }
.pf-showcase {
display: grid;
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
max-width: 980px;
margin: 48px auto 0;
}
@media (max-width: 800px) {
.pf-showcase { grid-template-columns: 1fr; justify-items: center; gap: 40px; }
}
/* Phone frame */
.pf-phone {
width: 320px; max-width: 100%;
padding: 12px;
border-radius: 40px;
background: linear-gradient(160deg, #2a3660, #141d3d);
box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.pf-screen {
background: #ffffff;
border-radius: 30px;
overflow: hidden;
color: #14110F;
}
/* Banner */
.pf-banner {
position: relative;
/* The live banner is a fixed 170px band that the avatar hangs off; without a
min-height it collapsed to its text and the avatar ate the tagline. */
min-height: 112px;
padding: 16px 18px 18px;
background: linear-gradient(135deg, #2c3550 0%, #1c2338 100%);
color: #fff;
}
/* Capped so a long brand name can't run under the tap-to-connect badge */
.pf-brand { display: flex; align-items: center; gap: 8px; max-width: 62%; }
.pf-logo { display: flex; flex-direction: column; gap: 2px; }
.pf-logo i { display: block; height: 3px; border-radius: 999px; background: #cfe0ff; }
.pf-logo i:nth-child(1) { width: 8px; }
.pf-logo i:nth-child(2) { width: 14px; }
.pf-logo i:nth-child(3) { width: 20px; }
.pf-brandname {
font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-tag { margin-top: 4px; font-style: italic; font-weight: 300; font-size: 11px; line-height: 1.4; opacity: 0.8; max-width: 74%; }
.pf-nfc {
position: absolute; top: 15px; right: 15px;
display: inline-flex; align-items: center; gap: 4px;
color: #7fb2ff; font-size: 7px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.pf-nfc svg { width: 11px; height: 11px; }
/* Avatar — lifted above the positioned banner so its top isn't clipped */
.pf-avatar-wrap { display: flex; justify-content: center; margin-top: -36px; position: relative; z-index: 2; }
.pf-avatar {
width: 72px; height: 72px; border-radius: 50%;
background: #fff; border: 4px solid #fff;
box-shadow: 0 6px 20px rgba(0,0,0,0.14);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 600; font-size: 30px; color: #2c3550;
}
/* Head */
.pf-head { text-align: center; padding: 10px 20px 2px; }
.pf-name { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
.pf-role { margin-top: 3px; color: #6b7280; font-size: 13px; font-weight: 500; }
/* Save button */
.pf-save {
margin: 16px 20px 4px;
display: flex; align-items: center; justify-content: center; gap: 8px;
background: #14110F; color: #fff;
border-radius: 999px; padding: 13px;
font-size: 14px; font-weight: 600;
}
.pf-save svg { width: 17px; height: 17px; }
/* Contacts */
.pf-section-label {
padding: 16px 22px 8px;
font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa1ac;
}
/* The contact list is a card tinted with the brand's own colours — same rule
as the live profile (profile.html .contacts), which is what makes the
"matches your card" claim visible in the mockup. */
/* When Connect isn't rendered — the hero's compact phone — the contact card is
the last block on the screen, so it carries the bottom gutter itself. */
.pf-contacts:last-child { margin-bottom: 20px; }
.pf-contacts {
margin: 0 18px;
display: flex; flex-direction: column;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 13px;
overflow: hidden;
background: linear-gradient(135deg, #2c3550 0%, #1c2338 100%);
color: #f2f4f9;
box-shadow: 0 12px 28px rgba(20,29,61,0.22);
}
.pf-row {
display: flex; align-items: center; gap: 11px;
padding: 11px 12px;
border-bottom: 1px solid rgba(255,255,255,0.09);
}
.pf-row:last-child { border-bottom: 0; }
.pf-row__icon {
width: 32px; height: 32px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
border-radius: 9px; background: rgba(255,255,255,0.11); color: #7fb2ff;
}
.pf-row__icon svg { width: 17px; height: 17px; }
.pf-row__main { flex: 1; min-width: 0; }
.pf-row__label { display: block; font-size: 10px; color: #f2f4f9; opacity: 0.6; letter-spacing: 0.04em; }
.pf-row__value { display: block; font-size: 12.5px; font-weight: 500; color: #f2f4f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row__chev { color: #f2f4f9; opacity: 0.45; font-size: 17px; flex: 0 0 auto; }
/* Connect — social buttons. Last block in the screen, so it carries the
bottom gutter itself. */
.pf-socials { display: flex; gap: 8px; padding: 0 20px 22px; }
.pf-social {
width: 34px; height: 34px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #F6F6F6; border: 1px solid #ECECEC; color: #14110F;
}
.pf-social svg { width: 15px; height: 15px; }
/* Copy / points */
.pf-copy { max-width: 460px; }
.pf-points { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.pf-point { display: flex; gap: 14px; }
.pf-point__dot {
flex: 0 0 auto; margin-top: 7px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.pf-point h4 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 0 3px; color: var(--text); }
.pf-point p { font-size: 14.5px; line-height: 1.5; color: var(--text-mute); margin: 0; }
.pf-point strong { color: var(--accent); font-weight: 600; }
/* ============================================================
Hero showcase — dashboard window + physical card + hosted-profile phone
============================================================ */
.hero-showcase-wrap { display: flex; justify-content: center; align-items: flex-start; width: 100%; }
.hero-showcase { position: relative; width: 560px; height: 476px; flex: 0 0 auto; transform-origin: top center; }
/* (.hero .hero-visual min-height lived here; the hero stage sizes its own box) */
/* Browser window (dashboard) — right column, fixed height */
.hs-window {
position: absolute; top: 140px; left: 166px; width: 394px; height: 330px; z-index: 1;
background: #fff; border-radius: 16px; overflow: hidden; color: #1c2233;
box-shadow: 0 40px 90px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.05);
}
.hs-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f3f4f7; border-bottom: 1px solid #e7e9ee; }
.hs-dots { display: flex; gap: 5px; }
.hs-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d3d6dd; display: block; }
.hs-dots i:nth-child(1) { background: #ff5f57; } .hs-dots i:nth-child(2) { background: #febc2e; } .hs-dots i:nth-child(3) { background: #28c840; }
.hs-url { flex: 1; text-align: center; font-size: 10px; color: #8a90a0; background: #fff; border: 1px solid #e7e9ee; border-radius: 7px; padding: 4px 10px; }
.hs-body { display: grid; grid-template-columns: 122px 1fr; background: #fff; color: #10203A; }
/* Sidebar — mirrors the real account sidebar */
.hs-side { background: #F7F9FC; border-right: 1px solid rgba(16,32,58,0.08); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.hs-logo { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #10203A; }
.hs-logo span { color: #0AA093; }
.hs-user { display: flex; align-items: center; gap: 7px; }
.hs-user__av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #0AA093, #067567); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex: 0 0 auto; }
.hs-user__t { display: flex; flex-direction: column; min-width: 0; }
.hs-user__t b { font-size: 10px; color: #10203A; line-height: 1.15; }
.hs-user__t i { font-style: normal; font-size: 8px; color: #8A95A8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-new { background: linear-gradient(135deg, #0AA093, #067567); color: #fff; text-align: center; font-size: 10px; font-weight: 700; border-radius: 8px; padding: 7px; }
.hs-nav { display: flex; align-items: center; gap: 7px; padding: 6px; border-radius: 8px; background: rgba(10,160,147,0.10); }
.hs-nav__sw { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #0AA093, #067567); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hs-nav__sw svg { width: 12px; height: 12px; }
.hs-nav__t { display: flex; flex-direction: column; font-size: 10.5px; font-weight: 600; color: #10203A; }
.hs-nav__t small { font-weight: 400; font-size: 8px; color: #8A95A8; }
.hs-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8A95A8; margin-top: 2px; }
.hs-cards { display: flex; flex-direction: column; gap: 3px; }
.hs-ci { display: flex; align-items: center; gap: 7px; padding: 5px 4px; border-radius: 7px; }
.hs-ci__sw { width: 18px; height: 18px; border-radius: 5px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex: 0 0 auto; }
.hs-ci__n { flex: 1; font-size: 10.5px; font-weight: 600; color: #10203A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-ci__s { font-size: 9.5px; font-weight: 700; color: #0AA093; }
/* Main overview */
.hs-main { padding: 14px 15px; min-width: 0; background: #fff; }
.hs-greet h3 { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; color: #10203A; line-height: 1.15; }
.hs-greet h3 span { background: linear-gradient(90deg, #0AA093, #0AA597); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hs-greet p { font-size: 9.5px; color: #5B6678; margin-top: 4px; }
.hs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 12px 0 14px; }
.hs-stat { background: #F7F9FC; border: 1px solid rgba(16,32,58,0.08); border-radius: 9px; padding: 7px 8px; }
.hs-stat__l { display: block; font-size: 7px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8A95A8; }
.hs-stat__v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #10203A; letter-spacing: -0.02em; margin-top: 3px; }
.hs-stat__v--sm { font-size: 11px; margin-top: 6px; }
.hs-sectitle { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; color: #10203A; margin-bottom: 9px; }
.hs-sectitle span { font-family: var(--font-ui); font-weight: 400; font-size: 8.5px; color: #8A95A8; }
.hs-hbars { background: #F7F9FC; border: 1px solid rgba(16,32,58,0.08); border-radius: 11px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.hs-hb { display: grid; grid-template-columns: 52px 1fr 16px; align-items: center; gap: 9px; }
.hs-hb__l { font-size: 9.5px; font-weight: 600; color: #10203A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-hb__t { height: 8px; background: rgba(16,32,58,0.08); border-radius: 999px; overflow: hidden; }
.hs-hb__t i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0AA093, #067567); }
.hs-hb__v { font-family: var(--font-display); font-weight: 700; font-size: 10px; color: #10203A; text-align: right; }
/* Krynta cards — two boxes sitting on top of the dashboard */
.hs-cardbox {
position: absolute; z-index: 3; width: 196px; top: 0;
padding: 12px; border-radius: 16px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 22px 46px rgba(0,0,0,0.44); backdrop-filter: blur(6px);
}
.hs-cardbox-front { left: 150px; }
.hs-cardbox-back { left: 352px; }
.hs-cardbox .hero-card {
container-type: inline-size; width: 100%; aspect-ratio: 1.586 / 1;
border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; padding: 6.5%;
box-shadow: 0 8px 20px rgba(0,0,0,0.30);
}
.hs-cardbox__cap {
display: block; text-align: center; margin-top: 8px;
font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute);
}
/* Krynta card BACK — QR left, brand right, "K" watermark bottom-left */
.hero-card--krynta-back { flex-direction: row; align-items: center; gap: 7%; }
.hero-card--krynta-back .hc-mono {
right: auto; left: -6cqw; top: auto; bottom: -14cqw; transform: none;
}
.hero-card .hc-face {
position: absolute; top: 6%; right: 7%; z-index: 2;
font-size: 2.4cqw; font-weight: 600; letter-spacing: 0.22em; color: rgba(28,22,51,0.42);
}
.hcb-qr { position: relative; z-index: 2; flex: 0 0 auto; width: 34%; background: #fff; border-radius: 2cqw; padding: 2cqw; box-shadow: 0 1cqw 3cqw rgba(0,0,0,0.14); }
.hcb-qr img { width: 100%; display: block; }
.hcb-info { position: relative; z-index: 2; }
.hcb-name { font-family: var(--font-display); font-weight: 700; font-size: 7.6cqw; color: #1c1633; letter-spacing: -0.02em; line-height: 1; }
.hcb-site { font-size: 3cqw; color: #3a3350; margin-top: 1.6cqw; }
.hcb-tap { display: inline-flex; align-items: center; gap: 1.6cqw; margin-top: 4.4cqw; color: #7c5cff; font-size: 2.4cqw; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.hcb-tap svg { width: 3.4cqw; height: 3.4cqw; }
/* Hosted profile — tall box on the left, height matches the dashboard */
.hs-phone {
position: absolute; left: 0; top: 140px; width: 152px; height: 330px; z-index: 2;
padding: 8px; border-radius: 24px;
background: linear-gradient(160deg, #6a54c8, #2a2350);
box-shadow: 0 32px 62px rgba(0,0,0,0.5);
}
.hs-phone__screen { height: 100%; border-radius: 18px; overflow: hidden; background: #fff; }
.hs-phone .mini-profile { border-radius: 0; box-shadow: none; height: 100%; }
/* Krynta-branded hosted profile (purple) */
.mini-profile--krynta .mp-banner { background: linear-gradient(135deg, #7c5cff, #4a2fb0); }
.mini-profile--krynta .mp-logo--k { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 4px; background: #fff; color: #6c3fe6; font-family: var(--font-display); font-weight: 700; font-size: 10px; }
.mini-profile--krynta .mp-nfc { color: #d9ccff; }
.mini-profile--krynta .mp-av { color: #6c3fe6; }
.mini-profile--krynta .mp-row__ic { background: rgba(124,92,255,0.12); color: #6c3fe6; }
/* Mini hosted profile */
.mini-profile { background: #fff; border-radius: 18px; overflow: hidden; color: #14110F; box-shadow: 0 24px 54px rgba(0,0,0,0.36); }
.mp-banner { position: relative; padding: 12px 14px 14px; background: linear-gradient(135deg, #2c3550, #1c2338); color: #fff; }
.mp-brand { display: flex; align-items: center; gap: 7px; }
.mp-logo { display: flex; flex-direction: column; gap: 1.6px; }
.mp-logo i { display: block; height: 2px; border-radius: 9px; background: #cfe0ff; }
.mp-logo i:nth-child(1) { width: 6px; } .mp-logo i:nth-child(2) { width: 10px; } .mp-logo i:nth-child(3) { width: 15px; }
.mp-brandname { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; }
.mp-tag { margin-top: 3px; font-style: italic; font-weight: 300; font-size: 9px; opacity: 0.82; }
.mp-nfc { position: absolute; top: 11px; right: 12px; color: #7fb2ff; }
.mp-nfc svg { width: 12px; height: 12px; }
.mp-av {
width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 3px solid #fff;
box-shadow: 0 5px 16px rgba(0,0,0,0.16); margin: -25px auto 0; position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 600; font-size: 22px; color: #2c3550;
}
.mp-name { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-top: 6px; letter-spacing: -0.02em; }
.mp-role { text-align: center; color: #6b7280; font-size: 10.5px; margin-top: 1px; }
.mp-save { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 14px 6px; background: #14110F; color: #fff; border-radius: 999px; padding: 9px; font-size: 11px; font-weight: 600; }
.mp-save svg { width: 13px; height: 13px; }
.mp-row { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 8px 10px; background: rgba(44,53,80,0.06); border-radius: 10px; }
.mp-row__ic { width: 24px; height: 24px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: rgba(44,53,80,0.10); color: #2c3550; }
.mp-row__ic svg { width: 14px; height: 14px; }
.mp-row__v { font-size: 9.5px; color: #14110F; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Responsive scaling of the whole showcase */
@media (max-width: 1180px) { .hero-showcase { transform: scale(0.88); } .hero-showcase-wrap { height: 420px; } }
@media (max-width: 960px) { .hero-showcase { transform: scale(1); } .hero-showcase-wrap { height: auto; } }
@media (max-width: 640px) { .hero-showcase { transform: scale(0.62); } .hero-showcase-wrap { height: 296px; } }
@media (max-width: 430px) { .hero-showcase { transform: scale(0.5); } .hero-showcase-wrap { height: 240px; } }
/* ============================================================
Landing page — light-first theme (homepage only, body.landing).
The base tokens flip to light; sections that stay dark opt back in
with .section-dark. Scoped to body.landing so the designer (also
body.home) is untouched.
============================================================ */
body.landing {
/* 2026-10 relaunch: the "landing" pages (designer, tap to link) follow the midnight home page */
--bg: #212936; --bg-alt: #263143; --bg-soft: #29364C; --surface: #283448;
--line: #324158; --line-soft: rgba(255,255,255,0.06);
--text: #E9EEF3; --text-mute: #8D9AAD; --text-soft: #61708A; --text-invert: #04211E;
--accent: #0DC5B4; --accent-2: #2DD4C4; --accent-soft: rgba(13,197,180,0.14); --accent-glow: rgba(13,197,180,0.30);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
--shadow-lg: 0 18px 60px rgba(0,0,0,0.5); --shadow-card: 0 14px 50px rgba(0,0,0,0.5);
background: #212936;
}
/* Drop the opaque no-JS fallback panel — the (frozen) net canvas is the backdrop */
body.landing::before { display: none !important; }
body.landing .hero {
background:
radial-gradient(55% 45% at 85% 15%, rgba(13,197,180,0.05), transparent 70%),
radial-gradient(50% 50% at 5% 100%, rgba(13,197,180,0.04), transparent 70%) !important;
}
/* Trust bar goes light too (it's force-darkened on body.home) */
body.landing .trust-bar { background: var(--bg-soft) !important; }
/* How it works / Team dashboard / Card materials / Add-ons: the body.home mesh scrim
(rgba(6,10,20,0.42)) muddied these bands. On the light landing page they
follow the hero instead — cream sections with white cards, white section
with cream cards, so the content still lifts off the page. */
body.landing .how,
body.landing .dashboard-section,
body.landing .packages-section { background: var(--bg) !important; }
body.landing .materials-section { background: var(--bg-alt) !important; }
body.landing .dashboard-section { border-top: 1px solid var(--line-soft); }
/* The designer (design.html) carries .landing too, so it runs the same light
theme. Kill the dark mesh canvas and the dark page background its flow
states set on body.home. */
body.landing #net-canvas { display: none !important; }
body.landing.is-designing,
body.landing.is-editing,
body.landing.is-capturing { background: var(--bg) !important; }
body.landing .flow-section { background: transparent !important; }
body.landing .flow-section:nth-child(even) { background: var(--bg-alt) !important; }
/* Footer stays dark under the light page */
body.landing .footer { background: #1A2029 !important; border-top: 1px solid #324158; }
body.landing .footer .logo-word, body.landing .footer .logo-mark { color: #fff; }
/* Dark band — sections that stay dark on the otherwise-light page */
.section-dark {
--bg: #263143; --bg-alt: #29364C; --bg-soft: #2D3B56; --surface: #29364C;
--line: #324158; --line-soft: rgba(255,255,255,0.06);
--text: #E9EEF3; --text-mute: #8D9AAD; --text-soft: #61708A;
--accent: #0DC5B4; --accent-2: #7ba6fa; --accent-soft: rgba(13,197,180,0.18); --accent-glow: rgba(13,197,180,0.40);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.36), 0 2px 8px rgba(0,0,0,0.27);
--shadow-md: 0 4px 16px rgba(0,0,0,0.41), 0 12px 32px rgba(0,0,0,0.36);
--shadow-lg: 0 18px 60px rgba(0,0,0,0.50);
--shadow-card: 0 14px 50px rgba(0,0,0,0.54);
position: relative;
background: var(--bg);
color: var(--text);
}
/* Showcase card boxes read against the light hero */
body.landing .hs-cardbox {
background: rgba(13,23,51,0.05);
border-color: rgba(13,23,51,0.12);
}
/* ============================================================
Hero visual — the owner's team dashboard
A light panel on the dark hero, echoing /account but trimmed to what a
business owner cares about: who on the team is getting tapped. Uses the
site's blue accent rather than the dashboard's teal so the hero stays
on-brand. Motion is decorative — the reduced-motion block above flattens it.
============================================================ */
/* The stage's layout box. Scaling happens from the top-left with the wrapper
sized to match, so a shrunk scene never leaves phantom width behind (the
negative-margin approach overflowed the page horizontally on phones). */
.hero-visual {
position: relative;
width: 620px; height: 400px;
max-width: 100%;
margin: 0 auto;
min-height: 0; padding: 0;
/* Top-aligned rather than centred: the dashboard bleeds left past its grid
column, and centring this shorter box drops that bleed onto the CTA. */
align-self: start;
}
/* ============================================================
Hero stage — the three things you get, in one 3D scene
Dashboard sits furthest back and tilted, a card taps the hosted profile in
front of it, and the profile itself comes forward on the right. The whole
scene leans toward the pointer.
Depth is real: every layer shares one preserve-3d context and is placed
with translateZ, so parallax falls out of the perspective rather than
being faked with per-layer offsets.
============================================================ */
.hero-stage {
position: absolute; top: 0; left: 34px;
width: 620px; height: 520px;
perspective: 1500px;
transform-origin: top left;
}
.hero-stage__inner {
position: absolute; inset: 0;
transform-style: preserve-3d;
transform: rotateY(var(--stage-rx, 0deg)) rotateX(var(--stage-ry, 0deg));
transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
}
/* --- Dashboard: back plane --- */
/* Kept at its native 620px and scaled down — the panel's grid is tuned for
that width and starts clipping its own chart if you narrow it instead.
Its right edge is held inside the stage box: bleeding right runs it off the
viewport at mid widths, whereas the phone can bleed left into the text
column's gutter safely. The phone overlaps its left edge, which reads as
depth — the panel is 320px further back. */
.stage-dash {
position: absolute; top: 18px; left: 97px;
width: 620px;
transform: translateZ(-170px) rotateY(-40deg) rotateX(7deg) scale(1.06);
/* Pivot on the centre, not the right edge: at 40deg an edge pivot swings the
near side ~375px forward, which puts it in front of the card and phone
and occludes them. Centring halves the swing, so the near edge lands at
Z ~ +17 — behind the card (165) and phone (150). */
transform-origin: center center;
transform-style: preserve-3d;
}
.stage-dash .hdash {
max-width: 100%;
transform: none; /* the stage owns the tilt now */
box-shadow: 0 40px 90px rgba(2,7,20,0.55), 0 2px 0 rgba(255,255,255,0.5) inset;
}
.stage-dash .hdash:hover { transform: none; }
/* --- Cards: mid-ground, fanned and drifting --- */
.stage-cards { position: absolute; inset: 0; transform-style: preserve-3d; }
.stage-card { position: absolute; transform-style: preserve-3d; }
.stage-card .simcard { transform: none; will-change: transform; }
/* Idle drift — the phone rides this; the card has its own tap cycle below. */
@keyframes stageFloat {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(0, -13px, 0) rotate(0.8deg); }
}
/* A single card, caught mid-tap against the phone: just in front of the
handset (Z 165 vs the phone's 150), top corner into the screen edge,
pressing in on the same 2.6s cycle the ripple fires on. */
.stage-card--tap {
left: 66px; top: 232px; z-index: 2;
transform: translateZ(165px) rotateY(10deg) rotate(13deg) scale(0.64);
}
.stage-card--tap .simcard {
animation: tapNudge 2.6s cubic-bezier(.4,0,.3,1) infinite;
box-shadow: 0 22px 44px rgba(2,7,20,0.42), 0 4px 10px rgba(2,7,20,0.24);
}
@keyframes tapNudge {
0%, 55%, 100% { transform: translate3d(0, 0, 0); }
72% { transform: translate3d(-10px, -4px, 0); }
86% { transform: translate3d(0, 0, 0); }
}
/* The tap itself — rings spreading from where the card meets the glass */
.stage-tap {
position: absolute; left: 76px; top: 250px;
width: 44px; height: 44px;
transform: translateZ(170px);
pointer-events: none;
}
.stage-tap i {
position: absolute; inset: 0;
border-radius: 50%;
border: 2px solid rgba(13,197,180,0.8);
opacity: 0;
animation: tapRing 2.6s ease-out infinite;
}
.stage-tap i:nth-child(2) { animation-delay: 0.5s; }
.stage-tap i:nth-child(3) { animation-delay: 1s; }
@keyframes tapRing {
0% { transform: scale(0.35); opacity: 0; }
12% { opacity: 0.85; }
100% { transform: scale(2.6); opacity: 0; }
}
/* --- Profile phone: front plane --- */
.stage-phone {
position: absolute; left: -52px; top: 88px;
transform: translateZ(150px) rotateY(16deg) rotateX(3deg) scale(0.455);
transform-origin: top left;
transform-style: preserve-3d;
}
/* The float lives on the inner element: a keyframe that animates `transform`
replaces the whole property, so putting it on .stage-phone would wipe the
placement transform above. */
.stage-phone .pf-phone {
box-shadow: 0 50px 110px rgba(2,7,20,0.62), inset 0 0 0 1px rgba(255,255,255,0.07);
animation: stageFloat 11s ease-in-out infinite -3s;
}
/* Scale the whole scene down rather than reflowing it — the composition only
works at one aspect ratio. */
@media (max-width: 1340px) { .hero-visual { width: 508px; height: 328px; } .hero-stage { transform: scale(0.82); left: 14px; } }
@media (max-width: 1180px) { .hero-visual { width: 434px; height: 280px; } .hero-stage { transform: scale(0.70); left: -6px; } }
@media (max-width: 1023px) { .hero-visual { width: 372px; height: 240px; } .hero-stage { transform: scale(0.60); left: -8px; } }
/* The dashboard is placed to the left of the stage box on purpose (it reads as
the back plane). Once the scene is this small that bleed runs off the screen,
so nudge the whole thing back inside. */
@media (max-width: 720px) { .hero-visual { width: 347px; height: 224px; } .hero-stage { transform: scale(0.56); left: 22px; } }
@media (max-width: 480px) { .hero-visual { width: 273px; height: 176px; } .hero-stage { transform: scale(0.44); left: 14px; } }
@media (max-width: 380px) { .hero-visual { width: 236px; height: 152px; } .hero-stage { transform: scale(0.38); left: 4px; } }
/* Inside the stage the dashboard is artwork, not a UI you operate, so it keeps
its desktop composition at every width — the responsive rules below would
re-flow it into a taller panel and break the scene's geometry. The stage as
a whole is what shrinks. */
@media (max-width: 900px) {
.stage-dash .hdash { max-width: 620px; }
.stage-dash .hdash__grid { grid-template-columns: 158px 1fr; }
.stage-dash .hdash__rail { border-right: 1px solid var(--hd-line); border-bottom: 0; }
.stage-dash .hdash__list { display: flex; flex-direction: column; }
}
@media (max-width: 520px) {
.stage-dash .hdash__panel--cmp { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.stage-card .simcard, .stage-phone .pf-phone { animation: none; }
.stage-tap i { animation: none; opacity: 0.5; }
.hero-stage__inner { transition: none; }
}
.hdash {
--hd-ink: #10203A; --hd-mute: #5B6678; --hd-soft: #8A95A8;
--hd-line: rgba(16,32,58,0.10); --hd-track: rgba(16,32,58,0.08);
--hd-acc: #0AA597; --hd-acc-soft: rgba(13,197,180,0.12);
width: 100%; max-width: 620px;
background: #fff; color: var(--hd-ink);
border-radius: 16px; overflow: hidden;
font-size: 12px; line-height: 1.35;
box-shadow: 0 30px 70px rgba(4,10,28,0.45), 0 2px 0 rgba(255,255,255,0.5) inset;
transform: rotateY(-7deg) rotateX(3deg);
transition: transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.hdash:hover { transform: rotateY(0deg) rotateX(0deg); }
/* Title bar */
.hdash__bar {
display: flex; align-items: center; gap: 10px;
padding: 9px 13px; border-bottom: 1px solid var(--hd-line);
background: linear-gradient(180deg,#FBFCFE,#F1F5FA);
}
.hdash__dots { display: flex; gap: 5px; }
.hdash__dots i { width: 8px; height: 8px; border-radius: 50%; background: #D7DEE9; }
.hdash__crumb { font-weight: 700; font-size: 11.5px; letter-spacing: -0.01em; }
.hdash__owner {
margin-left: auto; display: flex; align-items: center; gap: 7px;
font-size: 11px; font-weight: 600; color: var(--hd-mute);
}
.hdash__ownerav {
width: 21px; height: 21px; border-radius: 50%;
display: grid; place-items: center;
background: linear-gradient(135deg,var(--hd-acc),#1d4fd7); color: #fff;
font-size: 9px; font-weight: 700; letter-spacing: 0.02em;
}
.hdash__grid { display: grid; grid-template-columns: 172px 1fr; }
/* Left rail — the team */
.hdash__rail { border-right: 1px solid var(--hd-line); background: #FAFBFD; padding: 10px 8px 12px; }
.hdash__raillabel {
font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--hd-soft); padding: 0 6px 7px;
}
.hdash__list { display: flex; flex-direction: column; gap: 3px; }
.hdrow {
display: flex; align-items: center; gap: 8px;
padding: 6px 7px; border-radius: 9px; cursor: pointer;
border: 1px solid transparent; background: transparent;
width: 100%; text-align: left; font: inherit; color: inherit;
transition: background 0.18s, border-color 0.18s;
}
.hdrow:hover { background: rgba(16,32,58,0.05); }
.hdrow.is-active { background: var(--hd-acc-soft); border-color: rgba(13,197,180,0.32); }
.hdrow__av {
width: 25px; height: 25px; border-radius: 7px; flex: 0 0 auto;
display: grid; place-items: center; color: #fff;
font-size: 9.5px; font-weight: 700;
}
.hdrow__main { min-width: 0; flex: 1; }
.hdrow__name, .hdrow__role { display: block; }
.hdrow__name { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdrow__role { font-size: 9.5px; color: var(--hd-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdrow__n { font-size: 11px; font-weight: 700; color: var(--hd-acc); flex: 0 0 auto; }
/* Main column */
.hdash__main { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hdash__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.hdst {
background: #F7F9FC; border: 1px solid var(--hd-line);
border-radius: 11px; padding: 8px 10px;
display: flex; flex-direction: column; gap: 2px;
}
.hdst i {
font-style: normal; font-size: 8.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--hd-soft);
}
.hdst__n { font-family: 'Geist', 'IBM Plex Sans Arabic', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.hdst--up .hdst__n { color: #0f9d63; }
.hdash__panel { background: #fff; border: 1px solid var(--hd-line); border-radius: 12px; padding: 10px 11px; }
.hdash__phead { display: flex; align-items: baseline; gap: 7px; margin-bottom: 9px; font-size: 11px; font-weight: 700; }
.hdash__phead em { font-style: normal; font-weight: 500; color: var(--hd-soft); font-size: 9.5px; }
/* Column chart — bars grow from the baseline, left to right */
.hdash__chart { display: flex; align-items: flex-end; gap: 3px; height: 62px; }
.hdash__chart span {
flex: 1; border-radius: 3px 3px 1px 1px;
background: linear-gradient(180deg,#7ba6fa,var(--hd-acc));
height: var(--h,20%); transform-origin: bottom;
animation: hdBarRise 0.62s cubic-bezier(.22,.9,.3,1) both;
animation-delay: var(--d,0s);
}
@keyframes hdBarRise { from { transform: scaleY(0.04); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.hdash__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 8.5px; color: var(--hd-soft); }
/* Per-teammate comparison bars */
.hdash__cmp { display: flex; flex-direction: column; gap: 7px; }
.hdcmp { display: grid; grid-template-columns: 74px 1fr 40px; align-items: center; gap: 8px; }
.hdcmp__l { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hd-mute); }
.hdcmp__track { height: 7px; border-radius: 99px; background: var(--hd-track); overflow: hidden; }
.hdcmp__fill {
display: block; /* inline spans ignore width/height — this bar needs both */
height: 100%; border-radius: 99px; width: var(--w,10%);
background: var(--c,var(--hd-acc));
transform-origin: left; animation: hdFill 0.75s cubic-bezier(.22,.9,.3,1) both;
animation-delay: var(--d,0s);
}
@keyframes hdFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hdcmp__v { font-size: 10px; font-weight: 700; text-align: right; }
/* Live tap notification.
Sits inside the panel: .hdash is overflow:hidden so its rounded corners clip
the title bar and rail, and a toast hung off the bottom edge got sliced. */
.hdash__toast {
position: absolute; left: 50%; bottom: 14px; transform: translate(-50%,10px);
display: flex; align-items: center; gap: 7px;
background: #0F1A38; color: #eaf0ff;
border: 1px solid rgba(123,166,250,0.5);
border-radius: 999px; padding: 7px 14px;
font-size: 11px; font-weight: 600; white-space: nowrap;
box-shadow: 0 14px 34px rgba(4,10,28,0.55);
opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s;
}
.hdash__toast.is-on { opacity: 1; transform: translate(-50%,0); }
.hdash__toastdot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,0.25); }
.hdash { position: relative; }
/* The panel is dense; below ~900px it stops being readable, so drop the rail
and flatten the tilt rather than shrinking everything into mush. */
@media (max-width: 900px) {
.hdash { transform: none; max-width: 520px; }
.hdash__grid { grid-template-columns: 1fr; }
.hdash__rail { border-right: 0; border-bottom: 1px solid var(--hd-line); }
.hdash__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
}
@media (max-width: 520px) {
.hdash__list { grid-template-columns: 1fr; }
.hdash__panel--cmp { display: none; }
}
/* ============================================================
MOBILE RHYTHM
The type scale and spacing rhythm are tuned for a 1180px canvas:
72px headings, 112px of section padding, 28-34px card padding.
Dropped onto a ~390px viewport those read as enormous — a single
card fills the screen and each section costs two full scrolls of
empty space. Everything below is a proportional trim of the same
layout, not a different one: smaller header type, tighter section
gaps, less padding inside boxes.
Kept last in the file so it wins over the component rules above
without needing !important.
============================================================ */
/* Tablet / large phone — halfway step so the jump isn't abrupt. */
@media (max-width: 900px) {
:root { --section-pad: 48px; }
.section-head { margin-bottom: 40px; }
.materials-grid { gap: 16px; }
.dash-showcase { margin-top: 32px; }
.pf-showcase { margin-top: 36px; }
}
/* Phones */
@media (max-width: 600px) {
:root { --section-pad: 32px; }
/* ---- Type scale ---- */
h1 { font-size: clamp(26px, 7.2vw, 33px); line-height: 1.1; }
h2 { font-size: clamp(21px, 5.8vw, 26px); line-height: 1.16; }
h3 { font-size: 17px; }
h4 { font-size: 15.5px; }
.lede, .section-lede { font-size: 15px; line-height: 1.55; margin-top: 14px; }
.eyebrow { font-size: 10.5px; letter-spacing: 0.18em; margin-bottom: 10px; }
.container { padding: 0 18px; }
/* ---- Nav bar ---- */
.nav-inner { padding: 10px 18px; }
.logo-mark { width: 24px; height: 24px; }
.logo-mark svg { width: 22px; height: 22px; }
.logo-word { font-size: 19px; }
.logo-word::after { font-size: 8.5px; letter-spacing: 0.16em; margin-top: 3px; }
.nav-links { gap: 10px; }
.nav-links a { font-size: 13.5px; }
.nav-cta { padding: 8px 15px; }
/* ---- Header / hero ---- */
.hero { padding: 34px 0 42px; }
.hero-inner { gap: 32px; }
.hero-text h1 { font-size: clamp(26px, 7.2vw, 33px); }
.hero-text .lede { margin-top: 14px; font-size: 15px; }
.hero-text .eyebrow { font-size: 10.5px; }
.hero-trust-badges { gap: 7px; margin: 18px 0; }
.hero-badge { font-size: 12px; padding: 6px 11px; gap: 5px; }
.hero-form { margin-top: 16px; }
.hero-cta { margin-top: 20px; }
.hero-examples { margin-top: 12px; }
.hero-steps { gap: 12px; margin-top: 20px; }
.hero-cue { margin-bottom: 6px; }
/* Standalone page titles (contact / legal / thank-you style headers) */
.section-head { margin-bottom: 26px; }
.section-head .section-lede { margin-top: 12px; }
/* ---- Grids: the gap between boxes ---- */
.how-grid,
.features-grid,
.steps,
.variants-grid,
.packages-grid,
.materials-grid,
.order-cards { gap: 14px; }
.review-grid,
.business-grid { gap: 28px; }
.dash-showcase { margin-top: 26px; gap: 24px; }
.pf-showcase { margin-top: 28px; gap: 32px; }
/* ---- Padding inside boxes ---- */
.how-step { padding: 22px 20px 20px; }
.how-step__num { top: 16px; right: 18px; }
.how-step__icon { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; }
.how-step__icon svg { width: 22px; height: 22px; }
.how-step__title { font-size: 18px; }
.how-step__text { font-size: 14.5px; }
.how-cta { margin-top: 28px; gap: 10px; }
.step { padding: 22px 20px; }
.step h3 { font-size: 18px; }
.step p { font-size: 14.5px; }
.material-card__body { padding: 20px; gap: 10px; }
.material-card__body h3 { font-size: 20px; }
.material-card__body p { font-size: 14.5px; }
.package-card__imgs { height: 148px; }
.package-card__body { padding: 18px 18px 20px; gap: 9px; }
.package-card__items { gap: 6px; }
.package-card__price { font-size: 26px; }
.package-card__pricing { padding-top: 6px; }
.packages-note { margin-top: 22px; }
.order-form { padding: 24px 20px 22px; }
.order-cards { margin-bottom: 18px; }
.capture-showcase { padding: 20px; }
.capture-aside { margin-top: 28px; }
/* ---- Footer ---- */
.footer { padding: 22px 0 13px; }
.footer-inner { gap: 18px; padding-top: 16px; padding-bottom: 14px; }
.footer-col { gap: 7px; }
/* Only the gap between rows — the 6px padding on each link is the tap
target, so it stays. */
.footer-links { gap: 2px; }
.footer-brand p { margin-top: 8px; }
}
/* ============================================================
Account menu — one control in the nav instead of three.
Signed in, the nav used to show a Dashboard link, the user's
name (linking to the same page) and a Sign out button. This
collapses all of it into an avatar that opens a small menu.
============================================================ */
.nav-acct { position: relative; }
.nav-acct__btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 11px 5px 5px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
cursor: pointer;
transition: background 0.16s ease, border-color 0.16s ease;
}
.nav-acct__btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.26); }
.nav-acct__av {
width: 28px; height: 28px; flex: none;
border-radius: 50%;
background: linear-gradient(135deg, #0DC5B4 0%, #0AA597 100%);
color: #fff;
font: 700 11.5px/1 var(--font-ui);
display: flex; align-items: center; justify-content: center;
letter-spacing: 0.02em;
}
.nav-acct__chev { width: 11px; height: 11px; color: rgba(255,255,255,0.6); transition: transform 0.18s ease; }
.nav-acct.is-open .nav-acct__chev { transform: rotate(180deg); }
.nav-acct__menu {
position: absolute; right: 0; top: calc(100% + 10px);
min-width: 218px;
background: var(--bg-alt);
border: 1px solid rgba(13,23,51,0.10);
border-radius: 14px;
box-shadow: 0 18px 50px rgba(13,23,51,0.24);
padding: 8px;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
z-index: 120;
}
.nav-acct.is-open .nav-acct__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-acct__who {
padding: 9px 11px 11px;
border-bottom: 1px solid rgba(13,23,51,0.08);
margin-bottom: 6px;
}
.nav-acct__name { display: block; font: 700 13.5px/1.25 var(--font-ui); color: var(--text); }
.nav-acct__email {
display: block; font: 400 12px/1.35 var(--font-ui); color: #7B879E; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
/* Scoped to the menu so it out-specifies `.nav-links a`, which otherwise
greys out the two anchors while leaving the Sign out button dark. */
.nav-acct__menu .nav-acct__item {
display: block; width: 100%; text-align: left;
padding: 9px 11px;
border: 0; background: transparent; border-radius: 9px;
font: 600 13.5px/1 var(--font-ui); color: var(--text);
text-decoration: none; cursor: pointer;
}
.nav-acct__menu .nav-acct__item:hover { background: rgba(13,197,180,0.08); color: var(--accent-deep); }
.nav-acct__menu .nav-acct__item--quiet { color: #7B879E; }
.nav-acct__menu .nav-acct__item--quiet:hover { color: #B91C1C; background: rgba(185,28,28,0.07); }
/* ============================================================
Mobile navigation.
Below 820px the page links were simply hidden, which left a
phone with no route to any other page. They now collapse into
a sheet behind a burger button. On desktop .nav-menu is
`display: contents`, so the row renders exactly as before.
============================================================ */
.nav-menu { display: contents; }
.nav-burger {
display: none;
flex-direction: column; justify-content: center; align-items: center;
gap: 4px;
width: 38px; height: 38px;
padding: 0;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 11px;
cursor: pointer;
}
.nav-burger:hover { background: rgba(255,255,255,0.14); }
.nav-burger span {
display: block; width: 16px; height: 2px; border-radius: 2px;
background: #dfe4ef;
transition: transform 0.2s ease, opacity 0.16s ease;
}
.nav.is-menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 819px) {
.nav-burger { display: inline-flex; }
.nav-inner { position: relative; }
.nav-menu {
display: block;
position: absolute; top: calc(100% + 12px); right: 0; left: auto;
min-width: 232px;
background: var(--bg-alt);
border: 1px solid rgba(13,23,51,0.10);
border-radius: 14px;
box-shadow: 0 18px 50px rgba(13,23,51,0.24);
padding: 8px;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
z-index: 118;
}
.nav.is-menu-open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* beats `.nav-links .nav-link--page { display: none }` — same weight, later */
.nav-menu .nav-link--page {
display: block;
padding: 11px 12px;
border-radius: 9px;
font: 600 14.5px/1 var(--font-ui);
color: var(--text);
text-decoration: none;
}
.nav-menu .nav-link--page:hover { background: rgba(13,197,180,0.08); color: var(--accent-deep); }
}
/* ============================================================
Hero banner — full-bleed rounded media stage
The tapt.io hero pattern: one big rounded panel that rotates through
three views of the product, with the copy welded to the bottom edge —
headline bottom-left, the URL tool bottom-right — and the trust marquee
picking up immediately underneath.
Only the media changes between slides; the bottom bar is a fixed frame.
The headline swaps inside it word-by-word rather than the whole block
fading, which is what makes the tapt version feel expensive.
============================================================ */
.hero--banner {
/* No top padding: the banner butts straight up under the sticky nav, so
there is no strip of page background showing between the two. */
padding: 0 0 22px;
overflow: visible;
border-bottom: 0;
}
.hero--banner::before { display: none; }
/* Wider than the 1180px text container — the banner is meant to feel
near-full-bleed, with just enough gutter to read as a rounded card. */
.hbanner-wrap {
width: 100%;
margin: 0 auto;
}
/* A split rather than an overlay. Floating the copy over the media left a
dead corner on the left that no slide ever filled, and forced a scrim over
the artwork to keep the words readable. Giving each half its own column
fixes both: the copy has somewhere to live, and the media is no longer
washed out because nothing sits on top of it. */
.hbanner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
align-items: center;
min-height: clamp(560px, 58vw, 720px);
/* Square at the top where it meets the nav, rounded at the bottom where it
lifts off the page — the same trick tapt uses on its banner section. */
border-radius: 0 0 28px 28px;
overflow: hidden;
isolation: isolate;
/* One background, and it has to be uniform ACROSS the width — any
left-to-right shading, or an off-centre glow, immediately re-reads as
two panels no matter how soft it is. So: a straight top-to-bottom wash
only. Every horizontal position is the same colour by construction, so
the copy side and the media side cannot look different. */
/* 2026-10 relaunch: a midnight panel with a soft teal glow, like the home page hero */
--text: #E9EEF3; --text-mute: #8D9AAD; --text-soft: #61708A; --line: #324158; --surface: #283448;
color: var(--text);
background: radial-gradient(70% 90% at 75% 30%, rgba(13,197,180,0.10), transparent 70%), linear-gradient(180deg, #263143 0%, #232D3E 100%);
border: 1px solid #324158; border-top: 0;
box-shadow: 0 30px 90px rgba(0,0,0,0.45);
}
/* ---- Copy column ---- */
.hbanner__copy {
padding: clamp(36px, 4vw, 64px) clamp(24px, 3vw, 52px) clamp(36px, 4vw, 60px) clamp(28px, 5vw, 84px);
max-width: 660px;
justify-self: end;
width: 100%;
}
/* ---- Media stack ---- */
/* Deliberately transparent: the banner's own gradient runs underneath both
columns, so the two halves read as one surface with the artwork sitting on
it rather than as two panels butted together. */
.hbanner__media {
position: relative;
align-self: stretch;
overflow: hidden;
}
/* visibility, not just opacity: slide 1's 3D scene sets transform-style:
preserve-3d, which promotes it to its own compositing layer — and a
promoted layer ignores the ancestor's opacity:0 and paints straight over
the slides that follow it. Toggling visibility (held until the fade has
finished) is what actually takes a parked slide off the screen. */
.hbslide {
position: absolute; inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.9s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.9s;
pointer-events: none;
}
.hbslide.is-active {
opacity: 1;
visibility: visible;
transition: opacity 0.9s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
pointer-events: auto;
}
/* Ken-Burns: each slide drifts out of a slight zoom while it is on screen,
held at rest until it becomes active so the motion always starts fresh. */
.hbslide__zoom {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
transform: scale(1.07);
}
/* Matched to the dwell — a longer drift would still be mid-flight when the
slide swaps out, so it would never actually reach rest. */
.hbslide.is-active .hbslide__zoom { animation: hbZoom 6s ease-out forwards; }
@keyframes hbZoom {
from { transform: scale(1.07); }
to { transform: scale(1); }
}
/* Slide 1 holds the live 3D scene. .hero-stage sizes itself with its own
breakpoint transforms, so it is scaled from a wrapper rather than by
touching those.
The scene is pushed up and right on purpose: tapt's slides all leave the
bottom-left corner empty for the headline, and ours is a dense composition
that would otherwise sit straight underneath the type. */
.hbstage-fit {
/* Centred now — it used to be shoved up and right to clear the headline,
and with the copy in its own column there is nothing to dodge. Nudged
left because the scene is wider than the 620px box it declares: the
dashboard is placed past its right edge on purpose, so centring the box
alone runs the panel off the column. */
transform: translateX(-5%) scale(0.86);
transform-origin: center center;
}
.hero--banner .hero-visual { align-self: center; margin: 0; }
.hbanner .eyebrow { margin-bottom: 14px; color: var(--accent-deep); }
/* Slide ticks — thin bars that fill over the 8s dwell, doubling as controls */
.hbanner__ticks { display: flex; gap: 8px; margin-bottom: 20px; }
.hbtick {
width: 38px; height: 4px;
padding: 0; border: 0; border-radius: 999px;
background: rgba(13,23,51,0.16);
overflow: hidden;
cursor: pointer;
transition: width 0.3s ease, background-color 0.3s ease;
}
.hbtick:hover { background: rgba(255,255,255,0.18); }
.hbtick.is-active { width: 64px; }
.hbtick i { display: block; height: 100%; width: 0; background: var(--accent-deep); border-radius: 999px; }
.hbtick.is-active i { animation: hbTick 6s linear forwards; }
.hbanner.is-paused .hbtick.is-active i { animation-play-state: paused; }
@keyframes hbTick { from { width: 0; } to { width: 100%; } }
/* ---- Rotating headline ---- */
/* All three headlines stack in one grid cell so the bar never changes
height as they swap. */
.hbwords { display: grid; }
.hbword {
grid-area: 1 / 1;
margin: 0;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(30px, 3.5vw, 52px);
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--text);
align-self: end;
}
.hbword:not(.is-active) { pointer-events: none; }
.hbword strong { font-weight: 900; color: var(--accent-deep); }
/* One word per clipped box: the word rides up out of the box on entry and
drops back down on exit, staggered left-to-right. */
.hbw {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
margin-right: 0.24em;
padding-bottom: 0.14em;
margin-bottom: -0.14em;
}
.hbw > i {
display: inline-block;
font-style: inherit;
transform: translateY(112%);
opacity: 0;
transition:
transform 0.72s cubic-bezier(.22,.61,.36,1),
opacity 0.4s linear;
}
.hbword.is-active .hbw > i {
transform: none;
opacity: 1;
transition-delay: calc(var(--w, 0) * 48ms + 120ms);
}
/* The supporting line changes with the headline, so the words on the left
always describe whichever thing is on the right. Stacked in one grid cell
like the headlines, so the column never jumps height mid-swap. */
.hbsubs { display: grid; margin-top: 18px; max-width: 480px; }
.hbsub {
grid-area: 1 / 1;
margin: 0;
font: 400 clamp(14.5px, 1.15vw, 16.5px)/1.55 var(--font-ui);
color: var(--text-mute);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.22,.61,.36,1);
pointer-events: none;
}
.hbsub.is-active {
opacity: 1;
transform: none;
transition-delay: 0.24s;
pointer-events: auto;
}
/* ---- Trust badges on the light banner ---- */
.hbanner .hero-trust-badges { margin: 26px 0 0; }
.hbanner .hero-badge {
background: rgba(255,255,255,0.06);
border-color: var(--line);
color: var(--text-mute);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
}
/* ---- URL tool in the bottom-right slot ---- */
/* Frosted like tapt's glass buttons, but it is still the real input — the
whole point of putting it here rather than a plain CTA. */
.hbanner .hero-form { margin: 26px 0 0; max-width: 480px; }
.hbanner .url-pill {
background: rgba(255,255,255,0.96);
border-color: rgba(13,23,51,0.10);
backdrop-filter: blur(18px) saturate(170%);
-webkit-backdrop-filter: blur(18px) saturate(170%);
box-shadow: 0 26px 60px rgba(13,23,51,0.18), 0 2px 8px rgba(13,23,51,0.06);
}
.hbanner .hero-examples { margin-top: 14px; }
.hbanner .hero-examples__label { color: var(--text-soft); }
/* ---- Narrow desktop: the scene needs less scale, the copy less size ---- */
@media (max-width: 1400px) { .hbstage-fit { transform: translateX(-5%) scale(0.78); } }
@media (max-width: 1180px) { .hbstage-fit { transform: translateX(-5%) scale(0.68); } }
@media (max-width: 1023px) { .hbstage-fit { transform: translateX(-5%) scale(0.58); } }
/* ---- Phone / small tablet: unstack the overlay ----
Below this width there is no room to float copy over the media, so the
banner becomes two blocks — media on top, copy beneath on the banner's
own backdrop. Same panel, no overlap. */
/* Below this the two columns stack — media on top, copy beneath. */
@media (max-width: 900px) {
.hero--banner { padding: 0 0 16px; }
.hbanner {
display: flex;
flex-direction: column-reverse; /* media first visually, copy under it */
min-height: 0;
border-radius: 0 0 22px 22px;
}
.hbanner__media { height: 320px; flex: 0 0 auto; }
.hbanner__copy {
max-width: none;
justify-self: stretch;
padding: 28px 20px 32px;
}
.hbstage-fit, .genstage, .pstack { transform: scale(0.60); }
.hbanner__ticks { margin-bottom: 16px; }
.hbword { font-size: clamp(28px, 7.4vw, 40px); letter-spacing: -0.03em; }
.hbsubs { max-width: none; margin-top: 14px; }
.hbanner .hero-form { max-width: none; margin-top: 20px; }
.hbanner .hero-trust-badges { margin-top: 18px; }
}
@media (max-width: 560px) {
.hbanner__media { height: 260px; }
.hbstage-fit, .genstage, .pstack { transform: scale(0.46); }
}
/* Motion is decoration: hold each slide still and let the words just appear. */
@media (prefers-reduced-motion: reduce) {
.hbslide.is-active .hbslide__zoom { animation: none; transform: none; }
.hbslide { transition: none; }
.hbword.is-active .hbw > i { transition: none; transition-delay: 0s; }
.hbtick.is-active i { animation: none; width: 100%; }
}
/* ============================================================
Slide 2 — "paste a URL, get a card"
The product's whole pitch acted out in the banner rather than described:
the URL types itself, the brand colours lift out of it, and three cards
build themselves in those colours.
Everything is one CSS timeline keyed off .hbslide.is-active, so it is the
slideshow that starts and restarts it — nothing here runs while the slide
is parked. Delays are absolute against the 8s dwell.
============================================================ */
.genstage {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
}
/* --- the paste bar --- */
.gen-bar {
display: flex; align-items: center; gap: 10px;
background: #fff;
border: 1px solid rgba(13,23,51,0.10);
border-radius: 999px;
padding: 8px 8px 8px 18px;
box-shadow: 0 18px 44px rgba(13,23,51,0.14);
font-family: var(--font-ui);
opacity: 0;
}
.hbslide.is-active .gen-bar { animation: genFade 0.5s ease-out 0.1s forwards; }
.gen-bar__ic { display: inline-flex; color: #8A95A8; }
.gen-bar__ic svg { width: 17px; height: 17px; }
.gen-bar__url {
display: inline-flex; align-items: center;
font-size: 14.5px; font-weight: 500; color: #10203A;
min-width: 186px;
}
/* Typed by clipping the text box open in character-width steps. */
.gen-type {
display: inline-block;
overflow: hidden;
white-space: nowrap;
max-width: 0;
font-weight: 500;
}
.hbslide.is-active .gen-type { animation: genType 0.95s steps(22, end) 0.4s forwards; }
.gen-caret {
display: inline-block; width: 1.5px; height: 15px;
background: var(--accent-deep); margin-left: 1px;
}
.hbslide.is-active .gen-caret { animation: genCaret 0.5s steps(1) 0.35s 4, genFadeOut 0.2s linear 2.2s forwards; }
.gen-bar__btn {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: #fff;
font-size: 13px; font-weight: 700;
border-radius: 999px;
padding: 9px 16px;
white-space: nowrap;
}
.hbslide.is-active .gen-bar__btn { animation: genPress 0.45s ease-out 1.55s; }
/* --- brand read-out --- */
.gen-read {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-ui); font-size: 12px; font-weight: 600;
color: #5B6678;
}
.gen-read__label, .gen-sw { opacity: 0; }
.hbslide.is-active .gen-read__label { animation: genFade 0.35s ease-out 1.9s forwards; }
.gen-sw {
width: 20px; height: 20px; border-radius: 6px;
background: var(--c);
box-shadow: 0 3px 10px rgba(13,23,51,0.18), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.hbslide.is-active .gen-sw { animation: genPop 0.45s cubic-bezier(.22,1.4,.4,1) calc(2.0s + var(--d)) forwards; }
.gen-sw--logo {
background: #fff;
display: flex; flex-direction: column; justify-content: center; gap: 2.5px;
padding: 0 4px;
}
.gen-sw--logo i { display: block; height: 2.5px; border-radius: 999px; background: #12324F; }
.gen-sw--logo i:nth-child(1) { width: 5px; }
.gen-sw--logo i:nth-child(2) { width: 8px; }
.gen-sw--logo i:nth-child(3) { width: 11px; }
/* --- the generated cards --- */
.gen-cards { display: flex; align-items: center; gap: 20px; }
.gen-card {
opacity: 0;
transform: translateY(26px) rotate(-3deg) scale(0.94);
}
.hbslide.is-active .gen-card {
animation: genDeal 0.75s cubic-bezier(.22,.75,.3,1) calc(2.6s + var(--d)) forwards;
}
.gen-card:nth-child(2) { margin-top: -18px; }
/* Smaller than the stage cards — three of them need to sit side by side and
still leave the headline its corner. */
.gencard {
width: 176px;
transform: none;
box-shadow: 0 18px 40px rgba(10,18,38,0.26), 0 3px 8px rgba(10,18,38,0.14);
}
.gencard--navy { background: linear-gradient(150deg, #16395B 0%, #0E2740 100%); color: #EAF1F7; }
.gencard--navy .simcard__mark i { background: #2EC4B6; }
.gencard--navy .simcard__tap { color: #2EC4B6; }
.gencard--teal { background: linear-gradient(150deg, #2EC4B6 0%, #1B9C90 100%); color: #04241F; }
.gencard--teal .simcard__tap { color: #04241F; }
.gencard--teal .simcard__who u { opacity: 0.85; }
.gencard--gold { background: linear-gradient(150deg, #D8B45C 0%, #B98F35 100%); color: #362509; }
.gencard--gold .simcard__mark i { background: #362509; }
.gencard--gold .simcard__tap { color: #362509; }
.gencard .simcard__big {
position: absolute; right: 10px; bottom: -6px;
font-family: var(--font-display); font-weight: 900; font-size: 62px;
line-height: 1; opacity: 0.16; pointer-events: none;
}
.gencard .simcard__qr { width: 26px; height: 26px; }
/* A light sweeps across each card as it lands — the "printing" beat. */
.gen-sweep {
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.42) 50%, transparent 62%);
transform: translateX(-120%);
pointer-events: none;
}
.hbslide.is-active .gen-sweep {
animation: genSweep 0.95s ease-out calc(2.9s + var(--d)) forwards;
}
@keyframes genFade { to { opacity: 1; } }
@keyframes genFadeOut { to { opacity: 0; } }
@keyframes genType { to { max-width: 13em; } }
@keyframes genCaret { 50% { opacity: 0; } }
@keyframes genPress { 40% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes genPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes genDeal { to { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } }
@keyframes genSweep { to { transform: translateX(120%); } }
/* ============================================================
Slide 3 — the hosted profile, as a stack of live cards
Follows the "Every interaction, on brand" panel on tapt.io: three profile
cards overlapping and rising to the right, each dealt in behind the last.
Inside each card the portrait drops in first and the rows follow, so the
profile visibly assembles itself instead of just fading up.
============================================================ */
.pstack {
position: relative;
display: flex;
align-items: flex-end;
}
.pcard {
position: relative;
width: 214px;
flex: 0 0 auto;
background: #fff;
border-radius: 18px;
overflow: hidden;
font-family: var(--font-ui);
color: #10203A;
box-shadow: 0 26px 60px rgba(10,18,38,0.24), 0 3px 10px rgba(10,18,38,0.10);
opacity: 0;
transform: translateY(34px) scale(0.96);
}
.hbslide.is-active .pcard {
animation: pcDeal 0.8s cubic-bezier(.22,.75,.3,1) calc(0.25s + var(--d)) forwards;
}
/* Overlapped and stepped up to the right, so the front card reads as nearest */
.pcard--mid { margin-left: -74px; margin-bottom: 26px; z-index: 2; }
.pcard--front { margin-left: -74px; margin-bottom: 52px; z-index: 3; }
.pcard--back { z-index: 1; opacity: 0; }
/* Header band + brand mark */
.pcard__cap {
position: relative; height: 76px;
background: linear-gradient(150deg, #2EC4B6 0%, #1B8E86 100%);
}
.pcard__wave {
position: absolute; left: 0; right: 0; bottom: -1px; height: 26px;
background: #fff;
clip-path: ellipse(78% 100% at 50% 100%);
}
.pcard__logo { position: absolute; right: 16px; top: 14px; color: rgba(255,255,255,0.85); }
.pcard__logo svg { width: 26px; height: 26px; }
/* Portrait — drops in and settles before anything else */
.pcard__av {
position: absolute; left: 16px; top: 46px;
width: 46px; height: 46px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 15px;
color: #fff;
border: 3px solid #fff;
box-shadow: 0 6px 18px rgba(10,18,38,0.22);
z-index: 2;
opacity: 0;
transform: scale(0.4) translateY(-10px);
}
.pcard__av--a { background: linear-gradient(150deg, #0DC5B4, #0AA597); }
.pcard__av--b { background: linear-gradient(150deg, #2EC4B6, #17877E); }
.pcard__av--c { background: linear-gradient(150deg, #D8B45C, #B98F35); }
.hbslide.is-active .pcard__av {
animation: pcPop 0.6s cubic-bezier(.22,1.35,.4,1) calc(0.6s + var(--d)) forwards;
}
/* Body rows deal in one after another */
.pcard__body { padding: 12px 16px 16px; }
.pcard__body > * {
opacity: 0;
transform: translateY(10px);
}
.hbslide.is-active .pcard__body > * {
animation: pcRow 0.55s cubic-bezier(.22,.75,.3,1) forwards;
}
.hbslide.is-active .pcard__body > *:nth-child(1) { animation-delay: calc(0.85s + var(--d)); }
.hbslide.is-active .pcard__body > *:nth-child(2) { animation-delay: calc(0.92s + var(--d)); }
.hbslide.is-active .pcard__body > *:nth-child(3) { animation-delay: calc(0.99s + var(--d)); }
.hbslide.is-active .pcard__body > *:nth-child(4) { animation-delay: calc(1.06s + var(--d)); }
.hbslide.is-active .pcard__body > *:nth-child(5) { animation-delay: calc(1.13s + var(--d)); }
.hbslide.is-active .pcard__body > *:nth-child(6) { animation-delay: calc(1.20s + var(--d)); }
.hbslide.is-active .pcard__body > *:nth-child(7) { animation-delay: calc(1.27s + var(--d)); }
.hbslide.is-active .pcard__body > *:nth-child(8) { animation-delay: calc(1.34s + var(--d)); }
.hbslide.is-active .pcard__body > *:nth-child(9) { animation-delay: calc(1.41s + var(--d)); }
.hbslide.is-active .pcard__body > *:nth-child(10){ animation-delay: calc(1.48s + var(--d)); }
.pcard__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; margin-top: 4px; }
.pcard__name em { font-style: normal; font-size: 9px; font-weight: 500; color: #8A95A8; margin-left: 3px; }
.pcard__role { font-size: 11px; color: #5B6678; margin-top: 1px; }
.pcard__line { font-size: 10px; color: #5B6678; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__socials { display: flex; gap: 6px; margin-top: 10px; }
.pcard__socials i { width: 20px; height: 20px; border-radius: 50%; background: #EEF1F7; display: block; }
.pcard__label { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8A95A8; margin-top: 12px; }
.pcard__link {
font-size: 10.5px; font-weight: 500;
border: 1px solid rgba(13,23,51,0.10);
border-radius: 999px;
padding: 6px 10px;
margin-top: 6px;
}
.pcard__cta {
margin-top: 10px;
background: linear-gradient(135deg, #2EC4B6 0%, #1B9C90 100%);
color: #04241F;
font-size: 10.5px; font-weight: 700;
text-align: center;
border-radius: 999px;
padding: 8px 10px;
}
@keyframes pcDeal { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pcPop { to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pcRow { to { opacity: 1; transform: translateY(0); } }
/* Only the two front cards fully arrive — the back one stays a hint of depth */
.hbslide.is-active .pcard--back { animation-name: pcDealBack; }
@keyframes pcDealBack { to { opacity: 0.55; transform: translateY(0) scale(1); } }
/* --- narrower viewports --- */
@media (max-width: 1400px) { .genstage, .pstack { transform: scale(0.90); } }
@media (max-width: 1180px) { .genstage, .pstack { transform: scale(0.78); } }
@media (max-width: 1023px) { .genstage, .pstack { transform: scale(0.66); } }
@media (max-width: 860px) {
.genstage { transform: scale(0.62); }
.pstack { transform: scale(0.62); }
}
@media (max-width: 560px) {
.genstage { transform: scale(0.46); }
.pstack { transform: scale(0.46); }
}
/* Reduced motion: show the finished state, skip the performance. */
@media (prefers-reduced-motion: reduce) {
.hbslide.is-active .gen-bar,
.hbslide.is-active .gen-read__label,
.hbslide.is-active .gen-sw,
.hbslide.is-active .gen-card,
.hbslide.is-active .pcard,
.hbslide.is-active .pcard__av,
.hbslide.is-active .pcard__body > * { animation: none; opacity: 1; transform: none; }
.hbslide.is-active .pcard--back { opacity: 0.55; }
.hbslide.is-active .gen-type { animation: none; max-width: 13em; }
.hbslide.is-active .gen-sweep { animation: none; opacity: 0; }
.gen-caret { display: none; }
}
/* ============================================================
Scroll reveals — everything below the hero
One base rule plus four movement variants, driven by a data attribute the
reveal script stamps on at load. `.rv-in` is added once, when the block
first crosses into view.
These animate the `translate` and `scale` properties rather than
`transform` on purpose: several of these blocks already use `transform`
for their hover lift, and a reveal that finished by writing
`transform: none` would outrank and kill it.
============================================================ */
[data-rv] {
opacity: 0;
transition:
opacity 0.75s cubic-bezier(.22,.61,.36,1),
translate 0.75s cubic-bezier(.22,.61,.36,1),
scale 0.75s cubic-bezier(.22,.61,.36,1);
transition-delay: var(--rvd, 0ms);
}
[data-rv="up"] { translate: 0 28px; }
[data-rv="rise"] { translate: 0 44px; scale: 0.975; }
[data-rv="left"] { translate: -20px 0; }
[data-rv="fade"] { translate: none; }
/* Word-split headings carry their motion in the words, so the block itself
stays put and visible — otherwise the whole line fades as a slab and the
per-word stagger is wasted. */
[data-rv="words"] { opacity: 1; }
[data-rv].rv-in { opacity: 1; translate: none; scale: none; }
/* Section titles reuse the hero's word boxes. */
[data-rv="words"].rv-in .hbw > i {
transform: none;
opacity: 1;
transition-delay: calc(var(--w, 0) * 42ms);
}
@media (prefers-reduced-motion: reduce) {
[data-rv] { opacity: 1; translate: none; scale: none; transition: none; }
[data-rv="words"] .hbw > i { transform: none; opacity: 1; transition: none; }
}
/* Chart bars grow out of the baseline. Their heights are set inline as
percentages, so the growth rides on scaleY from the bottom rather than on
height — the inline value stays the target and nothing has to be read back
out in script. */
[data-rv="bars"] { opacity: 1; }
[data-rv="bars"] > * {
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.7s cubic-bezier(.22,.61,.36,1);
}
[data-rv="bars"].rv-in > * {
transform: scaleY(1);
transition-delay: calc(var(--i, 0) * 35ms);
}
@media (prefers-reduced-motion: reduce) {
[data-rv="bars"] > * { transform: none; transition: none; }
}
/* ============================================================
Ambient shapes — slow-drifting decoration behind every band
Two soft colour fields and the brand's tap glyph, wandering on long loops
so the page below the hero is never completely still. Purely decorative:
injected by script, aria-hidden, pointer-events off, and sat behind
everything via z-index rather than by being painted over.
Motion is deliberately slow (19–46s) and low-contrast. A shape you can
catch moving while you read is a distraction; this is meant to register
only as the page feeling alive.
============================================================ */
.has-fx { position: relative; overflow: hidden; }
/* Everything the section actually says sits above the decoration. */
.has-fx > *:not(.fx-shapes) { position: relative; z-index: 1; }
.fx-shapes {
position: absolute; inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
/* Mirrored on alternate sections so the same slots don't read as a
repeating stamp down the page. */
transform: scaleX(var(--fx-flip, 1));
}
.fx-shape {
position: absolute;
display: block;
border-radius: 50%;
--fx-c: rgba(13,197,180,0.30);
}
/* Big blurred colour fields */
.fx-shape--blob {
background: radial-gradient(circle at 50% 50%, var(--fx-c), transparent 70%);
filter: blur(30px);
}
/* Three slots. There were outlined rings and a dot here too, but they read
as arbitrary circles floating over the content with no reason to be
there — the two soft colour fields do the ambient job on their own. */
.fx-shape:nth-child(1) { width: 440px; height: 440px; top: -12%; left: -7%; animation: fxDriftA 34s ease-in-out infinite; }
.fx-shape:nth-child(2) { width: 540px; height: 540px; bottom: -16%; right: -9%; animation: fxDriftB 46s ease-in-out infinite; }
.fx-shape:nth-child(3) { width: 132px; height: 132px; top: 62%; right: 6%; animation: fxDriftA 31s ease-in-out infinite; }
/* The brand's own tap glyph, used as a drifting watermark. Inlined as a
data URI so it needs no