/* ═══════════════════════════════════════════════════════════════════════════
MetaWeb Studio — Design system v2
Dark default, light optional. Massive typography, airy layout, vivid color.
Tokens are injected by applyTheme() on . CSS only reads --vars.
═══════════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); }
body {
font: 16px/1.55 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'ss01' on, 'cv02' on;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
overflow-x: hidden;
transition: background-color .4s ease, color .4s ease;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: transparent; border: 0; padding: 0; color: inherit; }
::selection { background: var(--selection); color: var(--ink); }
/* Hide native cursor only when the custom one is mounted */
html.has-cursor, html.has-cursor * { cursor: none !important; }
@media (pointer: coarse) {
html.has-cursor, html.has-cursor * { cursor: auto !important; }
}
/* ─── Layout primitives ─────────────────────────────────────────────── */
.container {
width: 100%; max-width: 1440px;
margin: 0 auto; padding: 0 40px;
position: relative;
}
@media (max-width: 720px) { .container { padding: 0 24px; } }
.section { padding: 140px 0; position: relative; }
.section-tight { padding: 80px 0; }
.section-alt { background: var(--bg-alt); }
.section-elev { background: var(--bg-elev); }
/* ─── Type system ───────────────────────────────────────────────────── */
/* Display: Bricolage Grotesque big, expressive, less overused than Inter.
Body: Geist
Mono: Geist Mono */
.display, .display-xl, .display-l, .display-m {
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
letter-spacing: -0.04em;
line-height: 0.92;
}
.display-xl {
font-size: clamp(72px, 14vw, 240px);
}
.display-l {
font-size: clamp(56px, 9vw, 140px);
}
.display-m {
font-size: clamp(40px, 6vw, 88px);
line-height: 0.96;
}
.h1 {
font: 600 clamp(36px, 4.6vw, 60px)/1.05 'Geist', sans-serif;
letter-spacing: -0.028em;
}
.h2 {
font: 600 clamp(28px, 3.4vw, 44px)/1.1 'Geist', sans-serif;
letter-spacing: -0.024em;
}
.h3 {
font: 600 clamp(20px, 1.8vw, 24px)/1.2 'Geist', sans-serif;
letter-spacing: -0.016em;
}
.mono {
font-family: 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.02em;
}
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--muted);
}
.eyebrow::before {
content: ""; width: 22px; height: 1px;
background: linear-gradient(to right, var(--accent), transparent);
}
.lead {
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.5;
color: var(--muted);
text-wrap: pretty;
}
.grad-text {
background: var(--gradient);
-webkit-background-clip: text; background-clip: text;
color: transparent;
display: inline-block;
}
/* Outlined display text used on hero for emphasis */
.outline-text {
-webkit-text-stroke: 1px currentColor;
color: transparent;
}
/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 10px;
border-radius: 999px;
padding: 14px 22px;
font: 500 15px/1 'Geist', sans-serif;
letter-spacing: -0.005em;
transition: transform .2s, box-shadow .25s, background .2s, color .2s, border-color .2s;
white-space: nowrap;
border: 1px solid transparent;
}
.btn-sm { padding: 10px 16px; font-size: 13.5px; }
.btn-lg { padding: 18px 28px; font-size: 16px; }
.btn-xl { padding: 22px 34px; font-size: 17px; }
.btn-grad {
color: var(--on-accent);
background: var(--gradient);
box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--accent) 50%, transparent),
0 2px 6px rgba(0,0,0,.25);
}
.btn-grad:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px -8px color-mix(in oklab, var(--accent2) 55%, transparent),
0 4px 14px rgba(0,0,0,.30);
}
.btn-solid {
background: var(--ink);
color: var(--bg);
}
.btn-solid:hover { transform: translateY(-1px); }
.btn-outline {
background: transparent;
border-color: var(--border-strong);
color: var(--ink);
}
.btn-outline:hover {
background: var(--bg-elev);
border-color: var(--ink);
}
.btn-ghost {
background: var(--chip-bg);
color: var(--ink);
}
.btn-ghost:hover { background: color-mix(in oklab, var(--accent) 14%, transparent); }
.btn-light { background: white; color: black; }
.btn-light:hover { transform: translateY(-1px); }
.btn-ghost-dark {
background: rgba(255,255,255,0.08);
color: white;
border: 1px solid rgba(255,255,255,0.16);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.14); }
.btn-icon { width: 44px; height: 44px; padding: 0; justify-content: center; }
/* Link arrow */
.link-arrow {
display: inline-flex; align-items: center; gap: 8px;
color: var(--accent);
font: 500 15px/1 'Geist', sans-serif;
transition: gap .2s;
}
.link-arrow:hover { gap: 14px; }
.link-muted { color: var(--muted); font-size: 14px; }
.link-muted:hover { color: var(--ink); }
/* ─── Cards / Chips ─────────────────────────────────────────────────── */
.card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px;
transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
}
.card:hover {
transform: translateY(-3px);
border-color: var(--border-strong);
box-shadow: 0 30px 60px -28px color-mix(in oklab, var(--accent) 22%, transparent);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
font: 500 11.5px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.02em;
padding: 7px 10px;
border-radius: 6px;
background: var(--chip-bg);
color: var(--ink-soft);
border: 1px solid var(--border);
}
.chip-accent {
background: color-mix(in oklab, var(--accent) 12%, transparent);
color: var(--accent);
border-color: color-mix(in oklab, var(--accent) 22%, transparent);
}
/* ─── Cursor (custom, replaces native) ──────────────────────────────── */
.cursor-dot, .cursor-ring {
position: fixed; top: 0; left: 0;
pointer-events: none;
z-index: 2147483647;
mix-blend-mode: difference;
}
.cursor-dot {
width: 6px; height: 6px;
background: white;
border-radius: 50%;
transition: opacity .2s;
}
.cursor-ring {
width: 36px; height: 36px;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 50%;
transition: width .25s, height .25s, opacity .2s, border-color .2s;
}
.cursor-ring.is-hover {
width: 56px; height: 56px;
border-color: white;
background: rgba(255,255,255,0.08);
}
/* ─── Theme toggle ──────────────────────────────────────────────────── */
.theme-toggle {
position: relative;
width: 58px; height: 30px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--border);
display: inline-flex; align-items: center;
padding: 0 6px;
justify-content: space-between;
transition: background .25s, border-color .25s;
flex-shrink: 0;
}
.theme-toggle .tt-icon {
display: inline-flex; width: 16px; height: 16px;
color: var(--muted);
z-index: 1;
transition: color .25s;
}
.theme-toggle .tt-thumb {
position: absolute; top: 3px; left: 3px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--ink);
transition: transform .3s cubic-bezier(.4,.7,.2,1);
}
[data-theme="light"] .theme-toggle .tt-thumb { transform: translateX(28px); }
[data-theme="dark"] .tt-sun { color: var(--ink); }
[data-theme="light"] .tt-moon { color: var(--ink); }
/* ─── Navbar ────────────────────────────────────────────────────────── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
transition: background .3s, backdrop-filter .3s, border-color .3s;
border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
background: color-mix(in oklab, var(--bg) 76%, transparent);
backdrop-filter: blur(22px) saturate(170%);
-webkit-backdrop-filter: blur(22px) saturate(170%);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1440px; margin: 0 auto;
padding: 16px 40px;
display: flex; align-items: center; gap: 28px;
}
@media (max-width: 720px) { .nav-inner { padding: 14px 24px; } }
.brand {
display: flex; align-items: center; gap: 10px;
color: var(--ink);
}
.brand-name {
font: 600 16px/1 'Geist', sans-serif;
letter-spacing: -0.018em;
}
.logo-mark img { filter: brightness(1) saturate(1.1); }
[data-theme="dark"] .logo-mark { /* image already has color, no invert */ }
.nav-links {
display: flex; align-items: center; gap: 30px;
margin-left: auto; margin-right: 18px;
}
.nav-links a {
font: 500 14px/1 'Geist', sans-serif;
color: var(--muted);
letter-spacing: -0.005em;
transition: color .18s;
white-space: nowrap;
position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
height: 1px; background: var(--accent);
}
.nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-burger {
display: none; padding: 8px;
color: var(--ink); border-radius: 8px;
}
.nav-mobile { display: none; }
@media (max-width: 1080px) {
.nav-links { display: none; }
.nav-burger { display: inline-flex; }
.nav-cta > .btn:not(.theme-toggle):not(.btn-icon) { display: none; }
}
.nav-mobile-open {
display: flex; flex-direction: column;
gap: 4px;
padding: 12px 40px 24px;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.nav-mobile-open a {
padding: 14px 4px;
font: 500 17px/1 'Geist', sans-serif;
color: var(--ink);
border-bottom: 1px solid var(--border);
}
.nav-mobile-open .btn { margin-top: 14px; justify-content: center; }
/* ─── Hero (homepage) ───────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 100vh;
display: flex; flex-direction: column;
padding: 140px 0 60px;
isolation: isolate;
overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0; z-index: -3;
pointer-events: none;
overflow: hidden;
}
.hero-bg::before {
content: ""; position: absolute; inset: -10%;
background: var(--mesh);
filter: blur(30px);
opacity: 0.9;
}
.hero-grid {
position: absolute; inset: 0; z-index: -2;
background-image:
linear-gradient(to right, var(--grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 80%);
opacity: 0.7;
}
.hero-inner {
flex: 1;
display: flex; flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero-mark {
display: inline-flex; align-items: center; gap: 10px;
margin-bottom: 40px;
padding: 9px 16px 9px 12px;
background: color-mix(in oklab, var(--bg-elev) 70%, transparent);
border: 1px solid var(--border);
border-radius: 999px;
font: 500 12.5px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
backdrop-filter: blur(12px);
}
.hero-mark .dot-live {
width: 7px; height: 7px; border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 4px color-mix(in oklab, #10b981 25%, transparent);
}
.hero-name {
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(78px, 14vw, 240px);
letter-spacing: -0.05em;
line-height: 0.86;
margin: 0;
text-wrap: balance;
}
.hero-name .row-1 { display: block; }
.hero-name .row-2 { display: block; }
.hero-name .row-2 em {
font-style: normal;
background: var(--gradient);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.hero-sub {
font-size: clamp(17px, 1.5vw, 22px);
color: var(--muted);
margin: 36px 0 44px;
max-width: 56ch;
line-height: 1.45;
}
.hero-cta {
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.hero-foot {
margin-top: 64px;
display: flex; gap: 32px;
align-items: center; justify-content: center;
flex-wrap: wrap;
font: 500 12.5px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.hero-foot span { display: inline-flex; align-items: center; gap: 8px; }
.hero-foot svg { color: var(--accent); }
/* Scroll cue at the bottom of the hero */
.scroll-cue {
position: absolute; bottom: 24px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 10px;
font: 500 11px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted);
z-index: 1;
}
.scroll-cue::after {
content: ""; width: 1px; height: 50px;
background: linear-gradient(to bottom, var(--muted), transparent);
animation: scroll-cue 2.4s ease-in-out infinite;
transform-origin: top;
}
@keyframes scroll-cue {
0%, 100% { transform: scaleY(0); opacity: 0; }
50% { transform: scaleY(1); opacity: 1; }
}
/* ─── Capabilities marquee ──────────────────────────────────────────── */
.capabilities {
padding: 50px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg-alt);
overflow: hidden;
position: relative;
}
.capabilities .mo-marquee { mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }
.cap-item {
display: inline-flex; align-items: center; gap: 26px;
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(36px, 6vw, 84px);
letter-spacing: -0.035em;
line-height: 1;
color: var(--ink);
}
.cap-item-outline {
-webkit-text-stroke: 1.5px var(--ink);
color: transparent;
}
.cap-item-accent {
background: var(--gradient);
-webkit-background-clip: text; background-clip: text;
color: transparent;
font-style: italic;
}
.cap-star {
display: inline-block;
color: var(--accent);
font-size: 0.6em;
transform: translateY(-0.15em);
}
/* ─── Section header (huge) ─────────────────────────────────────────── */
.sh {
margin: 0 0 80px;
display: grid; gap: 40px 60px;
grid-template-columns: 1fr 1fr;
align-items: flex-end;
}
@media (max-width: 880px) { .sh { grid-template-columns: 1fr; gap: 24px; } }
.sh-l { display: flex; flex-direction: column; gap: 22px; }
.sh-r .lead { max-width: 48ch; }
/* ─── Services (big grid) ───────────────────────────────────────────── */
.services-grid {
display: grid; gap: 1px;
grid-template-columns: repeat(3, 1fr);
background: var(--border);
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
}
@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }
.service {
background: var(--bg);
padding: 48px 40px;
display: flex; flex-direction: column; gap: 24px;
min-height: 320px;
transition: background .25s, color .25s;
position: relative;
isolation: isolate;
overflow: hidden;
}
.service::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--gradient);
opacity: 0;
transition: opacity .35s;
}
.service:hover { color: var(--on-accent); }
.service:hover::before { opacity: 1; }
.service:hover .service-icon { color: var(--on-accent); border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.10); }
.service:hover .service-body { color: rgba(255,255,255,0.85); }
.service:hover .service-num { color: rgba(255,255,255,0.5); }
.service-icon {
width: 70px; height: 70px; border-radius: 18px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--chip-bg);
border: 1px solid var(--border);
color: var(--accent);
transition: all .35s;
}
.service-icon svg { width: 32px !important; height: 32px !important; }
.service-num {
font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.08em;
color: var(--muted);
}
.service-title {
font: 600 26px/1.1 'Geist', sans-serif;
letter-spacing: -0.02em;
margin: 0;
text-wrap: balance;
}
.service-body {
color: var(--muted);
font-size: 15.5px;
margin: 0;
flex: 1;
transition: color .35s;
}
.service-foot {
display: flex; gap: 6px; flex-wrap: wrap;
}
/* ─── Portfolio (big stacked previews) ──────────────────────────────── */
.portfolio-list {
display: flex; flex-direction: column; gap: 80px;
}
.work {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
@media (max-width: 880px) { .work { grid-template-columns: 1fr; gap: 28px; } }
.work-reverse { direction: rtl; }
.work-reverse > * { direction: ltr; }
.work-info { display: flex; flex-direction: column; gap: 18px; padding: 20px 0; }
.work-num {
font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.work-name {
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(48px, 6vw, 84px);
letter-spacing: -0.035em;
line-height: 0.95;
color: var(--ink);
margin: 0;
}
.work-tagline {
font-size: clamp(17px, 1.4vw, 20px);
color: var(--muted);
margin: 0;
max-width: 38ch;
}
.work-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.work-cta { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.work-preview {
position: relative;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-alt);
aspect-ratio: 4 / 3;
display: block;
transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .25s;
}
.work-preview:hover {
transform: translateY(-4px);
box-shadow: 0 40px 80px -32px color-mix(in oklab, var(--accent) 32%, transparent);
border-color: var(--border-strong);
}
.work-preview .sp-chrome {
position: absolute; top: 0; left: 0; right: 0; z-index: 2;
}
.work-preview .sp-img-wrap {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
.work-preview .sp-img { object-position: top center; }
/* ─── Site preview chrome (used by Work + Portfolio cards) ──────────── */
.site-preview {
display: block;
text-decoration: none;
color: inherit;
background: var(--bg-alt);
position: relative;
}
.sp-chrome {
display: flex; align-items: center; gap: 5px;
padding: 10px 14px;
background: color-mix(in oklab, var(--ink) 4%, var(--bg-elev));
border-bottom: 1px solid var(--border);
font: 500 11px/1 'Geist Mono', ui-monospace, monospace;
color: var(--muted);
}
.sp-chrome > i {
width: 8px; height: 8px; border-radius: 50%;
background: color-mix(in oklab, var(--ink) 18%, transparent);
}
.sp-url {
margin-left: 10px; flex: 1;
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px;
letter-spacing: 0.02em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-url-lock { font-size: 9px; opacity: 0.55; }
.sp-ext {
display: inline-flex; color: var(--accent);
opacity: 0; transition: opacity .2s;
}
.site-preview:hover .sp-ext { opacity: 1; }
.sp-img-wrap {
position: relative;
width: 100%; aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--bg-alt);
}
.sp-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
opacity: 0;
transform: scale(1.02);
transition: opacity .6s, transform 10s linear;
}
.sp-img.is-loaded { opacity: 1; }
.site-preview:hover .sp-img.is-loaded { transform: scale(1.05); }
.sp-skeleton {
position: absolute; inset: 0;
background:
linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--accent) 12%, transparent) 50%, transparent 100%),
var(--gradient-soft);
background-size: 200% 100%, 100% 100%;
animation: sp-shimmer 1.6s linear infinite;
}
@keyframes sp-shimmer {
0% { background-position: -100% 0, 0 0; }
100% { background-position: 100% 0, 0 0; }
}
.sp-fallback {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: var(--gradient-soft);
font: 600 24px/1.2 'Geist', sans-serif;
color: var(--ink);
padding: 24px;
text-align: center;
}
/* ─── Process timeline ──────────────────────────────────────────────── */
.process-v2 {
display: grid; gap: 1px;
grid-template-columns: repeat(4, 1fr);
background: var(--border);
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
}
@media (max-width: 880px) { .process-v2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .process-v2 { grid-template-columns: 1fr; } }
.process-step {
background: var(--bg);
padding: 40px 32px;
display: flex; flex-direction: column; gap: 16px;
min-height: 280px;
position: relative;
}
.process-step-num {
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(40px, 4vw, 56px);
letter-spacing: -0.04em;
background: var(--gradient);
-webkit-background-clip: text; background-clip: text;
color: transparent;
line-height: 1;
}
.process-step-h {
font: 600 22px/1.2 'Geist', sans-serif;
letter-spacing: -0.018em;
margin: 0;
}
.process-step-d {
color: var(--muted);
margin: 0;
font-size: 14.5px;
flex: 1;
}
.process-step-t {
font: 500 11px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--accent);
}
/* ─── Stack ─────────────────────────────────────────────────────────── */
.stack-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 980px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stack-grid { grid-template-columns: 1fr; } }
.stack-pill {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 14px;
transition: transform .2s, border-color .2s;
}
.stack-pill:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.stack-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.stack-text { display: flex; flex-direction: column; min-width: 0; }
.stack-text b {
font: 600 15px/1.2 'Geist', sans-serif;
letter-spacing: -0.012em;
color: var(--ink);
}
.stack-text span { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stack-marquee {
margin: 0 -40px 60px;
padding: 28px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.stack-mq-item {
display: inline-flex; align-items: center; gap: 14px;
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(28px, 3.5vw, 48px);
letter-spacing: -0.03em;
color: var(--ink);
}
.stack-mq-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
/* ─── Demo form ─────────────────────────────────────────────────────── */
.demo-wrap {
display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
align-items: flex-start;
}
@media (max-width: 880px) { .demo-wrap { grid-template-columns: 1fr; gap: 40px; } }
.demo-form { padding: 40px; }
.demo-form-title {
font: 600 28px/1.15 'Geist', sans-serif;
letter-spacing: -0.022em;
margin: 0 0 10px;
}
.demo-form-sub { color: var(--muted); margin: 0 0 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field-label {
font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.field-input {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg);
padding: 14px 16px;
font: 400 15px/1.4 'Geist', sans-serif;
color: var(--ink);
outline: none;
transition: border-color .18s, background .18s;
resize: vertical;
}
.field-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}
textarea.field-input { min-height: 110px; }
.form-cta {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin-top: 24px;
}
.form-err { color: #e11d48; font-size: 13px; }
.form-note { color: var(--muted); font-size: 13px; }
/* ─── CTA band ──────────────────────────────────────────────────────── */
.cta-band {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 32px;
padding: 80px 60px;
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate;
}
.cta-band::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(50% 70% at 20% 0%, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 60%),
radial-gradient(50% 70% at 80% 100%, color-mix(in oklab, var(--accent2) 30%, transparent) 0%, transparent 60%);
}
.cta-band-title {
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(36px, 5vw, 72px);
letter-spacing: -0.035em;
line-height: 1;
margin: 0 0 20px;
color: var(--ink);
text-wrap: balance;
}
.cta-band-sub {
color: var(--muted);
font-size: clamp(15px, 1.3vw, 19px);
margin: 0 auto 36px;
max-width: 52ch;
}
.cta-band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ─── Footer (minimal, big text) ────────────────────────────────────── */
.footer-v2 {
background: var(--bg);
border-top: 1px solid var(--border);
padding: 120px 0 40px;
position: relative;
overflow: hidden;
}
.footer-mesh {
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 80%; height: 600px;
background:
radial-gradient(50% 50% at 50% 0%, color-mix(in oklab, var(--accent) 26%, transparent) 0%, transparent 70%);
pointer-events: none;
filter: blur(40px);
}
.footer-v2 .container { position: relative; }
.footer-cta {
text-align: center;
margin-bottom: 100px;
}
.footer-cta-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--muted);
margin-bottom: 28px;
}
.footer-cta-title {
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(60px, 12vw, 200px);
letter-spacing: -0.05em;
line-height: 0.86;
margin: 0;
text-wrap: balance;
}
.footer-cta-title em {
font-style: normal;
background: var(--gradient);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.footer-cta-email {
display: inline-block;
margin-top: 50px;
font: 500 clamp(22px, 2.4vw, 32px)/1 'Geist', sans-serif;
color: var(--ink);
border-bottom: 1px solid var(--border-strong);
padding-bottom: 4px;
transition: color .2s, border-color .2s, gap .2s;
}
.footer-cta-email:hover { color: var(--accent); border-color: var(--accent); }
.footer-cols {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 60px;
padding-top: 60px;
border-top: 1px solid var(--border);
}
@media (max-width: 880px) {
.footer-cols { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.footer-brand-block { display: flex; flex-direction: column; gap: 20px; }
.footer-brand-name {
font: 600 18px/1 'Geist', sans-serif;
letter-spacing: -0.018em;
margin-bottom: 4px;
}
.footer-brand-tag { color: var(--muted); font-size: 14px; max-width: 28ch; }
.footer-col h4 {
font: 500 11px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--muted);
margin: 0 0 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
color: var(--ink-soft); font-size: 15px;
transition: color .15s, padding-left .15s;
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
display: flex; justify-content: space-between; gap: 14px;
flex-wrap: wrap;
margin-top: 60px;
padding-top: 24px;
border-top: 1px solid var(--border);
font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.04em;
color: var(--muted);
}
/* ─── Page hero (subpages, same family as homepage hero) ────────────── */
.page-hero {
position: relative;
padding: 180px 0 80px;
isolation: isolate;
overflow: hidden;
}
.page-hero-mesh {
position: absolute; inset: 0; z-index: -3;
background: var(--mesh);
filter: blur(40px);
}
.page-hero-grid {
position: absolute; inset: 0; z-index: -2;
background-image:
linear-gradient(to right, var(--grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
opacity: 0.55;
}
.ph-back {
display: flex; width: fit-content;
align-items: center; gap: 8px;
color: var(--muted);
font: 500 13px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.04em; text-transform: uppercase;
margin-bottom: 36px;
transition: color .15s, gap .15s;
}
.ph-back:hover { color: var(--ink); gap: 12px; }
.ph-back svg { transform: rotate(180deg); }
.ph-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 28px;
}
.ph-title {
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(52px, 9vw, 144px);
letter-spacing: -0.04em;
line-height: 0.94;
margin: 0 0 32px;
color: var(--ink);
max-width: 18ch;
text-wrap: balance;
}
.ph-sub {
font-size: clamp(17px, 1.5vw, 22px);
color: var(--muted);
margin: 0;
max-width: 56ch;
line-height: 1.45;
}
.ph-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
/* ─── Stat row ──────────────────────────────────────────────────────── */
.stat-row {
display: grid; gap: 30px 18px;
grid-template-columns: repeat(4, 1fr);
padding: 60px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-cell b {
display: block;
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(40px, 5vw, 64px);
letter-spacing: -0.04em;
line-height: 1;
color: var(--ink);
}
.stat-cell span {
display: block; margin-top: 12px;
font: 500 13px/1.4 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.stat-cell-accent b {
background: var(--gradient);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
/* ─── Detail rows (subpages) ────────────────────────────────────────── */
.detail-row {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 80px;
padding: 100px 0;
align-items: flex-start;
border-top: 1px solid var(--border);
}
.detail-row:first-of-type { border-top: 0; padding-top: 60px; }
@media (max-width: 880px) { .detail-row { grid-template-columns: 1fr; gap: 40px; padding: 60px 0; } }
.detail-row.reverse { grid-template-columns: 1.3fr 1fr; }
.detail-row.reverse .detail-left { order: 2; }
@media (max-width: 880px) { .detail-row.reverse .detail-left { order: 0; } }
.detail-eyebrow {
font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
display: inline-flex; align-items: center; gap: 10px;
}
.detail-eyebrow::before {
content: ""; width: 22px; height: 1px;
background: linear-gradient(to right, var(--accent), transparent);
}
.detail-h {
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(32px, 4vw, 56px);
letter-spacing: -0.032em;
line-height: 1;
margin: 0 0 24px;
color: var(--ink);
text-wrap: balance;
}
.detail-p {
color: var(--muted);
font-size: 17px;
line-height: 1.5;
margin: 0 0 18px;
text-wrap: pretty;
}
.detail-bullets {
list-style: none; padding: 0; margin: 28px 0 0;
display: flex; flex-direction: column; gap: 12px;
}
.detail-bullets li {
display: flex; gap: 12px;
font-size: 16px; color: var(--ink-soft);
line-height: 1.5;
}
.detail-bullets li::before {
content: ""; width: 20px; height: 20px; flex-shrink: 0;
margin-top: 2px;
border-radius: 50%;
background: var(--gradient);
mask: url("data:image/svg+xml;utf8,") center/12px no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.visual-card {
position: relative;
border-radius: 24px;
border: 1px solid var(--border);
background: var(--bg-elev);
overflow: hidden;
min-height: 360px;
}
.visual-card-mesh {
position: absolute; inset: 0;
background: var(--gradient-soft);
z-index: 0;
}
.visual-card-body {
position: relative; z-index: 1;
padding: 32px;
height: 100%;
}
/* ─── Product hero ──────────────────────────────────────────────────── */
.product-hero {
position: relative;
padding: 160px 0 80px;
isolation: isolate;
overflow: hidden;
}
.product-hero-mesh {
position: absolute; inset: 0; z-index: -3;
background: var(--mesh);
filter: blur(40px);
}
.product-hero-inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 80px;
align-items: center;
position: relative;
}
@media (max-width: 880px) { .product-hero-inner { grid-template-columns: 1fr; gap: 50px; } }
.product-tag {
display: inline-flex; align-items: center; gap: 10px;
padding: 9px 16px;
background: var(--chip-bg);
border: 1px solid var(--border);
color: var(--accent);
font: 600 11px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.10em; text-transform: uppercase;
border-radius: 999px;
margin-bottom: 28px;
}
.product-title {
font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
font-weight: 500;
font-size: clamp(48px, 7vw, 104px);
letter-spacing: -0.04em;
line-height: 0.96;
margin: 0 0 28px;
color: var(--ink);
text-wrap: balance;
}
.product-sub {
font-size: clamp(17px, 1.5vw, 21px);
color: var(--muted);
margin: 0 0 36px;
max-width: 50ch;
line-height: 1.5;
}
.product-bullets {
list-style: none; padding: 0; margin: 0 0 36px;
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 480px) { .product-bullets { grid-template-columns: 1fr; } }
.product-bullets li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 15px; color: var(--ink-soft);
}
.product-bullets li > svg { color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.product-visual { position: relative; }
/* ─── Feature grid (subpages) ───────────────────────────────────────── */
.feature-grid {
display: grid; gap: 18px;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px;
display: flex; flex-direction: column; gap: 16px;
transition: transform .25s, border-color .25s;
}
.feature-card:hover {
transform: translateY(-3px);
border-color: var(--border-strong);
}
.feature-icon {
width: 48px; height: 48px; border-radius: 14px;
background: var(--chip-bg);
color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
}
.feature-h {
font: 600 19px/1.25 'Geist', sans-serif;
letter-spacing: -0.014em;
margin: 0; color: var(--ink);
}
.feature-p { margin: 0; color: var(--muted); font-size: 15px; }
/* ─── FAQ ───────────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
border: 1px solid var(--border);
border-radius: 16px;
background: var(--bg-elev);
overflow: hidden;
transition: border-color .2s;
}
.faq-item[open] { border-color: var(--border-strong); }
.faq-summary {
list-style: none;
padding: 24px 26px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
cursor: pointer;
font: 500 17px/1.3 'Geist', sans-serif;
color: var(--ink);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after {
content: ""; width: 16px; height: 16px;
background: currentColor;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
color: var(--accent);
transition: transform .25s;
flex-shrink: 0;
}
.faq-item[open] .faq-summary::after { transform: rotate(45deg); }
.faq-body {
padding: 0 26px 24px;
color: var(--muted);
font-size: 16px;
line-height: 1.55;
max-width: 72ch;
}
/* ─── Legal docs ────────────────────────────────────────────────────── */
.legal-doc {
max-width: 760px; margin: 0 auto;
font-size: 16px; line-height: 1.7; color: var(--ink-soft);
}
.legal-doc h2 {
font: 600 26px/1.2 'Geist', sans-serif;
letter-spacing: -0.02em;
margin: 56px 0 16px;
color: var(--ink);
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 {
font: 600 18px/1.3 'Geist', sans-serif;
letter-spacing: -0.012em;
margin: 32px 0 12px;
color: var(--ink);
}
.legal-doc p { color: var(--muted); margin: 0 0 16px; }
.legal-doc ul { color: var(--muted); padding-left: 26px; margin: 0 0 16px; }
.legal-doc ul li { margin-bottom: 8px; }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.legal-meta {
font: 500 12px/1 'Geist Mono', ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
padding: 14px 18px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 12px;
display: inline-flex;
margin-bottom: 32px;
}
/* ─── Reveal / Marquee / Misc motion ────────────────────────────────── */
.mo-reveal {
opacity: 0; transform: translateY(20px);
transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1);
transition-delay: var(--mo-delay, 0ms);
}
.mo-reveal.is-in { opacity: 1; transform: none; }
.mo-marquee {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}
.mo-marquee-track {
display: flex;
width: max-content;
animation: mo-marquee var(--mo-speed, 40s) linear infinite;
}
.mo-marquee-row { display: flex; gap: 60px; padding-right: 60px; flex-shrink: 0; }
@keyframes mo-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.mo-reveal { opacity: 1 !important; transform: none !important; }
.mo-marquee-track { animation: none !important; }
}
/* Word-by-word entrance */
.word-reveal {
display: inline-block;
opacity: 0;
transform: translateY(0.6em);
animation: word-rise 0.95s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay: var(--wr-delay, 0ms);
will-change: transform, opacity;
}
@keyframes word-rise {
to { opacity: 1; transform: translateY(0); }
}
/* Typewriter */
.typewriter-caret {
display: inline-block;
width: 1.5px; height: 0.95em;
margin-left: 2px;
background: var(--accent);
vertical-align: -0.12em;
animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
/* Live bars / wave */
.live-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; padding: 2px 0; }
.live-bars i { flex: 1; background: var(--gradient); border-radius: 2px 2px 0 0;
opacity: 0.85; min-height: 4px; transition: height 1.1s cubic-bezier(.3,.7,.4,1); }
.live-bars i:nth-child(2n) { opacity: 0.55; }
.live-wave { display: flex; align-items: center; gap: 1.5px; height: 18px; }
.live-wave i { width: 2px; background: currentColor; border-radius: 2px; opacity: 0.92; min-height: 4px; }
/* Pulse ring */
.pulse-ring { position: relative; }
.pulse-ring::after {
content: ""; position: absolute; inset: 0;
border-radius: inherit;
background: inherit;
opacity: 0.5;
animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(2.8); opacity: 0; }
}
/* ─── Background particle canvas (hero) ─────────────────────────────── */
.mo-particles {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: -1;
pointer-events: none;
}
/* ─── Form / Validation messages reused on subpages ─────────────────── */
.form-grid + .form-cta { margin-top: 24px; }
/* ─── Misc helpers ──────────────────────────────────────────────────── */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ─── Portfolio Grid (pagina /portfolio.html) ───────────────────────────── */
.port-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 24px;
}
.port-card {
display: flex;
flex-direction: column;
gap: 0;
border-radius: 20px;
border: 1px solid var(--border);
background: var(--bg-elev);
overflow: hidden;
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.port-card:hover {
border-color: var(--border-strong);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.port-card-preview {
height: 200px;
overflow: hidden;
background: var(--bg-alt);
border-bottom: 1px solid var(--border);
position: relative;
}
.port-card-preview .sp-chrome { border-radius: 0; }
.port-card-preview .sp-img-wrap { height: 100%; }
.port-card-preview a { display: block; height: 100%; }
.port-card-preview .site-preview { height: 100%; border-radius: 0; border: none; }
.port-card-body {
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
flex: 1;
gap: 10px;
}
.port-card-sector {
font: 500 11px/1 'Geist Mono', monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
.port-card-name {
font: 600 20px/1.15 'Geist', sans-serif;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
.port-card-tagline {
font: 500 14px/1.4 'Geist', sans-serif;
color: var(--ink-soft);
margin: 0;
}
.port-card-desc {
font: 13px/1.6 'Geist', sans-serif;
color: var(--muted);
margin: 0;
flex: 1;
}
.port-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--border);
margin-top: 4px;
}
.port-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.port-card-links { display: flex; gap: 12px; align-items: center; }
@media (max-width: 600px) {
.port-grid { grid-template-columns: 1fr; }
}
/* ─── Cookie Banner ─────────────────────────────────────────────────────── */
.cookie-banner {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(calc(100% + 40px));
z-index: 1200;
width: calc(100% - 48px);
max-width: 720px;
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: 20px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 16px;
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
box-shadow: 0 12px 48px rgba(0,0,0,0.36), 0 0 0 1px var(--border);
opacity: 0;
pointer-events: none;
transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.35s ease;
}
.cookie-banner.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.cookie-banner.is-hiding {
transform: translateX(-50%) translateY(calc(100% + 40px));
opacity: 0;
pointer-events: none;
}
.cookie-banner-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--gradient-soft);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
}
.cookie-banner-body {
flex: 1;
min-width: 0;
}
.cookie-banner-title {
font: 600 14px/1.3 'Geist', sans-serif;
color: var(--ink);
margin: 0 0 3px;
letter-spacing: -0.01em;
}
.cookie-banner-text {
font: 13px/1.55 'Geist', sans-serif;
color: var(--muted);
margin: 0;
}
.cookie-banner-text a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition: opacity 0.2s;
}
.cookie-banner-text a:hover { opacity: 0.75; }
.cookie-banner-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
align-items: center;
}
.cookie-btn-essential {
padding: 10px 18px;
border-radius: 10px;
background: transparent;
color: var(--muted);
font: 500 13px/1 'Geist', sans-serif;
border: 1px solid var(--border-strong);
cursor: pointer;
white-space: nowrap;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cookie-btn-essential:hover {
background: var(--chip-bg);
color: var(--ink);
border-color: var(--border-strong);
}
.cookie-btn-accept {
padding: 10px 20px;
border-radius: 10px;
background: var(--gradient);
color: #fff;
font: 600 13px/1 'Geist', sans-serif;
border: none;
cursor: pointer;
white-space: nowrap;
letter-spacing: -0.01em;
transition: opacity 0.2s, transform 0.15s;
}
.cookie-btn-accept:hover { opacity: 0.88; transform: translateY(-1px); }
.cookie-btn-accept:active { transform: translateY(0); }
@media (max-width: 640px) {
.cookie-banner {
flex-wrap: wrap;
bottom: 16px;
padding: 16px 18px;
width: calc(100% - 32px);
border-radius: 18px;
gap: 12px;
}
.cookie-banner-actions {
width: 100%;
gap: 8px;
}
.cookie-btn-essential,
.cookie-btn-accept {
flex: 1;
text-align: center;
justify-content: center;
}
}