/* ============================================================================ FundedCobra — Aura elevation layer (HOMEPAGE ONLY) ---------------------------------------------------------------------------- Loaded ONLY from index.html, and every rule is scoped under `.fc-aura` (on ). Two independent isolation layers: this file is never fetched by the other ~40 pages, AND `.fc-aura` exists on no other page — so nothing here can reach them even in principle. Translates the "Aura" dark-glass design system into FundedCobra's PURPLE brand (no emerald primary; green appears only as a sparing profit accent). Mobile-first: base rules apply everywhere, desktop lifts live in the @media (min-width:1024px) block. Never edit core/sections/style-* — see the Aura elevation plan. ============================================================================ */ .fc-aura{ /* ---- purple ramp (mirrors the brand tokens; does NOT redefine :root) ---- */ --fc-purple:#bd4dd6; --fc-purple-hi:#d98be8; --fc-purple-deep:#a33cbd; --fc-plum:#220926; --fc-plum-2:#15101c; --fc-profit:#34dc8e; /* ---- surfaces / ink ---- */ --fc-bg:#0a0a0a; --fc-bg-deep:#08070d; --fc-ink:#ffffff; --fc-ink-2:#EAE6F0; --fc-muted:#8892A4; --fc-muted-2:#6E7688; /* ---- glass ---- */ --fc-glass-fill:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.015)); --fc-glass-fill-solid:rgba(20,16,26,.72); --fc-glass-blur:blur(24px) saturate(160%); --fc-glass-brd:rgba(189,77,214,.26); --fc-glass-brd-hi:rgba(255,255,255,.16); --fc-glass-shadow:0 24px 58px -22px rgba(189,77,214,.40),0 2px 26px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.15); --fc-glass-shadow-hover:0 34px 72px -20px rgba(189,77,214,.52),0 3px 30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22); /* ---- glow / aurora ---- */ --fc-glow-core:radial-gradient(circle,rgba(189,77,214,.55) 0%,rgba(120,40,180,.22) 45%,transparent 70%); --fc-glow-cool:radial-gradient(circle,rgba(126,70,224,.38) 0%,rgba(80,40,150,.14) 50%,transparent 72%); --fc-plum-wash:radial-gradient(ellipse at 50% 120%,rgba(34,9,38,.9) 0%,transparent 60%); --fc-cta-glow:0 8px 24px rgba(189,77,214,.38); /* ---- grain (data-URI on a pseudo-element → dodges the img[src*=".svg"] hue-rotate hack) ---- */ --fc-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"); /* ---- type scale (Inter; weight 800 + tighter tracking = the display ladder) ---- */ --fc-fs-display:clamp(2.75rem,1.7rem + 3.9vw,5.25rem); --fc-fs-lead:clamp(1.0625rem,1rem + .35vw,1.25rem); --fc-fs-stat:clamp(1.75rem,1.4rem + 1.2vw,2.25rem); /* ---- spacing / radii / motion ---- */ --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px; --ease-out:cubic-bezier(.2,.7,.3,1); --ease-io:cubic-bezier(.45,0,.55,1); --dur-base:240ms; --dur-slow:320ms; --dur-reveal:640ms; --dur-breath:9s; --dur-sweep:6s; --fc-maxw:1300px; } /* brand-consistent text selection */ .fc-aura ::selection{ background:rgba(189,77,214,.35); color:#fff; } /* ======================= HERO: clean dark backdrop + VIDEO ================= */ /* The video stays. Kept visible in the middle, darkened toward the edges so it frames the content instead of competing with it. One subtle purple glow, no grain, no stacked aurora layers. */ body.fc-aura .homehero-outer{ background:var(--fc-bg-deep) !important; } body.fc-aura .hero-video-bg{ opacity:.22 !important; } body.fc-aura .hero-video-overlay{ background: radial-gradient(65% 60% at 66% 45%, rgba(189,77,214,.10) 0%, transparent 60%), radial-gradient(125% 110% at 50% 45%, transparent 38%, rgba(8,7,13,.82) 100%) !important; } body.fc-aura .homehero{ position:relative; z-index:2; } /* ======================= HERO: centered, single column ===================== */ /* SharkFunded-style: one centered stack — headline, subhead, one CTA, stat bar. No two-column split, no product pills, no second button. Clean and bold. */ body.fc-aura .homehero{ flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; max-width:900px !important; padding:var(--sp-16) var(--sp-6) var(--sp-12) !important; gap:var(--sp-8) !important; } body.fc-aura .homehero .wrapper{ max-width:820px !important; text-align:center !important; display:flex; flex-direction:column; align-items:center; } /* one small centered eyebrow */ body.fc-aura .fc-hero-eyebrow{ justify-content:center; margin:0 0 20px !important; } /* hide the product-type pills — they live in the Accounts section below */ body.fc-aura .homehero .producttypes{ display:none !important; } /* one centered CTA; drop the second button in the hero */ body.fc-aura .homehero .ctarow{ justify-content:center !important; margin-top:var(--sp-2) !important; } body.fc-aura .homehero .discordbtn{ display:none !important; } /* ======================= HERO: eyebrow + headline ========================== */ body.fc-aura .fc-hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fc-purple-hi); margin:0 0 18px; } body.fc-aura .fc-hero-eyebrow::before{ content:''; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--fc-purple)); } body.fc-aura .homehero .wrapper h1{ font-size:var(--fc-fs-display) !important; line-height:1.05 !important; font-weight:800 !important; letter-spacing:-.03em !important; color:#fff !important; text-align:center !important; margin:0 0 var(--sp-6) !important; } body.fc-aura .homehero .wrapper h1 .fc-accent{ background:linear-gradient(100deg,var(--fc-purple-hi),var(--fc-purple)); -webkit-background-clip:text; background-clip:text; color:transparent; } body.fc-aura .homehero .wrapper .subheader{ font-size:var(--fc-fs-lead) !important; line-height:1.6 !important; color:var(--fc-muted) !important; max-width:46ch !important; text-align:center !important; margin:0 auto var(--sp-8) !important; } /* ======================= HERO: product-type pills ========================= */ body.fc-aura .producttypes a{ border:1px solid var(--fc-glass-brd) !important; border-radius:var(--r-pill) !important; background:rgba(255,255,255,.03) !important; color:var(--fc-ink-2) !important; transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out) !important; } body.fc-aura .producttypes a:hover{ transform:translateY(-2px) !important; border-color:rgba(189,77,214,.55) !important; } /* ======================= HERO: CTA hierarchy (the #1 fix) ================== */ body.fc-aura .ctarow{ gap:var(--sp-4) !important; margin-top:var(--sp-6) !important; } body.fc-aura .ctarow .fundedbtn{ background:linear-gradient(180deg,var(--fc-purple-hi),var(--fc-purple-deep)) !important; border:none !important; border-radius:var(--r-pill) !important; box-shadow:var(--fc-cta-glow) !important; font-weight:700 !important; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out) !important; } body.fc-aura .ctarow .fundedbtn:hover{ transform:translateY(-2px) !important; filter:brightness(1.06) !important; box-shadow:0 12px 32px rgba(189,77,214,.5) !important; } /* secondary becomes a true ghost/glass button — visually subordinate */ body.fc-aura .ctarow .discordbtn{ background:rgba(255,255,255,.04) !important; border:1px solid var(--fc-glass-brd) !important; color:var(--fc-ink-2) !important; border-radius:var(--r-pill) !important; -webkit-backdrop-filter:var(--fc-glass-blur); backdrop-filter:var(--fc-glass-blur); transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out) !important; } body.fc-aura .ctarow .discordbtn:hover{ transform:translateY(-2px) !important; border-color:rgba(189,77,214,.55) !important; } /* ======================= HERO: compact stat bar =========================== */ /* The four stats become one centered glass strip under the CTA (was a 2x2 grid of cards). Just value + label per segment, divided by hairlines. */ body.fc-aura .hero-bento-wrap{ max-width:760px !important; width:100% !important; margin:0 auto !important; } body.fc-aura .hero-bento-wrap::before{ display:none !important; } body.fc-aura .hero-bento{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:0 !important; background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:20px !important; overflow:hidden !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } body.fc-aura .hero-bento-card{ background:transparent !important; border:none !important; box-shadow:none !important; border-right:1px solid rgba(255,255,255,.07) !important; border-radius:0 !important; padding:22px 14px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; transform:none !important; transition:background var(--dur-base) var(--ease-out) !important; } body.fc-aura .hero-bento-card:last-child{ border-right:none !important; } body.fc-aura .hero-bento-card:hover{ background:rgba(255,255,255,.04) !important; transform:none !important; } body.fc-aura .hero-bento-icon-wrap{ display:none !important; } body.fc-aura .hero-bento-desc{ display:none !important; } body.fc-aura .hero-bento-value{ font-size:clamp(1.35rem,1.05rem + 1vw,1.85rem) !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--fc-purple) !important; margin:0 !important; line-height:1.1 !important; } body.fc-aura .hero-bento-title{ font-size:12.5px !important; color:var(--fc-muted) !important; font-weight:600 !important; margin:0 !important; text-align:center !important; line-height:1.3 !important; } /* mobile: 2x2 so the labels don't crush */ @media (max-width:640px){ body.fc-aura .hero-bento{ grid-template-columns:repeat(2,1fr) !important; } body.fc-aura .hero-bento-card:nth-child(2n){ border-right:none !important; } body.fc-aura .hero-bento-card:nth-child(1), body.fc-aura .hero-bento-card:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.07) !important; } } /* ======================= entrance (one-time, calm) ======================== */ @keyframes fcReveal{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} } body.fc-aura .homehero .wrapper > *{ animation:fcReveal var(--dur-reveal) var(--ease-out) both; } body.fc-aura .fc-hero-eyebrow{ animation-delay:0ms; } body.fc-aura .homehero .wrapper h1{ animation-delay:60ms; } body.fc-aura .homehero .wrapper .subheader{ animation-delay:120ms; } body.fc-aura .homehero .wrapper .producttypes{ animation-delay:180ms; } body.fc-aura .homehero .wrapper .ctarow{ animation-delay:240ms; } body.fc-aura .hero-bento-card{ animation:fcReveal var(--dur-reveal) var(--ease-out) both; } body.fc-aura .hero-bento-card:nth-child(1){ animation-delay:300ms; } body.fc-aura .hero-bento-card:nth-child(2){ animation-delay:380ms; } body.fc-aura .hero-bento-card:nth-child(3){ animation-delay:460ms; } body.fc-aura .hero-bento-card:nth-child(4){ animation-delay:540ms; } /* ======================= desktop lifts ==================================== */ @media (min-width:1024px){ body.fc-aura .homehero{ padding:var(--sp-24) var(--sp-8) var(--sp-16) !important; gap:var(--sp-12) !important; } } /* ======================= glass fallback (no backdrop-filter) =============== */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ body.fc-aura .hero-bento-card, body.fc-aura .ctarow .discordbtn{ background:var(--fc-glass-fill-solid) !important; } } /* ======================= reduced motion =================================== */ @media (prefers-reduced-motion:reduce){ body.fc-aura *, body.fc-aura *::before, body.fc-aura *::after{ animation:none !important; transition:none !important; } /* reveal end-state must be visible so nothing stays hidden */ body.fc-aura .homehero .wrapper > *, body.fc-aura .hero-bento-card{ opacity:1 !important; transform:none !important; } } /* ============================ REELS SHELF ================================== */ /* Vertical (9:16) videos in a horizontal scroller — same on desktop + mobile. Clean and bold: dark, thin glass cards, one purple accent, native swipe. */ body.fc-aura .fc-reels{ background:var(--fc-bg-deep); padding:var(--sp-16) 0 var(--sp-16); border-bottom:1px solid rgba(255,255,255,.05); overflow:hidden; } body.fc-aura .fc-reels-head{ max-width:var(--fc-maxw); margin:0 auto var(--sp-8); padding:0 var(--sp-6); text-align:center; } body.fc-aura .fc-reels-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fc-purple-hi); margin:0 0 12px; } body.fc-aura .fc-reels-eyebrow::before{ content:''; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--fc-purple)); } body.fc-aura .fc-reels-head h2{ font-size:clamp(1.75rem,1.3rem + 1.8vw,2.75rem) !important; font-weight:800 !important; letter-spacing:-.025em !important; color:#fff !important; margin:0 !important; line-height:1.1 !important; } /* the scroller */ body.fc-aura .fc-reels-track{ display:flex; gap:var(--sp-4); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding:6px var(--sp-6) var(--sp-4); /* centre the cards when they fit; `safe` falls back to start when they overflow (mobile) so the first card stays reachable. */ justify-content:safe center; max-width:calc(var(--fc-maxw) + var(--sp-6)*2); margin:0 auto; scrollbar-width:thin; scrollbar-color:rgba(189,77,214,.4) transparent; cursor:grab; } /* while click-dragging the shelf: grab cursor + no text selection + no snap fighting */ body.fc-aura .fc-reels-track.is-dragging{ cursor:grabbing; user-select:none; scroll-snap-type:none; } /* trailing spacer keeps the last card clear of the fixed chat bubble (bottom-right) */ body.fc-aura .fc-reels-track::after{ content:''; flex:0 0 84px; } body.fc-aura .fc-reels-track::-webkit-scrollbar{ height:6px; } body.fc-aura .fc-reels-track::-webkit-scrollbar-thumb{ background:rgba(189,77,214,.35); border-radius:99px; } body.fc-aura .fc-reels-track::-webkit-scrollbar-track{ background:transparent; } /* a card */ body.fc-aura .fc-reel{ position:relative; flex:0 0 auto; width:280px; aspect-ratio:9/16; border:1px solid rgba(255,255,255,.09); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; scroll-snap-align:start; padding:0; margin:0; -webkit-appearance:none; appearance:none; /* !important: the base theme resets