/* ============================================
NEXFLUENCEE — Redesign v2
Clean editorial · Startup-honest · White-led
============================================ */
/* Fonts are loaded via in each page's with a preconnect.
A CSS @import here would block rendering until this file downloads first. */
:root {
--white: #ffffff;
--off: #f7f6f3;
--pale: #eeecf0;
--ink: #0e0c14;
--ink-soft: #2e2a3a;
--muted: #6b6678;
--rule: #e2dfe9;
--purple: #7c3aed;
--purple-mid: #9d5cf5;
--purple-lt: #c4b0fd;
--purple-bg: #f4f0ff;
--purple-glow:rgba(124,58,237,0.10);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--font-serif: 'Instrument Serif', Georgia, serif;
--font-sans: 'Geist', system-ui, sans-serif;
--font-mono: 'Geist Mono', monospace;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
background: var(--white);
color: var(--ink);
font-family: var(--font-sans);
line-height: 1.6;
overflow-x: hidden;
}
img { max-width:100%; height:auto; }
/* ── CURSOR ───
The custom cursor is opt-in: main.js adds .cursor-custom to only on
devices with a fine pointer. Touch devices and no-JS visitors keep the
native cursor, so the site is never left without a visible pointer. */
.cursor, .cursor-ring { display:none; }
body.cursor-custom,
body.cursor-custom a,
body.cursor-custom button,
body.cursor-custom .btn,
body.cursor-custom .card,
body.cursor-custom .faq-q { cursor:none; }
body.cursor-custom .cursor,
body.cursor-custom .cursor-ring { display:block; }
.cursor {
position:fixed; top:0; left:0; width:9px; height:9px;
background:var(--purple); border-radius:50%;
pointer-events:none; z-index:9999;
transform:translate(-50%,-50%);
transition:width .2s,height .2s,opacity .2s;
}
.cursor-ring {
position:fixed; top:0; left:0; width:32px; height:32px;
border:1.5px solid var(--purple-mid);
border-radius:50%; pointer-events:none; z-index:9998;
transform:translate(-50%,-50%);
transition:width .3s,height .3s,opacity .3s;
opacity:0.45;
}
.cursor.hover { width:5px; height:5px; }
.cursor-ring.hover { width:48px; height:48px; opacity:0.22; }
/* ── SCROLLBAR ─── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--off); }
::-webkit-scrollbar-thumb { background:var(--purple); border-radius:3px; }
/* ── NAV ─── */
.nav {
position:fixed; top:0; left:0; right:0; z-index:500;
height:64px; padding:0 3rem;
display:flex; align-items:center; justify-content:space-between;
background:rgba(255,255,255,0.92);
backdrop-filter:blur(16px);
border-bottom:1px solid var(--rule);
}
.nav-logo {
display:flex; align-items:center; gap:.65rem; text-decoration:none;
}
.nav-logo img { height:34px; width:34px; object-fit:contain; border-radius:6px; }
.nav-logo-text {
font-family:var(--font-sans); font-weight:700; font-size:1rem;
letter-spacing:-.01em; color:var(--ink);
}
.nav-logo-text span { color:var(--purple); }
.nav-links { display:flex; gap:.15rem; list-style:none; align-items:center; }
/* The in-drawer CTA only exists for the mobile menu. */
.nav-cta-li { display:none; }
.nav-links a {
font-family:var(--font-mono); font-size:.62rem;
letter-spacing:.06em; text-transform:uppercase;
color:var(--muted); text-decoration:none;
padding:.4rem .85rem; border-radius:var(--radius-sm);
transition:color .2s,background .2s;
}
.nav-links a:hover,.nav-links a.active { color:var(--ink); background:var(--pale); }
.nav-cta {
font-family:var(--font-mono); font-size:.62rem;
letter-spacing:.08em; text-transform:uppercase;
color:var(--white); background:var(--purple);
padding:.55rem 1.3rem; border-radius:var(--radius-md);
text-decoration:none; transition:background .2s,transform .15s;
}
.nav-cta:hover { background:var(--purple-mid); transform:translateY(-1px); }
.nav-toggle {
display:none; flex-direction:column; gap:5px; cursor:pointer;
padding:6px; border:none; background:none; border-radius:var(--radius-sm);
}
.nav-toggle span {
display:block; width:20px; height:1.5px; background:var(--ink);
border-radius:2px; transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
/* ── BUTTONS ─── */
.btn {
display:inline-flex; align-items:center; gap:.45rem;
font-family:var(--font-mono); font-size:.65rem;
letter-spacing:.1em; text-transform:uppercase;
text-decoration:none; border:none; cursor:pointer;
border-radius:var(--radius-md); padding:.8rem 1.8rem;
transition:transform .18s,background .2s,box-shadow .2s;
}
/* Only hide the native cursor when the custom one is active */
body.cursor-custom .btn { cursor:none; }
.btn:hover { transform:translateY(-2px); }
.btn-primary {
background:var(--purple); color:var(--white);
box-shadow:0 2px 16px rgba(124,58,237,.25);
}
.btn-primary:hover { background:var(--purple-mid); box-shadow:0 6px 28px rgba(124,58,237,.35); }
.btn-outline {
background:transparent; color:var(--ink);
border:1.5px solid var(--rule);
}
.btn-outline:hover { border-color:var(--purple); background:var(--purple-bg); color:var(--purple); }
.btn-ghost {
background:transparent; color:var(--purple);
padding-left:0; padding-right:0; font-size:.62rem;
}
.btn-ghost::after { content:' →'; }
.btn-ghost:hover { color:var(--purple-mid); }
/* ── LAYOUT ─── */
.section { padding:6rem 3rem; }
.section-alt { padding:6rem 3rem; background:var(--off); }
.container { max-width:1140px; margin:0 auto; }
/* ── TYPE UTILS ─── */
.eyebrow {
font-family:var(--font-mono); font-size:.6rem;
letter-spacing:.25em; text-transform:uppercase;
color:var(--purple); margin-bottom:.75rem;
}
.headline-serif {
font-family:var(--font-serif); font-weight:400;
line-height:1.05; color:var(--ink); letter-spacing:-.01em;
}
.headline-xl { font-size:clamp(3rem,6.5vw,6rem); }
.headline-lg { font-size:clamp(2.2rem,4.5vw,4rem); }
.headline-md { font-size:clamp(1.6rem,3vw,2.6rem); }
.headline-sans {
font-family:var(--font-sans); font-weight:700;
line-height:1.05; color:var(--ink);
}
.italic { font-style:italic; }
.purple-txt { color:var(--purple); }
.muted-txt { color:var(--muted); }
.subtext { font-size:1rem; line-height:1.85; color:var(--muted); font-weight:400; }
/* ── CARDS ─── */
.card {
background:var(--white); border:1px solid var(--rule);
border-radius:var(--radius-lg); padding:2rem;
transition:border-color .25s,box-shadow .25s,transform .25s;
}
.card:hover {
border-color:var(--purple-lt);
box-shadow:0 8px 32px rgba(124,58,237,.08);
transform:translateY(-3px);
}
/* ── PILL TAG ─── */
.pill {
display:inline-flex; align-items:center; gap:.4rem;
background:var(--purple-bg); border:1px solid var(--purple-lt);
border-radius:50px; padding:.3rem .9rem;
font-family:var(--font-mono); font-size:.58rem;
letter-spacing:.12em; text-transform:uppercase; color:var(--purple);
}
/* ── TICKER ─── */
.ticker-wrap {
overflow:hidden; background:var(--ink); padding:.7rem 0;
}
.ticker {
display:flex; white-space:nowrap; width:max-content;
animation:ticker-scroll 35s linear infinite;
}
.ticker-wrap:hover .ticker { animation-play-state:paused; }
.ticker-item {
flex:0 0 auto;
font-family:var(--font-sans); font-size:.8rem; font-weight:600;
letter-spacing:.1em; text-transform:uppercase;
color:rgba(255,255,255,.55); padding:0 2.5rem;
}
.ticker-item.hi { color:var(--purple-lt); padding:0; }
@keyframes ticker-scroll {
from { transform:translateX(0); }
to { transform:translateX(-50%); }
}
/* ── DIVIDER ─── */
hr.rule { border:none; border-top:1px solid var(--rule); }
/* ── FOOTER ─── */
footer {
background:var(--ink); color:rgba(255,255,255,.55);
padding:4rem 3rem 2.5rem;
}
.footer-inner { max-width:1140px; margin:0 auto; }
.footer-top {
display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
gap:3rem; padding-bottom:3rem;
border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand-name {
font-family:var(--font-sans); font-weight:700; font-size:1rem;
color:var(--white); display:flex; align-items:center; gap:.6rem;
margin-bottom:.9rem;
}
.footer-brand-name img { height:28px; border-radius:5px; }
.footer-brand-name span { color:var(--purple-lt); }
.footer-desc { font-size:.85rem; line-height:1.7; max-width:240px; }
/* footer uses