/* ============================================================
PORTO FUTURO — Design System
Minha Primeira Importação (MPI) · Evento presencial · São Paulo
Colors + Type foundations
------------------------------------------------------------
Fonts are Google Fonts. Import once in :
============================================================ */
:root {
/* ── DARKS / SURFACES (90% of every page is here) ───────── */
--void: #03050D; /* deepest black-blue, vignette edges */
--abyss: #060912; /* PAGE BACKGROUND — the default canvas */
--deep: #0A0F1E; /* recessed wells, ticker bars */
--surface: #0F1628; /* CARDS — the standard raised surface */
--surface-2: #162040; /* nested chips, mini-cards inside cards */
--surface-3: #1A2640; /* hover lift / highest surface */
/* ── BORDERS (hairlines, never heavy) ──────────────────── */
--border: rgba(255,255,255,0.06); /* resting card border */
--border-2: rgba(255,255,255,0.12); /* hover / active border */
/* ── TEXT RAMP (cool slate, dim → white) ───────────────── */
--txt-muted: #2D4060; /* index numerals, faint meta */
--txt-dim: #64748B; /* micro-copy, captions */
--txt-body: #94A3B8; /* BODY DEFAULT */
--txt-soft: #CBD5E1; /* emphasised body, lede */
--txt-head: #E2E8F0; /* sub-headings */
--txt-white: #F8FAFC; /* HEADLINES / max contrast */
/* ── CYAN — the brand voice. Echoes the route in the hero ─ */
--cy: #06B6D4; /* PRIMARY accent / focus */
--cy-4: #22D3EE; /* brighter accent text */
--cy-3: #67E8F9; /* lightest, gradient stops */
--cy-glow: rgba(6,182,212,0.18); /* radial glow / halo */
--cy-glow-2: rgba(6,182,212,0.06); /* faint section wash */
/* ── RED — urgency, China, the pain. Use sparingly ─────── */
--rd: #EF4444;
--rd-4: #F87171;
--rd-deep: #B91C1C; /* CTA gradient end */
--rd-glow: rgba(239,68,68,0.18);
/* ── GOLD — bonus, Brazil, the reward ──────────────────── */
--go: #F59E0B;
--go-4: #FCD34D;
--go-deep: #B45309;
--go-glow: rgba(245,158,11,0.18);
/* ── PREMIUM EDITORIAL TOKENS (added for high-ticket re-skin) ── */
--bronze: #B07C25; /* matte bronze — hairlines, fine detail */
--bronze-2: #8A5E18; /* deep bronze — section numeral fade */
--champagne: #E8D7B0; /* soft champagne — eyebrows on dark */
--cream: #F2E8D5; /* warm cream — headlines, premium body */
--crimson: #8C1F1F; /* imperial red — sparing detail accent */
--crimson-4: #B83232; /* lighter crimson for hover */
/* ── GREEN — confirmation, inclusion, "is for you" ─────── */
--gr: #10B981;
--gr-4: #34D399;
--gr-glow: rgba(16,185,129,0.18);
/* ── TYPE FAMILIES ─────────────────────────────────────── */
--f-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif; /* HEADLINES, NUMERALS · echoes the gold "IMPORTAÇÃO" logo lettering */
--f-serif: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif; /* alias for explicit serif callouts */
--f-sans: 'Syne', sans-serif; /* available if needed */
--f-body: 'DM Sans', sans-serif; /* body, paragraphs */
--f-mono: 'Syne Mono', monospace; /* eyebrows, labels, tags */
/* ── RADII ─────────────────────────────────────────────── */
--r-sm: 10px; /* swatches, chips */
--r-md: 12px; /* mini-cards */
--r-lg: 16px; /* standard cards / panels */
--r-pill: 99px; /* buttons, badges, route dots */
/* ── SPACING SCALE (8px base) ──────────────────────────── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 28px;
--sp-7: 32px;
--sp-8: 48px;
--sp-9: 64px;
--sp-10: 80px;
/* ── SHADOWS / GLOWS ───────────────────────────────────── */
--glow-cy: 0 0 16px rgba(6,182,212,0.50);
--glow-rd: 0 14px 36px rgba(239,68,68,0.30);
--glow-go: 0 0 24px rgba(245,158,11,0.30);
--lift: 0 18px 50px rgba(0,0,0,0.55);
/* ── MOTION ────────────────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* signature ease */
--dur: 0.4s;
}
/* ============================================================
BASE TYPE STYLES (semantic, apply directly to elements)
============================================================ */
html, body {
cursor: url('assets/cursor-32.png') 0 0, auto;
}
body {
font-family: var(--f-body);
background: var(--abyss);
color: var(--txt-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--cy-glow); color: var(--cy-3); }
/* DISPLAY — outdoor-scale headlines. Heavy serif, tight, almost too big. */
.pf-display {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(3rem, 8vw, 6.5rem);
line-height: 0.98;
letter-spacing: -0.015em;
color: var(--txt-white);
}
/* H1 — section / block headline */
.pf-h1, h1 {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--txt-white);
}
/* H2 — sub-section */
.pf-h2, h2 {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--txt-head);
}
/* H3 — card title */
.pf-h3, h3 {
font-family: var(--f-display);
font-weight: 400;
font-size: 1.15rem;
line-height: 1.2;
color: var(--txt-white);
}
/* LEDE — large intro paragraph */
.pf-lede {
font-family: var(--f-body);
font-size: 1.25rem;
line-height: 1.7;
color: var(--txt-soft);
}
/* BODY */
.pf-body, p {
font-family: var(--f-body);
font-size: 1.05rem;
line-height: 1.65;
color: var(--txt-body);
}
/* MICRO — fine print, reassurance under CTAs */
.pf-micro {
font-family: var(--f-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--txt-dim);
}
/* EYEBROW / LABEL / TAG — operational, uppercase mono */
.pf-eyebrow {
font-family: var(--f-mono);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cy);
}
/* ACCENT SPANS — drop into headlines */
.acc { color: var(--cy-4); } /* cyan — the path / the focus */
.rd { color: var(--rd-4); } /* red — the fear / urgency */
.go { color: var(--go-4); } /* gold — the reward / bonus */
.gr { color: var(--gr-4); } /* green — confirmation */
/* Animated cyan→white→cyan gradient text (headline highlight) */
.pf-glow-text {
background: linear-gradient(110deg, var(--cy-3), var(--cy), var(--cy-3));
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: pf-drift 5s linear infinite;
}
@keyframes pf-drift { 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
/* Golden Scrollbar Styling */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--abyss);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--go), var(--go-deep));
border-radius: 5px;
border: 2px solid var(--abyss);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--go-4), var(--go));
}
html {
scrollbar-width: thin;
scrollbar-color: var(--go) var(--abyss);
}