:root{ --bg:#0a0612; --bg-alt:#150e22; --bg-alt2:#1e1433; --ink:#f6f3ff; --ink-dim:#ab9fc9; --ink-faint:#6e6289; --accent:#ff2ec4; --accent-dim:#c11e97; --accent-light:#ff8fe0; --accent-2:#20e8ff; --accent-3:#a53bff; --line:rgba(180,120,255,0.16); --radius:14px; --nav-h:72px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth; scrollbar-gutter:stable;} body{ background:var(--bg); color:var(--ink); font-family:'Manrope',sans-serif; line-height:1.55; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} section, .platforms, footer{scroll-margin-top:var(--nav-h);} /* ================= RULE GATE ================= */ /* #siteMain is hidden by default and only revealed once carries the "gate-ok" class. That class is only ever added by the Enter button's click handler (or, for returning visitors, by the inline script in after checking localStorage). Hiding or deleting the gate div itself does not add this class, so the main page stays hidden regardless of what happens to the gate element. */ #siteMain{display:none;} html.gate-ok #siteMain{display:block;} .rule-gate{ position:fixed; inset:0; z-index:9999; background:rgba(6,6,8,.94); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:1; transition:opacity .4s ease; } .rule-gate.fade-out{opacity:0;} .rule-gate-inner{ width:100%; max-width:420px; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:40px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:0 20px 60px -20px rgba(0,0,0,.6); } .rule-gate-logo{margin-bottom:22px;} .rule-gate-text{color:var(--ink-dim); font-size:.94rem; line-height:1.65; margin-bottom:30px;} .rule-gate-link{color:var(--accent-2); text-decoration:underline; text-underline-offset:2px;} .rule-gate-link:hover{color:var(--accent);} .rule-gate-actions{display:flex; gap:14px; width:100%;} .rule-gate-actions .btn{flex:1;} .rule-gate-privacy-modal{ position:fixed; inset:0; z-index:10000; background:rgba(6,6,8,.92); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px; } .rule-gate-privacy-modal.open{display:flex;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} } ::selection{background:var(--accent);color:#fff;} .eyebrow{ font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; color:var(--accent-2); } .script{ font-family:'Lobster',cursive; font-weight:400; font-size:2.3rem; display:inline-block; background:linear-gradient(90deg, var(--accent) 0%, var(--accent-3) 60%, var(--accent-2) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 14px rgba(255,46,196,.45)); } h1,h2,h3{ font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-.01em; line-height:1.08; } .section-head h2, .platforms h2{ text-transform:uppercase; font-size:1.5rem; letter-spacing:.02em; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(90deg, var(--accent) 0%, var(--accent-3) 100%); color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:14px 26px; border-radius:6px; border:none; outline:none; appearance:none; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; white-space:nowrap; box-shadow:0 0 0 rgba(255,46,196,0); } .btn:hover{filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 4px 14px rgba(255,46,196,.35);} .btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.25); color:var(--ink); } .btn.ghost:hover{border-color:var(--accent-2); background:rgba(32,232,255,.08); box-shadow:0 4px 12px rgba(32,232,255,.18);} .wrap{max-width:1180px; margin:0 auto; padding:0 24px;} /* ---------- Reveal on scroll ---------- */ .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;} .reveal.is-visible{opacity:1; transform:translateY(0);} .reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;} .reveal-stagger.is-visible > *{opacity:1; transform:translateY(0);} .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s;} .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.12s;} .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.19s;} .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s;} .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.33s;} .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.40s;} /* ---------- Hover-media style (shared) ---------- */ .media-hover{position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); cursor:pointer;} .media-hover img{transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease, opacity .4s ease;} .media-hover video{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; pointer-events:none; } .media-hover::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, rgba(10,6,18,0) 40%, rgba(10,6,18,.85) 100%); opacity:.7; transition:opacity .4s ease, box-shadow .4s ease; pointer-events:none; z-index:1; } .media-hover:hover img{transform:scale(1.08); filter:saturate(1.15);} .media-hover:hover::after{opacity:.4; box-shadow:inset 0 0 0 2px var(--accent);} .media-hover:hover{box-shadow:0 10px 22px -10px rgba(255,45,120,.35);} /* Preview visibility is driven by JS (adds/removes .preview-playing) rather than pure :hover, so a preview can auto-stop after a few seconds even while the cursor is still resting on the card. */ .media-hover.preview-playing video{opacity:1;} .media-hover.has-video-preview.preview-playing img{opacity:0;} .play-btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; background:rgba(10,6,18,.55); border:2px solid #fff; display:flex; align-items:center; justify-content:center; transition:transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; z-index:2; } .play-btn svg{width:18px; height:18px; fill:#fff;} .media-hover:hover .play-btn, .video-card:hover .play-btn{transform:translate(-50%,-50%) scale(1.1); background:var(--accent); border-color:var(--accent); box-shadow:0 0 10px rgba(255,46,196,.45);} /* ================= NAV ================= */ header{ position:sticky; top:0; z-index:200; height:var(--nav-h); display:flex; align-items:center; background:rgba(10,10,12,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav-inner{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;} .logo{font-family:'Lobster',cursive; font-weight:400; font-size:1.8rem; letter-spacing:0; display:flex; align-items:baseline; gap:0;} .hot{color:var(--accent); filter:drop-shadow(0 0 10px rgba(255,46,196,.5));} .navlinks{display:flex; gap:14px; align-items:center;} .navlinks a{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); position:relative; padding:6px 0; transition:color .25s ease; white-space:nowrap; } .navlinks a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent-2); box-shadow:0 0 4px var(--accent-2); transition:width .3s ease; } .navlinks a:hover, .navlinks a.active{color:var(--ink);} .navlinks a:hover::after, .navlinks a.active::after{width:100%;} .nav-actions{display:flex; align-items:center; gap:14px;} .hamburger{display:none; flex-direction:column; gap:5px; width:26px;} .hamburger span{height:2px; width:100%; background:var(--ink); transition:transform .3s ease, opacity .3s ease;} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .hamburger.open span:nth-child(2){opacity:0;} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-panel{ position:fixed; top:var(--nav-h); left:0; right:0; z-index:190; background:var(--bg-alt); border-bottom:1px solid var(--line); display:flex; flex-direction:column; padding:10px 24px 20px; transform:translateY(-110%); transition:transform .35s ease; } .mobile-panel.open{transform:translateY(0);} .mobile-panel a{ padding:14px 0; border-bottom:1px solid var(--line); font-family:'Poppins',sans-serif; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; color:var(--ink-dim); } .mobile-panel a:hover{color:var(--accent);} .mobile-panel a.mobile-panel-cta{ border-bottom:none; color:#fff; padding:14px 26px; margin-top:14px; text-align:center; } .mobile-panel a.mobile-panel-cta:hover{color:#fff;} /* ================= HERO ================= */ .hero{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg);} .hero-bg{position:absolute; inset:0; z-index:0;} .hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:saturate(1.15);} .hero-overlay{ position:absolute; inset:0; z-index:1; background: radial-gradient(ellipse 60% 50% at 85% 15%, rgba(32,232,255,.22) 0%, rgba(32,232,255,0) 60%), radial-gradient(ellipse 55% 55% at 15% 85%, rgba(165,59,255,.28) 0%, rgba(165,59,255,0) 60%), linear-gradient(180deg, rgba(10,6,18,.15) 0%, rgba(10,6,18,.1) 45%, rgba(10,6,18,.75) 100%), linear-gradient(90deg, rgba(10,6,18,.4) 0%, rgba(10,6,18,.1) 40%, rgba(10,6,18,.05) 75%); } .hero-cta{ position:absolute; right:0; bottom:0; z-index:3; font-size:clamp(.65rem, 1.4vw, .95rem); padding:1.1em 2em; border-radius:10px 0 0 0; } /* ================= INTRO ================= */ .intro{padding:52px 0;} .intro .hero-copy{max-width:780px; margin:0 auto; text-align:center;} .intro .hero-copy p{margin-left:auto; margin-right:auto;} .hero-copy p{color:var(--ink-dim); max-width:56ch; margin:22px 0 32px; font-size:1.2rem; line-height:1.6; overflow-wrap:break-word;} .intro h1{font-family:'Lobster',cursive; font-weight:400; font-size:clamp(5.1rem, 10.8vw, 7.5rem); letter-spacing:0; margin-top:.05em; overflow-wrap:break-word;} /* ================= ANNOUNCEMENT ================= */ .announce{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt); } .announce .wrap{display:flex; align-items:center; gap:16px; padding:16px 24px; flex-wrap:wrap;} .announce-badge{ display:flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); padding:6px 12px; border-radius:20px; box-shadow:0 0 8px rgba(255,46,196,.2); } .announce-text{flex:1; min-width:200px; color:var(--ink-dim); font-size:.92rem;} .announce .btn.ghost{padding:9px 16px; font-size:.7rem;} /* ================= SECTION HEADERS ================= */ .section{padding:56px 0;} .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap;} .section-head.centered{justify-content:center; text-align:center; position:relative;} .section-head.centered .view-all{position:absolute; right:0; bottom:6px;} .section-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);} .section-head .view-all{font-family:'Poppins',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); border-bottom:1px solid var(--ink-faint); padding-bottom:2px; transition:color .25s ease, border-color .25s ease;} .section-head .view-all:hover{color:var(--accent); border-color:var(--accent);} /* ================= TOP VIDEOS ================= */ .video-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;} .video-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-alt); cursor:pointer; transition:box-shadow .3s ease, border-color .3s ease;} .video-card:hover{border-color:var(--accent); box-shadow:0 10px 22px -10px rgba(255,45,120,.35);} .video-thumb{position:relative; aspect-ratio:16/9; overflow:hidden;} .video-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease, opacity .4s ease;} .video-thumb video{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; pointer-events:none; } .video-card.preview-playing .video-thumb video{opacity:1;} .video-card.preview-playing .video-thumb img{opacity:0;} .video-card:hover .video-thumb img{transform:scale(1.08); filter:saturate(1.15);} .video-caption{padding:16px 18px; font-weight:700; font-size:1rem;} .feature-video{ margin-top:26px; display:grid; grid-template-columns:.85fr 1.15fr; gap:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--bg-alt); } .feature-copy{padding:40px; display:flex; flex-direction:column; justify-content:center; gap:14px;} .feature-copy .eyebrow{color:var(--accent-light);} .feature-copy h3{font-size:clamp(1.5rem,3vw,2.1rem);} .feature-copy p{color:var(--ink-dim); max-width:42ch;} .feature-media{position:relative; min-height:280px;} .feature-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;} /* ================= PLATFORMS ================= */ .platforms{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .creators{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .platform-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;} .platform-card{background:var(--bg-alt2); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; display:flex; flex-direction:column; gap:10px; transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;} .platform-card:hover{background:#271a3d; transform:translateY(-3px); border-color:var(--accent); box-shadow:0 8px 18px -10px rgba(255,45,120,.35);} .platform-icon{width:34px; height:34px; color:var(--accent-2);} /* The icon placeholders ([data-platform-icon]) get filled in by JS with an . A plain is inline by default, which leaves baseline whitespace around inline content like an SVG and throws off centering — this makes the span shrink-wrap tightly around its icon and center that icon within its own tiny box. It does NOT force the icon's position within its parent (e.g. Our Platforms keeps its icons left-aligned like before; contexts that want their icon centered already do that centering on the parent element). */ [data-platform-icon]{display:inline-flex; align-items:center; justify-content:center; width:fit-content; line-height:0;} .platform-card h4{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.02rem;} .platform-card p{color:var(--ink-dim); font-size:.85rem; flex:1;} .platform-card .btn{margin-top:6px; padding:11px 16px; font-size:.68rem;} .btn-block{width:100%;} /* ================= SERIES ================= */ .series-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; align-items:start;} .series-card{aspect-ratio:16/9; position:relative; width:100%;} .series-card img{display:block; width:100%; height:100%; object-fit:cover;} .series-name{position:absolute; left:10px; bottom:10px; right:10px; z-index:2; font-size:.78rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* ================= CREATORS ================= */ .creator-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; text-align:center;} .creator-avatar{width:132px; height:132px; border-radius:50%; margin:0 auto 16px; overflow:hidden; border:2px solid var(--line); position:relative;} .creator-avatar img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;} .creator-card:hover .creator-avatar{border-color:var(--accent-3); box-shadow:0 0 0 4px rgba(165,59,255,.15);} .creator-card:hover .creator-avatar img{transform:scale(1.1);} .creator-card h4{font-family:'Manrope',sans-serif; font-weight:800; color:var(--accent); font-size:1.05rem;} .creator-card .role{color:var(--ink-dim); font-size:.84rem; margin:4px 0 12px;} .social-row{display:flex; gap:14px; justify-content:center;} .social-row a{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color .25s ease, color .25s ease, transform .25s ease;} .social-row a:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-3px);} .social-row svg{width:15px; height:15px; fill:currentColor;} .connect-social{display:flex; justify-content:center; gap:18px; margin-bottom:40px;} .connect-social a{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); transition:border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; } .connect-social a:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 18px -8px rgba(255,45,120,.4);} .connect-social svg{width:21px; height:21px; fill:currentColor;} /* ================= UPCOMING ================= */ .upcoming{ display:grid; grid-template-columns:.95fr 1.05fr; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--bg-alt); } .upcoming-copy{padding:44px; display:flex; flex-direction:column; justify-content:center; gap:14px;} .upcoming-copy h3{font-size:clamp(1.6rem,3.4vw,2.3rem);} .upcoming-copy p{color:var(--ink-dim); max-width:40ch;} .upcoming-media{position:relative; min-height:320px;} .upcoming-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;} .soon-tag{font-family:'Lobster',cursive; font-weight:400; color:var(--accent-light); font-size:1.5rem; display:inline-block;} .upcoming-cta{margin-top:6px;} /* ================= FEEDS ================= */ .feed-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;} .feed-panel{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:16px; max-height:640px;} .feed-head{display:flex; align-items:center; justify-content:space-between;} .feed-head h3{font-family:'Manrope',sans-serif; font-weight:800; font-size:1rem; color:var(--accent); display:flex; align-items:center; gap:8px;} .feed-head .view-all{font-size:.68rem;} .feed-body{overflow-y:auto; overflow-x:hidden; flex:1; padding-right:4px; max-width:100%;} .feed-body::-webkit-scrollbar{width:6px;} .feed-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px;} .feed-panel{overflow-x:hidden;} /* Force X/Instagram embeds to shrink to their container instead of overflowing off-screen on narrow viewports */ .feed-body iframe, .feed-body .twitter-timeline, .feed-body .instagram-media{ max-width:100% !important; width:100% !important; min-width:0 !important; } .embed-add{display:flex; gap:8px;} .embed-add input{ flex:1; background:var(--bg-alt2); border:1px solid var(--line); color:var(--ink); padding:10px 12px; border-radius:6px; font-size:.78rem; font-family:'Poppins',sans-serif; font-weight:600; } .embed-add input::placeholder{color:var(--ink-faint);} .embed-add button{background:var(--accent); color:#fff; padding:0 16px; border:none; border-radius:6px; font-size:.72rem; font-family:'Poppins',sans-serif; font-weight:600; text-transform:uppercase; text-align:center; cursor:pointer;} .embed-note{font-size:.7rem; color:var(--ink-faint); line-height:1.5;} .embed-slot{margin-bottom:14px;} /* ================= FOOTER ================= */ footer{border-top:1px solid var(--line); padding:60px 0 30px; background:var(--bg-alt);} .footer-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr 1.2fr; gap:30px; padding-bottom:40px;} .footer-grid h5{font-family:'Poppins',sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:14px;} .footer-grid a, .footer-grid p{color:var(--ink-faint); font-size:.86rem; display:block; margin-bottom:9px;} .footer-grid a:hover{color:var(--accent);} .footer-brand .logo{margin-bottom:10px;} .footer-eyebrow{display:block; margin-bottom:16px;} .footer-blurb{max-width:32ch;} .foot-copyright{color:var(--ink-faint); font-size:.8rem;} .newsletter-row{display:flex; gap:8px; margin-top:6px;} .newsletter-row input{flex:1; background:var(--bg-alt2); border:1px solid var(--line); color:var(--ink); padding:10px 12px; border-radius:6px; font-size:.8rem;} .newsletter-row button{background:var(--accent); color:#fff; padding:0 16px; border:none; border-radius:6px; font-size:.7rem; font-family:'Poppins',sans-serif; font-weight:600; text-transform:uppercase; text-align:center; cursor:pointer;} /* ---------- Brevo newsletter form override (reskins Brevo's default look) ---------- */ .brevo-newsletter #sib-container{background:transparent; border:none; max-width:none; padding:0;} .brevo-newsletter .sib-form-message-panel{ display:none; font-family:'Poppins',sans-serif; font-size:.75rem; padding:10px 12px; border-radius:6px; margin-bottom:10px; } .brevo-newsletter #error-message{color:#ff4d4d; background:rgba(255,77,77,.1); border:1px solid rgba(255,77,77,.4);} .brevo-newsletter #success-message{color:#2ee6a8; background:rgba(46,230,168,.1); border:1px solid rgba(46,230,168,.4);} .brevo-newsletter .newsletter-row input::placeholder{color:var(--ink-faint);} .brevo-newsletter .brevo-declaration{font-size:.65rem; color:var(--ink-faint); line-height:1.5; margin-top:10px;} .brevo-newsletter .brevo-declaration a{color:var(--ink-dim); text-decoration:underline;} .foot-bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;} .foot-social{display:flex; gap:14px;} .foot-social a{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color .25s, color .25s;} .foot-social a:hover{border-color:var(--accent); color:var(--accent);} .foot-social svg{width:14px; height:14px; fill:currentColor;} .toast-msg{font-size:.72rem; color:var(--accent-light); font-family:'Poppins',sans-serif; font-weight:600; min-height:16px;} /* ================= LIGHTBOX ================= */ .lightbox{ position:fixed; inset:0; z-index:500; background:rgba(6,6,8,.92); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; padding:24px; } .lightbox.open{opacity:1; pointer-events:all;} .lightbox-inner{width:100%; max-width:960px; position:relative; transform:scale(.94); transition:transform .3s ease;} .lightbox.open .lightbox-inner{transform:scale(1);} .lightbox-video{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden;} .lightbox-player{width:100%; height:100%; object-fit:contain; display:block; background:#000;} .lightbox-title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.05rem; text-align:center; margin-top:16px; } .lightbox-title:empty{display:none;} .lightbox-description{ color:var(--ink-dim); font-size:.88rem; line-height:1.6; text-align:center; max-width:600px; margin:8px auto 0; } .lightbox-description:empty{display:none; margin:0;} .lightbox-platforms{margin-top:18px; text-align:center;} .lightbox-platforms-label{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:12px; } .lightbox-platforms-row{display:flex; justify-content:center; gap:16px;} .platform-link{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); transition:border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .25s ease; } .platform-link svg{width:20px; height:20px;} .platform-link:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-3px); box-shadow:0 6px 16px -6px rgba(255,45,120,.4);} .platform-link.is-disabled{display:none;} .lightbox-close{ position:absolute; top:-46px; right:0; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; transition:border-color .25s ease, background .25s ease; } .lightbox-close:hover{border-color:var(--accent); background:var(--accent);} .lightbox-close svg{width:16px; height:16px; fill:#fff;} /* Any modal card built on .join-modal-inner scrolls internally (overflow-y:auto), which clips a close button floating above it the way the plain video lightbox's does — so pin it inside the card instead for every modal that uses this card style (series, info, contact, join, privacy policy, etc). */ .join-modal-inner .lightbox-close{ top:14px; right:14px; background:rgba(10,6,18,.65); backdrop-filter:blur(4px); z-index:2; } /* ================= SCROLL TO TOP ================= */ .scroll-top{ position:fixed; bottom:24px; right:24px; z-index:150; width:46px; height:46px; border-radius:50%; background:linear-gradient(90deg, var(--accent) 0%, var(--accent-3) 100%); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(255,45,120,.5); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s ease, transform .3s ease, visibility .3s, filter .25s ease; } .scroll-top.visible{opacity:1; visibility:visible; transform:translateY(0);} .scroll-top:hover{filter:brightness(1.1); transform:translateY(-3px);} .scroll-top svg{width:20px; height:20px;} /* ================= JOIN MODAL ================= */ .join-modal-inner{ width:100%; max-width:480px; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:36px; position:relative; max-height:88vh; overflow-y:auto; transform:scale(.94); transition:transform .3s ease; } .lightbox.open .join-modal-inner{transform:scale(1);} .join-modal-title{font-family:'Poppins',sans-serif; font-weight:800; font-size:1.4rem; text-align:center; margin-bottom:24px;} .info-modal-inner{max-width:620px;} .info-modal-body{ max-height:60vh; overflow-y:auto; color:var(--ink-dim); font-size:.88rem; line-height:1.75; padding-right:6px; } .info-modal-body::-webkit-scrollbar{width:6px;} .info-modal-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px;} .info-modal-body h4{ font-family:'Poppins',sans-serif; font-weight:700; font-size:.95rem; color:var(--ink); margin:18px 0 8px; } .info-modal-body h4:first-child{margin-top:0;} .info-modal-body p{margin-bottom:12px;} .info-modal-body ul{margin:0 0 12px 18px;} .info-modal-body li{margin-bottom:6px;} .info-modal-body strong{color:var(--ink);} .join-platform-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px;} .notify-empty{color:var(--ink-dim); font-size:.9rem; text-align:center; padding:24px 0;} .join-platform-card{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 12px; border:1px solid var(--line); border-radius:10px; color:var(--ink-dim); transition:border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; } .join-platform-card:hover{border-color:var(--accent); color:var(--ink); transform:translateY(-3px); box-shadow:0 10px 22px -10px rgba(255,45,120,.35);} .join-platform-card .platform-icon{width:28px; height:28px; color:var(--accent-2);} .join-platform-card span{font-family:'Poppins',sans-serif; font-weight:600; font-size:.82rem;} .join-request-toggle{ display:block; width:100%; text-align:center; background:none; border:none; color:var(--ink-dim); font-family:'Poppins',sans-serif; font-size:.82rem; font-weight:500; padding:8px 0; cursor:pointer; } .join-request-toggle span{color:var(--accent); font-weight:700; text-decoration:underline;} .join-request-toggle:hover{color:var(--ink);} .join-request-form{max-height:0; overflow:hidden; transition:max-height .4s ease;} .join-request-form.open{max-height:600px;} .join-request-form form{padding-top:18px; display:flex; flex-direction:column; gap:14px;} #contactForm{display:flex; flex-direction:column; gap:16px;} .join-request-fields{display:flex; flex-direction:column; gap:14px; transition:opacity .3s ease, max-height .3s ease; overflow:hidden;} .join-request-fields.is-hidden{opacity:0; max-height:0; gap:0; pointer-events:none;} .btn.is-sent{background:linear-gradient(90deg, #2ee6a8 0%, #20c9e8 100%); cursor:default;} .btn.is-sent:hover{transform:none; box-shadow:none; filter:none;} #site-request-error-message, #site-request-success-message{ display:none; font-family:'Poppins',sans-serif; font-size:.75rem; padding:10px 12px; border-radius:6px; margin-bottom:10px; } #site-request-error-message{color:#ff4d4d; background:rgba(255,77,77,.1); border:1px solid rgba(255,77,77,.4);} #site-request-success-message{color:#2ee6a8; background:rgba(46,230,168,.1); border:1px solid rgba(46,230,168,.4);} .join-field{display:flex; flex-direction:column; gap:6px;} .join-field span{font-family:'Poppins',sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim);} .required-mark{color:#ff4d4d; font-style:normal; margin-left:1px;} .join-field input, .join-field textarea{ background:var(--bg-alt2); border:1px solid var(--line); color:var(--ink); padding:10px 12px; border-radius:6px; font-size:.88rem; font-family:'Manrope',sans-serif; transition:border-color .2s ease, box-shadow .2s ease; resize:vertical; } /* Neutralize the browser's own native red/green validation glow (:invalid/:valid render regardless of the novalidate attribute) so the only highlight visitors ever see is our own .field-error state. */ .join-field input:invalid, .join-field textarea:invalid, .join-field input:valid, .join-field textarea:valid{ box-shadow:none; outline:none; } .join-field input.field-error, .join-field textarea.field-error{ border-color:#ff4d4d; box-shadow:0 0 0 1px #ff4d4d; } .join-radio{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-dim);} .join-radio input{accent-color:var(--accent); width:16px; height:16px;} /* ================= RESPONSIVE ================= */ @media (max-width:1120px){ .platform-grid{grid-template-columns:repeat(2,1fr);} .series-grid{grid-template-columns:repeat(3,1fr);} .creator-grid{grid-template-columns:repeat(3,1fr); gap:18px;} .footer-grid{grid-template-columns:1fr 1fr; gap:34px;} } @media (max-width:900px){ .navlinks{display:none;} .hamburger{display:flex;} .series-grid{grid-template-columns:repeat(2,1fr);} /* keep 2-column layout on tablets, just tighten the copy padding */ .feature-copy, .upcoming-copy{padding:30px;} } @media (max-width:760px){ .intro h1{font-size:clamp(2.3rem, 10.8vw, 5.1rem);} .script{font-size:clamp(1.3rem, 5vw, 2.3rem);} /* below tablet width: stack text above video, and let the video scale by real aspect ratio instead of a fixed min-height (fixed heights were stretching it into a thin smashed strip) */ .feature-video, .upcoming{grid-template-columns:1fr;} .feature-media, .upcoming-media{min-height:0;} .feature-media, .feature-media img, .upcoming-media, .upcoming-media img{aspect-ratio:16/9;} .feature-media img, .upcoming-media img{position:static; width:100%; height:100%;} } @media (max-width:680px){ .join-modal-inner{padding:26px 20px;} .scroll-top{width:42px; height:42px; bottom:18px; right:18px;} .wrap{padding:0 18px;} .section{padding:42px 0;} .video-grid{grid-template-columns:1fr;} .series-grid{grid-template-columns:1fr;} .creator-grid{grid-template-columns:1fr; max-width:280px; margin:0 auto;} .feed-grid{grid-template-columns:1fr;} .platform-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;} .announce .wrap{flex-direction:column; align-items:center; text-align:center; padding:14px 18px;} .announce-text{min-width:0;} .hero-copy p{font-size:1.02rem;} .intro{padding:36px 0;} /* keep "View All" links from overlapping centered titles */ .section-head.centered{flex-direction:column; align-items:center; gap:8px;} .section-head.centered .view-all{position:static;} /* tighter padding on split panels so copy isn't cramped */ .feature-copy, .upcoming-copy{padding:26px 22px;} .platform-card{padding:20px 18px;} /* nav actions: shrink the always-visible Join Now button so it doesn't crowd the logo/hamburger on narrow phones */ .nav-actions{gap:8px;} .nav-actions .btn{padding:10px 14px; font-size:.66rem;} .logo{font-size:1.6rem;} /* lightbox close: pin to the corner of the frame instead of floating above it, so it can't get clipped on short viewports */ .lightbox{padding:14px;} .lightbox-close{position:absolute; top:10px; right:10px; background:rgba(10,6,18,.65); backdrop-filter:blur(4px);} /* stack input+button rows instead of squeezing them side by side */ .embed-add{flex-direction:column;} .embed-add button{padding:10px 0;} .newsletter-row{flex-direction:column;} .newsletter-row button{padding:10px 0;} }