:root{ --canvas:#ffffff; --panel:#ffffff; --panel-2:#f1f2f6; --line:#dcdfe6; --text:#000000; --muted:#333333; --blue:#3b5bdb; --purple:#8b5cf6; --grad: linear-gradient(135deg, var(--blue), var(--purple)); --ae:#ff7a52; --pr:#0e93b8; --ps:#3b5bdb; --gl:#d94a8c; --rc-fg:#000000; /* client strip text: black on the white theme */ } /* ---------- Website Color Theme (Admin Panel → Website Color Theme) ---------- Default (no attribute, or data-theme="white") is the light theme above. Admin's "Black" choice flips every variable to the original dark palette — app.js sets this attribute on from the saved site-theme setting. */ :root[data-theme="black"]{ --canvas:#12141c; --panel:#1a1d29; --panel-2:#232735; --line:#2c303e; --text:#e7e8f0; --muted:#9a9db3; --blue:#6d94ff; --purple:#b083ff; --ae:#ff7a52; --pr:#33c6ee; --ps:#6d94ff; --gl:#ff7fb8; --rc-fg:#ffffff; /* client strip text: white on the black theme */ } /* Admin Panel + every admin dashboard sub-page always stays dark, no matter which theme (White/Black) is chosen for the public site — only what regular visitors see follows that choice. */ #admin-panel-sec, #revenue-dashboard-sec, #course-sales-dashboard-sec, #project-sales-dashboard-sec, #subscription-dashboard-sec, #intro-video-dashboard-sec, #hero-photo-dashboard-sec, #webinar-dashboard-sec, #plugin-license-dashboard-sec, #license-admin-sec{ --canvas:#12141c; --panel:#1a1d29; --panel-2:#232735; --line:#2c303e; --text:#ffffff; --muted:#ffffff; --blue:#6d94ff; --purple:#b083ff; --ae:#ff7a52; --pr:#33c6ee; --ps:#6d94ff; --gl:#ff7fb8; color:#ffffff; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ background:var(--canvas); color:var(--text); font-family:'Inter', sans-serif; overflow-x:hidden; } h1,h2,h3,.display{font-family:'Sora', sans-serif;} .mono{font-family:'JetBrains Mono', monospace; letter-spacing:.02em;} a{color:inherit; text-decoration:none;} button{font-family:inherit; cursor:pointer; border:none; color:inherit;} /* ---------- TOP STRIP ---------- */ .topstrip{ background:var(--panel-2); color:var(--text); text-align:center; font-size:13px; font-weight:600; padding:8px 12px; letter-spacing:.02em; } /* ---------- NAV ---------- */ header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } :root[data-theme="black"] header{ background:rgba(18,20,28,.85); } /* Top gradient strip (was an empty 20px bar) — now carries the Course Query number. The number "pops" gently (small zoom in/out) every couple of seconds. */ .topbar{ display:flex; align-items:center; justify-content:center; min-height:30px; width:100%; padding:3px 12px; background: linear-gradient(90deg, var(--blue), var(--purple)); } /* Bigger, solid yellow pill (same yellow as the "Become An Artboard Member" button) so it stands out on the blue/purple strip */ .topbar-pill{ display:inline-flex; align-items:center; gap:6px; color:#1a102f; font-size:11.2px; line-height:1; white-space:nowrap; padding:6px 14px; border-radius:10px; background:#ffbe2e; border:1.5px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.28); text-decoration:none; cursor:pointer; animation:tbPop 2.4s ease-in-out infinite; } .topbar-pill:hover{background:#ffd056; animation-play-state:paused;} .topbar-pill .tb-ic{width:10.5px; height:10.5px; display:inline-flex; flex-shrink:0; color:#000;} .topbar-pill .tb-label{font-weight:600;} .topbar-pill .tb-num{font-weight:800; font-size:12px; letter-spacing:.02em;} @keyframes tbPop{ 0%,60%,100%{transform:scale(1);} 75%{transform:scale(1.07);} 88%{transform:scale(1.02);} } @media(max-width:480px){ .topbar{min-height:28px;} .topbar-pill{font-size:10px; gap:4px; padding:5px 10px;} .topbar-pill .tb-ic{width:9px; height:9px;} .topbar-pill .tb-num{font-size:10.5px;} } @media(max-width:350px){ .topbar-pill{font-size:9.5px; gap:4px; padding:5px 8px;} .topbar-pill .tb-num{font-size:10px;} } @media (prefers-reduced-motion: reduce){ .topbar-pill{animation:none;} } nav{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:6px 28px; } .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; background:none; padding:0; border-radius:0; width:fit-content;} .nav-logo-img{height:80px; width:auto; display:block; object-fit:contain;} .logo svg{width:30px;height:30px;} .navlinks{display:flex; align-items:center; gap:6px;} .navlinks > *{position:relative;} .navbtn{ background:none; color:var(--text); font-size:16px; font-weight:700; padding:9px 14px; border-radius:8px; display:flex; align-items:center; gap:5px; transition:background .15s; } .navbtn{white-space:nowrap;} @media(min-width:881px) and (max-width:1060px){ .navbtn{font-size:14.5px; padding:9px 8px;} .cart-pill{padding:8px 10px; font-size:13.5px;} .navlinks{gap:2px;} } .navbtn:hover{background:var(--panel-2);} .navbtn.active{background:var(--panel-2); color:var(--text);} .caret{font-size:10px; opacity:.7; transition:transform .15s;} .navbtn.open .caret{transform:rotate(180deg);} .cart-pill{ display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line); padding:8px 13px; border-radius:20px; font-size:14.5px; } /* Cart icon: solid black (white in the black theme) and bigger than the old emoji */ .cart-pill .cart-ic{width:23px; height:23px; display:inline-flex; flex-shrink:0; color:var(--text);} .badge{ background:var(--grad); color:#fff; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:10px; } /* dropdown panel (Resources / Login) */ .dropdown{ position:absolute; top:calc(100% + 8px); right:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; width:230px; box-shadow:0 20px 40px rgba(0,0,0,.4); display:none; z-index:60; } .dropdown.show{display:block; animation:fade .15s ease;} @keyframes fade{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}} .dropdown a, .dropdown .drow{ display:block; padding:8px 10px; border-radius:7px; font-size:13.5px; color:var(--muted); } .dropdown a:hover{background:var(--panel-2); color:var(--text);} /* auth panel */ .authbox{width:290px;} .auth-title{font-size:13.5px; font-weight:700; margin-bottom:12px; color:var(--text);} .purchase-item{ display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin-bottom:8px; font-size:12.5px; } .purchase-item .pname{color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px;} .purchase-item .pprice{color:var(--muted); flex-shrink:0;} .watch-course-btn{ background:var(--grad); color:#fff; font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:6px; width:100%; margin-top:4px; } .purchase-empty{font-size:12.5px; color:var(--muted); text-align:center; padding:20px 0;} .authtabs{display:flex; background:var(--panel-2); border-radius:8px; padding:3px; margin-bottom:14px;} .authtab{flex:1; text-align:center; padding:7px 0; border-radius:6px; font-size:13px; font-weight:600; color:var(--muted); background:none;} .authtab.active{background:var(--grad); color:#fff;} .authbox input{ width:100%; background:var(--canvas); border:1px solid var(--line); color:var(--text); padding:9px 11px; border-radius:7px; font-size:13.5px; margin-bottom:9px; } .authbox input:focus{outline:none; border-color:var(--blue);} .authsubmit{ width:100%; background:var(--grad); color:#fff; font-weight:700; font-size:13.5px; padding:10px 0; border-radius:7px; margin-top:2px; } .authhint{font-size:11px; color:var(--muted); text-align:center; margin-top:9px;} /* ---------- HERO ---------- */ .hero{ position:relative; max-width:1280px; margin:0 auto; padding:70px 28px 90px; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; border-bottom:1px solid rgba(255,255,255,.08); isolation:isolate; } .hero::before{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background: radial-gradient(60% 70% at 88% 25%, rgba(170,110,255,.42), transparent 60%), radial-gradient(50% 60% at 6% 92%, rgba(255,190,60,.14), transparent 60%), linear-gradient(120deg, #2d2278 0%, #4335a8 55%, #382b8f 100%); } .hero, .hero h1, .hero p.sub, .hero .eyebrow, .hero .featrow div{color:#f2f1f6;} .hero .eyebrow, .hero p.sub, .hero .featrow div{color:rgba(242,241,246,.72);} .ruler-h{position:absolute; top:0; left:28px; right:28px; height:22px; display:flex;} .ruler-h span{flex:1; border-left:1px solid rgba(255,255,255,.12); font-size:9px; color:rgba(255,255,255,.4); padding-left:3px;} .eyebrow{display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13.5px; margin-bottom:22px;} .avatars{display:flex;} .avatars span{ width:24px;height:24px;border-radius:50%; background:var(--grad); border:2px solid #382b8f; margin-left:-8px; display:inline-block; } .avatars span:first-child{margin-left:0;} .hero h1{font-size:52px; font-weight:800; line-height:1.06; margin-bottom:20px;} .hero h1 em{font-style:normal; color:#ffbe2e;} .hero p.sub{font-size:17px; max-width:460px; margin-bottom:30px; line-height:1.55;} .cta{ background:#ffbe2e; color:#1a102f; font-weight:700; font-size:14.5px; padding:14px 26px; border-radius:9px; display:inline-block; box-shadow:0 10px 30px rgba(255,190,46,.25); } .featrow{display:flex; gap:24px; margin-top:30px; flex-wrap:wrap;} .featrow div{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted);} /* hero visual: photo + floating mock */ .hero-visual{position:relative;} .hero-photo-wrap{ position:relative; overflow:visible; display:flex; align-items:flex-start; justify-content:center; /* banner box stays this size; anything past it (the extra hanging bit) is clipped */ height:calc(420px - 1in); } .hero-photo, .webinar-hero-photo{ width:100%; height:100%; display:block; object-fit:contain; object-position:center top; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); -webkit-mask-image:linear-gradient(to bottom, #000 65%, transparent 100%); mask-image:linear-gradient(to bottom, #000 65%, transparent 100%); /* Scale/position is applied inline by renderHeroPhoto()/renderWebImgPhoto() from the Hero Photo / Webinar Image dashboards' saved settings; this is just the pre-JS fallback. */ transform:scale(1.32); transform-origin:center top; } @media(max-width:880px){ .hero-photo-wrap{height:calc(320px - 1in);} } /* hero artboard mock */ .artboard-mock{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.45); } .mock-top{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--panel-2); } .mock-dot{width:9px;height:9px;border-radius:50%; background:#484755;} .mock-title{margin-left:10px; font-size:11.5px; color:var(--muted);} .mock-body{padding:22px; position:relative;} #cursorTag{ position:absolute; background:var(--grad); color:#fff; font-size:10px; padding:2px 7px; border-radius:5px; pointer-events:none; opacity:0; transition:opacity .1s; z-index:5; } .layerlist{display:flex; flex-direction:column; gap:9px;} .layerrow{ display:flex; align-items:center; gap:10px; background:var(--canvas); border:1px solid var(--line); padding:10px 12px; border-radius:8px; font-size:12.5px; } .toolchip{ width:26px;height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; color:#fff; flex-shrink:0; } .layerrow .lname{flex:1; color:var(--text); font-weight:500;} .layerrow .lmeta{color:var(--muted); font-size:11px;} /* ---------- SECTION SHELL ---------- */ .section{max-width:1280px; margin:0 auto; padding:60px 28px; display:block; scroll-margin-top:90px;} .hero.sec-hidden, .section.sec-hidden{display:none;} /* Webinar page now uses the same two-column layout as the homepage hero (photo visible on the right). Everything inside the left text column (title, countdown, Join/Reserve button, feature row) is left-aligned, same as the homepage hero. */ #webinarPageContent{width:100%; text-align:left;} #webinarPageContent .eyebrow, #webinarPageContent .featrow{justify-content:flex-start;} #webinarPageContent p.sub, #webinarPageContent #webinarPageCountdown{margin-left:0; margin-right:0;} .sec-eyebrow{color:var(--blue); font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;} .sec-title{font-size:32px; font-weight:800; margin-bottom:34px;} /* intro video */ .intro-video-wrap{max-width:900px; margin:0 auto;} .intro-video-label{color:var(--muted); font-size:12px; margin-bottom:10px;} .intro-video{ width:100%; aspect-ratio:16/9; border-radius:14px; border:1px solid var(--line); background:#000; display:block; box-shadow:0 8px 20px rgba(0,0,0,.18); object-fit:cover; object-position:top center; } .intro-play-btn{ width:76px; height:76px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(79,124,255,.4); transition:transform .25s cubic-bezier(.22,1,.36,1); } .intro-video-fallback:hover .intro-play-btn{transform:scale(1.08);} .intro-player-shell:fullscreen{display:flex; align-items:center; background:#000;} .intro-player-shell:-webkit-full-screen{display:flex; align-items:center; background:#000;} .intro-player-shell:fullscreen video, .intro-player-shell:-webkit-full-screen video{ width:100%; height:100%; object-fit:contain; } .intro-play-icon{width:0; height:0; border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:5px;} /* license admin */ .lic-stats{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px;} .lic-stats > div{flex:1; min-width:130px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px;} .lic-stat-num{font-size:28px; font-weight:800; margin-bottom:4px; color:#ffffff;} .lic-stat-label{font-size:12.5px; color:#ffffff;} .lic-issue-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:24px;} .lic-issue-title{font-size:13.5px; font-weight:700; margin-bottom:14px;} .lic-issue-row{display:flex; gap:10px; flex-wrap:wrap;} .lic-issue-row input{ flex:1; min-width:140px; background:var(--canvas); border:1px solid var(--line); color:var(--text); padding:10px 12px; border-radius:8px; font-size:13px; } .lic-filters{margin-bottom:16px;} .lic-filters input{ width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line); color:var(--text); padding:10px 14px; border-radius:8px; font-size:13px; } .lic-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px;} .lic-table{width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap;} .lic-table th{ text-align:left; padding:12px 14px; background:var(--panel-2); color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--line); } .lic-table td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top;} .lic-table tr:last-child td{border-bottom:none;} .lic-key{font-family:'JetBrains Mono', monospace; color:var(--blue); font-size:11.5px;} .lic-buyer-name{font-weight:600;} .lic-buyer-sub{color:var(--muted); font-size:11px;} .lic-badge{padding:3px 9px; border-radius:12px; font-size:10.5px; font-weight:700;} .lic-badge.active{background:rgba(74,222,128,.15); color:#4ade80;} .lic-badge.revoked{background:rgba(255,128,128,.15); color:#ff8080;} .lic-badge.installed{background:rgba(79,124,255,.15); color:var(--blue);} .lic-badge.notinstalled{background:var(--panel-2); color:var(--muted);} .lic-actions{display:flex; gap:6px;} .lic-btn{font-size:10.5px; font-weight:700; padding:6px 10px; border-radius:6px;} .lic-btn.activate{background:#1a3a2e; color:#4ade80;} .lic-btn.revoke{background:#3a1e1e; color:#ff8080;} .lic-empty{padding:30px; text-align:center; color:var(--muted); font-size:13px;} /* ---------- drag-to-reorder (admin lists) ---------- */ .drag-row{cursor:default; transition:background .12s, opacity .12s;} .drag-handle{ flex-shrink:0; cursor:grab; color:var(--muted); font-size:16px; padding:2px 4px; user-select:none; touch-action:none; } .drag-handle:active{cursor:grabbing;} .drag-row.dragging{opacity:.4;} .drag-row.drag-over{background:var(--panel-2); box-shadow:inset 0 2px 0 var(--blue);} .paymethod-tabs{display:flex; gap:8px; background:var(--panel-2); border-radius:10px; padding:4px;} .paymethod-tab{ flex:1; padding:9px 0; border-radius:8px; font-size:12.5px; font-weight:700; color:var(--muted); background:none; } .paymethod-tab.active{background:var(--panel); color:var(--text); box-shadow:0 2px 6px rgba(20,20,40,.08);} /* ---------- webinar banner (public) ---------- */ .webinar-banner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:linear-gradient(90deg, #1a1830, #2a1f4a); color:#fff; padding:18px 32px; margin:0; } .webinar-banner-tag{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.14); padding:3px 10px; border-radius:20px; margin-bottom:8px; } .webinar-banner-text h3{font-size:16px; font-family:'Sora', sans-serif; margin:0 0 4px;} .webinar-banner-when{font-size:12.5px; color:#c9c4e8; margin-bottom:16px;} .webinar-banner-desc{font-size:12.5px; color:#c9c4e8; max-width:560px; margin:4px 0 0;} /* flex:none stops it inheriting .btn's flex-grow:1, which was stretching this button across the leftover banner width and showing up as a big empty dark box behind the "Reserve Your Seat" text. Banner height/size is untouched — only this button's own width is now content-sized. */ /* !important needed here too — the .btn rule (flex:1) comes LATER in this stylesheet, so without !important it was winning the cascade and stretching this button across the banner again. */ .webinar-banner-cta{flex:none !important; width:auto !important; padding:12px 22px !important;} @media(max-width:700px){ .webinar-banner{padding:16px 20px;} } /* compact strip: smaller banner height (banner only — webinar page countdown unchanged) */ .webinar-banner{padding:9px 32px; gap:12px;} .webinar-banner-tag{font-size:10px; padding:2px 8px; margin-bottom:3px;} .webinar-banner-text h3{font-size:14px; margin:0 0 3px;} .webinar-banner-when{margin-bottom:0; font-size:12px;} .webinar-banner .webinar-countdown{gap:5px;} .webinar-banner .webinar-countdown-label, .webinar-banner .webinar-countdown-extra{font-size:12px;} .webinar-banner .webinar-countdown-box{padding:3px 8px; font-size:15px; border-radius:6px;} .webinar-banner .webinar-countdown-box small{font-size:10.5px;} .webinar-banner-cta{padding:8px 18px !important; font-size:13px !important;} @media(max-width:700px){ .webinar-banner{padding:9px 16px;} } /* ---------- webinar countdown (banner + full page) ---------- */ .webinar-countdown{display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap;} .webinar-countdown-label{font-size:12.5px; color:#c9c4e8; margin-right:2px;} .webinar-countdown-box{ display:inline-flex; align-items:baseline; gap:3px; background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 4px 16px rgba(10,5,40,.25), inset 0 1px 0 rgba(255,255,255,.22); padding:6px 12px; border-radius:8px; font-size:23px; font-weight:800; color:#fff; line-height:1; font-family:'Courier New', 'SF Mono', monospace; font-variant-numeric:tabular-nums; letter-spacing:.5px; } .webinar-countdown-box small{font-size:12.5px; font-weight:600; color:#c9c4e8; margin-left:2px; font-family:'Sora', sans-serif;} .webinar-countdown-extra{font-size:12.5px; color:#fff;} .webinar-countdown-live{font-size:12.5px; font-weight:800; color:#fff;} /* ---------- plugin license dashboard ---------- */ .lic-badge.expired{background:#3a1e1e; color:#ff8080;} .lic-badge.locked{background:#3a2e14; color:#f5c542;} .lic-badge.unlocked{background:var(--panel-2); color:var(--muted);} .lic-btn.reset{background:#3a2e14; color:#f5c542;} .lic-btn.simulate{background:#1a2a4a; color:#6d94ff;} .lic-btn.setvalidity{background:var(--panel-2); color:var(--text); border:1px solid var(--line);} .pld-block-title{font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:26px 0 14px;} .pld-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:14px;} .pld-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px;} .pld-card-name{font-weight:700; font-size:13.5px; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .pld-card-row{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:4px;} .pld-card-row b{color:var(--text); font-weight:700;} .pld-progress-track{background:var(--panel-2); border-radius:20px; height:8px; margin:10px 0 8px; overflow:hidden;} .pld-progress-fill{background:var(--grad); height:100%; border-radius:20px; transition:width .3s;} .pld-target-row{display:flex; gap:6px; margin-top:10px;} .pld-target-row input{ flex:1; min-width:0; background:var(--canvas); border:1px solid var(--line); color:var(--text); padding:7px 9px; border-radius:7px; font-size:12px; } .pld-target-row button{ flex-shrink:0; background:var(--panel-2); border:1px solid var(--line); color:var(--text); padding:7px 12px; border-radius:7px; font-size:11.5px; font-weight:700; } .pld-target-row button:hover{background:var(--grad); color:#fff; border-color:transparent;} .validity-cell input[type="date"]{ background:var(--canvas); border:1px solid var(--line); color:var(--text); padding:6px 8px; border-radius:6px; font-size:11.5px; width:130px; } /* my dashboard */ .dash-block{margin-bottom:44px;} .dash-purchases-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px;} .dash-purchase-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; } .dash-purchase-card .dpname{font-size:14px; font-weight:700; margin-bottom:6px;} .dash-purchase-card .dpprice{font-size:12.5px; color:var(--muted); margin-bottom:4px;} .dash-purchase-card .dpdate{font-size:11px; color:var(--muted);} .dash-empty{font-size:13px; color:var(--muted); padding:20px 0;} .dash-playlist-grid{display:flex; flex-direction:column; gap:20px; max-width:760px;} .dash-playlist-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .18s, border-color .18s; } .dash-playlist-card:hover{transform:translateY(-4px); border-color:#454455;} .dpl-thumb{ aspect-ratio:16/7; position:relative; background:radial-gradient(circle at 30% 20%, #23233a, #14141a 70%); display:flex; align-items:center; justify-content:center; } .dpl-thumb .play{width:72px; height:72px; border-radius:50%; background:#ff2d2d; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(255,45,45,.45);} .dpl-thumb .play::after{content:""; border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:4px;} .dpl-badge{position:absolute; bottom:14px; right:14px; background:rgba(0,0,0,.65); color:#fff; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:6px;} .dpl-body{padding:18px 20px;} .dpl-body h4{font-size:17px; margin-bottom:4px;} .dpl-body p{font-size:12px; color:var(--muted);} /* protected course player */ .player-layout{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start;} .player-main{ position:relative; background:#000; border-radius:14px; overflow:hidden; border:1px solid var(--line); user-select:none; -webkit-user-select:none; } .player-main video{width:100%; display:block; max-height:640px; aspect-ratio:16/9; background:#000; pointer-events:auto; object-fit:cover;} .player-main video::-webkit-media-controls-download-button{display:none !important;} .player-main iframe{max-height:640px;} .player-main:fullscreen{display:flex; flex-direction:column; background:#000;} .player-main:-webkit-full-screen{display:flex; flex-direction:column; background:#000;} .player-main:fullscreen video, .player-main:fullscreen iframe, .player-main:-webkit-full-screen video, .player-main:-webkit-full-screen iframe{ flex:1; height:auto; max-height:none; } .player-watermark{ position:absolute; top:14px; left:16px; color:rgba(255,255,255,.35); font-size:11px; font-weight:700; letter-spacing:.05em; z-index:9; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.6); } /* Fullscreen makes the watermark a bit more legible since it's now the only on-brand element visible over the full display. */ .player-main:fullscreen .player-watermark, .player-main:-webkit-full-screen .player-watermark{ top:20px; left:24px; font-size:13px; color:rgba(255,255,255,.45); } .drive-fs-block, .video-fs-block{ position:absolute; top:0; right:0; width:64px; height:56px; z-index:8; background:#000; border:0; border-bottom-left-radius:10px; color:rgba(255,255,255,.7); font-size:20px; cursor:pointer; } .drive-fs-block:hover, .video-fs-block:hover{color:#fff; background:#111;} .yt-custom-controls{ position:absolute; left:0; right:0; bottom:0; z-index:5; display:none; align-items:center; gap:10px; background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.35) 70%, transparent); padding:22px 14px 12px; } .yt-custom-controls button{background:transparent; border:0; color:#fff; font-size:16px; cursor:pointer; flex-shrink:0; padding:2px;} .yt-custom-controls button:hover{color:var(--muted, #ccc);} .yt-progress-wrap{flex:1; height:5px; background:rgba(255,255,255,.25); border-radius:3px; cursor:pointer; position:relative; touch-action:none;} .yt-progress-wrap:hover, .yt-progress-wrap.scrubbing{height:7px;} .yt-progress-bar{position:absolute; top:0; left:0; height:100%; width:0%; background:#7c5cff; border-radius:3px; pointer-events:none;} .yt-progress-wrap::after{ content:''; position:absolute; left:-4px; right:-4px; top:-8px; bottom:-8px; } .yt-time{color:rgba(255,255,255,.85); font-size:11.5px; flex-shrink:0; white-space:nowrap;} .player-current-title{padding:14px 16px; font-size:13.5px; font-weight:600; border-top:1px solid var(--line); background:var(--panel);} .player-speed-row{display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid var(--line); background:var(--panel);} .player-speed-label{font-size:11.5px; color:var(--muted); margin-right:2px;} .speed-btn{background:var(--panel-2); color:var(--muted); font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:6px;} .speed-btn.active{background:var(--grad); color:#fff;} .player-playlist{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; max-height:700px; overflow-y:auto; } .pl-item{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; font-size:13px; } .pl-item:hover{background:var(--panel-2);} .pl-mini-play{ margin-left:auto; flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; } .pl-mini-play::after{content:""; border-left:7px solid var(--muted); border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:2px;} .pl-item.active .pl-mini-play{background:var(--grad); border:none;} .pl-item.active .pl-mini-play::after{border-left-color:#fff;} .pl-edit-btn{ flex-shrink:0; width:26px; height:26px; border-radius:7px; background:var(--panel-2); border:1px solid var(--line); color:var(--muted); font-size:12px; display:flex; align-items:center; justify-content:center; } .pl-edit-btn:hover{background:var(--grad); color:#fff; border-color:transparent;} .pl-item.active{background:linear-gradient(90deg, rgba(79,124,255,.15), transparent);} .pl-num{ width:24px; height:24px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--muted); flex-shrink:0; } .pl-item.active .pl-num{background:var(--grad); color:#fff; border:none;} .player-note{margin-top:18px; font-size:12px; color:var(--muted); text-align:center;} @media(max-width:820px){ .player-layout{grid-template-columns:1fr;} .player-playlist{max-height:300px;} } /* product detail page (gear & plugins) */ .pd-hero{background: linear-gradient(135deg, #1a2140, #0d0f1f 70%);} .pd-hero .cd-checklist li::before{border-color:#8ba3ff; color:#8ba3ff;} .pd-specs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; } .pd-spec-item{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px;} .pd-spec-item .pdsk{font-size:11.5px; color:var(--muted); margin-bottom:4px;} .pd-spec-item .pdsv{font-size:15px; font-weight:700;} /* course detail page */ .cd-hero{ background: linear-gradient(135deg, #1a3a2e, #0d1f18 70%); border:1px solid var(--line); border-radius:20px; padding:38px 34px; margin-bottom:20px; } .cd-hero h2{font-size:32px; font-weight:800; margin-bottom:22px; color:#fff;} .cd-checklist{list-style:none; margin-bottom:22px;} .cd-checklist li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#e8f5ee; margin-bottom:11px; line-height:1.4;} .cd-checklist li::before{content:"✓"; flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1.5px solid #7fd8a8; color:#7fd8a8; font-size:11px; display:flex; align-items:center; justify-content:center; margin-top:1px;} .cd-rating{font-size:13px; color:#cfe8da; margin-bottom:22px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .cd-dot{opacity:.5;} .cd-stars{color:#f5b942;} .cd-infobox{ display:flex; border:1px solid rgba(255,255,255,.15); border-radius:12px; overflow:hidden; margin-bottom:24px; flex-wrap:wrap; } .cd-infobox > div{flex:1; min-width:140px; padding:14px 20px; border-right:1px solid rgba(255,255,255,.15);} .cd-infobox > div:last-child{border-right:none;} .cd-info-label{font-size:11.5px; color:#9fc7ae; margin-bottom:4px;} .cd-info-val{font-size:16px; font-weight:700; color:#fff;} .cd-hero-btns{display:flex; gap:12px; flex-wrap:wrap;} /* Live doubt-session strip (course detail hero) */ .cd-live-strip{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:rgba(127,216,168,.08); border:1px solid rgba(127,216,168,.28); border-radius:12px; padding:14px 18px; margin-bottom:24px; } .cd-live-icon{width:38px; height:38px; border-radius:50%; background:rgba(127,216,168,.14); border:1px solid rgba(127,216,168,.4); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .cd-live-dot{width:10px; height:10px; border-radius:50%; background:#34d399; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:cdLivePulse 1.8s infinite;} @keyframes cdLivePulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55);}70%{box-shadow:0 0 0 9px rgba(52,211,153,0);}100%{box-shadow:0 0 0 0 rgba(52,211,153,0);}} .cd-live-text{flex:1; min-width:200px;} .cd-live-title{font-size:14.5px; font-weight:700; color:#fff; margin-bottom:2px;} .cd-live-desc{font-size:12.5px; color:#cfe8da; line-height:1.4;} .cd-live-chips{display:flex; gap:8px; flex-wrap:wrap;} .cd-live-chip{font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:20px; color:#cfe8da; border:1px solid rgba(255,255,255,.2); white-space:nowrap;} .cd-live-chip-strong{background:#34d399; color:#062c1c; border-color:#34d399; font-weight:800;} .cd-outcome{margin-top:50px; text-align:center;} .cd-outcome-title{font-size:24px; font-weight:800; margin-bottom:26px;} .cd-outcome-title .hl{color:var(--blue);} .cd-stats{ display:flex; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 10px; flex-wrap:wrap; justify-content:center; } .cd-stats > div{flex:1; min-width:130px; padding:10px 14px; border-right:1px solid var(--line);} .cd-stats > div:last-child{border-right:none;} .cd-stat-num{font-size:26px; font-weight:800; color:var(--blue); margin-bottom:4px;} .cd-stat-label{font-size:12.5px; color:var(--muted);} .cd-stats-first .cd-stat-num{font-family:'Sora','Inter',sans-serif; font-weight:800; font-size:30px; letter-spacing:.5px; font-variant-numeric:tabular-nums;} .cd-stat-strong{font-weight:800; color:var(--text); font-family:'Sora','Inter',sans-serif; letter-spacing:.2px;} .cd-chip{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.6px; padding:2px 7px; border-radius:20px; vertical-align:1px;} .cd-chip-free{background:rgba(52,211,153,.15); color:#34d399; border:1px solid rgba(52,211,153,.4);} .cd-chip-pro{background:rgba(250,204,21,.14); color:#facc15; border:1px solid rgba(250,204,21,.4);} @media(max-width:640px){ .cd-hero h2{font-size:24px;} .cd-stats > div{border-right:none; border-bottom:1px solid var(--line);} .cd-stats > div:last-child{border-bottom:none;} } .cd-module{background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:18px; overflow:hidden;} .cd-module-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; background:var(--panel-2);} .cd-module-head h4{font-size:15.5px;} .cd-module-head .cd-count{font-size:12px; color:var(--muted); font-weight:500;} .cd-lectures{list-style:none; max-height:0; overflow:hidden; transition:max-height .3s ease;} .cd-module.open .cd-lectures{max-height:min(600px,70vh); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#3a4058 transparent;} .cd-module.open .cd-lectures::-webkit-scrollbar{width:8px;} .cd-module.open .cd-lectures::-webkit-scrollbar-track{background:transparent;} .cd-module.open .cd-lectures::-webkit-scrollbar-thumb{background:#3a4058; border-radius:8px;} .cd-module.open .cd-lectures::-webkit-scrollbar-thumb:hover{background:#4d5578;} .cd-lectures li{ display:flex; align-items:flex-start; gap:12px; padding:12px 20px; border-top:1px solid var(--line); font-size:13px; color:var(--text); } .cd-lec-title{font-weight:600; padding-top:4px;} .cd-lec-subs{list-style:none; margin-top:6px;} .cd-lec-subs li{padding:3px 0; border-top:none; font-size:12px; color:var(--muted);} .cd-lec-subs li::before{content:"— "; color:var(--muted);} .cd-lec-num{ width:26px; height:26px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--muted); flex-shrink:0; margin-top:2px; } .cd-chevron{transition:transform .2s;} .cd-module.open .cd-chevron{transform:rotate(180deg);} /* course cards */ .grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; perspective:1200px;} .yt-grid{gap:30px; perspective:1200px;} .card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .18s, border-color .18s; } .card:hover{transform:translateY(-4px); border-color:#454455;} .res-drag-card{cursor:grab;} .res-drag-card:active{cursor:grabbing;} .res-drag-card.dragging{opacity:.4;} .res-drag-card.drop-before{box-shadow:-8px 0 0 0 var(--blue);} .res-drag-card.drop-after{box-shadow:8px 0 0 0 var(--blue);} .card-top{ height:150px; position:relative; padding:14px; display:flex; flex-direction:column; justify-content:space-between; } .card-top .tag{ align-self:flex-start; background:rgba(0,0,0,.35); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; } .card-top .icon{ position:absolute; right:14px; bottom:14px; width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.35); } .card-top h3{color:#fff; font-size:19px; line-height:1.15; max-width:75%;} .card-top p{color:rgba(255,255,255,.75); font-size:11.5px; margin-top:4px;} .card-body{padding:16px;} /* new course card-top: world-map bg + founder photo */ .new-course-top{ height:230px; padding:16px; overflow:hidden; background: radial-gradient(circle at 15% 15%, rgba(79,124,255,.08), transparent 40%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px), #0a0a0c; } .ct-live-badge{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; background:#ff2d2d; color:#fff; font-size:10px; font-weight:800; letter-spacing:.03em; padding:4px 10px; border-radius:20px; z-index:2; } .ct-live-dot{width:6px; height:6px; border-radius:50%; background:#fff; display:inline-block;} .ct-plus{opacity:.85; font-weight:400;} .new-course-top h3{position:relative; z-index:2; max-width:58%; margin-top:10px;} .ct-tagline{color:#f5c542 !important; font-size:12px; font-weight:700; position:relative; z-index:2; max-width:58%;} .ct-batch-badge{ position:relative; z-index:2; align-self:flex-start; margin-top:10px; background:#f5c542; color:#1a1400; font-size:9.5px; font-weight:800; letter-spacing:.02em; padding:5px 10px; border-radius:6px; } .ct-founder-photo{ position:absolute; right:0; bottom:0; height:100%; width:auto; max-width:46%; object-fit:cover; object-position:top center; z-index:1; -webkit-mask-image:linear-gradient(to left, #000 70%, transparent 100%); mask-image:linear-gradient(to left, #000 70%, transparent 100%); } .new-course-top .ct-tool-icon{ position:absolute; right:14px; top:14px; bottom:auto; width:38px; height:38px; z-index:2; } /* resources: course-card style with video thumbnail top */ .res-course-top{ cursor:pointer; background:radial-gradient(circle at 30% 20%, #23232f, #121218 70%); aspect-ratio:3/2; height:auto; background-repeat:no-repeat; } .res-course-top .grain{position:absolute; inset:0; opacity:.5; background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px);} .res-course-top .tag{position:relative; z-index:2; background:#ff2d2d;} .res-course-top h3{position:relative; z-index:2; max-width:65%;} .res-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#ff2d2d; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(255,45,45,.4); z-index:2; } .res-course-top .icon{ position:absolute; right:14px; bottom:14px; left:auto; width:auto; min-width:40px; height:auto; padding:6px 10px; border-radius:8px; font-size:12px; z-index:2; } .res-play::after{content:""; border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px;} .card-body h4{font-size:16px; margin-bottom:3px;} .card-body .desc{font-size:12.5px; color:var(--muted); margin-bottom:8px;} .stars{color:#f5b942; font-size:12px; margin-bottom:8px;} .stars span{color:var(--muted); font-size:11.5px; margin-left:4px;} .price{font-weight:800; font-size:17px; margin-bottom:12px;} .price .cur{color:var(--muted); font-weight:500; font-size:11.5px;} .btnrow{display:flex; gap:8px;} .btn{ flex:1; text-align:center; padding:10px 0; border-radius:8px; font-size:12.5px; font-weight:700; } .btn-dark{background:var(--panel-2); color:var(--text); border:1px solid var(--line);} .btn-ghost{background:var(--panel-2); color:var(--text); border:1px solid var(--line);} .btn-dark:hover{background:#1fae5e; color:#fff; border-color:#189248;} .btn-buy{background:#1fae5e; color:#fff; border:1px solid #189248;} .btn-buy:hover{background:#178f4c;} .btn-ghost:hover{background:var(--line);} /* White theme only — Course Details / More Details / Add-to-Cart 🛒 style buttons get a solid black box with white text/icon instead of the light gray box. The Black theme keeps its original look, untouched. */ :root:not([data-theme="black"]) .btn-ghost{background:#2d2d2d; color:#ffffff; border:1px solid #2d2d2d;} :root:not([data-theme="black"]) .btn-ghost:hover{background:#1a1a1a;} :root:not([data-theme="black"]) .cart-add-btn{ background:rgba(45,45,45,0.96); color:#ffffff; border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12); } :root:not([data-theme="black"]) .cart-add-btn:hover{background:rgba(26,26,26,0.98);} /* plugin thumb — thumbnail files are cropped/stored as 400×400 */ .plugin-thumb{ aspect-ratio:1/1; height:auto; background:var(--panel-2); display:flex; align-items:center; justify-content:center; position:relative; } .plugin-thumb svg{width:60px; height:60px; opacity:.9;} .plugin-thumb .plabel{ position:absolute; top:10px; left:10px; background:var(--grad); color:#fff; font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:5px; } footer{ border-top:1px solid var(--line); padding:34px 28px; text-align:center; color:var(--muted); font-size:12.5px; } /* tools + queries band */ .tools-band{ max-width:1280px; margin:0 auto; padding:50px 28px 20px; display:grid; grid-template-columns:1.7fr 1fr; gap:22px; } .tools-card{ background:var(--panel); color:var(--text); border-radius:18px; padding:32px 34px; border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.25); } .tools-card h3{font-size:21px; font-weight:800; margin-bottom:24px; color:var(--text);} .tools-row{display:flex; flex-wrap:wrap; gap:26px;} .tool-item{display:flex; flex-direction:column; align-items:center; gap:8px; width:78px;} .tool-ic{ width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; } .tool-item span:last-child{font-size:10.5px; color:var(--text); text-align:center; font-weight:600;} .queries-card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:32px 30px; display:flex; flex-direction:column; justify-content:center; } .queries-card h3{font-size:22px; font-weight:800; margin-bottom:8px;} .queries-card p{color:var(--muted); font-size:13.5px; margin-bottom:20px;} .wa-cta{ display:inline-flex; align-items:center; gap:8px; background:#ffcc33; color:#111; font-weight:700; padding:12px 18px; border-radius:9px; width:fit-content; font-size:14px; } .wa-cta + .wa-cta{margin-top:10px;} .tg-cta{background:#229ED9; color:#fff;} .wa-ic{font-size:15px;} @media(max-width:880px){ .tools-band{grid-template-columns:1fr;} } /* footer */ .site-footer{max-width:1280px; margin:40px auto 0; padding:0 28px 40px; border-top:1px solid var(--line); padding-top:44px;} .footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; text-align:left;} .footer-extra{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:30px; text-align:left; margin-top:34px; padding-top:34px; border-top:1px solid var(--line); } @media(max-width:560px){ .footer-extra{grid-template-columns:1fr;} } .footer-col{text-align:left;} .footer-col h4{text-align:left;} .footer-brand .logo{margin-bottom:14px;} .footer-copy{font-size:12px; color:var(--muted); margin-bottom:14px;} .footer-social{display:flex; gap:10px;} .footer-social a, .footer-social button{ width:42px; height:42px; border-radius:12px; background:#111114; border:1px solid #26262f; display:flex; align-items:center; justify-content:center; transition:background .15s, transform .15s; } .footer-social a:hover, .footer-social button:hover{background:#1c1c22; transform:translateY(-2px);} .footer-col h4{font-size:14px; font-weight:700; margin-bottom:14px;} .footer-col a, .footer-col button{display:block; width:100%; text-align:left; background:none; font-size:12.5px; color:var(--muted); margin-bottom:10px;} .footer-col a:hover, .footer-col button:hover{color:var(--text);} .footer-col a.see-all, .footer-col button.see-all{color:var(--blue); font-weight:600; margin-top:6px;} .footer-bottom{ margin-top:36px; padding-top:18px; border-top:1px solid var(--line); text-align:center; font-size:11.5px; color:var(--muted); } @media(max-width:880px){ .footer-top{grid-template-columns:1fr 1fr;} .footer-extra{grid-template-columns:1fr 1fr;} } @media(max-width:560px){ .footer-top{grid-template-columns:1fr;} } /* floating whatsapp button */ .wa-float{ position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; z-index:90; box-shadow:0 10px 26px rgba(37,211,102,.45); animation:waPulse 2.2s infinite; } @keyframes waPulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} } /* YouTube learn grid */ .yt-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.2); transform-style:preserve-3d; transform:perspective(1200px) rotateX(0deg); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), border-color .25s cubic-bezier(.22,1,.36,1); cursor:pointer; } .yt-card:hover{ transform:perspective(1200px) rotateX(2deg) translateY(-6px); box-shadow:0 22px 34px -14px rgba(0,0,0,.45), 0 8px 14px rgba(0,0,0,.25); border-color:#454455; } .yt-thumb{ aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 30% 20%, #2a2a38, #14141a 70%); } .admin-edit-btn{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:8px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:13px; align-items:center; justify-content:center; z-index:3; } .admin-edit-btn:hover{background:var(--grad); border-color:transparent;} .yt-thumb .play{ width:64px; height:64px; border-radius:50%; background:#ff2d2d; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(255,45,45,.4); z-index:2; } .yt-thumb .play::after{content:""; border-left:18px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:4px;} .yt-thumb .grain{position:absolute; inset:0; opacity:.5; background:repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px);} .yt-body{padding:18px 20px;} .yt-body h4{font-size:16px; line-height:1.3; margin-bottom:9px;} .yt-watch{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600;} .yt-watch .dot{width:16px; height:16px; border-radius:3px; background:#ff2d2d; display:inline-flex; align-items:center; justify-content:center;} /* Our Work / reels */ .work-block{margin-bottom:44px;} .work-subhead{font-size:19px; font-weight:700; margin-bottom:18px; padding-left:2px; border-left:3px solid var(--blue); padding-left:12px;} .reel-grid{display:flex; gap:16px; flex-wrap:nowrap; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:thin; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; perspective:1200px;} .reel-grid::-webkit-scrollbar{height:6px;} .reel-grid::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;} .reel-card{ width:200px; flex-shrink:0; border-radius:14px; overflow:hidden; position:relative; cursor:pointer; scroll-snap-align:start; border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; box-shadow:0 2px 6px rgba(0,0,0,.25); transform-style:preserve-3d; transform:perspective(1200px) rotateX(0deg); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), border-color .25s cubic-bezier(.22,1,.36,1); } /* 3D "lifted card" feel on hover — the shadow/lift is on the card itself, never drawn on top of the video thumbnail. */ .reel-card:hover{ transform:perspective(1200px) rotateX(2deg) translateY(-6px); border-color:#454455; box-shadow:0 22px 34px -14px rgba(0,0,0,.5), 0 8px 14px rgba(0,0,0,.3); } .reel-thumb{ aspect-ratio:9/16; width:100%; flex-shrink:0; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:12px; /* Real YouTube Shorts are uploaded vertical (1080x1920), but YouTube still generates their thumbnail on a landscape 1280x720 canvas with the actual vertical video pillarboxed in the middle (black bars baked into the image itself). "cover" here scales that thumbnail up to fill this vertical 9:16 box, which crops away almost exactly those baked-in black bars — leaving the real 1080x1920 content filling the frame edge-to-edge, the way an actual Short should look. */ background-size:cover; background-position:center; background-color:#14141a; } /* Long Form — Documentary cards are landscape (1920x1080 / 16:9) instead of the vertical 1080x1920 / 9:16 used by Short Form reels — their thumbnail is already the same landscape shape as the box, so "cover" still fits it neatly with no meaningful cropping; left untouched. */ .reel-card.reel-card-long{width:340px;} .reel-card.reel-card-long .reel-thumb{aspect-ratio:16/9; background-size:cover;} .reel-top{display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.55); padding:4px 8px 4px 4px; border-radius:20px; align-self:flex-start;} .reel-top .dot{width:16px; height:16px; border-radius:4px; background:#ff2d2d; display:flex; align-items:center; justify-content:center; flex-shrink:0;} .reel-top .dot::after{content:""; border-left:6px solid #fff; border-top:4px solid transparent; border-bottom:4px solid transparent; margin-left:1px;} .reel-top span{font-size:11px; font-weight:700; color:#fff;} .reel-mid{flex:1; display:flex; align-items:center; justify-content:center;} .reel-mid .play{ width:44px; height:44px; border-radius:50%; background:rgba(255,45,45,.9); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.4); } .reel-mid .play::after{content:""; border-left:12px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px;} .reel-body{padding:12px 14px 14px;} .reel-body h4{font-size:12.5px; line-height:1.3;} /* Client strip above each Short / Long Form video (sizes are the --rc-* vars below) */ .reel-client{ --rc-plat:32px; --rc-name:16px; --rc-subtxt:12px; --rc-num:17px; --rc-lbl:11px; --rc-ico:18px; display:flex; flex-direction:column; gap:10px; padding:13px 14px; background:var(--panel-2); border-bottom:1px solid var(--line); flex-shrink:0; } .rc-head{display:flex; align-items:center; gap:10px; min-width:0;} .rc-plat{width:var(--rc-plat); height:var(--rc-plat); flex-shrink:0; display:block;} .rc-id{min-width:0;} .rc-name{font-size:var(--rc-name); font-weight:800; line-height:1.15; color:var(--rc-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .rc-sub{font-size:var(--rc-subtxt); color:var(--rc-fg); opacity:.75; line-height:1.25; white-space:nowrap;} .rc-stats{display:flex; align-items:center; min-width:0;} .rc-stat{display:flex; align-items:center; gap:6px; flex:1; min-width:0; padding:0 8px; border-left:1px solid var(--line);} .rc-stat:first-child{padding-left:0; border-left:0;} .rc-ico{width:var(--rc-ico); height:var(--rc-ico); flex-shrink:0; color:var(--rc-fg); display:block;} .rc-txt{min-width:0; line-height:1.15;} .rc-txt b{font-variant-numeric:tabular-nums; display:block; font-size:var(--rc-num); font-weight:800; color:var(--rc-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .rc-txt small{display:block; font-size:var(--rc-lbl); color:var(--rc-fg); opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .reel-client.rc-empty{opacity:.7; outline:1.5px dashed var(--rc-fg); outline-offset:-4px; cursor:pointer;} /* Long Form cards (390px on desktop) are wide enough for the one-line version: name | subs | views */ .reel-card-long .reel-client{flex-direction:row; align-items:center; gap:0;} .reel-card-long .rc-head{flex:0 1 42%; padding-right:8px;} .reel-card-long .rc-stats{flex:1 1 58%;} .reel-card-long .rc-stat{padding:0 7px;} /* Narrower screens (laptops under ~1260px, tablets, phones): Long Form strip stacks like the Short one */ @media(max-width:1257px){ .reel-card-long .reel-client{flex-direction:column; align-items:stretch; gap:10px;} .reel-card-long .rc-head{flex:none; padding-right:0;} .reel-card-long .rc-stats{flex:none;} .reel-card-long .rc-stat{padding:0 8px;} .reel-card-long .rc-stat:first-child{padding-left:0;} } /* Laptops ~ 900-1257px: Short Form cards shrink toward 200px, so tighten the strip a little so labels never clip */ @media(min-width:561px) and (max-width:1257px){ #shortGrid .reel-client{--rc-plat:32px; --rc-name:16px; --rc-num:17px; --rc-lbl:11px; --rc-ico:16px; padding:12px 12px;} #shortGrid .rc-stat{gap:5px; padding:0 6px;} #shortGrid .rc-stat:first-child{padding-left:0;} } /* Phones: Short Form cards are only ~170px wide (2 per row), so keep the strip compact there */ @media(max-width:560px){ #shortGrid .reel-client{--rc-plat:26px; --rc-name:13px; --rc-subtxt:10px; --rc-num:14px; --rc-lbl:9.5px; --rc-ico:15px; padding:10px 11px; gap:8px;} #shortGrid .rc-ico{display:none;} /* no room for the small icons in a 170px card */ #shortGrid .rc-head{gap:8px;} #shortGrid .rc-stat{gap:5px; padding:0 6px;} #shortGrid .rc-stat:first-child{padding-left:0;} } .reel-tag{ position:absolute; top:12px; right:12px; background:rgba(0,0,0,.55); color:#fff; font-size:9.5px; font-weight:700; padding:3px 7px; border-radius:5px; } @media(max-width:560px){ .reel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; overflow-x:visible; flex-wrap:wrap; scroll-snap-type:none; } .reel-card{width:100%;} /* Long-Form card is a fixed 340px on desktop; on phones it must fill the full row (same specificity as the base rule, so it has to be repeated here) — otherwise it sits stuck to the left with extra space on the right instead of being centered. */ .reel-card.reel-card-long{grid-column:1 / -1; width:100%; max-width:100%; margin-left:auto; margin-right:auto;} .work-subhead{font-size:16px;} } /* Short-Form row: show exactly 5 full cards (200px each + 16px gaps) — any 6th card previously poked out half-cut at the row's edge, which looked broken/cropped. Capping the row's width here hides the rest cleanly; the row still scrolls/drags sideways (see .reel-grid above) so the user can slide to see the remaining reels. Desktop only — the 560px-and-below rule above already switches to its own 2-column grid. */ @media(min-width:561px){ /* margin:0 auto centers this narrower row inside the section, same as the "Learn From YouTube For Free" grid above it — without this it stayed pinned to the left edge since it's now narrower than the section around it. */ #shortGrid{ max-width: calc(300px * 4 + 16px * 3); margin:0 auto; } /* Short-Form cards are BIG now: 4 fit across the 1224px content area (~294px each, was 230px). On narrower screens they shrink a little (never below 220px) and the row scrolls sideways to reach the rest. */ #shortGrid .reel-card{ width: clamp(220px, calc((100% - 16px * 3) / 4), 300px); } #shortGrid .reel-client{--rc-plat:32px; --rc-name:16px; --rc-subtxt:12px; --rc-num:17px; --rc-lbl:11px; --rc-ico:16px; padding:12px 12px;} #shortGrid .rc-stat{gap:5px; padding:0 6px;} #shortGrid .rc-stat:first-child{padding-left:0;} } /* Long-Form Documentary: 3 cards across, video frame is exactly 16:9 (960x540 ratio); rest scroll sideways. Strip is stacked (name row, then numbers) like the Short cards. */ @media(min-width:561px){ #longGrid{ max-width: calc(640px * 3 + 16px * 2); margin:0 auto; } #longGrid .reel-card-long{ width: clamp(320px, calc((100% - 16px * 2) / 3), 640px); } #longGrid .reel-client{--rc-plat:38px; --rc-name:18px; --rc-subtxt:13px; --rc-num:20px; --rc-lbl:12px; --rc-ico:22px; padding:14px 16px; flex-direction:column; align-items:stretch; gap:10px;} #longGrid .rc-head{flex:none; padding-right:0;} #longGrid .rc-stats{flex:none;} #longGrid .rc-stat{gap:7px; padding:0 8px;} #longGrid .rc-stat:first-child{padding-left:0;} } /* ---------- Our Work: desktop cards (>= 1100px wide) ---------- Short Form : video frame 270 x 480 px (9:16) -> card is 272px wide (1px border each side) Long Form : video frame 480 x 270 px (16:9) -> card is 482px wide (exactly half of the earlier 540x960 / 960x540 version). The rows use the whole page width and scroll/swipe sideways to reach the rest. Phones/tablets keep the smaller layout above. */ @media(min-width:1100px){ #work-sec{max-width:none;} /* Each row shows exactly 4 Short / 3 Long cards at a time, centered on the page; the rest are reached by scrolling the row sideways. On smaller screens the cards shrink a little so it is still exactly 4 / 3 across. */ #shortBlock{width:100%; max-width:1482px; margin:0 auto 44px;} /* same width as the Long Form row */ #longBlock{width:100%; max-width:1482px; margin:0 auto 44px;} #shortGrid, #longGrid{max-width:none; margin:0; gap:16px;} #shortGrid .reel-card{width:calc((100% - 16px * 3) / 4);} #longGrid .reel-card-long{width:calc((100% - 16px * 2) / 3);} /* client strip */ #work-sec .reel-client{--rc-plat:32px; --rc-name:16px; --rc-subtxt:12px; --rc-num:18px; --rc-lbl:11px; --rc-ico:18px; padding:13px 14px; gap:10px;} #work-sec .rc-head{gap:10px;} #work-sec .rc-stat{gap:6px; padding:0 10px;} #work-sec .rc-stat:first-child{padding-left:0;} /* Long Form strip: name row, then numbers (cards are 336-480px wide depending on the screen) */ #longGrid .reel-client{--rc-plat:36px; --rc-name:17px; --rc-num:19px; --rc-lbl:11.5px; --rc-ico:20px; flex-direction:column; align-items:stretch; gap:10px; padding:14px 16px;} #longGrid .rc-head{flex:none; padding-right:0;} #longGrid .rc-stats{flex:none;} #longGrid .rc-stat{padding:0 10px;} #longGrid .rc-stat:first-child{padding-left:0;} /* title under the video + the pills/buttons drawn on the video */ #work-sec .reel-body{padding:12px 16px 16px;} #work-sec .reel-body h4{font-size:14.5px; line-height:1.3;} #work-sec .reel-thumb{padding:14px;} #work-sec .reel-top{gap:7px; padding:4px 11px 4px 4px; border-radius:20px;} #work-sec .reel-top .dot{width:18px; height:18px; border-radius:5px;} #work-sec .reel-top .dot::after{border-left:7px solid #fff; border-top:4px solid transparent; border-bottom:4px solid transparent; margin-left:1px;} #work-sec .reel-top span{font-size:12px;} #work-sec .reel-tag{top:14px; right:14px; font-size:10.5px; padding:4px 9px; border-radius:6px;} #work-sec .reel-mid .play{width:56px; height:56px;} #work-sec .reel-mid .play::after{border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px;} } /* Big monitors (>= 1540px): Long cards reach their full 480px width -> one-line strip: [icon + name] | subscribers | views */ @media(min-width:1540px){ #longGrid .reel-client{flex-direction:row; align-items:center; gap:0; padding:14px 18px;} #longGrid .rc-head{flex:0 1 40%; padding-right:14px;} #longGrid .rc-stats{flex:1 1 60%; border-left:1px solid var(--line); padding-left:14px;} #longGrid .rc-stat{padding:0 12px;} #longGrid .rc-stat:first-child{padding-left:0;} } /* ---------- MODAL ---------- */ .overlay{ position:fixed; inset:0; background:rgba(30,30,45,.45); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; } .overlay.show{display:flex; animation:fade .18s ease;} .modal{ background:var(--panel); border:1px solid var(--line); border-radius:16px; max-width:640px; width:100%; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); } .modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);} .modal-head h3{font-size:16px;} .modal-close{background:var(--panel-2); width:28px; height:28px; border-radius:50%; color:var(--text); font-size:15px;} .modal video{width:100%; display:block; background:#000; max-height:360px;} /* aspect-ratio here (moved out of the iframe's inline style in index.html) is what lets .modal.modal-short iframe below actually override it for Shorts — an inline style on the element would always have won over any class-based CSS rule, which is why the short player was staying locked at this 16:9 landscape box even for vertical Shorts videos. */ .modal iframe{width:100%; display:block; background:#000; max-height:360px; aspect-ratio:16/9;} .modal-body{padding:16px 18px;} /* Edit Course modal — sized ~800x800 per request, with its own scrollbar so the long form never gets cut off */ #courseFormOverlay .modal-body{flex:1; min-height:0; overflow-y:auto;} /* Add/Edit Plugin and Add/Edit Project File modals — same card design as the Edit Course modal above (sized ~800x800, own scrollbar so the form never gets cut off). Only the card sizing/scroll behavior is shared; the fields inside are untouched. */ #pluginFormOverlay .modal-body, #resFormOverlay .modal-body{flex:1; min-height:0; overflow-y:auto;} /* download/payment modal — sized ~500x500 per request, content centered vertically so the shorter payment/success steps don't look sparse */ #downloadFormOverlay .modal-body{min-height:500px; display:flex; flex-direction:column; justify-content:center;} /* Shorts / short-form reels open in a tall, phone-style portrait frame instead of the normal wide 16:9 frame used for regular videos. */ .modal.modal-short{max-width:360px;} .modal.modal-short video{aspect-ratio:9/16; max-height:640px; height:auto;} /* YouTube's own embed player, even inside an exactly 9:16 iframe box, renders a vertical Short slightly smaller than the box and fills the leftover strip on both sides with a blurred backdrop — that's the "blur on the sides" instead of the video going edge to edge. Fix: crop that blurred strip out. The wrap is set to the real 9:16 box and clips anything outside it (overflow:hidden); the iframe inside is rendered oversized and centered, so only the actual video fills what's visible — the blurred edges land outside the crop and are never seen. */ .yt-frame-wrap{width:100%; position:relative; overflow:hidden;} .modal.modal-short .yt-frame-wrap{aspect-ratio:9/16; max-height:640px; height:auto;} .modal.modal-short .yt-frame-wrap iframe{ position:absolute; top:50%; left:50%; width:145%; height:145%; transform:translate(-50%,-50%); max-height:none; aspect-ratio:auto; } /* payment modal */ .pay-modal{ max-width:340px; position:relative; z-index:0; } .pay-modal .modal-body{padding:14px 16px;} .pay-modal-border-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; overflow:visible; } .pay-modal-border-svg rect{ fill:none; stroke:url(#taperGrad); stroke-width:3; stroke-linecap:round; stroke-dasharray:22 78; filter: drop-shadow(0 0 5px rgba(79,124,255,.65)); animation: traceBorder 7s linear infinite; } @keyframes traceBorder{ to{ stroke-dashoffset:-100; } } .plan-tabs{display:flex; gap:12px; margin-bottom:18px;} .plan-tab{ flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:14px 12px; text-align:left; position:relative; cursor:pointer; color:var(--text); } .plan-tab.active{border-color:var(--blue); background:linear-gradient(160deg, rgba(79,124,255,.15), rgba(148,81,255,.1));} .plan-name{font-size:12.5px; color:var(--muted); margin-bottom:4px;} .plan-price{font-size:19px; font-weight:800;} .plan-price span{font-size:11px; font-weight:500; color:var(--muted);} .plan-badge{position:absolute; top:-9px; right:10px; background:var(--grad); color:#fff; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:8px;} .plan-features{list-style:none; margin-bottom:20px;} .plan-features li{font-size:12.5px; color:var(--muted); padding:6px 0; border-bottom:1px solid var(--line);} .plan-features li:last-child{border-bottom:none;} .pay-curriculum{margin-bottom:20px;} .pay-curr-title{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;} .pay-curr-item{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line);} .pay-curr-num{ width:26px; height:26px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--blue); flex-shrink:0; } .pay-curr-mod{font-size:12.5px; font-weight:700; margin-bottom:3px;} .pay-curr-sub{font-size:11px; color:var(--muted); line-height:1.4;} .pay-curr-more{ display:block; width:100%; text-align:center; background:var(--panel-2); color:var(--blue); font-weight:700; font-size:14px; padding:14px 0; border-radius:9px; margin-top:12px; } .pay-methods{display:flex; gap:8px; margin-bottom:12px;} .pay-method{flex:1; background:var(--panel-2); border:1px solid var(--line); color:var(--muted); font-weight:600; font-size:12.5px; padding:9px 0; border-radius:7px;} .pay-method.active{background:var(--grad); color:#fff; border:none;} .modal-body p{font-size:13px; color:var(--muted); line-height:1.6;} /* toast */ .toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--panel); border:1px solid var(--line); color:var(--text); padding:12px 20px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none; transition:all .25s; z-index:200; box-shadow:0 10px 30px rgba(0,0,0,.4); } .toast.show{opacity:1; transform:translateX(-50%) translateY(0);} @media(max-width:880px){ .hero{grid-template-columns:1fr; padding-top:40px;} .hero h1{font-size:36px;} .grid{grid-template-columns:1fr 1fr;} .navlinks{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--canvas); border-bottom:1px solid var(--line); padding:10px 16px 16px; gap:4px; z-index:60; } .navlinks.mobile-open{display:flex;} .navlinks > div{width:100%;} .navlinks .dropdown{position:static; width:100%; margin-top:6px;} .hamburger-btn{display:flex;} } @media(min-width:881px){ .hamburger-btn{display:none;} } .hamburger-btn{ background:none; border:none; color:var(--text); font-size:22px; padding:6px 10px; cursor:pointer; } @media(max-width:560px){ .grid{grid-template-columns:1fr;} .section{padding:44px 16px;} } /* ---------- CARD DEPTH / 3D EFFECT (site-wide) ---------- */ .dropdown, .lic-stats > div, .lic-issue-box, .dash-purchase-card, .dash-playlist-card, .player-current-title, .player-speed-row, .player-playlist, .pd-spec-item, .cd-stats, .cd-module, .queries-card{ background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,20,35,.04), 0 10px 24px rgba(20,20,35,.08), 0 22px 44px rgba(20,20,35,.06); } .dash-playlist-card{ transition: transform .2s ease, box-shadow .2s ease; } .dash-playlist-card:hover{ transform: translateY(-6px); box-shadow: 0 2px 4px rgba(20,20,35,.06), 0 16px 30px rgba(20,20,35,.12), 0 32px 60px rgba(20,20,35,.10); } /* Course cards get the same subtle 3D tilt+lift as the YouTube / reel cards. */ .card{ background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,20,35,.04), 0 10px 24px rgba(20,20,35,.08), 0 22px 44px rgba(20,20,35,.06); transform-style:preserve-3d; transform:perspective(1200px) rotateX(0deg); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), border-color .25s cubic-bezier(.22,1,.36,1); } .card:hover{ transform:perspective(1200px) rotateX(2deg) translateY(-6px); box-shadow: 0 22px 34px -14px rgba(20,20,35,.35), 0 8px 14px rgba(20,20,35,.2); border-color:#454455; } .modal, .artboard-mock{ background: var(--panel); border: 1px solid var(--line); } .cd-module-head, .modal-head, .plugin-thumb{ background: var(--panel-2); } .card-body{ background: var(--panel); } /* placeholders black across the whole site */ input::placeholder, textarea::placeholder{ color: var(--text); opacity: 1; } /* ---------- UNIFIED ADMIN PANEL ---------- */ .admin-layout{display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start;} @media(max-width:780px){ .admin-layout{grid-template-columns:1fr;} } .admin-sidebar{ display:flex; flex-direction:column; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; position:sticky; top:100px; } .admin-nav-btn{ display:flex; align-items:center; gap:8px; text-align:left; padding:11px 14px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--text); background:none; } .admin-nav-btn:hover{background:var(--panel-2);} .admin-nav-btn.active{background:var(--grad); color:#fff;} .admin-content{min-height:400px;} .admin-stats-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:16px;} .admin-stat-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px;} .admin-stat-num{font-size:28px; font-weight:800; margin-bottom:4px; color:#ffffff;} .admin-stat-label{font-size:12.5px; color:#ffffff;} .admin-course-pick{ display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); padding:10px 16px; border-radius:9px; font-size:13px; font-weight:600; margin-right:10px; margin-bottom:8px; } .admin-course-pick:hover{background:var(--panel-2);} .admin-course-pick.active{background:var(--grad); color:#fff; border-color:transparent;} .admin-lecture-table{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;} .admin-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:13px; } .admin-row:last-child{border-bottom:none;} .admin-row-thumb{width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--panel-2);} .admin-row-main{flex:1; min-width:0;} .admin-row-title{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#ffffff;} .admin-row-sub{color:#ffffff; font-size:11.5px; margin-top:2px;} .admin-row-edit{ flex-shrink:0; width:30px; height:30px; border-radius:8px; background:var(--panel-2); border:1px solid var(--line); color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:13px; } .admin-row-edit:hover{background:var(--grad); color:#fff; border-color:transparent;} .admin-empty{padding:30px; text-align:center; color:#ffffff; font-size:13px;} .admin-price-cur{color:#ffffff; font-size:13px; flex-shrink:0;} .admin-price-input{ width:90px; flex-shrink:0; background:var(--canvas); border:1px solid var(--line); color:var(--text); padding:8px 10px; border-radius:8px; font-size:13px; font-family:inherit; } .admin-row-save{ flex-shrink:0; padding:8px 16px; border-radius:8px; background:var(--panel-2); border:1px solid var(--line); color:var(--text); font-size:12.5px; font-weight:700; } .admin-row-save:hover{background:var(--grad); color:#fff; border-color:transparent;} .coupon-badge{ display:inline-block; background:#1a3a2e; color:#4ade80; border:1px solid #245c42; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:7px; margin-bottom:10px; } /* ---------- PAYMENT MODAL (QR + card) ---------- */ .pay-amount-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:12px 0 14px; text-align:center; } .pay-amount-card .pay-amount{ font-family:'Sora', sans-serif; font-size:22px; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.2; } .pay-amount-card .pay-item-name{font-size:12px; color:var(--muted); margin-top:3px;} .pay-panel{ background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; align-items:center; transition:border-color .2s; } .pay-panel-label{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--text); margin-bottom:10px; } .pay-panel-label .dot{width:6px; height:6px; border-radius:50%; background:var(--grad);} .pay-qr-frame{ position:relative; width:190px; height:190px; padding:9px; background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; overflow:hidden; } .pay-qr-frame::before, .pay-qr-frame::after, .pay-qr-corner-tl, .pay-qr-corner-br{ content:""; position:absolute; width:16px; height:16px; } .pay-qr-frame::before{ top:4px; left:4px; border-top:3px solid var(--blue); border-left:3px solid var(--blue); border-radius:6px 0 0 0; } .pay-qr-frame::after{ bottom:4px; right:4px; border-bottom:3px solid var(--purple); border-right:3px solid var(--purple); border-radius:0 0 6px 0; } .pay-qr-frame img{ width:100%; height:100%; object-fit:contain; border-radius:6px; } .pay-qr-spinner{ width:34px; height:34px; border-radius:50%; border:3px solid #e6e6ee; border-top-color:var(--blue); animation:pay-spin .8s linear infinite; } @keyframes pay-spin{ to{ transform:rotate(360deg); } } .pay-qr-error{ color:#ff8a8a; font-size:11.5px; line-height:1.5; margin-top:12px; text-align:center; background:rgba(255,90,90,.08); border:1px solid rgba(255,90,90,.25); border-radius:8px; padding:8px 10px; } .pay-qr-apps{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:10.5px; color:var(--muted); margin-top:12px; } .pay-divider{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin:16px 0; } .pay-divider span:not(.pay-divider-line){ font-weight:700; letter-spacing:.05em; } .pay-divider-line{ flex:1; height:1px; background:var(--line); } .pay-proceed-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 0; border-radius:9px; background:var(--grad); color:#fff; font-weight:700; font-size:13.5px; box-shadow:0 6px 18px rgba(109,148,255,.28); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; } .pay-proceed-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(109,148,255,.4); filter:brightness(1.06); } .pay-proceed-btn:active{ transform:translateY(0); } .pay-card-field{ margin-bottom:10px; } .pay-card-field iframe, .pay-card-field > div{ border-radius:8px !important; } .pay-trust{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:var(--muted); margin-top:16px; line-height:1.5; } .pay-back-btn{ background:transparent; color:var(--muted); margin-top:10px; font-size:12.5px; font-weight:600; padding:8px 0; width:100%; border-radius:8px; transition:background .15s, color .15s; } .pay-back-btn:hover{ background:var(--panel-2); color:var(--text); } @keyframes pay-fade-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } #dlQrStep{ animation:pay-fade-in .25s ease; } /* ---------- PHONE ALIGNMENT (navbar strip, webinar strip, hero button) ---------- */ html{overflow-x:hidden;} @media(max-width:700px){ .nav-logo-img{height:62px;} nav{padding:4px 28px;} .webinar-banner{flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:8px; padding:10px 28px 12px;} .webinar-banner-text{width:100%;} .webinar-banner-when{display:block;} .webinar-banner .webinar-countdown{display:flex; flex-wrap:nowrap; align-items:center; gap:5px;} .webinar-banner .webinar-countdown-label{font-size:11.5px; white-space:nowrap;} .webinar-banner .webinar-countdown-box{padding:3px 7px; font-size:14px;} .webinar-banner .webinar-countdown-box small{font-size:10px; margin-left:1px;} .webinar-banner .webinar-countdown-extra{display:block; margin-top:6px; font-size:11.5px;} .webinar-banner .webinar-banner-cta{width:100% !important; text-align:center; justify-content:center; padding:9px 18px !important;} .hero .cta{display:block; width:100%; text-align:center;} .featrow{gap:10px 18px; margin-top:24px;} } @media(max-width:360px){ .webinar-banner .webinar-countdown-label{display:none;} .hero h1{font-size:32px;} } /* ---------- PHONE CENTERING: hero + footer stack centered on mobile ---------- */ @media(max-width:880px){ .hero{text-align:center;} .hero .eyebrow{justify-content:center;} .hero .avatars{justify-content:center;} .hero p.sub{margin-left:auto; margin-right:auto;} .hero .featrow{justify-content:center;} } @media(max-width:560px){ .footer-top, .footer-extra{justify-items:center; text-align:center;} .footer-col, .footer-col h4{text-align:center;} .footer-brand{display:flex; flex-direction:column; align-items:center;} .footer-social{justify-content:center;} .footer-col a, .footer-col button{text-align:center;} } @media(max-width:700px){ #webinarPageCountdown .webinar-countdown{flex-wrap:nowrap; gap:5px;} #webinarPageCountdown .webinar-countdown-label{font-size:11.5px; white-space:nowrap;} #webinarPageCountdown .webinar-countdown-box{padding:5px 8px; font-size:16px;} #webinarPageCountdown .webinar-countdown-box small{font-size:10px; margin-left:1px;} #webinarPageCountdown .webinar-countdown-extra{display:block; margin-top:6px;} } @media(max-width:360px){ #webinarPageCountdown .webinar-countdown-label{display:none;} } /* text + photo sit closer together on desktop (group is centered; photo size unchanged) */ @media(min-width:881px){ .hero{grid-template-columns:fit-content(640px) 380px; justify-content:center; column-gap:70px;} } /* ---------- ONE FORMAT: Courses / Learn / Our Work ---------- Every home-page section now has centered headings, and every card (Learn videos, Short Form reels, Long Form documentaries) is exactly the same size as a course card: same width (3 across on desktop, 2 across on tablets — same as the course grid) and the same 22px gap. */ .yt-grid{gap:22px;} .yt-thumb{aspect-ratio:auto; height:230px;} /* same picture height as a course card's top */ @media(min-width:561px){ #work-sec{max-width:1280px;} #shortBlock, #longBlock{width:100%; max-width:none; margin:0 auto 44px;} #shortGrid, #longGrid{max-width:none; margin:0; gap:22px;} #shortGrid .reel-card, #longGrid .reel-card-long{width:calc((100% - 22px * 2) / 3);} /* keeps a short row centered, while a longer row still scrolls sideways from its first card */ #shortGrid .reel-card:first-child, #longGrid .reel-card-long:first-child{margin-left:auto;} #shortGrid .reel-card:last-child, #longGrid .reel-card-long:last-child{margin-right:auto;} } @media(min-width:561px) and (max-width:880px){ #shortGrid .reel-card, #longGrid .reel-card-long{width:calc((100% - 22px) / 2);} } /* Shorts: 4 cards across on desktop (Long Form + Learn stay 3 across, same size as a course card) */ @media(min-width:881px){ #shortGrid .reel-card{width:max(220px, calc((100% - 22px * 3) / 4));} } /* Long cards are now the course-card width on every screen, so keep the stacked client strip on big monitors too */ @media(min-width:1540px){ #longGrid .reel-client{flex-direction:column; align-items:stretch; gap:10px; padding:14px 16px;} #longGrid .rc-head{flex:none; padding-right:0;} #longGrid .rc-stats{flex:none; border-left:0; padding-left:0;} #longGrid .rc-stat{padding:0 10px;} #longGrid .rc-stat:first-child{padding-left:0;} } /* Platform logo on the small pill over a video (non-YouTube platforms) */ .reel-top .rt-ico{width:18px; height:18px; flex-shrink:0; display:block;} /* Admin reel form: 5-logo picker */ .rc-pick-row{display:flex; gap:8px; margin-bottom:10px;} .rc-pick{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; background:var(--canvas); border:1.5px solid var(--line); border-radius:10px; cursor:pointer; color:var(--text); } .rc-pick:hover{border-color:#8a8a99;} .rc-pick.active{border-color:var(--blue); background:var(--panel-2); box-shadow:0 0 0 2px rgba(79,124,255,.25);} .rc-pick-ico{width:28px; height:28px; display:block;} .rc-pick-name{font-size:10.5px; font-weight:700; line-height:1;} /* ---------- Bigger cards ---------- Courses, Learn and Long Form get a wider content area (1280 -> 1400px), so every card in those rows is ~10% bigger, with a slightly taller picture to match. Short Form is kept at exactly its previous size. */ #courses-sec, #learn-sec, #work-sec{max-width:1400px;} .new-course-top{height:245px;} .yt-thumb{height:245px;} @media(min-width:881px){ #shortGrid{max-width:1224px; margin:0 auto;} /* Short Form row stays as wide as before -> same card size */ } /* Instagram / Facebook / X / LinkedIn videos in the play popup */ .modal.modal-social{max-width:440px;} .modal.modal-social iframe.social-embed{aspect-ratio:auto; height:640px; max-height:78vh;} /* ---------- Short Form: wider cards (width only) ---------- On screens >= 1300px the Short Form row gets a wider area (up to ~1380px instead of 1224px), so all 4 cards across are wider (~289px -> up to ~327px) and still fit completely inside the row — nothing is cut at the edges. The picture height is locked to exactly what it was before (509.33px = the old 9:16 height), so only the width changes. Long Form / Learn / Courses rows keep their own width; smaller screens keep the previous layout. */ @media(min-width:1300px){ #work-sec{max-width:1436px;} #longBlock{max-width:1344px;} #shortGrid{max-width:none; margin:0;} #shortGrid .reel-card{width:calc((100% - 22px * 3) / 4);} #shortGrid .reel-thumb{aspect-ratio:auto; height:509.33px;} } /* ---------- Play button follows the platform ---------- The red play button is YouTube's look, so it only shows for YouTube. Instagram / Facebook / X / LinkedIn get a play button in their own colours (the triangle stays white). */ .reel-thumb[data-pf="instagram"] .reel-mid .play, .yt-thumb[data-pf="instagram"] .play{background:linear-gradient(45deg,#feda75,#fa7e1e 30%,#d62976 62%,#4f5bd5); box-shadow:0 8px 22px rgba(214,41,118,.4);} .reel-thumb[data-pf="facebook"] .reel-mid .play, .yt-thumb[data-pf="facebook"] .play{background:#1877f2; box-shadow:0 8px 22px rgba(24,119,242,.4);} .reel-thumb[data-pf="linkedin"] .reel-mid .play, .yt-thumb[data-pf="linkedin"] .play{background:#0a66c2; box-shadow:0 8px 22px rgba(10,102,194,.4);} .reel-thumb[data-pf="x"] .reel-mid .play, .yt-thumb[data-pf="x"] .play{background:#000; border:2px solid rgba(255,255,255,.85); box-shadow:0 8px 22px rgba(0,0,0,.5);} /* "Watch Now" dot on Learn cards follows the platform too */ .yt-card:has(.yt-thumb[data-pf="instagram"]) .yt-watch .dot{background:#d62976;} .yt-card:has(.yt-thumb[data-pf="facebook"]) .yt-watch .dot{background:#1877f2;} .yt-card:has(.yt-thumb[data-pf="linkedin"]) .yt-watch .dot{background:#0a66c2;} .yt-card:has(.yt-thumb[data-pf="x"]) .yt-watch .dot{background:#000;} /* ---------- Intro video card (WATCH — meet Artboard Academy): a bit bigger ---------- */ .intro-video-wrap{max-width:1000px;} /* Admin reel form: "Type myself / Auto" switch for the subscribers + views numbers */ .rc-mode-row{display:flex; gap:8px; margin-bottom:6px;} .rc-mode{ flex:1; min-width:0; padding:9px 6px; font-size:12px; font-weight:700; line-height:1.2; background:var(--canvas); border:1.5px solid var(--line); border-radius:10px; cursor:pointer; color:var(--text); } .rc-mode:hover{border-color:#8a8a99;} .rc-mode.active{border-color:var(--blue); background:var(--panel-2); box-shadow:0 0 0 2px rgba(79,124,255,.25);} /* ---------- Short-Form card: video ko frame me fit karna ---------- YouTube Shorts ka thumbnail 16:9 (1280x720) canvas par aata hai, jisme asli vertical video beech me (sirf ~31.6% width) hota hai aur dono side blurred/black bars baked-in hote hain. Pehle "cover" se card me wo side bars dikh jate the. Ab thumbnail ko itna zoom karte hain ki sirf beech ka asli video card ki poori width me fit ho (bars hat jaate hain). 320% = 1280/405 thoda extra, taaki edge par koi patli line na dikhe. Sirf YouTube ke auto-thumbnails par lagta hai (custom thumb / Instagram par nahi). */ #shortGrid .reel-thumb[data-ytid]:not([data-ytid=""]){ background-size:320% auto; background-position:center; background-repeat:no-repeat; }