/* ===============================================================
ChatterBase Hire -- Design System v1
Dark premium. Fonts: Sora (display) + Inter (body), loaded in layout.
=============================================================== */
:root {
--bg: #07080D;
--bg-2: #0C0E15;
--bg-3: #12141D;
--card: rgba(255,255,255,.035);
--card-hover: rgba(255,255,255,.06);
--line: rgba(255,255,255,.09);
--line-strong: rgba(255,255,255,.16);
--text: #F4F6FB;
--text-2: #A7AFC0;
--text-3: #6B7385;
--acc-1: #7C5CFF;
--acc-2: #FF4D8D;
--grad: linear-gradient(135deg, #7C5CFF 0%, #FF4D8D 100%);
--grad-soft: linear-gradient(135deg, rgba(124,92,255,.14), rgba(255,77,141,.10));
--ok: #2CE5A7;
--verified: #1D9BF0; /* trust/verification blue (Facebook/X style) -- never green */
--warn: #FFB454;
--bad: #FF5C5C;
--r-lg: 20px;
--r-md: 14px;
--r-sm: 10px;
--shadow: 0 20px 60px rgba(0,0,0,.5);
--font-display: 'Sora', 'Inter', sans-serif;
--font-body: 'Inter', -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* The html element must carry the background. body alone leaves the canvas
transparent, and iOS paints that WHITE in the safe-area insets and while
overscrolling -- the white frame around the installed PWA.
NOTE: no overflow-x here. Setting overflow on the ROOT makes html/body the
scroll container in WebKit, which stops position:sticky from sticking -- it
would silently break the navbar and the workspace tab bar on iOS. */
background: var(--bg);
-webkit-text-size-adjust: 100%; /* iOS must not re-scale text in landscape */
}
body {
font-family: var(--font-body);
/* NO background here on purpose. The colour lives on (above), which is what
fills the iOS safe-area. If body ALSO painted a background it would cover the
ambient layers .cb-glow / .cb-stars, which sit at z-index -2 / -1 and are painted
before any block background in the root stacking context -- that is exactly how
the orbs and the starfield vanished once html gained a background. */
background: transparent;
color: var(--text);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
min-height: 100dvh; /* real viewport height on mobile browsers with dynamic toolbars */
/* clip (not hidden) contains any stray overflow WITHOUT creating a scroll
container, so sticky positioning keeps working. This is a safety net only --
the actual overflowing elements are fixed at their source (see the
"HORIZONTAL OVERFLOW CONTAINMENT" block further down).
Why clip and not hidden: overflow-x:hidden next to overflow-y:visible forces
the y axis to compute to auto, which turns the propagating element into a
scroll container -- that is what used to break position:sticky in WebKit.
clip is the one non-visible value that legally pairs with visible, so the
page still scrolls DOWN normally and the sticky navbar keeps sticking. */
overflow-x: clip;
overflow-wrap: break-word; /* long emails / URLs / handles can never blow out a card */
}
/* Pre-2022 engines (Safari < 16, Chrome < 90) drop `clip` as an invalid value, so the
page could still slide sideways there. Fall back to hidden ONLY in that case, and
put it on the ROOT rather than on body: overflow set on the root element is always
propagated to the viewport and the root's own used value becomes visible, so neither
html nor body turns into a scroll container and position:sticky is untouched.
(On body the same fallback would risk the WebKit sticky bug noted above whenever an
engine declines to propagate.) */
@supports not (overflow-x: clip) {
html { overflow-x: hidden; }
}
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; }
::selection { background: rgba(124,92,255,.35); }
/* -- Ambient background glow -- */
.cb-glow {
position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
background:
radial-gradient(600px 400px at 15% -5%, rgba(124,92,255,.12), transparent 60%),
radial-gradient(700px 500px at 90% 10%, rgba(255,77,141,.07), transparent 60%),
radial-gradient(800px 600px at 50% 110%, rgba(124,92,255,.06), transparent 60%);
}
/* animated floating orbs */
.cb-glow::before, .cb-glow::after {
content: ''; position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform;
}
.cb-glow::before { width: 520px; height: 520px; background: #7C5CFF; opacity: .22; top: -180px; left: -120px; animation: cbDrift1 26s ease-in-out infinite alternate; }
.cb-glow::after { width: 460px; height: 460px; background: #FF4D8D; opacity: .14; top: 8%; right: -160px; animation: cbDrift2 32s ease-in-out infinite alternate; }
@keyframes cbDrift1 { to { transform: translate(140px, 120px) scale(1.15); } }
@keyframes cbDrift2 { to { transform: translate(-120px, 180px) scale(1.1); } }
/* faint starfield layer (add via
...
) */
.cb-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.cb-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .18; animation: cbTwinkle var(--d,5s) ease-in-out var(--del,0s) infinite; }
.cb-stars i.b { width: 3px; height: 3px; }
@keyframes cbTwinkle { 50% { opacity: .9; transform: scale(1.8); } }
/* hero glow -- a soft aura directly behind the headline */
.cb-hero-glow { position: relative; }
.cb-hero-glow::before {
content: ''; position: absolute; top: 42%; left: 50%; width: 640px; height: 360px; max-width: 92vw;
transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
background: radial-gradient(ellipse at center, rgba(124,92,255,.30), rgba(255,77,141,.10) 45%, transparent 70%);
filter: blur(34px);
}
@media (prefers-reduced-motion: reduce) { .cb-glow::before, .cb-glow::after, .cb-stars i { animation: none; } }
/* -- Layout helpers -- */
/* Side padding respects the landscape notch/rounded corners. Written as LONGHANDS on
purpose: the shorthand order is top/right/bottom/left, which makes it far too easy
to feed the left inset into padding-right (and it was, once). */
.cb-wrap, .cb-wrap-narrow { margin: 0 auto; }
.cb-wrap { max-width: 1160px; }
.cb-wrap-narrow { max-width: 760px; }
.cb-wrap, .cb-wrap-narrow {
padding-left: max(24px, env(safe-area-inset-left, 0px));
padding-right: max(24px, env(safe-area-inset-right, 0px));
}
/* minmax(0, 1fr), never a bare 1fr. `1fr` is shorthand for minmax(auto, 1fr) and
that `auto` minimum resolves to the track's MIN-CONTENT width, so a track refuses
to get narrower than its widest child -- the grid then grows past its container
and the page scrolls sideways. The worst offender is