/* ============================================================ StaffCord — Cartoon UI (keeps all class + variable names) Fonts are loaded via in each page's (faster than @import). ============================================================ */ :root { /* bright cartoon base (like vapih-web) */ --bg-main: #f7f1ff; --bg-secondary: #ffffff; --bg-glass: #ffffff; --bg-glass-hover: #fbf7ff; --bg-alt: #f3edff; --bg-panel: #ffffff; --border-glass: #211f3a; --border-color: #211f3a; --border-glow: rgba(124, 92, 255, 0.5); --ink: #211f3a; --text-main: #1c1a30; --text-muted: #5c5875; --primary: #7c5cff; --primary-hover: #5b3ae0; --status-for-hire: #1ea860; --status-hiring: #2f8fff; --status-unavailable: #9a93b5; --premium-gradient: linear-gradient(135deg, #ffd23f 0%, #ff9f1c 100%); --premium-border: #ffb02e; --font-family: "Baloo 2", system-ui, sans-serif; --font-head: "Fredoka", system-ui, sans-serif; --bw: 2.5px; --shadow-sm: 2px 2px 0 var(--ink); --shadow-md: 3px 3px 0 var(--ink); --shadow-lg: 5px 6px 0 var(--ink); --shadow-glow: 4px 4px 0 var(--ink); --shadow-premium: 4px 4px 0 var(--premium-border); --transition: all 0.16s cubic-bezier(0.34, 1.56, 0.64, 1); } /* light = same bright cartoon (pure) */ [data-theme="light"] { --bg-main: #f4f6fb; --bg-secondary: #ffffff; --bg-glass: #ffffff; --bg-glass-hover: #fafbff; --bg-alt: #eef1f8; --bg-panel: #ffffff; --border-glass: #211f3a; --border-color: #211f3a; --ink: #211f3a; --text-main: #16181b; --text-muted: #4b5563; --primary: #7c5cff; --primary-hover: #5b3ae0; } /* dark = cartoon dark */ [data-theme="dark"] { --bg-main: #1b1730; --bg-secondary: #2a2547; --bg-glass: #2a2547; --bg-glass-hover: #322c53; --bg-alt: #332c52; --bg-panel: #2a2547; --border-glass: #0c0a18; --border-color: #0c0a18; --ink: #0c0a18; --text-main: #efeaff; --text-muted: #b3acd6; --primary: #a78bfa; --primary-hover: #c4b5fd; } /* every non-light theme gets a visible cartoon outline */ [data-theme]:not([data-theme="light"]):not([data-theme="dark"]) { --ink: rgba(0, 0, 0, 0.5); --border-glass: rgba(0, 0, 0, 0.5); --border-color: rgba(0, 0, 0, 0.5); --bg-alt: rgba(0, 0, 0, 0.18); --bg-panel: var(--bg-secondary); } * { margin: 0; padding: 0; box-sizing: border-box; } /* ── The page background lives on , NOT . Do not move it back. ── Two things depend on this: 1. is what the browser paints before exists, behind a short page, and in the mobile overscroll area. If it has no colour of its own those regions are white whatever says. Each page's sets an approximate value inline for the very first frame; this is the exact one, and it wins because the inline rules are wrapped in :where(). 2. #cosmetic-bg — the equipped profile background — is a fixed layer at z-index:-1. A negative-z-index descendant paints above 's own background but below the root's, so an opaque hides it completely. Keeping transparent is the only thing that lets it show through. (Studio scenes are safe either way: #sfx-bg-layer sits at z-index:0.) Putting the gradients here instead of on renders identically — a background propagated from to the canvas was already being positioned against the root's box, which is what they are positioned against now. */ html { background-color: var(--bg-main); background-image: radial-gradient(circle at 12% 10%, rgba(124,92,255,.14), transparent 38%), radial-gradient(circle at 88% 12%, rgba(255,92,168,.12), transparent 38%), radial-gradient(circle at 75% 92%, rgba(56,189,248,.12), transparent 42%); scroll-behavior: smooth; transition: background-color .25s ease; } /* A dark ambient background re-themes , but --bg-main is read off above — so the canvas behind the art has to be told separately, or the overscroll gutter flashes the light palette. */ html:has(body.cosmetic-bg-dark) { background-color: #1b1730; } body { font-family: var(--font-family); font-weight: 600; background: transparent; /* see the rule above — this must stay clear */ color: var(--text-main); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: color .25s ease; /* background-color now transitions on */ } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 600; line-height: 1.1; } a { color: var(--primary); text-decoration: none; transition: var(--transition); font-weight: 700; } a:hover { text-decoration: none; opacity: .85; } .text-gradient { background: var(--premium-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Navbar (App.js also injects an inline navbar; these support both) */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: var(--bw) solid var(--ink); background: var(--bg-secondary); position: sticky; top: 0; z-index: 100; } .nav-logo { font-size: 1.5rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 10px; } .nav-links { display: flex; gap: 16px; align-items: center; } .nav-links a { color: var(--text-muted); font-weight: 700; } .nav-links a:hover, .nav-links a.active { color: var(--primary); } /* ── App navbar (injected by app.js) ── */ .sc-nav { width: 100%; border-bottom: 2.5px solid var(--ink); background: var(--bg-secondary); position: sticky; top: 0; z-index: 100; } .sc-nav-inner { display: flex; align-items: center; gap: 14px; padding: 10px 20px; flex-wrap: wrap; } .sc-nav-logo { display: flex; align-items: center; gap: 10px; flex: none; } .sc-nav-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .sc-nav-links a { color: var(--text-muted); font-weight: 700; white-space: nowrap; } .sc-nav-links a:hover { color: var(--primary); } .sc-nav-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .sc-nav-btn { padding: 8px 14px; font-size: 0.88rem; white-space: nowrap; } @media (max-width: 720px) { .sc-nav-inner { padding: 8px 12px; gap: 8px; } .site-logo { height: 34px; } /* links: one swipeable row, never wraps or collides; auto-margins center the row when it fits and let it scroll edge-to-edge when it doesn't */ .sc-nav-links { gap: 14px; order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0 4px; } .sc-nav-links::-webkit-scrollbar { display: none; } .sc-nav-links a { font-size: 0.85rem; flex: none; } .sc-nav-links a:first-child { margin-left: auto; } .sc-nav-links a:last-child { margin-right: auto; } .sc-nav-actions { margin-left: auto; } /* Buttons collapse to icons — tidy single row, nothing overlaps */ .sc-nav-btn { padding: 8px 11px; font-size: 1rem; } .sc-nav-btn span { display: none; } .sc-nav-btn.btn-primary { font-size: 0.85rem; padding: 8px 14px; } } /* Site logo: one cartoon lockup with its own ink outline — works on every theme */ .site-logo { height: 46px; width: auto; object-fit: contain; display: inline-block; filter: drop-shadow(0 2px 4px rgba(20, 10, 60, .18)); transition: transform .18s ease; } .sc-nav-logo:hover .site-logo { transform: scale(1.05) rotate(-1.5deg); } /* Panels */ .glass-panel { background: var(--bg-glass); border: var(--bw) solid var(--ink); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-lg); /* transform/shadow only — 'transition: all' made every panel repaint-happy */ transition: transform .16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .16s ease, background-color .16s ease; } /* Cards */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 30px; } .profile-card { display: flex; flex-direction: column; position: relative; overflow: hidden; cursor: pointer; } .profile-card:hover { transform: translate(-2px, -4px); box-shadow: 7px 9px 0 var(--ink); background: var(--bg-glass-hover); } .profile-card.premium { border-color: var(--premium-border); } .profile-card.premium:hover { box-shadow: 7px 9px 0 var(--premium-border); } .card-banner { height: 96px; background: linear-gradient(120deg, var(--primary), var(--primary-hover)); border-radius: 17px 17px 0 0; margin: -24px -24px 16px -24px; background-size: cover; background-position: center; position: relative; } .card-avatar { width: 80px; height: 80px; border-radius: 22px; border: var(--bw) solid var(--ink); position: absolute; bottom: -40px; left: 20px; background-color: var(--bg-main); object-fit: cover; box-shadow: var(--shadow-sm); } /* Static premium accent — the old infinite box-shadow animation forced constant repaints on every premium card and made scrolling janky */ .premium-border { box-shadow: 2px 2px 0 var(--premium-border), var(--shadow-sm); border-color: var(--premium-border); } .card-content { margin-top: 30px; flex-grow: 1; } .card-name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .card-username { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 12px; } .card-bio { font-size: 0.95rem; color: var(--text-main); margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; } /* Status */ .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; position: absolute; top: 12px; right: 12px; background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--shadow-sm); } .status-dot { width: 8px; height: 8px; border-radius: 50%; } .status-for-hire .status-dot { background-color: var(--status-for-hire); } .status-hiring .status-dot { background-color: var(--status-hiring); } .status-unavailable .status-dot { background-color: var(--status-unavailable); } /* Tags */ .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .tag { background: var(--bg-alt); color: var(--primary); padding: 4px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 800; border: 2px solid var(--ink); } /* Forms */ .form-group { margin-bottom: 20px; } .form-label { display: block; margin-bottom: 8px; font-size: 0.92rem; font-weight: 800; color: var(--text-muted); } .form-control { width: 100%; background: var(--bg-alt); border: var(--bw) solid var(--ink); border-radius: 13px; padding: 12px 16px; color: var(--text-main); font-family: var(--font-family); font-weight: 600; font-size: 1rem; transition: var(--transition); } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-sm); } textarea.form-control { resize: vertical; min-height: 100px; } select.form-control { cursor: pointer; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 13px; font-weight: 800; font-size: 1rem; cursor: pointer; transition: var(--transition); border: var(--bw) solid var(--ink); text-align: center; background: var(--bg-secondary); color: var(--text-main); box-shadow: var(--shadow-md); } .btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-lg); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .btn-primary { background-color: var(--primary); color: #fff; } .btn-premium { background: var(--premium-gradient); color: #3a2500; } .btn-outline { background: var(--bg-secondary); color: var(--text-main); } /* A locked action must LOOK locked (e.g. "submit" before all founders confirm) */ .btn:disabled, .btn[disabled] { opacity: .5; filter: grayscale(.6); cursor: not-allowed; box-shadow: var(--shadow-sm); transform: none; } .btn:disabled:hover, .btn[disabled]:hover, .btn:disabled:active, .btn[disabled]:active { transform: none; box-shadow: var(--shadow-sm); } /* Modals */ .modal-overlay { position: fixed; inset: 0; background: rgba(20, 16, 40, 0.72); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px 16px; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal { background: var(--bg-secondary); border: var(--bw) solid var(--ink); border-radius: 24px; width: 100%; max-width: 500px; padding: 28px; box-shadow: var(--shadow-lg); margin: auto; /* centres when it fits, lets the overlay scroll when it doesn't */ transform: scale(0.9); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-overlay.active .modal { transform: scale(1); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-title { font-family: var(--font-head); font-size: 1.6rem; } .modal-close { background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 10px; width: 36px; height: 36px; color: var(--text-main); font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow-sm); } .modal-close:hover { transform: translate(-1px,-1px); } /* Toasts */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--bg-secondary); border: var(--bw) solid var(--ink); border-left: 8px solid var(--primary); color: var(--text-main); padding: 14px 20px; border-radius: 14px; box-shadow: var(--shadow-lg); transform: translateX(140%); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; gap: 12px; font-weight: 700; } .toast.show { transform: translateX(0); } .toast.error { border-left-color: #ff5a5f; } .toast.success { border-left-color: #2fe0a0; } /* 💖 The floating donate button lives in the same corner as toasts — it ducks away while any toast is on screen so notifications stay readable. */ body.has-toast #floating-donate-btn { opacity: 0 !important; pointer-events: none !important; } @media (max-width: 640px) { #floating-donate-btn { padding: 8px 14px !important; font-size: .82rem !important; bottom: 14px !important; right: 14px !important; } } /* Utilities */ .text-center { text-align: center; } .mt-4 { margin-top: 1rem; } .mb-4 { margin-bottom: 1rem; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .hidden { display: none !important; } /* Skeleton */ .skeleton { background: linear-gradient(90deg, var(--bg-alt) 25%, rgba(124,92,255,0.12) 50%, var(--bg-alt) 75%); background-size: 200% 100%; animation: loading 1.4s infinite; border-radius: 8px; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 16px; margin-bottom: 8px; width: 100%; } .skeleton-text.short { width: 60%; } .skeleton-avatar { width: 80px; height: 80px; border-radius: 22px; } .skeleton-banner { height: 96px; width: 100%; border-radius: 17px 17px 0 0; } /* Profile page */ .profile-content-container { padding: 0 40px 40px 40px; position: relative; } .profile-avatar-lg { width: 124px; height: 124px; border-radius: 30px; border: var(--bw) solid var(--ink); position: absolute; top: -62px; left: 40px; background: var(--bg-main); object-fit: cover; box-shadow: var(--shadow-md); } /* Action row: uniform buttons, wraps cleanly, never collides with the avatar */ .profile-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 20px; margin-left: 180px; min-height: 66px; /* clear the overlapping avatar */ } .profile-actions .btn { padding: 9px 16px; font-size: .9rem; white-space: nowrap; } .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Theme gallery (dashboard) */ .theme-card { width: 62px; height: 62px; border-radius: 16px; border: var(--bw) solid var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; overflow: hidden; } .theme-card:hover { transform: translate(-1px, -2px); box-shadow: var(--shadow-md); } .theme-card.active { box-shadow: 0 0 0 3px var(--bg-secondary), 0 0 0 6px var(--primary); transform: translateY(-2px); } .theme-card .lock, .theme-card .check { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); pointer-events: none; } .theme-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; } .theme-wrap .theme-name { font-size: 0.66rem; font-weight: 800; color: var(--text-muted); text-transform: capitalize; } .theme-wrap .premium-dot { color: var(--premium-border); } /* Responsive */ @media (max-width: 768px) { .navbar { flex-direction: column; gap: 15px; padding: 15px 0; } .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; } .nav-links a { font-size: 0.9rem; } .card-grid { grid-template-columns: 1fr; } .dashboard-grid { grid-template-columns: 1fr !important; } .profile-content-container { padding: 0 20px 40px 20px; } .profile-avatar-lg { left: 50%; transform: translateX(-50%); } .profile-actions { justify-content: center; padding-top: 72px; margin-left: 0; } .profile-actions .btn { flex: 1 1 auto; max-width: 220px; } } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 99px; border: 3px solid var(--bg-main); } ::-webkit-scrollbar-track { background: transparent; } /* ========================= */ /* 24 PREMIUM APP THEMES */ /* (colors only; cartoon shapes come from the classes above) */ /* ========================= */ [data-theme="dracula"] { --bg-main: #282a36; --bg-secondary: #44475a; --bg-glass: #44475a; --bg-glass-hover: #4d5066; --text-main: #f8f8f2; --text-muted: #c3bdec; --primary: #bd93f9; --primary-hover: #ff79c6; } [data-theme="nord"] { --bg-main: #2e3440; --bg-secondary: #3b4252; --bg-glass: #3b4252; --bg-glass-hover: #434c5e; --text-main: #eceff4; --text-muted: #d8dee9; --primary: #88c0d0; --primary-hover: #81a1c1; } [data-theme="synthwave"] { --bg-main: #262335; --bg-secondary: #241b2f; --bg-glass: #2c2240; --bg-glass-hover: #342a4d; --text-main: #ffffff; --text-muted: #b3a7d4; --primary: #ff7edb; --primary-hover: #36f9f6; } [data-theme="rose-pine"] { --bg-main: #191724; --bg-secondary: #1f1d2e; --bg-glass: #26233a; --bg-glass-hover: #2f2b45; --text-main: #e0def4; --text-muted: #908caa; --primary: #ebbcba; --primary-hover: #c4a7e7; } [data-theme="solarized-dark"] { --bg-main: #002b36; --bg-secondary: #073642; --bg-glass: #073642; --bg-glass-hover: #0a4655; --text-main: #93a1a1; --text-muted: #839496; --primary: #2aa198; --primary-hover: #268bd2; } [data-theme="monokai"] { --bg-main: #272822; --bg-secondary: #3e3d32; --bg-glass: #3e3d32; --bg-glass-hover: #49483e; --text-main: #f8f8f2; --text-muted: #bcbcae; --primary: #a6e22e; --primary-hover: #fd971f; } [data-theme="tokyo-night"] { --bg-main: #1a1b26; --bg-secondary: #24283b; --bg-glass: #24283b; --bg-glass-hover: #2c3148; --text-main: #c0caf5; --text-muted: #8089b3; --primary: #7aa2f7; --primary-hover: #bb9af7; } [data-theme="oceanic"] { --bg-main: #1b2b34; --bg-secondary: #343d46; --bg-glass: #343d46; --bg-glass-hover: #3e4852; --text-main: #d8dee9; --text-muted: #a7adba; --primary: #5fb3b3; --primary-hover: #6699cc; } [data-theme="gruvbox"] { --bg-main: #282828; --bg-secondary: #3c3836; --bg-glass: #3c3836; --bg-glass-hover: #504945; --text-main: #ebdbb2; --text-muted: #bdae93; --primary: #fabd2f; --primary-hover: #fe8019; } [data-theme="neon-city"] { --bg-main: #050505; --bg-secondary: #141414; --bg-glass: #141414; --bg-glass-hover: #1c1c1c; --text-main: #ffffff; --text-muted: #9a9a9a; --primary: #00ff9d; --primary-hover: #ff00ff; } [data-theme="hacker"] { --bg-main: #000000; --bg-secondary: #0c0c0c; --bg-glass: #0c0c0c; --bg-glass-hover: #141414; --text-main: #00ff00; --text-muted: #04c004; --primary: #00ff00; --primary-hover: #aaffaa; } [data-theme="emerald"] { --bg-main: #064e3b; --bg-secondary: #065f46; --bg-glass: #065f46; --bg-glass-hover: #047857; --text-main: #ecfdf5; --text-muted: #a7f3d0; --primary: #34d399; --primary-hover: #10b981; } [data-theme="ruby"] { --bg-main: #4c0519; --bg-secondary: #881337; --bg-glass: #881337; --bg-glass-hover: #9f1239; --text-main: #ffe4e6; --text-muted: #fda4af; --primary: #fb7185; --primary-hover: #f43f5e; } [data-theme="sapphire"] { --bg-main: #172554; --bg-secondary: #1e3a8a; --bg-glass: #1e3a8a; --bg-glass-hover: #1e40af; --text-main: #eff6ff; --text-muted: #bfdbfe; --primary: #60a5fa; --primary-hover: #3b82f6; } [data-theme="amethyst"] { --bg-main: #2e1065; --bg-secondary: #4c1d95; --bg-glass: #4c1d95; --bg-glass-hover: #5b21b6; --text-main: #f5f3ff; --text-muted: #ddd6fe; --primary: #a78bfa; --primary-hover: #8b5cf6; } [data-theme="gold"] { --bg-main: #422006; --bg-secondary: #713f12; --bg-glass: #713f12; --bg-glass-hover: #854d0e; --text-main: #fefce8; --text-muted: #fde68a; --primary: #facc15; --primary-hover: #eab308; } [data-theme="coffee"] { --bg-main: #2c1a12; --bg-secondary: #3b281f; --bg-glass: #3b281f; --bg-glass-hover: #4a3228; --text-main: #e6dcd3; --text-muted: #c2a792; --primary: #d4a373; --primary-hover: #e9c8a0; } [data-theme="midnight"] { --bg-main: #020617; --bg-secondary: #0f172a; --bg-glass: #0f172a; --bg-glass-hover: #1e293b; --text-main: #f8fafc; --text-muted: #94a3b8; --primary: #38bdf8; --primary-hover: #0ea5e9; } [data-theme="forest"] { --bg-main: #052e16; --bg-secondary: #14532d; --bg-glass: #14532d; --bg-glass-hover: #166534; --text-main: #f0fdf4; --text-muted: #bbf7d0; --primary: #4ade80; --primary-hover: #22c55e; } [data-theme="volcano"] { --bg-main: #450a0a; --bg-secondary: #7f1d1d; --bg-glass: #7f1d1d; --bg-glass-hover: #991b1b; --text-main: #fef2f2; --text-muted: #fca5a5; --primary: #f87171; --primary-hover: #ef4444; } [data-theme="abyss"] { --bg-main: #001220; --bg-secondary: #00223e; --bg-glass: #00223e; --bg-glass-hover: #002e52; --text-main: #e0f2fe; --text-muted: #7dd3fc; --primary: #0ea5e9; --primary-hover: #0369a1; } [data-theme="aurora"] { --bg-main: #1d102e; --bg-secondary: #2b1b47; --bg-glass: #2b1b47; --bg-glass-hover: #382458; --text-main: #fdf4ff; --text-muted: #f0abfc; --primary: #d946ef; --primary-hover: #c026d3; } [data-theme="crimson"] { --bg-main: #220000; --bg-secondary: #440000; --bg-glass: #440000; --bg-glass-hover: #5c0000; --text-main: #ffffff; --text-muted: #ffaaaa; --primary: #ff4d4d; --primary-hover: #cc0000; } /* ── Structured tags: chips, pickers, hover tooltips ─────────────────────── */ .chip-grid { display: flex; flex-wrap: wrap; gap: 8px; } .chip { background: var(--bg-alt); color: var(--text-main); padding: 7px 14px; border-radius: 99px; font-size: 0.82rem; font-weight: 800; border: 2px solid var(--ink); cursor: pointer; font-family: inherit; transition: transform 0.12s, box-shadow 0.12s, background 0.12s; } .chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .chip.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .chip-sm { padding: 5px 11px; font-size: 0.75rem; font-weight: 700; } .chip-detail-mark { opacity: 0.65; font-size: 0.72rem; margin-left: 2px; } .filters-count { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; border-radius: 99px; min-width: 20px; height: 20px; font-size: 0.72rem; font-weight: 800; padding: 0 5px; margin-left: 6px; border: 2px solid var(--ink); } .sub-filter-panel { background: var(--bg-alt); border: 2px dashed var(--ink); border-radius: 14px; padding: 14px 16px; margin-bottom: 15px; } .sub-filter-title { font-weight: 800; font-size: 0.9rem; margin-bottom: 10px; } .sub-filter-panel .chip { background: var(--bg-secondary); } .sub-filter-panel .chip.active { background: var(--primary); } /* Tag hover tooltip (languages, platforms, budget details) */ .tag-wrap { position: relative; display: inline-block; } .tag-has-tip { cursor: help; } .tag-has-tip::after { content: ' ▾'; font-size: 0.65em; opacity: 0.7; } .tag-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--bg-secondary); color: var(--text-main); border: 2px solid var(--ink); box-shadow: var(--shadow-md); border-radius: 12px; padding: 10px 14px; font-size: 0.78rem; font-weight: 600; line-height: 1.7; width: max-content; max-width: 250px; text-align: left; white-space: normal; opacity: 0; visibility: hidden; transition: opacity 0.15s, transform 0.15s; z-index: 60; pointer-events: none; } .tag-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--ink); } .tag-wrap:hover .tag-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ── Showcase image uploader (dashboard) ─────────────────────────────────── */ .images-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .image-thumb { position: relative; width: 130px; height: 96px; border-radius: 12px; overflow: hidden; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); background: var(--bg-alt); } .image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-thumb-remove { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); background: #ff5a5f; color: #fff; font-weight: 800; cursor: pointer; line-height: 1; font-size: 0.9rem; display: grid; place-items: center; } /* ── 3D Showcase gallery (coverflow) + model viewer ──────────────────────── */ .gallery3d { display: flex; align-items: center; gap: 10px; } .gal-stage { position: relative; flex: 1; height: 320px; perspective: 1100px; transform-style: preserve-3d; overflow: hidden; border-radius: 18px; } .gal-slide { position: absolute; top: 50%; left: 50%; width: min(62%, 420px); height: 84%; transform: translate(-50%, -50%); transition: transform .65s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, filter .5s ease; border-radius: 16px; overflow: hidden; cursor: pointer; border: 3px solid var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); background: var(--bg-alt); will-change: transform; } .gal-slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } .gal-arrow { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; border: 2.5px solid var(--ink); background: var(--bg-secondary); color: var(--text-main); font-size: 1.6rem; line-height: 1; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; display: grid; place-items: center; padding-bottom: 4px; } .gal-arrow:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .gal-arrow:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--ink); } .gal-caption { text-align: center; margin-top: 14px; min-height: 10px; } .gal-title { font-weight: 800; font-size: 1.05rem; } .gal-desc { color: var(--text-muted); font-size: .9rem; margin-top: 3px; max-width: 560px; margin-left: auto; margin-right: auto; } .gal-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; } .gal-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); background: var(--bg-alt); cursor: pointer; padding: 0; transition: background .2s, transform .2s; } .gal-dot.active { background: var(--primary); transform: scale(1.25); } .model-stage { display: flex; align-items: center; gap: 10px; } .model-canvas-wrap { position: relative; flex: 1; height: 340px; border-radius: 18px; overflow: hidden; border: 3px solid var(--ink); box-shadow: var(--shadow-md); background: radial-gradient(ellipse at 50% 40%, rgba(124, 92, 255, .16) 0%, rgba(0, 0, 0, .18) 100%), var(--bg-alt); } .model-canvas-wrap canvas { width: 100%; height: 100%; display: block; cursor: grab; } .model-canvas-wrap canvas:active { cursor: grabbing; } .model-loading { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--text-muted); pointer-events: none; } .model-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 700; color: var(--text-muted); background: var(--bg-secondary); border: 2px solid var(--ink); border-radius: 99px; padding: 4px 12px; opacity: .85; pointer-events: none; white-space: nowrap; } /* Blender-style shading toggle (Material · Solid · Wireframe) */ .model-modes { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; padding: 4px; border-radius: 99px; border: 2px solid var(--ink); background: var(--bg-secondary); background: color-mix(in srgb, var(--bg-secondary) 82%, transparent); box-shadow: var(--shadow-sm); z-index: 3; } .model-mode-btn { font-family: inherit; font-size: .72rem; font-weight: 800; line-height: 1; color: var(--text-muted); background: transparent; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 99px; white-space: nowrap; transition: background .15s ease, color .15s ease, transform .1s ease; } .model-mode-btn:hover { color: var(--text-main); background: var(--bg-glass); } .model-mode-btn:active { transform: scale(.94); } .model-mode-btn.active { color: #fff; background: var(--primary); box-shadow: 0 2px 0 var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); } /* Bottom-right stats overlay (triangle / vertex counts) */ .model-info { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 10px; font-size: .72rem; font-weight: 800; color: var(--text-main); background: var(--bg-secondary); background: color-mix(in srgb, var(--bg-secondary) 82%, transparent); border: 2px solid var(--ink); border-radius: 10px; padding: 5px 10px; pointer-events: none; white-space: nowrap; z-index: 3; } .model-info:empty { display: none; } .model-info span { display: inline-flex; align-items: center; gap: 4px; } @media (max-width: 600px) { .gal-stage { height: 240px; } .model-canvas-wrap { height: 260px; } .model-mode-btn { padding: 6px 8px; font-size: .66rem; } .model-modes { gap: 2px; padding: 3px; } } /* ── Dashboard showcase manager cards (images + 3D models) ───────────────── */ .showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 12px; } .showcase-card { background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .showcase-card-preview { position: relative; height: 110px; border-radius: 10px; overflow: hidden; border: 2px solid var(--ink); background: var(--bg-secondary); } .showcase-card-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .showcase-card-model { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.2rem; background: radial-gradient(ellipse at 50% 35%, rgba(124, 92, 255, .22) 0%, transparent 75%); } .showcase-card-model span { font-size: .72rem; font-weight: 800; color: var(--text-muted); margin-top: -8px; } .showcase-card-input { padding: 7px 10px; font-size: .82rem; } /* ── 🔥 Bump streak flair (browse cards) ─────────────────────────────────── */ .streak-flair { font-size: .72rem; font-weight: 800; color: #ff7a1a; background: rgba(255, 122, 26, .12); border: 1px solid rgba(255, 122, 26, .35); border-radius: 99px; padding: 2px 8px; margin-left: 4px; white-space: nowrap; vertical-align: middle; } /* ── 📄 Print / Save-as-PDF ────────────────────────────────────────────────── JS builds a dedicated #print-stage document at body level and tags the body with .printing — ONLY the stage prints, never the web page around it. */ #print-stage { display: none; } @media print { @page { margin: 13mm; } body.printing > *:not(#print-stage) { display: none !important; } body.printing #print-stage { display: block !important; } /* html carries the page background now, so it has to be cleared too or the theme colour and the ambient gradients print behind the sheet. */ html, body { background: #fff !important; background-image: none !important; color: #111 !important; font-size: 10.5pt; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ── Profile sheet ── */ .ps-head { display: flex; gap: 6mm; align-items: center; border-bottom: 2.5px solid #111; padding-bottom: 5mm; margin-bottom: 5mm; } .ps-avatar { width: 24mm; height: 24mm; border-radius: 6mm; border: 1.5px solid #111; object-fit: cover; } .ps-name { font-family: 'Fredoka', sans-serif; font-size: 19pt; font-weight: 700; color: #111; line-height: 1.15; } .ps-handle { font-size: 10.5pt; color: #555; } .ps-status { display: inline-block; margin-top: 2mm; font-size: 8pt; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #111; border: 1.5px solid #111; border-radius: 99px; padding: 1mm 3.5mm; } .ps-brand { margin-left: auto; text-align: right; font-size: 8pt; color: #888; } .ps-brand b { font-size: 10.5pt; color: #111; } .ps-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm 6mm; margin-bottom: 5mm; } .ps-meta div { border-left: 2px solid #ddd; padding-left: 3mm; } .ps-meta dt { font-size: 7.5pt; text-transform: uppercase; letter-spacing: 1px; color: #777; font-weight: 800; } .ps-meta dd { margin: 0; font-weight: 700; color: #111; } .ps-section { margin-bottom: 5mm; page-break-inside: avoid; } .ps-section > h3 { font-size: 9pt; text-transform: uppercase; letter-spacing: 1.5px; color: #111; border-bottom: 1px solid #bbb; padding-bottom: 1.5mm; margin-bottom: 2.5mm; } .ps-bio { white-space: pre-wrap; } .ps-tags { display: flex; flex-wrap: wrap; gap: 2mm; } .ps-tag { border: 1.2px solid #111; border-radius: 99px; padding: 1mm 3.5mm; font-size: 8.5pt; font-weight: 700; } .ps-tag small { color: #666; font-weight: 600; } .ps-servers li { margin-bottom: 1mm; } .ps-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; } .ps-gallery figure { margin: 0; page-break-inside: avoid; } .ps-gallery img { width: 100%; border: 1px solid #999; border-radius: 2mm; } .ps-gallery figcaption { font-size: 8pt; color: #444; margin-top: 1mm; } .ps-foot { margin-top: 6mm; padding-top: 3mm; border-top: 1px solid #bbb; display: flex; justify-content: space-between; font-size: 8pt; color: #666; } /* ── Contract document (reuses the on-screen ct-* markup) ── */ #print-stage .contract-paper { border: none; box-shadow: none; padding: 0; background: #fff; color: #111; border-radius: 0; } #print-stage .ct-paper-head { border-bottom-color: #111; } #print-stage .ct-paper-title, #print-stage .ct-clause h3 { color: #111; } #print-stage .ct-paper-kind, #print-stage .ct-paper-meta { color: #555; } #print-stage .ct-parties { background: #fff; border: 1.5px solid #111; } #print-stage .ct-clause { page-break-inside: avoid; } #print-stage .ct-clause p { color: #222; } #print-stage .ct-sigs { page-break-inside: avoid; } #print-stage .ct-sig { border-top-color: #111; } #print-stage .ct-sig-name { color: #111; } #print-stage .ct-disclaimer { color: #666; border-top-color: #bbb; } #print-stage .ct-chip { border: 1.5px solid #111; background: #fff; color: #111; float: right; } } /* ── ⚖️ Compare page ─────────────────────────────────────────────────────── */ .cmp-heads { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-bottom: 20px; } .cmp-head { text-align: center; padding: 20px 14px; } .cmp-avatar { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm); } .cmp-name { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; margin-top: 8px; } .cmp-handle { color: var(--text-muted); font-size: .88rem; } .cmp-vs { align-self: center; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; background: var(--primary); color: #fff; border: var(--bw) solid var(--ink); border-radius: 50%; width: 56px; height: 56px; display: grid; place-items: center; box-shadow: var(--shadow-sm); } .cmp-table { width: 100%; border-collapse: collapse; } .cmp-table tr { border-bottom: 2px dashed var(--border-glass); } .cmp-table tr:last-child { border-bottom: none; } .cmp-table th { width: 170px; padding: 13px 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); background: var(--bg-alt); border-left: 2px dashed var(--border-glass); border-right: 2px dashed var(--border-glass); } .cmp-table td { padding: 13px 16px; text-align: center; font-weight: 700; vertical-align: top; } .cmp-win { background: rgba(30, 168, 96, .13); position: relative; } .cmp-win::after { content: '✓'; color: var(--status-for-hire); font-weight: 800; margin-left: 6px; } .cmp-tag-det { font-size: .72rem; color: var(--text-muted); font-weight: 600; margin: 2px 0 6px; } @media (max-width: 640px) { .cmp-table th { width: 90px; font-size: .66rem; padding: 10px 4px; } .cmp-table td { padding: 10px 8px; font-size: .85rem; } .cmp-vs { width: 42px; height: 42px; font-size: 1rem; } } /* ── 📜 Contracts ────────────────────────────────────────────────────────── */ .ct-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .ct-tab { font-family: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; background: var(--bg-glass); color: var(--text-muted); border: 2px solid var(--ink); border-radius: 99px; padding: 7px 16px; transition: var(--transition); } .ct-tab:hover { color: var(--text-main); } .ct-tab.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .ct-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; background: #ff7a1a; color: #fff; border-radius: 99px; font-size: .7rem; padding: 0 5px; margin-left: 4px; } .ct-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; color: var(--text-main); } .ct-card:hover { transform: translate(-2px, -3px); box-shadow: 6px 8px 0 var(--ink); } .ct-card.ct-needs-me { border-color: #ff7a1a; } .ct-card-title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; } .ct-card-sub { color: var(--text-muted); font-size: .84rem; margin-top: 2px; } .ct-chip { font-size: .72rem; font-weight: 800; white-space: nowrap; border: 2px solid var(--ink); border-radius: 99px; padding: 4px 12px; } .ct-sent { background: #fff3e0; color: #b35c00; } .ct-active { background: #e3f7ec; color: #157347; } .ct-done { background: #ede7ff; color: #5b3ae0; } .ct-bad { background: var(--bg-alt); color: var(--text-muted); } [data-theme="dark"] .ct-sent { background: rgba(255,160,60,.15); color: #ffb45e; } [data-theme="dark"] .ct-active { background: rgba(40,200,120,.15); color: #5fd39a; } [data-theme="dark"] .ct-done { background: rgba(140,110,255,.18); color: #b7a4ff; } .ct-template { text-align: left; cursor: pointer; font-family: inherit; color: var(--text-main); } .ct-template:hover { transform: translate(-2px, -4px); box-shadow: 6px 8px 0 var(--primary); border-color: var(--primary); } .ct-template-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin: 8px 0 6px; } .ct-template-desc { color: var(--text-muted); font-size: .84rem; font-weight: 600; line-height: 1.45; } .ct-clause-editor { background: var(--bg-alt); border: 2px dashed var(--border-glass); border-radius: 14px; padding: 12px; } .ct-clause-num { display: grid; place-items: center; width: 28px; height: 28px; flex: none; background: var(--primary); color: #fff; border: 2px solid var(--ink); border-radius: 50%; font-weight: 800; font-size: .8rem; } .ct-clause-del { width: 32px; height: 32px; flex: none; cursor: pointer; font-weight: 800; background: #fff0f0; color: #c62828; border: 2px solid var(--ink); border-radius: 10px; } .ct-clause-del:hover { background: #c62828; color: #fff; } /* The contract document — reads like paper */ .contract-paper { padding: 34px; line-height: 1.7; } .ct-paper-head { display: flex; gap: 16px; align-items: flex-start; border-bottom: 3px solid var(--ink); padding-bottom: 18px; margin-bottom: 18px; } .ct-paper-emoji { font-size: 2.6rem; } .ct-paper-kind { text-transform: uppercase; letter-spacing: 2px; font-size: .72rem; font-weight: 800; color: var(--text-muted); } .ct-paper-title { font-size: 1.5rem; margin: 2px 0; } .ct-paper-meta { color: var(--text-muted); font-size: .82rem; font-weight: 700; } .ct-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--bg-alt); border: 2px solid var(--border-glass); border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; font-size: .92rem; } .ct-party-label { text-transform: uppercase; font-size: .68rem; letter-spacing: 1px; color: var(--text-muted); font-weight: 800; } .ct-party-id { color: var(--text-muted); font-size: .78rem; } .ct-clause h3 { font-size: 1.02rem; margin: 16px 0 4px; } .ct-clause p { font-weight: 500; white-space: pre-wrap; } .ct-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; } .ct-sig { border-top: 2px solid var(--ink); padding-top: 8px; } .ct-sig-label { text-transform: uppercase; font-size: .68rem; letter-spacing: 1px; color: var(--text-muted); font-weight: 800; } .ct-sig-name { font-family: 'Fredoka', cursive; font-size: 1.5rem; min-height: 38px; } .ct-sig-pending { color: var(--text-muted); font-size: .9rem; font-style: italic; font-family: var(--font-family); } .ct-sig-meta { color: var(--text-muted); font-size: .76rem; font-weight: 600; } .ct-disclaimer { margin-top: 26px; padding-top: 12px; border-top: 1px dashed var(--border-glass); color: var(--text-muted); font-size: .74rem; font-weight: 600; line-height: 1.5; } @media (max-width: 620px) { .contract-paper { padding: 20px; } .ct-parties, .ct-sigs { grid-template-columns: 1fr; } } /* (contract print styles live in the #print-stage block above) */ /* ── 📱 Global mobile consistency pass ───────────────────────────────────── */ .btn { white-space: nowrap; } /* buttons never break onto two lines */ @media (max-width: 640px) { .container { padding: 0 14px; } h1 { font-size: 1.7rem !important; } .glass-panel { padding: 18px; border-radius: 16px; } /* One consistent button size everywhere on phones */ .btn { padding: 9px 15px; font-size: .88rem; } .btn-primary { font-size: .9rem; } /* Profile page: banner + status don't crowd the avatar */ #profile-banner { height: 150px !important; } #profile-container h1 { justify-content: center; } #profile-container h1 + div { text-align: center; } /* 3D viewer: hint overlaps the info panel on narrow screens — drop it, touch users discover drag naturally */ .model-hint { display: none; } .model-info { bottom: 8px; right: 8px; font-size: .66rem; padding: 4px 8px; } .model-modes { top: 8px; left: 8px; } /* Gallery arrows: smaller so slides keep room */ .gal-arrow { width: 36px; height: 36px; font-size: 1.2rem; } /* Contracts: tabs scroll instead of stacking awkwardly */ .ct-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } .ct-tab { flex: none; } .ct-card { flex-direction: column; align-items: flex-start; gap: 8px; } .contract-paper { padding: 18px; } .ct-paper-emoji { font-size: 2rem; } .ct-paper-title { font-size: 1.2rem; } /* Forms: stacked action rows go full-width for fat-finger comfort */ .form-control { font-size: 16px; } /* prevents iOS auto-zoom on focus */ } /* ── 👤 Navbar account menu (avatar chip + dropdown) ─────────────────────── */ .sc-nav-user { position: relative; } .sc-nav-avatar-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px 4px 4px; box-shadow: var(--shadow-sm); font-family: inherit; font-weight: 800; color: var(--text-main); transition: transform .15s, box-shadow .15s; } .sc-nav-avatar-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-md); } .sc-nav-avatar-btn img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); display: block; background: var(--bg-main); } .sc-nav-avatar-btn .caret { font-size: .7rem; color: var(--text-muted); transition: transform .18s; } .sc-nav-user.open .caret { transform: rotate(180deg); } .sc-nav-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; z-index: 300; background: var(--bg-secondary); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; transition: opacity .16s ease, transform .16s cubic-bezier(0.34, 1.56, 0.64, 1); } .sc-nav-user.open .sc-nav-menu { opacity: 1; transform: none; pointer-events: auto; } .sc-nav-menu-head { padding: 8px 12px 10px; border-bottom: 2px dashed var(--border-glass); margin-bottom: 6px; } .sc-nav-menu-name { font-family: var(--font-head); font-weight: 700; line-height: 1.2; } .sc-nav-menu-sub { color: var(--text-muted); font-size: .78rem; font-weight: 700; } .sc-nav-menu a, .sc-nav-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .92rem; font-weight: 700; color: var(--text-main); } .sc-nav-menu a:hover, .sc-nav-menu button:hover { background: var(--bg-alt); color: var(--primary); opacity: 1; } .sc-nav-menu .menu-danger { color: #ff5a5f; } .sc-nav-menu .menu-danger:hover { background: rgba(255, 90, 95, .1); color: #ff5a5f; } .sc-nav-menu-sep { border: none; border-top: 2px dashed var(--border-glass); margin: 6px 4px; } @media (max-width: 720px) { .sc-nav-avatar-btn { padding: 3px 8px 3px 3px; } .sc-nav-avatar-btn img { width: 28px; height: 28px; } } /* ── 🛍️ Cosmetics: page background + particle overlay ────────────────────── */ #cosmetic-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* every layer fills its parent exactly (inset:0) — no fragile negative insets. drift is a transform-only scale/translate; overflow:hidden clips the edges. */ .cosmetic-bg-layer { position: absolute; inset: 0; } .cosmetic-bg-drift { animation: cosDrift 26s ease-in-out infinite alternate; will-change: transform; } /* painted-texture layer: the real canvas artwork, fades in over the CSS placeholder */ .cosmetic-bg-tex { background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease; } .cosmetic-bg-tex.tex-on { opacity: 1; } /* starfield layer: counter-drifts (parallax) + twinkles softly */ .cosmetic-bg-stars { animation: cosDrift 40s ease-in-out infinite alternate-reverse, cosTwinkle 6s ease-in-out infinite; will-change: transform, opacity; } @keyframes cosTwinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } @keyframes cosDrift { from { transform: translate3d(-2.2%, -1.8%, 0) scale(1.12); } to { transform: translate3d(2.2%, 1.8%, 0) scale(1.2); } } #cosmetic-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; } /* Dark ambient backgrounds (e.g. Founders' Nebula): the whole page flips to the dark palette so EVERY surface stays coherent — glass panels go dark translucent (the nebula glows through), while solid surfaces (navbar, account dropdown, buttons, toasts, modals) use the dark theme's solids. Anything themed via the variables is covered automatically. */ body.cosmetic-bg-dark { color: #efeaff; --bg-main: #1b1730; --bg-secondary: #2a2547; --bg-glass: rgba(22, 18, 44, 0.66); --bg-glass-hover: rgba(34, 28, 62, 0.76); --bg-panel: rgba(22, 18, 44, 0.66); --bg-alt: rgba(255, 255, 255, 0.09); --border-glass: rgba(255, 255, 255, 0.18); --border-color: rgba(255, 255, 255, 0.18); --text-main: #efeaff; --text-muted: #c3bce4; } body.cosmetic-bg-dark > footer, body.cosmetic-bg-dark > footer a { color: #cdc7e6 !important; } /* ── 🛍️ Cosmetics: avatar frames (overlay ring, class-driven) ─────────────── .cosmetic-frame holds geometry only; the .fx-ring child carries the visual (and any mask) so extras like the crown are never clipped by it. */ .cosmetic-frame { position: absolute; pointer-events: none; z-index: 6; } .cosmetic-frame .fx-ring { position: absolute; inset: 0; border-radius: inherit; } .fx-frame-frostbite { border: 4px solid #7dd3fc; box-shadow: 0 0 16px rgba(125, 211, 252, .75), inset 0 0 10px rgba(125, 211, 252, .4); } .fx-frame-golden_ring { border: 4px solid #ffb02e; box-shadow: 0 0 14px rgba(255, 176, 46, .65); } .fx-frame-neon_pulse { border: 4px solid #22d3ee; } .fx-frame-neon_pulse::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 22px 4px rgba(34, 211, 238, .8); animation: neonPulse 2.2s ease-in-out infinite; } @keyframes neonPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .fx-frame-hellfire { border: 4px solid #ff5a1f; box-shadow: 0 0 18px rgba(255, 90, 31, .8), 0 -6px 24px rgba(255, 176, 46, .5); } .fx-frame-rainbow_prism, .fx-frame-founders_crown { background: conic-gradient(#ff4d6d, #ffb02e, #ffd23f, #34d399, #38bdf8, #a855f7, #ff4d6d); padding: 4px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .fx-frame-rainbow_prism { animation: prismSpin 6s linear infinite; } @keyframes prismSpin { to { filter: hue-rotate(360deg); } } .fx-frame-founders_crown { background: conic-gradient(#ffd23f, #fff3c4, #ffb02e, #b8860b, #ffd23f); box-shadow: 0 0 18px rgba(255, 210, 63, .45); } /* the crown is a SIBLING of the masked ring (never clipped by it): big, dead-center on top, sitting over the avatar's "head" like it's worn. --fw = ring width, set by applyFrame / the preview classes. */ .cosmetic-frame .fx-crown { position: absolute; left: 50%; top: 0; transform: translate(-110%, -72%) rotate(-20deg); font-size: calc(var(--fw, 90px) * .42); line-height: 1; z-index: 2; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(255, 210, 63, .55)); } /* ── 🛍️ Cosmetics: name styles (gradient text) ───────────────────────────── */ .nm-sunset_fade, .nm-ocean_fade, .nm-golden_shine, .nm-rainbow_flow, .nm-founders_ink { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: transparent; } .nm-sunset_fade { background-image: linear-gradient(90deg, #ff9a5a, #ff5a8a, #b565ff); } .nm-ocean_fade { background-image: linear-gradient(90deg, #22d3ee, #3b82f6, #34d399); } .nm-golden_shine { background-image: linear-gradient(100deg, #b8860b 15%, #ffd23f 32%, #fff8d6 50%, #ffd23f 68%, #b8860b 85%); background-size: 200% 100%; animation: goldSweep 3.2s ease-in-out infinite; } @keyframes goldSweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } .nm-rainbow_flow { background-image: linear-gradient(90deg, #ff4d6d, #ffb02e, #ffd23f, #34d399, #38bdf8, #a855f7, #ff4d6d); background-size: 300% 100%; animation: rainbowFlow 8s linear infinite; } @keyframes rainbowFlow { to { background-position: -300% 0; } } .nm-founders_ink { background-image: linear-gradient(100deg, #7c5cff 10%, #d3a8ff 32%, #ffd23f 50%, #d3a8ff 68%, #7c5cff 90%); background-size: 220% 100%; animation: goldSweep 4.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cosmetic-bg-drift, .cosmetic-bg-stars, .fx-frame-rainbow_prism, .fx-frame-neon_pulse::after, .nm-golden_shine, .nm-rainbow_flow, .nm-founders_ink { animation: none !important; } } /* ── 🛍️ Store page ───────────────────────────────────────────────────────── */ .store-hero { text-align: center; margin: 34px 0 40px; } .store-hero h1 { font-size: 3rem; margin-bottom: 10px; letter-spacing: -0.5px; } .store-hero p { color: var(--text-muted); font-size: 1.08rem; max-width: 560px; margin: 0 auto; font-weight: 600; } .store-hero-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } .store-hero-chips span { background: var(--bg-glass); border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm); border-radius: 99px; padding: 7px 16px; font-weight: 800; font-size: .84rem; } /* 🪙 points wallet pill in the store hero */ .store-balance { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; background: linear-gradient(135deg, #ffd23f 0%, #ff9f1c 100%); color: #211f3a; border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm); border-radius: 99px; padding: 8px 18px; font-weight: 800; font-size: .95rem; text-decoration: none; transition: var(--transition); } .store-balance:hover { transform: translate(-1px, -2px); box-shadow: var(--shadow-md); } .store-balance b { font-size: 1.05rem; } .store-balance-hint { font-weight: 700; opacity: .75; font-size: .82rem; } /* "or" divider between paying and redeeming */ .buy-or { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-weight: 800; font-size: .82rem; margin: 4px 0 10px; } .buy-or::before, .buy-or::after { content: ""; flex: 1; height: 2px; background: var(--border-glass); opacity: .35; border-radius: 2px; } /* 🪙 dashboard points & referral card */ .points-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .points-balance { display: inline-flex; align-items: baseline; gap: 6px; background: linear-gradient(135deg, #ffd23f 0%, #ff9f1c 100%); color: #211f3a; border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm); border-radius: 16px; padding: 8px 18px; } .points-balance span { font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; } .points-balance small { font-weight: 800; font-size: .8rem; } .points-earn { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .points-earn-item { display: inline-flex; align-items: center; gap: 7px; flex: 1; min-width: 150px; justify-content: center; background: var(--bg-alt); border: 2px solid var(--border-glass); border-radius: 13px; padding: 10px 12px; font-weight: 700; font-size: .9rem; } .points-earn-item b { color: var(--primary); } .points-earn-item a { color: var(--primary); font-weight: 800; } .ref-link-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; } .ref-link-row input { font-weight: 700; } @media (max-width: 560px) { .ref-link-row { flex-direction: column; } .ref-link-row .btn { width: 100%; } .points-balance span { font-size: 1.7rem; } } /* ⚡ exclusive shelf — one big countdown for the whole drop */ .store-exclusive { position: relative; border: 3px solid var(--premium-border); border-radius: 26px; background: radial-gradient(ellipse at 15% 0%, rgba(255, 210, 63, .16), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(255, 77, 109, .13), transparent 55%), var(--bg-secondary); box-shadow: 5px 6px 0 var(--premium-border); padding: 36px 22px 24px; margin: 26px 0 48px; text-align: center; } .drop-ribbon { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background: var(--premium-gradient); color: #211f3a; border: var(--bw) solid var(--ink); border-radius: 99px; padding: 8px 26px; font-family: var(--font-head); font-weight: 700; letter-spacing: 2px; font-size: .95rem; box-shadow: var(--shadow-sm); white-space: nowrap; } .drop-countdown { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 12px 0 14px; } .cd-tile { background: var(--ink); border: 2px solid rgba(255, 210, 63, .55); border-radius: 16px; width: 78px; padding: 12px 0 9px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); } .cd-tile b { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; line-height: 1; color: #ffd23f; font-variant-numeric: tabular-nums; } .cd-tile span { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; color: rgba(255, 255, 255, .6); margin-top: 5px; } .cd-sep { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--premium-border); margin-top: -12px; } .store-exclusive-sub { color: var(--text-muted); font-size: .92rem; font-weight: 700; max-width: 540px; margin: 0 auto; } .store-exclusive .store-grid { text-align: left; margin-top: 22px; } /* section headers */ .store-section-head { display: flex; align-items: center; gap: 14px; margin: 44px 0 4px; } .sec-emoji { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 1.35rem; background: var(--bg-glass); border: var(--bw) solid var(--ink); border-radius: 15px; box-shadow: var(--shadow-sm); } .store-section-head h2 { font-size: 1.35rem; line-height: 1.15; } .sec-sub { display: block; color: var(--text-muted); font-size: .82rem; font-weight: 700; } .sec-count { margin-left: auto; flex: none; color: var(--text-muted); font-weight: 800; font-size: .76rem; background: var(--bg-alt); border: 2px solid var(--border-glass); border-radius: 99px; padding: 4px 12px; } .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 16px; } /* item cards */ .item-card { display: flex; flex-direction: column; gap: 9px; background: var(--bg-glass); border: var(--bw) solid var(--ink); border-radius: 20px; padding: 12px; box-shadow: var(--shadow-md); transition: transform .16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .16s ease; } .item-card:hover { transform: translate(-2px, -4px); box-shadow: 6px 9px 0 var(--ink); } .item-card.rarity-rare { border-color: #2f8fff; } .item-card.rarity-rare:hover { box-shadow: 6px 9px 0 rgba(47, 143, 255, .55); } .item-card.rarity-epic { border-color: #a855f7; } .item-card.rarity-epic:hover { box-shadow: 6px 9px 0 rgba(168, 85, 247, .55); } .item-card.rarity-legendary { border-color: #ffb02e; } .item-card.rarity-legendary:hover { box-shadow: 6px 9px 0 rgba(255, 176, 46, .55); } .item-card.rarity-mythic { border-color: #ff4d6d; box-shadow: 4px 4px 0 rgba(255, 77, 109, .8); } .item-card.rarity-mythic:hover { box-shadow: 6px 9px 0 rgba(255, 77, 109, .8); } .item-preview { position: relative; height: 150px; border-radius: 14px; overflow: hidden; border: 2px solid var(--ink); background: var(--bg-alt); } .item-preview .cosmetic-bg-layer { position: absolute; inset: 0; } .pv-chip { position: absolute; top: 9px; left: 9px; z-index: 6; box-shadow: var(--shadow-sm); } .limited-flag { position: absolute; top: 9px; right: 9px; z-index: 6; font-size: .6rem; font-weight: 800; letter-spacing: .5px; border-radius: 99px; padding: 3px 9px; background: var(--ink); color: #ffd23f; border: 2px solid var(--premium-border); box-shadow: var(--shadow-sm); white-space: nowrap; } .preview-avatar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 20px; background: #2a2547; object-fit: cover; border: 2px solid rgba(255,255,255,.3); display: block; } .preview-ring { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 26px; --fw: 88px; } .preview-name { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; } .item-name { font-family: var(--font-head); font-weight: 700; font-size: 1.04rem; display: flex; align-items: center; gap: 7px; } .item-name .slot-chip { margin-left: auto; flex: none; } .item-desc { color: var(--text-muted); font-size: .8rem; font-weight: 600; line-height: 1.45; flex: 1; } .item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rarity-chip { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; border-radius: 99px; padding: 3px 10px; color: #fff; border: 2px solid var(--ink); } .slot-chip { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; border-radius: 99px; padding: 3px 9px; color: var(--text-muted); background: var(--bg-alt); border: 2px solid var(--border-glass); } .limited-chip { font-size: .66rem; font-weight: 800; border-radius: 99px; padding: 3px 10px; background: var(--ink); color: #ffd23f; border: 2px solid var(--premium-border); white-space: nowrap; font-variant-numeric: tabular-nums; } .item-actions { display: flex; align-items: center; gap: 10px; border-top: 2px dashed var(--border-glass); padding-top: 12px; margin-top: 2px; } .item-price { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; flex: none; } /* the CTA fills the row — big, obvious, easy to tap */ .item-actions .btn { flex: 1; min-width: 0; padding: 11px 14px; font-size: .95rem; border-radius: 12px; } .btn-equipped { background: var(--status-for-hire); color: #fff; } .owned-mark { color: var(--status-for-hire); font-weight: 800; font-size: .82rem; white-space: nowrap; } /* 👁️ try-before-you-buy */ .pv-try { position: absolute; right: 8px; bottom: 8px; z-index: 7; cursor: pointer; font-family: inherit; font-weight: 800; font-size: .8rem; background: rgba(10, 8, 24, .82); color: #fff; border: 2px solid rgba(255, 255, 255, .5); border-radius: 99px; padding: 6px 14px; backdrop-filter: blur(3px); transition: transform .15s, border-color .15s; } .pv-try:hover { transform: scale(1.07); border-color: #fff; } .tryon-modal { max-width: 560px; } .tryon-scene { position: relative; overflow: hidden; border-radius: 16px; border: 2px solid var(--ink); min-height: 330px; display: flex; align-items: center; justify-content: center; padding: 34px 14px 26px; background: #0d0a20; } .tryon-scene .cosmetic-bg-layer { position: absolute; inset: 0; } .tryon-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .tryon-card { position: relative; z-index: 2; width: min(320px, 96%); background: var(--bg-secondary); border: 2.5px solid var(--ink); border-radius: 18px; text-align: center; padding-bottom: 16px; box-shadow: 6px 8px 0 rgba(0, 0, 0, .35); } .tryon-banner { height: 62px; border-radius: 14px 14px 0 0; background: linear-gradient(120deg, var(--primary), #38bdf8 60%, #34d399); } .tryon-avwrap { position: relative; width: 88px; height: 88px; margin: -44px auto 10px; } .tryon-avatar { width: 88px; height: 88px; border-radius: 24px; border: 3px solid var(--ink); object-fit: cover; background: var(--bg-main); display: block; } .tryon-ring { inset: -6px; width: auto; height: auto; border-radius: 30px; --fw: 100px; } .tryon-name { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; line-height: 1.2; padding: 0 14px; } .tryon-sub { color: var(--text-muted); font-size: .84rem; font-weight: 700; margin-top: 2px; } .tryon-lines { padding: 16px 26px 0; } .tryon-lines i { display: block; height: 9px; border-radius: 99px; background: var(--bg-alt); margin: 0 auto 8px; } .tryon-hint { color: var(--text-muted); font-size: .8rem; font-weight: 600; text-align: center; margin: 12px 0 14px; } .tryon-actions { display: flex; align-items: center; justify-content: center; gap: 14px; } /* ── 🎒 Inventory (dashboard) ────────────────────────────────────────────── */ .inv-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 22px; } .inv-slot { background: var(--bg-alt); border: 2px dashed var(--border-glass); border-radius: 16px; padding: 12px 14px; font-size: .88rem; font-weight: 700; min-height: 64px; } .inv-slot.filled { background: var(--bg-glass); border: var(--bw) solid var(--primary); box-shadow: 3px 3px 0 var(--primary); } .inv-slot b { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 5px; } .inv-empty { color: var(--text-muted); font-weight: 700; } @media (max-width: 640px) { .store-hero { margin: 22px 0 26px; } .store-hero h1 { font-size: 2rem !important; } .store-hero-chips span { font-size: .74rem; padding: 6px 12px; } .store-exclusive { padding: 30px 12px 18px; border-radius: 20px; } .store-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .item-card { padding: 10px; gap: 7px; border-radius: 16px; } .item-preview { height: 110px; } /* names/chips/actions wrap instead of colliding on narrow cards */ .item-name { font-size: .9rem; gap: 5px; flex-wrap: wrap; } .item-name .slot-chip { display: none; } .item-desc { font-size: .72rem; } .item-actions { flex-wrap: wrap; gap: 8px; padding-top: 10px; } .item-actions .btn { padding: 10px 12px; font-size: .88rem; } .item-price { font-size: 1.15rem; } .owned-mark { font-size: .78rem; } .pv-try { font-size: .74rem; padding: 5px 12px; right: 6px; bottom: 6px; } /* narrow previews: shrink the floating badges so MYTHIC + ⚡LIMITED never collide */ .pv-chip { font-size: .52rem; padding: 2px 7px; top: 6px; left: 6px; letter-spacing: .3px; } .limited-flag { font-size: .52rem; padding: 2px 6px; top: 6px; right: 6px; } .cd-tile { width: 62px; padding: 9px 0 7px; } .cd-tile b { font-size: 1.4rem; } .cd-sep { display: none; } .sec-count { display: none; } .store-section-head { margin: 32px 0 2px; gap: 10px; } .sec-emoji { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 12px; } .store-section-head h2 { font-size: 1.12rem; } .tryon-scene { min-height: 290px; padding: 26px 10px 20px; } .inv-slots { grid-template-columns: 1fr 1fr; gap: 8px; } } @media (max-width: 380px) { .store-grid { grid-template-columns: 1fr; } } /* ── 💬 Messages (DMs) ───────────────────────────────────────────────────── */ .dm-shell { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: var(--bg-panel); border: var(--bw) solid var(--ink); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; height: calc(100vh - 250px); min-height: 460px; } .dm-list { border-right: 2.5px solid var(--ink); display: flex; flex-direction: column; min-width: 0; min-height: 0; } .dm-list-head { padding: 14px 16px; border-bottom: 2px solid var(--border-glass); font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dm-convos { overflow-y: auto; flex: 1; } .dm-convo { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--border-glass); transition: background .12s; min-width: 0; } .dm-convo:hover { background: var(--bg-alt); } .dm-convo.active { background: var(--bg-alt); box-shadow: inset 4px 0 0 var(--primary); } .dm-convo img { width: 42px; height: 42px; border-radius: 13px; border: 2px solid var(--ink); object-fit: cover; flex: none; background: var(--bg-alt); } .dm-convo-mid { flex: 1; min-width: 0; } .dm-convo-name { font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-convo-last { color: var(--text-muted); font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-convo-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; } .dm-convo-time { color: var(--text-muted); font-size: .68rem; font-weight: 700; } .dm-unread { background: var(--primary); color: #fff; border: 2px solid var(--ink); border-radius: 99px; font-size: .68rem; font-weight: 800; min-width: 20px; padding: 1px 6px; text-align: center; line-height: 1.5; } .dm-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .dm-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--border-glass); } .dm-chat-head img { width: 38px; height: 38px; border-radius: 12px; border: 2px solid var(--ink); object-fit: cover; background: var(--bg-alt); } .dm-chat-name { font-weight: 800; line-height: 1.15; } .dm-chat-name a { color: inherit; } .dm-chat-name a:hover { color: var(--primary); } .dm-chat-sub { color: var(--text-muted); font-size: .74rem; font-weight: 700; } .dm-back-btn { display: none; } .dm-msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-main); } .dm-msg { max-width: 76%; display: flex; flex-direction: column; } .dm-msg .bubble { padding: 8px 13px; border-radius: 16px; border: 2px solid var(--ink); font-size: .93rem; font-weight: 600; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: var(--bg-panel); box-shadow: 2px 2px 0 var(--ink); } .dm-msg .when { font-size: .64rem; font-weight: 700; color: var(--text-muted); margin-top: 3px; padding: 0 4px; } .dm-msg.mine { align-self: flex-end; align-items: flex-end; } .dm-msg.mine .bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 5px; } .dm-msg.theirs { align-self: flex-start; } .dm-msg.theirs .bubble { border-bottom-left-radius: 5px; } .dm-day { align-self: center; font-size: .7rem; font-weight: 800; color: var(--text-muted); background: var(--bg-alt); border-radius: 99px; padding: 3px 12px; margin: 6px 0 2px; } .dm-composer { display: flex; gap: 10px; padding: 12px 14px; border-top: 2px solid var(--border-glass); align-items: flex-end; } .dm-composer textarea { flex: 1; resize: none; min-height: 44px; max-height: 130px; background: var(--bg-alt); border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 14px; font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--text-main); outline: none; } .dm-composer textarea:focus { border-color: var(--primary); } .dm-send-btn { padding: 10px 20px; flex: none; } .dm-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-weight: 700; text-align: center; padding: 20px; } .dm-empty .big { font-size: 3rem; } .dm-nav-badge { display: inline-block; background: #ff5a5f; color: #fff; border-radius: 99px; font-size: .66rem; font-weight: 800; min-width: 17px; padding: 1px 5px; text-align: center; vertical-align: 2px; margin-left: 2px; line-height: 1.5; } @media (max-width: 760px) { .dm-shell { grid-template-columns: 1fr; height: calc(100vh - 190px); min-height: 420px; } .dm-list { border-right: none; } .dm-shell.chatting .dm-list { display: none; } .dm-shell:not(.chatting) .dm-chat { display: none; } .dm-back-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 10px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; color: var(--text-main); box-shadow: var(--shadow-sm); flex: none; } .dm-msg { max-width: 86%; } } /* ── 📞 Contact options ──────────────────────────────────────────────────── */ .contact-modal { max-width: 460px; } .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 60vh; overflow-y: auto; padding: 2px; } .contact-opt { display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--bg-alt); border: 2.5px solid var(--ink); border-radius: 14px; padding: 11px 13px; font-weight: 800; font-size: .92rem; color: var(--text-main); box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s; } .contact-opt:hover { transform: translate(-1px, -2px); box-shadow: 3px 4px 0 var(--ink); color: var(--primary); } .contact-opt.primary { background: var(--primary); color: #fff; } .contact-opt.primary:hover { color: #fff; } .contact-opt .co-emoji { font-size: 1.25rem; flex: none; } .contact-opt .co-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .contact-grid { grid-template-columns: 1fr; } } /* dashboard editor */ .contact-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px 18px; } .contact-edit-row { min-width: 0; } .ce-label { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: .88rem; margin-bottom: 6px; } .ce-label span { font-size: 1.05rem; } .contact-edit-row .form-control { font-size: .9rem; padding: 9px 12px; } /* ── 🗂️ Dashboard tabs ───────────────────────────────────────────────────── */ .dash-tabs { display: flex; gap: 6px; margin-bottom: 26px; overflow-x: auto; position: sticky; top: 10px; z-index: 60; padding: 7px; background: var(--bg-panel); border: var(--bw) solid var(--ink); border-radius: 99px; box-shadow: var(--shadow-md); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dash-tabs::-webkit-scrollbar { display: none; } .dash-tab { font-family: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; flex: 1; background: transparent; color: var(--text-muted); border: none; border-radius: 99px; padding: 9px 14px; white-space: nowrap; transition: var(--transition); } .dash-tab:hover { color: var(--text-main); background: var(--bg-alt); } .dash-tab.active { background: var(--primary); color: #fff; box-shadow: 2px 2px 0 var(--ink); } .dash-pane { animation: dashFade .22s ease; } @keyframes dashFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .dash-tab { font-size: .8rem; padding: 8px 11px; flex: none; } } /* ═══════════════════════════ 🎬 Studios ═══════════════════════════ */ /* modal box alias (studios/studio pages use .modal-content) */ .modal-content { background: var(--bg-secondary); border: var(--bw) solid var(--ink); border-radius: 22px; width: 100%; max-width: 500px; padding: 26px; box-shadow: var(--shadow-lg); transform: scale(0.95); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-overlay.active .modal-content { transform: scale(1); } .radio-pill { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 700; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 99px; padding: 8px 14px; color: var(--text-main); font-size: 0.9rem; } .radio-pill input { accent-color: var(--primary); } .studios-hero { text-align: center; padding: 40px 0 26px; } .studios-hero h1 { font-size: 2.6rem; margin-bottom: 8px; } .studios-hero p { color: var(--text-muted); font-size: 1.05rem; font-weight: 600; max-width: 560px; margin: 0 auto; } .studios-how h2 { font-size: 1.4rem; } .studios-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; } .studios-step { display: flex; gap: 12px; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 14px; padding: 14px; } .studios-step .ss-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid var(--ink); } .studios-step b { display: block; margin-bottom: 3px; } .studios-step span { color: var(--text-muted); font-size: 0.88rem; font-weight: 600; line-height: 1.5; } .studios-roles { display: grid; gap: 8px; } .studios-roles span { color: var(--text-muted); font-size: 0.9rem; } .studios-roles b { color: var(--text-main); } .studios-grid { display: grid; } .studio-card-logo { flex: none; width: 58px; height: 58px; border-radius: 14px; background: var(--bg-alt); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; overflow: hidden; } .studio-card-logo.sm { width: 44px; height: 44px; font-size: 1.3rem; } .studio-card-logo img { width: 100%; height: 100%; object-fit: cover; } .studio-card-body { min-width: 0; flex: 1; } .studio-card-name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; } .studio-card-handle { color: var(--text-muted); font-size: 0.85rem; font-weight: 700; } .studio-card-tag { margin: 6px 0; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .studio-card-meta { color: var(--text-muted); font-size: 0.82rem; font-weight: 700; } .studio-recruit { font-size: 0.68rem; background: #2fe0a0; color: #02452a; border: 2px solid var(--ink); border-radius: 99px; padding: 1px 8px; font-weight: 800; } .studio-note h3 { font-size: 1.1rem; } .studio-roster-row { display: flex; align-items: center; gap: 10px; background: var(--bg-alt); border-radius: 10px; padding: 7px 10px; font-weight: 700; } .studio-roster-row img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; } .studio-roster-status { margin-left: auto; font-size: 0.8rem; font-weight: 800; padding: 2px 9px; border-radius: 99px; } .studio-roster-status.s-accepted { background: rgba(47,224,160,.2); color: #065036; } [data-theme]:not([data-theme="light"]) .studio-roster-status.s-accepted { color: #aef8db; } .studio-roster-status.s-declined { background: rgba(255,90,95,.18); color: #e2454a; } .studio-roster-status.s-pending { background: rgba(254,231,92,.22); color: #b58a00; } .studio-mine-row { display: flex; align-items: center; gap: 12px; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; } .studio-pill { display: inline-flex; align-items: center; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 99px; padding: 3px 10px; font-size: 0.78rem; font-weight: 800; } .studio-role-badge { display: inline-block; font-size: 0.72rem; font-weight: 800; border: 2px solid var(--ink); border-radius: 99px; padding: 2px 9px; } .studio-role-badge.r-leader { background: var(--premium-gradient); color: #5a3d00; } .studio-role-badge.r-admin { background: #a5b4fc; color: #2c2c6b; } .studio-role-badge.r-member { background: var(--bg-alt); color: var(--text-muted); } .studio-hero-card { border-left: 8px solid var(--accent, var(--primary)); margin-bottom: 22px; } .studio-hero-top { display: flex; gap: 16px; align-items: flex-start; } .studio-hero-logo { flex: none; width: 84px; height: 84px; border-radius: 18px; background: var(--bg-alt); border: var(--bw) solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; overflow: hidden; } .studio-hero-logo img { width: 100%; height: 100%; object-fit: cover; } .studio-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .studio-members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-bottom: 30px; } .studio-member-card { background: var(--bg-glass); border: var(--bw) solid var(--ink); border-radius: 18px; padding: 18px 14px; box-shadow: var(--shadow-md); text-align: center; transition: var(--transition); } .studio-member-card:hover { transform: translateY(-3px); box-shadow: 5px 7px 0 var(--ink); } .studio-member-card.prem { border-color: var(--premium-border); } .studio-member-main { display: block; } .studio-member-avatar { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--ink); object-fit: cover; margin-bottom: 10px; background: var(--bg-main); } .studio-member-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; } .studio-member-title { font-size: 0.82rem; color: var(--primary); font-weight: 800; margin-top: 6px; } .studio-member-bio { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .studio-member-controls { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 12px; border-top: 2px dashed var(--border-glass); padding-top: 10px; } .mini-btn { font-size: 0.72rem; font-weight: 800; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 8px; padding: 3px 8px; cursor: pointer; color: var(--text-main); } .mini-btn:hover { background: var(--primary); color: #fff; } .mini-btn.danger:hover { background: #ff5a5f; } .studio-req-row { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-alt); border-radius: 12px; padding: 12px; margin-bottom: 10px; } .studio-req-row img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; flex: none; } .studio-thread-row { display: flex; gap: 12px; align-items: center; background: var(--bg-alt); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; } .studio-thread-row:hover { background: var(--bg-glass-hover); } .studio-thread-row img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; } .studio-chat-box { flex: 1; overflow-y: auto; min-height: 200px; max-height: 48vh; background: var(--bg-main); border: 2px solid var(--ink); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .studio-bubble { max-width: 80%; align-self: flex-start; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 14px; border-bottom-left-radius: 4px; padding: 8px 12px; font-weight: 600; word-break: break-word; } .studio-bubble.mine { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; } .sb-who { font-size: 0.68rem; opacity: .7; font-weight: 800; margin-bottom: 2px; } @media (max-width: 640px) { .studios-hero h1 { font-size: 2rem; } .studio-hero-top { flex-direction: column; } .studio-hero-logo { width: 66px; height: 66px; font-size: 2rem; } .studio-members-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .studio-req-row { flex-direction: column; } } /* Browse role filter */ .studio-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .studio-filter-chip { cursor: pointer; font-weight: 800; font-size: 0.84rem; background: var(--bg-glass); color: var(--text-main); border: 2.5px solid var(--ink); border-radius: 99px; padding: 6px 14px; box-shadow: var(--shadow-sm); transition: var(--transition); } .studio-filter-chip:hover { transform: translateY(-2px); } /* --primary is a pale lavender in dark theme, so white-on-primary drops to 2.7:1 there. Each theme gets the pairing that actually reads. */ .studio-filter-chip.active { background: #5b3fd9; color: #fff; } [data-theme="dark"] .studio-filter-chip.active { background: #a78bfa; color: #16112b; } /* Studio page hero: big banner + big icon */ .studio-hero-card { padding: 0; overflow: hidden; } .studio-hero-banner { height: 240px; background: linear-gradient(135deg, var(--accent, #7c5cff), #4c1d95); background-size: cover; background-position: center; border-bottom: 3px solid var(--ink); position: relative; } .studio-hero-inner { padding: 0 24px 22px; position: relative; } .studio-hero-icon { width: 118px; height: 118px; border-radius: 26px; border: 4px solid var(--ink); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-size: 3.4rem; overflow: hidden; margin-top: -62px; box-shadow: var(--shadow-md); position: relative; z-index: 2; } .studio-hero-icon img { width: 100%; height: 100%; object-fit: cover; } .studio-hero-headline { margin-top: 12px; } .studio-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* (The .studio-open-banner rules that used to sit here were a dead duplicate of the ones further down, which override them completely. Removed so there is only one place to change the hiring banner.) */ /* Image upload rows (apply + settings) */ .studio-upload-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .studio-upload-preview { width: 60px; height: 60px; border-radius: 12px; border: 2px solid var(--ink); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; font-size: 1.4rem; } .studio-upload-preview.banner { width: 108px; height: 46px; border-radius: 10px; } .studio-upload-preview img { width: 100%; height: 100%; object-fit: cover; } .studio-size-hint { font-size: 0.76rem; color: var(--text-muted); font-weight: 600; } /* Roles picker (checkbox chips) */ .studio-roles-picker { display: flex; flex-wrap: wrap; gap: 8px; } .studio-roles-picker label { cursor: pointer; font-weight: 700; font-size: 0.82rem; background: var(--bg-alt); color: var(--text-main); border: 2px solid var(--ink); border-radius: 99px; padding: 5px 12px; user-select: none; } .studio-roles-picker input { display: none; } .studio-roles-picker label.on { background: var(--primary); color: #fff; } /* ── Apply wizard: header, stepper, sticky footer ── */ .studio-wizard { display: flex; flex-direction: column; } .studio-wizard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .studio-stepper { display: flex; align-items: center; gap: 6px; margin: 16px 0 20px; } .studio-stepper .sw-dot { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--bg-alt); color: var(--text-muted); font-weight: 800; font-size: 0.9rem; transition: var(--transition); } .studio-stepper .sw-line { flex: 1; height: 3px; border-radius: 3px; background: var(--border-glass); transition: var(--transition); } .studio-stepper .sw-dot.done { background: #2fe0a0; color: #063; border-color: var(--ink); } .studio-stepper .sw-dot.active { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(124,92,255,.22); } .studio-stepper .sw-line.done { background: #2fe0a0; } .studio-step-body { display: grid; gap: 2px; } .studio-wizard-foot { display: flex; gap: 10px; margin-top: 22px; } .studio-wizard-foot .btn { flex: 1; } /* ── Application progress bar ── */ .studio-progress { height: 10px; border-radius: 99px; background: var(--bg-alt); border: 2px solid var(--ink); overflow: hidden; margin: 4px 0 14px; } .studio-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #2fe0a0); border-radius: 99px; transition: width .5s cubic-bezier(0.34,1.56,0.64,1); } .studio-progress.ready > span { background: #2fe0a0; } /* ── Nicer status / notice cards ── */ .studio-note { border-left: 6px solid var(--accent, var(--primary)); } .studio-note.n-invite { --accent: #7c5cff; } .studio-note.n-founder { --accent: #2fb0e0; } .studio-note.n-app { --accent: #ffb020; } .studio-note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .studio-note-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--ink); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .studio-note-head h3 { margin: 0; font-size: 1.12rem; } .studio-roster-row { border: 2px solid var(--border-glass); } .studio-status-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.82rem; padding: 4px 12px; border-radius: 99px; border: 2px solid var(--ink); } .studio-status-tag.t-wait { background: rgba(255,176,32,.16); color: #b57400; } .studio-status-tag.t-ready { background: rgba(47,224,160,.18); color: #065036; } [data-theme]:not([data-theme="light"]) .studio-status-tag.t-ready { color: #aef8db; } /* ═══════════════ 👁️ Admin: View as Member ═══════════════ */ .va-warn { background: rgba(255,176,32,.14); border: 2px dashed #ffb020; border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; font-size: 0.88rem; font-weight: 600; line-height: 1.6; color: var(--text-main); } .va-warn b { color: #b57400; } .va-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .va-controls .form-control { flex: 1; min-width: 220px; } .va-bar { display: flex; align-items: center; gap: 12px; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; } .va-bar img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; flex: none; } .va-timer { margin-left: auto; font-weight: 800; font-family: var(--font-head); background: #ffb020; color: #3a2500; border: 2px solid var(--ink); border-radius: 99px; padding: 3px 12px; flex: none; } .va-timer.out { background: #ff5a5f; color: #fff; } .va-pages { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .va-pages button { cursor: pointer; font-weight: 800; font-size: 0.82rem; background: var(--bg-glass); color: var(--text-main); border: 2px solid var(--ink); border-radius: 99px; padding: 5px 13px; transition: var(--transition); } .va-pages button:hover { transform: translateY(-2px); } .va-pages button.active { background: var(--primary); color: #fff; } .va-frame-wrap { border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); background: var(--bg-main); } #va-frame { width: 100%; height: 70vh; min-height: 420px; border: 0; display: block; } @media (max-width: 640px) { #va-frame { height: 58vh; min-height: 320px; } .va-controls .form-control { min-width: 100%; } } .studio-hint { margin: 12px 0 0; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; line-height: 1.55; } .studio-hint b { color: var(--text-main); } /* ── Empty states ── */ .studio-empty { text-align: center; padding: 34px 18px; color: var(--text-muted); font-weight: 600; } .studio-empty .ico { font-size: 2.2rem; display: block; margin-bottom: 8px; } @media (max-width: 640px) { .modal-overlay { padding: 12px; align-items: flex-start; } .modal, .modal-content { padding: 20px; border-radius: 18px; } .studio-hero-banner { height: 160px; } .studio-hero-icon { width: 92px; height: 92px; font-size: 2.6rem; margin-top: -50px; } .studio-hero-inner { padding: 0 16px 18px; } .studio-wizard-foot { flex-direction: column-reverse; } .studio-req-row { flex-direction: column; } .studio-req-row .studio-req-actions { flex-direction: row !important; width: 100%; } .studio-req-row .studio-req-actions .btn { flex: 1; } } /* ═══════════════════════════════════════════════════════════════════════════ 💎 STUDIO COSMETICS Classes are emitted by frontend/js/studioCosmetics.js. PERFORMANCE CONTRACT — every rule below obeys it, and new effects must too: · animate ONLY `transform` and `opacity`. Those run on the compositor. Animating background-position, filter, box-shadow or width forces a repaint of the layer on EVERY frame, which is what made the site drag. · no `mix-blend-mode` on anything animated — it defeats layer promotion. · every @keyframes is gated behind `.sfx-on`, which the renderer adds only while the element is on screen. Nothing off-screen ever animates. · movement uses oversized layers translated in place, so there is never a seam and never a repaint. ═══════════════════════════════════════════════════════════════════════════ */ .sfx-host { position: relative; } /* Effects are inert until seen. Reduced-motion users simply never get .sfx-on, so they keep the artwork and lose only the movement. */ .sfx-frame, .sfx-crest, .sfx-bg, .sfx-aura, .sfx-frame::before, .sfx-frame::after, .sfx-bg::before, .sfx-bg::after, .sfx-aura::before, .sfx-aura::after { animation-play-state: paused; } .sfx-on, .sfx-on::before, .sfx-on::after, .sfx-on > *, .sfx-on > *::before, .sfx-on > *::after { animation-play-state: running; } .sfx-frame { position: absolute; pointer-events: none; border-radius: inherit; } /* One shared vocabulary of compositor-only motions. */ @keyframes sfx-pan { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes sfx-drop { from { transform: translate3d(0,-50%,0); } to { transform: translate3d(0,0,0); } } @keyframes sfx-lift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-50%,0); } } @keyframes sfx-sweep { 0%,55% { transform: translate3d(-130%,0,0); } 100% { transform: translate3d(130%,0,0); } } @keyframes sfx-spin { to { transform: rotate(360deg); } } @keyframes sfx-spinr { to { transform: rotate(-360deg); } } @keyframes sfx-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } } @keyframes sfx-glow { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } } @keyframes sfx-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-5px,0); } } /* Reusable sheen bar — one translated element, never a moving gradient. */ .sfx-sheen { position: absolute; inset: -20% -60%; pointer-events: none; } .sfx-sheen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%); transform: translate3d(-130%,0,0); animation: sfx-sweep 5s ease-in-out infinite; } /* ───────────────── 💠 Logo frames — STRICTLY OUTSIDE the logo ───────────── The host stops clipping and the logo keeps its own rounded corners, so the ring can live entirely in the margin around the image. Nothing is ever drawn on top of a studio's logo. */ .sfx-framed { overflow: visible !important; } .sfx-framed > img { border-radius: inherit; } .sfx-frame { inset: calc(-1 * var(--fr-out, 13px)); border-radius: var(--fr-r, 34px); z-index: -1; /* behind the logo — cannot cover it */ overflow: visible; } .sfx-frame::before, .sfx-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* Gold Laurel — a struck gold ring with a slow shine */ .sfx-framed--gold_laurel { box-shadow: 0 0 0 2px #d9a441, 0 0 12px rgba(255,196,74,.38); } .sfx-frame--gold_laurel::before { background: conic-gradient(from 0deg, #8a5f00, #ffe9a8 12%, #b8801a 25%, #fff6d0 38%, #8a5f00 50%, #ffe9a8 62%, #b8801a 75%, #fff6d0 88%, #8a5f00); animation: sfx-spin 9s linear infinite; } .sfx-frame--gold_laurel::after { inset: var(--fr-band, 3px); background: var(--bg-main, #16122b); border-radius: calc(var(--fr-r, 34px) - var(--fr-band, 3px)); } /* Plasma Ring — contained plasma turning around the logo */ .sfx-framed--plasma_ring { box-shadow: 0 0 0 2px #17c8e6, 0 0 14px rgba(34,211,238,.5); } .sfx-frame--plasma_ring::before { background: conic-gradient(from 0deg, #22d3ee, #6366f1, #22d3ee, #a855f7, #22d3ee); animation: sfx-spin 3.4s linear infinite; } .sfx-frame--plasma_ring::after { inset: var(--fr-band, 3px); background: var(--bg-main, #16122b); border-radius: calc(var(--fr-r, 34px) - var(--fr-band, 3px)); box-shadow: 0 0 10px rgba(34,211,238,.55); } /* Diamond Halo — cut stones set into a turning halo */ .sfx-framed--diamond_halo { box-shadow: 0 0 0 2px #cfe6ff, 0 0 15px rgba(190,225,255,.5); } .sfx-frame--diamond_halo::before { background: conic-gradient(from 0deg, #fff, #a9c8ee 10%, #fff 20%, #e8f3ff 30%, #fff 40%, #bcd8ff 50%, #fff 60%, #a9c8ee 70%, #fff 80%, #e8f3ff 90%, #fff); animation: sfx-spin 7s linear infinite; } .sfx-frame--diamond_halo::after { inset: var(--fr-band, 3px); background: var(--bg-main, #16122b); border-radius: calc(var(--fr-r, 34px) - var(--fr-band, 3px)); } /* Obsidian Seal — carved black stone trimmed in gold */ /* Obsidian Seal — a faceted black-stone bezel set in machined gold. Unlike the other frames this one has NO inner cover disc: the logo already hides the centre, so the full ring width can be stone. A dark ring only reads as jewellery when it is thick enough to show its facets — as a 5px sliver it just looked like a smudge. The facets use HARD colour stops; a smooth gradient turns to mud at this size, while hard stops cut like a real gemstone setting. */ .sfx-framed--obsidian_seal { box-shadow: 0 0 0 2px #0a0812, /* stone shoulder against the logo */ 0 0 0 4px #f0cf6a, /* bright inner gold rim */ 0 0 0 5px #6d4a0d, /* its shaded underside → real depth */ 0 0 14px rgba(240,207,106,.3); } .sfx-frame--obsidian_seal { box-shadow: 0 0 0 1px #f0cf6a, 0 0 0 3px #4a3308, 0 0 12px rgba(0,0,0,.55); } .sfx-frame--obsidian_seal::before { background: conic-gradient(from 0deg, #0d0a18 0 6%, #5a4d8a 6% 9%, #1a1430 9% 18%, #2e2758 18% 22%, #0d0a18 22% 31%, #7a68b8 31% 34%, #1a1430 34% 43%, #2e2758 43% 47%, #0d0a18 47% 56%, #5a4d8a 56% 59%, #1a1430 59% 68%, #2e2758 68% 72%, #0d0a18 72% 81%, #7a68b8 81% 84%, #1a1430 84% 93%, #2e2758 93% 97%, #0d0a18 97% 100%); animation: sfx-spin 22s linear infinite; } /* A single gold highlight travelling the rim, so the stone catches light. */ .sfx-frame--obsidian_seal::after { background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,238,178,.9) 79%, rgba(255,238,178,.25) 84%, transparent 90% 100%); animation: sfx-spin 6s linear infinite; } /* Solar Flare — a corona of white-hot fire, the top frame */ .sfx-framed--solar_flare { box-shadow: 0 0 0 2px #ffd27a, 0 0 17px rgba(255,180,60,.6); } .sfx-frame--solar_flare::before { background: conic-gradient(from 0deg, #ff6b1f, #fff6d0 8%, #ffb02e 16%, #ff3d00 24%, #fffdf0 34%, #ff8c1a 44%, #ff3d00 56%, #fff6d0 68%, #ffb02e 80%, #ff6b1f 92%, #ff6b1f); animation: sfx-spin 4.2s linear infinite; } .sfx-frame--solar_flare::after { inset: var(--fr-band, 3px); background: var(--bg-main, #16122b); border-radius: calc(var(--fr-r, 34px) - var(--fr-band, 3px)); box-shadow: 0 0 12px rgba(255,150,40,.65); } /* Per-surface ring geometry — the ring always clears the logo box. Deliberately restrained: the frame is jewellery around the logo, not a second object competing with it. `--fr-band` is the visible ring width, `--fr-out` how far it sits outside the logo edge. */ .studio-hero-icon { --fr-out: 9px; --fr-r: 35px; --fr-band: 4px; } .studio-card-icon { --fr-out: 7px; --fr-r: 27px; --fr-band: 3.5px; } .sfx-pv-icon { --fr-out: 6px; --fr-r: 23px; --fr-band: 3px; } .sc-tile .sfx-pv-icon { --fr-out: 4px; --fr-r: 14px; --fr-band: 2.5px; } /* ───────────────── 🛡️ Crests — inline SVG heraldry ───────────────── */ .sfx-crest { position: absolute; top: 12px; right: 12px; z-index: 6; pointer-events: none; width: 58px; height: 58px; animation: sfx-float 5s ease-in-out infinite; filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); } .sfx-crest svg { width: 100%; height: 100%; display: block; } .sfx-crest::before { content: ''; position: absolute; inset: -10%; border-radius: 50%; z-index: -1; animation: sfx-glow 3.4s ease-in-out infinite; } .sfx-crest--gold_crown::before { box-shadow: 0 0 24px 5px rgba(255,196,74,.8); } .sfx-crest--phoenix::before { box-shadow: 0 0 26px 6px rgba(255,107,31,.8); } .sfx-crest--void_sigil::before { box-shadow: 0 0 28px 7px rgba(150,90,255,.85); } .sfx-crest--celestial::before { box-shadow: 0 0 34px 9px rgba(255,224,113,.9); } /* The top crest gets an orbiting ring of its own. */ .sfx-crest--celestial::after { content: ''; position: absolute; inset: -13%; border-radius: 50%; border: 2px dashed rgba(255,246,208,.85); animation: sfx-spin 16s linear infinite; } .sfx-crest--void_sigil::after { content: ''; position: absolute; inset: -13%; border-radius: 50%; border: 2px dotted rgba(196,165,255,.9); animation: sfx-spinr 11s linear infinite; } /* ───────────────── 🔠 Nameplates ───────────────── */ .sfx-name { position: relative; display: inline-block; } .sfx-name--engraved_gold, .sfx-name--prism_flow, .sfx-name--starlight { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 300% 100%; background-position: 0 0; } /* Gradient text can't be composited, so it pans slowly and only when on screen — one cheap element, not a field of them. */ @keyframes sfx-text { to { background-position: 300% 0; } } .sfx-on.sfx-name--engraved_gold, .sfx-on.sfx-name--prism_flow, .sfx-on.sfx-name--starlight { animation: sfx-text 9s linear infinite; } .sfx-name--engraved_gold { background-image: linear-gradient(100deg, #8a5f00, #ffe9a8 15%, #fff 22%, #ffe9a8 30%, #b8801a 45%, #ffd97a 60%, #fff6d0 70%, #b8801a 85%, #8a5f00); filter: drop-shadow(0 2px 0 rgba(80,52,0,.45)); } .sfx-name--prism_flow { background-image: linear-gradient(100deg, #ff2d8f, #ffb02e 12%, #2fe0a0 24%, #22d3ee 36%, #a855f7 48%, #ff2d8f 60%, #ffb02e 72%, #2fe0a0 84%, #22d3ee); } .sfx-name--starlight { background-image: linear-gradient(100deg, #dbeafe, #fff 18%, #93c5fd 30%, #fff 42%, #dbeafe 55%, #fff 70%, #93c5fd 85%, #fff); filter: drop-shadow(0 0 10px rgba(147,197,253,.9)); } /* ───────────────── 🌆 Studio backgrounds — the scene behind the page ─────── */ #sfx-bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* Content rides above the scene; the navbar and modals keep their own higher stacking, so only the page body needs lifting. */ body.sfx-has-bg .container { position: relative; z-index: 2; } .sfx-bg { overflow: hidden; contain: paint; } .sfx-bg::before, .sfx-bg::after { content: ''; position: absolute; inset: 0; } /* Neon District — a rain-slick skyline in parallax */ .sfx-bg--neon_district { background: radial-gradient(80% 60% at 50% 100%, rgba(255,45,143,.35), transparent 70%), linear-gradient(180deg, #06040f 0%, #140a2e 45%, #2a1145 75%, #06040f 100%); } .sfx-bg--neon_district::before { inset: 30% -100% 0 0; background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(10,6,24,.95) 28px 74px, transparent 74px 96px, rgba(16,9,36,.95) 96px 150px, transparent 150px 172px); -webkit-mask: linear-gradient(180deg, transparent, #000 25%); mask: linear-gradient(180deg, transparent, #000 25%); background-size: 50% 100%; animation: sfx-pan 70s linear infinite; } .sfx-bg--neon_district::after { inset: 34% -100% 0 0; background-image: radial-gradient(2px 3px at 6% 30%, rgba(34,211,238,.95), transparent 60%), radial-gradient(2px 3px at 14% 52%, rgba(255,45,143,.95), transparent 60%), radial-gradient(2px 3px at 23% 24%, rgba(255,214,102,.95), transparent 60%), radial-gradient(2px 3px at 33% 61%, rgba(34,211,238,.85), transparent 60%), radial-gradient(2px 3px at 42% 38%, rgba(168,85,247,.95), transparent 60%); background-size: 50% 100%; animation: sfx-pan 45s linear infinite; } /* Frozen Throne — a glacial hall with light from above */ .sfx-bg--frozen_throne { background: radial-gradient(70% 55% at 50% 0%, rgba(190,235,255,.4), transparent 70%), linear-gradient(180deg, #08131f 0%, #10314c 45%, #071523 100%); } .sfx-bg--frozen_throne::before { background: repeating-linear-gradient(102deg, rgba(200,240,255,.14) 0 3px, transparent 3px 46px), repeating-linear-gradient(78deg, rgba(160,220,255,.10) 0 2px, transparent 2px 62px); } .sfx-bg--frozen_throne::after { inset: -100% 0 0 0; background-image: radial-gradient(2px 2px at 12% 20%, rgba(255,255,255,.9), transparent 60%), radial-gradient(1.6px 1.6px at 38% 46%, rgba(224,244,255,.85), transparent 60%), radial-gradient(2.4px 2.4px at 63% 28%, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 82% 58%, rgba(224,244,255,.8), transparent 60%), radial-gradient(2px 2px at 92% 34%, #fff, transparent 60%); background-size: 100% 50%; animation: sfx-drop 26s linear infinite; } /* Obsidian Forge — black rock split by molten veins */ .sfx-bg--obsidian_forge { background: radial-gradient(70% 50% at 50% 100%, rgba(255,90,0,.45), transparent 70%), linear-gradient(180deg, #0a0708 0%, #1b0f0c 55%, #2a0f06 100%); } .sfx-bg--obsidian_forge::before { background: linear-gradient(66deg, transparent 39%, rgba(255,120,20,.75) 40%, transparent 41%), linear-gradient(112deg, transparent 24%, rgba(255,170,60,.6) 24.7%, transparent 25.5%), linear-gradient(54deg, transparent 71%, rgba(255,90,0,.7) 72%, transparent 73%), linear-gradient(128deg, transparent 58%, rgba(255,140,40,.5) 58.8%, transparent 59.8%); animation: sfx-pulse 6s ease-in-out infinite; } .sfx-bg--obsidian_forge::after { inset: -100% 0 0 0; background-image: radial-gradient(2.4px 2.4px at 18% 88%, rgba(255,190,90,.95), transparent 60%), radial-gradient(2px 2px at 44% 94%, rgba(255,130,30,.9), transparent 60%), radial-gradient(3px 3px at 70% 86%, rgba(255,215,140,.85), transparent 60%), radial-gradient(2px 2px at 88% 92%, rgba(255,110,20,.9), transparent 60%); background-size: 100% 50%; animation: sfx-lift 14s linear infinite; } /* Golden Dynasty — vaulted gold arches over deep black */ .sfx-bg--golden_dynasty { background: radial-gradient(60% 45% at 50% 8%, rgba(255,206,110,.35), transparent 70%), linear-gradient(180deg, #0d0a06 0%, #1d1509 50%, #090705 100%); } .sfx-bg--golden_dynasty::before { background: repeating-radial-gradient(60% 40% at 20% 0%, rgba(255,206,110,.16) 0 2px, transparent 2px 58px), repeating-radial-gradient(60% 40% at 50% 0%, rgba(255,226,150,.14) 0 2px, transparent 2px 58px), repeating-radial-gradient(60% 40% at 80% 0%, rgba(255,206,110,.16) 0 2px, transparent 2px 58px); } .sfx-bg--golden_dynasty::after { inset: -100% 0 0 0; background-image: radial-gradient(1.8px 1.8px at 16% 30%, rgba(255,224,150,.9), transparent 60%), radial-gradient(1.4px 1.4px at 42% 62%, rgba(255,240,196,.8), transparent 60%), radial-gradient(2.2px 2.2px at 68% 26%, rgba(255,214,120,.9), transparent 60%), radial-gradient(1.4px 1.4px at 88% 54%, rgba(255,240,196,.75), transparent 60%); background-size: 100% 50%; animation: sfx-drop 34s linear infinite; } /* Astral Rift — a galaxy bleeding through a tear in space */ .sfx-bg--astral_rift { background: radial-gradient(46% 62% at 50% 45%, rgba(168,85,247,.6), transparent 70%), radial-gradient(70% 50% at 22% 78%, rgba(34,211,238,.35), transparent 70%), linear-gradient(180deg, #04030c 0%, #0d0724 55%, #04030c 100%); } .sfx-bg--astral_rift::before { background: conic-gradient(from 0deg at 50% 45%, rgba(168,85,247,.55), rgba(34,211,238,.35) 25%, rgba(255,45,143,.4) 50%, rgba(34,211,238,.35) 75%, rgba(168,85,247,.55)); -webkit-mask: radial-gradient(38% 52% at 50% 45%, #000 30%, transparent 72%); mask: radial-gradient(38% 52% at 50% 45%, #000 30%, transparent 72%); animation: sfx-spin 48s linear infinite; } .sfx-bg--astral_rift::after { inset: 0 -100% 0 0; background-image: radial-gradient(1.8px 1.8px at 5% 18%, #fff, transparent 60%), radial-gradient(1.3px 1.3px at 17% 64%, rgba(255,255,255,.85), transparent 60%), radial-gradient(2px 2px at 28% 32%, #fff, transparent 60%), radial-gradient(1.3px 1.3px at 39% 78%, rgba(210,230,255,.9), transparent 60%), radial-gradient(1.6px 1.6px at 46% 12%, #fff, transparent 60%); background-size: 50% 100%; animation: sfx-pan 90s linear infinite; } /* Eclipse — a black sun ringed in white fire */ .sfx-bg--eclipse { background: radial-gradient(60% 45% at 50% 96%, rgba(120,60,255,.35), transparent 70%), linear-gradient(180deg, #030209 0%, #0a0618 55%, #05030e 100%); } .sfx-bg--eclipse::before { background: radial-gradient(circle at 50% 34%, #000 0 108px, rgba(255,246,214,.95) 108px 114px, rgba(255,196,74,.55) 114px 150px, transparent 190px); animation: sfx-glow 7s ease-in-out infinite; } .sfx-bg--eclipse::after { inset: 0 -100% 0 0; background-image: radial-gradient(1.6px 1.6px at 8% 22%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 22% 68%, rgba(255,255,255,.8), transparent 60%), radial-gradient(2px 2px at 36% 16%, #fff, transparent 60%), radial-gradient(1.3px 1.3px at 44% 82%, rgba(230,240,255,.85), transparent 60%); background-size: 50% 100%; animation: sfx-pan 120s linear infinite; } /* ───────────────── 🌌 Page auras — light OVER the page ───────────────── */ #sfx-aura-layer { position: fixed; inset: 0; z-index: 3; pointer-events: none; } .sfx-aura { overflow: hidden; contain: paint; } .sfx-aura::before, .sfx-aura::after { content: ''; position: absolute; inset: 0; } .sfx-aura--gold_dust::before { inset: -100% 0 0 0; background-image: radial-gradient(2px 2px at 10% 10%, rgba(255,213,128,.9), transparent 60%), radial-gradient(1.5px 1.5px at 32% 55%, rgba(255,232,170,.8), transparent 60%), radial-gradient(2.5px 2.5px at 58% 25%, rgba(255,200,90,.85), transparent 60%), radial-gradient(1.6px 1.6px at 77% 72%, rgba(255,240,190,.75), transparent 60%), radial-gradient(2px 2px at 90% 38%, rgba(255,213,128,.8), transparent 60%); background-size: 100% 50%; animation: sfx-drop 20s linear infinite; } .sfx-aura--gold_dust::after { background: radial-gradient(70% 50% at 50% 0%, rgba(255,196,74,.14), transparent 70%); } .sfx-aura--aurora_field::before { background: radial-gradient(50% 40% at 20% 0%, rgba(47,224,160,.34), transparent 70%), radial-gradient(45% 45% at 70% 8%, rgba(34,211,238,.3), transparent 70%), radial-gradient(55% 35% at 45% 4%, rgba(168,85,247,.26), transparent 70%); animation: sfx-glow 12s ease-in-out infinite; } .sfx-aura--cosmic_veil::before { background: radial-gradient(50% 45% at 78% 20%, rgba(150,60,255,.34), transparent 70%), radial-gradient(45% 40% at 18% 74%, rgba(0,190,255,.28), transparent 70%); animation: sfx-glow 14s ease-in-out infinite; } .sfx-aura--cosmic_veil::after { inset: -100% 0 0 0; background-image: radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 44% 66%, rgba(255,255,255,.8), transparent 60%), radial-gradient(1.8px 1.8px at 71% 15%, #fff, transparent 60%), radial-gradient(1.3px 1.3px at 88% 58%, rgba(210,230,255,.9), transparent 60%); background-size: 100% 50%; animation: sfx-drop 60s linear infinite; } .sfx-aura--divine_light::before { background: repeating-linear-gradient(96deg, rgba(255,248,214,.22) 0 26px, transparent 26px 92px); -webkit-mask: linear-gradient(180deg, #000, transparent 78%); mask: linear-gradient(180deg, #000, transparent 78%); animation: sfx-glow 9s ease-in-out infinite; } .sfx-aura--divine_light::after { inset: -100% 0 0 0; background-image: radial-gradient(2.5px 2.5px at 22% 88%, rgba(255,246,208,.9), transparent 60%), radial-gradient(2px 2px at 55% 94%, rgba(255,255,235,.8), transparent 60%), radial-gradient(3px 3px at 80% 86%, rgba(255,236,170,.85), transparent 60%); background-size: 100% 50%; animation: sfx-lift 22s linear infinite; } /* ═══════════════ 🎬 Studio cards v3 — the outside impression ═══════════════ Cards are the first thing anyone sees of a studio, so they carry the weight: a tall cinematic banner, a scrim that guarantees the text reads over ANY uploaded image, an oversized logo breaking the edge, and a footer that only ever shows real information. */ /* Off-screen cards are not laid out or painted at all. With dozens of studios and 29 animated store previews this is the single biggest win on the page. */ .studios-grid > .studio-card, .sstore-grid > .sitem-card { content-visibility: auto; contain-intrinsic-size: auto 400px; } .studios-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: stretch; /* every card in a row is the same height */ } .studio-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; height: 100%; border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--bg-glass); box-shadow: var(--shadow-md); color: var(--text-main); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; } .studio-card:hover { transform: translate(-3px, -5px); box-shadow: 8px 10px 0 var(--ink); } .studio-card-banner { height: 128px; flex: none; position: relative; background: linear-gradient(135deg, var(--accent, #7c5cff), #3b1d7a 70%, #1b0f3a); background-size: cover; background-position: center; border-bottom: 2.5px solid var(--ink); } /* Guarantees the Recruiting pill reads over any uploaded banner, however bright. */ .studio-card-banner::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 45%, rgba(0,0,0,.3) 100%); } .studio-card-banner .studio-recruit { position: absolute; top: 10px; left: 12px; z-index: 5; font-size: 0.7rem; padding: 3px 11px; box-shadow: var(--shadow-sm); } .studio-card-inner { padding: 0 18px 18px; display: flex; flex-direction: column; flex: 1; } /* The identity row. The logo rides up over the banner and the name sits beside it on the same baseline — one tidy row instead of a name floating in a gutter beside a logo it isn't aligned with. */ /* Only the LOGO overlaps the banner. The text block is aligned from the top and pushed clear of the banner edge, so a two-line studio name grows downwards into the card instead of upwards into the artwork. */ .studio-card-head { display: flex; align-items: flex-start; gap: 13px; margin: -28px 0 13px; position: relative; z-index: 4; } .studio-card-icon { flex: none; width: 66px; height: 66px; border-radius: 18px; border: 3px solid var(--ink); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-size: 2rem; overflow: hidden; box-shadow: var(--shadow-md); } .studio-card-icon img { width: 100%; height: 100%; object-fit: cover; } .studio-card-id { min-width: 0; flex: 1; margin-top: 33px; } .studio-card-inner .studio-card-name { display: block; margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.14rem; line-height: 1.25; color: var(--text-main); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .studio-card-inner .studio-card-handle { margin: 2px 0 0; color: var(--text-muted); font-weight: 700; font-size: 0.83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .studio-card-inner .studio-card-tag { margin: 0; color: var(--text-main); opacity: .82; font-size: 0.91rem; font-weight: 600; line-height: 1.5; min-height: 3em; /* two lines reserved -> footers line up */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .studio-card-foot { margin-top: auto; padding-top: 14px; } .studio-card-foot .studio-card-meta { margin-top: 11px; padding-top: 11px; border-top: 2px dashed var(--border-glass); display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-weight: 700; font-size: 0.82rem; } .studio-card-count { flex: none; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 99px; padding: 2px 10px; color: var(--text-main); white-space: nowrap; } /* The leader's name is the only free-text field down here, so it is the one that has to be allowed to truncate. */ .studio-card-lead { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studio-card-lead b { color: var(--text-main); } .studio-roles-row { display: flex; flex-wrap: wrap; gap: 6px; } .studio-role-chip { font-size: 0.72rem; font-weight: 800; background: var(--bg-alt); color: var(--text-main); border: 2px solid var(--ink); border-radius: 99px; padding: 2px 9px; white-space: nowrap; } /* The "open role" green has to be re-mixed per theme: one green cannot sit on both a white card and a #2a2547 one and stay legible. The old pair sat around 4.2:1 (light) and 6.0:1 (dark) — legible-ish but the label washed into its own fill. These push both well clear of it while keeping the same mint identity. */ .studio-role-chip.open { background: rgba(47,224,160,.20); color: #065036; } [data-theme]:not([data-theme="light"]) .studio-role-chip.open { background: rgba(47,224,160,.14); color: #aef8db; } /* Browse toolbar — heading, search and filters as one aligned block. */ .studios-browse-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .studios-browse-bar h2 { font-size: 1.5rem; margin: 0; } .studios-browse-bar .studios-count { font-weight: 800; font-size: 0.82rem; color: var(--text-muted); background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 99px; padding: 3px 11px; } .studios-browse-bar .search-box { margin-left: auto; max-width: 340px; flex: 1; min-width: 200px; } .studios-filter-label { color: var(--text-muted); font-weight: 700; font-size: 0.85rem; margin-bottom: 8px; } /* ═══════════ 🎬 Studio page interior ═══════════ */ .studio-hero-card { padding: 0; overflow: hidden; border-radius: 24px; } .studio-hero-banner { height: 260px; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent, #7c5cff), #3b1d7a 70%, #1b0f3a); background-size: cover; background-position: center; border-bottom: 3px solid var(--ink); } .studio-hero-banner::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 40%, rgba(0,0,0,.45) 100%); } .studio-hero-inner { padding: 0 26px 24px; position: relative; } .studio-hero-icon { width: 124px; height: 124px; border-radius: 28px; border: 4px solid var(--ink); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-size: 3.4rem; overflow: hidden; margin-top: -66px; box-shadow: var(--shadow-md); position: relative; z-index: 4; } .studio-hero-icon img { width: 100%; height: 100%; object-fit: cover; } .studio-hero-headline { margin-top: 14px; } .studio-hero-headline h1 { line-height: 1.15; word-break: break-word; } .studio-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } /* Facts strip — replaces a wall of prose with things people actually scan. */ .studio-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .studio-stat { display: flex; align-items: center; gap: 8px; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 14px; box-shadow: var(--shadow-sm); } .studio-stat b { font-family: var(--font-head); font-size: 1.05rem; } .studio-stat span { color: var(--text-muted); font-weight: 700; font-size: 0.8rem; } /* ── "Now hiring for" banner ─────────────────────────────────────────────── The backdrop here is NOT predictable: an equipped studio scene renders behind the page, so a translucent banner meant the text landed on a different colour for every studio — an icy scene washed the green label out entirely. At .12 alpha the label measured 4.1:1, under the 4.5:1 readable floor. So the banner now supplies almost all of its own colour. The scene still tints the edges, but only by ~10%, which keeps the text contrast stable whatever is behind it — and lets the label and chips use one colour per theme instead of hoping for the best. */ .studio-open-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(228,252,241,.92); border: 2px dashed #159c6b; border-radius: 14px; padding: 11px 15px; margin: 16px 0 0; } .studio-open-banner b { color: #07553a; } /* Every theme except `light` (and the bright default) is a dark one — matching only [data-theme="dark"] would leave all 25 premium themes on the light banner. */ [data-theme]:not([data-theme="light"]) .studio-open-banner { background: rgba(12,34,27,.90); border-color: #2fe0a0; } [data-theme]:not([data-theme="light"]) .studio-open-banner b { color: #7ff4c0; } .studio-section-title { display: flex; align-items: center; gap: 12px; margin: 30px 0 16px; font-size: 1.4rem; font-family: var(--font-head); font-weight: 800; } .studio-section-title::after { content: ''; flex: 1; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--border-glass) 0 8px, transparent 8px 16px); } /* ═══════════ 🛍️ Studio store shelf ═══════════ */ .sstore-hero { position: relative; overflow: hidden; margin: 44px 0 22px; padding: 32px 24px 28px; border-radius: 24px; border: var(--bw) solid var(--ink); box-shadow: var(--shadow-md); background: radial-gradient(60% 100% at 15% 0%, rgba(255,196,74,.26), transparent 70%), radial-gradient(55% 100% at 85% 10%, rgba(168,85,247,.28), transparent 70%), linear-gradient(140deg, #16122b, #241a3f 55%, #120e22); color: #fff; text-align: center; } .sstore-hero h2 { font-size: 2rem; margin: 0 0 8px; color: #fff; } .sstore-hero p { color: rgba(255,255,255,.84); max-width: 640px; margin: 0 auto; font-size: 0.96rem; line-height: 1.65; } .sstore-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; } .sstore-chips span { font-size: 0.78rem; font-weight: 800; padding: 6px 14px; border-radius: 99px; background: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.28); color: #fff; } .sstore-lead { margin-top: 16px; font-size: 0.87rem; font-weight: 800; color: #ffd97a; } .sstore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; margin-bottom: 12px; } .sitem-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: var(--bw) solid var(--ink); background: var(--bg-glass); box-shadow: var(--shadow-md); transition: transform .18s ease, box-shadow .18s ease; } .sitem-card:hover { transform: translate(-3px, -5px); box-shadow: 8px 10px 0 var(--ink); } .sitem-card.r-legendary { border-color: #ffb02e; box-shadow: 5px 6px 0 #a06600; } .sitem-card.r-mythic { border-color: #ff4d6d; box-shadow: 5px 6px 0 #8f0022; } .sitem-card.r-ascendant { border-color: #22d3ee; box-shadow: 5px 6px 0 #06687a; } .sitem-card.r-divine { border-color: #f8e39c; box-shadow: 5px 6px 0 #a07d16; } .sitem-card.r-legendary:hover { box-shadow: 8px 10px 0 #a06600; } .sitem-card.r-mythic:hover { box-shadow: 8px 10px 0 #8f0022; } .sitem-card.r-ascendant:hover { box-shadow: 8px 10px 0 #06687a; } .sitem-card.r-divine:hover { box-shadow: 8px 10px 0 #a07d16; } .sitem-body { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; } .sitem-name { font-family: var(--font-head); font-weight: 800; font-size: 1.14rem; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .sitem-slot { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; background: var(--bg-alt); border: 2px solid var(--ink); border-radius: 99px; padding: 2px 9px; color: var(--text-muted); } .sitem-desc { color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; margin: 9px 0 0; flex: 1; } .sitem-actions { display: flex; align-items: center; gap: 10px; margin-top: 15px; flex-wrap: wrap; } .sitem-price { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; margin-right: auto; } .sitem-pts { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); font-family: var(--font-body); } .sitem-rarity { position: absolute; top: 11px; left: 11px; z-index: 7; font-size: 0.68rem; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; padding: 4px 11px; border-radius: 99px; color: #fff; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); } .sitem-owned { font-weight: 800; font-size: 0.85rem; color: #065036; background: rgba(47,224,160,.16); border-radius: 99px; padding: 5px 13px; border: 2px solid #0b7a54; } [data-theme]:not([data-theme="light"]) .sitem-owned { color: #aef8db; border-color: #2fe0a0; } /* Miniature studio used as store artwork — the production renderer, scaled. */ .sfx-preview { position: relative; height: 190px; overflow: hidden; border-bottom: 2.5px solid var(--ink); background: linear-gradient(140deg, #2a2340, #171227); isolation: isolate; } .sfx-pv-scene { position: absolute; inset: 0; z-index: 0; } .sfx-pv-banner { position: absolute; inset: 0 0 66px 0; z-index: 1; background: linear-gradient(135deg, #7c5cff, #3b1d7a); overflow: hidden; } .sfx-pv-icon { position: absolute; left: 20px; top: 84px; width: 62px; height: 62px; border-radius: 17px; border: 3px solid var(--ink); background: var(--bg-alt); overflow: hidden; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .sfx-pv-name { position: absolute; left: 94px; bottom: 24px; z-index: 3; font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; color: var(--text-main); } .sfx-pv-crest { position: absolute; inset: 0 0 66px 0; z-index: 5; } .sfx-pv-crest .sfx-crest { width: 46px; height: 46px; top: 10px; right: 10px; } /* Browse cards have a shorter banner than the studio hero, so the crest is scaled to it — at hero size it swallowed a third of the artwork. */ .studio-card-banner .sfx-crest { width: 46px; height: 46px; top: 10px; right: 10px; } /* ═══════════ 💎 Customize modal ═══════════ */ .sc-slotbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .sc-slotbar button { cursor: pointer; font-family: inherit; font-weight: 800; font-size: 0.84rem; background: var(--bg-glass); color: var(--text-main); border: 2.5px solid var(--ink); border-radius: 99px; padding: 6px 14px; box-shadow: var(--shadow-sm); transition: var(--transition); } .sc-slotbar button:hover { transform: translateY(-2px); } .sc-slotbar button.active { background: var(--primary); color: #fff; } .sc-sub { color: var(--text-muted); font-size: 0.86rem; margin: -6px 0 14px; } .sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; } .sc-tile { position: relative; cursor: pointer; overflow: hidden; text-align: left; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--bg-glass); box-shadow: var(--shadow-sm); padding: 0; font-family: inherit; transition: var(--transition); /* A