/* ============================================================ WAVE ANIMATION STUDIO — Global Design System (2026) Dark, cinematic, Caribbean. Gold / Red / Green on deep ink. Dark is the only theme: the light palette, the nav toggle and the Account Settings → Appearance control were all retired. Every color here still routes through the :root tokens below, so retheming stays a one-block change. carries a static data-theme="dark" for anything keying off it; nothing reads it to choose a palette. ============================================================ */ :root{ --ink:#050505; --ink-2:#0a0a0a; --ink-3:#101010; --panel:#0d0d0d; --overlay-rgb:255,255,255; /* thin tint used for hairline surfaces (rgba(var(--overlay-rgb),alpha)) */ --surface-rgb:16,19,28; /* solid-ish floating chrome: dropdown menus, toasts, scrolled nav, chat */ --line:rgba(var(--overlay-rgb),.1); --text:#e8ecf4; --muted:#9aa3b5; --gold:#e3b322; --red:#e0303a; --green:#00b356; --gold-soft:rgba(227,179,34,.14); --red-soft:rgba(224,48,58,.14); --green-soft:rgba(0,179,86,.14); --grad:linear-gradient(100deg,var(--gold),var(--red) 50%,var(--green)); --font-display:"Space Grotesk","Outfit",sans-serif; --font-body:"Outfit",system-ui,sans-serif; --r-lg:22px; --r-md:14px; --shadow:0 24px 60px -24px rgba(0,0,0,.7); --ease:cubic-bezier(.22,.9,.28,1); --glow-gold:rgba(227,179,34,.55); --glow-red:rgba(224,48,58,.5); --glow-green:rgba(0,179,86,.5); --grid-line:rgba(var(--overlay-rgb),.055); --green-dark:#08281a; --manga-frame:rgba(242,236,223,.85); /* manga panel/spread/cover ink border */ --footer-scrim:rgba(0,0,0,.5); color-scheme:dark; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--ink);color:var(--text); font-family:var(--font-body);font-size:17px;line-height:1.65; overflow-x:hidden;overflow-y:auto;-webkit-font-smoothing:antialiased; } ::selection{background:var(--gold);color:#100c02} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;font-weight:700} .wrap{width:min(1180px,92vw);margin-inline:auto} .grad-text{background:var(--grad);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent; animation:gradientFlow 6s ease-in-out infinite} @keyframes gradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} /* ---------- ambient background: cyber grid (injected by main.js) ---------- */ .cyber-grid{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 35%,transparent 82%); mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 35%,transparent 82%); animation:gridDrift 24s linear infinite} @keyframes gridDrift{to{background-position:54px 54px,54px 54px}} @media(prefers-reduced-motion:reduce){.cyber-grid{animation:none}} /* ---------- ambient background ---------- */ .bg-orbs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none} .orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.14;animation:drift 26s var(--ease) infinite alternate} .orb.g{background:#8a6d0e;width:44vw;height:44vw;top:-14vw;left:-10vw} .orb.r{background:#7c1218;width:36vw;height:36vw;top:30vh;right:-12vw;animation-delay:-8s} .orb.e{background:#064d2a;width:40vw;height:40vw;bottom:-16vw;left:22vw;animation-delay:-16s} @keyframes drift{ 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,-4vh) scale(1.12)} 100%{transform:translate(-4vw,5vh) scale(.94)} } .grain{position:fixed;inset:-100%;z-index:-1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 7s steps(8) infinite} @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-2%,-4%)}100%{transform:translate(4%,2%)}} /* ---------- loader / wave reveal ---------- Every value the editor's Site → Loading screen panel can change is a custom property or a :root[data-loader-*] hook, so applyTheme() in js/site-overrides.js restyles the intro without touching its markup. Each fallback below is the coded default: an untouched setting keeps tracking this stylesheet. */ #loader{position:fixed;inset:0;z-index:1000;background:var(--loader-bg,var(--ink));display:flex;flex-direction:column; align-items:center;justify-content:center;gap:var(--loader-gap,18px);padding:8vh 6vw;transition:visibility 0s 1.6s} /* Repeat-in-session page loads skip the full branded loader — see js/main.js — but still hold the page invisible for at most ~700ms (or until the current, non-cached site-overrides content is confirmed applied, if sooner) so a visitor never sees a flash of last-visit's stale cached content before the real thing lands. */ body.wave-veil{opacity:0} /* 260px is the full/final size the pulseGrow animation below lands on, not its starting size — the mark itself grows into it over the intro. Kept as the biggest it gets (not larger) so the wave-curtain reveal that follows still reads as a wipe rather than a jump-cut into the oversized decorative wordmark behind the hero (index.html .float-swirl, 840px). */ #loader img{width:var(--loader-logo-size,260px);max-width:70vw;animation:pulseGrow 5.1s var(--ease) forwards} #loader .l-name{font-family:var(--font-display);font-size:var(--loader-name-size,1.5rem);letter-spacing:.34em;text-transform:uppercase;font-weight:700;color:var(--loader-fg,var(--text))} #loader .l-tag{color:var(--loader-fg,var(--muted));font-size:var(--loader-tag-size,.85rem);letter-spacing:.24em;text-transform:uppercase} /* Development notice from management. A hairline-ruled memo card rather than a third tagline: sentence case and a rule above it break the run of uppercase letter-spaced lines, so the eye reads it as a statement. It fades in after the mark and wordmark have landed. */ #loader .l-note{max-width:var(--loader-note-width,46ch);margin-top:6px;padding-top:16px; border-top:1px solid var(--loader-note-line,rgba(227,179,34,.28)); display:flex;flex-direction:column;align-items:inherit;gap:6px; opacity:0;animation:lNoteIn .8s var(--ease) .5s forwards} #loader .l-note p{color:var(--loader-fg,var(--muted));font-size:var(--loader-note-size,.86rem); line-height:1.65;letter-spacing:.01em} #loader .l-note b{color:var(--loader-fg,var(--text));font-weight:600} #loader .l-sign{font-family:var(--font-display);font-size:calc(var(--loader-note-size,.86rem) * .82); letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} @keyframes lNoteIn{to{opacity:1}} :root[data-loader-note="off"] #loader .l-note{display:none} @keyframes pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(227,179,34,0))}50%{transform:scale(1.06);filter:drop-shadow(0 0 26px rgba(227,179,34,.5))}} /* Logo grows from smallest to biggest in one slow, steady pass — never shrinking back down mid-intro. js/main.js sets this animation's duration to match the loader's actual hold time (holdMs), so scale(1) — full size, the 260px --loader-logo-size — lands right as the wave-curtain reveal rises in below it: the mark grows until it meets the red/gold/green swell. The brief plateaus read as a slow pulse/heartbeat without ever dipping back down, unlike the old in-place pulse keyframe above. */ @keyframes pulseGrow{ 0%{transform:scale(.3);filter:drop-shadow(0 0 0 rgba(227,179,34,0))} 8%{transform:scale(.3)} 26%{transform:scale(.5);filter:drop-shadow(0 0 8px rgba(227,179,34,.2))} 30%{transform:scale(.5)} 50%{transform:scale(.68);filter:drop-shadow(0 0 14px rgba(227,179,34,.28))} 54%{transform:scale(.68)} 74%{transform:scale(.85);filter:drop-shadow(0 0 20px rgba(227,179,34,.36))} 78%{transform:scale(.85)} 100%{transform:scale(1);filter:drop-shadow(0 0 26px rgba(227,179,34,.45))} } #loader .l-wave{position:absolute;inset:0;pointer-events:none} #loader.reveal .l-inner{animation:fadeUp .5s forwards} @keyframes fadeUp{to{opacity:0;transform:translateY(-24px)}} body.revealing #loader{clip-path:circle(150% at 50% 100%);animation:waveOpen 1.3s var(--ease) forwards} @keyframes waveOpen{from{clip-path:circle(150% at 50% 100%)}to{clip-path:circle(0% at 50% 100%)}} body.revealed #loader{display:none} #loader .l-inner{display:flex;flex-direction:column;align-items:center;gap:var(--loader-gap,18px);text-align:center;max-width:100%} #loader svg.swell{position:absolute;bottom:-2px;left:0;width:100%;height:34vh;opacity:0} body.revealing #loader svg.swell{opacity:1;animation:swell 1.3s var(--ease) forwards} @keyframes swell{from{transform:translateY(100%)}to{transform:translateY(-10%)}} /* Layout — where the mark and wordmark sit on the screen. */ :root[data-loader-layout="top"] #loader{justify-content:flex-start} :root[data-loader-layout="bottom"] #loader{justify-content:flex-end} :root[data-loader-layout="left"] #loader{align-items:flex-start} :root[data-loader-layout="left"] #loader .l-inner{align-items:flex-start;text-align:left} :root[data-loader-layout="right"] #loader{align-items:flex-end} :root[data-loader-layout="right"] #loader .l-inner{align-items:flex-end;text-align:right} /* Logo beside the words rather than above them. The three are flat siblings, so a two-column grid — mark spanning both rows, name over tagline — is what pairs them up; either line can still be hidden and its row just collapses. */ :root[data-loader-stack="row"] #loader .l-inner{display:grid;grid-template-columns:auto minmax(0,1fr); grid-template-areas:"logo name" "logo tag" "note note";align-items:center;justify-items:start; column-gap:var(--loader-gap,18px);row-gap:6px;text-align:left} :root[data-loader-stack="row"] #loader img{grid-area:logo} :root[data-loader-stack="row"] #loader .l-name{grid-area:name;align-self:end} :root[data-loader-stack="row"] #loader .l-tag{grid-area:tag;align-self:start} /* The memo runs the full width under both columns rather than squeezing into the wordmark's column, where 46ch would wrap to a sliver. */ :root[data-loader-stack="row"] #loader .l-note{grid-area:note;align-items:flex-start;text-align:left} /* Hide either line without deleting it — the text stays editable on the page. */ :root[data-loader-name="off"] #loader .l-name{display:none} :root[data-loader-tag="off"] #loader .l-tag{display:none} :root[data-loader-swell="off"] #loader svg.swell{display:none} /* Logo motion. */ :root[data-loader-anim="none"] #loader img{animation:none} :root[data-loader-anim="spin"] #loader img{animation:lspin 3.6s linear infinite} :root[data-loader-anim="float"] #loader img{animation:lfloat 3s var(--ease) infinite} :root[data-loader-anim="breathe"] #loader img{animation:lbreathe 4s var(--ease) infinite} @keyframes lspin{to{transform:rotate(360deg)}} @keyframes lfloat{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}} @keyframes lbreathe{0%,100%{opacity:.45}50%{opacity:1}} @media (prefers-reduced-motion:reduce){ #loader img{animation:none!important} } /* ---------- nav ---------- */ header.nav{position:fixed;top:0;left:0;right:0;z-index:600;transition:.35s var(--ease)} header.nav .n-inner{display:flex;align-items:center;gap:26px;width:min(1320px,94vw);margin:14px auto; padding:10px 22px;border-radius:100px;border:1px solid transparent} header.nav.scrolled .n-inner{background:rgba(var(--surface-rgb),.72);backdrop-filter:blur(18px);border-color:var(--line);box-shadow:var(--shadow)} .n-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;letter-spacing:.08em} /* max-* as well as width: a replacement mark authored at its own size (the current one is set to 90x73) must not be able to grow the bar or push the links off it. */ /* The scale(2) is sizing, not motion: the mark is authored small and rests doubled. The logo is a plain click-through link — no hover or press animation. */ .n-logo img{width:auto;height:44px;max-width:360px;max-height:44px;object-fit:contain;transform:scale(2);transform-origin:left center} .n-logo span{font-size:1.02rem}.n-logo small{display:block;font-size:.58rem;letter-spacing:.42em;color:var(--muted);font-weight:500} nav.n-links{display:flex;gap:2px;margin:0 auto;align-items:center;justify-content:center} nav.n-links>a{padding:8px 12px;border-radius:100px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);transition:.25s} nav.n-links>a:hover,nav.n-links>a.active{color:var(--text);background:rgba(var(--overlay-rgb),.07);text-shadow:0 0 16px var(--glow-gold)} nav.n-links>a.active{color:var(--gold)} .n-drop{position:relative} .n-drop>a::after{content:" ▾";font-size:.7em;opacity:.7} /* ...unless it is empty. Home carries the studio's own tools and shows them to signed-in accounts only; signed out it has to look and behave exactly like the plain link it has always been. A caret that opens nothing is the same bug as a button that does nothing, just smaller. See updateAuthUI. */ .n-drop.is-flat>a::after{content:none} .n-drop.is-flat::after{content:none} .n-drop.is-flat .n-menu{display:none!important} /* Invisible hover bridge across the 10px visual gap between the "Academy" link and its .n-menu below it (.n-menu sits at top:calc(100% + 10px), not flush against .n-drop). Without this, moving the mouse straight down from the link toward a submenu item crosses a strip that belongs to neither element, :hover is lost mid-travel, .n-menu starts hiding, and the click that was meant for e.g. "Courses" lands on whatever's underneath instead (often back on the "Academy" link/page) — this is what was reported as "clicking Courses in the dropdown sends me back to Academy". The bridge is a same-width, same-position invisible strip that keeps .n-drop:hover (and so .n-menu's visibility) continuous through that gap. */ .n-drop::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:100%;height:10px;width:210px} .n-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);min-width:210px; background:rgba(var(--surface-rgb),.95);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:16px; padding:8px;opacity:0;visibility:hidden;transition:.25s var(--ease);box-shadow:var(--shadow)} .n-drop:hover .n-menu{opacity:1;visibility:visible;transform:translate(-50%,0)} .n-menu a{display:block;padding:9px 14px;border-radius:10px;font-size:.9rem;color:var(--text)} .n-menu a:hover{background:rgba(var(--overlay-rgb),.08);color:var(--text)} .n-cta{display:flex;gap:10px;align-items:center} /* nav icons */ .n-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid transparent; color:var(--muted);background:none;font-size:1rem;transition:.25s;position:relative;text-decoration:none} .n-ico:hover{color:var(--gold);border-color:var(--line)} .n-ico .cnt{position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff;font-size:.6rem;font-weight:800; min-width:16px;height:16px;border-radius:100px;display:grid;place-items:center;padding:0 4px} /* Notification Center (see js/notifications.js) — click-toggled dropdown, mirrors the .n-menu / #authContainer pattern above but with its own class so it never inherits hover-open behaviour. */ .notif-wrap{position:relative;display:flex;align-items:center} .notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(360px,86vw);max-height:70vh;overflow-y:auto; background:rgba(var(--surface-rgb),.97);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:16px; padding:6px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease);box-shadow:var(--shadow); pointer-events:none;z-index:120} .notif-wrap.open .notif-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .notif-panel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;gap:10px} .notif-panel-head b{font-size:.9rem} .notif-panel-head button{background:none;border:0;color:var(--gold);font-size:.76rem;font-weight:600;cursor:pointer;padding:2px} .notif-panel-head button:hover{text-decoration:underline} .notif-panel-list{display:flex;flex-direction:column;gap:2px} .notif-item{display:block;padding:10px 12px;border-radius:10px;color:var(--muted);position:relative} .notif-item:hover{background:rgba(var(--overlay-rgb),.06);color:var(--text)} .notif-item b{display:block;color:var(--text);font-size:.86rem;margin-bottom:2px} .notif-item p{font-size:.8rem;line-height:1.4;margin:0} .notif-item .notif-when{display:block;font-size:.7rem;color:var(--muted);margin-top:4px} .notif-item.unread::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--gold)} .notif-item.unread{padding-left:20px} .notif-empty{color:var(--muted);font-size:.85rem;padding:16px 12px;text-align:center} /* animated surf button */ .surf-btn{display:inline-flex;align-items:center;gap:9px;position:relative;overflow:hidden} .surf-btn svg{display:inline-block;animation:surfSwitch 3s ease-in-out infinite} .surf-btn .frame{transition:opacity .8s ease-in-out} .surf-btn .frame1{opacity:1} .surf-btn .frame2{opacity:0} @keyframes surfSwitch{ 0%{transform:translateX(0)} 25%{transform:translateX(-2px)} 50%{opacity:1;transform:translateX(0)} 50.1%{opacity:0} 75%{transform:translateX(2px)} 100%{transform:translateX(0)} } .surf-btn:hover svg{animation-play-state:running;filter:drop-shadow(0 0 8px var(--gold))} .surf-btn:hover .frame1{opacity:0} .surf-btn:hover .frame2{opacity:1} /* three-state authentication button */ .auth-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:50%;border:2px solid var(--gold);background:var(--gold); color:var(--gold);cursor:pointer;transition:.4s cubic-bezier(.22,.9,.28,1); position:relative;text-decoration:none;overflow:hidden; box-shadow:0 0 0 0 rgba(227,179,34,.3)} .auth-btn:hover{background:var(--gold);transform:scale(1.05);box-shadow:0 0 16px rgba(227,179,34,.5)} .auth-btn:active{transform:scale(0.95)} /* solid-gold backdrop so a failed/slow image load never shows a bare/broken icon */ .auth-icon{display:block;position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden; background:var(--gold);transition:.6s cubic-bezier(.22,.9,.28,1)} .auth-fallback-icon{position:absolute;inset:0;z-index:0;display:grid;place-items:center;color:#151002;font-size:1.3rem} .auth-state{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:var(--gold);transition:opacity .5s ease-in-out} .auth-state.state-1{opacity:1} .auth-state.state-2{opacity:0} .auth-state.state-3{opacity:0} /* hover state: show Surf2 */ .auth-btn:hover .auth-state.state-1{opacity:0} .auth-btn:hover .auth-state.state-2{opacity:1} .auth-btn:hover .auth-state.state-3{opacity:0} /* click state: show Wave3 */ .auth-btn.clicked .auth-state.state-1{opacity:0} .auth-btn.clicked .auth-state.state-2{opacity:0} .auth-btn.clicked .auth-state.state-3{opacity:1} /* auth-lock: hold on the Wave3 (Login) icon — on the login/signup page, or permanently once signed in — ignore hover swap */ .auth-btn.auth-lock .auth-state.state-1, .auth-btn.auth-lock:hover .auth-state.state-1, .auth-btn.auth-lock .auth-state.state-2, .auth-btn.auth-lock:hover .auth-state.state-2{opacity:0} .auth-btn.auth-lock .auth-state.state-3, .auth-btn.auth-lock:hover .auth-state.state-3{opacity:1} /* remove dropdown arrow for auth button - icons only */ /* #authContainer must establish its own positioning context — without position:relative here, the absolutely-positioned .n-menu falls through to header.nav (the nearest positioned ancestor, since it's position:fixed) and centers itself under the whole 1320px nav bar instead of the icon, which is what put the Sign Out menu in the middle of the page. Anchored from the right edge of the icon (not centered) so it never overhangs the viewport edge on narrow screens either. */ #authContainer{position:relative} #authContainer .n-menu{position:absolute;top:calc(100% + 10px);right:0;left:auto;transform:translateY(8px);min-width:210px; background:rgba(var(--surface-rgb),.95);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:16px; padding:8px;opacity:0;visibility:hidden;transition:.25s var(--ease);box-shadow:var(--shadow);pointer-events:none} /* Sign Out dropdown only opens on click (toggled via .menu-open), never floats open just from being logged in or hovering. */ #authContainer.menu-open .n-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} /* in-place flip animation for auth click state */ @keyframes authFlip{ 0%{transform:rotateY(0deg) scale(1)} 50%{transform:rotateY(90deg) scale(1.04)} 100%{transform:rotateY(360deg) scale(1)} } .auth-btn.clicked .auth-icon{animation:authFlip .7s cubic-bezier(.22,.9,.28,1);transform-style:preserve-3d} /* ripple effect on click */ .auth-ripple{position:absolute;border-radius:50%;background:rgba(227,179,34,.5); animation:authRipple .8s cubic-bezier(.22,.9,.28,1) forwards;pointer-events:none} @keyframes authRipple{ 0%{width:0;height:0;opacity:1} 100%{width:100%;height:100%;opacity:0} } .burger{display:none;background:none;border:0;color:var(--text);font-size:1.5rem;padding:6px 10px;cursor:pointer;transition:.25s} .burger:hover{color:var(--gold)} .burger i{transition:transform .3s var(--ease)} /* responsive nav adjustments */ @media(max-width:1024px){ header.nav .n-inner{gap:16px;padding:10px 16px;margin:12px auto} nav.n-links>a{padding:6px 10px;font-size:.7rem} .n-logo span{font-size:.95rem} } /* .n-drawer wraps nav.n-links + .n-cta (see js/main.js). Above the breakpoint it must be invisible to layout — display:contents keeps both children participating directly in .n-inner's flex row exactly as if the wrapper weren't there, so desktop spacing is untouched. */ .n-drawer{display:contents} /* ONE collapse point for the whole nav — links, search, cart and the account icon all move into the single burger-toggled panel together here, instead of the old two-tier scheme (links at 900px, icons pinned as a separate floating cluster from 768px, then folded in again below 720px). That overlap was itself a source of elements fighting for the same screen space at in-between widths. The burger stays put at the right edge of the bar at every width below this. */ @media(max-width:900px){ header.nav .n-inner{gap:12px;width:94vw;padding:10px 14px;border-radius:22px;margin:10px auto} .n-logo span{display:none} .burger{display:block;color:var(--gold);margin-left:auto} .n-drawer{display:block;position:fixed;top:80px;right:16px;left:16px; max-width:340px;margin-left:auto; background:rgba(var(--surface-rgb),.98);backdrop-filter:blur(16px); border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow); max-height:calc(100vh - 100px);overflow-y:auto; opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s var(--ease); z-index:605} .n-drawer.open{opacity:1;visibility:visible;transform:translateY(0)} nav.n-links{display:flex;flex-direction:column;gap:0;margin:0;padding:8px} nav.n-links>a{padding:13px 14px;border-radius:10px;font-size:.9rem;width:100%} nav.n-links>a:hover,nav.n-links>a.active{background:rgba(var(--overlay-rgb),.08);color:var(--gold)} /* Submenus are always expanded in the mobile drawer (not an accordion) — every nav option, including sub-menu items, must be visible without an extra tap, and the drawer already scrolls (.n-drawer max-height + overflow-y:auto above) so there's no space cost to showing them all flat. */ .n-drop{width:100%} /* A dropdown's own top link is a grandchild of nav.n-links, so none of the nav.n-links>a sizing above reaches it. Left alone it rendered as bare body text next to full-size drawer rows. Same padding, same size, same hit area — a menu option should not be a different thing depending on whether it happens to own a submenu. */ .n-drop>a{display:flex;justify-content:space-between;align-items:center;width:100%; padding:13px 14px;border-radius:10px;font-size:.9rem;letter-spacing:.12em; text-transform:uppercase;font-weight:600;color:var(--muted)} .n-drop>a::after{content:none} /* WHY THE TEXT VANISHED WHEN YOU TAPPED AN OPTION Touching a drawer row makes the browser select the label's text, and ::selection paints gold-on-near-black over it. Against this panel that reads as the word blanking out — and on a long press Android/iOS add their own dark tap-highlight on top, which finished the job. The rows are buttons, not prose: nothing in here is ever meant to be selected or long-pressed into a callout, so turn all three off and give the press an explicit, visible state of its own instead. */ .n-drawer a,.n-drawer button,.burger{ -webkit-user-select:none;user-select:none; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none} nav.n-links>a:active,.n-drop>a:active,.n-menu a:active{ color:var(--gold);background:rgba(227,179,34,.14)} /* :hover sticks after a tap on touch devices, so the tapped row would stay lit long after the drawer closed. Pin the lit state to :active and to the page you are actually on. */ @media (hover:none){ nav.n-links>a:hover:not(.active),.n-menu a:hover{background:none;color:var(--muted)} .n-menu a:hover{color:var(--text)} } .n-menu{position:static;display:block;min-width:auto;top:auto;left:auto;transform:none;opacity:1;visibility:visible; background:rgba(var(--overlay-rgb),.04);border:none;box-shadow:none;border-radius:0;margin:0;padding:4px 0 4px 10px} .n-menu a{padding:9px 16px;border:none;font-size:.85rem;color:var(--text)} nav.n-links .drawer-only{display:block!important} .n-cta{flex-direction:row;justify-content:center;gap:10px;padding:12px;border-top:1px solid var(--line)} #authContainer{position:static} #authContainer .n-menu{position:static;display:none;min-width:auto;margin-top:8px;opacity:1;visibility:visible;transform:none} #authContainer.menu-open .n-menu{display:block} } @media(max-width:520px){ header.nav .n-inner{gap:8px;padding:10px 10px} .burger{font-size:1.3rem;padding:4px 8px} .n-drawer{right:10px;left:10px;max-width:none;top:74px} } /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:9px;padding:13px 26px;border-radius:100px;font-weight:600; font-size:.95rem;border:1px solid var(--line);color:var(--text);background:rgba(var(--overlay-rgb),.05); transition:.3s var(--ease);position:relative;overflow:hidden} .btn:hover{transform:translateY(-2px);background:rgba(var(--overlay-rgb),.1)} .btn::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(120deg,transparent 35%,rgba(var(--overlay-rgb),.35) 50%,transparent 65%); transform:translateX(-130%);transition:transform .7s var(--ease)} .btn:hover::before{transform:translateX(130%)} .btn.gold{background:var(--gold);color:#151002;border-color:transparent} .btn.gold:hover{box-shadow:0 12px 34px -8px rgba(227,179,34,.55)} .btn.green{background:var(--green);color:#02150b;border-color:transparent} .btn.green:hover{box-shadow:0 12px 34px -8px rgba(0,179,86,.55)} .btn.red{background:var(--red);color:#fff;border-color:transparent} .btn.red:hover{box-shadow:0 12px 34px -8px rgba(224,48,58,.55)} .btn.ghost{background:transparent} .btn.sm{padding:9px 18px;font-size:.85rem} /* ---------- hero ---------- */ .hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:110px 0 70px;overflow:hidden} .hero.short{min-height:58vh;padding:110px 0 50px} #particles{position:absolute;inset:0;z-index:0;pointer-events:none} .hero .wrap{position:relative;z-index:2} .kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:100px; border:1px solid var(--line);background:rgba(var(--overlay-rgb),.04);font-size:.8rem;letter-spacing:.18em; text-transform:uppercase;color:var(--muted);margin-bottom:18px} .kicker i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:blink 2s infinite} @keyframes blink{50%{opacity:.35}} .hero h1{font-size:clamp(2.6rem,6.4vw,5.2rem);margin-bottom:18px} .hero p.lead{max-width:600px;color:var(--muted);font-size:1.14rem;margin-bottom:26px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} .hero-wave{position:absolute;bottom:-2px;left:0;width:100%;z-index:1;opacity:.6} /* floating swirl decorations */ .float-swirl{position:absolute;pointer-events:none;opacity:.16;animation:floaty 9s var(--ease) infinite alternate;z-index:0} @keyframes floaty{from{transform:translateY(-14px) rotate(-4deg)}to{transform:translateY(16px) rotate(6deg)}} /* ---------- sections ---------- */ section{padding:64px 0;position:relative} /* ---------- the fold ---------- The gap between a hero and the first section under it used to be typed into that section's style attribute, one page at a time. It had drifted to nine different answers across the site — 0, 10px, 20px, 30px, 34px, 82px, 98px, 118px, 123px — so the rhythm changed every time a visitor moved between pages, and any new page inherited whichever number happened to be copied. One rule sets it now; the inline overrides are gone. :not(.hero) because a hero is itself a section — blackgoat.html runs two back to back and the second one keeps its own generous padding. index.html is deliberately exempt. Its hero is full height and hands off into a bespoke opening sequence that is signed off as it stands. */ .hero + section:not(.hero){padding-top:46px} body[data-page="home"] .hero + section:not(.hero){padding-top:64px} .sec-head{max-width:720px;margin-bottom:38px} .sec-head.center{margin-inline:auto;text-align:center} .sec-head .kicker{margin-bottom:16px} .sec-head h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:14px} .sec-head p{color:var(--muted);font-size:1.06rem} /* reveal-on-scroll */ .rv{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s} /* "No items yet" placeholder cards — was copy-pasted inline as `padding:64px 24px` or `padding:48px 24px` across academy/careers/clubs/ courses/job-detail/blackgoat/manja; one shared class instead of N inline duplicates so the spacing only ever needs changing in one place. */ .empty-state{padding:48px 24px;text-align:center;color:var(--muted)} /* Sign-in-required gate cards — was copy-pasted inline as `max-width:560px;text-align:center;padding:44px 30px` across admin/ clubadmin/hr/editor. */ .gate-panel{max-width:560px;margin:0 auto;text-align:center;padding:36px 28px} /* ---------- cards & grids ---------- */ .grid{display:grid;gap:22px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)} /* ---------- page split-grid layouts ---------- Formerly inline "display:grid;grid-template-columns:...;gap:...; align-items:..." written directly on a page's .wrap. Centralized here so every ratio/gap lives in one place, the mobile collapse below can target them by a stable list instead of matching leftover inline-style text, and the live editor can't shadow them with a one-off inline override. IDs are unchanged so existing page scripts and media queries keep working. */ #agrid{display:grid;grid-template-columns:1fr 1fr;gap:56px} #bookgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} #loregrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} #pilotGrid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} #internBookGrid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} #bookHeroGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center} #bookDetailGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start} #kGrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:30px;align-items:start} #permGrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start} #cgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start} #cGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start} #jdGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start} #lGrid{display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start} #lgrid{display:grid;grid-template-columns:1fr 460px;gap:60px;align-items:center} #pgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start} #sgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start} #dashMainGrid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:22px;align-items:start} .clubs-layout{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center} /* display:flex + height:100% is the root fix for cards "drifting" out of alignment inside a grid row: a plain block .card only takes its own content's height, so a card with less text sits shorter than its siblings and its top-aligned icon/heading no longer lines up across the row. Flex + full height keeps every card in a row the same height, and the icon/heading/body order still reads top-to-bottom for regular divs and alike (anchors get blockified as grid children, but never picked up flex layout of their own without this). */ .card{background:linear-gradient(160deg,rgba(var(--overlay-rgb),.05),rgba(var(--overlay-rgb),.015)); border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;position:relative;overflow:hidden; transition:.4s var(--ease);display:flex;flex-direction:column;height:100%;box-sizing:border-box} .card:hover{transform:translateY(-6px);border-color:rgba(var(--overlay-rgb),.18);box-shadow:var(--shadow)} .card .icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:18px} .icon.gold{background:var(--gold-soft);color:var(--gold)} .icon.red{background:var(--red-soft);color:var(--red)} .icon.green{background:var(--green-soft);color:var(--green)} .card h3{font-size:1.25rem;margin-bottom:10px} .card p{color:var(--muted);font-size:.96rem} .card .top-line{position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);opacity:0;transition:.4s} .card:hover .top-line{opacity:1} .tag{display:inline-block;padding:4px 12px;border-radius:100px;font-size:.72rem;letter-spacing:.08em; text-transform:uppercase;font-weight:600;margin-bottom:14px} .tag.gold{background:var(--gold-soft);color:var(--gold)} .tag.red{background:var(--red-soft);color:var(--red)} .tag.green{background:var(--green-soft);color:var(--green)} .tag.dim{background:rgba(var(--overlay-rgb),.07);color:var(--muted)} /* project poster cards */ .poster{border-radius:var(--r-lg);overflow:hidden;position:relative;min-height:420px;display:flex; align-items:flex-end;border:1px solid var(--line);transition:.5s var(--ease);cursor:pointer} .poster:hover{transform:translateY(-8px) scale(1.01);box-shadow:var(--shadow)} .poster .p-bg{position:absolute;inset:0;transition:transform 1.2s var(--ease)} .poster:hover .p-bg{transform:scale(1.07)} .poster .p-body{position:relative;z-index:2;padding:30px;width:100%; background:linear-gradient(to top,rgba(4,6,10,.94) 20%,transparent)} .poster h3{font-size:1.6rem;margin-bottom:8px} .poster p{color:var(--muted);font-size:.94rem;max-width:420px} /* stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} /* Column flex + centered content so a stat with an empty (a label-only entry like "Made in Jamaica", with no number/short-word to headline) still sits centered in the row instead of floating to the top once its empty block collapses to zero height. */ .stat{display:flex;flex-direction:column;justify-content:center;min-height:100%} .stat b{font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,2.8rem);display:block} .stat b:empty{display:none} .stat span{color:var(--muted);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase} /* Admin CMS list widgets — cap visible rows at ~7, scroll for the rest, instead of letting a panel grow unbounded as content accumulates. */ .admin-scroll-list{max-height:560px;overflow-y:auto;padding-right:6px} /* Drag-and-drop reorderable admin list rows — Production Pipeline phases/ milestones (js/pipeline-admin.js) and the Project Gallery (js/admin.js initGalleryPanel). Rows are plain draggable="true" cards; this only supplies the "being dragged" feedback state. */ .drag-row-dragging{opacity:.4} /* Shared Media Library picker widget (js/media-picker.js) — used by js/products-admin.js (store.html) and js/manja-admin.js (manja.html). */ .mp-primary-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px} .mp-primary-box{width:120px;height:120px;border-radius:14px;overflow:hidden;flex:none;background:rgba(var(--overlay-rgb),.04); border:1px solid var(--line);display:grid;place-items:center} .mp-primary-box img{width:100%;height:100%;object-fit:cover} .mp-primary-actions{display:flex;gap:8px;flex-wrap:wrap} .mp-empty{color:var(--muted);font-size:.78rem;text-align:center;padding:0 8px} .mp-gallery-label{color:var(--muted);font-size:.82rem;margin-bottom:8px} .mp-gallery-list{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;min-height:8px} .mp-empty-text{color:var(--muted);font-size:.82rem} .mp-thumb{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden;border:1px solid var(--line); cursor:grab;flex:none} .mp-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none} .mp-thumb.mp-dragging{opacity:.4} .mp-thumb-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0; background:rgba(4,6,10,.75);color:#fff;font-size:.9rem;line-height:1;cursor:pointer;display:grid;place-items:center} /* Above the admin media-transform overlay (99010 in js/media-transform.js), which opens this picker as its own "replace file" step — at the old 970 it opened behind the very tool that asked for it. Nothing in this stylesheet sits higher than 1000, so raising it changes no other stacking. */ .mp-modal-overlay{position:fixed;inset:0;z-index:99100;display:none;place-items:center;background:rgba(4,6,10,.82); backdrop-filter:blur(8px);padding:24px} .mp-modal-overlay.open{display:grid} .mp-modal-panel{width:min(720px,94vw);max-height:82vh;display:flex;flex-direction:column;background:var(--ink-3); border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden} .mp-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)} .mp-modal-close{background:none;border:0;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:2px 6px} .mp-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:18px 20px} .mp-tile{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer; box-shadow:inset 0 0 0 1px rgba(var(--overlay-rgb),.12);background:var(--ink-2)} .mp-tile img,.mp-tile video{width:100%;height:100%;object-fit:cover;display:block;background:var(--ink-2)} .mp-tile.mp-selected{border-color:var(--gold)} .mp-tile-check{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--gold); color:#100c02;font-size:.72rem;font-weight:800;display:none;place-items:center} .mp-tile.mp-selected .mp-tile-check{display:grid} .mp-modal-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line)} /* Source switcher + search: the library holds both uploads and the art the repo already ships, and past a few dozen items scrolling for one is worse than typing its name. */ .mp-modal-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line)} .mp-src{display:flex;gap:6px} .mp-src button{padding:6px 12px;border-radius:100px;border:1px solid var(--line);background:transparent; color:var(--muted);font:600 .78rem/1 var(--font-body);cursor:pointer} .mp-src button.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)} .mp-search{flex:1;min-width:140px;padding:7px 12px;border-radius:100px;border:1px solid var(--line); background:rgba(var(--overlay-rgb),.04);color:var(--text);font:inherit;font-size:.82rem} /* Videos and vectors can't be told apart from a still at thumbnail size. */ .mp-tile-kind{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:100px;background:rgba(0,0,0,.72); color:#e8ecf4;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} /* Half the library is pale logo art, so the caption needs a floor of its own rather than a gradient that only reads over dark thumbnails. */ .mp-tile-name{position:absolute;inset:auto 0 0 0;padding:16px 6px 5px;font-size:.62rem;line-height:1.25; color:#e8ecf4;background:linear-gradient(transparent,rgba(0,0,0,.55) 40%,rgba(0,0,0,.92));word-break:break-all; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mp-tile.is-vector img{object-fit:contain;padding:14%;background:rgba(var(--overlay-rgb),.05)} .mp-upload-label{color:var(--gold);font-size:.86rem;font-weight:600;cursor:pointer} .mp-lightbox-overlay{position:fixed;inset:0;z-index:975;display:none;place-items:center;background:rgba(4,6,10,.92)} .mp-lightbox-overlay.open{display:grid} .mp-lightbox-img{max-width:88vw;max-height:82vh;border-radius:12px;object-fit:contain} .mp-lightbox-close{position:absolute;top:20px;right:26px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer} .mp-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(var(--overlay-rgb),.08);border:1px solid var(--line); color:#fff;font-size:1.6rem;width:48px;height:48px;border-radius:50%;cursor:pointer} .mp-lightbox-prev{left:20px} .mp-lightbox-next{right:20px} /* ---------- first-time contributor onboarding (js/onboarding.js) ---------- */ .onb-overlay{position:fixed;inset:0;z-index:980;display:none;place-items:center;padding:24px; background:rgba(4,6,10,.86);backdrop-filter:blur(10px)} .onb-overlay.show{display:grid} .onb-panel{width:min(640px,96vw);max-height:90vh;display:flex;flex-direction:column; background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden; animation:onbIn .28s var(--ease)} @keyframes onbIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .onb-head{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-bottom:1px solid var(--line); background:linear-gradient(160deg,rgba(227,179,34,.06),transparent)} .onb-head .onb-mark{width:44px;flex:none;margin-top:2px} .onb-head h2{font-size:1.15rem;margin:0} .onb-sub{color:var(--muted);font-size:.86rem;margin:4px 0 0;line-height:1.5} .onb-body{flex:1;overflow-y:auto;padding:8px 22px 4px} .onb-sec{padding:14px 0;border-bottom:1px solid var(--line)} .onb-sec h3{font-size:.98rem;margin:0 0 6px} .onb-sec p{color:var(--muted);font-size:.86rem;line-height:1.6;margin:0 0 10px} .onb-check{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;cursor:pointer;color:var(--text)} .onb-check input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--gold)} .onb-fineprint{color:var(--muted);font-size:.78rem;line-height:1.6;margin:14px 0 4px} .onb-fineprint a{color:var(--gold)} .onb-sign{display:grid;grid-template-columns:1fr 160px;gap:12px;margin:14px 0 20px} .onb-sign label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:var(--muted)} .onb-sign input{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px; padding:9px 11px;font-family:var(--font-body);font-size:.9rem} .onb-sign #onbSignature{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.01em} .onb-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--line); background:rgba(var(--overlay-rgb),.02)} @media(max-width:520px){.onb-sign{grid-template-columns:1fr}} /* HR Admin permanent contact bar (hr.html) — pinned to the bottom of the viewport so the hr@ / admin@ split is always in reach. */ .hr-contactbar{position:sticky;bottom:0;z-index:500;background:rgba(var(--surface-rgb),.94); backdrop-filter:blur(12px);border-top:1px solid var(--line)} .hr-contactbar[hidden]{display:none} .hr-contactbar .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:center; padding:11px 20px;font-size:.82rem;color:var(--muted)} .hr-contactbar a{color:var(--gold)} .hr-contactbar .ic{vertical-align:-2px;margin-right:5px} @media(max-width:560px){.hr-contactbar .wrap{flex-direction:column;gap:4px}} /* marquee */ .marquee{overflow:hidden;border-block:1px solid var(--line);padding:20px 0;background:rgba(var(--overlay-rgb),.02)} .marquee .track{display:flex;gap:56px;width:max-content;animation:mq 30s linear infinite;font-family:var(--font-display); font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .marquee .track b{color:var(--text)} @keyframes mq{to{transform:translateX(-50%)}} /* pricing */ .plan{display:flex;flex-direction:column} .plan.featured{border-color:var(--gold);background:linear-gradient(170deg,rgba(227,179,34,.1),rgba(var(--overlay-rgb),.02));transform:scale(1.03)} .plan .price{font-family:var(--font-display);font-size:2.6rem;margin:8px 0 2px} .plan .price small{font-size:1rem;color:var(--muted);font-weight:400} .plan ul{list-style:none;margin:16px 0 20px;display:grid;gap:11px;flex:1} .plan ul li{padding-left:28px;position:relative;color:var(--muted);font-size:.95rem} .plan ul li::before{content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%; background:var(--green-soft);color:var(--green);font-size:.7rem;display:grid;place-items:center} .plan.featured ul li::before{background:var(--gold-soft);color:var(--gold)} /* forms */ .form{display:grid;gap:16px} .form label{font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);display:grid;gap:8px;font-weight:600} .form input,.form select,.form textarea{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line); background:rgba(var(--overlay-rgb),.035);color:var(--text);font:inherit;transition:border-color .2s,background .2s,box-shadow .2s} .form input:hover,.form select:hover,.form textarea:hover{border-color:rgba(var(--overlay-rgb),.22)} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold); background:rgba(227,179,34,.06);box-shadow:0 0 0 3px var(--gold-soft)} .form input::placeholder,.form textarea::placeholder{color:rgba(154,163,181,.55)} .form input:disabled,.form select:disabled,.form textarea:disabled{opacity:.5;cursor:not-allowed} .form textarea{min-height:130px;resize:vertical;line-height:1.5} /* native select gets a custom gold caret so it matches the dark theme */ .form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:40px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e3b322' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center} select option{background:var(--green-dark);color:var(--text)} /* checkboxes / radios pick up the brand accent */ .form input[type=checkbox],.form input[type=radio],input[type=checkbox],input[type=radio]{accent-color:var(--gold)} .form input[type=checkbox],.form input[type=radio]{width:auto;box-shadow:none} /* file input: style the browse button to match .btn */ .form input[type=file]{padding:9px 12px;cursor:pointer} .form input[type=file]::file-selector-button{font:inherit;font-weight:600;margin-right:12px;padding:8px 16px; border-radius:100px;border:0;background:var(--gold-soft);color:var(--gold);cursor:pointer;transition:.2s} .form input[type=file]::file-selector-button:hover{background:var(--gold);color:#151002} /* color input: trim the native chrome */ .form input[type=color]{padding:4px;height:44px;cursor:pointer} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:560px){.form .row{grid-template-columns:1fr}} .dropzone{border:2px dashed var(--line);border-radius:16px;padding:34px;text-align:center;color:var(--muted); transition:.3s;cursor:pointer;font-size:.94rem} .dropzone:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)} /* tables / dash */ .panel{background:linear-gradient(160deg,rgba(var(--overlay-rgb),.045),rgba(var(--overlay-rgb),.012));border:1px solid var(--line); border-radius:var(--r-lg);padding:26px} .table{width:100%;border-collapse:collapse;font-size:.93rem} .table th{color:var(--muted);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)} .table td{padding:14px;border-bottom:1px solid var(--line)} .table tr:last-child td{border-bottom:0} .pill{padding:4px 12px;border-radius:100px;font-size:.74rem;font-weight:600} .pill.ok{background:var(--green-soft);color:var(--green)} .pill.warn{background:var(--gold-soft);color:var(--gold)} .pill.no{background:var(--red-soft);color:var(--red)} .bar{height:8px;border-radius:100px;background:rgba(var(--overlay-rgb),.08);overflow:hidden} .bar i{display:block;height:100%;border-radius:100px;background:var(--grad);transition:width 1.4s var(--ease)} /* store */ .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;align-items:center} .chip{padding:9px 20px;border-radius:100px;border:1px solid var(--line);background:rgba(var(--overlay-rgb),.03); color:var(--muted);font-size:.88rem;transition:.25s} .chip:hover{color:var(--text)} .chip.on{background:var(--gold);color:#151002;border-color:transparent;font-weight:600} .search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:100px; border:1px solid var(--line);background:rgba(var(--overlay-rgb),.04)} .search input{background:none;border:0;color:var(--text);font:inherit;width:100%;outline:none} .product .ph{height:220px;border-radius:14px;margin-bottom:18px;display:grid;place-items:center;font-size:3rem;position:relative;overflow:hidden} .product .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(var(--overlay-rgb),.14) 50%,transparent 70%);transform:translateX(-110%);transition:transform .9s var(--ease)} .product:hover .ph::after{transform:translateX(110%)} .product .prc{display:flex;justify-content:space-between;align-items:center;margin-top:14px} .product .prc b{font-family:var(--font-display);font-size:1.15rem} .wish{background:none;border:0;font-size:1.2rem;color:var(--muted);transition:.25s} .wish.on,.wish:hover{color:var(--red);transform:scale(1.2)} /* admin control room — section rail + embedded editor window */ .admin-rail{position:sticky;top:70px;z-index:6;display:flex;gap:10px;flex-wrap:wrap;padding:12px; border-radius:100px;border:1px solid var(--line);background:rgba(var(--surface-rgb),.82);backdrop-filter:blur(14px)} .admin-rail .chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-body)} .admin-rail .chip i{font-size:.95em;display:inline-flex} .admin-rail .chip i svg{width:1em;height:1em} @media (max-width:720px){.admin-rail{top:60px;border-radius:var(--r-md)}} /* accordion */ .acc{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;background:rgba(var(--overlay-rgb),.02)} .acc summary{padding:18px 22px;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center} .acc summary::after{content:"+";font-size:1.3rem;color:var(--gold);transition:.3s} .acc[open] summary::after{transform:rotate(45deg)} .acc .acc-body{padding:0 22px 20px;color:var(--muted);font-size:.96rem} /* Admin CMS — per-page settings groups. Each front-end page's admin panels (e.g. every tool that edits blackgoat.html) are collapsed into one of these by default instead of all showing fully expanded at once, so picking a Control Room tab shows a short list of page names rather than a long stack of open panels — click a page open to see/edit its tools, collapse it again when done. Reuses the same open/close chevron language as .acc above, just a bigger summary row since it's grouping whole panels instead of one form. */ .admin-page-group{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:14px;overflow:hidden;background:rgba(var(--overlay-rgb),.02)} .admin-page-group>summary{padding:18px 22px;cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:10px} .admin-page-group>summary span{display:flex;align-items:center;gap:10px} .admin-page-group>summary i{width:18px;height:18px;flex:none} .admin-page-group>summary::after{content:"+";font-size:1.3rem;color:var(--gold);transition:.3s;flex:none} .admin-page-group[open]>summary::after{transform:rotate(45deg)} .admin-page-group[open]>summary{border-bottom:1px solid var(--line)} .admin-page-group .admin-page-body{padding:22px;display:grid;gap:22px} .admin-page-group .admin-page-body .panel{margin:0} /* Page admin console — the single tabbed console embedded at the bottom of a front-end page (manja/store/blackgoat/taskpays/careers/internships/ course/hr/clubadmin), replacing the old stack of always-visible panels. One console per page; its settings groups become tabs. */ .page-console{border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(var(--overlay-rgb),.02); padding:24px;margin-top:10px} .page-console-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px} .page-console-head h3{font-size:1.15rem;display:flex;align-items:center;gap:10px} .page-console-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px} .page-console-tab{padding:9px 18px;border-radius:100px;border:1px solid var(--line);background:rgba(var(--overlay-rgb),.03); color:var(--muted);font-size:.88rem;font-weight:600;transition:.25s;cursor:pointer;display:inline-flex;align-items:center;gap:7px} .page-console-tab:hover{color:var(--text)} .page-console-tab.on{background:var(--gold);color:#151002;border-color:transparent} .page-console-panel[hidden]{display:none} /* Colour swatch — pairs any `select[data-swatch]` (whose