/* ============================================================ ShortsCraft — App Shell (Swishy.ai & AutoAE Aesthetic) ============================================================ */ html, body.sh-body{ /* border-box on the elements themselves, not just their children: the bare auth screens put padding on , which with width:100% and the default content-box made the document 40px wider than the viewport. */ box-sizing:border-box; width:100%; max-width:100vw; overflow-x:hidden !important; background-color:#08080d !important; background-image: radial-gradient(ellipse 80% 50% at 50% -12%, rgba(110, 80, 255, 0.18), transparent 70%), radial-gradient(ellipse 60% 40% at 90% 20%, rgba(255, 60, 140, 0.09), transparent 60%), radial-gradient(ellipse 50% 50% at 10% 60%, rgba(0, 210, 255, 0.08), transparent 60%), radial-gradient(circle at 50% 100%, rgba(120, 90, 255, 0.10), transparent 50%) !important; background-attachment:fixed !important; color:#fff !important; margin:0; padding:0; } body.sh-body{ --sh-ink:#ffffff; --sh-ink2:#b8b8c4; --sh-ink3:#7e7e8c; --sh-ink4:#4e4e5c; --sh-bg1:rgba(12, 12, 18, 0.75); --sh-bg2:rgba(18, 18, 28, 0.85); --sh-bg3:rgba(26, 26, 38, 0.90); --sh-card:rgba(15, 15, 24, 0.85); --sh-line:rgba(255,255,255,.09); --sh-line2:rgba(255,255,255,.20); --sh-rail:250px; --sh-r:14px; --sh-rlg:20px; --sh-font:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --sh-display:"Space Grotesk","Inter",system-ui,sans-serif; font-family:var(--sh-font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.sh-body *, body.sh-body *::before, body.sh-body *::after{box-sizing:border-box} body.sh-body a{color:inherit;text-decoration:none} body.sh-body img{max-width:100%;display:block} body.sh-body ::selection{background:#7952ff;color:#fff} body.sh-body :focus-visible:not(input):not(textarea):not(select){outline:2px solid #a485ff;outline-offset:2px;border-radius:6px} body.sh-body [hidden], [hidden]{display:none !important} .sh-sr, .ed-sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* scroll progress with gradient */ body.sh-body #scrollBar{ position:fixed;top:0;left:0;height:2.5px;width:0; background:linear-gradient(90deg, #7952ff 0%, #00d2ff 50%, #ff3b88 100%); box-shadow:0 0 10px rgba(121, 82, 255, 0.6); z-index:120; } /* ── Layout ────────────────────────────────────────────── */ .sh-wrap{ display:flex; width:100%; max-width:100vw; min-height:100vh; background:transparent; overflow-x:hidden; } /* ── Sidebar ───────────────────────────────────────────── */ .sh-rail{ position:fixed;inset:0 auto 0 0; width:var(--sh-rail); display:flex;flex-direction:column;gap:18px; padding:20px 16px; background:linear-gradient(180deg, rgba(14, 14, 22, 0.88) 0%, rgba(9, 9, 14, 0.95) 100%); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-right:1px solid var(--sh-line); z-index:60; } .sh-brand{display:flex;align-items:center;gap:10px;padding:2px 6px 0;transition:transform .18s ease} .sh-brand:hover{transform:scale(1.02)} .sh-brand-mark{ width:32px;height:32px;flex:none; display:grid;place-items:center; border-radius:50%;overflow:hidden; border:1px solid rgba(255,255,255,0.25); box-shadow:0 0 16px rgba(120, 90, 255, 0.35); animation:shLogoPulse 4s ease-in-out infinite alternate; } @keyframes shLogoPulse{ 0%{box-shadow:0 0 12px rgba(255,255,255,.15);border-color:rgba(255,255,255,.2)} 100%{box-shadow:0 0 24px rgba(120,90,255,.55), 0 0 10px rgba(0,210,255,.35);border-color:rgba(180,160,255,.55)} } .sh-brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} .sh-brand-name{ font-family:var(--sh-display); font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff; } .sh-brand-name i{font-style:normal;color:var(--sh-ink3)} .sh-social{display:flex;gap:6px;padding:0 6px} .sh-social a{ width:28px;height:28px;display:grid;place-items:center; border:1px solid var(--sh-line);border-radius:8px;color:var(--sh-ink3); background:rgba(255,255,255,.02); transition:all .18s ease; } .sh-social a:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);transform:translateY(-1px)} .sh-social svg{width:14px;height:14px} .sh-cta{ position:relative; overflow:hidden; display:flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:0 16px; background:linear-gradient(135deg, #ffffff 0%, #edf0ff 100%); color:#000 !important; border-radius:999px; font-size:14px;font-weight:700;letter-spacing:-.01em; box-shadow:0 4px 18px rgba(255,255,255,.22), 0 0 24px rgba(120, 90, 255, 0.2); transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,opacity .16s ease; } .sh-cta::after{ content:""; position:absolute;top:-50%;left:-60%; width:40%;height:200%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); transform:rotate(25deg); animation:shBtnShine 4.5s cubic-bezier(.16,1,.3,1) infinite; pointer-events:none; } @keyframes shBtnShine{ 0%,65%{left:-60%} 100%{left:140%} } .sh-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,255,255,.35), 0 0 35px rgba(120, 90, 255, 0.35);opacity:.97} .sh-cta:active{transform:scale(0.97) translateY(0) !important} .sh-cta svg{width:14px;height:14px;flex:none;fill:currentColor} .sh-nav{display:flex;flex-direction:column;gap:3px} .sh-nav a{ display:flex;align-items:center;gap:12px; padding:10px 14px;border-radius:10px; color:var(--sh-ink2); font-size:14px;font-weight:550; transition:all .15s ease; } .sh-nav svg{width:18px;height:18px;flex:none;opacity:.75} .sh-nav a:hover{background:var(--sh-bg3);color:#fff} .sh-nav a:hover svg{opacity:1} .sh-nav a[aria-current="page"]{ background:rgba(255,255,255,.10); color:#fff; font-weight:650; } .sh-nav a[aria-current="page"] svg{opacity:1} .sh-rail-foot{ margin-top:auto; display:flex; flex-direction:column; gap:12px; } .sh-plan-badge{ border:1px solid var(--sh-line);border-radius:var(--sh-r); padding:12px 14px;background:var(--sh-bg2); } .sh-plan-badge b{display:block;font-size:13px;font-weight:650;margin-bottom:2px;color:#fff} .sh-plan-badge span{display:block;font-size:11.5px;color:var(--sh-ink3);line-height:1.45} .sh-plan-badge a{ display:inline-block;margin-top:8px; font-size:11.5px;font-weight:650;color:#fff; border-bottom:1px solid var(--sh-line2); } /* ── Sidebar User / Account Bar & Flyout Popover Menu ──── */ .sh-user-box{ position:relative; border-top:1px solid var(--sh-line); padding-top:10px; } .sh-user-box [hidden], .sh-user-trigger-wrap[hidden], .sh-guest-row[hidden], [data-auth][hidden]{ display:none !important; } .sh-user-trigger-wrap{ position:relative; display:block; width:100%; } .sh-user-trigger{ width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:linear-gradient(180deg, rgba(25, 25, 38, 0.75) 0%, rgba(14, 14, 22, 0.85) 100%); border:1px solid rgba(255,255,255,0.1); color:var(--sh-ink2); cursor:pointer; font-family:inherit; text-align:left; box-shadow:0 4px 14px rgba(0,0,0,0.4); transition:all .2s cubic-bezier(.16,1,.3,1); } .sh-user-trigger:hover, .sh-user-trigger-wrap:hover .sh-user-trigger, .sh-user-trigger-wrap.active .sh-user-trigger{ background:linear-gradient(180deg, rgba(32, 32, 50, 0.9) 0%, rgba(18, 18, 28, 0.95) 100%); border-color:rgba(160, 140, 255, 0.4); color:#fff; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.6), 0 0 16px rgba(120, 90, 255, 0.15); } .sh-user-trigger-av{ width:28px; height:28px; flex:none; border-radius:50%; background:linear-gradient(135deg, rgba(130, 90, 255, 0.6) 0%, rgba(0, 210, 255, 0.4) 100%); border:1px solid rgba(255,255,255,0.3); display:grid; place-items:center; color:#fff; font-size:11px; font-weight:750; box-shadow:0 0 10px rgba(120, 90, 255, 0.35); } .sh-user-trigger-info{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; } .sh-user-trigger-name{ font-size:12.5px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sh-user-trigger-handle{ font-size:10.5px; color:var(--sh-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sh-user-trigger-arrow{ font-size:9px; color:var(--sh-ink3); opacity:0.7; transition:transform .2s ease; } .sh-user-trigger-wrap:hover .sh-user-trigger-arrow, .sh-user-trigger-wrap.active .sh-user-trigger-arrow{ transform:rotate(180deg); color:#fff; opacity:1; } /* ── Interactive Flyout Popover Menu ───────────────────── */ .sh-user-popover{ position:absolute; bottom:calc(100% + 10px); left:0; width:268px; background:linear-gradient(180deg, rgba(24, 24, 38, 0.98) 0%, rgba(12, 12, 18, 0.99) 100%); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,0.16); border-radius:18px; padding:12px; box-shadow:0 24px 60px rgba(0,0,0,0.92), 0 0 35px rgba(120, 90, 255, 0.2); z-index:100; opacity:0; transform:translateY(10px) scale(0.95); pointer-events:none; transition:opacity .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1); box-sizing:border-box; } /* Open popover only via the .active class (click/tap toggle in authui.js) — hover was removed: it popped the menu open on mouse proximity alone and has no equivalent on touch devices. */ .sh-user-trigger-wrap.active .sh-user-popover{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .sh-upop-head{ display:flex; align-items:center; gap:10px; padding:4px 4px 10px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:8px; } .sh-upop-av{ width:36px; height:36px; flex:none; border-radius:50%; background:linear-gradient(135deg, rgba(130, 90, 255, 0.7) 0%, rgba(0, 210, 255, 0.5) 100%); border:1.5px solid rgba(255,255,255,0.35); display:grid; place-items:center; color:#fff; font-size:13px; font-weight:750; box-shadow:0 0 14px rgba(120, 90, 255, 0.4); } .sh-upop-info{ flex:1; min-width:0; line-height:1.25; } .sh-upop-name{ display:block; font-size:13px; font-weight:750; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sh-upop-handle{ display:block; font-size:11px; color:var(--sh-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sh-upop-email{ display:block; font-size:10px; color:var(--sh-ink4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sh-upop-badge-row{ display:flex; align-items:center; gap:6px; padding:0 2px 8px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:6px; } .sh-upop-plan-pill{ font-size:10px; font-weight:750; padding:2px 7px; border-radius:999px; background:rgba(120, 90, 255, 0.18); border:1px solid rgba(120, 90, 255, 0.4); color:#a58cff; } .sh-upop-credits-pill{ font-size:10px; font-weight:650; padding:2px 7px; border-radius:999px; background:rgba(255, 215, 0, 0.12); border:1px solid rgba(255, 215, 0, 0.3); color:#ffd700; } /* The trigger under the popover already shows the handle, so repeating it here made the same identity appear twice in one corner. Keep name + email. */ .sh-upop-handle{display:none} .sh-upop-menu{ display:flex; flex-direction:column; gap:2px; } /* Menu rows are single-line: the descriptions turned every row into two lines and made a 9-item menu taller than the sidebar it hangs off. */ .sh-upop-item-txt span{display:none} .sh-upop-item{padding:8px} .sh-upop-item-txt b{font-size:12.5px} /* Items stagger in when the menu opens. Only opacity and transform are animated, so this composites on the GPU and cannot cause layout jank. */ .sh-user-trigger-wrap.active .sh-upop-item{ animation:shUpopIn .26s cubic-bezier(.16,1,.3,1) both; } .sh-user-trigger-wrap.active .sh-upop-item:nth-child(1){animation-delay:.02s} .sh-user-trigger-wrap.active .sh-upop-item:nth-child(2){animation-delay:.04s} .sh-user-trigger-wrap.active .sh-upop-item:nth-child(3){animation-delay:.06s} .sh-user-trigger-wrap.active .sh-upop-item:nth-child(4){animation-delay:.08s} .sh-user-trigger-wrap.active .sh-upop-item:nth-child(5){animation-delay:.10s} .sh-user-trigger-wrap.active .sh-upop-item:nth-child(6){animation-delay:.12s} .sh-user-trigger-wrap.active .sh-upop-item:nth-child(7){animation-delay:.14s} @keyframes shUpopIn{ from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} } .sh-upop-item{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; color:var(--sh-ink2); text-decoration:none; background:none; border:none; width:100%; text-align:left; cursor:pointer; font-family:inherit; transition:all .15s ease; box-sizing:border-box; } .sh-upop-item:hover{ background:rgba(255,255,255,0.08); color:#fff; transform:translateX(2px); } .sh-upop-item svg{ width:16px; height:16px; flex:none; color:var(--sh-ink3); transition:color .15s ease; } .sh-upop-item:hover svg{ color:#fff; } .sh-upop-item-txt{ display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.2; } .sh-upop-item-txt b{ font-size:12px; font-weight:650; color:#fff; } .sh-upop-item-txt span{ font-size:10px; color:var(--sh-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sh-upop-item.highlight{ background:linear-gradient(135deg, rgba(120, 90, 255, 0.14) 0%, rgba(0, 210, 255, 0.08) 100%); border:1px solid rgba(120, 90, 255, 0.25); margin:2px 0; } .sh-upop-item.highlight:hover{ background:linear-gradient(135deg, rgba(120, 90, 255, 0.25) 0%, rgba(0, 210, 255, 0.16) 100%); border-color:rgba(160, 140, 255, 0.5); box-shadow:0 0 16px rgba(120, 90, 255, 0.2); } .sh-upop-item.highlight svg{ color:#a58cff; } .sh-upop-hot-tag{ font-size:8.5px; font-weight:800; padding:2px 5px; border-radius:6px; background:#ff2a6d; color:#fff; letter-spacing:.04em; flex:none; box-shadow:0 0 8px rgba(255,42,109,0.5); } .sh-upop-foot{ margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,0.08); } .sh-upop-logout{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; border-radius:10px; background:none; border:none; color:#ff5d5d; font-family:inherit; font-size:12px; font-weight:650; cursor:pointer; transition:all .15s ease; } .sh-upop-logout:hover{ background:rgba(255,93,93,0.12); color:#ff7878; } .sh-upop-logout svg{ width:15px; height:15px; } .sh-guest-row{ display:flex; align-items:center; gap:8px; } .sh-guest-login{ flex:1; text-align:center; height:34px; line-height:32px; border:1px solid var(--sh-line); border-radius:10px; font-size:12px; font-weight:650; color:var(--sh-ink2); background:rgba(255,255,255,0.02); transition:all .18s ease; } .sh-guest-login:hover{ color:#fff; border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.08); transform:translateY(-1px); } .sh-guest-signup{ flex:1; text-align:center; height:34px; line-height:34px; background:linear-gradient(135deg, #ffffff 0%, #edf0ff 100%); color:#000 !important; border-radius:10px; font-size:12px; font-weight:750; box-shadow:0 2px 10px rgba(255,255,255,0.2); transition:all .18s ease; } .sh-guest-signup:hover{ opacity:.95; transform:translateY(-1px); box-shadow:0 4px 14px rgba(255,255,255,0.3); } /* ── Main column ───────────────────────────────────────── */ .sh-main{ flex:1; min-width:0; width:calc(100vw - var(--sh-rail)); max-width:calc(100vw - var(--sh-rail)); margin-left:var(--sh-rail); background:transparent; overflow-x:hidden; } .sh-topbar{ position:sticky;top:0;z-index:50; height:60px; display:flex;align-items:center;justify-content:flex-end;gap:18px; padding:0 32px; background:rgba(8,8,13,.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--sh-line); } .sh-tlink{padding:6px 12px;border-radius:8px;font-size:13.5px;font-weight:550;color:var(--sh-ink2);transition:all .15s ease} .sh-tlink:hover{color:#fff;background:rgba(255,255,255,.08)} /* ── Redesigned Distinctive Upgrade Pro Button ─────────── */ .sh-tupgrade, .sh-tfill{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 15px; border-radius:999px; background:linear-gradient(135deg, rgba(125, 85, 255, 0.28) 0%, rgba(85, 50, 240, 0.38) 50%, rgba(0, 210, 255, 0.24) 100%); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(175, 145, 255, 0.45); color:#fff !important; font-size:12.5px; font-weight:700; letter-spacing:.01em; box-shadow:0 4px 18px rgba(121, 82, 255, 0.35), 0 0 16px rgba(0, 210, 255, 0.18); transition:all .2s cubic-bezier(.16,1,.3,1); text-decoration:none; } .sh-tupgrade::after, .sh-tfill::after{ content:""; position:absolute;top:-50%;left:-60%; width:40%;height:200%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:rotate(25deg); animation:shBtnShine 4.5s cubic-bezier(.16,1,.3,1) infinite; pointer-events:none; } .sh-tupgrade:hover, .sh-tfill:hover{ transform:translateY(-1.5px); border-color:rgba(215, 195, 255, 0.85); box-shadow:0 8px 26px rgba(121, 82, 255, 0.55), 0 0 24px rgba(0, 210, 255, 0.32); background:linear-gradient(135deg, rgba(135, 95, 255, 0.42) 0%, rgba(95, 60, 255, 0.5) 50%, rgba(0, 220, 255, 0.32) 100%); filter:brightness(1.08); } .sh-tupgrade:active, .sh-tfill:active{ transform:scale(0.96) !important; } .sh-tup-sparkle{ color:#ffd700; font-size:11px; animation:shSparkleRot 3.5s linear infinite; } .sh-tline{ padding:7px 16px;border-radius:999px; border:1px solid var(--sh-line2);color:#fff; font-size:13px;font-weight:600; background:rgba(255,255,255,.03); transition:all .15s ease; } .sh-tline:hover{background:#fff;color:#000 !important;border-color:#fff;box-shadow:0 0 16px rgba(255,255,255,.3)} .sh-tsep{width:1px;height:20px;background:var(--sh-line);margin:0 4px} body.sh-body #navBurger{ display:none; width:38px;height:38px;margin-right:auto; background:none;border:1px solid var(--sh-line);border-radius:8px; flex-direction:column;gap:4px;align-items:center;justify-content:center; cursor:pointer;padding:0; } body.sh-body #navBurger span{display:block;width:16px;height:1.5px;background:#fff;border-radius:2px} body.sh-body #navMobile{ display:none; flex-direction:column;gap:2px; padding:10px 16px 16px; border-bottom:1px solid var(--sh-line); background:var(--sh-bg1); } body.sh-body #navMobile a{padding:11px 12px;border-radius:10px;font-size:15px;color:var(--sh-ink2)} body.sh-body #navMobile a:hover{background:var(--sh-bg3);color:#fff} body.sh-body #navMobile a.sh-mfill{background:#fff;color:#000 !important;font-weight:650;text-align:center;margin-top:6px} /* ── Hero / Swishy Header with Ambient Glow Pulse ──────── */ .sh-hero{ position:relative; display:block; padding:44px 24px 16px; text-align:center; overflow:hidden; } .sh-hero::before{ content:""; position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:640px; height:260px; background:radial-gradient(ellipse at center, rgba(125, 90, 255, 0.24) 0%, rgba(0, 210, 255, 0.12) 45%, transparent 70%); filter:blur(48px); border-radius:50%; pointer-events:none; z-index:0; animation:shAmbientPulse 6s ease-in-out infinite alternate; } @keyframes shAmbientPulse{ 0%{transform:translateX(-50%) scale(0.92);opacity:0.65} 100%{transform:translateX(-50%) scale(1.12);opacity:1} } .sh-hero h1{ position:relative; z-index:1; display:block; margin:0 auto 10px; max-width:840px; font-family:var(--sh-display); font-size:clamp(30px, 3.8vw, 50px); line-height:1.12;letter-spacing:-.03em;font-weight:750;color:#fff; } .sh-hero-sub{ position:relative; z-index:1; display:block; margin:0 auto; max-width:580px; font-size:clamp(14px,1.4vw,16px); line-height:1.6;color:var(--sh-ink2); } /* ── Floating Prompt Composer with Gradient Glass & Shimmer Focus ── */ .sh-composer{ position:relative; z-index:10; display:block; margin:24px auto 0; width:100%; max-width:740px; background:linear-gradient(180deg, rgba(24, 24, 38, 0.88) 0%, rgba(13, 13, 20, 0.94) 100%); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:16px 20px; box-shadow:0 24px 60px rgba(0,0,0,.7), 0 0 35px rgba(110, 80, 255, 0.10); transition:all .22s cubic-bezier(.16,1,.3,1); } .sh-composer:hover{ border-color:rgba(255,255,255,.2); box-shadow:0 26px 65px rgba(0,0,0,.75), 0 0 45px rgba(110, 80, 255, 0.15); } .sh-composer:focus-within{ border-color:rgba(160, 140, 255, 0.5); box-shadow:0 30px 75px rgba(0,0,0,.8), 0 0 50px rgba(120, 90, 255, 0.25), 0 0 0 1px rgba(160, 140, 255, 0.2); } .sh-ctop{display:block;margin-bottom:10px} .sh-composer textarea{ width:100%; background:transparent; border:0; outline:none; resize:none; color:#fff; font-family:var(--sh-font); font-size:15px; line-height:1.5; padding:0; margin:0; min-height:44px; max-height:160px; } .sh-composer textarea::placeholder{color:var(--sh-ink3)} .sh-cbar{ display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); } .sh-imgbtn{ width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--sh-line);border-radius:9px;color:var(--sh-ink2);cursor:pointer; background:rgba(255,255,255,.02); transition:all .18s ease; } .sh-imgbtn:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);transform:translateY(-1px)} .sh-imgbtn svg{width:17px;height:17px;display:block} .sh-imgchip{ display:inline-flex;align-items:center;gap:6px;max-width:170px; height:36px;padding:0 10px;flex:none; border:1px solid var(--sh-line2);border-radius:9px; background:rgba(255,255,255,.08);color:var(--sh-ink2); font-family:inherit;font-size:12px;cursor:pointer; transition:all .15s ease; } .sh-imgchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sh-imgchip b{color:#fff} .sh-imgchip:hover{color:#fff;border-color:#fff;transform:translateY(-1px)} .sh-imgchip[hidden]{display:none !important} /* Quality dropdown pill */ .sh-custom-select{position:relative;display:inline-block} .sh-csel-btn{ display:inline-flex;align-items:center;gap:6px; height:36px;padding:0 12px; border-radius:999px; border:1px solid var(--sh-line); background:rgba(255,255,255,.04); color:var(--sh-ink2); font-family:inherit;font-size:12.5px;font-weight:600; cursor:pointer; transition:all .18s ease; } .sh-csel-btn:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-1px)} .sh-csel-sparkle{color:#ffd700;font-size:11px;animation:shSparkleRot 3s linear infinite} @keyframes shSparkleRot{ 0%,100%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(20deg) scale(1.15)} } .sh-csel-arrow{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;opacity:.7} .sh-csel-menu{ position:absolute;top:calc(100% + 8px);left:0; min-width:260px; background:linear-gradient(180deg, rgba(24, 24, 36, 0.98) 0%, rgba(14, 14, 22, 0.99) 100%); backdrop-filter:blur(24px); border:1px solid var(--sh-line2); border-radius:14px; padding:6px; box-shadow:0 20px 50px rgba(0,0,0,.85), 0 0 30px rgba(120, 90, 255, 0.15); z-index:90; } .sh-csel-opt{ display:flex;align-items:center;justify-content:space-between; padding:8px 12px;border-radius:8px; cursor:pointer;transition:background .15s ease, transform .15s ease; } .sh-csel-opt:hover{background:rgba(255,255,255,.08);transform:translateX(2px)} .sh-csel-opt.selected{background:rgba(255,255,255,.14)} .sh-csel-opt-main{display:flex;flex-direction:column;gap:2px} .sh-csel-opt-main b{font-size:12.5px;font-weight:650;color:#fff} .sh-csel-opt-main span{font-size:11px;color:var(--sh-ink3)} .sh-csel-check{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.5;opacity:0} .sh-csel-opt.selected .sh-csel-check{opacity:1} .sh-cgrow{flex:1 1 auto} .sh-cgo{ position:relative; overflow:hidden; display:inline-flex;align-items:center;gap:6px; height:38px;padding:0 22px; background:linear-gradient(135deg, #ffffff 0%, #edf0ff 100%); color:#000 !important; border:0;border-radius:999px; font-family:var(--sh-font); font-size:13.5px;font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(255,255,255,.2); transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease,opacity .18s ease; } .sh-cgo::after{ content:""; position:absolute;top:-50%;left:-60%; width:40%;height:200%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); transform:rotate(25deg); animation:shBtnShine 4.5s cubic-bezier(.16,1,.3,1) infinite; pointer-events:none; } .sh-cgo:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:0 8px 24px rgba(255,255,255,.35);background:#f6f6f6} .sh-cgo:active:not(:disabled){transform:scale(0.96) !important} .sh-cgo:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none} /* ── Gallery Section & Clean Header (Swishy Style) ─────── */ .sh-gallery-sec{ display:block; padding:24px 0 60px; width:100%; max-width:100%; overflow-x:hidden; } .sh-ghead{ padding:0 28px 14px; width:100%; max-width:100%; box-sizing:border-box; } .sh-search-bar-row{ display:flex; align-items:center; gap:12px; width:100%; max-width:100%; box-sizing:border-box; } /* Search Box */ .sh-search-box{ position:relative; display:flex; align-items:center; width:240px; flex:none; } .sh-search-box svg{ position:absolute;left:12px; width:15px;height:15px; color:var(--sh-ink3); pointer-events:none; } .sh-search-box input{ width:100%; height:36px; padding:0 30px 0 36px; background:rgba(255,255,255,.04); border:1px solid var(--sh-line); border-radius:999px; color:#fff; font-family:var(--sh-font); font-size:13px; transition:all .18s ease; } .sh-search-box input::placeholder{color:var(--sh-ink3)} .sh-search-box input:focus{ outline:none; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.25); } .sh-search-box button{ position:absolute;right:8px; background:none;border:none; color:var(--sh-ink3);font-size:17px; cursor:pointer;padding:2px 6px; } .sh-search-box button:hover{color:#fff} /* Category Filter Chips Horizontal Scroll */ .sh-filters-scroll{ display:flex; align-items:center; gap:6px; overflow-x:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex:1; min-width:0; padding:2px 0; } .sh-filters-scroll::-webkit-scrollbar{display:none} .sh-chip{ flex:none;height:34px;padding:0 15px; border:1px solid rgba(255,255,255,0.08); border-radius:999px; background:transparent;color:var(--sh-ink2); font-family:var(--sh-font);font-size:13px;font-weight:550; cursor:pointer;white-space:nowrap; transition:all .15s ease; } .sh-chip:hover{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)} .sh-chip.active, .sh-chip[aria-pressed="true"]{ background:#fff; color:#000 !important; border-color:#fff; font-weight:700; } /* ── Templates Grid & Cards ────────────────────────────── */ .sh-gallery-sec{ width:100%; max-width:100%; box-sizing:border-box; } .sh-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px; padding:12px 24px 60px; width:100%; max-width:100%; box-sizing:border-box; align-items:start; } @media (min-width: 1400px) { .sh-gallery { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 900px) { .sh-gallery { grid-template-columns: repeat(2, 1fr); padding:10px 14px 40px; } } @media (max-width: 540px) { .sh-gallery { grid-template-columns: 1fr; } } .sh-tile{ display:flex; flex-direction:column; position:relative; background:linear-gradient(180deg, rgba(22, 22, 34, 0.82) 0%, rgba(11, 11, 17, 0.94) 100%); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:9px; width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; transition:transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s ease, border-color .24s ease; } .sh-tile[hidden]{display:none !important} .sh-tile:hover{ transform:translateY(-4px); border-color:rgba(160, 140, 255, 0.35); box-shadow:0 18px 40px rgba(0,0,0,.85), 0 0 28px rgba(110, 80, 255, 0.16); } .sh-stage{ display:block; position:relative; width:100%; aspect-ratio:9/14; background:#040406; border-radius:11px; overflow:hidden; box-shadow:inset 0 0 30px rgba(0,0,0,.8); } .sh-stage-link{ position:absolute;inset:0; z-index:2; } .sh-stage iframe{ position:absolute;inset:0; width:100%;height:100%; border:0;display:block; pointer-events:none; z-index:1; } .sh-skel{ position:absolute;inset:0; display:grid;place-items:center; color:var(--sh-ink4); font-size:10px;letter-spacing:.14em;text-transform:uppercase; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.05) 50%,transparent 80%) var(--sh-bg2); background-size:220% 100%; animation:shShimmer 1.5s linear infinite; z-index:3; } @keyframes shShimmer{to{background-position:-220% 0}} /* Badges with subtle glowing animation */ .sh-pro-badge, .sh-comm-badge{ position:absolute; top:6px;right:6px; z-index:5; padding:2.5px 8px; border-radius:999px; font-size:9.5px;font-weight:750; letter-spacing:.06em;text-transform:uppercase; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .sh-pro-badge{ background:rgba(255,215,0,.15); border:1px solid rgba(255,215,0,.4); color:#ffd700; animation:shProBadgeGlow 4s ease-in-out infinite alternate; } @keyframes shProBadgeGlow{ 0%{box-shadow:0 0 6px rgba(255,215,0,.15);border-color:rgba(255,215,0,.35)} 100%{box-shadow:0 0 14px rgba(255,215,0,.45);border-color:rgba(255,215,0,.6)} } .sh-comm-badge{ left:6px;right:auto; background:rgba(0,255,170,.12); border:1px solid rgba(0,255,170,.35); color:#00ffaa; animation:shCommBadgeGlow 4s ease-in-out infinite alternate; } @keyframes shCommBadgeGlow{ 0%{box-shadow:0 0 6px rgba(0,255,170,.15);border-color:rgba(0,255,170,.3)} 100%{box-shadow:0 0 14px rgba(0,255,170,.45);border-color:rgba(0,255,170,.6)} } /* Hover Controls (AutoAE Style) */ .sh-card-hover-bar{ position:absolute; inset:auto 6px 6px 6px; display:flex;align-items:center;justify-content:space-between; z-index:6; opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s cubic-bezier(.16,1,.3,1); pointer-events:none; } .sh-tile:hover .sh-card-hover-bar{ opacity:1; transform:translateY(0); pointer-events:auto; } .sh-card-btn{ display:grid;place-items:center; width:30px;height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(10,10,14,.88); backdrop-filter:blur(12px); color:#fff; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.6); transition:all .16s ease; } .sh-card-btn.play svg{width:12px;height:12px;margin-left:1px} .sh-card-btn.open{background:#fff;color:#000;border-color:#fff} .sh-card-btn.open svg{width:12px;height:12px} .sh-card-btn:hover{transform:scale(1.1);filter:brightness(1.15)} /* ── Card Meta Below Stage (Compact & Fitted) ─────────── */ .sh-tmeta{ padding:8px 2px 2px; display:flex; flex-direction:column; } .sh-ttitle-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; } .sh-ttitle{ font-family:var(--sh-display); font-size:13px; font-weight:700; color:#fff; letter-spacing:-.015em; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; width:100%; } .sh-tdesc{ font-size:11px; color:var(--sh-ink3); margin:0 0 6px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; min-height:15px; } /* Creator Profile Row */ .sh-tcreator-row{ display:flex; align-items:center; gap:6px; padding-bottom:6px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.06); } .sh-tcreator-avatar{ width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%); border:1px solid rgba(255,255,255,0.15); display:grid; place-items:center; font-size:8.5px; font-weight:750; color:#fff; flex:none; } .sh-tcreator-info{ display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.15; } .sh-tcreator-name{ font-size:11px; font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sh-tcreator-handle{ font-size:9.5px; color:var(--sh-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 3 Actions Bar (Like, Comment, Share) */ .sh-tact-bar{ display:flex; align-items:center; justify-content:space-between; gap:4px; } .sh-tact-btn{ display:inline-flex; align-items:center; gap:4px; background:transparent; border:1px solid rgba(255,255,255,0.07); border-radius:999px; padding:3px 6px; color:var(--sh-ink3); font-size:10.5px; font-weight:600; cursor:pointer; transition:all .15s ease; flex:1; justify-content:center; } .sh-tact-btn svg{width:11px;height:11px;flex:none} .sh-tact-btn:hover{ border-color:rgba(255,255,255,0.2); color:#fff; background:rgba(255,255,255,0.06); } .sh-tact-btn.like:hover{ color:#ff4b6e; border-color:rgba(255,75,110,0.4); background:rgba(255,75,110,0.1); transform:translateY(-1px); } .sh-tact-btn.like.liked{ color:#ff4b6e; border-color:#ff4b6e; background:rgba(255,75,110,0.15); } .sh-tact-btn.like.liked svg, .sh-modal-act-btn.liked svg{ fill:#ff4b6e; animation:shHeartPop .35s cubic-bezier(.16,1,.3,1); } @keyframes shHeartPop{ 0%{transform:scale(1)} 45%{transform:scale(1.4)} 100%{transform:scale(1)} } .sh-tact-btn.share:active, .sh-tact-btn.share.copied{ color:#3ddc84; border-color:#3ddc84; background:rgba(61,220,132,0.12); } /* Empty search state */ .sh-empty-state{ grid-column:1 / -1; text-align:center; padding:60px 20px; color:var(--sh-ink3); } .sh-empty-ico{font-size:36px;margin-bottom:12px} .sh-empty-state h3{color:#fff;font-size:18px;margin:0 0 6px} .sh-empty-state p{font-size:14px;margin:0} /* ── Centered Template Detail Modal Overlay (Rich Gradient Glass) ─ */ .sh-modal-overlay{ position:fixed; inset:0; background:rgba(4,4,8,.86); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:none; align-items:center; justify-content:center; padding:16px; z-index:999999; box-sizing:border-box; } .sh-modal-overlay.open{ display:flex !important; } .sh-modal-card{ position:relative; width:100%; max-width:920px; height:min(600px, 88vh); background:linear-gradient(180deg, rgba(22, 22, 34, 0.98) 0%, rgba(10, 10, 16, 0.99) 100%); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,.16); border-radius:20px; box-shadow:0 32px 84px rgba(0,0,0,.95), 0 0 45px rgba(110, 80, 255, 0.16); display:grid; grid-template-columns:290px 1fr; overflow:hidden; box-sizing:border-box; transform:scale(.96) translateY(10px); transition:transform .24s cubic-bezier(.16,1,.3,1), opacity .2s ease; } .sh-modal-overlay.open .sh-modal-card, .sh-modal-overlay:not([hidden]) .sh-modal-card{ transform:scale(1) translateY(0); } @media(max-width:860px){ .sh-modal-card{ grid-template-columns:1fr; height:auto; max-height:92vh; overflow-y:auto; } } .sh-modal-left{ padding:16px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; background:linear-gradient(180deg, rgba(14, 14, 22, 0.95) 0%, rgba(7, 7, 12, 0.98) 100%); border-right:1px solid rgba(255,255,255,.08); height:100%; box-sizing:border-box; overflow:hidden; } @media(max-width:860px){ .sh-modal-left{ border-right:0; border-bottom:1px solid rgba(255,255,255,.08); padding:14px; height:auto; } } .sh-modal-stage{ position:relative; width:100%; max-width:240px; margin:0 auto; aspect-ratio:9/16; flex:1; min-height:0; max-height:calc(100% - 90px); background:#020204; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 0 30px rgba(0,0,0,.9); } .sh-modal-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .sh-modal-cta{ position:relative; overflow:hidden; height:38px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg, #ffffff 0%, #edf0ff 100%); color:#000 !important; border-radius:999px; font-family:var(--sh-display); font-size:13px; font-weight:750; box-shadow:0 4px 16px rgba(255,255,255,.22), 0 0 20px rgba(120, 90, 255, 0.2); transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, filter .18s ease; text-decoration:none; flex:none; } .sh-modal-cta::after{ content:""; position:absolute;top:-50%;left:-60%; width:40%;height:200%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); transform:rotate(25deg); animation:shBtnShine 4.5s cubic-bezier(.16,1,.3,1) infinite; pointer-events:none; } .sh-modal-cta:hover{ transform:translateY(-1.5px); box-shadow:0 8px 24px rgba(255,255,255,.35), 0 0 30px rgba(120, 90, 255, 0.35); filter:brightness(1.06); } .sh-modal-cta:active{transform:scale(0.97) !important} .sh-modal-ctrls{ display:flex; align-items:center; justify-content:space-between; gap:6px; flex:none; } .sh-modal-act-btn{ flex:1; height:32px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:var(--sh-ink2); display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:11px; font-weight:600; cursor:pointer; transition:all .15s ease; } .sh-modal-act-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; } .sh-modal-act-btn.liked{ color:#ff4b6e; border-color:#ff4b6e; background:rgba(255,75,110,.15); } .sh-modal-right{ padding:20px 24px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; height:100%; box-sizing:border-box; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; } .sh-modal-right::-webkit-scrollbar{ width:5px; } .sh-modal-right::-webkit-scrollbar-track{ background:transparent; } .sh-modal-right::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:999px; } @media(max-width:860px){ .sh-modal-right{ padding:16px 18px; height:auto; overflow-y:visible; } } .sh-modal-close{ position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--sh-ink2); display:grid; place-items:center; font-size:16px; line-height:1; cursor:pointer; z-index:20; transition:all .15s ease; } .sh-modal-close:hover{ background:#fff; color:#000; border-color:#fff; } .sh-m-cat{ display:inline-block; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:10px; font-weight:750; letter-spacing:.08em; color:#fff; } .sh-m-title{ font-family:var(--sh-display); font-size:20px; font-weight:750; letter-spacing:-.02em; margin:4px 0 4px; color:#fff; line-height:1.2; } .sh-m-desc{ font-size:12.5px; line-height:1.45; color:var(--sh-ink2); margin:0 0 10px; } .sh-m-specs{ display:flex; gap:6px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); } .sh-m-spec{ padding:2px 8px; border-radius:6px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-size:11px; color:var(--sh-ink3); } .sh-m-spec b{color:#fff;font-weight:600} .sh-m-creator{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); text-decoration:none; color:inherit; transition:all .15s ease; } .sh-m-creator:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); } .sh-m-c-av{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; font-size:12px; font-weight:750; color:#fff; flex:none; } .sh-m-c-info{flex:1;min-width:0;line-height:1.2} .sh-m-c-name{display:block;font-size:12.5px;font-weight:700;color:#fff} .sh-m-c-handle{display:block;font-size:10.5px;color:var(--sh-ink3)} .sh-m-c-bio{display:block;font-size:11px;color:var(--sh-ink2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sh-m-comments{ display:flex; flex-direction:column; gap:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08); } .sh-m-comm-head{ font-family:var(--sh-display); font-size:15px; font-weight:700; color:#fff; margin:0; } .sh-m-comm-form{ display:flex; flex-direction:column; gap:6px; } .sh-m-comm-input{ width:100%; height:48px; padding:8px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:8px; color:#fff; font-family:var(--sh-font); font-size:12.5px; resize:none; outline:none; transition:border-color .15s ease; } .sh-m-comm-input:focus{border-color:rgba(255,255,255,.3)} .sh-m-comm-btn{ align-self:flex-end; height:28px; padding:0 14px; background:#fff; color:#000; border:0; border-radius:999px; font-size:11.5px; font-weight:700; cursor:pointer; transition:opacity .15s ease; } .sh-m-comm-btn:hover{opacity:.9} .sh-m-comm-list{ display:flex; flex-direction:column; gap:6px; } .sh-m-comm-item{ display:flex; gap:8px; padding:8px 10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:8px; } .sh-m-c-item-av{ width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; font-size:9.5px; font-weight:700; color:#fff; flex:none; } .sh-m-c-item-body{flex:1;min-width:0} .sh-m-c-item-head{display:flex;align-items:center;gap:5px;margin-bottom:2px} .sh-m-c-item-name{font-size:11.5px;font-weight:650;color:#fff;text-decoration:none} .sh-m-c-item-name:hover{text-decoration:underline} .sh-m-c-item-handle{font-size:10px;color:var(--sh-ink3)} .sh-m-c-item-time{font-size:9.5px;color:var(--sh-ink4);margin-left:auto} .sh-m-c-item-text{font-size:11.5px;line-height:1.4;color:var(--sh-ink2);margin:0} /* ── Workflow & Community Highlights ───────────────────── */ .sh-workflow-sec{display:block;padding:52px 28px 60px;border-top:1px solid var(--sh-line)} .sh-workflow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} .sh-workflow-card{ background:linear-gradient(180deg, rgba(20, 20, 32, 0.75) 0%, rgba(11, 11, 17, 0.9) 100%); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--sh-line); border-radius:18px; padding:26px 22px;display:flex;flex-direction:column;gap:12px; transition:transform .24s cubic-bezier(.16,1,.3,1), border-color .2s ease, box-shadow .24s ease; } .sh-workflow-card:hover{ border-color:rgba(160, 140, 255, 0.35); background:linear-gradient(180deg, rgba(26, 26, 42, 0.85) 0%, rgba(14, 14, 22, 0.95) 100%); transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.75), 0 0 25px rgba(110, 80, 255, 0.12); } .sh-workflow-card:hover .sh-workflow-icon{ border-color:rgba(160, 140, 255, 0.5); box-shadow:0 0 16px rgba(120, 90, 255, 0.3); transform:scale(1.06); } .sh-workflow-num{font-family:var(--sh-display);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--sh-ink4)} .sh-workflow-icon{ width:40px;height:40px;border-radius:12px; background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%); border:1px solid var(--sh-line);display:grid;place-items:center;color:#fff; transition:all .2s ease; } .sh-workflow-icon svg{width:20px;height:20px} .sh-workflow-card h3{margin:0;font-family:var(--sh-display);font-size:17px;font-weight:650;letter-spacing:-.015em;color:#fff} .sh-workflow-card p{margin:0;font-size:13.5px;line-height:1.6;color:var(--sh-ink2)} .sh-banner-sec{display:block;padding:0 28px 52px} .sh-community-card{ background:linear-gradient(135deg, rgba(118, 87, 255, 0.14) 0%, rgba(0, 210, 255, 0.08) 45%, rgba(14, 14, 22, 0.92) 100%); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid rgba(118,87,255,.28); border-radius:24px;padding:34px; display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center; box-shadow:0 24px 60px rgba(0,0,0,.65), 0 0 35px rgba(118,87,255,.14); } @media (max-width: 900px){.sh-community-card{grid-template-columns:1fr}} .sh-comm-info h2{margin:0 0 10px;font-family:var(--sh-display);font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.02em;color:#fff} .sh-comm-info p{margin:0 0 20px;font-size:14px;line-height:1.6;color:var(--sh-ink2);max-width:540px} .sh-comm-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .sh-comm-badge-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px} .sh-stat-pill{ background:linear-gradient(180deg, rgba(22, 22, 34, 0.85) 0%, rgba(10, 10, 16, 0.92) 100%); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:4px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .sh-stat-pill:hover{ transform:translateY(-2px); border-color:rgba(160, 140, 255, 0.4); box-shadow:0 10px 24px rgba(0,0,0,.6), 0 0 16px rgba(118,87,255,.15); } .sh-stat-pill b{font-family:var(--sh-display);font-size:20px;font-weight:750;color:#fff} .sh-stat-pill span{font-size:11px;color:var(--sh-ink3);font-weight:550} .sh-finale{ display:block;padding:52px 28px 68px;text-align:center;border-top:1px solid var(--sh-line); } .sh-finale h2{margin:0 auto 12px;max-width:680px;font-family:var(--sh-display);font-size:clamp(24px,3vw,38px);font-weight:750;letter-spacing:-.025em;color:#fff} .sh-finale p{margin:0 auto 22px;max-width:560px;font-size:14.5px;line-height:1.6;color:var(--sh-ink2)} .sh-frow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} /* Common button utilities with micro-interactions */ .sh-bw,.sh-bo{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:42px;padding:0 22px;border-radius:999px; font-size:13.5px;font-weight:650;text-decoration:none;cursor:pointer; font-family:inherit; transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease,opacity .18s ease; } .sh-bw{ position:relative; overflow:hidden; background:linear-gradient(135deg, #ffffff 0%, #edf0ff 100%); color:#000 !important;border:1px solid #fff;box-shadow:0 4px 16px rgba(255,255,255,.2); } .sh-bw::after{ content:""; position:absolute;top:-50%;left:-60%; width:40%;height:200%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); transform:rotate(25deg); animation:shBtnShine 4.5s cubic-bezier(.16,1,.3,1) infinite; pointer-events:none; } .sh-bw:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.32), 0 0 20px rgba(120, 90, 255, 0.2);opacity:.97} .sh-bw:active{transform:scale(0.97) !important} .sh-bo{ background:rgba(255,255,255,.03); color:#fff; border:1px solid var(--sh-line2); } .sh-bo:hover{background:rgba(255,255,255,.08);border-color:#fff;box-shadow:0 0 16px rgba(255,255,255,.15);transform:translateY(-1px)} .sh-bo:active{transform:scale(0.97) !important} /* ── Footer ────────────────────────────────────────────── */ .sh-footer{ border-top:1px solid var(--sh-line); background:var(--sh-bg1); padding:40px 28px 28px; } .sh-fgrid{ display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px; max-width:1100px;margin:0 auto; } @media (max-width: 768px){.sh-fgrid{grid-template-columns:1fr;gap:26px}} .sh-fbrand p{margin:12px 0 0;font-size:13px;color:var(--sh-ink3);line-height:1.6;max-width:320px} .sh-fcol{display:flex;flex-direction:column;gap:10px} .sh-fcol h4{margin:0 0 4px;font-size:13px;font-weight:650;color:#fff} .sh-fcol a{font-size:13px;color:var(--sh-ink3);transition:color .15s ease} .sh-fcol a:hover{color:#fff} .sh-fbot{ border-top:1px solid var(--sh-line);margin-top:32px;padding-top:18px; display:flex;align-items:center;justify-content:space-between; font-size:12px;color:var(--sh-ink4);max-width:1100px;margin-left:auto;margin-right:auto; } .sh-status{display:inline-flex;align-items:center;gap:6px;color:#3ddc84} .sh-status i{width:6px;height:6px;border-radius:50%;background:#3ddc84;display:inline-block;box-shadow:0 0 8px #3ddc84} /* Responsive adjustments */ @media (max-width: 900px){ .sh-rail{display:none} .sh-main{width:100vw;max-width:100vw;margin-left:0} body.sh-body #navBurger{display:flex} body.sh-body #navMobile:not([hidden]){display:flex} } /* ── Dynamic Upload / AI Deconstruct & Profile Setup Modals ── */ .sh-modal-backdrop{ position:fixed; inset:0; background:rgba(4,4,8,.86); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:999999; box-sizing:border-box; } .sh-modal-backdrop[hidden]{ display:none !important; } .sh-upload-card{ position:relative; width:100%; max-width:860px; max-height:90vh; overflow-y:auto; background:linear-gradient(180deg, rgba(22, 22, 34, 0.98) 0%, rgba(10, 10, 16, 0.99) 100%); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,.16); border-radius:20px; box-shadow:0 32px 84px rgba(0,0,0,.95), 0 0 45px rgba(110, 80, 255, 0.2); padding:24px; box-sizing:border-box; color:#fff; } .sh-mhead{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.08); } .sh-mtitle-box .sh-eyebrow{ font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; color:#a58cff; display:block; margin-bottom:2px; } .sh-mtitle-box h3{ margin:0; font-family:var(--sh-display); font-size:20px; font-weight:750; color:#fff; } .sh-mclose{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:var(--sh-ink2); display:grid; place-items:center; cursor:pointer; font-size:14px; transition:all .15s ease; } .sh-mclose:hover{ background:rgba(255,255,255,0.15); color:#fff; } .sh-up-grid{ display:grid; grid-template-columns:1fr 240px; gap:20px; } @media(max-width:700px){ .sh-up-grid{ grid-template-columns:1fr; } } .sh-up-form{ display:flex; flex-direction:column; gap:10px; } .sh-mlabel{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:650; color:var(--sh-ink2); } .sh-minput{ width:100%; height:36px; padding:0 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:10px; color:#fff; font-family:inherit; font-size:12.5px; box-sizing:border-box; transition:border-color .15s ease, background .15s ease; } textarea.sh-minput{ height:auto; padding:8px 12px; } .sh-minput:focus{ outline:none; background:rgba(255,255,255,0.08); border-color:rgba(160, 140, 255, 0.6); box-shadow:0 0 14px rgba(120, 90, 255, 0.2); } .sh-mcol{ height:36px; width:100%; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); cursor:pointer; padding:2px 4px; box-sizing:border-box; } .sh-up-prev-col{ display:flex; flex-direction:column; gap:6px; } .sh-up-preview-stage{ position:relative; width:100%; aspect-ratio:9/16; max-height:360px; background:#000; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.14); box-shadow:0 12px 30px rgba(0,0,0,0.8); } .sh-up-preview-stage iframe{ width:100%; height:100%; border:none; display:block; } .sh-mnote{ font-size:12px; color:#a5f3fc; margin-top:10px; min-height:18px; } .sh-mnote.error{ color:#ff5d5d; } .sh-mfoot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.08); } .sh-mbtn{ height:38px; padding:0 20px; border-radius:999px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .18s ease; } .sh-mbtn.cancel, .sh-mcancel{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); color:var(--sh-ink2); } .sh-mbtn.cancel:hover, .sh-mcancel:hover{ background:rgba(255,255,255,0.1); color:#fff; } .sh-mbtn.primary, .sh-msave{ background:linear-gradient(135deg, #7952ff 0%, #00d2ff 100%); border:none; color:#fff; box-shadow:0 4px 18px rgba(121, 82, 255, 0.4); } .sh-mbtn.primary:hover, .sh-msave:hover{ transform:translateY(-1px); box-shadow:0 6px 24px rgba(121, 82, 255, 0.6); }