/* ============================================================================= premium.css — PremiumFreelancers design system (mono + blue) --------------------------------------------------------------------------- Language : CLAY / CLAYMORPHISM. Soft, PUFFY surfaces. Depth comes from soft DUAL shadows (outer drop + inner top-light) on large radii — never borders. Shadows are extra-soft/plush so surfaces read as fluffy. Colour : BLACK & WHITE base (neutral greys), with a tiny touch of ONE accent — classic social BLUE. Used sparingly: primary buttons, active nav, links/tags, key CTAs. Full light + dark via [data-theme]. Texture : faint dotted-grid on the body (never bare); no coloured wash. Nav : floating soft capsule (mobile) + matching side rail (desktop), with a standalone round Create FAB. Shared by every page; pages add only tiny page-specific CSS on top. ========================================================================== */ /* ─────────────────────── NATIVE-APP PAGE TRANSITIONS ─────────────────────── The app is multi-page (separate .html files). Cross-document View Transitions let the browser hold the OUTGOING page on screen until the incoming one has painted, then animate between them — so tapping a link no longer flashes a white "cold start". Supported in Chromium/Android (our main audience); older browsers simply navigate as before (graceful no-op). The persistent chrome (mobile dock + desktop side rail) is given stable transition names so it stays pinned and doesn't cross-fade with the body. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.22s; } /* The shell chrome is identical on every page — keep it anchored across the navigation instead of fading it out and back in. */ .navdock { view-transition-name: ep-navdock; } .siderail{ view-transition-name: ep-siderail; } @media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; } } /* ───────────────────────── FONTS (item 31) ───────────────────────── DEFAULT font = Patrick Hand (the founder's choice — a warm handwritten face). Users can switch to any of 20+ curated fonts from the menu's "Reading font" picker — readable sans, rounded/playful, elegant serif and fancy handwriting, so Patrick Hand alone is never a hard requirement. The choice applies app-wide via . font-display:swap so text paints instantly and swaps in when the webfont lands (all non-default families are loaded lazily by App.ensureFontLoaded, not linked here). Patrick Hand ships a single 400 weight, so heavier weights render at the browser's synthesized bold. */ :root{ --font-patrick:'Patrick Hand','Comic Sans MS',system-ui,-apple-system,sans-serif; --font-system:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-inter:'Inter',system-ui,-apple-system,sans-serif; --font-lexend:'Lexend',system-ui,-apple-system,sans-serif; --font-worksans:'Work Sans',system-ui,-apple-system,sans-serif; --font-poppins:'Poppins',system-ui,-apple-system,sans-serif; --font-nunito:'Nunito',system-ui,-apple-system,sans-serif; --font-quicksand:'Quicksand',system-ui,-apple-system,sans-serif; --font-comfortaa:'Comfortaa',system-ui,-apple-system,sans-serif; --font-baloo:'Baloo 2',system-ui,-apple-system,sans-serif; --font-fredoka:'Fredoka',system-ui,-apple-system,sans-serif; --font-outfit:'Outfit',system-ui,-apple-system,sans-serif; --font-manrope:'Manrope',system-ui,-apple-system,sans-serif; --font-rubik:'Rubik',system-ui,-apple-system,sans-serif; --font-karla:'Karla',system-ui,-apple-system,sans-serif; --font-dmsans:'DM Sans',system-ui,-apple-system,sans-serif; --font-josefin:'Josefin Sans',system-ui,-apple-system,sans-serif; --font-raleway:'Raleway',system-ui,-apple-system,sans-serif; --font-playfair:'Playfair Display',Georgia,serif; --font-merriweather:'Merriweather',Georgia,serif; --font-lora:'Lora',Georgia,serif; --font-cormorant:'Cormorant Garamond',Georgia,serif; --font-caveat:'Caveat','Patrick Hand',cursive; --font-dancing:'Dancing Script',cursive; --font-pacifico:'Pacifico',cursive; --font-shadows:'Shadows Into Light',cursive; /* Active app font — Patrick Hand by default unless data-font switches it. */ --font-app:var(--font-patrick); } html[data-font="patrick"] { --font-app:var(--font-patrick); } html[data-font="system"] { --font-app:var(--font-system); } html[data-font="inter"] { --font-app:var(--font-inter); } html[data-font="lexend"] { --font-app:var(--font-lexend); } html[data-font="worksans"] { --font-app:var(--font-worksans); } html[data-font="poppins"] { --font-app:var(--font-poppins); } html[data-font="nunito"] { --font-app:var(--font-nunito); } html[data-font="quicksand"] { --font-app:var(--font-quicksand); } html[data-font="comfortaa"] { --font-app:var(--font-comfortaa); } html[data-font="baloo"] { --font-app:var(--font-baloo); } html[data-font="fredoka"] { --font-app:var(--font-fredoka); } html[data-font="outfit"] { --font-app:var(--font-outfit); } html[data-font="manrope"] { --font-app:var(--font-manrope); } html[data-font="rubik"] { --font-app:var(--font-rubik); } html[data-font="karla"] { --font-app:var(--font-karla); } html[data-font="dmsans"] { --font-app:var(--font-dmsans); } html[data-font="josefin"] { --font-app:var(--font-josefin); } html[data-font="raleway"] { --font-app:var(--font-raleway); } html[data-font="playfair"] { --font-app:var(--font-playfair); } html[data-font="merriweather"]{ --font-app:var(--font-merriweather); } html[data-font="lora"] { --font-app:var(--font-lora); } html[data-font="cormorant"] { --font-app:var(--font-cormorant); } html[data-font="caveat"] { --font-app:var(--font-caveat); } html[data-font="dancing"] { --font-app:var(--font-dancing); } html[data-font="pacifico"] { --font-app:var(--font-pacifico); } html[data-font="shadows"] { --font-app:var(--font-shadows); } /* ───────────────────────────── TOKENS ───────────────────────────── */ :root{ /* light — crisp BLACK & WHITE: pure-white puffy cards on a soft light canvas */ --bg:#e7e9ee; --bg-2:#e0e3ea; --surface:#ffffff; --surface-2:#f1f3f7; --surface-3:#e4e7ee; --surface-sunk:#eceef4; --line:rgba(0,0,0,.09); --dot:rgba(0,0,0,.05); --amb-1:rgba(29,111,224,.06); --amb-2:rgba(29,111,224,.035); /* whisper-faint blue ambient */ --text:#000000; --text-2:#23282e; --muted:#5d646d; /* ONE blue. --primary-2 is deliberately the SAME value as --primary: the accent is a flat colour everywhere, never a gradient. The alias only survives so the two decorative pulse outlines below keep resolving. */ --primary:#1d6fe0; --primary-hover:#1558b8; --primary-2:#1d6fe0; --primary-ink:#ffffff; --primary-soft:rgba(29,111,224,.13); --primary-softer:rgba(29,111,224,.07); --accent:#1d6fe0; --accent-soft:rgba(29,111,224,.14); /* accent folds into the blue */ --gold:#f6a821; --success:#16a34a; --success-soft:rgba(22,163,74,.14); --warning:#f59e0b; --warning-soft:rgba(245,158,11,.15); --danger:#e23b54; --danger-soft:rgba(226,59,84,.13); --glass:rgba(255,255,255,.8); --glass-line:rgba(255,255,255,.75); /* radii — clay is generous + chunky (bumped for a puffier feel) */ --r-xs:12px; --r-sm:16px; --r-md:22px; --r-lg:28px; --r-xl:34px; --r-2xl:44px; --r-full:999px; /* CLAY shadows — PUFFY/inflated: wide soft outer drop + bright inner top-light + inner BOTTOM shadow (the pillow effect that makes surfaces look inflated). */ --sh-1:0 4px 11px rgba(20,24,31,.07), inset 0 2px 3px rgba(255,255,255,.95), inset 0 -4px 9px rgba(20,24,31,.05); --sh-2:0 10px 26px rgba(20,24,31,.10), 0 3px 8px rgba(20,24,31,.05), inset 0 3px 4px rgba(255,255,255,1), inset 0 -7px 13px rgba(20,24,31,.06); --sh-3:0 22px 48px rgba(20,24,31,.14), 0 8px 16px rgba(20,24,31,.07), inset 0 3px 4px rgba(255,255,255,1), inset 0 -8px 15px rgba(20,24,31,.06); --sh-4:0 36px 78px rgba(20,24,31,.20), 0 13px 30px rgba(20,24,31,.10), inset 0 3px 4px rgba(255,255,255,1), inset 0 -9px 17px rgba(20,24,31,.06); --sunk:inset 0 3px 9px rgba(20,24,31,.13), inset 0 1px 3px rgba(20,24,31,.08); --glow:0 10px 24px rgba(20,24,31,.13), inset 0 2px 3px rgba(255,255,255,.45); /* neutral, no coloured halo */ --glow-sm:0 4px 12px rgba(20,24,31,.11); /* type */ --t-xs:12px; --t-sm:13.5px; --t-base:15px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:27px; --t-3xl:33px; --t-4xl:42px; --maxw:620px; --ease:.2s cubic-bezier(.34,1.2,.4,1); /* gentle clay overshoot */ --ease-1:.18s cubic-bezier(.4,0,.2,1); --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --nav-h:52px; } /* DARK — a layered NEUTRAL dark, not true black. Claymorphism needs a canvas that sits above pure #000: the puff comes from a lit top edge and a shadowed bottom edge, and on #000 neither has anywhere to go, so every surface flattens into the background and the whole app reads dead. Each step here is a real, visible tone apart (canvas → card → raised → sunk) so the depth survives, and a whisper of blue in the greys keeps it from looking like washed-out charcoal. */ [data-theme=dark]{ --bg:#0c0e13; --bg-2:#090b0f; --surface:#161a22; --surface-2:#1e232d; --surface-3:#272d39; --surface-sunk:#0e1116; --line:rgba(255,255,255,.10); --dot:rgba(255,255,255,.05); --amb-1:rgba(61,132,255,.10); --amb-2:rgba(61,132,255,.05); /* faint blue ambient, so the canvas isn't inert */ --text:#f3f6fb; --text-2:#c4ccd9; --muted:#8b95a6; --primary:#3d84ff; --primary-hover:#5b98ff; --primary-2:#3d84ff; --primary-ink:#ffffff; --primary-soft:rgba(61,132,255,.20); --primary-softer:rgba(61,132,255,.10); --accent:#3d84ff; --accent-soft:rgba(61,132,255,.20); --danger:#ff5f78; --danger-soft:rgba(255,95,120,.18); --success:#33d68d; --success-soft:rgba(51,214,141,.16); --warning:#fbbf3c; --warning-soft:rgba(251,191,60,.18); --gold:#fbbf3c; --glass:rgba(14,17,22,.84); --glass-line:rgba(255,255,255,.10); /* dark clay: real outer drop (it registers now that the canvas isn't #000) + a brighter inner top-light and inner bottom shade for the pillow effect. */ --sh-1:0 3px 9px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.07), inset 0 -3px 7px rgba(0,0,0,.35); --sh-2:0 10px 26px rgba(0,0,0,.52), 0 3px 8px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.09), inset 0 -5px 11px rgba(0,0,0,.38); --sh-3:0 20px 44px rgba(0,0,0,.58), 0 7px 16px rgba(0,0,0,.38), inset 0 1px 1px rgba(255,255,255,.10), inset 0 -6px 13px rgba(0,0,0,.40); --sh-4:0 34px 72px rgba(0,0,0,.66), 0 12px 28px rgba(0,0,0,.44), inset 0 1px 1px rgba(255,255,255,.12), inset 0 -7px 15px rgba(0,0,0,.40); --sunk:inset 0 3px 9px rgba(0,0,0,.60), inset 0 1px 3px rgba(0,0,0,.45); --glow:0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(61,132,255,.22), inset 0 1px 1px rgba(255,255,255,.16); --glow-sm:0 5px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(61,132,255,.18); } /* ───────────────────────────── RESET ───────────────────────────── */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* App background (a personal wallpaper photo, set via the menu's "App background" picker — App.applyBackground sets --app-bg-image on ). It's the BOTTOM layer of the body's background stack, shown at FULL fidelity (no tint/scrim — a wash over the photo just muddies it, and almost every surface in the app is already an opaque clay card, so legibility never actually depended on one). The dot texture + ambient glow still sit on top, but both are barely-there (very low alpha) so they don't visibly discolour the photo either. `cover`+`center`+`fixed` fits any screen (mobile first) without tiling or distortion. Falls back to `none` (fully transparent) when no wallpaper is set — zero visual change. */ body{margin:0;font-family:var(--font-app);color:var(--text); font-size:var(--t-base);line-height:1.5;overflow-x:hidden;min-height:100dvh;letter-spacing:-.005em; background-color:var(--bg); background-image: radial-gradient(115% 60% at 50% -12%, var(--amb-1), transparent 60%), radial-gradient(80% 50% at 100% 0%, var(--amb-2), transparent 55%), radial-gradient(var(--dot) 1.1px, transparent 1.2px), var(--app-bg-image, none); background-repeat:no-repeat,no-repeat,repeat,no-repeat; background-size:auto,auto,24px 24px,cover; background-position:center top,right top,-12px -12px,center; background-attachment:fixed,fixed,fixed,fixed; padding-bottom:calc(var(--nav-h) + 26px + var(--safe-bottom)); transition:background-color .3s ease,color .3s ease;} h1,h2,h3,h4{line-height:1.18;margin:0 0 .45em;letter-spacing:-.02em;font-weight:700} p{margin:0 0 .8em} a{color:var(--primary);text-decoration:none} img,video{max-width:100%;display:block} button{font-family:inherit;color:inherit} input,textarea,select{font-family:inherit} ::selection{background:var(--primary-soft)} ::-webkit-scrollbar{width:0;height:0} *{scrollbar-width:none} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} :focus-visible{outline:2.5px solid var(--primary);outline-offset:2px} /* ───────────────────────────── LAYOUT ───────────────────────────── */ .app{max-width:var(--maxw);margin:0 auto;padding:0 15px} .sectitle{font-size:var(--t-xl);font-weight:700;margin:18px 0 12px} .row-between{display:flex;align-items:center;justify-content:space-between;gap:10px} .muted{color:var(--muted)} .hint{color:var(--muted);font-size:var(--t-xs);margin:6px 0 0;line-height:1.5} /* topbar — transparent clay header. Stays see-through (never a box); the icons + avatar each ride their own clay chip so they read clearly over the canvas. */ .topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px; padding:calc(11px + var(--safe-top)) 15px 11px;max-width:var(--maxw);margin:0 auto; background:none} .topbar__logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:var(--t-lg);color:var(--text);letter-spacing:-.03em} .topbar__spacer{flex:1} /* brand wordmark — "e.archive", the "e." in green. No icon, no bolt. */ .brand{font-weight:800;letter-spacing:-.04em;color:var(--text);white-space:nowrap} .brand b{color:var(--primary);font-weight:800} /* ── raised clay logo: the wordmark sits on a layered claymorphism chip, with a soft emerald gradient on the "e." (topbar + side rail only) ── */ .topbar__logo .brand, .siderail__brand .brand{ display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--r-full); background:linear-gradient(150deg,var(--surface),var(--surface-2)); box-shadow:var(--sh-2);transition:var(--ease)} .topbar__logo .brand:hover, .siderail__brand .brand:hover{box-shadow:var(--sh-3);transform:translateY(-1px)} .topbar__logo .brand:active, .siderail__brand .brand:active{transform:scale(.97)} .topbar__logo .brand b, .siderail__brand .brand b{ color:var(--primary) } /* legacy mark kept for pages not yet rebuilt (clean square, no bolt) */ .logo-dot{width:28px;height:28px;border-radius:9px;flex:0 0 auto; background:var(--primary); display:grid;place-items:center;color:var(--primary-ink);font-size:13px;font-weight:800} .logo-dot::after{content:'e'} /* icon button — puffy clay circle */ .icon-btn{position:relative;width:44px;height:44px;border-radius:var(--r-full);border:none;background:var(--surface); color:var(--text);display:grid;place-items:center;cursor:pointer;font-size:16px;box-shadow:var(--sh-1);transition:var(--ease)} .icon-btn:hover{background:var(--surface-2)} .icon-btn:active{transform:scale(.88)} .icon-btn .dot{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px; background:var(--accent);color:#fff;border-radius:var(--r-full);font-size:9px;font-weight:800;display:grid;place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.25);border:2px solid var(--bg)} /* AI ASSISTANT — the glowing wand in the header (still a squishy clay chip, just alive with a breathing emerald glow so it reads as "ask me anything"). */ .icon-btn--ai{color:var(--primary);animation:aiGlow 2.6s ease-in-out infinite} .icon-btn--ai i{position:relative;z-index:1} .icon-btn--ai::after{content:'';position:absolute;inset:-3px;border-radius:inherit; background:radial-gradient(circle at 50% 50%,var(--primary-soft),transparent 70%); opacity:.7;z-index:0;pointer-events:none;animation:aiPulse 2.6s ease-in-out infinite} @keyframes aiGlow{0%,100%{box-shadow:var(--sh-1),0 0 0 0 var(--primary-soft)} 50%{box-shadow:var(--sh-1),0 0 16px 2px var(--primary-soft)}} @keyframes aiPulse{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.12);opacity:.85}} @media(prefers-reduced-motion:reduce){.icon-btn--ai,.icon-btn--ai::after{animation:none}} /* assistant modal — a small chat surface with a live mic */ .ai{display:flex;flex-direction:column;height:min(72dvh,560px);max-height:72dvh} .ai__head{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--line,rgba(128,128,128,.18))} .ai__orb{width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-full);display:grid;place-items:center; background:var(--primary-soft);color:var(--primary);font-size:17px} .ai__head h3{margin:0;font-size:var(--t-md)} .ai__head p{margin:1px 0 0;font-size:11px;color:var(--muted)} .ai__log{flex:1;overflow-y:auto;padding:14px 2px;display:flex;flex-direction:column;gap:11px} .ai-msg{max-width:84%;padding:10px 13px;border-radius:16px;font-size:var(--t-sm);line-height:1.5;white-space:pre-wrap;word-wrap:break-word} .ai-msg--bot{align-self:flex-start;background:var(--surface-2);color:var(--text);border-bottom-left-radius:5px} .ai-msg--me{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:5px} .ai-msg--typing{display:inline-flex;gap:4px;align-items:center} .ai-msg--typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:aiDot 1s infinite} .ai-msg--typing i:nth-child(2){animation-delay:.15s}.ai-msg--typing i:nth-child(3){animation-delay:.3s} @keyframes aiDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .ai__hint{align-self:center;font-size:11px;color:var(--muted);text-align:center;padding:2px 8px} .ai__bar{display:flex;align-items:flex-end;gap:9px;padding-top:11px;border-top:1px solid var(--line,rgba(128,128,128,.18))} .ai__ta{flex:1;border:none;background:var(--surface-2);border-radius:var(--r-lg);resize:none;outline:none; color:var(--text);font:inherit;font-size:var(--t-sm);line-height:1.45;padding:11px 14px;max-height:110px} .ai__mic{flex:0 0 auto;width:46px;height:46px;border:none;border-radius:var(--r-full);cursor:pointer; display:grid;place-items:center;font-size:17px;background:var(--surface-2);color:var(--text);transition:var(--ease)} .ai__mic:active{transform:scale(.9)} .ai__mic--live{background:var(--primary);color:#fff;animation:aiMic 1.4s ease-in-out infinite} @keyframes aiMic{0%,100%{box-shadow:0 0 0 0 var(--primary-soft)}50%{box-shadow:0 0 0 8px transparent}} .ai__send{flex:0 0 auto;width:46px;height:46px;border:none;border-radius:var(--r-full);cursor:pointer; display:grid;place-items:center;font-size:16px;background:var(--primary);color:#fff;transition:var(--ease)} .ai__send:active{transform:scale(.9)}.ai__send:disabled{opacity:.45;cursor:default} /* "Show me on screen" CTA appended to an answer — launches the live walkthrough */ .ai__showme{align-self:flex-start;margin-top:-3px} /* ── Archie SPOTLIGHT / guided walkthrough (item 8 — AI guide replaces the tour). A dim veil (via the ring's huge box-shadow) with the real target punched out, a green ring + soft pulse, and an interactive coach bubble. The overlay itself is click-through so the highlighted control stays fully tappable. ── */ .spot{position:fixed;inset:0;z-index:250;pointer-events:none} .spot__ring{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.55); outline:3px solid var(--primary);outline-offset:2px;transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease;pointer-events:none} .spot__pulse{position:absolute;border-radius:16px;outline:3px solid var(--primary-2);opacity:.55; animation:spotPulse 1.6s ease-out infinite;pointer-events:none} @keyframes spotPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.14);opacity:0}} .spot__coach{position:absolute;pointer-events:auto;max-width:300px;width:calc(100vw - 32px); background:var(--surface);color:var(--text);border-radius:var(--r-lg);box-shadow:var(--sh-4);padding:15px 16px} .spot__coach h4{margin:0 0 6px;font-size:var(--t-md);display:flex;align-items:center;gap:8px} .spot__coach h4 i{color:var(--primary)} .spot__txt{margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--text)} .spot__row{display:flex;align-items:center;gap:8px;margin-top:14px} .spot__step{font-size:11px;color:var(--muted);margin-right:auto} .spot__btn{border:none;border-radius:var(--r-full);cursor:pointer;font:inherit;font-weight:700;font-size:var(--t-sm);padding:9px 16px;transition:var(--ease)} .spot__btn--next{background:var(--primary);color:var(--primary-ink)} .spot__btn--skip{background:var(--surface-2);color:var(--muted)} .spot__btn:active{transform:scale(.93)} @media(prefers-reduced-motion:reduce){.spot__pulse{animation:none;opacity:.4}.spot__ring{transition:none}} /* surface tabs (Archive | Memes | Games | Apps) */ .surfaces{display:flex;gap:9px;max-width:var(--maxw);margin:0 auto;padding:6px 15px 6px;overflow-x:auto} .surface-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-full); background:var(--surface);color:var(--muted);font-weight:700;font-size:var(--t-sm);box-shadow:var(--sh-1);transition:var(--ease)} .surface-tab:active{transform:scale(.95)} .surface-tab--active{background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow-sm)} /* segmented tabs (sunken track + raised active) */ .tabs{display:flex;gap:5px;background:var(--surface-sunk);border-radius:var(--r-full);padding:5px;margin:14px 0;box-shadow:var(--sunk)} .tab{flex:1;padding:10px;border:none;background:none;color:var(--muted);font-weight:700;border-radius:var(--r-full);cursor:pointer;font-size:var(--t-sm);transition:var(--ease-1)} .tab--active{background:var(--surface);color:var(--text);box-shadow:var(--sh-2)} /* ───────────────────────────── CARDS ───────────────────────────── */ .card{background:var(--surface);border:none;border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-2)} .card--glow{background:var(--primary-softer)} /* ─────────────────────── POST / FEED ITEM ─────────────────────── */ .post{background:var(--surface);border:none;border-radius:var(--r-lg);padding:17px 18px;margin-bottom:14px; box-shadow:var(--sh-2);transition:box-shadow .2s,transform .2s} .post:hover{box-shadow:var(--sh-3)} /* Brief "just posted" flash so the author sees their new post land at the top of the feed. */ .post--justposted{animation:postFlash 2.2s ease-out} @keyframes postFlash{0%{box-shadow:0 0 0 2px var(--primary) inset,var(--sh-3)}70%{box-shadow:0 0 0 2px var(--primary) inset,var(--sh-3)}100%{box-shadow:var(--sh-2)}} @media (prefers-reduced-motion:reduce){.post--justposted{animation:none}} .post__head{display:flex;align-items:center;gap:11px;margin-bottom:10px} .post__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0} /* Shared "long name" guard: a flex item that shrinks and ellipsizes instead of wrapping or bleeding past its box. Any name/handle/community label sitting next to a badge or icon uses this on the TEXT SPAN ONLY, keeping badges un-clipped. */ .name-trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .post__name{font-weight:700;display:flex;align-items:center;gap:5px;min-width:0} .post__handle{color:var(--muted);font-size:var(--t-xs)} .post__from{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-weight:700;cursor:pointer;max-width:150px;vertical-align:bottom} .post__from i{font-size:.85em;flex-shrink:0} .post__from:hover{text-decoration:underline} .post__approved{display:inline-flex;align-items:center;gap:4px;color:var(--success);font-weight:700} .post__approved i{font-size:.9em} .post__more{margin-left:auto} .post__approve-btn{color:var(--muted)} .post__approve-btn--on{color:var(--success)} /* Inline Follow pill on a post card — sits between the author meta and the ⋯ menu. Clay, no borders (depth via shadows): green gradient when Follow, plain clay surface when Following. */ .post__follow{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:800; font-size:var(--t-xs);line-height:1;padding:8px 15px;border:0;border-radius:var(--r-full);flex:none; -webkit-appearance:none;appearance:none;cursor:pointer;white-space:nowrap; color:var(--primary-ink);background:var(--primary); box-shadow:var(--glow-sm);transition:var(--ease)} .post__follow:active{transform:scale(.93)} .post__follow.is-following{background:var(--surface);color:var(--muted);box-shadow:var(--sh-1)} .post__follow + .post__more{margin-left:8px} .post__body{white-space:pre-wrap;word-break:break-word;line-height:1.55} /* Reshare: a quoted card of the ORIGINAL post nested inside the reshare. Depth via inset shadow (no border), same clay language, one step sunk from the host card. */ .post__reshare{margin-top:11px;padding:12px 14px;border-radius:var(--r-md); background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)} .post__reshare-head{display:flex;align-items:center;gap:8px;min-width:0} .post__reshare-name{font-weight:700;font-size:var(--t-sm);display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%} .post__reshare-handle{color:var(--muted);font-size:var(--t-xs);white-space:nowrap} .post__reshare-body{margin-top:6px;white-space:pre-wrap;word-break:break-word;line-height:1.5;font-size:var(--t-sm)} .reshare__vid{margin-top:8px;display:inline-flex;align-items:center;gap:7px;font-size:var(--t-xs); font-weight:700;color:var(--muted);background:var(--surface-sunk);padding:6px 11px;border-radius:var(--r-full)} /* Accent (app-colour) picker grid — item 25 */ .accent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:12px} .accent-cell{width:100%;aspect-ratio:1;border:none;border-radius:var(--r-md);cursor:pointer; box-shadow:var(--sh-2);transition:transform var(--ease)} .accent-cell:active{transform:scale(.9)} .accent-cell--on{box-shadow:var(--sh-2),inset 0 0 0 3px #fff,inset 0 0 0 6px rgba(0,0,0,.35)} /* Reading-font picker (item 31) */ .font-list{display:flex;flex-direction:column;gap:10px} .font-opt{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%; padding:12px 14px;border-radius:var(--r-md);background:var(--surface-sunk);color:var(--text); box-shadow:var(--sh-1);cursor:pointer;transition:var(--ease)} .font-opt:hover{transform:translateY(-1px);box-shadow:var(--sh-2)} .font-opt:active{transform:translateY(1px)} .font-opt--on{box-shadow:var(--sh-2),inset 0 0 0 2px var(--primary)} .font-opt__name{font-size:var(--t-lg);font-weight:800} .font-opt__desc{font-size:var(--t-xs);color:var(--muted)} .font-opt__sample{font-size:var(--t-md);color:var(--text-2);margin-top:4px} /* App-background picker preview — same sunk clay well as .edit-cover */ .bg-preview{position:relative;width:100%;height:140px;border-radius:var(--r-md);overflow:hidden; background:var(--surface-sunk);background-size:cover;background-position:center;box-shadow:var(--sunk); display:grid;place-items:center;color:var(--muted);font-size:26px} /* Mandatory install wall — item 10 */ #ep-wall{position:fixed;inset:0;z-index:9000;background:var(--bg);display:flex;align-items:center; justify-content:center;padding:22px;overflow:auto} #ep-wall .wall__card{max-width:440px;width:100%;background:var(--surface);border-radius:var(--r-2xl); padding:26px 22px;box-shadow:var(--sh-3);text-align:center} #ep-wall .wall__brand{font-size:var(--t-lg);margin-bottom:14px} #ep-wall .wall__h{font-size:var(--t-2xl);font-weight:800;margin:0 0 8px} #ep-wall .wall__p{color:var(--muted);margin:0 0 16px;line-height:1.5} #ep-wall .wall__benefits{list-style:none;margin:0 0 18px;padding:0;text-align:left;display:flex;flex-direction:column;gap:9px} #ep-wall .wall__benefits li{display:flex;align-items:center;gap:11px;font-weight:600;font-size:var(--t-sm)} #ep-wall .wall__benefits i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:var(--r-md); background:var(--primary-soft);color:var(--primary);box-shadow:var(--sh-1)} #ep-wall .wall__steps{display:flex;flex-direction:column;gap:10px;margin-bottom:14px} #ep-wall .wall__step{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface-2); border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--sh-1)} #ep-wall .wall__step.is-done{opacity:.75} #ep-wall .wall__num{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:var(--r-full); background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:14px} #ep-wall .wall__stxt{flex:1;min-width:0} #ep-wall .wall__stxt b{display:block;font-size:var(--t-sm)} #ep-wall .wall__stxt span{color:var(--muted);font-size:var(--t-xs)} #ep-wall .wall__ios{background:var(--primary-soft);color:var(--primary);border-radius:var(--r-md);padding:11px 13px; font-size:var(--t-sm);font-weight:600;margin-bottom:14px} #ep-wall .wall__prog{height:8px;background:var(--surface-sunk);border-radius:var(--r-full);overflow:hidden;margin:6px 0 12px} #ep-wall .wall__prog>span{display:block;height:100%;background:var(--primary); border-radius:var(--r-full);transition:width .4s var(--ease)} #ep-wall .wall__foot{color:var(--muted);font-size:var(--t-xs);margin:0} #ep-wall .wall__big-ic{width:64px;height:64px;margin:0 auto 12px;display:grid;place-items:center; font-size:28px;border-radius:var(--r-lg);background:var(--primary-soft);color:var(--primary);box-shadow:var(--sh-1)} #ep-wall .wall__prog--anim{position:relative} #ep-wall .wall__prog--anim>span{position:absolute;left:0;width:40%;animation:wallprog 1.1s var(--ease-1) infinite} @keyframes wallprog{0%{left:-40%;width:40%}50%{width:55%}100%{left:100%;width:40%}} /* External links in body text (item 30) — short, secure, tidy */ .ext-link{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-weight:600; text-decoration:none;background:var(--primary-soft);padding:1px 8px;border-radius:var(--r-full); max-width:100%;vertical-align:baseline} .ext-link i{font-size:.85em} .ext-link:hover{text-decoration:underline} /* Rich link preview card (item 30) — clay, no border, secure. Image is optional. */ .lnk-prev-slot:empty{display:none} .lnk-prev{display:flex;flex-direction:column;margin-top:10px;border-radius:var(--r-lg);overflow:hidden; background:var(--surface-2);box-shadow:var(--sh-2);text-decoration:none;color:inherit;max-width:520px; transition:box-shadow .2s,transform .2s} .lnk-prev:hover{box-shadow:var(--sh-3)} .lnk-prev:active{transform:scale(.994)} .lnk-prev__img{width:100%;aspect-ratio:1.91/1;background:var(--surface-sunk);overflow:hidden;box-shadow:var(--sunk)} .lnk-prev__img img{width:100%;height:100%;object-fit:cover;display:block} .lnk-prev__body{display:flex;flex-direction:column;gap:3px;padding:11px 13px} .lnk-prev__site{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:700; color:var(--primary);text-transform:lowercase;letter-spacing:.01em} .lnk-prev__title{font-size:var(--t-sm);font-weight:800;color:var(--text);line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lnk-prev__desc{font-size:var(--t-xs);color:var(--muted);line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Discussion composer attachment preview (item 30, mirrors the comment sheet). */ .disc__attach{margin-bottom:8px} /* Reel comment sheet reuses .cmt-sheet; give the board a touch more breathing room. */ .reel-cmt-sheet .disc__list{max-height:52vh;overflow-y:auto} /* Media reserves its space BEFORE the image loads (fixed 4/5 tile, IG-style) so a loading image never shoves the rest of the feed down — zero layout shift. The image is already cover-cropped, so a fixed ratio costs nothing it didn't already crop. Ads keep their natural ratio (creatives vary) — see .post--ad below. */ .post__media{margin-top:11px;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-2); aspect-ratio:4/5;background:var(--surface-2);position:relative;transition:box-shadow .2s,transform .2s} .post__media:hover{box-shadow:var(--sh-3);transform:translateY(-1px)} .post__media img,.post__media video{width:100%;height:100%;object-fit:cover;display:block} /* sponsored card — blends into any feed/grid as a normal post, with a subtle tint */ .post--ad{background:var(--primary-softer)} /* the media on an ad is an (anchor) — force block + clip + round so the image has the same soft corners as the rest of the card (anchors won't clip otherwise) */ .post--ad .post__media{display:block;margin-top:11px;border-radius:var(--r-md);overflow:hidden;aspect-ratio:auto;box-shadow:var(--sh-2)} .post--ad .post__media img{display:block;width:100%;height:auto;object-fit:contain;border-radius:var(--r-md)} .ad-avatar{width:42px;height:42px;flex:0 0 auto;border-radius:var(--r-full);display:grid;place-items:center; background:var(--primary);color:var(--primary-ink);font-size:15px;box-shadow:var(--sh-1)} /* CTA spans the full post width (same as the image) and is centred, with breathing room above */ .ad-cta{margin-top:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px} /* in a card grid (games/apps) a sponsored card spans the full row */ .grid>.post--ad{grid-column:1/-1;margin-bottom:0} /* custom in-feed video player (no native controls / no autoplay) */ .vplayer{position:relative;cursor:pointer;background:#000} /* fills the reserved 4/5 media box; contain (not cover) so video is never cropped. */ .vplayer video{display:block;width:100%;height:100%;object-fit:contain;background:#000} .vplayer__btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:var(--r-full); border:none;background:rgba(0,0,0,.5);color:#fff;font-size:22px;padding-left:4px;display:grid;place-items:center;cursor:pointer; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .2s,transform .15s} .vplayer__btn:active{transform:translate(-50%,-50%) scale(.9)} .vplayer--playing .vplayer__btn{opacity:0;pointer-events:none} .vplayer__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.22)} .vplayer__bar>i{display:block;height:100%;width:0;background:var(--primary);transition:width .15s linear} /* action bar shared by feed / post / community — icon-only (no text labels), counts shown as a compact chip next to the icon (e.g. 12.3k). */ .actbar{display:flex;justify-content:space-between;align-items:center;margin-top:20px} .actbar__grp{display:flex;align-items:center;gap:2px} .act{display:inline-flex;align-items:center;gap:6px;min-width:40px;height:40px;padding:0 11px;border:none;background:none; color:var(--muted);border-radius:var(--r-full);cursor:pointer;font-size:var(--t-sm);font-weight:700;transition:var(--ease-1)} .act:hover{color:var(--text)} .act:active{transform:scale(.88)} .act--grow{flex:1} .act--liked{color:var(--accent)} .act--saved{color:var(--primary)} .act .ic{font-size:18px;line-height:1} .act__n{font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums;line-height:1} /* ───────────────────── CUSTOM EMOJI (Noto images) ───────────────────── */ /* inline emoji in text/labels — sized to the line, never a tofu box */ .emo{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.22em;margin:0 .02em;object-fit:contain} .emo--18{width:19px;height:19px;vertical-align:middle;margin:0} .emo--28{width:30px;height:30px;vertical-align:middle;margin:0} @keyframes emo-pop{0%{transform:scale(.4);opacity:.3}60%{transform:scale(1.35)}100%{transform:scale(1)}} .emo--burst{animation:emo-pop .45s cubic-bezier(.34,1.5,.4,1)} /* ═══════════════════════════════════════════════════════════════════════════ NEW POST ACTION BUTTONS - Complete clay/puffy redesign for ALL action buttons (react, comment, share, bookmark) - All use same new design system ═══════════════════════════════════════════════════════════════════════════ */ /* Container for all action buttons */ .post-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 6px; } .post-actions__left { display: flex; align-items: center; gap: 6px; } /* Individual action button - clay puffy circle design */ .post-action-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: none; background: none; cursor: pointer; transition: transform 0.15s cubic-bezier(0.34, 1.2, 0.4, 1); } .post-action-btn:hover { transform: translateY(-1px); } .post-action-btn:active { transform: scale(0.92); } /* The puffy clay circle that contains the icon. Depth comes from the shared --sh-* tokens so it stays correct in BOTH themes — the hand-rolled rgba shadows this replaced were tuned for dark only and went invisible on light. */ .post-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); box-shadow: var(--sh-1); transition: all 0.2s cubic-bezier(0.34, 1.2, 0.4, 1); } .post-action-btn:hover .post-action-icon { background: var(--surface-3); box-shadow: var(--sh-2); } /* Icon inside the circle */ .post-action-icon i { font-size: 16px; color: var(--muted); transition: color 0.2s ease; } /* Emoji inside the circle (for reactions) */ .post-action-icon .post-action-emoji { width: 20px; height: 20px; object-fit: contain; } /* Active state — when the button is "on" (liked, bookmarked). */ .post-action-btn--active .post-action-icon { background: var(--primary-soft); box-shadow: var(--sh-1), 0 0 0 1.5px var(--primary); } .post-action-btn--active .post-action-icon i { color: var(--primary); } /* Count badge next to icon */ .post-action-count { font-size: var(--t-xs); font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; line-height: 1; padding: 0 2px; } .post-action-btn--active .post-action-count { color: var(--primary); } /* Special styling for bookmark button on the right */ .post-action-btn--bookmark .post-action-icon i { font-size: 15px; } /* Reaction picker popup - updated for new design */ .post-reaction-picker { position: fixed; display: flex; gap: 6px; padding: 10px 12px; background: var(--surface); border-radius: var(--r-full); box-shadow: var(--sh-4); z-index: 9999; opacity: 0; transition: all 0.22s cubic-bezier(0.34, 1.3, 0.4, 1); pointer-events: none; white-space: nowrap; /* Prevent wrapping */ max-width: calc(100vw - 20px); /* Don't exceed viewport */ transform: scale(0.8); } .post-reaction-picker--visible { opacity: 1; pointer-events: auto; } /* Mobile adjustments */ @media (max-width: 480px) { .post-reaction-picker { gap: 4px; padding: 8px 10px; bottom: calc(100% + 10px); } .post-reaction-picker button { width: 34px; height: 34px; } .post-reaction-picker .post-action-emoji { width: 26px; height: 26px; } } .post-reaction-picker button { background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%; line-height: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s cubic-bezier(0.34, 1.4, 0.4, 1); } .post-reaction-picker button:hover { transform: scale(1.3) translateY(-3px); } .post-reaction-picker button:active { transform: scale(1.1); } .post-reaction-picker .post-action-emoji { width: 30px; height: 30px; } /* ═══════════════════════════════════════════════════════════════════════════ END NEW POST ACTION BUTTONS ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────── OLD REACTIONS (keeping for backward compatibility) ───────────────────── */ .rxn{position:relative} .rxn__face{display:inline-flex;align-items:center;line-height:1} /* New reaction button design with always-visible circle */ .act-react { position: relative; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; padding: 6px; border-radius: var(--r-full); transition: var(--ease); } .act-react:hover { background: var(--surface-2); } .act-react__circle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-full); background: var(--surface-2); transition: var(--ease); } .act-react__circle i { font-size: 16px; color: var(--muted); } .act-react__circle .emo { width: 20px; height: 20px; } .act-react--active .act-react__circle { background: var(--primary-soft); } .act-react--active .act-react__circle i { color: var(--primary); } .rxn-pop{position:absolute;bottom:calc(100% + 10px);left:0;display:flex;gap:4px;padding:8px 11px; background:var(--surface);border-radius:var(--r-full);box-shadow:var(--sh-4);z-index:30; transform:scale(.7) translateY(8px);opacity:0;transform-origin:bottom left;transition:var(--ease)} .rxn-pop--in{transform:none;opacity:1} .rxn-pop button{background:none;border:none;line-height:0;cursor:pointer;padding:4px;border-radius:var(--r-full);transition:transform .14s cubic-bezier(.34,1.4,.4,1)} .rxn-pop button:hover{transform:scale(1.4) translateY(-4px)} .rxn__lbl{font-weight:700} .act--liked .rxn__lbl{color:var(--accent)} /* public reaction summary (stacked faces + total) — visible to everyone */ .rxn-sum-slot:empty{display:none} .rxn-sum-slot{margin:11px 0 2px} .rxn-sum{display:inline-flex;align-items:center;gap:7px;padding:3px 4px;border:none;background:none;cursor:pointer; color:var(--muted);font-weight:700;font-size:var(--t-sm);border-radius:var(--r-full);transition:var(--ease-1)} .rxn-sum:hover{background:var(--surface-2);color:var(--text)} .rxn-sum__faces{display:inline-flex;align-items:center} .rxn-sum__face{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--r-full); background:var(--surface);box-shadow:0 0 0 2px var(--bg);margin-left:-7px} .rxn-sum__face:first-child{margin-left:0} .rxn-sum__face .emo{width:16px;height:16px} .rxn-sum__count{line-height:1} /* "who reacted" sheet */ .rxn-tabs{display:flex;gap:7px;overflow-x:auto;padding:4px 0 12px;border-bottom:1px solid var(--line);margin-bottom:8px} .rxn-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:none;cursor:pointer; background:var(--surface-sunk);color:var(--muted);border-radius:var(--r-full);font-weight:700;font-size:var(--t-sm);box-shadow:var(--sunk)} .rxn-tab b{color:var(--text)} .rxn-tab--active{background:var(--primary);color:var(--primary-ink)} .rxn-tab--active b{color:var(--primary-ink)} .rxn-people{max-height:50vh;overflow-y:auto} .rxn-person{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:var(--r-md);color:inherit;text-decoration:none} .rxn-person:hover{background:var(--surface-2)} .rxn-person__meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .rxn-person__meta b{font-size:var(--t-sm);display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%} .rxn-person__emo{flex:0 0 auto} .emo--22{width:22px;height:22px;vertical-align:middle;margin:0} .emo--16{width:16px;height:16px;vertical-align:middle;margin:0} /* ── content reactions (item 5): compact react bar for comments/replies/stories ── */ .cr-bar{display:inline-flex;align-items:center;gap:9px;position:relative} .cr-react{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:2px 2px; color:var(--muted);font-weight:700;font-size:var(--t-xs);line-height:1;border-radius:var(--r-full);transition:var(--ease-1)} .cr-react .cr-face{width:16px;height:16px;vertical-align:middle} /* When the face is a FontAwesome (the "React" prompt), the width/height above only sizes the box — the glyph rides on font-size. Pin it so the icon actually fills the button instead of showing a faint, near-empty blob (most visible in the community chat, where the react button has a surface pill background). */ i.cr-face{font-size:15px;line-height:1;display:inline-grid;place-items:center;color:var(--muted)} .cr-react.is-on i.cr-face,.cr-react:hover i.cr-face{color:inherit} .cr-react:hover{color:var(--text)} .cr-react.is-on{color:var(--primary)} .cr-sum:empty{display:none} .cr-faces{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:2px 3px; color:var(--muted);font-weight:700;font-size:var(--t-xs);border-radius:var(--r-full);transition:var(--ease-1)} .cr-faces:hover{background:var(--surface-2);color:var(--text)} .cr-face-chip{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--r-full); background:var(--surface);box-shadow:0 0 0 2px var(--bg);margin-left:-6px} .cr-face-chip:first-child{margin-left:0} .cr-pop{transform-origin:bottom left} /* ───────────────────────── AVATAR + BADGES ───────────────────────── */ .avatar{border-radius:var(--r-full);object-fit:cover;background:var(--surface-2);flex:0 0 auto;box-shadow:var(--sh-1)} .avatar--24{width:24px;height:24px}.avatar--28{width:28px;height:28px}.avatar--32{width:32px;height:32px}.avatar--40{width:42px;height:42px} .avatar--56{width:58px;height:58px}.avatar--88{width:90px;height:90px;box-shadow:var(--sh-3)} .badge-icon{font-size:12px;position:relative;cursor:help;-webkit-tap-highlight-color:transparent;flex-shrink:0} .badge-icon--admin,.badge-icon--mod,.badge-icon--plus{color:var(--primary)} .badge-icon--creator{color:var(--gold)} /* Show badge tooltip on hover/focus for better accessibility */ .badge-icon:hover::after,.badge-icon:focus::after,.badge-icon:active::after{ content:attr(title); position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); background:var(--surface); color:var(--text); padding:4px 8px; border-radius:6px; font-size:11px; white-space:nowrap; box-shadow:var(--sh-3); z-index:100; pointer-events:none; font-family:var(--font); font-weight:600; } /* Mobile: show on touch */ @media (hover: none) and (pointer: coarse) { .badge-icon:active::after{ display:block; } } /* Upload progress bar — clay track + green fill, used by every media upload */ .upbar{position:relative;height:26px;border-radius:var(--r-full);background:var(--surface-sunk); box-shadow:var(--sunk);overflow:hidden;margin:12px 0} .upbar__fill{height:100%;width:0;border-radius:var(--r-full); background:var(--primary);transition:width .2s linear} .upbar__pct{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--t-xs); font-weight:800;color:var(--text);letter-spacing:.01em} @media (prefers-reduced-motion: reduce){ .upbar__fill{transition:none} } /* Badge explainer modal — one clay row per badge, tapped one highlighted */ .badge-guide{display:flex;flex-direction:column;gap:10px} .badge-guide__row{display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-lg); background:var(--surface-sunk);box-shadow:var(--sunk)} .badge-guide__row--on{background:var(--primary-softer);box-shadow:var(--sh-1),inset 0 0 0 2px var(--primary)} .badge-guide__ic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md); background:var(--surface);box-shadow:var(--sh-1);font-size:17px} .badge-guide__txt{min-width:0} .badge-guide__txt b{display:block;font-size:var(--t-md);margin-bottom:2px} .badge-guide__txt span{color:var(--text-2);font-size:var(--t-sm);line-height:1.45} /* ───────────────────────────── BUTTONS ───────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 22px;border-radius:var(--r-full); border:none;background:var(--surface);color:var(--text);font-weight:700;font-size:var(--t-sm);min-height:46px; cursor:pointer;box-shadow:var(--sh-1);transition:var(--ease);white-space:nowrap} .btn:hover{background:var(--surface-2)} .btn:active{transform:scale(.95)} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none} /* NOTE: variant :hover rules must re-assert their own background — `.btn:hover` (0,2,0) outranks the plain `.btn--primary` (0,1,0), so without this a hovered primary button would fall back to --surface-2 (white-on-white / grey). */ .btn--primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow)} .btn--primary:hover{background:var(--primary-hover);color:var(--primary-ink);filter:brightness(1.04)} .btn--ghost{background:var(--surface-2);color:var(--text);box-shadow:none} .btn--ghost:hover{background:var(--surface-3);color:var(--text)} .btn--danger{background:var(--danger);color:#fff;box-shadow:var(--sh-2)} .btn--danger:hover{background:var(--danger);color:#fff;filter:brightness(1.06)} .btn--full{width:100%} .btn--sm{padding:9px 16px;font-size:var(--t-xs);min-height:38px} .btn--lg{padding:15px 26px;font-size:var(--t-md);min-height:54px} .btn-link{background:none;border:none;color:var(--primary);cursor:pointer;font-size:var(--t-sm);font-weight:700;padding:0;box-shadow:none;min-height:0} .btn-link:hover{text-decoration:underline} /* ───────────────────────────── FORMS ───────────────────────────── */ .field{display:block;margin-bottom:15px} .field>span{display:block;font-size:var(--t-sm);font-weight:700;margin-bottom:7px;color:var(--text)} .input,textarea.input{width:100%;padding:13px 16px;border:none;border-radius:var(--r-md);min-height:48px; background:var(--surface-sunk);color:var(--text);font-size:var(--t-base);box-shadow:var(--sunk);transition:box-shadow .16s} .input::placeholder{color:var(--muted)} .input:focus{outline:none;box-shadow:var(--sunk),0 0 0 3px var(--primary-soft)} .input--invalid{box-shadow:var(--sunk),0 0 0 2px var(--danger)} textarea.input{min-height:auto;resize:vertical;line-height:1.55} /* ── Custom dropdown (App.enhanceSelects) — replaces native stays in the DOM (invisible) as the single source of truth for value + change events, so page code keeps working unchanged. The option list is PORTALLED to at `position:fixed`: a dropdown opened inside a modal would otherwise be clipped/scrolled by .modal__panel's `overflow:auto`, which is exactly where most of the app's pickers live. ── */ .xsel{position:relative;display:block} .xsel select.xsel__native{position:absolute;left:0;top:0;width:100%;height:100%; opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none} .xsel__trigger{display:flex;align-items:center;gap:11px;width:100%;padding:13px 16px;min-height:48px; border:none;border-radius:var(--r-md);background:var(--surface-sunk);color:var(--text); font:inherit;font-size:var(--t-base);text-align:left;-webkit-appearance:none;appearance:none; cursor:pointer;box-shadow:var(--sunk);transition:box-shadow .16s} .xsel__trigger:hover{box-shadow:var(--sunk),0 0 0 3px var(--primary-softer)} .xsel__trigger:focus{outline:none} .xsel__trigger:focus-visible,.xsel--open>.xsel__trigger{box-shadow:var(--sunk),0 0 0 3px var(--primary-soft)} .xsel__trigger--empty .xsel__label{color:var(--muted);font-weight:400} .xsel__trigger--disabled{opacity:.55;cursor:not-allowed} .xsel__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700} .xsel__chev{flex:0 0 auto;font-size:11px;color:var(--muted);transition:transform var(--ease)} .xsel--open>.xsel__trigger .xsel__chev{transform:rotate(180deg)} /* portalled list — z-index clears .modal (150) and .spinner-overlay (300) */ .xsel__list{position:fixed;z-index:500;max-height:min(300px,46vh);overflow-y:auto;overscroll-behavior:contain; background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:7px; display:flex;flex-direction:column;gap:3px;transform-origin:top center; animation:xselIn .17s cubic-bezier(.34,1.1,.4,1)} .xsel__list--up{transform-origin:bottom center} @keyframes xselIn{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}} .xsel__opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 13px;border:none; border-radius:var(--r-sm);background:transparent;color:var(--text);font:inherit;font-size:var(--t-sm); font-weight:700;cursor:pointer;transition:background .12s} .xsel__opt:hover,.xsel__opt:focus{background:var(--surface-2);outline:none} .xsel__opt--sel{color:var(--primary)} .xsel__opt__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .xsel__opt__k{flex:0 0 auto;font-size:11px;opacity:0;color:var(--primary)} .xsel__opt--sel .xsel__opt__k{opacity:1} .xsel__opt:disabled{opacity:.45;cursor:not-allowed} .xsel__grp{padding:10px 13px 4px;font-size:var(--t-xs);font-weight:800;color:var(--muted); text-transform:uppercase;letter-spacing:.05em} /* ── Native control resets — nothing in the app should render OS chrome ── */ /* number spinners: replaced by the .amtbox stepper wherever stepping matters */ input[type=number]{-moz-appearance:textfield;appearance:textfield} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* search field's OS clear button */ input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none} /* date/time: flat field + a tinted picker glyph that follows the theme */ input[type=date],input[type=time],input[type=datetime-local],input[type=month]{ -webkit-appearance:none;appearance:none} input::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer;padding:2px;border-radius:6px;transition:var(--ease-1)} input::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--surface-2)} [data-theme=dark] input::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6)} /* checkbox + radio — clay boxes, never the OS tick */ input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;flex:0 0 auto;margin:0; width:22px;height:22px;display:grid;place-content:center;cursor:pointer;position:relative; border:none;border-radius:7px;background:var(--surface-sunk);box-shadow:var(--sunk); transition:var(--ease-1);color:var(--primary-ink)} input[type=radio]{border-radius:var(--r-full)} input[type=checkbox]:hover,input[type=radio]:hover{box-shadow:var(--sunk),0 0 0 3px var(--primary-softer)} input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;box-shadow:var(--sunk),0 0 0 3px var(--primary-soft)} input[type=checkbox]:checked,input[type=radio]:checked{background:var(--primary);box-shadow:var(--glow-sm)} input[type=checkbox]::after{content:'';width:6px;height:11px;margin:-3px 0 0;border:solid currentColor; border-width:0 2.6px 2.6px 0;transform:rotate(43deg) scale(0);transition:transform .16s cubic-bezier(.34,1.4,.4,1)} input[type=checkbox]:checked::after{transform:rotate(43deg) scale(1)} input[type=radio]::after{content:'';width:9px;height:9px;border-radius:var(--r-full);background:currentColor; transform:scale(0);transition:transform .16s cubic-bezier(.34,1.4,.4,1)} input[type=radio]:checked::after{transform:scale(1)} input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed} /* Chrome paints autofilled fields its own yellow/blue and ignores background — the inset shadow trick is the only way to hold our own surface colour. */ .input:-webkit-autofill,.input:-webkit-autofill:hover, .input:-webkit-autofill:focus,.input:-webkit-autofill:active{ -webkit-text-fill-color:var(--text);caret-color:var(--text); -webkit-box-shadow:0 0 0 1000px var(--surface-sunk) inset,var(--sunk); transition:background-color 9999s ease-in-out 0s} /* the OS-drawn resize grip in the corner of a textarea */ textarea::-webkit-resizer{background-color:transparent} /* keyboard focus ring — the app's blue, not the browser's default outline. Controls that already answer focus with their own ring opt out. */ a:focus-visible,button:focus-visible,input:focus-visible, textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .input:focus-visible,.xsel__trigger:focus-visible,.amtbox__in:focus-visible, input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none} /* ── Segmented control (rail switch: Card/Bank vs Crypto, …) ────────────── Same job as .pkgtabs but built for 2–3 icon+label options, and it never disables a segment: an unavailable rail still opens and explains itself inside its own pane, because a dead button tells the user nothing. */ .seg{display:flex;gap:6px;padding:6px;margin-bottom:18px;background:var(--surface-sunk); border-radius:var(--r-full);box-shadow:var(--sunk)} .seg__b{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 10px;border:none;background:none;color:var(--muted);font:inherit;font-weight:800; font-size:var(--t-sm);border-radius:var(--r-full);cursor:pointer;white-space:nowrap;transition:var(--ease-1)} .seg__b i{font-size:13px} .seg__b:hover{color:var(--text);background:var(--surface-2)} .seg__b--on,.seg__b--on:hover{background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow-sm)} .seg__b:active{transform:scale(.97)} /* ── Amount box — big figure with a currency prefix and clay steppers. The is type=text + inputmode=decimal on purpose: type=number drags in OS spinners, locale quirks and a scroll-wheel that silently edits money. */ .amtbox{display:flex;align-items:center;gap:3px;min-height:62px;padding:7px 8px 7px 17px; background:var(--surface-sunk);border-radius:var(--r-md);box-shadow:var(--sunk);transition:box-shadow .16s} .amtbox--on{box-shadow:var(--sunk),0 0 0 3px var(--primary-soft)} .amtbox__cur{flex:0 0 auto;font-size:var(--t-xl);font-weight:800;color:var(--muted);letter-spacing:-.02em} .amtbox__in{flex:1;min-width:0;width:100%;padding:0 9px;border:none;outline:none;background:none;box-shadow:none; color:var(--text);font:inherit;font-size:var(--t-2xl);font-weight:800;letter-spacing:-.03em} .amtbox__in::placeholder{color:var(--muted);opacity:.45} .amtbox__b{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border:none; border-radius:var(--r-full);background:var(--surface);color:var(--text);font-size:13px; box-shadow:var(--sh-1);cursor:pointer;transition:var(--ease)} .amtbox__b:hover{background:var(--surface-2)} .amtbox__b:active{transform:scale(.9)} .amtbox__b--wide{width:auto;padding:0 15px;font-size:var(--t-xs);font-weight:800;color:var(--primary)} /* quick-amount chips under the box */ .qamt{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .qamt button{flex:1 1 auto;padding:9px 12px;border:none;border-radius:var(--r-full);background:var(--surface-sunk); color:var(--text-2);font:inherit;font-size:var(--t-xs);font-weight:800;cursor:pointer; box-shadow:var(--sunk);transition:var(--ease-1)} .qamt button:hover{color:var(--primary);box-shadow:var(--sunk),0 0 0 2px var(--primary-soft)} .qamt button:active{transform:scale(.95)} /* ── Option cards — a picker that shows what each choice IS (payout method, delivery rail). Replaces a