/* Obin Academy — design tokens + responsive system (mobile-first) */
:root {
--font-sans: "Geist", "Sora", ui-sans-serif, system-ui, sans-serif;
/* Brand ramp — electric blue with a lime accent, the look of obinacademy.com
(main #0b00ff). 800 is the accent used for buttons/links; 900/950 are the
deeper header, hover and footer shades; 700/600 the lighter ones. White on
800 and darker passes AA. --lime is the call-to-action colour; danger and
error states stay red (see --danger below). */
--brand-950: #06007a;
--brand-900: #0800c9;
--brand-800: #0b00ff;
--brand-700: #3b33ff;
--brand-600: #6b66ff;
--lime: #cdfb5e;
--lime-dark: #b6e445;
--lime-ink: #0a0a14;
--ink: #16181a;
--muted: #5b6670;
/* A warm flat cream instead of the old cool grey — the Skool reference's
entire background is this kind of off-white, not a "card floating on
grey" SaaS surface. */
--surface: #f5f5f7;
--border: #e8e8f0;
--border-strong: #d0d0e8;
--accent: var(--brand-800);
--accent-dark: var(--brand-900);
--gold: #f5b301;
--gold-dark: #c98e00;
/* Referenced by .course-card/.creator-card's hover CTA pill — previously
undefined (rendered as a transparent button). */
--secondary: var(--brand-900);
--secondary-dark: var(--brand-950);
--white: #ffffff;
--danger: #dc2626;
--danger-bg: #fef2f2;
--success: #16a34a;
--success-bg: #f0fdf4;
--warning-bg: #fffbeb;
--warning-ink: #b45309;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 20px;
--radius-full: 999px;
/* Buttons/cards get a chunkier, more structured rounding than full-pill —
part of the deliberate move away from the soft SaaS look. */
--radius-chunky: 12px;
--shadow: 0 1px 2px rgba(20, 24, 27, 0.04), 0 8px 24px -12px rgba(20, 24, 27, 0.12);
/* A hard, flat offset "pop" shadow (no blur) — the tactile, confident hover
feel from the reference, replacing a soft blurred drop-shadow. */
--shadow-pop: 0 8px 0 0 var(--border-strong);
--shadow-pop-ink: 0 8px 0 0 color-mix(in srgb, var(--ink) 16%, transparent);
/* Soft, deep elevation shadow — for a card that lifts off the page (course
thumbnails) rather than the flat offset "pop" style used elsewhere. */
--shadow-pop-lg: 0 24px 48px -16px rgba(16, 24, 40, 0.28), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
--container: 1180px;
}
* { box-sizing: border-box; }
/* body is the real scroll container now, not html/the document root —
this is the actual, complete fix for the iOS Safari/Chrome trailing
blank space that neither CSS alone (overscroll-behavior on the
document root) nor the touch-JS fallback alone could fully close.
Safari has never honored overscroll-behavior on the page's own root
scroll, but DOES honor it correctly on an ordinary scrollable element
— this moves the real scroll onto body, turning it into that second,
actually-working case. html can no longer scroll at all (nothing left
to bounce there). Every script that read window.scrollY or listened
for a window scroll event was updated to read/listen on body instead
(main.js, lead-capture.js, share.js, visitor-tracker.js) — anything
position:fixed is unaffected, since fixed positioning is relative to
the viewport regardless of which element actually scrolls. */
html {
scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--brand-950);
height: 100%; overflow: hidden;
}
body {
margin: 0;
font-family: var(--font-sans);
color: var(--ink);
background: var(--white);
font-size: 16px;
line-height: 1.6;
height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: none;
}
img, video, iframe { max-width: 100%; }
a { color: inherit; }
/* Big, bold, plain sans headlines throughout — no serif, no ornamentation.
The boldness comes from scale and weight, not decoration. */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* ---------- layout ---------- */
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 20px;
}
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-1 { gap: 6px; }
.gap-2 { gap: 10px; }
.gap-3 { gap: 16px; }
.gap-4 { gap: 24px; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 640px) {
.sm\:grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.container { padding: 0 32px; }
.md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
.md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
.md\:row { flex-direction: row; }
}
@media (min-width: 1024px) {
.lg\:grid-2 { grid-template-columns: repeat(2, 1fr); }
.lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
.lg\:grid-4 { grid-template-columns: repeat(4, 1fr); }
.lg\:grid-6 { grid-template-columns: repeat(6, 1fr); }
/* Same pattern, same reason: the WhatsApp Broadcast compose card spans 2
of the 3 columns .lg:grid-3 defines here, scoped to this breakpoint so
it doesn't force a phantom column below 1024px. */
.broadcast-compose { grid-column: span 2; }
}
.section { padding: 56px 0; }
@media (min-width: 768px) { .section { padding: 88px 0; } }
/* Whatever block visually ends a page's — a .section, a plain
container div, whatever the page happens to close with — drop its
bottom padding to 0. The footer right after it already has its own
top padding on a colored background, so keeping both stacked read as
a tall, unwanted white gap. Written with :has() instead of a plain
:last-child because several pages end with trailing