/* ============================================================
VCFY Corporate — front-end styles
Palette: deep navy #0B1220 · gold #FDC800 · white #FFFFFF
Type: Space Grotesk (display) · Inter (body)
============================================================ */
:root {
--bg: #131C2E;
--bg-2: #1A2540;
--bg-3: #1F2C49;
--line: rgba(255,255,255,0.08);
--line-strong: rgba(255,255,255,0.14);
--text: #F5F7FA;
--text-dim: rgba(245,247,250,0.72);
--text-mute: rgba(245,247,250,0.52);
--accent: #FFC700;
--accent-2: #FFB300;
--accent-pink: #E91E63;
--accent-blue: #4F46E5;
--accent-purple: #7C3AED;
--accent-soft: rgba(255,199,0,0.10);
--radius: 14px;
--radius-lg: 22px;
--container: 1200px;
--ease: cubic-bezier(.2,.7,.2,1);
--shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
}
/* ---- reset ---- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--accent); }
button { font: inherit; cursor: pointer; }
.screen-reader-text {
position: absolute !important;
clip: rect(1px,1px,1px,1px);
width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
position: fixed; top: 12px; left: 12px; width: auto; height: auto;
padding: 10px 16px; background: var(--accent); color: var(--bg);
clip: auto; z-index: 9999; border-radius: 8px;
}
/* ---- typography ---- */
h1,h2,h3,h4 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 5vw + 0.5rem, 4.4rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 2.5vw + 1rem, 3rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.15rem, 0.6vw + 1rem, 1.4rem); }
h4 { font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-dim); }
p { margin: 0 0 1em; color: var(--text-dim); }
strong { color: var(--text); }
.accent { color: var(--accent); }
.eyebrow {
display: inline-block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
padding: 6px 12px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: var(--accent-soft);
margin-bottom: 18px;
}
/* ---- layout ---- */
.vcfy-container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section-head {
max-width: 760px;
margin: 0 auto clamp(40px, 6vw, 72px);
text-align: center;
}
.section-head p { font-size: 1.125rem; color: var(--text-dim); }
/* ---- buttons ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 0.98rem;
padding: 14px 24px;
border-radius: 10px;
border: 1px solid transparent;
cursor: pointer;
transition: all .25s var(--ease);
white-space: nowrap;
letter-spacing: 0.01em;
text-decoration: none;
}
a.btn, a.btn:hover, a.btn:visited { text-decoration: none; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: 0.88rem; }
.btn-lg { padding: 18px 32px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-accent {
background: var(--accent);
color: #0B1220;
box-shadow: 0 10px 30px -10px rgba(253,200,0,0.5);
}
.btn-accent:hover { background: var(--accent-2); color: #0B1220; box-shadow: 0 14px 36px -10px rgba(253,200,0,0.7); }
.btn-ghost {
background: transparent;
color: var(--text);
border-color: var(--line-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--accent); border-color: var(--accent); }
.btn-outline {
background: transparent;
color: var(--text);
border-color: var(--line-strong);
}
.btn-outline:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* ============================================================
NAV
============================================================ */
.vcfy-nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(19,28,46,0.72);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid transparent;
transition: background .3s var(--ease), border-color .3s var(--ease);
}
.vcfy-nav.scrolled {
background: rgba(19,28,46,0.92);
border-bottom-color: var(--line);
}
.nav-inner {
display: flex; align-items: center;
gap: 24px;
min-height: 72px;
}
.nav-links { margin-left: auto; }
/* When nav-links is hidden on mobile, push the hamburger to the right */
@media (max-width: 860px) {
.nav-toggle { margin-left: auto; }
}
.nav-logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav-logo img { height: 32px; width: auto; }
.nav-links {
display: flex; gap: 28px;
font-size: 0.95rem;
font-weight: 500;
color: var(--text-dim);
}
.nav-links a { position: relative; padding: 6px 0; color: var(--text-dim); text-decoration: none; }
.nav-links a::after {
content: ''; position: absolute; left: 0; bottom: 0;
width: 0; height: 2px; background: var(--accent);
transition: width .25s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { margin-left: 0; }
/* Fancy Business Card CTA in the nav */
.nav-card-cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 12px;
border-radius: 999px;
background: linear-gradient(120deg, rgba(253,200,0,0.08), rgba(253,200,0,0.02) 60%, transparent);
color: var(--text);
text-decoration: none;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid rgba(253,200,0,0.35);
overflow: hidden;
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.nav-card-cta svg {
width: 18px; height: 18px;
color: var(--accent);
flex-shrink: 0;
}
.nav-card-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(253,200,0,0.18) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.7s ease;
pointer-events: none;
}
.nav-card-cta:hover {
color: var(--accent);
border-color: var(--accent);
transform: translateY(-1px);
background: linear-gradient(120deg, rgba(253,200,0,0.14), rgba(253,200,0,0.04));
}
.nav-card-cta:hover::before { transform: translateX(100%); }
/* Drawer variant — plain clean button, matches Book a Discovery Call visually */
.nav-card-cta-drawer {
width: 100%;
justify-content: center;
padding: 14px 24px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.98rem;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: 10px;
margin: 0;
background: transparent;
border: 1px solid var(--line-strong);
color: var(--text);
overflow: visible;
}
.nav-card-cta-drawer + .btn { margin-top: 12px !important; }
.nav-card-cta-drawer::before { display: none; }
.nav-card-cta-drawer svg { width: 20px; height: 20px; color: var(--accent); }
.nav-card-cta-drawer:hover {
background: rgba(253,200,0,0.08);
border-color: var(--accent);
color: var(--accent);
transform: none;
}
@media (max-width: 860px) {
.vcfy-nav .nav-card-cta:not(.nav-card-cta-drawer) { display: none; }
}
.nav-toggle {
display: none;
width: 42px; height: 42px;
border: 1px solid var(--line-strong);
background: transparent;
border-radius: 10px;
padding: 0;
position: relative;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nav-toggle span {
position: absolute; left: 50%; top: 50%;
width: 18px; height: 2px;
background: var(--text);
transform: translate(-50%, -50%);
transition: all .3s var(--ease);
}
.nav-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); }
.nav-toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); }
.nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.06); border-color: var(--accent); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); background: var(--accent); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); background: var(--accent); }
/* Mobile drawer */
.vcfy-nav.menu-open { background: rgba(19,28,46,0.98); }
.nav-drawer {
position: fixed;
inset: 0;
background: #0B1220;
padding: 96px 24px 48px;
transform: translateY(-8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
z-index: 90;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-drawer-inner {
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
body.menu-open { overflow: hidden; }
body.menu-open .nav-drawer {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear 0s;
}
.nav-drawer a:not(.btn):not(.nav-card-cta-drawer) {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.5rem;
font-weight: 500;
padding: 18px 0;
border-bottom: 1px solid var(--line);
color: var(--text);
letter-spacing: -0.01em;
}
.nav-drawer a:not(.btn):not(.nav-card-cta-drawer):hover { color: var(--accent); }
.nav-drawer .btn { margin-top: 28px; width: 100%; }
.nav-drawer .drawer-contact {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--line);
color: var(--text-mute);
font-size: 0.9rem;
}
.nav-drawer .drawer-contact a { font-size: 1rem; padding: 4px 0; border: none; color: var(--accent); }
/* ============================================================
HERO
============================================================ */
.hero {
padding-top: clamp(130px, 15vw, 180px);
padding-bottom: clamp(80px, 10vw, 140px);
min-height: 100vh;
display: flex; align-items: center;
overflow: hidden;
background:
radial-gradient(720px 520px at 92% 0%, rgba(255,199,0,0.14), transparent 65%),
radial-gradient(680px 540px at 6% 100%, rgba(79,70,229,0.18), transparent 60%),
radial-gradient(560px 400px at 50% 110%, rgba(233,30,99,0.10), transparent 65%),
radial-gradient(420px 360px at 0% 0%, rgba(124,58,237,0.10), transparent 60%),
var(--bg);
}
.hero-bg {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
overflow: hidden;
opacity: 0.5;
}
.hero-photo {
position: absolute;
top: 0; right: 0;
width: 55%;
height: 100%;
object-fit: cover;
object-position: center right;
opacity: 0.9;
z-index: 0;
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0) 100%);
filter: saturate(0.95);
}
.hero-photo-fade {
position: absolute; inset: 0;
z-index: 1;
background:
linear-gradient(to bottom, transparent 65%, rgba(19,28,46,0.35));
pointer-events: none;
}
@media (max-width: 760px) {
.hero-bg { opacity: 1; }
.hero-photo {
width: 100%;
height: 45%;
top: 0;
left: 0;
right: auto;
opacity: 1;
object-fit: cover;
object-position: 60% 30%;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0) 100%);
}
.hero-photo-fade {
display: block;
background:
linear-gradient(180deg, rgba(19,28,46,0) 0%, rgba(19,28,46,0.35) 30%, rgba(19,28,46,0.95) 45%, rgba(19,28,46,1) 55%);
}
.hero-content { position: relative; z-index: 2; padding-top: 52vw; }
}
.hero-grid-overlay {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 75%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-content { max-width: 860px; }
.hero-title { margin-bottom: 24px; }
.hero-sub {
font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
max-width: 640px;
color: var(--text-dim);
margin-bottom: 40px;
}
.hero-ctas {
display: flex; gap: 14px;
margin-bottom: 56px;
flex-wrap: wrap;
}
.hero-trust {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 20px;
padding-top: 32px;
border-top: 1px solid var(--line);
max-width: 760px;
}
.hero-trust > div { display: flex; flex-direction: column; gap: 4px; }
.hero-trust strong {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.4rem, 1.5vw + 0.8rem, 1.9rem);
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
}
.hero-trust strong .unit { color: var(--accent); margin-left: 2px; }
.hero-trust span { font-size: 0.85rem; color: var(--text-mute); }
.scroll-cue {
position: absolute;
bottom: 30px; left: 50%;
transform: translateX(-50%);
width: 24px; height: 40px;
border: 1px solid var(--line-strong);
border-radius: 14px;
z-index: 3;
}
.scroll-cue span {
position: absolute;
top: 8px; left: 50%;
transform: translateX(-50%);
width: 3px; height: 8px;
background: var(--accent);
border-radius: 2px;
animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
0%,100% { opacity: 0; transform: translate(-50%, 0); }
40% { opacity: 1; }
80% { opacity: 0; transform: translate(-50%, 12px); }
}
/* ============================================================
PROBLEM / SOLUTION
============================================================ */
.ps { padding: 96px 0 72px; position: relative; overflow: hidden; }
.ps::before {
content: '';
position: absolute;
top: -160px; right: -120px;
width: 520px; height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(253,200,0,0.10), transparent 65%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
.ps::after {
content: '';
position: absolute;
bottom: -180px; left: -140px;
width: 460px; height: 460px;
border-radius: 50%;
background: radial-gradient(circle, rgba(94,180,255,0.06), transparent 65%);
filter: blur(70px);
pointer-events: none;
z-index: 0;
}
.ps > .vcfy-container { position: relative; z-index: 1; }
.ps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 40px;
}
@media (max-width: 980px) {
.ps-grid { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; }
}
.ps-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px 26px;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.ps-card:hover { border-color: rgba(253,200,0,0.35); transform: translateY(-2px); }
.ps-icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px;
background: rgba(253,200,0,0.12);
color: var(--accent);
margin-bottom: 16px;
}
.ps-icon svg { width: 22px; height: 22px; }
.ps-card h3 {
font-size: 1.15rem;
line-height: 1.35;
margin: 0 0 10px;
color: var(--text);
}
.ps-card p { margin: 0 0 10px; color: var(--text-mute); font-size: 0.96rem; line-height: 1.6; }
.ps-card .ps-problem { color: var(--text-mute); }
.ps-card .ps-solution { color: var(--text); }
.ps-card .ps-solution strong { color: var(--accent); }
.ps-cta {
margin-top: 40px;
display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
@media (max-width: 760px) {
.ps { padding: 72px 0 48px; }
.ps-grid { grid-template-columns: 1fr; gap: 16px; }
.ps-card { padding: 22px 20px; }
}
/* ============================================================
TRUST BAR
============================================================ */
.trust {
padding: clamp(36px, 5vw, 64px) 0;
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.trust-label {
text-align: center;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-mute);
margin-bottom: 22px;
}
/* Marquee container */
.trust-marquee {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
/* Soft fade on the edges so bubbles don't pop in/out hard */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
/* Ambient glow blobs */
.trust-bg-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(70px);
opacity: 0.45;
z-index: 0;
}
.trust-bg-glow-a {
width: 280px; height: 280px;
top: -40px; left: 12%;
background: radial-gradient(circle, rgba(253,200,0,0.20), transparent 70%);
animation: trust-glow-drift 14s ease-in-out infinite;
}
.trust-bg-glow-b {
width: 240px; height: 240px;
bottom: -40px; right: 12%;
background: radial-gradient(circle, rgba(94,180,255,0.10), transparent 70%);
animation: trust-glow-drift 18s ease-in-out infinite reverse;
}
@keyframes trust-glow-drift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(24px, -16px); }
}
/* Each row */
.trust-row {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
display: flex;
align-items: center;
min-height: 44px;
}
.trust-track {
display: inline-flex;
align-items: center;
gap: 12px;
white-space: nowrap;
width: max-content;
will-change: transform;
}
/* Two rows drift in opposite directions */
.trust-row-1 .trust-track { animation: trust-drift-left 38s linear infinite; }
.trust-row-2 .trust-track { animation: trust-drift-right 46s linear infinite; }
@keyframes trust-drift-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes trust-drift-right {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
/* Pause on hover so users can read */
.trust-marquee:hover .trust-track { animation-play-state: paused; }
/* Bubbles — glassmorphism */
.trust-bubble {
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: 10px 20px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--text);
background: rgba(20, 23, 28, 0.5);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 999px;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow:
0 8px 24px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.05);
transition: border-color 0.25s ease, color 0.25s ease;
}
.trust-bubble:hover {
border-color: rgba(253,200,0,0.4);
color: var(--accent);
}
/* Tablet */
@media (max-width: 880px) {
.trust-bubble { font-size: 0.8rem; padding: 8px 16px; }
.trust-row-1 .trust-track { animation-duration: 32s; }
.trust-row-2 .trust-track { animation-duration: 40s; }
}
/* Phone */
@media (max-width: 540px) {
.trust-bubble { font-size: 0.74rem; padding: 7px 14px; }
.trust-marquee {
gap: 10px;
/* shorten the edge fade so more bubbles stay visible */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.trust-row { min-height: 38px; }
.trust-bg-glow { filter: blur(60px); opacity: 0.3; }
}
/* Respect reduced motion — pause animation but show content */
@media (prefers-reduced-motion: reduce) {
.trust-track,
.trust-bg-glow { animation: none !important; }
.trust-row-2 .trust-track { transform: translateX(-50%); }
}
/* ============================================================
SERVICES
============================================================ */
.services { background: var(--bg); position: relative; overflow: hidden; padding-bottom: clamp(40px, 5vw, 64px); }
.stack { padding-top: clamp(40px, 5vw, 64px); }
.services::before {
content: '';
position: absolute;
top: 8%; left: -160px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(253,200,0,0.08), transparent 65%);
filter: blur(70px);
pointer-events: none;
z-index: 0;
}
.services::after {
content: '';
position: absolute;
bottom: 12%; right: -140px;
width: 420px; height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(186,120,255,0.06), transparent 65%);
filter: blur(70px);
pointer-events: none;
z-index: 0;
}
.services > .vcfy-container { position: relative; z-index: 1; }
.services .section-head,
.ps .section-head,
.work .section-head,
.testimonials .section-head { max-width: 1100px; }
#services-title,
#ps-title,
#work-title,
#testimonials-title { white-space: nowrap; }
@media (max-width: 880px) {
#services-title,
#ps-title,
#work-title,
#testimonials-title { white-space: normal; }
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.service-card {
padding: 32px 28px;
background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(253,200,0,0.08), transparent 40%);
opacity: 0; transition: opacity .4s var(--ease);
pointer-events: none;
}
.service-card:hover {
transform: translateY(-4px);
border-color: rgba(253,200,0,0.3);
box-shadow: var(--shadow);
}
.service-card:hover::before { opacity: 1; }
.service-icon {
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent);
margin-bottom: 18px;
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { margin-bottom: 10px; color: var(--text); }
.service-card p { font-size: 0.95rem; margin-bottom: 16px; }
.service-bullets {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.service-bullets li {
font-size: 0.88rem;
color: var(--text-mute);
padding-left: 18px;
position: relative;
}
.service-bullets li::before {
content: ''; position: absolute; left: 0; top: 9px;
width: 8px; height: 2px; background: var(--accent);
}
/* ============================================================
WORK
============================================================ */
/* ============================================================
TECH STACK (infinite marquee)
============================================================ */
.stack { position: relative; overflow: visible; }
.stack-marquee {
/* Clip the scrolling track horizontally only — vertical must stay
visible so item hover tooltips don't get cut off at the top. */
overflow-x: hidden;
overflow-y: visible;
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
margin: 8px 0;
padding: 56px 0;
}
.stack-track {
display: flex;
align-items: center;
width: max-content;
animation: stack-scroll 38s linear infinite;
will-change: transform;
}
.stack-marquee.reverse .stack-track {
animation-direction: reverse;
animation-duration: 46s;
}
.stack-item {
position: relative;
display: inline-flex;
align-items: center;
margin-right: 72px;
flex-shrink: 0;
}
.stack-item img {
height: 40px; width: auto;
opacity: 0.55;
transition: opacity .3s var(--ease), transform .3s var(--ease);
display: block;
}
.stack-item::after {
content: attr(data-name);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: rgba(19,28,46,0.96);
color: var(--text);
border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
padding: 6px 12px;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .2s var(--ease), transform .2s var(--ease);
z-index: 2;
}
.stack-item::before {
content: '';
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(19,28,46,0.96);
opacity: 0;
pointer-events: none;
transition: opacity .2s var(--ease);
z-index: 2;
}
.stack-marquee:hover .stack-track { animation-play-state: paused; }
.stack-item:hover img { opacity: 1; transform: scale(1.08); }
.stack-item:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.stack-item:hover::before { opacity: 1; }
@keyframes stack-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.stack-track { animation: none; }
}
.work { background: var(--bg-2); position: relative; overflow: hidden; }
.work::before {
content: '';
position: absolute;
top: -120px; left: 50%;
transform: translateX(-50%);
width: 700px; height: 360px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(253,200,0,0.07), transparent 65%);
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.work::after {
content: '';
position: absolute;
bottom: -160px; right: -100px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(94,180,255,0.05), transparent 65%);
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.work > .vcfy-container { position: relative; z-index: 1; }
.work-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 20px;
}
.work-card {
padding: 0;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: transform .35s var(--ease), border-color .35s var(--ease);
position: relative;
display: flex; flex-direction: column;
overflow: hidden;
}
.work-shot {
display: block;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
overflow: hidden;
border-bottom: 1px solid var(--line);
position: relative;
}
.work-shot img {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: transform .5s var(--ease);
}
.work-card:hover .work-shot img { transform: scale(1.04); }
.work-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.work-card:hover {
transform: translateY(-4px);
border-color: rgba(253,200,0,0.3);
box-shadow: var(--shadow);
}
.work-card-wide { grid-column: span 3; min-height: 200px; }
.work-tag {
align-self: flex-start;
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
padding: 4px 8px;
background: var(--accent-soft);
border-radius: 5px;
margin-bottom: 14px;
font-weight: 500;
}
.work-card h3 { margin-bottom: 8px; }
.work-card p { font-size: 0.92rem; margin-bottom: 16px; flex: 1; }
.work-link {
font-size: 0.9rem;
font-weight: 500;
color: var(--accent);
font-family: 'Space Grotesk', sans-serif;
align-self: flex-start;
border-bottom: 1px solid transparent;
transition: border-color .2s var(--ease);
}
.work-link:hover { border-bottom-color: var(--accent); }
/* Industry filter tabs */
.work-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 0 auto 28px;
max-width: 1000px;
}
.work-filter {
appearance: none;
background: transparent;
border: 1px solid var(--line);
color: var(--text-2);
padding: 8px 14px;
border-radius: 999px;
font-size: 0.85rem;
font-family: inherit;
cursor: pointer;
transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
white-space: nowrap;
}
.work-filter:hover { border-color: rgba(253,200,0,0.4); color: var(--text); }
.work-filter.is-active {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
.work-filter.is-active .work-filter-count { color: var(--bg); opacity: 0.7; }
.work-filter-count { font-size: 0.78rem; opacity: 0.6; margin-left: 2px; }
/* Hidden cards for filter + load-more */
.work-card.is-hidden { display: none !important; }
/* Filter-switch animations */
.work-card {
will-change: opacity, transform, filter;
}
.work-card.is-leaving {
opacity: 0;
transform: scale(0.92) translateY(10px);
filter: blur(8px);
pointer-events: none;
transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
}
.work-card.is-entering {
animation: work-card-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes work-card-enter {
0% { opacity: 0; transform: translateY(28px) scale(0.94); filter: blur(10px); }
60% { opacity: 1; filter: blur(0); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.work-filter {
transition: border-color 0.2s ease, color 0.2s ease, background 0.25s ease, transform 0.2s ease;
}
.work-filter:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
.work-card.is-leaving,
.work-card.is-entering { animation: none !important; transition: none !important; opacity: 1; transform: none; filter: none; }
}
/* Load more */
.work-loadmore-wrap {
display: flex;
justify-content: center;
margin-top: 32px;
}
.work-loadmore {
min-width: 220px;
}
.work-loadmore.is-done {
display: none;
}
/* ============================================================
PROCESS
============================================================ */
.process { background: var(--bg); }
.process-list {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
counter-reset: step;
}
.process-step {
padding: 30px 26px;
background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
border: 1px solid var(--line);
border-radius: var(--radius-lg);
position: relative;
transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.process-step:hover { transform: translateY(-3px); border-color: rgba(253,200,0,0.28); }
.step-num {
font-family: 'Space Grotesk', sans-serif;
font-size: 2.8rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
margin-bottom: 14px;
letter-spacing: -0.03em;
opacity: 0.9;
}
.process-step h3 { margin-bottom: 8px; }
.process-step p { font-size: 0.92rem; margin: 0; }
/* Per-step color accents — each phase gets its own hue */
.process-step:nth-child(1) .step-num { color: #5EB4FF; } /* 01 Clarity — sky */
.process-step:nth-child(2) .step-num { color: #FDC800; } /* 02 Direction — gold */
.process-step:nth-child(3) .step-num { color: #A78BFA; } /* 03 Build — violet */
.process-step:nth-child(4) .step-num { color: #34D399; } /* 04 Grow — emerald */
.process-step:nth-child(1):hover { border-color: rgba(94,180,255,0.35); }
.process-step:nth-child(2):hover { border-color: rgba(253,200,0,0.35); }
.process-step:nth-child(3):hover { border-color: rgba(167,139,250,0.35); }
.process-step:nth-child(4):hover { border-color: rgba(52,211,153,0.35); }
/* ============================================================
TESTIMONIALS
============================================================ */
.testimonials { background: var(--bg-2); position: relative; overflow: hidden; }
.testimonials::before {
content: '';
position: absolute;
top: 10%; right: -160px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(253,200,0,0.07), transparent 65%);
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.testimonials::after {
content: '';
position: absolute;
bottom: -140px; left: -120px;
width: 420px; height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(94,180,255,0.06), transparent 65%);
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.testimonials > .vcfy-container { position: relative; z-index: 1; }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 20px;
}
.testimonial-card {
margin: 0;
padding: 28px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: transform .35s var(--ease), border-color .35s var(--ease);
display: flex; flex-direction: column;
}
.testimonial-card:hover { transform: translateY(-3px); border-color: rgba(253,200,0,0.3); }
.testimonial-card.featured {
background: linear-gradient(180deg, rgba(253,200,0,0.06), var(--bg));
border-color: rgba(253,200,0,0.22);
}
.testimonial-card .stars {
color: var(--accent);
font-size: 1.05rem;
letter-spacing: 2px;
margin-bottom: 14px;
}
.testimonial-card p {
font-size: 1rem;
color: var(--text);
margin-bottom: 16px;
flex: 1;
font-style: italic;
line-height: 1.6;
}
.testimonial-card footer {
font-size: 0.82rem;
color: var(--text-mute);
font-family: 'Space Grotesk', sans-serif;
border-top: 1px solid var(--line);
padding-top: 14px;
}
.testimonial-card cite { font-style: normal; color: var(--text-dim); font-weight: 500; }
/* ============================================================
PRICING
============================================================ */
.pricing { background: var(--bg); }
.currency-toggle {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px;
margin: 0 auto 44px;
gap: 2px;
position: relative;
}
.currency-toggle { display: flex; justify-content: center; }
.currency-toggle {
width: max-content;
margin-left: auto; margin-right: auto;
}
.cur-btn {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.88rem;
font-weight: 500;
padding: 9px 22px;
border: none;
background: transparent;
color: var(--text-dim);
border-radius: 999px;
transition: all .25s var(--ease);
}
.cur-btn.is-active {
background: var(--accent);
color: var(--bg);
}
.cur-btn:not(.is-active):hover { color: var(--text); }
.pricing-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 18px;
align-items: stretch;
}
.price-card {
padding: 32px 26px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: flex; flex-direction: column;
position: relative;
transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.price-card:hover { transform: translateY(-4px); border-color: rgba(253,200,0,0.25); }
.price-card.featured {
background: linear-gradient(180deg, rgba(253,200,0,0.08), var(--bg-2));
border-color: rgba(253,200,0,0.35);
box-shadow: var(--shadow);
transform: scale(1.02);
}
.price-card .badge {
position: absolute; top: -12px; left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: var(--bg);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
}
/* Per-tier color accents — top stripe + tier name color + hover border */
.price-card[data-key="launch"] { box-shadow: inset 0 3px 0 0 #5EB4FF; }
.price-card[data-key="scale"] { box-shadow: inset 0 3px 0 0 #A78BFA; }
.price-card[data-key="enterprise"] { box-shadow: inset 0 3px 0 0 #34D399; }
.price-card[data-key="launch"] .price-head h3 { color: #5EB4FF; }
.price-card[data-key="scale"] .price-head h3 { color: #A78BFA; }
.price-card[data-key="enterprise"] .price-head h3 { color: #34D399; }
.price-card[data-key="launch"]:hover { border-color: rgba(94,180,255,0.40); }
.price-card[data-key="scale"]:hover { border-color: rgba(167,139,250,0.40); }
.price-card[data-key="enterprise"]:hover { border-color: rgba(52,211,153,0.40); }
.price-head h3 {
font-size: 1.5rem;
margin-bottom: 6px;
color: var(--text);
}
.price-sub { font-size: 0.88rem; color: var(--text-mute); margin-bottom: 22px; min-height: 2.6em; }
.price-amount {
display: flex; align-items: baseline; gap: 6px;
margin-bottom: 24px;
}
.price-amount .amount {
font-family: 'Space Grotesk', sans-serif;
font-size: 2.6rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.03em;
line-height: 1;
}
.price-amount .period { font-size: 0.9rem; color: var(--text-mute); }
.setup {
font-size: 0.82rem;
color: var(--text-mute);
margin-bottom: 22px;
}
.price-features {
list-style: none; padding: 0; margin: 22px 0 0;
display: flex; flex-direction: column; gap: 10px;
flex: 1;
}
.price-features li {
font-size: 0.9rem;
color: var(--text-dim);
padding-left: 24px;
position: relative;
line-height: 1.5;
}
.price-features li::before {
content: '';
position: absolute; left: 0; top: 7px;
width: 14px; height: 8px;
border-left: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
.pricing-note {
text-align: center;
font-size: 0.88rem;
color: var(--text-mute);
margin: 32px auto 0;
max-width: 760px;
line-height: 1.55;
}
.pricing-note small { display: inline-block; max-width: 680px; margin-top: 6px; }
.pricing-note-highlight { color: var(--accent); }
/* Plan minimum-term subline under the price */
.price-term {
font-size: 0.78rem;
color: var(--text-mute);
margin: -10px 0 18px;
letter-spacing: 0.02em;
}
/* ----- Pricing controls (currency + view toggle) ----- */
.pricing-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 0 auto 44px;
}
.pricing-view-toggle {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px;
gap: 2px;
}
.pv-btn {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.88rem;
font-weight: 500;
padding: 9px 22px;
border: none;
background: transparent;
color: var(--text-dim);
border-radius: 999px;
cursor: pointer;
transition: all .25s var(--ease);
}
.pv-btn.is-active { background: var(--accent); color: var(--bg); }
.pv-btn:not(.is-active):hover { color: var(--text); }
/* When the toggle is here, kill the old margin on .currency-toggle */
.pricing-controls .currency-toggle { margin: 0; }
/* ----- Comparison table ----- */
.pricing-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--bg-2);
}
.pricing-table {
width: 100%;
border-collapse: collapse;
min-width: 880px;
font-size: 0.92rem;
color: var(--text-dim);
}
.pricing-table thead th {
position: sticky;
top: 0;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
padding: 22px 18px;
text-align: left;
font-weight: 600;
vertical-align: top;
z-index: 1;
}
.pricing-table .pt-spec-head {
color: var(--text-mute);
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.pricing-table .pt-plan { min-width: 200px; }
.pricing-table .pt-plan.is-featured {
background: linear-gradient(180deg, rgba(253,200,0,0.10), var(--bg-2));
}
.pt-plan-name {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.15rem;
color: var(--text);
margin-bottom: 4px;
}
.pt-plan-price {
display: flex; align-items: baseline; gap: 4px;
margin-bottom: 10px;
}
.pt-plan-price .amount {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
}
.pt-plan-period { font-size: 0.78rem; color: var(--text-mute); }
.pt-plan-cta {
display: inline-block;
font-size: 0.82rem;
color: var(--accent);
font-weight: 500;
border-bottom: 1px solid transparent;
transition: border-color .2s var(--ease);
}
.pt-plan-cta:hover { border-bottom-color: var(--accent); }
.pricing-table tbody tr.pt-group th {
background: var(--bg);
color: var(--text-mute);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
padding: 14px 18px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
text-align: left;
}
.pricing-table tbody tr:not(.pt-group) th {
position: sticky;
left: 0;
background: var(--bg-2);
font-weight: 500;
color: var(--text-dim);
text-align: left;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
z-index: 0;
}
.pricing-table tbody tr:hover th:not([scope=rowgroup]),
.pricing-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.pricing-table .pt-cell {
padding: 14px 18px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
color: var(--text);
}
.pricing-table .pt-cell.is-featured {
background: rgba(253,200,0,0.04);
}
.pt-yes { color: var(--accent); font-weight: 700; font-size: 1.1rem; }
.pt-no { color: var(--text-mute); }
@media (max-width: 720px) {
.pricing-table { min-width: 720px; font-size: 0.84rem; }
.pricing-table thead th,
.pricing-table .pt-cell,
.pricing-table tbody tr:not(.pt-group) th { padding: 10px 12px; }
}
/* View toggle: hide non-active view */
.pricing[data-active-view="cards"] [data-view-target="compare"],
.pricing[data-active-view="compare"] [data-view-target="cards"] {
display: none;
}
/* ----- Optional add-ons ----- */
.pricing-addons {
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid var(--line);
}
.pricing-addons-head {
text-align: center;
margin-bottom: 28px;
}
.pricing-addons-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.6rem;
color: var(--text);
margin-bottom: 6px;
}
.pricing-addons-sub {
font-size: 0.95rem;
color: var(--text-mute);
max-width: 640px;
margin: 0 auto;
}
.addons-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--bg-2);
}
.addons-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
font-size: 0.9rem;
color: var(--text-dim);
}
.addons-table thead th {
text-align: left;
padding: 16px 18px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
border-bottom: 1px solid var(--line);
background: var(--bg-2);
font-weight: 600;
}
.addons-table tbody tr {
transition: background 0.2s ease;
}
.addons-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.addons-table .addon-name {
text-align: left;
padding: 16px 18px;
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
font-weight: 500;
color: var(--text);
vertical-align: top;
min-width: 240px;
}
.addons-table .addon-name strong {
display: block;
color: var(--text);
font-weight: 600;
margin-bottom: 4px;
}
.addons-table .addon-name small {
display: block;
font-size: 0.82rem;
color: var(--text-mute);
font-weight: 400;
line-height: 1.5;
}
.addons-table .addon-price {
padding: 16px 18px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
white-space: nowrap;
}
.addons-table .addon-price .amount {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
color: var(--text);
font-size: 1rem;
}
.addons-table .addon-dash { color: var(--text-mute); }
.addons-table .addon-notes {
padding: 16px 18px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
font-size: 0.85rem;
color: var(--text-mute);
line-height: 1.5;
}
@media (max-width: 720px) {
.addons-table { min-width: 640px; font-size: 0.84rem; }
.addons-table thead th,
.addons-table .addon-name,
.addons-table .addon-price,
.addons-table .addon-notes { padding: 12px 14px; }
}
/* ============================================================
PRICING TEASER (homepage) — dark slab
============================================================ */
.pricing-teaser {
padding: clamp(72px, 9vw, 110px) 0;
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.pricing-teaser-head {
max-width: 720px;
margin: 0 auto 48px;
text-align: center;
}
.pricing-teaser-head h2 {
margin: 0 0 14px;
font-size: clamp(1.9rem, 2.5vw + 1rem, 2.8rem);
letter-spacing: -0.025em;
line-height: 1.1;
}
.pricing-teaser-head p {
margin: 0;
color: var(--text-dim);
font-size: 1.05rem;
line-height: 1.6;
}
.pricing-teaser-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 0 0 36px;
}
.pricing-teaser-card {
background: var(--card);
border: 1px solid var(--line-strong);
border-radius: 16px;
padding: 26px 24px;
position: relative;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pricing-teaser-card:hover {
transform: translateY(-3px);
box-shadow: 0 24px 60px -28px rgba(0,0,0,0.55);
border-color: rgba(253,200,0,0.45);
}
.pricing-teaser-card.is-featured {
border-color: var(--accent);
background: linear-gradient(180deg, rgba(253,200,0,0.06) 0%, var(--card) 100%);
box-shadow: 0 20px 50px -28px rgba(253,200,0,0.3);
}
.pricing-teaser-card h3 {
margin: 0 0 6px;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.25rem;
letter-spacing: -0.01em;
}
.pricing-teaser-tag {
margin: 0 0 18px;
font-size: 0.92rem;
color: var(--text-mute);
line-height: 1.45;
}
.pricing-teaser-price {
margin: 0 0 6px;
display: flex;
align-items: baseline;
gap: 6px;
}
.pricing-teaser-price strong {
color: var(--text);
font-family: 'Space Grotesk', sans-serif;
font-size: 1.7rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.pricing-teaser-price span {
color: var(--text-mute);
font-size: 0.88rem;
}
.pricing-teaser-term {
margin: 0;
font-size: 0.82rem;
color: var(--text-mute);
}
.pricing-teaser-cta {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
gap: 18px;
}
.pricing-teaser-note {
font-size: 0.9rem;
color: var(--text-mute);
}
@media (max-width: 760px) {
.pricing-teaser-grid { grid-template-columns: 1fr; }
.pricing-teaser-cta { flex-direction: column; align-items: center; gap: 12px; }
}
/* ============================================================
LIGHT SLAB SECTIONS — trust (industries), stack (tech), founder
Re-declares text-color CSS variables locally so all nested elements
pick up dark text on cream automatically.
============================================================ */
.trust,
.stack,
.founder {
--bg-section: linear-gradient(180deg, #FAF7EE 0%, #F2F4F8 100%);
--text: #0B1220;
--text-dim: rgba(11,18,32,0.72);
--text-mute: rgba(11,18,32,0.55);
--line: rgba(11,18,32,0.08);
--line-strong: rgba(11,18,32,0.14);
--card: #FFFFFF;
background: var(--bg-section) !important;
color: var(--text);
border-top: 1px solid rgba(11,18,32,0.08);
border-bottom: 1px solid rgba(11,18,32,0.08);
}
.trust h1, .trust h2, .trust h3, .trust h4,
.stack h1, .stack h2, .stack h3, .stack h4,
.founder h1, .founder h2, .founder h3, .founder h4 { color: #0B1220; }
.trust .accent, .stack .accent, .founder .accent { color: #1E3A8A; }
.trust .eyebrow, .stack .eyebrow, .founder .eyebrow {
color: #1E3A8A;
border-color: rgba(11,18,32,0.14);
}
/* Soft-disable any glow/decorative pseudo-bgs that referenced dark gold radial gradients */
.trust::before, .trust::after,
.stack::before, .stack::after,
.founder::before, .founder::after { opacity: 0.35; }
/* Trust-bubble pills on the light slab — light glass on cream */
.trust .trust-bubble {
background: rgba(255,255,255,0.65);
border: 1px solid rgba(11,18,32,0.12);
color: #0B1220;
box-shadow:
0 4px 14px rgba(11,18,32,0.06),
inset 0 1px 0 rgba(255,255,255,0.6);
}
.trust .trust-bubble:hover {
border-color: rgba(30,58,138,0.45);
color: #1E3A8A;
}
/* Soften the dark glow auras under the light pills */
.trust .trust-bg-glow { opacity: 0.25; }
/* Tech-stack on the light slab — dark icons + light tooltip + tighter spacing */
.stack .section-head { margin-bottom: clamp(16px, 2vw, 24px); }
/* Padding kept generous on top so the hover tooltip has room to render fully
above the icon (was 16px, was clipping the tooltip top). */
.stack .stack-marquee { padding: 60px 0 24px; margin: 0; }
.stack .stack-item img { opacity: 0.7; }
.stack .stack-item:hover img { opacity: 1; }
.stack .stack-item::after {
background: #FFFFFF;
color: #0B1220;
border: 1px solid rgba(11,18,32,0.14);
box-shadow: 0 4px 14px rgba(11,18,32,0.10);
}
.stack .stack-item::before { border-top-color: #FFFFFF; }
.stack .stack-marquee {
-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
/* ============================================================
PAGE HERO — shared template for /pricing/, /services/, etc.
Background photo positioned exactly like the homepage falcon:
pinned right, mask-feathered to transparent on the left.
============================================================ */
.page-hero {
position: relative;
overflow: hidden;
padding: clamp(110px, 14vw, 160px) 0 clamp(56px, 8vw, 88px);
background:
radial-gradient(640px 460px at 92% 0%, rgba(255,199,0,0.14), transparent 65%),
radial-gradient(620px 480px at 8% 100%, rgba(79,70,229,0.18), transparent 60%),
var(--bg);
}
.page-hero-bg {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
overflow: hidden;
opacity: 0.5;
}
.page-hero-photo {
position: absolute;
top: 0; right: 0;
width: 55%;
height: 100%;
object-fit: cover;
object-position: center right;
opacity: 0.9;
z-index: 0;
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0) 100%);
filter: saturate(0.95);
}
.page-hero-photo-fade {
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(to bottom, transparent 65%, rgba(19,28,46,0.35));
pointer-events: none;
}
.page-hero-inner {
position: relative;
z-index: 2;
}
.page-hero-content {
max-width: 760px;
}
.page-hero-content .eyebrow { display: inline-block; margin-bottom: 14px; }
.page-hero-content h1 {
margin: 0 0 18px;
font-size: clamp(2.4rem, 4vw + 1rem, 3.6rem);
letter-spacing: -0.03em;
line-height: 1.05;
max-width: 22ch;
}
.page-hero-content p {
margin: 0;
color: var(--text-dim);
font-size: 1.1rem;
line-height: 1.6;
max-width: 640px;
}
@media (max-width: 760px) {
.page-hero-bg { opacity: 0.35; }
.page-hero-photo {
width: 100%;
height: 60%;
top: 0;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
}
}
/* ============================================================
FAQ
============================================================ */
.faq { background: var(--bg-2); }
.faq-list {
max-width: 820px;
margin: 0 auto;
}
.faq-item {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 12px;
transition: border-color .25s var(--ease);
}
.faq-item[open] { border-color: rgba(253,200,0,0.28); }
.faq-item summary {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.05rem;
font-weight: 500;
padding: 20px 56px 20px 24px;
cursor: pointer;
list-style: none;
position: relative;
color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
position: absolute; right: 24px; top: 50%;
transform: translateY(-50%);
font-size: 1.8rem;
color: var(--accent);
line-height: 1;
font-weight: 300;
transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p {
padding: 0 24px 22px;
font-size: 0.96rem;
margin: 0;
}
/* ============================================================
CTA
============================================================ */
.cta {
background: var(--bg);
padding: clamp(64px, 9vw, 110px) 0;
}
/* Heading + buttons sit OUTSIDE the form card */
.cta-head {
max-width: 720px;
margin: 0 auto 28px;
text-align: center;
}
.cta-head .eyebrow { display: inline-block; margin-bottom: 16px; }
.cta-head h2 { margin: 0 0 14px; }
.cta-head p { font-size: 1.1rem; margin: 0 0 28px; color: var(--text-dim); }
.cta-actions {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.cta-divider {
display: flex; align-items: center; gap: 18px;
margin: 0 auto 22px;
max-width: 560px;
color: var(--text-mute);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
}
/* Form-only card — narrower, transparent gold-tinted box */
.cta-card {
max-width: 560px;
margin: 0 auto;
padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 32px);
background: linear-gradient(135deg, rgba(253,200,0,0.08), rgba(253,200,0,0.02));
border: 1px solid rgba(253,200,0,0.22);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
top: -40%; right: -25%;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(253,200,0,0.10), transparent 65%);
pointer-events: none;
}
.cta-divider::before, .cta-divider::after {
content: ''; flex: 1; height: 1px; background: var(--line);
}
.cta-form {
position: relative;
max-width: 560px; margin: 0 auto;
display: flex; flex-direction: column; gap: 14px;
text-align: left;
}
.cta-form .form-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.cta-form input[type=text],
.cta-form input[type=email],
.cta-form input[type=tel],
.cta-form input[type=number],
.cta-form textarea {
font-family: 'Inter', sans-serif;
font-size: 0.98rem;
padding: 14px 16px;
border-radius: 10px;
background: rgba(255,255,255,0.035);
border: 1px solid var(--line);
color: var(--text);
width: 100%;
transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
-moz-appearance: textfield;
}
.cta-form input[type=number]::-webkit-outer-spin-button,
.cta-form input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cta-form input::placeholder,
.cta-form textarea::placeholder { color: var(--text-mute); }
.cta-form input:focus,
.cta-form textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(255,255,255,0.055);
box-shadow: 0 0 0 3px rgba(253,200,0,0.12);
}
.cta-form textarea { resize: vertical; min-height: 120px; font-family: 'Inter', sans-serif; }
.cta-form .cta-hp {
position: absolute !important; left: -9999px !important;
width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.cta-form button[type=submit]:disabled { opacity: 0.65; cursor: wait; }
.cta-form-status {
font-size: 0.92rem;
margin: 4px 0 0;
min-height: 1.4em;
color: var(--text-mute);
}
.cta-form-status.is-success { color: var(--accent); }
.cta-form-status.is-error { color: #ff7070; }
.sr-only {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (max-width: 560px) {
.cta-form .form-row { grid-template-columns: 1fr; }
}
/* ============================================================
FOOTER
============================================================ */
.vcfy-footer {
background: var(--bg-2);
border-top: 1px solid var(--line);
padding-top: clamp(56px, 7vw, 88px);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 44px;
padding-bottom: clamp(40px, 5vw, 64px);
}
.footer-brand p { font-size: 0.92rem; margin: 18px 0 20px; max-width: 420px; }
.footer-logo { height: 36px; width: auto; }
.social { display: flex; gap: 14px; }
.social a {
font-size: 0.85rem;
font-weight: 500;
padding: 8px 14px;
border: 1px solid var(--line-strong);
border-radius: 8px;
color: var(--text-dim);
transition: all .2s var(--ease);
}
.social a:hover { border-color: var(--accent); color: var(--accent); }
.footer-col h4,
.footer-col .footer-heading {
color: var(--text);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 18px;
letter-spacing: 0.18em;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a:not(.btn) { font-size: 0.92rem; color: var(--text-dim); }
.footer-col a:not(.btn):hover { color: var(--accent); }
.footer-bottom {
border-top: 1px solid var(--line);
padding: 22px 0;
}
.footer-bottom-inner {
display: flex; justify-content: space-between; align-items: center;
font-size: 0.85rem;
color: var(--text-mute);
}
.footer-legal {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 22px;
align-items: center;
}
.footer-legal a {
color: var(--text-mute);
font-size: 0.85rem;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--accent); }
.footer-bottom .tagline {
margin: 0;
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.1em;
color: var(--accent);
font-weight: 500;
font-size: 0.82rem;
text-transform: uppercase;
}
/* ============================================================
PAGE SHELL (for non-homepage pages)
============================================================ */
.page-shell { padding-top: 140px; }
.page-shell h1 { margin-bottom: 24px; }
.page-content { font-size: 1.02rem; }
.page-content a { color: var(--accent); }
.error-404 { text-align: center; padding: 160px 0 120px; }
/* ============================================================
FOUNDER
============================================================ */
.founder { position: relative; overflow: hidden; }
.founder-inner {
display: grid;
grid-template-columns: minmax(240px, 360px) 1fr;
gap: 56px;
align-items: center;
position: relative;
z-index: 1;
}
.founder-photo {
position: relative;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4 / 5;
background: linear-gradient(135deg, rgba(253,200,0,0.12), rgba(253,200,0,0.02));
box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8), 0 0 0 1px var(--line);
}
.founder-photo::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(19,28,46,0.55));
pointer-events: none;
}
.founder-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.founder-content h2 { margin: 14px 0 22px; }
.founder-content p { margin-bottom: 16px; max-width: 620px; }
@media (max-width: 820px) {
.founder-inner { grid-template-columns: 1fr; gap: 32px; }
.founder-photo { max-width: 320px; }
}
/* ============================================================
SECTION AMBIENT ORBS (plain sections enriched with gold/navy blobs)
============================================================ */
.process, .pricing, .faq, .cta { position: relative; overflow: hidden; }
.process > .vcfy-container,
.pricing > .vcfy-container,
.faq > .vcfy-container,
.cta > .vcfy-container { position: relative; z-index: 1; }
.process::before, .process::after,
.pricing::before, .pricing::after,
.faq::before, .faq::after,
.cta::before, .cta::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(90px);
pointer-events: none;
z-index: 0;
}
.process::before {
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(253,200,0,0.22), transparent 70%);
top: -120px; left: -140px;
}
.process::after {
width: 440px; height: 440px;
background: radial-gradient(circle, rgba(59,108,255,0.18), transparent 70%);
bottom: -160px; right: -120px;
}
.pricing::before {
width: 620px; height: 620px;
background: radial-gradient(circle, rgba(253,200,0,0.18), transparent 70%);
top: 18%; right: -220px;
}
.pricing::after {
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(80,140,255,0.14), transparent 70%);
bottom: -140px; left: -100px;
}
.faq::before {
width: 560px; height: 560px;
background: radial-gradient(circle, rgba(253,200,0,0.18), transparent 70%);
bottom: -180px; left: -140px;
}
.faq::after {
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(80,140,255,0.14), transparent 70%);
top: -140px; right: -100px;
}
.cta::before {
width: 720px; height: 720px;
background: radial-gradient(circle, rgba(253,200,0,0.25), transparent 70%);
top: -220px; left: 50%; transform: translateX(-50%);
}
.cta::after {
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(80,140,255,0.16), transparent 70%);
bottom: -200px; right: -140px;
}
/* ============================================================
GSAP REVEAL DEFAULTS (avoids FOUC before JS loads)
============================================================ */
.reveal { will-change: opacity, transform; }
.no-js .reveal, html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(30px); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
.price-card.featured { transform: none; }
.work-grid { grid-template-columns: repeat(2, 1fr); }
.work-card-wide { grid-column: span 2; }
.process-list { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
.footer-brand { grid-column: span 3; }
}
@media (max-width: 860px) {
.nav-links, .nav-cta { display: none; }
.nav-toggle { display: inline-flex; }
.hero { min-height: auto; padding-top: 120px; padding-bottom: 32px; }
.hero-trust { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: span 2; }
.footer-bottom-inner { flex-direction: column; gap: 8px; text-align: center; }
/* Enforce 44px minimum touch targets on mobile (WCAG 2.5.8) */
.footer-col a:not(.btn),
.footer-legal a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 6px 0;
}
.nav-drawer .nav-links a,
.nav-drawer a:not(.btn) {
min-height: 44px;
display: flex;
align-items: center;
}
.social a { min-height: 44px; padding: 12px 16px; }
}
@media (max-width: 640px) {
.vcfy-container { padding: 0 20px; }
section { padding: 64px 0; }
h1 { font-size: clamp(2rem, 7vw + 1rem, 2.6rem); }
.hero-ctas { flex-direction: column; align-items: stretch; }
.hero-ctas .btn { width: 100%; }
.work-grid { grid-template-columns: 1fr; }
.work-card-wide { grid-column: span 1; }
.pricing-grid { grid-template-columns: 1fr; }
.process-list { grid-template-columns: 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.services-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; }
.footer-brand { grid-column: span 1; }
.footer-bottom { padding-top: 28px; }
.cta-actions .btn { width: 100%; }
.scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html.js .reveal { opacity: 1; transform: none; }
}
/* ============================================================
/* ============================================================
SERVICES CPT — clean archive + single pages
============================================================ */
/* --- Shared service-card used on archive, single-related, homepage --- */
.svc-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 28px 26px 24px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
position: relative;
transition: border-color 260ms var(--ease), transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.svc-card:hover,
.svc-card:focus-visible {
border-color: rgba(253,200,0,0.4);
transform: translateY(-3px);
box-shadow: 0 24px 50px -25px rgba(0,0,0,0.6), 0 0 0 1px rgba(253,200,0,0.15);
outline: none;
}
.svc-card-icon {
width: 48px; height: 48px;
color: var(--accent);
margin-bottom: 4px;
}
.svc-card-icon svg { width: 100%; height: 100%; }
.svc-card-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--text);
margin: 0;
letter-spacing: -0.01em;
}
.svc-card-problem {
font-size: 0.9rem;
color: var(--text-mute);
margin: 0;
line-height: 1.5;
}
.svc-card-outcome {
font-size: 1rem;
color: var(--text);
margin: 0;
line-height: 1.45;
}
.svc-card-link {
margin-top: auto;
padding-top: 10px;
color: var(--accent);
font-size: 0.82rem;
letter-spacing: 0.04em;
}
/* --- Archive --- (svc-archive-hero/svc-archive-sub now use shared .page-hero) */
.svc-archive-grid-section {
padding: clamp(56px, 8vw, 96px) 0;
background: var(--bg);
}
.svc-archive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
/* --- Single --- */
.svc-single { background: var(--bg); }
.svc-hero {
padding: clamp(100px, 14vw, 150px) 0 clamp(56px, 8vw, 88px);
border-bottom: 1px solid var(--line);
background: radial-gradient(ellipse at top right, rgba(253,200,0,0.06), transparent 55%),
var(--bg);
overflow: hidden;
}
.svc-hero-inner { max-width: 820px; }
.svc-hero.has-photo .svc-hero-inner {
max-width: 1200px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.svc-hero-text { min-width: 0; }
.svc-hero-photo {
position: relative;
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
max-height: 560px;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px var(--line);
}
.svc-hero-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.95);
}
.svc-hero-photo-shade {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(19,28,46,0) 40%, rgba(19,28,46,0.35) 100%),
radial-gradient(ellipse at top right, rgba(253,200,0,0.12), transparent 60%);
pointer-events: none;
}
@media (max-width: 900px) {
.svc-hero.has-photo .svc-hero-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.svc-hero-photo { aspect-ratio: 16 / 10; max-height: 400px; order: -1; }
}
.svc-back {
display: inline-block;
color: var(--text-mute);
font-size: 0.88rem;
text-decoration: none;
margin-bottom: 24px;
letter-spacing: 0.02em;
transition: color .2s var(--ease);
}
.svc-back:hover { color: var(--accent); }
.svc-hero-icon {
width: 64px; height: 64px;
color: var(--accent);
margin-bottom: 20px;
}
.svc-hero-icon svg { width: 100%; height: 100%; }
.svc-hero-title {
font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.025em;
margin: 10px 0 20px;
}
.svc-hero-problem {
font-size: 1.15rem;
color: var(--text-mute);
margin: 0 0 6px;
font-style: italic;
}
.svc-hero-outcome {
font-size: 1.3rem;
line-height: 1.45;
color: var(--text);
font-weight: 500;
margin: 0 0 32px;
max-width: 680px;
}
.svc-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Detail section — split: includes (left) + content (right) */
.svc-detail {
padding: clamp(56px, 8vw, 96px) 0;
background: var(--bg);
}
.svc-detail-inner {
display: grid;
grid-template-columns: minmax(260px, 320px) 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
@media (max-width: 860px) {
.svc-detail-inner { grid-template-columns: 1fr; }
}
.svc-includes {
position: sticky;
top: 100px;
padding: 26px 24px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.svc-includes h2 {
font-size: 1.1rem;
margin: 0 0 18px;
letter-spacing: 0.02em;
}
.svc-includes ul {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.svc-includes li {
padding-left: 26px;
position: relative;
color: var(--text-dim);
font-size: 0.95rem;
line-height: 1.45;
}
.svc-includes li::before {
content: '✓';
position: absolute;
left: 0; top: 0;
color: var(--accent);
font-weight: 700;
}
.svc-includes-cta { margin-top: 20px; }
@media (max-width: 860px) {
/* Mobile: kill sticky AND reorder so the service description shows first
and the "What's included" + CTA panel sits below it. Otherwise users on
phones land on the page and have to scroll past a 400px aside before
they can read the actual service content. */
.svc-includes { position: static; top: auto; order: 2; }
.svc-content { order: 1; }
}
.svc-content {
color: var(--text-dim);
line-height: 1.8;
font-size: 1.05rem;
max-width: 720px;
}
.svc-content p { margin: 0 0 1.4em; }
.svc-content p:last-child { margin-bottom: 0; }
.svc-content a { color: var(--accent); }
.svc-content h2, .svc-content h3 {
color: var(--text);
margin: 1.8em 0 0.6em;
}
/* ============ Service single — sub-services / approach / why ============ */
.svc-sub, .svc-approach, .svc-why {
padding: clamp(56px, 7vw, 96px) 0;
position: relative;
overflow: hidden;
border-top: 1px solid var(--line);
}
.svc-sub { background: var(--bg); }
.svc-approach { background: var(--bg-2); }
.svc-why { background: var(--bg); }
.svc-sub::before, .svc-approach::before, .svc-why::before {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(80px);
z-index: 0;
}
.svc-sub::before {
top: -120px; right: -100px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(253,200,0,0.08), transparent 65%);
}
.svc-approach::before {
bottom: -120px; left: -120px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(94,180,255,0.06), transparent 65%);
}
.svc-why::before {
top: -100px; left: 20%;
width: 540px; height: 320px;
background: radial-gradient(ellipse, rgba(253,200,0,0.07), transparent 65%);
}
.svc-narrow {
position: relative;
z-index: 1;
text-align: center;
max-width: 1100px;
}
.svc-narrow .eyebrow { margin-bottom: 18px; }
.svc-narrow h2 {
margin: 0 0 14px;
letter-spacing: -0.02em;
}
.svc-narrow-lede {
max-width: 680px;
margin: 0 auto 36px;
color: var(--text-dim);
font-size: 1.05rem;
}
/* Sub-services grid */
.svc-sub-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
text-align: left;
max-width: 1080px;
margin: 0 auto;
}
.svc-sub-card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px 22px;
display: flex;
align-items: flex-start;
gap: 14px;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.svc-sub-card:hover {
border-color: rgba(253,200,0,0.32);
transform: translateY(-2px);
}
.svc-sub-tick {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(253,200,0,0.12);
color: var(--accent);
display: grid; place-items: center;
font-weight: 700;
flex-shrink: 0;
font-size: 0.95rem;
}
.svc-sub-text {
font-size: 0.98rem;
line-height: 1.5;
color: var(--text);
align-self: center;
}
/* Approach — horizontal numbered stepper with connecting line */
.svc-approach-rail {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
text-align: center;
padding: 12px 4% 0;
}
.svc-approach-line {
position: absolute;
top: 34px;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(253,200,0,0.0), rgba(253,200,0,0.4) 25%, rgba(253,200,0,0.5) 50%, rgba(253,200,0,0.4) 75%, rgba(253,200,0,0.0), transparent);
z-index: 0;
}
.svc-approach-step {
position: relative;
padding-top: 80px;
z-index: 1;
}
.svc-approach-node {
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 64px; height: 64px;
border-radius: 50%;
background:
radial-gradient(circle, rgba(253,200,0,0.18), rgba(253,200,0,0.04));
border: 1px solid rgba(253,200,0,0.45);
color: var(--accent);
display: grid; place-items: center;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.05em;
box-shadow:
0 0 0 6px rgba(13,14,16,0.95),
0 8px 24px rgba(0,0,0,0.4);
z-index: 2;
}
.svc-approach-step h3 {
font-size: 1.05rem;
line-height: 1.2;
margin: 0 0 10px;
color: var(--text);
}
.svc-approach-step p {
font-size: 0.9rem;
color: var(--text-dim);
margin: 0;
line-height: 1.55;
max-width: 240px;
margin-left: auto;
margin-right: auto;
}
/* Why — magazine split with oversized numbers */
.svc-why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
text-align: left;
}
.svc-why-card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 36px 32px;
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
align-items: start;
transition: border-color 0.25s ease, transform 0.25s ease;
position: relative;
overflow: hidden;
}
.svc-why-card::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: linear-gradient(180deg, var(--accent), rgba(253,200,0,0));
opacity: 0;
transition: opacity 0.25s ease;
}
.svc-why-card:hover {
border-color: rgba(253,200,0,0.28);
transform: translateY(-2px);
}
.svc-why-card:hover::after { opacity: 1; }
.svc-why-bignum {
font-family: 'Space Grotesk', sans-serif;
font-weight: 800;
font-size: 4.6rem;
line-height: 0.85;
letter-spacing: -0.045em;
color: var(--accent);
opacity: 0.95;
text-shadow: 0 0 24px rgba(253,200,0,0.18);
align-self: start;
padding-top: 4px;
}
.svc-why-body {
display: flex;
flex-direction: column;
}
.svc-why-tag {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
margin-bottom: 10px;
}
.svc-why-card h3 {
font-size: 1.3rem;
line-height: 1.2;
margin: 0 0 12px;
color: var(--text);
letter-spacing: -0.01em;
}
.svc-why-card p {
font-size: 0.94rem;
color: var(--text-dim);
margin: 0;
line-height: 1.6;
}
/* Mobile / tablet — stack vertically and turn approach line vertical */
@media (max-width: 1100px) {
.svc-approach-rail { grid-template-columns: repeat(2, 1fr); padding: 0; }
.svc-approach-line { display: none; }
}
@media (max-width: 720px) {
.svc-approach-rail {
grid-template-columns: 1fr;
gap: 32px;
padding-left: 32px;
}
.svc-approach-step {
text-align: left;
padding-top: 0;
padding-left: 80px;
min-height: 64px;
}
.svc-approach-node {
top: 0; left: 0;
transform: none;
}
.svc-approach-step p { margin-left: 0; max-width: none; }
.svc-approach-line {
display: block;
top: 0; bottom: 0;
left: 32px; right: auto;
width: 1px; height: auto;
background: linear-gradient(180deg, transparent, rgba(253,200,0,0.4) 10%, rgba(253,200,0,0.4) 90%, transparent);
}
.svc-why-grid { grid-template-columns: 1fr; }
.svc-why-card { padding: 28px 24px; gap: 20px; }
.svc-why-bignum { font-size: 3.6rem; }
.svc-why-card h3 { font-size: 1.15rem; }
}
/* Related services row */
.svc-related {
padding: clamp(56px, 8vw, 96px) 0;
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.svc-related h2 {
margin: 0 0 28px;
font-size: 1.6rem;
}
.svc-related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
/* Bottom CTA */
.svc-bottom-cta {
padding: clamp(72px, 10vw, 120px) 0;
text-align: center;
background: radial-gradient(ellipse at center, rgba(253,200,0,0.06), transparent 60%), var(--bg);
}
.svc-bottom-cta h2 {
font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
margin: 0 0 14px;
}
.svc-bottom-cta p {
color: var(--text-dim);
font-size: 1.1rem;
max-width: 540px;
margin: 0 auto 28px;
}
.svc-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
/* Archive bottom CTA reuses same styling */
.svc-archive-cta {
padding: clamp(72px, 10vw, 120px) 0;
text-align: center;
background: var(--bg-2);
border-top: 1px solid var(--line);
}
.svc-archive-cta h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem); }
.svc-archive-cta p { color: var(--text-dim); max-width: 560px; margin: 0 auto 24px; }
/* Homepage services-link (already existed) kept */
/* ============================================================
SERVICE QUOTE MODAL
============================================================ */
.svc-modal {
position: fixed; inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.svc-modal.is-open { display: flex; }
.svc-modal-backdrop {
position: absolute; inset: 0;
background: rgba(7, 12, 24, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.svc-modal-panel {
position: relative;
width: 100%;
max-width: 560px;
max-height: 92vh;
overflow-y: auto;
background: var(--bg-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
padding: clamp(28px, 4vw, 44px);
box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8);
animation: svcModalIn 260ms var(--ease);
}
@keyframes svcModalIn {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.svc-modal-close {
position: absolute; top: 14px; right: 18px;
width: 36px; height: 36px;
background: transparent;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text-dim);
font-size: 22px;
cursor: pointer;
transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.svc-modal-close:hover { color: var(--accent); border-color: var(--accent); }
.svc-modal-head { margin-bottom: 24px; }
.svc-modal-head h2 {
font-size: clamp(1.6rem, 1.5vw + 1rem, 2.2rem);
margin: 10px 0 14px;
}
.svc-modal-head p {
color: var(--text-dim);
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
}
.svc-modal-head strong { color: var(--text); }
.svc-modal-form {
display: flex; flex-direction: column; gap: 14px;
}
.svc-modal-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.svc-modal-form label {
display: flex; flex-direction: column; gap: 6px;
font-size: 0.82rem;
color: var(--text-dim);
letter-spacing: 0.02em;
}
.svc-modal-form .req { color: var(--accent); margin-left: 3px; }
.svc-modal-form input[type=text],
.svc-modal-form input[type=email],
.svc-modal-form textarea {
padding: 12px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font-family: inherit;
font-size: 0.95rem;
transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.svc-modal-form input:focus,
.svc-modal-form textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(255,255,255,0.055);
box-shadow: 0 0 0 3px rgba(253,200,0,0.15);
}
.svc-modal-form textarea { resize: vertical; min-height: 100px; }
.svc-modal-status {
min-height: 1.3em;
margin: 0;
font-size: 0.88rem;
color: var(--text-mute);
}
.svc-modal-status.is-success { color: var(--accent); }
.svc-modal-status.is-error { color: #ff7070; }
.svc-modal-trust {
margin: 0;
font-size: 0.78rem;
color: var(--text-mute);
text-align: center;
}
@media (max-width: 560px) {
.svc-modal-row { grid-template-columns: 1fr; }
.svc-modal-panel { padding: 28px 20px; }
}
/* ============================================================
CONTACT MODAL (homepage "Free diagnosis" etc.)
============================================================ */
.contact-modal {
position: fixed; inset: 0;
z-index: 9999;
display: none;
align-items: center; justify-content: center;
padding: 24px;
}
.contact-modal.is-open { display: flex; }
.contact-modal-backdrop {
position: absolute; inset: 0;
background: rgba(5,10,20,0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.contact-modal-panel {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
padding: 36px 32px 30px;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.contact-modal-close {
position: absolute; top: 12px; right: 12px;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text-mute);
font-size: 1.4rem; line-height: 1;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-modal-close:hover { color: var(--accent); border-color: var(--accent); }
.contact-modal-head { margin-bottom: 22px; }
.contact-modal-head .eyebrow { display: inline-block; margin-bottom: 8px; }
.contact-modal-head h3 {
font-size: 1.4rem;
line-height: 1.3;
margin: 0 0 10px;
}
.contact-modal-head p {
margin: 0;
color: var(--text-mute);
font-size: 0.95rem;
line-height: 1.55;
}
.contact-modal-form { display: grid; gap: 14px; }
.contact-modal-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.contact-modal-form label {
display: flex; flex-direction: column;
font-size: 0.85rem;
color: var(--text-mute);
gap: 6px;
}
.contact-modal-form .label-text { display: inline-block; }
.contact-modal-form .req { color: var(--accent); margin-left: 3px; }
.contact-modal-form .optional { color: var(--text-mute); font-size: 0.78rem; margin-left: 4px; }
.contact-modal-form input[type=text],
.contact-modal-form input[type=email],
.contact-modal-form input[type=url],
.contact-modal-form textarea {
width: 100%;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font: inherit;
transition: border-color 0.2s ease;
}
.contact-modal-form input:focus,
.contact-modal-form textarea:focus {
outline: none;
border-color: var(--accent);
}
.contact-modal-form textarea { resize: vertical; min-height: 100px; }
.contact-modal-status {
margin: 4px 0 0;
font-size: 0.88rem;
min-height: 1.2em;
}
.contact-modal-status.is-success { color: var(--accent); }
.contact-modal-status.is-error { color: #ff7070; }
.contact-modal-trust {
margin: 0;
font-size: 0.78rem;
color: var(--text-mute);
text-align: center;
}
body.contact-modal-open { overflow: hidden; }
@media (max-width: 560px) {
.contact-modal-row { grid-template-columns: 1fr; }
.contact-modal-panel { padding: 28px 20px; }
.contact-modal-head h3 { font-size: 1.2rem; }
}
/* Homepage service-card enhancements (problem/outcome/learn-more button) */
.services-grid > .service-card { display: flex; flex-direction: column; }
.service-problem { margin: 0.4em 0 0.3em; font-size: 0.9rem; color: var(--text-mute); }
.service-outcome { margin: 0.2em 0 0.8em; font-size: 1rem; color: var(--text); }
.service-title-link { color: inherit; text-decoration: none; }
.service-title-link:hover { color: var(--accent); }
.service-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
padding-top: 16px;
color: var(--accent);
text-decoration: none;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.02em;
border-top: 1px solid var(--line);
transition: gap .2s var(--ease), color .2s var(--ease);
}
.service-card:hover .service-card-link { gap: 10px; color: var(--accent-2); }
.services-link { text-align: center; margin-top: 28px; }
.services-link a { color: var(--accent); text-decoration: none; letter-spacing: 0.02em; }
.services-link a:hover { text-decoration: underline; }
/* Services "see all" button wrapper */
.services-link-wrap {
display: flex;
justify-content: center;
margin-top: 44px;
}
.services-link-btn {
min-width: 280px;
}
/* ============================================================
UNIVERSAL SLIDER — arrows + dots + 3 at a time on desktop
Usage:
JS in vcfy.js auto-initializes controls.
============================================================ */
.vcfy-slider-wrap {
position: relative;
}
.vcfy-slider {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 4px 2px 14px;
scrollbar-width: none;
}
.vcfy-slider::-webkit-scrollbar { display: none; }
.vcfy-slider > * {
flex: 0 0 calc((100% - 32px) / 3); /* 3 per view @ desktop */
scroll-snap-align: start;
min-width: 0;
}
@media (max-width: 1023px) {
.vcfy-slider > * { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
.vcfy-slider > * { flex-basis: 88%; min-width: 240px; }
}
/* Arrow buttons */
.vcfy-slider-btn {
position: absolute;
top: calc(50% - 18px);
transform: translateY(-50%);
z-index: 6;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid var(--line-strong);
color: var(--text);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 20px;
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.vcfy-slider-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.vcfy-slider-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.vcfy-slider-prev { left: -2px; }
.vcfy-slider-next { right: -2px; }
@media (max-width: 640px) {
.vcfy-slider-btn { display: none; }
.vcfy-slider-wrap { padding: 0; }
}
/* Dot pagination */
.vcfy-slider-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.vcfy-slider-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(245,247,250,0.18);
border: 0;
padding: 0;
cursor: pointer;
transition: background .2s var(--ease), transform .2s var(--ease), width .2s var(--ease);
}
.vcfy-slider-dot:hover { background: rgba(245,247,250,0.4); }
.vcfy-slider-dot.is-active {
background: var(--accent);
width: 22px;
border-radius: 4px;
}
/* Slider fixes — smaller arrows, center when single page, override .me-slide clamps */
.vcfy-slider-btn {
width: 36px;
height: 36px;
font-size: 17px;
}
.vcfy-slider-wrap:not(.is-sliding) .vcfy-slider {
justify-content: center;
}
/* Inside the universal slider, override legacy .me-slide sizing (which capped at 300px) */
.vcfy-slider > .me-slide {
flex: 0 0 calc((100% - 32px) / 3);
min-width: 0;
max-width: none;
}
@media (max-width: 1023px) {
.vcfy-slider > .me-slide { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
.vcfy-slider > .me-slide { flex-basis: 85%; min-width: 240px; }
}
/* Same for homepage testimonial cards if they have any legacy max-width */
.vcfy-slider > .testimonial-card {
flex: 0 0 calc((100% - 32px) / 3);
min-width: 0;
max-width: none;
margin: 0;
}
@media (max-width: 1023px) {
.vcfy-slider > .testimonial-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
.vcfy-slider > .testimonial-card { flex-basis: 88%; }
}
/* [hidden] attribute reliably hides the button + dots */
.vcfy-slider-btn[hidden],
.vcfy-slider-dots[hidden] { display: none !important; }
/* Slider: desktop drag-to-scroll — hide arrows, cursor grab, prevent select */
.vcfy-slider-btn { display: none !important; }
.vcfy-slider-wrap.is-sliding .vcfy-slider {
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.vcfy-slider.is-grabbing {
cursor: grabbing;
scroll-behavior: auto; /* immediate follow during drag */
scroll-snap-type: none;
}
.vcfy-slider.is-grabbing img,
.vcfy-slider.is-grabbing a { pointer-events: none; }
/* ============================================================
FREE DIGITAL BUSINESS CARD — LANDING PAGE
============================================================ */
.fcard-hero {
padding: clamp(100px, 12vw, 160px) 0 96px;
position: relative;
background:
radial-gradient(640px 460px at 92% 0%, rgba(255,199,0,0.14), transparent 65%),
radial-gradient(620px 480px at 8% 100%, rgba(79,70,229,0.18), transparent 60%),
radial-gradient(540px 380px at 50% 110%, rgba(233,30,99,0.10), transparent 65%),
radial-gradient(380px 320px at 0% 0%, rgba(124,58,237,0.10), transparent 60%),
var(--bg);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
/* Subtle scattered business-card silhouettes in the background.
Direct product reference — stacked cards at different angles. Very low opacity
so they read as texture, not pattern. */
.fcard-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
opacity: 0.18;
z-index: 0;
}
.fcard-hero > * { position: relative; z-index: 1; }
.ul-mark {
text-decoration: underline solid var(--accent);
text-decoration-thickness: 0.18em;
text-decoration-skip-ink: none;
text-underline-offset: -0.04em;
-webkit-text-decoration: underline solid var(--accent);
-webkit-text-decoration-thickness: 0.18em;
}
.fcard-preview .ul-mark { color: #0B1220; }
.fcard-hero-inner {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: center;
}
.fcard-hero-copy h1 { margin: 16px 0 20px; font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height: 1.1; }
.fcard-hero-copy > p { color: var(--text-dim); font-size: 1.1rem; line-height: 1.6; }
.fcard-bullets {
margin-top: 24px; padding: 0; list-style: none;
display: grid; gap: 10px;
}
.fcard-bullets li {
padding-left: 28px;
position: relative;
color: var(--text-dim);
}
.fcard-bullets li::before {
content: '✓';
position: absolute; left: 0; top: 0;
color: var(--accent);
font-weight: 700;
}
/* Hero CTA row: primary button + login link */
.fcard-hero-cta {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 22px;
}
.fcard-hero-cta .btn { white-space: nowrap; }
.fcard-hero-login {
font-size: 0.92rem;
color: var(--text-mute);
}
.fcard-hero-login span {
color: var(--accent);
font-weight: 600;
margin-left: 4px;
}
.fcard-hero-login:hover span { text-decoration: underline; }
/* Hero card preview (replaces inline form) */
.fcard-hero-preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.fcard-hero-preview-card {
position: relative;
display: block;
width: min(100%, 360px);
max-height: 520px;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 28px 64px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0.25) 95%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0.25) 95%, rgba(0,0,0,0) 100%);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fcard-hero-preview-card::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 120px;
background: linear-gradient(to bottom, rgba(19,28,46,0) 0%, var(--bg) 90%);
pointer-events: none;
}
.fcard-hero-preview-card:hover {
transform: translateY(-4px);
box-shadow: 0 36px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(253,200,0,0.2);
}
.fcard-hero-preview-card img {
width: 100%;
display: block;
}
.fcard-hero-preview-caption {
margin: 0;
font-size: 0.86rem;
color: var(--text-mute);
text-align: center;
}
/* Centered CTA below the 4-up feature grid */
.fcard-preview-cta {
margin: 56px 0 0;
text-align: center;
}
/* Modal */
.fcard-modal[hidden] { display: none !important; }
.fcard-modal {
position: fixed; inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .2s var(--ease);
padding: 20px;
}
.fcard-modal.is-open { opacity: 1; }
.fcard-modal-backdrop {
position: absolute; inset: 0;
background: rgba(5,8,15,0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.fcard-modal-dialog {
position: relative;
width: 100%;
max-width: 460px;
max-height: calc(100vh - 40px);
overflow-y: auto;
background: var(--card);
border: 1px solid var(--line-strong);
border-radius: 18px;
padding: 32px 28px;
box-shadow: 0 40px 100px -30px rgba(0,0,0,0.85);
transform: translateY(12px);
transition: transform .25s var(--ease);
}
.fcard-modal.is-open .fcard-modal-dialog { transform: translateY(0); }
.fcard-modal-close {
position: absolute;
top: 12px; right: 14px;
width: 36px; height: 36px;
display: inline-flex;
align-items: center; justify-content: center;
background: transparent;
border: none;
color: var(--text-mute);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: background .15s var(--ease), color .15s var(--ease);
}
.fcard-modal-close:hover {
background: rgba(255,255,255,0.06);
color: var(--text);
}
.fcard-modal .fcard-form {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.fcard-modal .fcard-form::before { display: none; }
body.fcard-modal-open { overflow: hidden; }
@media (max-width: 560px) {
.fcard-modal-dialog { padding: 28px 20px; max-height: calc(100vh - 24px); }
.fcard-modal { padding: 12px; }
}
.fcard-trust-strip {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--text-dim);
}
.fcard-trust-tag { white-space: nowrap; }
.fcard-trust-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
flex: 0 0 4px;
}
.fcard-form-wrap {
position: sticky; top: 100px;
}
.fcard-form {
position: relative;
background: var(--card);
border: 1px solid var(--line-strong);
border-radius: 4px;
padding: 36px 30px;
display: grid; gap: 16px;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
}
.fcard-form::before {
content: '';
position: absolute; left: 0; right: 0; top: 0; height: 4px;
background: var(--accent);
}
.fcard-form h2 { margin: 0 0 4px; font-size: 1.4rem; }
.fcard-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-mute); }
.fcard-form .label-text { display: inline-block; }
.fcard-form .req { color: var(--accent); margin-left: 3px; }
.fcard-form input[type=text],
.fcard-form input[type=email] {
width: 100%;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font: inherit;
transition: border-color 0.2s ease;
}
.fcard-form input:focus { outline: none; border-color: var(--accent); }
.fcard-username-row {
display: flex;
align-items: stretch;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--bg);
}
.fcard-username-prefix {
padding: 12px 10px 12px 14px;
color: var(--text-mute);
font-size: 0.88rem;
white-space: nowrap;
background: rgba(255,255,255,0.02);
border-right: 1px solid var(--line);
}
.fcard-username-row input {
flex: 1; border: none; background: transparent; padding: 12px 14px;
color: var(--text); font: inherit;
}
.fcard-username-row input:focus { outline: none; }
.fcard-username-row:focus-within { border-color: var(--accent); }
.fcard-help { font-size: 0.78rem; color: var(--text-mute); }
/* Editor: link rename + QR-type chooser + business hours */
.ced-slug-row {
display: flex; align-items: stretch;
border: 1px solid var(--line);
border-radius: 10px; overflow: hidden;
background: var(--bg);
}
.ced-slug-prefix {
padding: 12px 10px 12px 14px;
color: var(--text-mute);
font-size: 0.84rem;
white-space: nowrap;
background: rgba(255,255,255,0.02);
border-right: 1px solid var(--line);
}
.ced-slug-row input {
flex: 1; border: none; background: transparent; padding: 12px 14px;
color: var(--text); font: inherit;
}
.ced-slug-row input:focus { outline: none; }
.ced-slug-row:focus-within { border-color: var(--accent); }
.ced-qr-options {
display: grid;
gap: 10px;
}
.ced-form label.ced-qr-option,
.ced-qr-option {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 12px;
row-gap: 6px;
align-items: center;
padding: 14px;
margin-top: 0;
border: 1px solid var(--line);
border-radius: 12px;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.ced-qr-option:hover { border-color: rgba(253,200,0,0.4); }
.ced-qr-option:has(input:checked) {
border-color: var(--accent);
background: rgba(253,200,0,0.06);
}
.ced-qr-option > input {
grid-column: 1;
grid-row: 1;
margin: 0;
align-self: center;
}
.ced-qr-option > strong {
grid-column: 2;
grid-row: 1;
font-size: 0.95rem;
color: var(--text);
align-self: center;
}
.ced-qr-option > small {
grid-column: 2;
grid-row: 2;
font-size: 0.82rem;
color: var(--text-mute);
line-height: 1.4;
}
/* Public card: business hours list */
.card-hours {
list-style: none;
padding: 0; margin: 0;
display: grid;
gap: 6px;
}
.card-hours li {
font-size: 0.92rem;
color: var(--card-text-2, var(--text-2));
padding: 6px 0;
border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.card-hours li:last-child { border-bottom: 0; }
.fcard-form label.fcard-agree {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
font-size: 0.85rem;
color: var(--text-mute);
line-height: 1.45;
}
.fcard-form label.fcard-agree input {
margin: 2px 0 0;
flex: 0 0 auto;
}
.fcard-form label.fcard-agree > span { flex: 1 1 auto; }
.fcard-status { margin: 0; font-size: 0.88rem; min-height: 1.2em; }
.fcard-status.is-success { color: var(--accent); }
.fcard-status.is-error { color: #ff7070; }
.fcard-trust { margin: 0; font-size: 0.78rem; color: var(--text-mute); text-align: center; }
.fcard-preview {
padding: 110px 0 100px;
background: #FAF7EE;
color: #0B1220;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.fcard-preview-h {
margin: 0 0 56px;
font-size: clamp(2rem, 3.5vw + 1rem, 3.6rem);
letter-spacing: -0.03em;
line-height: 1.05;
max-width: 900px;
color: #0B1220;
}
.fcard-features {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border-top: 1px solid rgba(19,28,46,0.12);
}
.fcard-feat {
position: relative;
padding: 36px 28px 36px 0;
border-right: 1px solid rgba(19,28,46,0.12);
background: transparent;
}
.fcard-feat:nth-child(n+2) { padding-left: 28px; }
.fcard-feat:last-child { border-right: 0; padding-right: 0; }
.fcard-feat h3 {
margin: 0 0 12px;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.1rem;
color: #0B1220;
letter-spacing: -0.005em;
}
.fcard-feat p {
margin: 0;
color: rgba(19,28,46,0.66);
font-size: 0.95rem;
line-height: 1.55;
}
.fcard-faq {
padding: 96px 0 110px;
background: var(--bg);
}
.fcard-faq h2 { margin-bottom: 40px; text-align: left; max-width: 720px; font-size: clamp(2rem, 3.5vw + 1rem, 3.4rem); letter-spacing: -0.03em; line-height: 1.05; }
.fcard-faq .vcfy-container { max-width: 820px; }
.fcard-faq details {
position: relative;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
padding: 22px 0 22px 0;
margin-bottom: 0;
background: transparent;
transition: none;
}
.fcard-faq details:first-of-type { border-top: 1px solid var(--line); }
.fcard-faq details:hover summary { color: var(--accent); }
.fcard-faq summary {
cursor: pointer;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 1.15rem;
letter-spacing: -0.01em;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: color .15s var(--ease);
}
.fcard-faq summary::-webkit-details-marker { display: none; }
.fcard-faq summary::after {
content: '+';
font-size: 1.6rem;
color: var(--accent);
font-weight: 300;
line-height: 1;
transition: transform .2s var(--ease);
}
.fcard-faq details[open] summary { color: var(--accent); }
.fcard-faq details[open] summary::after { content: '−'; }
.fcard-faq p { margin: 14px 0 0; color: var(--text-mute); line-height: 1.65; max-width: 720px; }
.fcard-faq code { background: var(--bg); padding: 2px 6px; border-radius: 4px; color: var(--accent); font-size: 0.9em; }
@media (max-width: 860px) {
.fcard-hero-inner { grid-template-columns: 1fr; gap: 32px; }
/* On mobile, show the card preview first, then the text below */
.fcard-hero-copy { order: 2; }
.fcard-hero-preview { order: 1; }
.fcard-hero-preview-card { width: min(100%, 320px); max-height: 360px; }
.fcard-form-wrap { position: static; }
.fcard-features { grid-template-columns: repeat(2, 1fr); border-top: 0; }
.fcard-feat { border-right: 1px solid rgba(19,28,46,0.12); border-top: 1px solid rgba(19,28,46,0.12); padding: 28px 20px; }
.fcard-feat:nth-child(2n) { border-right: 0; }
.fcard-feat:nth-child(n+2) { padding-left: 20px; }
.fcard-trust-strip { gap: 10px; font-size: 0.8rem; }
.fcard-preview-h, .fcard-faq h2 { text-align: left; }
}
@media (max-width: 560px) {
.fcard-features { grid-template-columns: 1fr; }
.fcard-feat { border-right: 0 !important; padding: 24px 0 !important; }
.fcard-form { padding: 28px 22px; }
.fcard-preview { padding: 72px 0 64px; }
.fcard-samples { padding: 72px 0 64px; }
.fcard-faq { padding: 72px 0 80px; }
}
/* ============================================================
SINGLE CARD PAGE (/cards/{username}/)
============================================================ */
.card-scope {
background: var(--card-bg);
color: var(--card-text);
font-family: var(--card-font-body);
min-height: 100vh;
margin: 0 !important;
padding: 0 !important;
}
body.single-vcfy_card .wp-site-blocks > * { margin-block-start: 0 !important; }
body.single-vcfy_card #main { margin: 0; padding: 0; }
.card-scope h1, .card-scope h2 { font-family: var(--card-font-display); }
.card-page { padding: 20px 20px 60px; }
.card-wrap {
max-width: 560px;
margin: 0 auto;
}
.card-cover {
width: 100%;
height: 180px;
border-radius: 24px 24px 0 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
/* Theme-matched gradient defaults (used when no cover uploaded) */
.card-cover--midnight-gold { background: linear-gradient(135deg, #0B1220 0%, #1a2540 55%, rgba(253,200,0,0.22) 100%); }
.card-cover--clean-mono { background: linear-gradient(135deg, #F6F7F9 0%, #E8EAEE 55%, rgba(19,28,46,0.08) 100%); }
.card-cover--warm-sand { background: linear-gradient(135deg, #241B15 0%, #3d2e24 55%, rgba(229,169,106,0.28) 100%); }
.card-cover--navy-sharp { background: linear-gradient(135deg, #132349 0%, #1e3670 55%, rgba(74,163,255,0.28) 100%); }
.card-cover--rose-cream { background: linear-gradient(135deg, #FFFFFF 0%, #FBF4EF 55%, rgba(200,90,107,0.18) 100%); }
.card-cover--forest-pro { background: linear-gradient(135deg, #142720 0%, #1f3d32 55%, rgba(87,194,140,0.22) 100%); }
.card-cover.has-image { background-color: var(--card-surface); }
.card-head {
background: var(--card-surface);
border-radius: 24px;
padding: 36px 28px 32px;
text-align: center;
border: 1px solid rgba(255,255,255,0.05);
}
.card-head--with-cover {
border-radius: 0 0 24px 24px;
border-top: none;
padding-top: 24px; /* real padding breaks margin-collapse so the head bg stays put */
}
.card-head--with-cover .card-photo {
margin-top: -94px !important; /* -70px overlap + -24px to cancel the padding */
position: relative;
z-index: 2;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
@media (max-width: 560px) {
.card-cover { height: 140px; }
.card-head--with-cover { padding-top: 18px; }
.card-head--with-cover .card-photo { margin-top: -73px !important; }
}
.card-photo {
display: block;
width: 140px; height: 140px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 20px;
border: 3px solid var(--card-accent);
}
.card-photo-placeholder {
display: inline-flex; align-items: center; justify-content: center;
background: var(--card-accent);
color: var(--card-bg);
font-size: 3rem; font-weight: 700;
font-family: var(--card-font-display);
}
.card-name { margin: 0 0 6px; font-size: 1.8rem; letter-spacing: -0.02em; }
.card-role { margin: 0 0 14px; color: var(--card-muted); font-size: 0.98rem; }
.card-tagline {
margin: 0 0 20px; font-size: 1.02rem; line-height: 1.5;
color: var(--card-text);
}
.card-actions {
display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
margin-top: 6px;
}
.card-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 18px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 0.92rem;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.card-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.card-btn-primary { background: var(--card-accent); color: var(--card-bg); }
.card-btn-ghost {
background: transparent;
color: var(--card-text);
border: 1px solid rgba(128,128,128,0.25);
}
/* Business info row — sits below the action buttons. Renders only the lines
that have a value (business name, website domain, Facebook handle). */
.card-info-row {
list-style: none;
margin: 18px auto 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 360px;
text-align: left;
}
.card-info-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.92rem;
color: var(--card-muted);
line-height: 1.4;
}
.card-info-icon {
flex: 0 0 auto;
width: 28px; height: 28px;
border-radius: 8px;
background: rgba(128,128,128,0.10);
color: var(--card-accent);
display: inline-grid; place-items: center;
}
.card-info-label {
flex: 1 1 auto;
color: var(--card-text);
font-weight: 600;
word-break: break-word;
}
a.card-info-label { text-decoration: none; }
a.card-info-label:hover { color: var(--card-accent); }
.card-section {
background: var(--card-surface);
border-radius: 20px;
padding: 24px 22px;
margin-top: 16px;
border: 1px solid rgba(255,255,255,0.05);
}
.card-label {
margin: 0 0 14px;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--card-muted);
font-weight: 600;
}
.card-bio { margin: 0; line-height: 1.65; color: var(--card-text); }
.card-services {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 16px;
}
.card-services li {
padding-bottom: 16px;
border-bottom: 1px solid rgba(128,128,128,0.12);
}
.card-services li:last-child { border-bottom: none; padding-bottom: 0; }
.card-service-head {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
margin-bottom: 4px;
}
.card-service-head strong { font-family: var(--card-font-display); font-size: 1.02rem; color: var(--card-text); }
.card-service-price {
color: var(--card-accent); font-weight: 600; font-size: 0.92rem; white-space: nowrap;
}
.card-services p { margin: 0; color: var(--card-muted); font-size: 0.94rem; line-height: 1.55; }
.card-reviews { display: grid; gap: 16px; }
.card-review {
margin: 0;
padding: 16px 18px;
border-left: 3px solid var(--card-accent);
background: rgba(128,128,128,0.06);
border-radius: 0 10px 10px 0;
}
.card-review p { margin: 0 0 8px; font-style: italic; line-height: 1.55; color: var(--card-text); }
.card-review cite {
font-style: normal;
font-size: 0.85rem;
color: var(--card-muted);
}
.card-review cite span { margin-left: 4px; }
.card-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.card-socials a {
padding: 9px 16px;
border-radius: 999px;
background: rgba(128,128,128,0.08);
color: var(--card-text);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: background 0.15s ease;
}
.card-socials a:hover { background: var(--card-accent); color: var(--card-bg); }
.card-share { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.card-qr {
width: 160px; height: 160px;
padding: 10px;
background: #fff;
border-radius: 12px;
flex: 0 0 auto;
}
.card-qr img { width: 100%; height: 100%; display: block; }
.card-share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.card-share-actions .card-btn { flex: 1 1 auto; min-width: 110px; }
@media (max-width: 460px) {
.card-share { grid-template-columns: 1fr; justify-items: center; }
.card-qr { width: 140px; height: 140px; }
.card-share-actions { width: 100%; }
}
.card-foot {
margin-top: 28px;
text-align: center;
}
.card-attr {
margin: 0;
font-size: 0.82rem;
color: var(--card-muted);
}
.card-attr a { color: var(--card-accent); text-decoration: none; font-weight: 600; }
.card-attr a:hover { text-decoration: underline; }
.card-powered {
margin: 14px 0 0;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--card-muted);
opacity: 0.75;
text-align: center;
}
.card-powered a {
color: var(--card-muted);
text-decoration: none;
font-weight: 600;
transition: color 0.15s ease;
}
.card-powered a:hover { color: var(--card-accent); }
/* Owner-only floating Edit button on public card view */
.card-owner-edit {
position: fixed;
top: 16px;
right: 16px;
z-index: 50;
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px;
background: var(--card-accent);
color: var(--card-bg);
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
transition: transform 0.15s ease;
}
.card-owner-edit:hover { transform: translateY(-1px); }
/* Landing page "already have a card" login link */
.fcard-login-link {
margin: 0 0 4px;
font-size: 0.85rem;
color: var(--text-mute);
}
.fcard-login-link a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
.fcard-login-link a:hover { text-decoration: underline; }
/* ============================================================
CARD LOGIN PAGE (/cards/login/)
============================================================ */
.fcl {
padding: clamp(100px, 12vw, 160px) 0 80px;
background: radial-gradient(ellipse at top right, rgba(253,200,0,0.06), transparent 60%),
radial-gradient(ellipse at bottom left, rgba(253,200,0,0.03), transparent 60%),
var(--bg);
min-height: 70vh;
}
.fcl-inner { display: flex; justify-content: center; }
.fcl-card {
width: 100%;
max-width: 440px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
padding: 36px 32px 28px;
}
.fcl-card .eyebrow { display: inline-block; margin-bottom: 10px; }
.fcl-card h1 { margin: 0 0 6px; font-size: 1.8rem; line-height: 1.15; }
.fcl-sub { margin: 0 0 22px; color: var(--text-mute); font-size: 0.95rem; }
.fcl-notice {
margin: 0 0 18px;
padding: 10px 14px;
background: rgba(253,200,0,0.1);
border: 1px solid rgba(253,200,0,0.3);
border-radius: 10px;
font-size: 0.88rem;
color: var(--text);
}
.fcl-form { display: grid; gap: 14px; }
.fcl-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-mute); }
.fcl-form .label-text { display: inline-block; color: var(--text); font-weight: 500; font-size: 0.88rem; }
.fcl-form input[type=text],
.fcl-form input[type=password] {
width: 100%;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font: inherit;
transition: border-color 0.2s ease;
}
.fcl-form input:focus { outline: none; border-color: var(--accent); }
.fcl-form label.fcl-remember {
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--text-mute);
}
.fcl-form label.fcl-remember input { margin: 0; }
.fcl-status { margin: 2px 0 0; font-size: 0.88rem; min-height: 1.2em; }
.fcl-status.is-success { color: var(--accent); }
.fcl-status.is-error { color: #ff7070; }
.fcl-foot {
margin: 18px 0 0;
padding-top: 18px;
border-top: 1px solid var(--line);
font-size: 0.85rem;
color: var(--text-mute);
text-align: center;
line-height: 1.7;
}
.fcl-foot a { color: var(--accent); text-decoration: none; font-weight: 500; }
.fcl-foot a:hover { text-decoration: underline; }
.fcl-sep { margin: 0 8px; opacity: 0.4; }
@media (max-width: 480px) {
.fcl-card { padding: 28px 22px 22px; }
.fcl-foot .fcl-sep { display: block; height: 6px; overflow: hidden; visibility: hidden; }
}
/* Reviews visibility toggle in editor */
.ced-toggle {
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
margin-top: 14px !important;
margin-bottom: 12px;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 0.88rem !important;
color: var(--text) !important;
}
.ced-toggle input { margin: 0; flex: 0 0 auto; }
.ced-toggle > span { flex: 1 1 auto; }
/* Editor Share modal */
.ced-share-modal {
position: fixed; inset: 0;
z-index: 9999;
display: none;
align-items: center; justify-content: center;
padding: 24px;
}
.ced-share-modal.is-open { display: flex; }
.ced-share-backdrop {
position: absolute; inset: 0;
background: rgba(5,10,20,0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.ced-share-panel {
position: relative;
z-index: 1;
width: 100%;
max-width: 640px;
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
padding: 32px 28px 26px;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.ced-share-close {
position: absolute; top: 12px; right: 12px;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text-mute);
font-size: 1.4rem; line-height: 1;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
}
.ced-share-close:hover { color: var(--accent); border-color: var(--accent); }
.ced-share-head { margin-bottom: 24px; }
.ced-share-head .eyebrow { display: inline-block; margin-bottom: 8px; }
.ced-share-head h3 { font-size: 1.3rem; line-height: 1.3; margin: 0 0 10px; }
.ced-share-url { margin: 0; }
.ced-share-url code {
display: inline-block;
background: var(--bg);
padding: 6px 10px;
border-radius: 6px;
font-size: 0.82rem;
color: var(--accent);
word-break: break-all;
}
.ced-share-body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
align-items: start;
}
.ced-share-qr {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 14px;
background: #fff;
border-radius: 14px;
}
.ced-share-qr img { width: 100%; height: auto; display: block; }
.ced-share-dl {
font-size: 0.78rem;
font-weight: 600;
color: var(--bg);
text-decoration: none;
padding: 6px 10px;
background: rgba(19,28,46,0.06);
border-radius: 6px;
transition: background 0.15s ease;
}
.ced-share-dl:hover { background: rgba(19,28,46,0.12); }
.ced-share-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.ced-share-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
font-family: inherit;
}
.ced-share-btn:hover { border-color: var(--accent); transform: translateY(-1px); background: var(--bg-2); }
.ced-share-btn.is-copied { background: rgba(253,200,0,0.15); border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
.ced-share-body { grid-template-columns: 1fr; }
.ced-share-qr { max-width: 220px; margin: 0 auto; }
.ced-share-grid { grid-template-columns: 1fr 1fr; }
}
/* Hide the site's main chrome on card pages — give the card the whole canvas */
body.single-vcfy_card .vcfy-nav,
body.single-vcfy_card .vcfy-footer { display: none; }
body.single-vcfy_card { background: var(--card-bg, #0B1220); }
/* ============================================================
CARD EDITOR (/cards/edit/)
============================================================ */
.ced {
padding: clamp(90px, 10vw, 140px) 0 80px;
background: var(--ced-preview-bg, transparent);
transition: background 0.4s ease;
position: relative;
}
.ced::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.ced .ced-head h1,
.ced .ced-head .eyebrow {
transition: color 0.3s ease;
}
.ced .ced-head h1 { color: var(--ced-preview-text, var(--text)); transition: color 0.3s ease; }
.ced .ced-head .eyebrow { color: var(--ced-preview-accent, var(--accent)); }
.ced .ced-head p,
.ced .ced-head p a { color: var(--ced-preview-muted, var(--text-mute)); }
.ced .ced-head p a:hover { color: var(--ced-preview-accent, var(--accent)); }
/* Form elements inherit the selected theme */
.ced .ced-fs {
background: var(--ced-preview-surface, var(--card));
border-color: var(--ced-preview-muted, var(--line));
transition: background 0.3s ease, border-color 0.3s ease;
}
.ced .ced-fs legend { color: var(--ced-preview-muted, var(--text-mute)); }
.ced .ced-fs legend .ced-hint { color: var(--ced-preview-muted, var(--text-mute)); }
.ced .ced-form label { color: var(--ced-preview-muted, var(--text-mute)); }
.ced .ced-form .label-text { color: var(--ced-preview-text, var(--text)); }
.ced .ced-hint { color: var(--ced-preview-muted, var(--text-mute)); }
.ced .ced-form input[type=text],
.ced .ced-form input[type=email],
.ced .ced-form input[type=url],
.ced .ced-form textarea {
background: var(--ced-preview-bg, var(--bg));
border-color: var(--ced-preview-muted, var(--line));
color: var(--ced-preview-text, var(--text));
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.ced .ced-form input:focus,
.ced .ced-form textarea:focus { border-color: var(--ced-preview-accent, var(--accent)); }
.ced .ced-form input::placeholder,
.ced .ced-form textarea::placeholder { color: var(--ced-preview-muted, var(--text-mute)); opacity: 0.7; }
.ced .ced-toggle {
background: var(--ced-preview-bg, var(--bg));
border-color: var(--ced-preview-muted, var(--line));
color: var(--ced-preview-text, var(--text)) !important;
}
.ced .ced-toggle > span { color: var(--ced-preview-text, var(--text)); }
.ced .ced-photo-preview {
background: var(--ced-preview-bg, var(--bg));
border-color: var(--ced-preview-muted, var(--line));
color: var(--ced-preview-muted, var(--text-mute));
}
.ced .ced-photo-hint { color: var(--ced-preview-muted, var(--text-mute)); }
.ced .ced-preset {
background: var(--ced-preview-bg, var(--bg-3));
border-color: var(--ced-preview-muted, var(--line-strong));
}
.ced .ced-preset-label { color: var(--ced-preview-muted, var(--text-mute)); }
.ced .ced-save {
background: var(--ced-preview-surface, var(--card));
border-color: var(--ced-preview-muted, var(--line));
}
.ced .ced-logout { color: var(--ced-preview-muted, var(--text-mute)); }
.ced .btn-ghost {
color: var(--ced-preview-text, var(--text));
border-color: var(--ced-preview-muted, var(--line-strong));
}
.ced .btn-ghost:hover {
background: var(--ced-preview-surface, rgba(255,255,255,0.05));
color: var(--ced-preview-accent, var(--accent));
border-color: var(--ced-preview-accent, var(--accent));
}
/* Repeater UI for services + reviews */
.ced-rows { display: grid; gap: 12px; margin-top: 14px; }
.ced-row-item {
display: grid;
gap: 8px;
padding: 14px;
background: var(--ced-preview-bg, var(--bg));
border: 1px solid var(--ced-preview-muted, var(--line));
border-radius: 10px;
transition: background 0.3s ease, border-color 0.3s ease;
}
.ced-row-head {
display: grid;
grid-template-columns: 1.3fr 1fr auto;
gap: 8px;
align-items: center;
}
.ced-row-item input[type=text],
.ced-row-item textarea {
width: 100%;
padding: 10px 12px;
background: var(--ced-preview-surface, var(--card));
border: 1px solid var(--ced-preview-muted, var(--line));
border-radius: 8px;
color: var(--ced-preview-text, var(--text));
font: inherit;
font-size: 0.9rem;
transition: border-color 0.2s ease;
}
.ced-row-item input:focus,
.ced-row-item textarea:focus { outline: none; border-color: var(--ced-preview-accent, var(--accent)); }
.ced-row-item textarea { resize: vertical; min-height: 56px; line-height: 1.45; }
.ced-row-remove {
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--ced-preview-muted, var(--line));
border-radius: 8px;
color: var(--ced-preview-muted, var(--text-mute));
font-size: 1.3rem; line-height: 1;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ced-row-remove:hover { color: #ff7070; border-color: #ff7070; background: rgba(255,112,112,0.08); }
.ced-row-add {
margin-top: 12px;
padding: 10px 16px;
background: transparent;
border: 1px dashed var(--ced-preview-muted, var(--line-strong));
border-radius: 10px;
color: var(--ced-preview-text, var(--text));
font: inherit;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ced-row-add:hover {
border-color: var(--ced-preview-accent, var(--accent));
color: var(--ced-preview-accent, var(--accent));
background: var(--ced-preview-surface, transparent);
}
@media (max-width: 560px) {
.ced-row-head { grid-template-columns: 1fr auto; }
.ced-row-head > input { grid-column: 1 / -1; }
.ced-row-head > input:last-of-type { grid-column: 1; }
.ced-row-remove { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}
.ced-head {
display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
margin-bottom: 32px; flex-wrap: wrap;
}
.ced-head h1 { margin: 6px 0 4px; font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); }
.ced-head p { margin: 0; color: var(--text-mute); font-size: 0.95rem; }
.ced-head p a { color: var(--accent); text-decoration: none; }
.ced-head-actions { display: flex; align-items: center; gap: 14px; }
.ced-logout { color: var(--text-mute); font-size: 0.88rem; text-decoration: none; }
.ced-logout:hover { color: var(--accent); }
.ced-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
.ced-col { display: grid; gap: 20px; }
.ced-side { position: sticky; top: 100px; }
.ced-fs {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px 22px 20px;
margin: 0;
}
.ced-fs legend {
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
font-weight: 600;
padding: 0 8px;
margin-left: -8px;
}
.ced-fs legend .ced-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-mute); margin-left: 8px; }
.ced-hint { font-size: 0.78rem; color: var(--text-mute); font-weight: 400; }
.ced-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-mute); margin-top: 14px; }
.ced-form .label-text { display: inline-block; color: var(--text); font-size: 0.88rem; font-weight: 500; }
.ced-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ced-form input[type=text],
.ced-form input[type=email],
.ced-form input[type=url],
.ced-form textarea {
width: 100%;
padding: 11px 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font: inherit;
font-size: 0.95rem;
transition: border-color 0.2s ease;
}
.ced-form input:focus, .ced-form textarea:focus { outline: none; border-color: var(--accent); }
.ced-form textarea { resize: vertical; min-height: 80px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; }
.ced-photo { display: grid; gap: 12px; margin-top: 12px; }
.ced-photo-preview {
width: 120px; height: 120px; border-radius: 50%;
background: var(--bg); border: 2px dashed var(--line);
display: flex; align-items: center; justify-content: center;
color: var(--text-mute); font-size: 0.8rem;
overflow: hidden;
}
.ced-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.ced-photo-actions { display: flex; gap: 8px; }
.ced-photo-hint { margin: 0; font-size: 0.78rem; color: var(--text-mute); }
.ced-cover { display: grid; gap: 12px; margin-top: 12px; }
.ced-cover-preview {
width: 100%;
aspect-ratio: 3 / 1;
border-radius: 10px;
background: var(--bg);
border: 2px dashed var(--line);
display: flex; align-items: center; justify-content: center;
color: var(--text-mute);
font-size: 0.8rem;
overflow: hidden;
}
.ced-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ced-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ced-preset {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 6px;
background: var(--bg-3);
border: 2px solid var(--line-strong);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.ced-preset:hover { border-color: rgba(253,200,0,0.35); transform: translateY(-1px); }
.ced-preset input { position: absolute; opacity: 0; pointer-events: none; }
.ced-preset input:checked + .ced-swatch,
.ced-preset input:checked + .ced-font-sample { outline: 2px solid var(--accent); outline-offset: 2px; }
.ced-preset:has(input:checked) { border-color: var(--accent); }
.ced-swatch {
width: 100%; aspect-ratio: 5/2;
border-radius: 6px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 8px;
position: relative;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 1px 0 rgba(255,255,255,0.04);
}
.ced-swatch-dot { width: 12px; height: 12px; border-radius: 50%; }
.ced-swatch-text { font-weight: 700; font-size: 0.8rem; }
.ced-preset-label { font-size: 0.68rem; color: var(--text-mute); font-weight: 500; line-height: 1.2; text-align: center; }
.ced-presets-font { grid-template-columns: 1fr 1fr; }
.ced-font-sample {
width: 100%;
border-radius: 6px;
background: var(--bg-2);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 8px 6px;
gap: 1px;
color: var(--text);
}
.ced-font-sample-title {
font-size: 0.88rem;
font-weight: 600;
line-height: 1.15;
color: var(--text);
}
.ced-font-sample-body {
font-size: 0.62rem;
color: var(--text-mute);
line-height: 1.2;
}
.ced-save {
margin-top: 20px;
padding: 20px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
}
.ced-save-status { margin: 10px 0 0; font-size: 0.88rem; min-height: 1.2em; text-align: center; }
.ced-save-status.is-success { color: var(--accent); }
.ced-save-status.is-error { color: #ff7070; }
@media (max-width: 960px) {
.ced-grid { grid-template-columns: 1fr; }
.ced-side { position: static; }
}
@media (max-width: 560px) {
.ced-row { grid-template-columns: 1fr; }
.ced-presets { grid-template-columns: 1fr; }
}
/* ============================================================
HOMEPAGE PROMO BANNER (free card)
============================================================ */
.promo-banner {
position: relative;
padding: 24px 20px;
background: linear-gradient(135deg, rgba(253,200,0,0.12), rgba(253,200,0,0.04));
border-top: 1px solid rgba(253,200,0,0.25);
border-bottom: 1px solid rgba(253,200,0,0.25);
}
.promo-banner-inner {
display: flex; align-items: center; justify-content: center;
gap: 18px; flex-wrap: wrap;
text-align: center;
}
.promo-banner-tag {
display: inline-block;
padding: 4px 10px;
background: var(--accent);
color: var(--bg);
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.promo-banner-text {
margin: 0;
font-size: 1rem;
line-height: 1.4;
color: var(--text);
}
.promo-banner-text strong { color: var(--accent); }
.promo-banner .btn { white-space: nowrap; }
@media (max-width: 640px) {
.promo-banner-text { font-size: 0.92rem; }
}
/* Sticky compact toast — bottom-center, revealed via JS after scrolling past the main banner */
.promo-sticky {
position: fixed;
bottom: 20px;
left: 50%;
right: auto;
top: auto;
z-index: 80;
max-width: 420px;
width: calc(100% - 40px);
background: linear-gradient(135deg, rgba(253,200,0,0.98), rgba(255,180,0,0.98));
color: #0B1220;
border-radius: 14px;
transform: translateX(-50%) translateY(calc(100% + 30px));
transition: transform 0.35s ease, opacity 0.25s ease;
box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(253,200,0,0.4);
opacity: 0;
pointer-events: none;
}
.promo-sticky.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.promo-sticky-inner {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px 14px 18px;
padding-right: 38px;
flex-wrap: nowrap;
max-width: 100%;
}
.promo-sticky-text {
margin: 0;
font-size: 0.86rem;
font-weight: 500;
color: #0B1220;
line-height: 1.35;
flex: 1 1 auto;
}
.promo-sticky-tag {
display: inline-block;
background: #0B1220;
color: #FDC800;
padding: 2px 7px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-right: 6px;
vertical-align: 1px;
}
.promo-sticky .btn {
background: #0B1220;
color: #FDC800;
padding: 7px 12px;
font-size: 0.8rem;
white-space: nowrap;
flex: 0 0 auto;
}
.promo-sticky .btn:hover { background: #132140; color: #FDC800; }
.promo-sticky-close {
position: absolute;
top: 6px;
right: 6px;
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(19,28,46,0.12);
border: none;
color: #0B1220;
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
opacity: 0.75;
border-radius: 50%;
transition: opacity 0.15s ease, background 0.15s ease;
z-index: 2;
}
.promo-sticky-close:hover { opacity: 1; background: rgba(19,28,46,0.1); }
@media (max-width: 640px) {
.promo-sticky {
bottom: 12px;
width: calc(100% - 24px);
max-width: none;
}
.promo-sticky-text { font-size: 0.82rem; }
.promo-sticky-inner { gap: 8px; padding: 14px 14px 14px 16px; padding-right: 38px; }
.promo-sticky .btn { padding: 6px 10px; font-size: 0.76rem; }
}
/* ============================================================
LANDING PAGE — CARD SAMPLES SHOWCASE
============================================================ */
.fcard-samples {
position: relative;
overflow: hidden;
padding: 110px 0 110px;
background: #05080F;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* Big outlined "06" as editorial texture — references "Six waiting" headline.
Sits behind everything, deliberate corner anchor, gold stroke only. */
.fcard-samples::before {
content: '06';
position: absolute;
top: -0.18em;
right: -0.04em;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: clamp(220px, 32vw, 460px);
line-height: 1;
letter-spacing: -0.06em;
color: transparent;
-webkit-text-stroke: 1px rgba(253,200,0,0.12);
text-stroke: 1px rgba(253,200,0,0.12);
pointer-events: none;
user-select: none;
z-index: 0;
}
/* Subtle horizontal rule + label in top-left, like a section index */
.fcard-samples::after {
content: '/ THEMES';
position: absolute;
top: 32px;
left: max(28px, calc((100vw - var(--container, 1200px)) / 2 + 24px));
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.24em;
color: var(--accent);
opacity: 0.65;
z-index: 1;
}
.fcard-samples > * { position: relative; z-index: 1; }
.fcard-samples-copy h2 { font-size: clamp(2rem, 3.5vw + 1rem, 3.4rem); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 20px; }
.fcard-samples-copy > p { font-size: 1.05rem; }
/* Subtle stagger: enough to break grid, not enough to misalign captions */
.fcard-samples-slider .vcfy-slider > .fcard-sample:first-child { transform: translateY(-8px); }
.fcard-samples-slider .vcfy-slider > .fcard-sample:nth-child(2) { transform: translateY(8px); }
@media (max-width: 860px) {
.fcard-samples::before { font-size: 200px; top: -8px; right: -16px; }
.fcard-samples::after { left: 24px; top: 22px; }
.fcard-samples-slider .vcfy-slider > .fcard-sample:first-child,
.fcard-samples-slider .vcfy-slider > .fcard-sample:nth-child(2) { transform: none; }
}
.fcard-samples-split {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: center;
}
.fcard-samples-grid {
display: block;
margin: 0;
}
.fcard-samples-copy { max-width: 480px; }
.fcard-samples-copy .eyebrow { display: inline-block; margin-bottom: 16px; }
.fcard-samples-copy h2 { margin: 0 0 18px; font-size: clamp(1.75rem, 2vw + 1rem, 2.4rem); line-height: 1.15; }
.fcard-samples-copy > p { margin: 0 0 16px; color: var(--text-dim); line-height: 1.6; }
.fcard-samples-copy .btn { margin-top: 10px; }
.fcard-sample {
display: block;
position: relative;
text-decoration: none;
color: inherit;
transition: transform 0.25s ease;
}
.fcard-sample:hover { transform: translateY(-4px); }
.fcard-sample-frame {
position: relative;
border-radius: 24px;
overflow: hidden;
max-height: 520px;
box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0.25) 95%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0.25) 95%, rgba(0,0,0,0) 100%);
}
.fcard-sample-frame::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 120px;
background: linear-gradient(to bottom, rgba(15,23,42,0) 0%, #05080F 90%);
pointer-events: none;
}
.fcard-sample img {
width: 100%;
height: auto;
display: block;
}
.fcard-sample:hover .fcard-sample-frame {
box-shadow: 0 24px 60px rgba(253,200,0,0.18), 0 0 0 1px rgba(253,200,0,0.25);
}
/* View-sample pill — positioned on the parent .fcard-sample (so the frame's
mask-image fade doesn't clip it). Sits just above the caption label. */
.fcard-sample-view {
position: absolute;
left: 50%;
bottom: 80px; /* sits just above the caption area */
transform: translateX(-50%) translateY(10px);
z-index: 4;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--accent);
color: var(--bg);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 0.88rem;
letter-spacing: 0.01em;
box-shadow: 0 10px 26px rgba(0,0,0,0.45);
opacity: 0;
transition: opacity 0.2s ease, transform 0.25s ease;
white-space: nowrap;
}
.fcard-sample:hover .fcard-sample-view,
.fcard-sample:focus-visible .fcard-sample-view {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Touch devices — keep the pill visible so tap intent is obvious */
@media (hover: none) {
.fcard-sample-view {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.fcard-sample-caption {
display: flex; flex-direction: column; gap: 4px;
margin-top: 12px;
text-align: center;
}
@media (max-width: 560px) {
.fcard-sample-caption { margin-top: 8px; }
.fcard-sample-frame { max-height: 420px; }
}
.fcard-sample-caption strong { font-size: 1rem; color: var(--text); }
.fcard-sample-caption span { font-size: 0.85rem; color: var(--text-mute); }
.fcard-samples-note {
margin: 0 0 20px;
color: var(--text-mute);
font-size: 0.88rem;
line-height: 1.55;
}
/* Desktop: 2-up flex row, no slider behavior needed */
.fcard-samples-slider .vcfy-slider {
gap: 24px;
padding: 4px 0 14px;
}
.fcard-samples-slider .vcfy-slider > * {
flex: 0 0 calc((100% - 24px) / 2) !important;
min-width: 0 !important;
scroll-snap-align: start;
}
@media (max-width: 900px) {
.fcard-samples-split {
grid-template-columns: 1fr;
gap: 32px;
}
.fcard-samples-copy { order: -1; max-width: none; text-align: center; margin: 0 auto; }
.fcard-samples-grid { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 900px) {
.fcard-samples { padding: 48px 0 40px; }
.fcard-samples-split { gap: 24px; }
.fcard-samples-copy { margin-bottom: 4px; }
/* Mobile + tablet: one card at a time, full width, swipe to next */
.fcard-samples-slider .vcfy-slider {
gap: 16px;
padding: 4px 0 14px;
}
.fcard-samples-slider .vcfy-slider > * {
flex: 0 0 100% !important;
min-width: 0 !important;
}
}
/* ============================================================
CONTACT PAGE (/contact/)
============================================================ */
.contact-page {
padding: clamp(100px, 12vw, 160px) 0 80px;
background: radial-gradient(ellipse at top right, rgba(253,200,0,0.05), transparent 60%),
radial-gradient(ellipse at bottom left, rgba(253,200,0,0.03), transparent 60%),
var(--bg);
min-height: 70vh;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.contact-intro .eyebrow { display: inline-block; margin-bottom: 14px; }
.contact-intro h1 { margin: 0 0 18px; font-size: clamp(2rem, 3vw + 1rem, 2.8rem); line-height: 1.1; }
.contact-lede { margin: 0 0 28px; color: var(--text-dim); font-size: 1.05rem; line-height: 1.6; }
.contact-channels {
list-style: none;
padding: 0; margin: 0 0 32px;
display: grid; gap: 14px;
}
.contact-channels li {
display: grid;
grid-template-columns: 110px 1fr;
align-items: baseline;
gap: 16px;
padding: 14px 18px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
transition: border-color 0.2s ease;
}
.contact-channels li:hover { border-color: rgba(253,200,0,0.35); }
.contact-channel-label {
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
font-weight: 600;
}
.contact-channels a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
word-break: break-word;
}
.contact-channels a:hover { text-decoration: underline; }
.contact-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 0 0 28px;
padding: 22px 0 0;
border-top: 1px solid var(--line);
}
.contact-meta > div { display: flex; flex-direction: column; gap: 4px; }
.contact-meta strong {
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
font-weight: 600;
}
.contact-meta span { color: var(--text); font-size: 0.92rem; line-height: 1.4; }
.contact-social { display: flex; gap: 14px; flex-wrap: wrap; }
.contact-social a {
padding: 8px 14px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text-mute);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-social a:hover { color: var(--accent); border-color: var(--accent); }
.contact-form-wrap {
position: sticky;
top: 100px;
}
.contact-page .cta-form {
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
padding: 32px 28px;
display: grid; gap: 14px;
text-align: left;
}
.contact-page .cta-form h2 { margin: 0 0 6px; font-size: 1.35rem; }
.contact-page .cta-form .form-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.contact-page .cta-form input[type=text],
.contact-page .cta-form input[type=email],
.contact-page .cta-form textarea {
width: 100%;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font: inherit;
transition: border-color 0.2s ease;
}
.contact-page .cta-form input:focus,
.contact-page .cta-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-page .cta-form textarea { resize: vertical; min-height: 140px; }
.contact-page .cta-form-status { margin: 0; font-size: 0.88rem; min-height: 1.2em; }
.contact-form-trust { margin: 4px 0 0; text-align: center; font-size: 0.78rem; color: var(--text-mute); }
.cta-hp { position: absolute; left: -9999px; }
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.contact-form-wrap { position: static; }
.contact-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.contact-page { padding: 96px 0 60px; }
.contact-channels li { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
.contact-meta { grid-template-columns: 1fr; }
.contact-page .cta-form { padding: 26px 22px; }
.contact-page .cta-form .form-row { grid-template-columns: 1fr; }
}
/* ============================================================
FREE COURSE — editorial landing + structured module reading
============================================================ */
/* ----------- LANDING (editorial) ----------- */
.course-edit { background: var(--bg); }
.course-edit-piece { padding: clamp(64px, 8vw, 110px) 0 clamp(64px, 8vw, 110px); }
.course-edit-inner { max-width: 720px; margin: 0 auto; }
.course-edit-section { padding: clamp(40px, 5vw, 64px) 0; }
.course-edit-head {
padding: clamp(80px, 12vw, 140px) 0 clamp(40px, 6vw, 64px);
background:
radial-gradient(640px 460px at 92% 0%, rgba(255,199,0,0.10), transparent 65%),
radial-gradient(620px 480px at 8% 100%, rgba(79,70,229,0.12), transparent 60%),
var(--bg);
}
.course-edit-eyebrow {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
margin-bottom: 28px;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-mute);
}
.course-edit-tag {
color: var(--accent);
border: 1px solid rgba(253,200,0,0.35);
padding: 5px 12px;
border-radius: 999px;
}
.course-edit-meta { letter-spacing: 0.04em; text-transform: none; font-size: 0.85rem; color: var(--text-mute); }
.course-edit-title {
margin: 0 0 28px;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2.4rem, 5vw + 1rem, 4.4rem);
letter-spacing: -0.035em;
line-height: 1.02;
font-weight: 700;
}
.course-edit-title em {
display: block;
font-style: italic;
font-weight: 400;
color: var(--accent);
margin-top: 4px;
}
.course-edit-standfirst {
font-size: clamp(1.15rem, 0.5vw + 1rem, 1.35rem);
line-height: 1.55;
color: var(--text-dim);
margin: 0;
max-width: 640px;
}
.course-edit-opener .course-edit-lede {
font-size: 1.18rem;
line-height: 1.65;
color: var(--text);
margin: 0 0 22px;
}
.course-edit-opener p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-dim);
margin: 0 0 18px;
}
.course-edit-h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.6rem, 1.5vw + 1rem, 2.1rem);
letter-spacing: -0.02em;
margin: 0 0 28px;
}
/* Module list — magazine-style entries */
.course-edit-modules { border-top: 1px solid var(--line); }
.course-edit-mod-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 36px;
}
.course-edit-mod {
display: grid;
grid-template-columns: 96px 1fr;
gap: 28px;
padding-top: 28px;
border-top: 2px solid var(--module-accent, var(--accent));
position: relative;
}
.course-edit-mod:first-child { padding-top: 0; border-top: 0; }
.course-edit-mod-num {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2.6rem, 3vw + 1rem, 4rem);
font-weight: 700;
color: var(--module-accent, var(--accent));
letter-spacing: -0.04em;
line-height: 0.9;
padding-top: 4px;
}
.course-edit-mod-meta {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
margin-bottom: 10px;
}
.course-edit-mod-title {
margin: 0 0 18px;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem);
letter-spacing: -0.015em;
line-height: 1.2;
}
.course-edit-mod-quote {
margin: 0 0 14px;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.1rem, 0.5vw + 1rem, 1.3rem);
font-style: italic;
line-height: 1.4;
color: var(--text);
padding-left: 18px;
border-left: 3px solid var(--module-accent, var(--accent));
}
.course-edit-mod-teaser {
margin: 0 0 14px;
color: var(--text-dim);
line-height: 1.6;
}
.course-edit-mod-link {
display: inline-block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.92rem;
color: var(--module-accent, var(--accent));
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.course-edit-mod-link:hover { opacity: 0.8; }
/* Five-sentence summary (the "if you only want the gist") */
.course-edit-summary { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.course-edit-summary-lead {
font-size: 1.08rem;
color: var(--text-dim);
margin: 0 0 22px;
}
.course-edit-summary-list {
list-style: none;
counter-reset: gist;
padding: 0;
margin: 0 0 22px;
display: grid;
gap: 18px;
}
.course-edit-summary-list li {
counter-increment: gist;
position: relative;
padding-left: 56px;
font-size: 1.08rem;
line-height: 1.6;
color: var(--text);
min-height: 40px;
}
.course-edit-summary-list li::before {
content: counter(gist);
position: absolute;
left: 0; top: -2px;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: rgba(253,200,0,0.10);
border: 1px solid rgba(253,200,0,0.30);
border-radius: 999px;
color: var(--accent);
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 0.95rem;
}
.course-edit-summary-note {
margin: 0;
color: var(--text-mute);
font-size: 0.95rem;
font-style: italic;
}
/* The form — quiet, narrow, integrated, not a centerpiece card */
.course-edit-gate {
background:
radial-gradient(560px 360px at 50% 0%, rgba(253,200,0,0.06), transparent 65%),
var(--bg);
}
.course-edit-gate .course-edit-h2 { margin-bottom: 12px; }
.course-edit-gate-sub {
margin: 0 0 24px;
color: var(--text-dim);
font-size: 1.05rem;
}
.course-edit-error {
background: rgba(255,112,112,0.08);
border: 1px solid rgba(255,112,112,0.35);
color: #ff9b9b;
padding: 12px 14px;
border-radius: 10px;
margin: 0 0 18px;
font-size: 0.92rem;
}
.course-edit-form {
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-start;
position: relative;
}
.course-edit-form-row {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 10px;
width: 100%;
}
.course-edit-form input[type=text],
.course-edit-form input[type=email] {
font-family: 'Inter', sans-serif;
font-size: 1rem;
padding: 14px 16px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
color: var(--text);
width: 100%;
transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.course-edit-form input::placeholder { color: var(--text-mute); }
.course-edit-form input:focus {
outline: none;
border-color: var(--accent);
background: rgba(255,255,255,0.05);
box-shadow: 0 0 0 3px rgba(253,200,0,0.12);
}
.course-edit-hp {
position: absolute !important; left: -9999px !important;
width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.course-edit-form-note {
margin: 4px 0 0;
font-size: 0.88rem;
color: var(--text-mute);
}
.course-edit-unlocked .course-edit-cta-row {
display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
}
@media (max-width: 560px) {
.course-edit-form-row { grid-template-columns: 1fr; }
}
/* Sign-off + signature */
.course-edit-sign p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-dim);
margin: 0 0 18px;
}
.course-edit-signature {
display: flex;
align-items: center;
gap: 18px;
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
.course-edit-signature-img {
height: 56px;
width: auto;
filter: brightness(1.6) contrast(1.1);
opacity: 0.85;
}
.course-edit-signature-name strong {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.05rem;
color: var(--text);
}
.course-edit-signature-name span {
display: block;
font-size: 0.85rem;
color: var(--text-mute);
margin-top: 2px;
}
@media (max-width: 640px) {
.course-edit-mod { grid-template-columns: 64px 1fr; gap: 18px; }
.course-edit-mod-num { font-size: 2.4rem; }
}
/* ----------- PER-MODULE READING VIEW (structured) ----------- */
.course-mod {
background: var(--bg);
--module-accent: var(--accent);
}
/* Sticky progress strip */
.course-progress {
position: sticky;
top: 60px;
z-index: 50;
background: rgba(11,18,32,0.85);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
padding: 10px 0;
}
.course-progress-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.course-progress-back,
.course-progress-full {
font-size: 0.82rem;
color: var(--text-dim);
white-space: nowrap;
}
.course-progress-back:hover,
.course-progress-full:hover { color: var(--accent); }
.course-progress-dots {
list-style: none;
display: flex;
gap: 6px;
padding: 0;
margin: 0;
}
.course-progress-dot a {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 0.82rem;
border: 1px solid var(--line);
color: var(--text-mute);
transition: all .2s var(--ease);
}
.course-progress-dot.is-current a {
background: var(--dot-color);
border-color: var(--dot-color);
color: #0B1220;
transform: scale(1.08);
}
.course-progress-dot.is-done a {
border-color: var(--dot-color);
color: var(--dot-color);
}
.course-progress-dot a:hover { transform: scale(1.06); }
@media (max-width: 640px) {
.course-progress-back, .course-progress-full { display: none; }
.course-progress-inner { justify-content: center; }
}
/* Hero */
.course-mod-hero {
padding: clamp(64px, 8vw, 110px) 0 clamp(40px, 5vw, 64px);
background:
radial-gradient(640px 460px at 92% 0%, color-mix(in srgb, var(--module-accent) 16%, transparent), transparent 65%),
var(--bg);
position: relative;
}
.course-mod-hero-inner {
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: center;
max-width: 920px;
margin: 0 auto;
}
.course-mod-num {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(4rem, 6vw + 2rem, 7rem);
font-weight: 700;
color: var(--module-accent);
line-height: 0.9;
letter-spacing: -0.05em;
}
.course-mod-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.course-mod-head h1 {
margin: 0 0 18px;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.8rem, 2.5vw + 1rem, 2.8rem);
letter-spacing: -0.025em;
line-height: 1.1;
}
.course-mod-promise {
font-size: 1.1rem;
line-height: 1.55;
color: var(--text-dim);
border-left: 3px solid var(--module-accent);
padding-left: 18px;
}
.course-mod-promise p { margin: 0; }
@media (max-width: 640px) {
.course-mod-hero-inner { grid-template-columns: 1fr; gap: 14px; }
.course-mod-num { font-size: 4rem; }
}
/* Block container — used for objectives, mistakes, exercise, recap */
.course-block { padding: clamp(28px, 4vw, 48px) 0; }
.course-block-inner {
max-width: 720px;
margin: 0 auto;
}
.course-block-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.course-block-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 10px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 1.05rem;
background: color-mix(in srgb, var(--module-accent) 18%, transparent);
color: var(--module-accent);
border: 1px solid color-mix(in srgb, var(--module-accent) 35%, transparent);
}
.course-block-head h2 {
margin: 0;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.25rem;
letter-spacing: -0.01em;
}
.course-block-body { font-size: 1rem; line-height: 1.65; }
.course-block-body p { margin: 0 0 12px; color: var(--text-dim); }
.course-block-body ul { padding-left: 22px; margin: 0; }
.course-block-body ul li { margin-bottom: 10px; color: var(--text); }
.course-block-body strong { color: var(--text); }
.course-block-objectives .course-block-body {
background: rgba(255,255,255,0.025);
border: 1px solid var(--line);
border-left: 3px solid var(--module-accent);
padding: 22px 26px;
border-radius: 0 12px 12px 0;
}
.course-block-mistakes .course-block-body {
background: rgba(255,112,112,0.06);
border: 1px solid rgba(255,112,112,0.25);
padding: 22px 26px;
border-radius: 12px;
}
.course-block-mistakes .course-block-icon {
background: rgba(255,112,112,0.15);
color: #ff9b9b;
border-color: rgba(255,112,112,0.35);
}
.course-block-exercise .course-block-body {
background: color-mix(in srgb, var(--module-accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--module-accent) 30%, transparent);
padding: 26px 30px;
border-radius: 14px;
font-size: 1.05rem;
}
.course-block-exercise .course-block-body p { color: var(--text); }
.course-block-recap .course-block-body {
background: var(--bg-2);
border: 1px solid var(--line);
padding: 22px 26px;
border-radius: 12px;
}
.course-block-recap .course-block-body ul li::marker { color: var(--module-accent); }
/* Lesson body — long-form prose with drop cap and rhythmic h4 subheads */
.course-lesson { padding: clamp(40px, 6vw, 80px) 0; }
.course-lesson-inner { max-width: 720px; margin: 0 auto; }
.course-lesson-body {
font-size: 1.08rem;
line-height: 1.75;
color: var(--text);
}
.course-lesson-body > p:first-of-type::first-letter {
font-family: 'Space Grotesk', sans-serif;
font-size: 4.4em;
font-weight: 700;
float: left;
line-height: 0.85;
margin: 6px 14px 0 0;
color: var(--module-accent);
}
.course-lesson-body p {
margin: 0 0 22px;
}
.course-lesson-body h4 {
margin: 44px 0 14px;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.18rem;
letter-spacing: -0.005em;
color: var(--module-accent);
position: relative;
padding-left: 14px;
}
.course-lesson-body h4::before {
content: '';
position: absolute;
left: 0; top: 0.35em; bottom: 0.35em;
width: 3px;
background: var(--module-accent);
border-radius: 2px;
}
.course-lesson-body ul {
margin: 0 0 24px;
padding-left: 22px;
}
.course-lesson-body ul li { margin-bottom: 8px; }
.course-lesson-body strong { color: var(--text); font-weight: 600; }
.course-lesson-body em { color: var(--text-dim); }
.course-lesson-body blockquote {
margin: 28px 0;
padding: 16px 24px;
border-left: 4px solid var(--module-accent);
background: color-mix(in srgb, var(--module-accent) 8%, transparent);
color: var(--text);
border-radius: 0 12px 12px 0;
font-size: 1.1rem;
font-style: italic;
line-height: 1.55;
}
.course-lesson-body hr {
border: 0;
height: 1px;
background: var(--line);
margin: 40px auto;
max-width: 120px;
}
.course-lesson-body a {
color: var(--module-accent);
border-bottom: 1px solid color-mix(in srgb, var(--module-accent) 50%, transparent);
}
.course-lesson-body a:hover { border-bottom-color: var(--module-accent); }
/* Pager (prev / next) */
.course-pager {
border-top: 1px solid var(--line);
background: var(--bg-2);
padding: clamp(32px, 4vw, 56px) 0;
}
.course-pager-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 920px;
margin: 0 auto;
}
.course-pager a {
display: block;
padding: 22px 26px;
background: var(--bg);
border: 1px solid var(--line);
border-top: 3px solid var(--dot-color, var(--accent));
border-radius: var(--radius-lg);
transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.course-pager a:hover {
border-color: var(--dot-color, var(--accent));
transform: translateY(-2px);
}
.course-pager-prev { text-align: left; }
.course-pager-next { text-align: right; }
.course-pager-label {
display: block;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
margin-bottom: 6px;
}
.course-pager-title {
display: block;
font-family: 'Space Grotesk', sans-serif;
color: var(--text);
font-size: 1.05rem;
letter-spacing: -0.01em;
}
@media (max-width: 640px) {
.course-pager-inner { grid-template-columns: 1fr; }
.course-pager-next { text-align: left; }
}
/* ----------- FULL ONE-PAGE READING VIEW ----------- */
.course-read { background: var(--bg); }
.course-read-hero {
padding: clamp(110px, 14vw, 160px) 0 clamp(28px, 4vw, 48px);
background:
radial-gradient(640px 460px at 92% 0%, rgba(255,199,0,0.10), transparent 65%),
radial-gradient(620px 480px at 8% 100%, rgba(79,70,229,0.14), transparent 60%),
var(--bg);
}
.course-read-hero h1 {
margin: 14px 0 14px;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2.2rem, 3.5vw + 1rem, 3.4rem);
letter-spacing: -0.03em;
line-height: 1.05;
max-width: 760px;
}
.course-read-meta { color: var(--text-mute); font-size: 0.92rem; }
.course-read-toc {
position: sticky;
top: 60px;
z-index: 30;
padding: 14px 0;
background: rgba(11,18,32,0.85);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.course-toc {
display: flex;
gap: 8px;
flex-wrap: wrap;
font-size: 0.82rem;
}
.course-toc a {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--text-dim);
white-space: nowrap;
transition: border-color .2s var(--ease), color .2s var(--ease);
}
.course-toc a:hover {
border-color: rgba(253,200,0,0.45);
color: var(--accent);
}
.course-body { padding: clamp(48px, 6vw, 80px) 0; }
.course-body-inner {
max-width: 760px;
margin: 0 auto;
}
.course-section {
padding: clamp(40px, 5vw, 72px) 0;
border-top: 1px solid var(--line);
}
.course-section:first-child { border-top: 0; padding-top: 0; }
.course-section > h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
letter-spacing: -0.025em;
margin: 0 0 28px;
}
.course-section h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.18rem;
letter-spacing: -0.005em;
color: var(--accent);
margin: 32px 0 12px;
}
.course-section h4 {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.05rem;
color: var(--accent);
margin: 28px 0 10px;
}
.course-section p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text);
margin: 0 0 18px;
}
.course-section ul {
margin: 0 0 22px;
padding-left: 22px;
}
.course-section ul li {
margin-bottom: 8px;
color: var(--text);
}
.course-section strong { color: var(--text); font-weight: 600; }
.course-section em { color: var(--text-dim); font-style: italic; }
.course-section blockquote {
margin: 24px 0;
padding: 14px 22px;
border-left: 3px solid var(--accent);
background: rgba(253,200,0,0.05);
color: var(--text-dim);
border-radius: 0 10px 10px 0;
font-style: italic;
}
.course-section hr {
border: 0;
height: 1px;
background: var(--line);
margin: 36px auto;
max-width: 120px;
}
.course-section a {
color: var(--accent);
border-bottom: 1px solid rgba(253,200,0,0.4);
}
.course-section a:hover { border-bottom-color: var(--accent); }
/* Course landing — neutral publisher block (replaces the old founder signature) */
.course-edit-publisher {
margin: 28px 0 0;
padding-top: 22px;
border-top: 1px solid var(--line);
font-size: 0.95rem;
color: var(--text-mute);
line-height: 1.6;
}
.course-edit-publisher strong { color: var(--text); }
.course-edit-publisher a { color: var(--accent); border-bottom: 1px solid rgba(253,200,0,0.3); }
.course-edit-publisher a:hover { border-bottom-color: var(--accent); }
/* ============================================================
DOMAIN EMAIL LANDING PAGE
============================================================ */
.email-page { background: var(--bg); }
/* HERO */
.email-hero {
position: relative;
padding: clamp(110px, 14vw, 160px) 0 clamp(48px, 7vw, 88px);
background:
radial-gradient(640px 460px at 92% 0%, rgba(94,180,255,0.12), transparent 65%),
radial-gradient(620px 480px at 8% 100%, rgba(253,200,0,0.10), transparent 60%),
var(--bg);
}
.email-hero-inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: center;
}
.email-hero-copy h1 {
margin: 14px 0 22px;
font-size: clamp(2.2rem, 3.5vw + 1rem, 3.6rem);
letter-spacing: -0.03em;
line-height: 1.05;
}
.email-strike {
text-decoration: line-through;
text-decoration-color: rgba(255,112,112,0.6);
text-decoration-thickness: 4px;
color: var(--text-mute);
display: inline-block;
min-width: 11.5ch;
text-align: left;
transition: opacity .22s ease;
white-space: nowrap;
}
.email-hero-sub {
font-size: 1.15rem;
line-height: 1.55;
color: var(--text-dim);
margin: 0 0 28px;
max-width: 540px;
}
.email-hero-sub strong { color: var(--accent); font-weight: 600; }
.email-hero-ctas {
display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.email-hero-trust {
display: flex; gap: 18px; flex-wrap: wrap;
font-size: 0.88rem; color: var(--text-mute);
}
.email-hero-trust span { white-space: nowrap; }
/* Hero mock-up of domain email inbox */
.email-mock-window {
background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 30px 60px -25px rgba(0,0,0,0.5);
}
.email-mock-bar {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px;
background: rgba(255,255,255,0.03);
border-bottom: 1px solid var(--line);
}
.email-mock-bar > span {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(255,255,255,0.18);
}
.email-mock-bar > span:nth-child(1) { background: #ff5f57; }
.email-mock-bar > span:nth-child(2) { background: #febc2e; }
.email-mock-bar > span:nth-child(3) { background: #28c840; }
.email-mock-url {
flex: 1;
text-align: center;
font-size: 0.78rem;
color: var(--text-mute);
font-family: 'Inter', sans-serif;
}
.email-mock-row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.email-mock-row:last-child { border-bottom: 0; }
.email-mock-avatar {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
color: #FFFFFF;
font-size: 0.95rem;
}
.email-mock-line strong {
display: block; color: var(--text); font-size: 0.92rem;
}
.email-mock-line em {
display: block;
font-style: normal;
color: var(--accent);
font-size: 0.78rem;
margin: 1px 0 4px;
}
.email-mock-line span {
display: block; color: var(--text-dim); font-size: 0.85rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 880px) {
.email-hero-inner { grid-template-columns: 1fr; gap: 36px; }
.email-hero-copy { order: 1; }
.email-hero-mock { order: 2; }
}
/* WHY IT MATTERS */
.email-why {
padding: clamp(64px, 8vw, 110px) 0;
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.email-reasons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
max-width: 1000px;
margin: 0 auto;
}
.email-reason {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
position: relative;
border-top: 3px solid var(--c);
}
.email-reason-icon {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--c);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.email-reason h3 {
margin: 0 0 10px;
font-size: 1.15rem;
letter-spacing: -0.01em;
}
.email-reason p { margin: 0; color: var(--text-dim); line-height: 1.6; }
@media (max-width: 760px) {
.email-reasons { grid-template-columns: 1fr; }
}
/* WHAT'S INCLUDED */
.email-features { padding: clamp(64px, 8vw, 110px) 0; }
.email-feature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
max-width: 1100px;
margin: 0 auto;
}
.email-feature {
padding: 22px 22px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.email-feature:hover {
border-color: rgba(253,200,0,0.3);
transform: translateY(-2px);
}
.email-feature h3 {
margin: 0 0 8px;
font-size: 1rem;
letter-spacing: -0.005em;
color: var(--accent);
}
.email-feature p {
margin: 0;
color: var(--text-dim);
font-size: 0.9rem;
line-height: 1.55;
}
@media (max-width: 980px) { .email-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .email-feature-grid { grid-template-columns: 1fr; } }
/* WHAT WE HANDLE */
.email-handle {
padding: clamp(64px, 8vw, 110px) 0;
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.email-handle-inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 56px;
align-items: start;
}
.email-handle h2 { margin: 14px 0 18px; }
.email-handle p { color: var(--text-dim); line-height: 1.65; max-width: 460px; }
.email-handle-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 14px;
}
.email-handle-list li {
position: relative;
padding: 16px 20px 16px 50px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 12px;
color: var(--text-dim);
line-height: 1.55;
font-size: 0.96rem;
}
.email-handle-list li::before {
content: '✓';
position: absolute;
left: 18px; top: 16px;
width: 22px; height: 22px;
background: rgba(52,211,153,0.18);
color: #34D399;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.78rem;
font-weight: 700;
}
.email-handle-list li strong { color: var(--text); font-weight: 600; }
@media (max-width: 880px) { .email-handle-inner { grid-template-columns: 1fr; gap: 28px; } }
/* PRICING + CALCULATOR */
.email-pricing { padding: clamp(64px, 8vw, 110px) 0; }
.email-pricing-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 22px;
align-items: center;
max-width: 760px;
margin: 0 auto 48px;
}
.email-price-block {
padding: 32px 28px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
text-align: center;
}
.email-price-label {
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
margin-bottom: 12px;
}
.email-price-amount {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2.2rem, 3vw + 1rem, 3rem);
font-weight: 700;
color: var(--accent);
letter-spacing: -0.025em;
line-height: 1;
margin-bottom: 12px;
}
.email-price-amount span {
font-size: 0.45em;
color: var(--text-mute);
font-weight: 500;
margin-left: 4px;
}
.email-price-note {
font-size: 0.88rem;
color: var(--text-dim);
}
.email-price-divider {
font-family: 'Space Grotesk', sans-serif;
font-size: 2rem;
color: var(--text-mute);
font-weight: 300;
text-align: center;
}
@media (max-width: 760px) {
.email-pricing-grid { grid-template-columns: 1fr; }
.email-price-divider { padding: 8px 0; }
}
.email-calc {
max-width: 720px;
margin: 0 auto;
padding: clamp(28px, 4vw, 44px);
background: linear-gradient(135deg, rgba(94,180,255,0.08), rgba(94,180,255,0.02));
border: 1px solid rgba(94,180,255,0.25);
border-radius: var(--radius-lg);
}
.email-calc-head { text-align: center; margin-bottom: 28px; }
.email-calc-head h3 {
margin: 8px 0 0;
font-size: 1.4rem;
letter-spacing: -0.015em;
}
.email-calc-body {
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
align-items: center;
margin-bottom: 24px;
}
.email-calc-control {
display: flex; align-items: center; gap: 8px;
}
.email-calc-btn {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--bg);
border: 1px solid var(--line);
color: var(--accent);
font-family: 'Space Grotesk', sans-serif;
font-size: 1.4rem;
font-weight: 600;
cursor: pointer;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.email-calc-btn:hover {
border-color: var(--accent);
background: rgba(253,200,0,0.06);
}
.email-calc-input {
width: 80px; height: 44px;
text-align: center;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 1.1rem;
}
.email-calc-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(253,200,0,0.12);
}
.email-calc-result { text-align: right; }
.email-calc-total {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: clamp(2rem, 2vw + 1rem, 2.6rem);
letter-spacing: -0.025em;
color: var(--accent);
line-height: 1;
}
.email-calc-currency { font-size: 0.7em; }
.email-calc-period {
font-size: 0.4em;
color: var(--text-mute);
font-weight: 500;
margin-left: 4px;
}
.email-calc-breakdown {
margin-top: 6px;
font-size: 0.85rem;
color: var(--text-mute);
}
@media (max-width: 540px) {
.email-calc-body { grid-template-columns: 1fr; gap: 18px; }
.email-calc-control { justify-content: center; }
.email-calc-result { text-align: center; }
}
/* ORDER FORM */
.email-order {
padding: clamp(64px, 8vw, 110px) 0;
background: var(--bg-2);
border-top: 1px solid var(--line);
}
.email-order-inner { max-width: 720px; }
.email-order-success {
padding: 32px;
background: rgba(52,211,153,0.10);
border: 1px solid rgba(52,211,153,0.35);
border-radius: var(--radius-lg);
text-align: center;
}
.email-order-success h3 {
margin: 0 0 10px;
color: #34D399;
font-size: 1.4rem;
}
.email-order-success p { margin: 0; color: var(--text-dim); }
.email-order-error {
padding: 14px 18px;
background: rgba(255,112,112,0.10);
border: 1px solid rgba(255,112,112,0.35);
color: #ff9b9b;
border-radius: 10px;
margin-bottom: 22px;
}
.email-order-form {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(24px, 3vw, 40px);
position: relative;
}
.email-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 18px;
}
.email-order-form label {
display: block;
}
.email-order-form label > span {
display: block;
font-size: 0.85rem;
color: var(--text-dim);
margin-bottom: 6px;
font-weight: 500;
}
.email-order-form input[type=text],
.email-order-form input[type=email],
.email-order-form input[type=tel],
.email-order-form input[type=number],
.email-order-form textarea {
width: 100%;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font-family: 'Inter', sans-serif;
font-size: 0.96rem;
transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.email-order-form input:focus,
.email-order-form textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(255,255,255,0.05);
box-shadow: 0 0 0 3px rgba(253,200,0,0.12);
}
.email-form-block {
display: block;
margin-bottom: 18px;
}
.email-form-check {
display: flex !important;
align-items: flex-start;
gap: 10px;
margin-bottom: 18px;
cursor: pointer;
}
.email-form-check input[type=checkbox] {
margin-top: 4px;
flex-shrink: 0;
accent-color: var(--accent);
}
.email-form-check span {
font-size: 0.95rem;
color: var(--text-dim);
line-height: 1.5;
}
.email-form-summary {
margin: 24px 0 18px;
padding: 18px 22px;
background: rgba(253,200,0,0.06);
border: 1px solid rgba(253,200,0,0.22);
border-radius: 12px;
}
.email-form-summary > div {
display: flex; justify-content: space-between; align-items: baseline;
}
.email-form-summary-label {
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-mute);
}
.email-form-summary-amount {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 1.4rem;
color: var(--accent);
letter-spacing: -0.015em;
}
.email-form-summary-note {
margin: 8px 0 0;
font-size: 0.82rem;
color: var(--text-mute);
}
.email-form-disclaimer {
margin: 14px 0 0;
font-size: 0.82rem;
color: var(--text-mute);
text-align: center;
}
@media (max-width: 640px) {
.email-form-row { grid-template-columns: 1fr; }
}
/* FAQ */
.email-faq { padding: clamp(64px, 8vw, 110px) 0; }
.email-faq-list {
max-width: 760px;
margin: 0 auto;
display: grid;
gap: 12px;
}
.email-faq-item {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 12px;
padding: 0;
transition: border-color .25s var(--ease);
}
.email-faq-item[open] { border-color: rgba(253,200,0,0.35); }
.email-faq-item summary {
cursor: pointer;
padding: 18px 24px;
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
color: var(--text);
list-style: none;
position: relative;
padding-right: 50px;
}
.email-faq-item summary::-webkit-details-marker { display: none; }
.email-faq-item summary::after {
content: '+';
position: absolute;
right: 22px; top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: var(--accent);
font-weight: 300;
line-height: 1;
transition: transform .25s var(--ease);
}
.email-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.email-faq-item p {
margin: 0;
padding: 0 24px 22px;
color: var(--text-dim);
line-height: 1.65;
font-size: 0.96rem;
}
/* ============================================================
DOMAIN EMAIL — editorial layout (uses .course-edit-* base)
============================================================ */
.email-edit { background: var(--bg); overflow-x: hidden; }
.email-edit .course-edit-piece { padding-bottom: clamp(48px, 7vw, 96px); }
/* Hero title — same scale as course title but shorter line-height
because of the inline strike-through cycling */
.email-edit-title {
letter-spacing: -0.035em;
line-height: 1.05;
}
.email-edit-title em {
display: block;
font-style: italic;
font-weight: 400;
color: var(--accent);
margin-top: 4px;
}
/* Pricing block — editorial, not a card grid */
.email-edit-price-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.email-edit-price {
margin: 28px 0 22px;
padding: 0;
display: grid;
gap: 18px;
}
.email-edit-price > div { margin: 0; padding: 0; }
.email-edit-price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
border-top: 1px solid var(--line);
}
.email-edit-price-row:first-child { border-top: 0; }
.email-edit-price-row dt {
font-size: 1.05rem;
color: var(--text);
margin: 0;
}
.email-edit-price-row dd {
margin: 0;
text-align: right;
white-space: nowrap;
}
.email-edit-price-row dd strong {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.7rem, 1.5vw + 1rem, 2.2rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--accent);
}
.email-edit-price-row dd span {
font-size: 0.92rem;
color: var(--text-mute);
margin-left: 6px;
}
.email-edit-price-note {
margin: 0 0 32px;
color: var(--text-mute);
font-size: 0.95rem;
line-height: 1.55;
font-style: italic;
}
/* Inline calculator — minimal, editorial-feel */
.email-edit-calc {
background: rgba(94,180,255,0.05);
border-left: 3px solid #5EB4FF;
padding: 22px 24px;
border-radius: 0 12px 12px 0;
}
.email-edit-calc-inner {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.email-edit-calc-label {
font-size: 0.95rem;
color: var(--text-dim);
}
.email-edit-calc-control {
display: inline-flex;
align-items: center;
gap: 8px;
}
.email-edit-calc-suffix {
font-size: 0.92rem;
color: var(--text-mute);
margin-left: 4px;
}
.email-edit-calc-total {
font-size: 1.1rem;
color: var(--text);
margin-left: auto;
}
.email-edit-calc-total strong {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--accent);
letter-spacing: -0.01em;
}
.email-edit-calc-breakdown {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed rgba(94,180,255,0.25);
font-size: 0.85rem;
color: var(--text-mute);
}
/* Order form — uses .course-edit-form base, plus extras */
.email-edit-order-section { background: var(--bg); }
.email-edit-form-row-3 {
grid-template-columns: 1.4fr 1fr !important;
}
.email-edit-textarea {
display: block;
margin-bottom: 14px;
}
.email-edit-textarea textarea {
width: 100%;
font-family: 'Inter', sans-serif;
font-size: 0.98rem;
padding: 14px 16px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
color: var(--text);
resize: vertical;
min-height: 80px;
transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.email-edit-textarea textarea::placeholder { color: var(--text-mute); }
.email-edit-textarea textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(255,255,255,0.05);
box-shadow: 0 0 0 3px rgba(253,200,0,0.12);
}
.email-edit-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 4px 0 18px;
cursor: pointer;
font-size: 0.95rem;
color: var(--text-dim);
line-height: 1.5;
}
.email-edit-checkbox input[type=checkbox] {
margin-top: 4px;
flex-shrink: 0;
accent-color: var(--accent);
}
.email-edit-form-summary {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 14px 0;
margin: 8px 0 18px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.email-edit-form-summary span {
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-mute);
}
.email-edit-form-summary strong {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.3rem;
color: var(--accent);
font-weight: 700;
letter-spacing: -0.01em;
}
.email-edit-success {
padding: 24px 28px;
background: rgba(52,211,153,0.08);
border-left: 3px solid #34D399;
border-radius: 0 12px 12px 0;
font-size: 1.05rem;
line-height: 1.6;
color: var(--text);
}
.email-edit-success strong { color: #34D399; }
.email-edit-success p { margin: 0; }
/* FAQ — editorial accordion, simpler than the old grid version */
.email-edit-faq {
display: grid;
gap: 0;
margin-top: 14px;
}
.email-edit-faq-item {
border-top: 1px solid var(--line);
padding: 0;
transition: border-color .2s var(--ease);
}
.email-edit-faq-item:last-child {
border-bottom: 1px solid var(--line);
}
.email-edit-faq-item summary {
cursor: pointer;
list-style: none;
padding: 22px 36px 22px 0;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.05rem;
letter-spacing: -0.005em;
color: var(--text);
position: relative;
}
.email-edit-faq-item summary::-webkit-details-marker { display: none; }
.email-edit-faq-item summary::after {
content: '+';
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: var(--accent);
font-weight: 300;
line-height: 1;
transition: transform .25s var(--ease);
}
.email-edit-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.email-edit-faq-item p {
margin: 0;
padding: 0 0 22px;
color: var(--text-dim);
line-height: 1.65;
font-size: 1rem;
}
/* Mobile rules — single column, no overflow */
@media (max-width: 640px) {
.email-edit-title { font-size: clamp(2rem, 8vw + 0.5rem, 3rem); }
.email-edit-price-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.email-edit-price-row dd { text-align: left; }
.email-edit-calc-inner {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.email-edit-calc-total { margin-left: 0; text-align: center; }
.email-edit-calc-control { justify-content: center; }
.email-edit-form-row-3 { grid-template-columns: 1fr !important; }
}
/* ============================================================
DOMAIN EMAIL — uses .fcard-* base, plus minimal extras
============================================================ */
/* Hero preview — shows what branded email looks like (right column).
Mirrors fcard-hero-preview-card visual rhythm but stacked rows. */
.email-hero-preview { perspective: 1200px; }
.email-preview-card {
background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 30px 60px -25px rgba(0,0,0,0.5);
transform: rotate(-1deg);
transition: transform .35s var(--ease);
}
.email-preview-card:hover { transform: rotate(0); }
.email-preview-row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.email-preview-row:last-child { border-bottom: 0; }
.email-preview-avatar {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
color: #FFFFFF;
font-size: 0.95rem;
}
.email-preview-body strong {
display: block;
color: var(--text);
font-size: 0.92rem;
}
.email-preview-body em {
display: block;
font-style: normal;
color: var(--accent);
font-size: 0.78rem;
margin: 1px 0 4px;
}
.email-preview-body span {
display: block;
color: var(--text-dim);
font-size: 0.85rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Pricing section rows — clean, editorial, not card-grid */
.email-preview { background: var(--bg-2); }
.email-pricing-intro {
text-align: center;
color: var(--text-dim);
font-size: 1.05rem;
margin: 0 auto 36px;
max-width: 580px;
}
.email-pricing-rows {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
max-width: 920px;
margin: 0 auto 32px;
}
.email-pricing-row {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px 28px;
text-align: left;
transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.email-pricing-row:hover {
border-color: rgba(253,200,0,0.35);
transform: translateY(-2px);
}
.email-pricing-row-label {
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
margin-bottom: 14px;
}
.email-pricing-row-price {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2rem, 2.5vw + 1rem, 2.6rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--accent);
line-height: 1;
margin-bottom: 14px;
}
.email-pricing-row-price span {
font-size: 0.4em;
color: var(--text-mute);
font-weight: 500;
margin-left: 6px;
}
.email-pricing-row-note {
font-size: 0.92rem;
color: var(--text-dim);
line-height: 1.55;
}
/* Calculator — simpler, inline row layout (overrides earlier grid version) */
.email-preview .email-calc {
max-width: 920px;
margin: 0 auto 32px;
background: linear-gradient(135deg, rgba(94,180,255,0.08), rgba(94,180,255,0.02));
border: 1px solid rgba(94,180,255,0.25);
border-radius: 14px;
padding: 22px 26px;
display: block;
}
.email-calc-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.email-calc-label {
font-size: 0.92rem;
color: var(--text-dim);
}
.email-calc-suffix {
font-size: 0.92rem;
color: var(--text-mute);
margin-left: 2px;
}
.email-preview .email-calc-total {
margin-left: auto;
font-size: 1.08rem;
color: var(--text);
text-align: right;
letter-spacing: 0;
}
.email-preview .email-calc-total strong {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
color: var(--accent);
font-size: 1.3rem;
letter-spacing: -0.01em;
}
.email-preview .email-calc-breakdown {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed rgba(94,180,255,0.25);
font-size: 0.85rem;
color: var(--text-mute);
}
/* Modal extras (uses fcard-modal base, just adds wider form variants) */
.email-modal .fcard-modal-dialog { max-width: 560px; }
.email-modal-sub {
margin: 4px 0 18px;
color: var(--text-dim);
font-size: 0.95rem;
line-height: 1.55;
}
.email-modal-error {
background: rgba(255,112,112,0.10);
border: 1px solid rgba(255,112,112,0.35);
color: #ff9b9b;
padding: 12px 14px;
border-radius: 10px;
margin: 0 0 14px;
font-size: 0.92rem;
}
.email-modal-form textarea {
width: 100%;
font-family: 'Inter', sans-serif;
font-size: 0.96rem;
padding: 12px 14px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
color: var(--text);
resize: vertical;
min-height: 70px;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.email-modal-form textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(255,255,255,0.06);
}
.email-modal-form input[type=tel],
.email-modal-form input[type=number] {
font-family: 'Inter', sans-serif;
font-size: 0.96rem;
padding: 12px 14px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
color: var(--text);
width: 100%;
}
.email-modal-form input:focus { outline: none; border-color: var(--accent); }
.email-modal-check {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 10px !important;
font-size: 0.9rem !important;
color: var(--text-dim) !important;
cursor: pointer;
}
.email-modal-check input[type=checkbox] {
margin-top: 4px;
flex-shrink: 0;
accent-color: var(--accent);
}
.email-modal-summary {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 14px 0;
margin: 4px 0 6px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.email-modal-summary .label {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
}
.email-modal-summary strong {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.3rem;
color: var(--accent);
font-weight: 700;
letter-spacing: -0.01em;
}
.email-modal-success {
text-align: center;
padding: 12px 0 6px;
}
.email-modal-success h2 { margin: 0 0 10px; color: #34D399; }
.email-modal-success p { margin: 0 0 22px; color: var(--text-dim); line-height: 1.6; }
/* Section wrappers */
.email-features-section { background: var(--bg); }
.email-faq-section { background: var(--bg-2); }
/* Mobile */
@media (max-width: 760px) {
.email-pricing-rows { grid-template-columns: 1fr; }
.email-calc-row { flex-direction: column; align-items: stretch; }
.email-preview .email-calc-total { margin-left: 0; text-align: center; }
.email-calc-control { justify-content: center; }
.email-preview-card { transform: none; }
}
/* ==========================================================================
Domain Email v3 (.de-*) — landing page shape
Recipe (see DESIGN-REFERENCES.md):
• Posas → architecture: hero → trust → features → showcase → pricing → process → FAQ → form → CTA
• Zubuz → palette + asymmetric hero with calculator visual right
• Sitech → mid-page product visualization (mock email cards)
========================================================================== */
/* Strike line is brand yellow */
.de-page .email-strike {
text-decoration-color: var(--accent);
text-decoration-thickness: 5px;
color: var(--text-mute);
display: inline-block;
min-width: 11.5ch;
white-space: nowrap;
text-align: left;
transition: opacity .22s ease;
}
.de-page section { padding: clamp(64px, 8vw, 110px) 0; }
.de-page section + section:not(.de-trust):not(.de-final-cta) { border-top: 1px solid var(--line); }
.de-page .de-eyebrow,
.de-page .de-section-head .de-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-mute);
}
.de-page .de-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(40px, 5vw, 64px);
}
.de-page .de-section-head h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.75rem, 2.4vw + 1rem, 2.7rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.15;
margin: 0 0 14px;
color: var(--text);
}
.de-page .de-section-head p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-dim);
margin: 0;
}
/* ---- Hero --------------------------------------------------------------- */
.de-hero {
padding-top: clamp(120px, 14vw, 170px) !important;
position: relative;
overflow: hidden;
background:
radial-gradient(720px 520px at 92% 0%, rgba(255,199,0,0.14), transparent 65%),
radial-gradient(680px 540px at 6% 100%, rgba(79,70,229,0.18), transparent 60%),
radial-gradient(560px 400px at 50% 110%, rgba(233,30,99,0.10), transparent 65%),
radial-gradient(420px 360px at 0% 0%, rgba(124,58,237,0.10), transparent 60%),
var(--bg);
}
/* Subtle grid overlay — matches homepage hero atmosphere */
.de-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px;
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 75%);
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 75%);
pointer-events: none;
}
.de-hero > .vcfy-container { position: relative; z-index: 1; }
.de-hero-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(36px, 5vw, 72px);
align-items: center;
}
.de-hero-copy .de-eyebrow { display: block; margin: 0 0 22px; }
.de-hero-copy h1 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2.2rem, 4vw + 1rem, 4rem);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.04;
margin: 0 0 24px;
color: var(--text);
}
.de-lead {
font-size: 1.18rem;
line-height: 1.55;
color: var(--text-dim);
margin: 0 0 28px;
max-width: 56ch;
}
.de-lead strong { color: var(--accent); font-weight: 600; }
.de-hero-ctas {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 0 0 26px;
}
.de-hero-meta {
font-size: 0.92rem;
color: var(--text-mute);
letter-spacing: 0.02em;
}
/* Calculator panel — boxed, slightly elevated */
.de-calc-panel {
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
border: 1px solid var(--line);
border-radius: 16px;
padding: clamp(28px, 3vw, 40px);
box-shadow: 0 30px 60px -30px rgba(0,0,0,0.5);
}
.de-calc-head {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
margin: 0 0 18px;
}
.de-calc-total {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--accent);
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: 2px;
line-height: 1;
margin: 0 0 26px;
}
.de-calc-currency { font-size: clamp(1.4rem, 1.5vw + 0.5rem, 2rem); }
.de-calc-amount { font-size: clamp(2.6rem, 4vw + 1rem, 4.2rem); }
.de-calc-period {
font-size: clamp(1rem, 0.8vw + 0.6rem, 1.2rem);
color: var(--text-mute);
font-weight: 400;
margin-left: 6px;
}
.de-calc-stepper {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 14px;
}
.de-calc-btn {
width: 36px; height: 36px;
border: 1px solid var(--line-strong);
background: transparent;
color: var(--text);
font-size: 1.2rem;
line-height: 1;
border-radius: 50%;
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background .15s ease;
font-family: 'Inter', sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
}
.de-calc-btn:hover { border-color: var(--accent); color: var(--accent); }
.de-calc-input {
width: 56px;
background: var(--bg);
border: 1px solid var(--line-strong);
border-radius: 8px;
color: var(--text);
text-align: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.05rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
padding: 8px 0;
-moz-appearance: textfield;
}
.de-calc-input::-webkit-outer-spin-button,
.de-calc-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.de-calc-input:focus { outline: none; border-color: var(--accent); }
.de-calc-suffix {
font-size: 0.92rem;
color: var(--text-mute);
margin-left: 4px;
}
.de-calc-breakdown {
font-size: 0.9rem;
color: var(--text-mute);
font-variant-numeric: tabular-nums;
line-height: 1.5;
padding: 14px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin: 8px 0 16px;
}
.de-calc-foot {
font-size: 0.86rem;
color: var(--text-mute);
line-height: 1.5;
}
/* ---- Trust strip -------------------------------------------------------- */
.de-trust {
background: rgba(255,255,255,0.02);
padding: 24px 0 !important;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.de-trust-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.de-trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.92rem;
color: var(--text-dim);
font-weight: 500;
}
.de-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--accent);
color: var(--bg);
font-size: 0.72rem;
font-weight: 700;
flex-shrink: 0;
}
/* ---- Features grid ------------------------------------------------------ */
.de-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.de-feature {
background: rgba(255,255,255,0.02);
border: 1px solid var(--line);
border-radius: 14px;
padding: 28px;
transition: border-color .2s ease, transform .2s ease;
}
.de-feature:hover {
border-color: var(--line-strong);
transform: translateY(-2px);
}
.de-feature-num {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--accent);
font-variant-numeric: tabular-nums;
margin: 0 0 18px;
display: inline-block;
padding: 4px 10px;
background: rgba(255,199,0,0.08);
border-radius: 6px;
}
.de-feature h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.18rem;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 10px;
color: var(--text);
}
.de-feature p {
font-size: 0.96rem;
line-height: 1.6;
color: var(--text-dim);
margin: 0;
}
/* ---- Showcase (mock email cards — Sitech-style anchor) ------------------ */
.de-showcase { background: rgba(255,255,255,0.015); }
.de-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 28px;
}
.de-mail-card {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
border: 1px solid var(--line);
border-radius: 12px;
padding: 22px;
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
transition: border-color .2s ease, transform .2s ease;
}
.de-mail-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.de-mail-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,199,0,0.18), rgba(255,199,0,0.08));
border: 1px solid rgba(255,199,0,0.3);
color: var(--accent);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.92rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
}
.de-mail-body { min-width: 0; }
.de-mail-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
}
.de-mail-row strong {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.98rem;
font-weight: 600;
color: var(--text);
}
.de-mail-time {
font-size: 0.78rem;
color: var(--text-mute);
flex-shrink: 0;
}
.de-mail-from {
font-family: 'Inter', sans-serif;
font-size: 0.84rem;
color: var(--accent);
letter-spacing: 0;
font-weight: 500;
margin-bottom: 8px;
word-break: break-all;
}
.de-mail-from .de-at { color: var(--accent); font-weight: 700; }
.de-mail-subject {
font-size: 0.93rem;
color: var(--text);
font-weight: 500;
margin-bottom: 4px;
line-height: 1.35;
}
.de-mail-preview {
font-size: 0.86rem;
color: var(--text-mute);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.de-showcase-note {
text-align: center;
font-size: 0.95rem;
color: var(--text-mute);
max-width: 60ch;
margin: 0 auto;
line-height: 1.6;
}
/* ---- Pricing ------------------------------------------------------------ */
.de-pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 880px;
margin: 0 auto 40px;
}
.de-price-card {
background: rgba(255,255,255,0.025);
border: 1px solid var(--line);
border-radius: 16px;
padding: 32px;
display: flex;
flex-direction: column;
}
.de-price-tag {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
margin: 0 0 14px;
}
.de-price-value {
display: flex;
align-items: baseline;
gap: 2px;
margin: 0 0 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--line);
color: var(--accent);
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
.de-price-currency { font-size: clamp(1.3rem, 1.5vw + 0.4rem, 1.8rem); }
.de-price-amount { font-size: clamp(2.4rem, 4vw + 1rem, 3.8rem); line-height: 1; }
.de-price-period {
font-size: clamp(0.95rem, 0.6vw + 0.6rem, 1.1rem);
color: var(--text-mute);
font-weight: 400;
margin-left: 6px;
}
.de-price-includes {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.de-price-includes li {
position: relative;
padding-left: 26px;
font-size: 0.96rem;
line-height: 1.55;
color: var(--text-dim);
}
.de-price-includes li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,199,0,0.12);
color: var(--accent);
border-radius: 50%;
font-size: 0.72rem;
font-weight: 700;
margin-top: 1px;
}
.de-pricing-cta {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.de-pricing-cta-note {
font-size: 0.9rem;
color: var(--text-mute);
}
/* ---- Process steps ------------------------------------------------------ */
.de-process-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
counter-reset: none;
}
.de-step {
background: rgba(255,255,255,0.02);
border: 1px solid var(--line);
border-radius: 14px;
padding: 28px;
position: relative;
}
.de-step-num {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.6rem;
font-weight: 600;
color: var(--accent);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
margin: 0 0 14px;
line-height: 1;
}
.de-step h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 8px;
color: var(--text);
}
.de-step p {
font-size: 0.94rem;
line-height: 1.55;
color: var(--text-dim);
margin: 0;
}
/* ---- FAQ ---------------------------------------------------------------- */
.de-faq-grid {
max-width: 820px;
margin: 0 auto;
}
.de-faq details {
border-top: 1px solid var(--line);
padding: 22px 0;
}
.de-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.de-faq summary {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 1.05rem;
letter-spacing: -0.01em;
color: var(--text);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 36px;
transition: color .15s ease;
}
.de-faq summary:hover { color: var(--accent); }
.de-faq summary::-webkit-details-marker { display: none; }
.de-faq summary::after {
content: '+';
position: absolute;
right: 0;
top: -3px;
font-size: 1.5rem;
color: var(--text-mute);
font-weight: 300;
transition: color .15s ease;
}
.de-faq summary:hover::after { color: var(--accent); }
.de-faq details[open] summary::after { content: '−'; }
.de-faq details p {
margin: 12px 0 0;
color: var(--text-dim);
line-height: 1.65;
font-size: 0.96rem;
max-width: 70ch;
}
/* ---- Order form --------------------------------------------------------- */
/* Form inherits the homepage .cta-card / .cta-form pattern for consistency.
We only override the max-width (homepage is 560px; this form has more
fields) and add a checkbox row style the homepage form doesn't need. */
.de-error {
border: 1px solid rgba(255,112,112,0.35);
background: rgba(255,112,112,0.06);
color: var(--text);
padding: 14px 18px;
border-radius: 8px;
margin: 0 auto 22px;
max-width: 680px;
font-size: 0.95rem;
}
/* Widen the gold-tinted card on this page only — longer form needs more room */
.de-order .de-form-card.cta-card { max-width: 680px; }
.de-order .de-form.cta-form { max-width: 100%; }
/* Checkbox row — same dark-form aesthetic as the rest of the inputs */
.de-form-check {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.96rem;
color: var(--text-dim);
cursor: pointer;
line-height: 1.5;
padding: 4px 0;
}
.de-form-check input[type=checkbox] {
width: 16px; height: 16px;
margin-top: 3px;
accent-color: var(--accent);
flex-shrink: 0;
}
/* Note under the submit button */
.de-form-note {
font-size: 0.88rem;
color: var(--text-mute);
margin: 8px 0 0;
text-align: left;
}
/* Visible label for the mailbox count (number input defaults to "1" so the
placeholder never shows). Align the row to the bottom so the unlabeled
sibling input lines up with the labeled one's input. */
.de-order .form-row.de-row-labeled { align-items: end; }
.de-labeled-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.de-labeled-field > label {
font-family: 'Inter', sans-serif;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-mute);
padding-left: 4px;
}
/* ---- Final CTA strip ---------------------------------------------------- */
.de-final-cta {
background: linear-gradient(180deg, rgba(255,199,0,0.06), rgba(255,199,0,0.02));
border-top: 1px solid var(--line) !important;
border-bottom: 1px solid var(--line);
}
.de-final-cta-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 32px;
align-items: center;
}
.de-final-cta-grid h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.5rem, 2vw + 0.7rem, 2.2rem);
font-weight: 600;
letter-spacing: -0.025em;
margin: 0 0 8px;
color: var(--text);
}
.de-final-cta-grid p {
font-size: 1rem;
color: var(--text-dim);
margin: 0;
}
.de-final-cta-actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
justify-content: flex-end;
}
.de-final-mail {
font-size: 0.94rem;
color: var(--text-dim);
text-decoration: none;
border-bottom: 1px solid var(--line);
padding-bottom: 2px;
transition: color .15s ease, border-color .15s ease;
}
.de-final-mail:hover { color: var(--accent); border-color: var(--accent); }
/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 980px) {
.de-hero-grid { grid-template-columns: 1fr; gap: 48px; }
.de-feature-grid { grid-template-columns: repeat(2, 1fr); }
.de-cards-grid { grid-template-columns: 1fr; gap: 16px; }
.de-process-grid { grid-template-columns: repeat(2, 1fr); }
.de-final-cta-grid { grid-template-columns: 1fr; text-align: left; }
.de-final-cta-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
.de-feature-grid { grid-template-columns: 1fr; }
.de-pricing-grid { grid-template-columns: 1fr; }
.de-process-grid { grid-template-columns: 1fr; }
.de-form-row { grid-template-columns: 1fr; }
.de-trust-row { flex-direction: column; align-items: flex-start; gap: 10px; }
.de-hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
.de-hero-ctas .btn { width: 100%; text-align: center; }
}
/* ==========================================================================
Domain Email — Light section variation (.de-light)
Mirrors the homepage .trust/.stack/.founder cream-slab pattern. Navy
(#1E3A8A) replaces yellow on this section's chrome (numerals, prices,
hover states), while .btn-accent CTAs stay yellow for conversion contrast.
========================================================================== */
.de-light {
--bg-section: linear-gradient(180deg, #FAF7EE 0%, #F2F4F8 100%);
--text: #0B1220;
--text-dim: rgba(11,18,32,0.72);
--text-mute: rgba(11,18,32,0.55);
--line: rgba(11,18,32,0.08);
--line-strong: rgba(11,18,32,0.14);
--card: #FFFFFF;
--light-accent: #1E3A8A;
background: var(--bg-section) !important;
color: var(--text);
border-top: 1px solid rgba(11,18,32,0.08);
border-bottom: 1px solid rgba(11,18,32,0.08);
}
.de-light h1, .de-light h2, .de-light h3, .de-light h4 { color: var(--text); }
.de-light .de-section-head h2 { color: var(--text); }
.de-light .de-section-head p { color: var(--text-dim); }
/* Feature cards on light — white card, navy numerals, soft shadow */
.de-light .de-feature {
background: #fff;
border: 1px solid rgba(11,18,32,0.08);
box-shadow: 0 1px 0 rgba(11,18,32,0.02), 0 14px 30px -22px rgba(11,18,32,0.18);
}
.de-light .de-feature:hover {
border-color: rgba(30,58,138,0.35);
box-shadow: 0 1px 0 rgba(11,18,32,0.02), 0 18px 36px -20px rgba(30,58,138,0.25);
}
.de-light .de-feature-num {
color: var(--light-accent);
background: rgba(30,58,138,0.08);
}
.de-light .de-feature h3 { color: var(--text); }
.de-light .de-feature p { color: var(--text-dim); }
/* Pricing on light — white card, navy price, navy check icons */
.de-light .de-price-card {
background: #fff;
border: 1px solid rgba(11,18,32,0.08);
box-shadow: 0 1px 0 rgba(11,18,32,0.02), 0 18px 40px -28px rgba(11,18,32,0.2);
}
.de-light .de-price-tag { color: var(--text-mute); }
.de-light .de-price-value {
color: var(--light-accent);
border-bottom-color: rgba(11,18,32,0.08);
}
.de-light .de-price-period { color: var(--text-mute); }
.de-light .de-price-includes li { color: var(--text-dim); }
.de-light .de-price-includes li::before {
background: rgba(30,58,138,0.10);
color: var(--light-accent);
}
.de-light .de-pricing-cta-note { color: var(--text-mute); }
/* Section divider transition: when a light section follows a dark one,
the existing border-top is enough — no extra hairline needed. */
/* Mobile light sections — same overrides apply */
/* H1 second line — "for your business." always breaks to its own line so the
strike-cycle's reserved min-width never creates an awkward gap before "for". */
.de-hero-copy h1 .de-h1-tail { display: block; }
/* ==========================================================================
Domain Email — tiered packages additions
========================================================================== */
/* Tiered pricing grid — 4 columns desktop, 2x2 tablet, 1 column mobile.
(Class kept as `de-pricing-grid-3` for backward compat; now holds 4 cards.) */
.de-pricing-grid.de-pricing-grid-3 {
grid-template-columns: repeat(4, 1fr);
max-width: 1240px;
margin: 0 auto 28px;
align-items: stretch;
gap: 18px;
}
@media (max-width: 1080px) {
.de-pricing-grid.de-pricing-grid-3 {
grid-template-columns: repeat(2, 1fr);
max-width: 720px;
gap: 22px;
}
}
/* Small "no setup fee" reassurance line under each price */
.de-tier-no-setup {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--text-mute);
margin: -14px 0 18px;
text-transform: uppercase;
}
.de-light .de-tier-no-setup { color: var(--text-mute); }
.de-tier .de-tier-mailbox-label {
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
font-weight: 600;
color: var(--text);
margin: -10px 0 6px;
}
.de-tier .de-tier-savings {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,199,0,0.14);
color: var(--accent);
margin: 0 0 14px;
}
.de-light .de-tier .de-tier-savings {
background: rgba(30,58,138,0.12);
color: #1E3A8A;
}
.de-tier .de-tier-tagline {
font-size: 0.95rem;
color: var(--text-dim);
line-height: 1.5;
margin: 0 0 18px;
min-height: 2.6em;
}
.de-tier .de-price-includes { flex: 1; }
.de-tier-cta {
margin-top: 22px;
text-align: center;
}
/* "Need more than 5 mailboxes?" custom-quote line */
.de-pricing-custom-note {
text-align: center;
font-size: 1rem;
color: var(--text-dim);
margin: 0 auto;
max-width: 60ch;
}
.de-light .de-pricing-custom-note { color: var(--text-dim); }
.de-pricing-custom-note a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--accent);
padding-bottom: 1px;
}
.de-light .de-pricing-custom-note a {
color: #1E3A8A;
border-bottom-color: #1E3A8A;
}
/* Calculator "Custom" state — when mailbox count > 5 */
.de-calc-total.is-custom .de-calc-currency,
.de-calc-total.is-custom .de-calc-period { display: none; }
.de-calc-total.is-custom .de-calc-amount {
font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
letter-spacing: -0.02em;
}
/* Success card — replaces the bare "Order received." line */
.de-success-card {
max-width: 640px;
margin: 0 auto;
text-align: center;
padding: clamp(36px, 5vw, 56px) clamp(24px, 3vw, 40px);
background: linear-gradient(180deg, rgba(255,199,0,0.06), rgba(255,199,0,0.015));
border: 1px solid rgba(255,199,0,0.22);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.de-success-card::before {
content: '';
position: absolute;
top: -30%; left: 50%;
transform: translateX(-50%);
width: 480px; height: 360px;
background: radial-gradient(ellipse, rgba(255,199,0,0.10), transparent 65%);
pointer-events: none;
}
.de-success-card > * { position: relative; z-index: 1; }
.de-success-tick {
width: 72px; height: 72px;
border-radius: 50%;
background: rgba(255,199,0,0.14);
border: 1px solid rgba(255,199,0,0.4);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 22px;
}
.de-success-card h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.7rem, 2vw + 0.8rem, 2.2rem);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--text);
margin: 0 0 10px;
}
.de-success-lead {
font-size: 1.08rem;
color: var(--text-dim);
margin: 0 0 28px;
}
.de-success-next {
list-style: none;
padding: 0;
margin: 0 auto 32px;
text-align: left;
max-width: 480px;
display: flex;
flex-direction: column;
gap: 14px;
}
.de-success-next li {
font-size: 0.98rem;
line-height: 1.55;
color: var(--text-dim);
padding-left: 24px;
position: relative;
}
.de-success-next li::before {
content: '→';
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-weight: 700;
}
.de-success-next strong { color: var(--text); font-weight: 600; }
.de-success-next em { font-style: normal; color: var(--accent); font-weight: 500; }
.de-success-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.de-success-mail {
font-size: 0.92rem;
color: var(--text-mute);
text-decoration: none;
border-bottom: 1px solid var(--line);
padding-bottom: 1px;
transition: color .15s ease, border-color .15s ease;
}
.de-success-mail:hover { color: var(--accent); border-color: var(--accent); }
/* Mobile — collapse tier grid */
@media (max-width: 980px) {
.de-pricing-grid.de-pricing-grid-3 { grid-template-columns: 1fr; max-width: 520px; }
}
/* "Most popular" badge + visual prominence on the highlighted tier */
.de-tier.is-popular {
position: relative;
border-color: rgba(30,58,138,0.35);
box-shadow:
0 1px 0 rgba(11,18,32,0.04),
0 28px 56px -28px rgba(30,58,138,0.32);
transform: translateY(-6px);
}
@media (max-width: 980px) {
.de-tier.is-popular { transform: none; }
}
.de-tier-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #1E3A8A, #2C4DB6);
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 6px 18px -6px rgba(30,58,138,0.55);
}
/* On dark sections, the popular badge would still use navy — but if we ever
move the pricing block back to a dark section, swap to yellow for contrast. */
.de-page section:not(.de-light) .de-tier-badge {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: var(--bg);
box-shadow: 0 6px 18px -6px rgba(255,199,0,0.55);
}
.de-page section:not(.de-light) .de-tier.is-popular {
border-color: rgba(255,199,0,0.4);
box-shadow:
0 1px 0 rgba(11,18,32,0.04),
0 28px 56px -28px rgba(255,199,0,0.32);
}
/* ==========================================================================
Domain Email — "Why your business deserves real email" section
Sits on the dark theme between trust strip and features. Cards differ
from .de-feature by a yellow accent rule under each H3 instead of the
numeric pill, so the two grids feel related but distinct.
========================================================================== */
.de-deserves-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 44px;
}
.de-deserves-card {
background: rgba(255,255,255,0.025);
border: 1px solid var(--line);
border-radius: 14px;
padding: 28px;
transition: border-color .2s ease, transform .2s ease, background .2s ease;
position: relative;
}
.de-deserves-card::before {
content: '';
position: absolute;
top: 28px;
left: 28px;
width: 28px;
height: 3px;
background: var(--accent);
border-radius: 2px;
}
.de-deserves-card:hover {
border-color: rgba(255,199,0,0.35);
background: rgba(255,255,255,0.035);
transform: translateY(-2px);
}
.de-deserves-card h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.18rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.25;
margin: 22px 0 12px;
color: var(--text);
}
.de-deserves-card p {
font-size: 0.96rem;
line-height: 1.6;
color: var(--text-dim);
margin: 0;
}
.de-deserves-card p strong { color: var(--accent); font-weight: 600; }
.de-deserves-card p em { font-style: normal; color: var(--text-mute); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.18); }
/* Closing line + CTA — centered bringup before the next section */
.de-deserves-close {
text-align: center;
max-width: 640px;
margin: 0 auto;
padding-top: 8px;
}
.de-deserves-close p {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.1rem, 0.6vw + 0.95rem, 1.35rem);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.45;
color: var(--text);
margin: 0 0 22px;
}
.de-deserves-close .btn { margin-top: 4px; }
@media (max-width: 980px) {
.de-deserves-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.de-deserves-grid { grid-template-columns: 1fr; gap: 16px; }
.de-deserves-card { padding: 24px; }
}
/* ==========================================================================
Homepage — Domain Email promo CTA section
Sits between Featured Work and Process. Gold-tinted gradient background
(same family as .cta-card) so it visibly reads as a separate offering
without breaking the page rhythm.
========================================================================== */
.fp-email-cta {
position: relative;
padding: clamp(64px, 8vw, 110px) 0;
background:
radial-gradient(680px 420px at 50% 0%, rgba(255,199,0,0.08), transparent 70%),
linear-gradient(180deg, rgba(255,199,0,0.04), rgba(255,199,0,0.015));
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.fp-email-cta::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 75%);
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 75%);
pointer-events: none;
}
.fp-email-cta > .vcfy-container { position: relative; z-index: 1; }
.fp-email-cta .section-head {
text-align: center;
max-width: 760px;
margin: 0 auto 32px;
}
.fp-email-cta .section-head .eyebrow {
display: inline-block;
margin: 0 0 16px;
}
.fp-email-cta .section-head h2 {
font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem);
margin: 0 0 18px;
letter-spacing: -0.025em;
line-height: 1.1;
}
.fp-email-cta .section-head p {
font-size: 1.08rem;
line-height: 1.6;
color: var(--text-dim);
margin: 0 auto;
max-width: 60ch;
}
.fp-email-cta-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 8px;
}
.fp-email-cta-meta {
font-size: 0.92rem;
color: var(--text-mute);
letter-spacing: 0.02em;
}
/* ==========================================================================
Domain Email — Geo currency toggle
PHP shown by default; USD swapped in via [data-currency="USD"] on .
========================================================================== */
.curr-usd { display: none; }
html[data-currency="USD"] .curr-php { display: none; }
html[data-currency="USD"] .curr-usd { display: inline; }
/* Manual toggle button — sits inline in the calculator panel head */
.de-calc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.de-curr-toggle {
background: transparent;
border: 1px solid var(--line);
color: var(--text-mute);
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.04em;
padding: 5px 10px;
border-radius: 999px;
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background .15s ease;
white-space: nowrap;
text-transform: none;
}
.de-curr-toggle:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(255,199,0,0.06);
}
/* ==========================================================================
Homepage — de-AI the icon-card pattern on Problem/Solution + Services
Hides the SVG icon containers; adds the small yellow accent bar from
/domain-email/'s .de-deserves cards. Keeps the same content + grid +
hover behaviour but reads as bespoke editorial rather than SaaS template.
========================================================================== */
.ps-icon,
.service-icon { display: none !important; }
/* Problem/Solution cards */
.ps-card { position: relative; }
.ps-card::before {
content: '';
position: absolute;
top: 28px;
left: 26px;
width: 32px;
height: 3px;
background: var(--accent);
border-radius: 2px;
}
.ps-card h3 { margin-top: 24px; }
/* Services cards (existing ::before is the hover glow — using ::after) */
.service-card::after {
content: '';
position: absolute;
top: 32px;
left: 28px;
width: 32px;
height: 3px;
background: var(--accent);
border-radius: 2px;
z-index: 1;
}
.service-card h3 { margin-top: 24px; }