/* =========================================================================
FansMeta — "Signal" design system
Deep near-black · single warm orange accent · calm, product-led restraint
========================================================================= */
/* ---- Fonts: loaded via + in each
page (parallel, early discovery — avoids the @import request-chain flash). ---- */
/* ---- Tokens ---- */
:root{
--ink: #0A0C10;
--ink-2: #0E1116;
--ink-3: #14181F;
--surface: rgba(255,255,255,.035);
--surface-2: rgba(255,255,255,.06);
--line: rgba(255,255,255,.08);
--line-2: rgba(255,255,255,.15);
--fg: #F4F5F7;
--fg-soft: #C2C7D0;
--muted: #868D9B;
--muted-2: #565E6E;
/* brand — FansMeta orange (token names kept for compatibility) */
--aqua: #F36431;
--aqua-deep: #C9461C;
--violet: #E07B3A;
--violet-2: #F0A35E;
--live: #FF5A45;
--amber: #F0A35E;
--grad-signature: linear-gradient(125deg, #FF8A4D 0%, #F36431 52%, #D44E20 100%);
--grad-soft: linear-gradient(135deg, rgba(243,100,49,.18), rgba(243,100,49,.04));
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--shadow-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 50px -20px rgba(0,0,0,.7);
--shadow-glow: 0 0 0 1px rgba(243,100,49,.28), 0 24px 70px -30px rgba(243,100,49,.5);
--maxw: 1240px;
--pad: clamp(20px, 5vw, 64px);
--ease: cubic-bezier(.22,.61,.36,1);
}
/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
margin:0;
background:var(--ink);
color:var(--fg);
font-family:'Hanken Grotesk',system-ui,sans-serif;
font-size:17px;
line-height:1.6;
font-weight:400;
letter-spacing:-.01em;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(243,100,49,.28); color:#fff; }
/* keyboard focus */
:focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; border-radius:4px; }
.btn:focus-visible, .nav-links a:focus-visible{ outline-offset:2px; border-radius:999px; }
/* atmospheric base wash */
body::before{
content:"";
position:fixed; inset:0; z-index:-2; pointer-events:none;
background:
radial-gradient(900px 600px at 78% -8%, rgba(224,123,58,.16), transparent 60%),
radial-gradient(800px 560px at 8% 4%, rgba(243,100,49,.12), transparent 58%),
radial-gradient(1200px 800px at 50% 120%, rgba(243,100,49,.06), transparent 60%);
}
body::after{
content:"";
position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
background-image:
linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ position:relative; }
.section{ padding-block:clamp(72px,11vw,140px); }
.section-tight{ padding-block:clamp(48px,7vw,84px); }
/* ---- Typography ---- */
.display{
font-family:'Sora',sans-serif;
font-weight:600;
line-height:.98;
letter-spacing:-.035em;
}
h1,h2,h3,h4{ font-family:'Sora',sans-serif; font-weight:600; letter-spacing:-.03em; line-height:1.05; margin:0; }
p{ margin:0; }
.h-hero{ font-size:clamp(44px, 7.2vw, 96px); }
.h1{ font-size:clamp(36px, 5vw, 68px); }
.h2{ font-size:clamp(28px, 3.6vw, 46px); }
.h3{ font-size:clamp(21px, 2.1vw, 28px); }
.eyebrow{
font-family:'Space Mono',monospace;
font-size:12.5px; font-weight:700;
letter-spacing:.26em; text-transform:uppercase;
color:var(--aqua);
display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
content:""; width:26px; height:1.5px;
background:linear-gradient(90deg, var(--aqua), transparent);
}
.eyebrow.center::before{ display:none; }
.lead{ font-size:clamp(17px,1.35vw,20px); color:var(--fg-soft); line-height:1.62; font-weight:400; }
.muted{ color:var(--muted); }
.gradient-text{
background:var(--grad-signature);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* ---- Buttons ---- */
.btn{
display:inline-flex; align-items:center; gap:10px;
font-family:'Sora',sans-serif; font-weight:600; font-size:15.5px;
letter-spacing:-.01em;
padding:14px 24px; border-radius:999px; border:1px solid transparent;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s, color .3s;
white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{
color:#ffffff; background:var(--aqua);
box-shadow:0 12px 34px -12px rgba(243,100,49,.6);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(243,100,49,.8); background:#FF7A45; }
.btn-ghost{
color:var(--fg); background:var(--surface); border-color:var(--line-2);
backdrop-filter:blur(8px);
}
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--aqua); color:#fff; background:var(--surface-2); }
.btn-lg{ padding:17px 30px; font-size:16.5px; }
.arrow-link{
display:inline-flex; align-items:center; gap:9px;
font-family:'Sora',sans-serif; font-weight:600; font-size:15px;
color:var(--aqua);
transition:gap .3s var(--ease), color .3s;
}
.arrow-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.arrow-link:hover{ color:#fff; gap:13px; }
/* ---- Pills / badges ---- */
.chip{
display:inline-flex; align-items:center; gap:8px;
font-family:'Space Mono',monospace; font-size:11.5px; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
padding:7px 13px; border-radius:999px;
background:var(--surface); border:1px solid var(--line);
color:var(--fg-soft);
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(255,90,69,.6); animation:livePulse 2s infinite; }
@keyframes livePulse{ 0%{box-shadow:0 0 0 0 rgba(255,90,69,.55);} 70%{box-shadow:0 0 0 8px rgba(255,90,69,0);} 100%{box-shadow:0 0 0 0 rgba(255,90,69,0);} }
/* ---- Cards ---- */
.card{
position:relative;
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.card:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.card-glow:hover{ border-color:rgba(243,100,49,.4); box-shadow:var(--shadow-glow); }
/* ---- Icon tiles ---- */
.icon-tile{
display:grid; place-items:center;
width:54px; height:54px; border-radius:14px;
background:var(--grad-soft);
border:1px solid var(--line-2);
color:var(--aqua);
}
.icon-tile svg{ width:26px; height:26px; }
.icon-tile.violet{ color:var(--violet-2); }
/* =========================================================================
NAV
========================================================================= */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
transition:background .4s, border-color .4s, backdrop-filter .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(7,9,14,.72);
backdrop-filter:blur(18px) saturate(1.4);
border-bottom:1px solid var(--line);
}
.nav-inner{
max-width:var(--maxw); margin-inline:auto; padding:16px var(--pad);
display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:11px; font-family:'Sora',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.02em; }
.brand-mark{
width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
background:var(--aqua); color:#fff; flex:none;
font-family:'Sora',sans-serif; font-weight:800; font-size:13.5px; letter-spacing:-.03em;
box-shadow:0 6px 18px -8px rgba(243,100,49,.85);
}
.brand-mark svg{ width:19px; height:19px; }
.brand b{ font-weight:700; color:var(--fg); }
.brand span{ color:var(--fg-soft); font-weight:500; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
font-size:15px; font-weight:500; color:var(--fg-soft);
padding:9px 16px; border-radius:999px; transition:color .25s, background .25s;
}
.nav-links a:hover,.nav-links a.active{ color:#fff; background:var(--surface); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
display:flex; align-items:center; padding:3px; gap:2px;
border:1px solid var(--line); border-radius:999px; background:var(--surface);
font-family:'Space Mono',monospace; font-size:11.5px; font-weight:700;
}
.lang-toggle button{
border:none; background:transparent; color:var(--muted);
padding:5px 11px; border-radius:999px; letter-spacing:.04em; white-space:nowrap;
transition:color .25s, background .25s;
}
.lang-toggle button.on{ color:#ffffff; background:var(--aqua); }
.menu-btn{ display:none; background:var(--surface); border:1px solid var(--line); color:var(--fg); width:42px; height:42px; border-radius:11px; align-items:center; justify-content:center; }
.menu-btn svg{ width:20px; height:20px; }
/* mobile drawer */
.drawer{
position:fixed; inset:0; z-index:99; background:rgba(7,9,14,.97);
backdrop-filter:blur(20px);
display:flex; flex-direction:column; gap:6px;
padding:96px var(--pad) 40px;
transform:translateY(-100%); transition:transform .5s var(--ease);
pointer-events:none;
}
.drawer.open{ transform:translateY(0); pointer-events:auto; }
.drawer a{ font-family:'Sora',sans-serif; font-size:30px; font-weight:600; padding:14px 0; border-bottom:1px solid var(--line); color:var(--fg); }
.drawer .btn{ margin-top:24px; justify-content:center; }
/* =========================================================================
FOOTER
========================================================================= */
.footer{ border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(243,100,49,.03)); padding-block:clamp(56px,7vw,88px) 36px; margin-top:40px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.footer-brandcol .lead{ max-width:340px; margin-top:18px; font-size:15px; }
.foot-col h4{ font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:18px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.foot-col a{ color:var(--fg-soft); font-size:15px; transition:color .25s; }
.foot-col a:hover{ color:var(--aqua); }
.foot-loc{ display:flex; align-items:center; gap:9px; color:var(--fg-soft); font-size:15px; }
.foot-loc .pin{ width:7px; height:7px; border-radius:50%; background:var(--aqua); flex:none; }
.offices{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.office{ padding:24px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.office .flag{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; color:var(--aqua); font-weight:700; text-transform:uppercase; }
.office h5{ font-family:'Sora',sans-serif; font-size:18px; font-weight:600; margin:10px 0 8px; }
.office p{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:48px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap; }
.footer-bottom p{ font-size:13.5px; color:var(--muted-2); }
.footer-bottom .links{ display:flex; gap:22px; }
.footer-bottom a{ font-size:13.5px; color:var(--muted); }
.footer-bottom a:hover{ color:var(--fg-soft); }
/* =========================================================================
REVEAL ANIMATION
========================================================================= */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.08s; }
[data-reveal-d="2"]{ transition-delay:.16s; }
[data-reveal-d="3"]{ transition-delay:.24s; }
[data-reveal-d="4"]{ transition-delay:.32s; }
[data-reveal-d="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
[data-reveal]{ opacity:1; transform:none; transition:none; }
*{ animation-duration:.001ms !important; }
}
/* =========================================================================
SHARED SECTION HEAD
========================================================================= */
.sec-head{ max-width:720px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head .h2{ margin:18px 0 0; }
.sec-head .lead{ margin-top:18px; }
/* responsive */
@media (max-width: 980px){
.footer-top{ grid-template-columns:1fr 1fr; gap:36px; }
.footer-brandcol{ grid-column:1 / -1; }
.offices{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
.nav-links, .nav-right .lang-toggle, .nav-right .btn{ display:none; }
.menu-btn{ display:flex; }
}
@media (max-width: 600px){
body{ font-size:16px; }
.footer-top{ grid-template-columns:1fr; }
.footer-bottom{ flex-direction:column; align-items:flex-start; }
/* Long hero eyebrow: a 999px pill looks broken when it wraps to 2 lines.
Tighten the type so it fits, and use a label radius that survives a wrap. */
.hero2 .chip{ font-size:10px; letter-spacing:.05em; padding:8px 13px; border-radius:13px; line-height:1.5; align-self:flex-start; }
}