/* ============================================================ HASKE247 — "Liquid Glass" theme stylesheet Lives in themes/liquid-glass/ alongside home.php — this folder is self-contained; nothing else on the site depends on it, and it depends on nothing outside it except the shared base assets/css/style.css it layers on top of. Loaded ONLY when [data-skin="liquid_glass"] is on (see includes/theme.php + includes/header.php). Never touches the Classic or Creator Universe themes — every rule here is scoped under that attribute. Layered on top of style.css: - Section 1: site-wide glass refinements (nav, cards, buttons) so every existing page instantly feels part of the new skin, even pages that haven't been individually redesigned yet. - Section 2: homepage-only components (hero, floating search, quick modules, trending, featured creator, discover pills) used by the Liquid Glass branch of index.php. ============================================================ */ [data-skin="liquid_glass"] { --lg-glass-bg: rgba(255,255,255,.06); --lg-glass-bg-strong: rgba(255,255,255,.1); --lg-glass-border: rgba(255,255,255,.12); --lg-blur: 22px; --lg-radius: 1.25rem; --lg-radius-lg: 1.75rem; } [data-skin="liquid_glass"][data-theme="light"] { --lg-glass-bg: rgba(255,255,255,.55); --lg-glass-bg-strong: rgba(255,255,255,.75); --lg-glass-border: rgba(15,23,42,.08); } /* ============================================================ 1. SITE-WIDE GLASS REFINEMENTS ============================================================ */ [data-skin="liquid_glass"] body { letter-spacing: -.01em; } /* Floating glass nav, detached from the edge like Arc/Apple's menu bar. Uses left:0/right:0/width/margin:auto to center — NOT left:50%+transform, which conflicts with the Classic nav's own left:0/right:0 (inherited from style.css) and made the bar drift and misalign depending on viewport width. This version can't get over-constrained the same way. */ [data-skin="liquid_glass"] nav.site-nav { position: sticky; top: 10px; left: 0; right: 0; width: min(1280px, calc(100% - 20px)); max-width: calc(100% - 20px); margin: 0 auto; border-radius: 1.4rem; background: var(--lg-glass-bg-strong); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(var(--lg-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(160%); box-shadow: 0 8px 32px rgba(0,0,0,.18); box-sizing: border-box; } [data-skin="liquid_glass"] .nav-inner { height: 56px; padding: 0 1.25rem; max-width: none; /* the pill itself already caps the width */ } [data-skin="liquid_glass"] .nav-link { padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: background .15s, color .15s; } [data-skin="liquid_glass"] .nav-link:hover { background: var(--lg-glass-bg); } /* Roomy nav (creator/admin) can outgrow the pill on laptop widths — let the link row scroll horizontally instead of wrapping/overflowing. */ [data-skin="liquid_glass"] .nav-links { gap: 1.1rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } [data-skin="liquid_glass"] .nav-links::-webkit-scrollbar { display: none; } [data-skin="liquid_glass"] .nav-tool-btn, [data-skin="liquid_glass"] .notif-bell-wrap > #notifBellBtn { border-radius: 999px !important; background: transparent !important; border-color: transparent !important; } [data-skin="liquid_glass"] .nav-tool-btn:hover { background: var(--lg-glass-bg) !important; } /* Mobile dropdown menu: matches the pill's rounded corners and sits flush under it (both are children of the same floating nav.site-nav, so they already share its width — no separate positioning needed). */ [data-skin="liquid_glass"] .mobile-nav { background: var(--lg-glass-bg-strong); backdrop-filter: blur(var(--lg-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(160%); border: none; border-radius: 0 0 1.4rem 1.4rem; } [data-skin="liquid_glass"] .mobile-nav-link { padding: .85rem 1.35rem; } @media (max-width: 480px) { [data-skin="liquid_glass"] nav.site-nav { top: 8px; width: calc(100% - 16px); max-width: calc(100% - 16px); border-radius: 1.1rem; } [data-skin="liquid_glass"] .nav-inner { height: 52px; padding: 0 .85rem; } [data-skin="liquid_glass"] .mobile-nav { border-radius: 0 0 1.1rem 1.1rem; } } /* Push page content down to clear the floating nav's own offset + gap, since it's no longer flush with the top of the viewport. */ [data-skin="liquid_glass"] main { padding-top: 1.75rem; } @media (max-width: 480px) { [data-skin="liquid_glass"] main { padding-top: 1.25rem; } } /* Cards & modules pick up soft glass surfaces + gentle rounding */ [data-skin="liquid_glass"] .card, [data-skin="liquid_glass"] .creator-card, [data-skin="liquid_glass"] .module-card { background: var(--lg-glass-bg); border: 1px solid var(--lg-glass-border); border-radius: var(--lg-radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s; } [data-skin="liquid_glass"] .creator-card:hover, [data-skin="liquid_glass"] .module-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 40px rgba(0,0,0,.16); } [data-skin="liquid_glass"] .btn { border-radius: 999px; transition: transform .15s ease, filter .15s ease, background .15s ease; } [data-skin="liquid_glass"] .btn:active { transform: scale(.97); } [data-skin="liquid_glass"] .btn-secondary { background: var(--lg-glass-bg); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(10px); } [data-skin="liquid_glass"] .page-title { letter-spacing: -.03em; font-weight: 800; } /* Gentle global entrance animation for anything opted in via .lg-anim */ [data-skin="liquid_glass"] .lg-anim { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); } [data-skin="liquid_glass"] .lg-anim.lg-in { opacity: 1; transform: translateY(0); } /* ============================================================ 2. HOMEPAGE COMPONENTS (used by the Liquid Glass branch of index.php) ============================================================ */ .lg-home { padding-top: .5rem; } /* --- Hero --- */ .lg-hero { position: relative; text-align: center; padding: 1.75rem 1rem 1.25rem; overflow: hidden; border-radius: var(--lg-radius-lg); margin-bottom: 1rem; } .lg-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 18% 20%, rgba(245,158,11,.18), transparent 45%), radial-gradient(circle at 82% 75%, rgba(56,189,248,.14), transparent 45%); filter: blur(40px); z-index: 0; } .lg-hero-content { position: relative; z-index: 1; } .lg-hero-compact .lg-hero-kicker { margin-bottom: .5rem; } .lg-hero-kicker { display: inline-flex; align-items: center; gap: .5rem; padding: 6px 16px; border-radius: 999px; background: var(--lg-glass-bg); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(10px); font-size: .72rem; font-weight: 700; color: var(--amber-light); margin-bottom: 1.75rem; } .lg-hero-title { font-size: clamp(2.4rem, 7vw, 4.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--text-white); margin-bottom: .5rem; } .lg-hero-title small { display: block; font-size: clamp(1.1rem, 3vw, 1.6rem); font-weight: 600; color: var(--text-muted); letter-spacing: -.01em; margin-top: 1rem; } .lg-hero-actions { display: flex; gap: .75rem; justify-content: center; margin-top: 2.25rem; flex-wrap: wrap; } .lg-hero-actions .btn { padding: 14px 30px; font-size: .95rem; } /* --- Floating search --- */ .lg-search { max-width: 560px; margin: 2.25rem auto 0; display: flex; align-items: center; gap: .6rem; background: var(--lg-glass-bg-strong); border: 1px solid var(--lg-glass-border); border-radius: 999px; padding: .4rem .4rem .4rem 1.25rem; backdrop-filter: blur(var(--lg-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(160%); box-shadow: 0 12px 32px rgba(0,0,0,.16); } .lg-search svg { flex-shrink: 0; color: var(--text-muted); } .lg-search input { border: none !important; background: transparent !important; flex: 1; padding: .6rem 0 !important; font-size: .95rem; } .lg-search input:focus { outline: none; box-shadow: none !important; } .lg-search button { flex-shrink: 0; } /* --- Section headers --- */ .lg-section { margin-bottom: 2.75rem; } .lg-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem; } .lg-section-title { font-size: 1.3rem; font-weight: 800; color: var(--text-white); letter-spacing: -.02em; } .lg-section-link { font-size: .82rem; font-weight: 700; color: var(--amber-light); white-space: nowrap; } /* --- Quick modules: large rounded icons, swipe horizontally --- */ .lg-quick-row { display: flex; gap: .9rem; overflow-x: auto; padding: .25rem .1rem .75rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .lg-quick-row::-webkit-scrollbar { height: 5px; } .lg-quick-row::-webkit-scrollbar-thumb { background: var(--lg-glass-border); border-radius: 999px; } .lg-quick-item { scroll-snap-align: start; flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; text-decoration: none; } .lg-quick-icon { width: 64px; height: 64px; border-radius: 1.4rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--lg-glass-bg-strong); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(14px); transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s; } .lg-quick-item:hover .lg-quick-icon { transform: translateY(-4px); border-color: rgba(245,158,11,.4); } .lg-quick-label { font-size: .74rem; font-weight: 700; color: var(--text); line-height: 1.2; } /* --- Trending: mixed-content large cards --- */ .lg-trending-row { display: flex; gap: 1rem; overflow-x: auto; padding: .25rem .1rem 1rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .lg-trending-row::-webkit-scrollbar { height: 5px; } .lg-trending-row::-webkit-scrollbar-thumb { background: var(--lg-glass-border); border-radius: 999px; } .lg-trend-card { scroll-snap-align: start; flex: 0 0 240px; border-radius: var(--lg-radius); overflow: hidden; background: var(--lg-glass-bg); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(14px); text-decoration: none; display: block; transition: transform .25s cubic-bezier(.2,.8,.2,1); } .lg-trend-card:hover { transform: translateY(-4px); } .lg-trend-media { height: 150px; background-size: cover; background-position: center; background-color: var(--surface2); position: relative; } .lg-trend-kind { position: absolute; top: 10px; left: 10px; font-size: .68rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); } .lg-trend-body { padding: 1rem 1.1rem 1.15rem; } .lg-trend-title { font-weight: 800; color: var(--text-white); font-size: .95rem; margin-bottom: .2rem; } .lg-trend-sub { font-size: .78rem; color: var(--text-muted); } /* --- Featured creator: one large premium card --- */ .lg-featured { position: relative; border-radius: var(--lg-radius-lg); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-color: var(--surface2); border: 1px solid var(--lg-glass-border); } .lg-featured-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 55%, transparent 100%); } .lg-featured-body { position: relative; z-index: 1; padding: 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; width: 100%; } .lg-featured-name { font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -.02em; } .lg-featured-meta { font-size: .85rem; color: rgba(255,255,255,.75); margin-top: .3rem; } /* --- Discover pills --- */ .lg-pill-row { display: flex; flex-wrap: wrap; gap: .6rem; } .lg-pill { padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: .85rem; background: var(--lg-glass-bg); border: 1px solid var(--lg-glass-border); color: var(--text-white); text-decoration: none; backdrop-filter: blur(10px); transition: background .2s, border-color .2s; } .lg-pill:hover { border-color: rgba(245,158,11,.4); background: var(--lg-glass-bg-strong); } /* --- Upcoming events: poster row --- */ .lg-poster-row { display: flex; gap: 1rem; overflow-x: auto; padding: .25rem .1rem 1rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .lg-poster { scroll-snap-align: start; flex: 0 0 200px; border-radius: var(--lg-radius); overflow: hidden; text-decoration: none; display: block; background: var(--lg-glass-bg); border: 1px solid var(--lg-glass-border); transition: transform .25s cubic-bezier(.2,.8,.2,1); } .lg-poster:hover { transform: translateY(-4px); } .lg-poster-img { height: 260px; background-size: cover; background-position: center; background-color: var(--surface2); } .lg-poster-body { padding: .85rem 1rem 1rem; } .lg-poster-title { font-weight: 800; color: var(--text-white); font-size: .85rem; margin-bottom: .2rem; } .lg-poster-sub { font-size: .72rem; color: var(--text-muted); } @media (max-width: 640px) { .lg-hero { padding: 1.35rem 1rem 1rem; } .lg-hero-compact .lg-hero-title { font-size: 1.65rem; } .lg-hero-compact .lg-hero-title small { font-size: .9rem; } .lg-featured { min-height: 260px; } } /* ============================================================ HASKE247 OS — Liquid Glass design system (Dashboard.pdf) Elegant. Minimal. Fast. Human. Blur only on floating surfaces (8–16px). Max 2 accents per screen. ============================================================ */ [data-skin="liquid_glass"] { --lg-primary: #16a34a; /* Haske247 Green */ --lg-primary-deep: #065f46; /* Deep Emerald */ --lg-accent-gold: #d4a017; /* Premium Gold */ --lg-success: #22c55e; --lg-warning: #f59e0b; --lg-error: #ef4444; --lg-blur: 12px; /* doc: 8–16px, not 22+ */ --lg-radius: 1rem; /* 16px */ --lg-radius-lg: 1.5rem; /* 24px */ --lg-shadow: 0 4px 24px rgba(0,0,0,.12); --lg-shadow-hover: 0 8px 32px rgba(0,0,0,.18); --lg-motion: 180ms; --amber: var(--lg-primary); --amber-light: #4ade80; } [data-skin="liquid_glass"][data-theme="light"] { --lg-blur: 10px; --lg-shadow: 0 4px 20px rgba(15,23,42,.08); } /* Glass card primitive */ [data-skin="liquid_glass"] .card, [data-skin="liquid_glass"] .os-card { border-radius: var(--lg-radius-lg) !important; background: var(--lg-glass-bg-strong) !important; border: 1px solid var(--lg-glass-border) !important; backdrop-filter: blur(var(--lg-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(140%); box-shadow: var(--lg-shadow); transition: transform var(--lg-motion) ease, box-shadow var(--lg-motion) ease; } [data-skin="liquid_glass"] .card:hover, [data-skin="liquid_glass"] .os-card:hover { box-shadow: var(--lg-shadow-hover); } [data-skin="liquid_glass"] .btn-primary { background: linear-gradient(135deg, var(--lg-primary), var(--lg-primary-deep)) !important; border: none !important; border-radius: 14px !important; font-weight: 700; transition: transform var(--lg-motion) ease, box-shadow var(--lg-motion) ease; } [data-skin="liquid_glass"] .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(22,163,74,.35); } [data-skin="liquid_glass"] .btn-secondary { border-radius: 14px !important; background: var(--lg-glass-bg) !important; border: 1px solid var(--lg-glass-border) !important; backdrop-filter: blur(8px); } /* --- OS Dashboard --- */ .os-dash { max-width: 1100px; margin: 0 auto; padding: 0 .5rem 2rem; } .os-greet { margin-bottom: 1.25rem; } .os-greet h1 { font-size: clamp(1.35rem, 4vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; color: var(--text-white); margin: 0 0 .35rem; } .os-greet p { margin: 0; color: var(--text-muted); font-size: .95rem; } .os-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .os-grid { grid-template-columns: 1fr 300px; align-items: start; } } .os-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1rem; } @media (min-width: 700px) { .os-stat-row { grid-template-columns: repeat(4, 1fr); } } .os-stat { padding: 1.1rem 1rem; border-radius: var(--lg-radius-lg); background: var(--lg-glass-bg-strong); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(var(--lg-blur)); -webkit-backdrop-filter: blur(var(--lg-blur)); box-shadow: var(--lg-shadow); } .os-stat .os-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; } .os-stat .os-stat-value { font-size: 1.35rem; font-weight: 800; color: var(--text-white); margin-top: .25rem; letter-spacing: -.02em; } .os-stat .os-stat-hint { font-size: .75rem; color: var(--lg-primary); margin-top: .2rem; font-weight: 600; } .os-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 1.25rem 0 .65rem; } .os-attention { padding: 1rem 1.1rem; border-radius: var(--lg-radius); background: var(--lg-glass-bg); border: 1px solid var(--lg-glass-border); margin-bottom: .55rem; display: flex; gap: .75rem; align-items: flex-start; text-decoration: none; color: inherit; transition: background var(--lg-motion) ease, transform var(--lg-motion) ease; } .os-attention:hover { background: var(--lg-glass-bg-strong); transform: translateY(-1px); } .os-attention .os-att-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(22,163,74,.15); font-size: 1rem; flex-shrink: 0; } .os-attention strong { color: var(--text-white); font-size: .9rem; display: block; } .os-attention span { color: var(--text-muted); font-size: .78rem; } .os-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; } @media (min-width: 600px) { .os-actions { grid-template-columns: repeat(3, 1fr); } } .os-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1.1rem .75rem; text-align: center; text-decoration: none; border-radius: var(--lg-radius-lg); background: var(--lg-glass-bg-strong); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(var(--lg-blur)); color: var(--text-white); font-weight: 700; font-size: .82rem; transition: transform var(--lg-motion) ease, box-shadow var(--lg-motion) ease; box-shadow: var(--lg-shadow); } .os-action:hover { transform: translateY(-2px); box-shadow: var(--lg-shadow-hover); color: var(--text-white); } .os-action .os-action-ico { font-size: 1.35rem; line-height: 1; } .os-panel { position: sticky; top: 5rem; padding: 1.15rem; border-radius: var(--lg-radius-lg); background: var(--lg-glass-bg-strong); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(var(--lg-blur)); box-shadow: var(--lg-shadow); } .os-panel h3 { margin: 0 0 .75rem; font-size: .85rem; font-weight: 800; color: var(--text-white); letter-spacing: -.01em; } /* Votify under Liquid Glass */ [data-skin="liquid_glass"] .votify-contestant-grid .card, [data-skin="liquid_glass"] .cp-card, [data-skin="liquid_glass"] .cp-stat, [data-skin="liquid_glass"] .hk-share-card { border-radius: var(--lg-radius-lg) !important; background: var(--lg-glass-bg-strong) !important; border: 1px solid var(--lg-glass-border) !important; backdrop-filter: blur(var(--lg-blur)); -webkit-backdrop-filter: blur(var(--lg-blur)); box-shadow: var(--lg-shadow); } [data-skin="liquid_glass"] .hk-share-icon { background: rgba(255,255,255,.92) !important; } [data-skin="liquid_glass"] .cp-avatar { border-color: var(--lg-primary) !important; } [data-skin="liquid_glass"] .cp-tabs button.active { background: var(--lg-primary) !important; color: #fff !important; } /* Reduce full-page blur cost: no blur on body backgrounds */ [data-skin="liquid_glass"] body { background-attachment: fixed; } /* ============================================================ OS Chrome: floating rail · spotlight search · notif panel ============================================================ */ [data-skin="liquid_glass"] .os-rail { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1200; display: flex; flex-direction: column; gap: .35rem; padding: .5rem; border-radius: 1.25rem; background: var(--lg-glass-bg-strong); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(var(--lg-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(150%); box-shadow: var(--lg-shadow); } [data-skin="liquid_glass"] .os-rail-item { width: 44px; height: 44px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--text-white); background: transparent; border: 0; cursor: pointer; position: relative; transition: background var(--lg-motion) ease, transform var(--lg-motion) ease; padding: 0; } [data-skin="liquid_glass"] .os-rail-item span { font-size: 1.1rem; line-height: 1; } [data-skin="liquid_glass"] .os-rail-item em { display: none; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--lg-glass-bg-strong); border: 1px solid var(--lg-glass-border); padding: .35rem .65rem; border-radius: 8px; font-style: normal; font-size: .75rem; font-weight: 700; white-space: nowrap; pointer-events: none; box-shadow: var(--lg-shadow); } [data-skin="liquid_glass"] .os-rail-item:hover { background: var(--lg-glass-bg); transform: scale(1.06); } [data-skin="liquid_glass"] .os-rail-item:hover em { display: block; } @media (max-width: 900px) { [data-skin="liquid_glass"] .os-rail { left: 0; right: 0; top: auto; bottom: 12px; transform: none; flex-direction: row; justify-content: center; width: max-content; max-width: calc(100% - 24px); margin: 0 auto; overflow-x: auto; } [data-skin="liquid_glass"] .os-rail-item em { display: none !important; } [data-skin="liquid_glass"] body { padding-bottom: 72px; } } /* Spotlight search */ [data-skin="liquid_glass"] .os-search-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; } [data-skin="liquid_glass"] .os-search-overlay[hidden] { display: none !important; } [data-skin="liquid_glass"] .os-search-panel { width: min(560px, 100%); border-radius: var(--lg-radius-lg); background: var(--lg-glass-bg-strong); border: 1px solid var(--lg-glass-border); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 20px 50px rgba(0,0,0,.35); overflow: hidden; } [data-skin="liquid_glass"] .os-search-bar { display: flex; align-items: center; gap: .65rem; padding: .9rem 1rem; border-bottom: 1px solid var(--lg-glass-border); } [data-skin="liquid_glass"] .os-search-bar input { flex: 1; border: 0; background: transparent; outline: none; color: var(--text-white); font-size: 1.05rem; font-weight: 600; } [data-skin="liquid_glass"] .os-search-kbd { font-size: .7rem; padding: .2rem .45rem; border-radius: 6px; border: 1px solid var(--lg-glass-border); color: var(--text-muted); } [data-skin="liquid_glass"] .os-search-results { max-height: 50vh; overflow-y: auto; padding: .5rem; } [data-skin="liquid_glass"] .os-search-hint { padding: 1.25rem 1rem; text-align: center; color: var(--text-muted); font-size: .88rem; } [data-skin="liquid_glass"] .os-search-item { display: flex; gap: .75rem; align-items: center; padding: .7rem .85rem; border-radius: 12px; text-decoration: none; color: var(--text-white); transition: background var(--lg-motion) ease; } [data-skin="liquid_glass"] .os-search-item:hover { background: var(--lg-glass-bg); } [data-skin="liquid_glass"] .os-search-item-ico { font-size: 1.2rem; } [data-skin="liquid_glass"] .os-search-item-text { display: flex; flex-direction: column; gap: .1rem; } [data-skin="liquid_glass"] .os-search-item-text strong { font-size: .92rem; } [data-skin="liquid_glass"] .os-search-item-text small { font-size: .75rem; color: var(--text-muted); } /* Notification slide-out */ [data-skin="liquid_glass"] .os-notif-backdrop { position: fixed; inset: 0; z-index: 1350; background: rgba(0,0,0,.35); } [data-skin="liquid_glass"] .os-notif-backdrop[hidden], [data-skin="liquid_glass"] .os-notif-panel[hidden] { display: none !important; } [data-skin="liquid_glass"] .os-notif-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1360; width: min(380px, 100%); background: var(--lg-glass-bg-strong); border-left: 1px solid var(--lg-glass-border); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: -8px 0 40px rgba(0,0,0,.25); display: flex; flex-direction: column; animation: osNotifIn var(--lg-motion) ease; } @keyframes osNotifIn { from { transform: translateX(12px); opacity: .6; } to { transform: translateX(0); opacity: 1; } } [data-skin="liquid_glass"] .os-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid var(--lg-glass-border); } [data-skin="liquid_glass"] .os-notif-head strong { color: var(--text-white); font-size: 1rem; } [data-skin="liquid_glass"] .os-notif-actions { display: flex; gap: .5rem; align-items: center; } [data-skin="liquid_glass"] .os-notif-link { background: none; border: 0; color: var(--lg-primary); font-size: .78rem; font-weight: 700; cursor: pointer; } [data-skin="liquid_glass"] .os-notif-close { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--lg-glass-border); background: var(--lg-glass-bg); color: var(--text-white); font-size: 1.2rem; cursor: pointer; } [data-skin="liquid_glass"] .os-notif-body { flex: 1; overflow-y: auto; padding: .5rem; } [data-skin="liquid_glass"] .os-notif-group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: .65rem .75rem .35rem; } [data-skin="liquid_glass"] .os-notif-item { display: block; padding: .75rem; border-radius: 12px; text-decoration: none; margin-bottom: .35rem; border: 1px solid transparent; transition: background var(--lg-motion) ease; } [data-skin="liquid_glass"] .os-notif-item:hover { background: var(--lg-glass-bg); } [data-skin="liquid_glass"] .os-notif-item.is-unread { border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.06); } [data-skin="liquid_glass"] .os-notif-item strong { display: block; color: var(--text-white); font-size: .88rem; margin-bottom: .2rem; } [data-skin="liquid_glass"] .os-notif-item span { display: block; color: var(--text-muted); font-size: .8rem; line-height: 1.4; } [data-skin="liquid_glass"] .os-notif-item small { display: block; color: var(--text-muted); font-size: .7rem; margin-top: .35rem; opacity: .8; } [data-skin="liquid_glass"] .os-notif-foot { padding: .85rem 1rem; border-top: 1px solid var(--lg-glass-border); text-align: center; } [data-skin="liquid_glass"] .os-notif-foot a { color: var(--lg-primary); font-weight: 700; font-size: .85rem; text-decoration: none; } /* Main content offset for desktop rail */ @media (min-width: 901px) { [data-skin="liquid_glass"] .main-content, [data-skin="liquid_glass"] body > .container, [data-skin="liquid_glass"] body > .container-sm, [data-skin="liquid_glass"] .os-dash { padding-left: 4.5rem; } } /* Ecosystem icons — manual scroll (touch + mouse drag) + optional auto-scroll */ [data-skin="liquid_glass"] .lg-eco-scroll { overflow-x: auto; overflow-y: hidden; width: 100%; cursor: grab; -webkit-overflow-scrolling: touch; scroll-behavior: auto; overscroll-behavior-x: contain; scrollbar-width: thin; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } [data-skin="liquid_glass"] .lg-eco-scroll.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } [data-skin="liquid_glass"] .lg-eco-scroll::-webkit-scrollbar { height: 4px; } [data-skin="liquid_glass"] .lg-eco-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 999px; } [data-skin="liquid_glass"] .lg-eco-track { display: flex; gap: .85rem; width: max-content; padding: .25rem 0 .55rem; /* no CSS animation — JS drives auto-scroll so users can drag freely */ animation: none; transform: none; } @media (prefers-reduced-motion: reduce) { [data-skin="liquid_glass"] .lg-eco-track { flex-wrap: wrap; width: 100%; } [data-skin="liquid_glass"] .lg-eco-scroll { overflow: visible; cursor: default; } } /* ============================================================ PUBLIC PROFILE (/@username) — Liquid Glass refinements ============================================================ */ [data-skin="liquid_glass"] .profile-hero { border-radius: var(--lg-radius-lg, 1.75rem); background: var(--lg-glass-bg-strong, rgba(255,255,255,.1)); border: 1px solid var(--lg-glass-border, rgba(255,255,255,.12)); backdrop-filter: blur(var(--lg-blur, 22px)) saturate(160%); -webkit-backdrop-filter: blur(var(--lg-blur, 22px)) saturate(160%); box-shadow: 0 12px 40px rgba(0,0,0,.18); } [data-skin="liquid_glass"] .profile-avatar { border-color: transparent; box-shadow: 0 0 0 4px var(--lg-glass-bg-strong, rgba(255,255,255,.1)), 0 8px 24px rgba(0,0,0,.3); } [data-skin="liquid_glass"] .profile-section.card { border-radius: var(--lg-radius, 1.25rem); background: var(--lg-glass-bg, rgba(255,255,255,.06)); border: 1px solid var(--lg-glass-border, rgba(255,255,255,.12)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ============================================================ PHASE 42 — Homepage Discovery & Conversion Starts below the existing hero/banner. The locked top experience is untouched. ============================================================ */ [data-skin="liquid_glass"] .lg-phase42-head { align-items:flex-end; gap:1rem; } [data-skin="liquid_glass"] .lg-phase42-kicker { display:block; margin-bottom:.25rem; color:var(--lg-primary); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } [data-skin="liquid_glass"] .lg-phase42-note { color:var(--text-muted); font-size:.82rem; max-width:360px; text-align:right; } [data-skin="liquid_glass"] .lg-intent-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; } [data-skin="liquid_glass"] .lg-intent-card, [data-skin="liquid_glass"] .lg-opportunity-card, [data-skin="liquid_glass"] .lg-audio-card, [data-skin="liquid_glass"] .lg-creator-mini, [data-skin="liquid_glass"] .lg-earn-grid > a, [data-skin="liquid_glass"] .lg-how-grid > div { border:1px solid var(--lg-glass-border); background:var(--lg-glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 12px 34px rgba(0,0,0,.12); text-decoration:none; } [data-skin="liquid_glass"] .lg-intent-card { min-height:176px; padding:1.05rem; border-radius:20px; display:flex; flex-direction:column; transition:transform .2s ease,border-color .2s ease,background .2s ease; } [data-skin="liquid_glass"] .lg-intent-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.22); background:var(--lg-glass-bg-strong); } [data-skin="liquid_glass"] .lg-intent-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.08); font-size:1.25rem; margin-bottom:.85rem; } [data-skin="liquid_glass"] .lg-intent-card b { color:var(--text-white); font-size:.96rem; } [data-skin="liquid_glass"] .lg-intent-card small { color:var(--text-muted); line-height:1.45; margin-top:.35rem; } [data-skin="liquid_glass"] .lg-intent-card em { margin-top:auto; padding-top:.85rem; color:var(--lg-primary); font-style:normal; font-size:.78rem; font-weight:800; } [data-skin="liquid_glass"] .lg-opportunity-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; } [data-skin="liquid_glass"] .lg-opportunity-card { border-radius:20px; padding:1rem; min-height:190px; display:flex; flex-direction:column; color:inherit; } [data-skin="liquid_glass"] .lg-opportunity-card:hover { border-color:rgba(255,255,255,.22); } [data-skin="liquid_glass"] .lg-opportunity-top { display:flex; align-items:center; justify-content:space-between; } [data-skin="liquid_glass"] .lg-opportunity-badge { font-size:.66rem; padding:.3rem .55rem; border-radius:999px; color:var(--lg-primary); background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.2); font-weight:800; text-transform:uppercase; letter-spacing:.04em; } [data-skin="liquid_glass"] .lg-opportunity-card h3 { color:var(--text-white); font-size:1rem; line-height:1.3; margin:.9rem 0 .3rem; } [data-skin="liquid_glass"] .lg-opportunity-card p { color:var(--text-muted); margin:0 0 .8rem; font-size:.82rem; } [data-skin="liquid_glass"] .lg-opportunity-meta { display:grid; gap:.25rem; color:var(--text-muted); font-size:.75rem; } [data-skin="liquid_glass"] .lg-opportunity-card strong { color:var(--lg-primary); margin-top:auto; padding-top:.8rem; font-size:.78rem; } [data-skin="liquid_glass"] .lg-phase42-inline-cta { margin-top:.85rem; border:1px solid var(--lg-glass-border); border-radius:16px; padding:.85rem 1rem; display:flex; gap:.75rem; align-items:center; background:rgba(255,255,255,.035); color:var(--text-muted); font-size:.82rem; } [data-skin="liquid_glass"] .lg-phase42-inline-cta span { margin-right:auto; } [data-skin="liquid_glass"] .lg-phase42-inline-cta a { color:var(--text-white); text-decoration:none; font-weight:800; padding:.55rem .75rem; border-radius:10px; border:1px solid var(--lg-glass-border); } [data-skin="liquid_glass"] .lg-phase42-media-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; } [data-skin="liquid_glass"] .lg-phase42-media-card { border-radius:20px; overflow:hidden; border:1px solid var(--lg-glass-border); background:var(--lg-glass-bg); text-decoration:none; } [data-skin="liquid_glass"] .lg-phase42-media-img { height:168px; background:linear-gradient(135deg,rgba(255,122,0,.22),rgba(255,255,255,.04)); background-size:cover; background-position:center; position:relative; } [data-skin="liquid_glass"] .lg-phase42-media-img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62)); } [data-skin="liquid_glass"] .lg-phase42-media-img span { position:absolute; z-index:1; left:.75rem; bottom:.7rem; color:#fff; background:rgba(0,0,0,.48); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); padding:.34rem .58rem; border-radius:999px; font-size:.7rem; font-weight:800; } [data-skin="liquid_glass"] .lg-phase42-media-body { padding:.85rem .9rem 1rem; } [data-skin="liquid_glass"] .lg-phase42-media-body h3 { color:var(--text-white); font-size:.96rem; margin:0 0 .3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } [data-skin="liquid_glass"] .lg-phase42-media-body p { color:var(--text-muted); font-size:.76rem; margin:0; } [data-skin="liquid_glass"] .lg-audio-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; } [data-skin="liquid_glass"] .lg-audio-card { border-radius:18px; padding:.65rem; display:flex; gap:.75rem; align-items:center; color:inherit; min-width:0; } [data-skin="liquid_glass"] .lg-audio-art { flex:0 0 70px; height:70px; border-radius:14px; background:linear-gradient(145deg,rgba(111,78,255,.25),rgba(255,122,0,.18)); background-size:cover; background-position:center; display:grid; place-items:center; overflow:hidden; } [data-skin="liquid_glass"] .lg-audio-art span { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.58); color:#fff; font-size:.7rem; } [data-skin="liquid_glass"] .lg-audio-card > div:last-child { min-width:0; } [data-skin="liquid_glass"] .lg-audio-card h3 { color:var(--text-white); margin:0 0 .2rem; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-skin="liquid_glass"] .lg-audio-card p { color:var(--text-muted); margin:0 0 .25rem; font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-skin="liquid_glass"] .lg-audio-card small { color:var(--lg-primary); font-weight:800; font-size:.7rem; } [data-skin="liquid_glass"] .lg-earn-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.75rem; } [data-skin="liquid_glass"] .lg-earn-grid > a { border-radius:18px; padding:1rem .85rem; min-height:126px; color:inherit; display:flex; flex-direction:column; } [data-skin="liquid_glass"] .lg-earn-grid span { font-size:1.35rem; margin-bottom:.7rem; } [data-skin="liquid_glass"] .lg-earn-grid b { color:var(--text-white); font-size:.84rem; } [data-skin="liquid_glass"] .lg-earn-grid small { color:var(--text-muted); font-size:.7rem; margin-top:.3rem; line-height:1.35; } [data-skin="liquid_glass"] .lg-business-band { display:grid; grid-template-columns:1.45fr .8fr; gap:1rem; padding:1.3rem; border:1px solid var(--lg-glass-border); border-radius:24px; background:linear-gradient(120deg,rgba(255,122,0,.08),rgba(255,255,255,.035)); } [data-skin="liquid_glass"] .lg-business-copy h2 { color:var(--text-white); font-size:1.45rem; margin:.15rem 0 .45rem; } [data-skin="liquid_glass"] .lg-business-copy p { color:var(--text-muted); margin:0 0 1rem; max-width:720px; line-height:1.55; } [data-skin="liquid_glass"] .lg-business-copy > div { display:flex; flex-wrap:wrap; gap:.55rem; } [data-skin="liquid_glass"] .lg-business-mini { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; align-content:center; } [data-skin="liquid_glass"] .lg-business-mini span { border:1px solid var(--lg-glass-border); border-radius:14px; padding:.75rem; color:var(--text-white); background:rgba(255,255,255,.035); font-size:.78rem; } [data-skin="liquid_glass"] .lg-creator-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; } [data-skin="liquid_glass"] .lg-creator-mini { border-radius:16px; padding:.72rem; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:.7rem; color:inherit; } [data-skin="liquid_glass"] .lg-creator-mini img, [data-skin="liquid_glass"] .lg-creator-mini > span { width:48px; height:48px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:rgba(255,255,255,.08); color:var(--text-white); font-weight:800; } [data-skin="liquid_glass"] .lg-creator-mini b { display:block; color:var(--text-white); font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } [data-skin="liquid_glass"] .lg-creator-mini small { display:block; color:var(--text-muted); font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:.15rem; } [data-skin="liquid_glass"] .lg-creator-mini em { color:var(--lg-primary); font-style:normal; font-size:.7rem; font-weight:800; } [data-skin="liquid_glass"] .lg-how-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; } [data-skin="liquid_glass"] .lg-how-grid > div { border-radius:18px; padding:1rem; } [data-skin="liquid_glass"] .lg-how-grid span { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:rgba(255,122,0,.12); color:var(--lg-primary); font-weight:900; font-size:.76rem; margin-bottom:.7rem; } [data-skin="liquid_glass"] .lg-how-grid b { color:var(--text-white); display:block; font-size:.9rem; } [data-skin="liquid_glass"] .lg-how-grid p { color:var(--text-muted); margin:.35rem 0 0; line-height:1.45; font-size:.75rem; } @media (max-width: 980px) { [data-skin="liquid_glass"] .lg-intent-grid, [data-skin="liquid_glass"] .lg-opportunity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } [data-skin="liquid_glass"] .lg-audio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } [data-skin="liquid_glass"] .lg-earn-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } [data-skin="liquid_glass"] .lg-phase42-media-row { grid-template-columns:repeat(2,minmax(0,1fr)); } [data-skin="liquid_glass"] .lg-business-band { grid-template-columns:1fr; } } @media (max-width: 650px) { [data-skin="liquid_glass"] .lg-phase42-note { display:none; } [data-skin="liquid_glass"] .lg-intent-grid, [data-skin="liquid_glass"] .lg-opportunity-grid, [data-skin="liquid_glass"] .lg-phase42-media-row, [data-skin="liquid_glass"] .lg-audio-grid, [data-skin="liquid_glass"] .lg-creator-strip, [data-skin="liquid_glass"] .lg-how-grid { grid-template-columns:1fr; } [data-skin="liquid_glass"] .lg-earn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } [data-skin="liquid_glass"] .lg-intent-card { min-height:150px; } [data-skin="liquid_glass"] .lg-phase42-inline-cta { align-items:stretch; flex-direction:column; } [data-skin="liquid_glass"] .lg-phase42-inline-cta span { margin-right:0; } [data-skin="liquid_glass"] .lg-business-mini { grid-template-columns:1fr 1fr; } } /* ============================================================ PHASE 42.1 — Compact mobile homepage Keeps the locked top navigation / Creator Universe / hero carousel intact. ============================================================ */ [data-skin="liquid_glass"] .lg-action-hub { border:1px solid var(--lg-glass-border); border-radius:18px; background:linear-gradient(120deg,rgba(255,122,0,.08),rgba(255,255,255,.035)); overflow:hidden; } [data-skin="liquid_glass"] .lg-action-hub summary { list-style:none; cursor:pointer; padding:.85rem 1rem; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:.75rem; } [data-skin="liquid_glass"] .lg-action-hub summary::-webkit-details-marker { display:none; } [data-skin="liquid_glass"] .lg-action-hub-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.075); font-size:1.1rem; } [data-skin="liquid_glass"] .lg-action-hub summary b { display:block; color:var(--text-white); font-size:.92rem; } [data-skin="liquid_glass"] .lg-action-hub summary small { display:block; color:var(--text-muted); font-size:.7rem; margin-top:.12rem; } [data-skin="liquid_glass"] .lg-action-hub summary em { font-style:normal; color:var(--lg-primary); font-size:.75rem; font-weight:800; } [data-skin="liquid_glass"] .lg-action-hub[open] summary { border-bottom:1px solid var(--lg-glass-border); } [data-skin="liquid_glass"] .lg-intent-grid-compact { padding:.7rem; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; } [data-skin="liquid_glass"] .lg-intent-grid-compact .lg-intent-card { min-height:92px; padding:.7rem .55rem; align-items:center; justify-content:center; text-align:center; border-radius:14px; } [data-skin="liquid_glass"] .lg-intent-grid-compact .lg-intent-icon { width:36px; height:36px; border-radius:11px; margin:0 0 .45rem; font-size:1rem; } [data-skin="liquid_glass"] .lg-intent-grid-compact .lg-intent-card b { font-size:.76rem; line-height:1.2; } [data-skin="liquid_glass"] .lg-home-intents { margin-bottom:1.5rem; } @media (max-width:650px) { /* Less vertical air below the locked hero area. */ [data-skin="liquid_glass"] .lg-home .lg-section { margin-bottom:1.45rem; } [data-skin="liquid_glass"] .lg-home .lg-section-head { margin-bottom:.65rem; align-items:center; } [data-skin="liquid_glass"] .lg-home .lg-section-title { font-size:1rem; } [data-skin="liquid_glass"] .lg-home .lg-section-link { font-size:.7rem; } /* Quick action hub: one thumbnail until opened; 2-column menu when opened. */ [data-skin="liquid_glass"] .lg-action-hub summary { padding:.7rem .8rem; grid-template-columns:36px minmax(0,1fr) auto; gap:.6rem; } [data-skin="liquid_glass"] .lg-action-hub-icon { width:36px; height:36px; } [data-skin="liquid_glass"] .lg-action-hub summary small { display:none; } [data-skin="liquid_glass"] .lg-intent-grid-compact { grid-template-columns:repeat(2,minmax(0,1fr)); padding:.55rem; gap:.45rem; } [data-skin="liquid_glass"] .lg-intent-grid-compact .lg-intent-card { min-height:72px; padding:.55rem .4rem; } [data-skin="liquid_glass"] .lg-intent-grid-compact .lg-intent-icon { width:30px; height:30px; font-size:.9rem; margin-bottom:.35rem; } [data-skin="liquid_glass"] .lg-intent-grid-compact .lg-intent-card b { font-size:.7rem; } /* Core home content stays compact in two columns instead of stacking full width. */ [data-skin="liquid_glass"] .lg-opportunity-grid, [data-skin="liquid_glass"] .lg-phase42-media-row, [data-skin="liquid_glass"] .lg-audio-grid, [data-skin="liquid_glass"] .lg-creator-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; } [data-skin="liquid_glass"] .lg-opportunity-card { min-height:128px; border-radius:14px; padding:.7rem; } [data-skin="liquid_glass"] .lg-opportunity-card h3 { font-size:.8rem; margin:.5rem 0 .15rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } [data-skin="liquid_glass"] .lg-opportunity-card p { font-size:.68rem; margin-bottom:.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } [data-skin="liquid_glass"] .lg-opportunity-meta { font-size:.64rem; } [data-skin="liquid_glass"] .lg-opportunity-meta span:nth-child(2) { display:none; } [data-skin="liquid_glass"] .lg-opportunity-card strong { font-size:.66rem; padding-top:.45rem; } [data-skin="liquid_glass"] .lg-opportunity-badge { font-size:.55rem; padding:.22rem .38rem; } [data-skin="liquid_glass"] .lg-phase42-media-card { border-radius:14px; } [data-skin="liquid_glass"] .lg-phase42-media-img { height:105px; } [data-skin="liquid_glass"] .lg-phase42-media-img span { left:.45rem; bottom:.4rem; padding:.24rem .4rem; font-size:.58rem; } [data-skin="liquid_glass"] .lg-phase42-media-body { padding:.55rem .6rem .65rem; } [data-skin="liquid_glass"] .lg-phase42-media-body h3 { font-size:.76rem; margin-bottom:.18rem; } [data-skin="liquid_glass"] .lg-phase42-media-body p { font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } [data-skin="liquid_glass"] .lg-audio-card { border-radius:13px; padding:.45rem; gap:.5rem; } [data-skin="liquid_glass"] .lg-audio-art { flex-basis:48px; height:48px; border-radius:10px; } [data-skin="liquid_glass"] .lg-audio-card h3 { font-size:.72rem; } [data-skin="liquid_glass"] .lg-audio-card p { font-size:.61rem; } [data-skin="liquid_glass"] .lg-audio-card small { font-size:.61rem; } /* Earn becomes a compact icon grid; descriptions are redundant on mobile. */ [data-skin="liquid_glass"] .lg-earn-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; } [data-skin="liquid_glass"] .lg-earn-grid > a { min-height:78px; padding:.6rem .35rem; border-radius:13px; align-items:center; text-align:center; justify-content:center; } [data-skin="liquid_glass"] .lg-earn-grid span { font-size:1.05rem; margin-bottom:.35rem; } [data-skin="liquid_glass"] .lg-earn-grid b { font-size:.66rem; line-height:1.2; } [data-skin="liquid_glass"] .lg-earn-grid small { display:none; } [data-skin="liquid_glass"] .lg-phase42-inline-cta { flex-direction:row; align-items:center; padding:.55rem .65rem; gap:.4rem; font-size:.68rem; } [data-skin="liquid_glass"] .lg-phase42-inline-cta span { margin-right:auto; } [data-skin="liquid_glass"] .lg-phase42-inline-cta a { padding:.38rem .48rem; font-size:.62rem; border-radius:8px; } [data-skin="liquid_glass"] .lg-business-band { padding:.8rem; border-radius:16px; gap:.65rem; } [data-skin="liquid_glass"] .lg-business-copy h2 { font-size:1rem; margin:.05rem 0 .2rem; } [data-skin="liquid_glass"] .lg-business-copy p { font-size:.68rem; margin-bottom:.55rem; } [data-skin="liquid_glass"] .lg-business-copy .btn { padding:.48rem .7rem; font-size:.68rem; } [data-skin="liquid_glass"] .lg-business-mini { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; } [data-skin="liquid_glass"] .lg-business-mini span { padding:.45rem; border-radius:10px; font-size:.64rem; } [data-skin="liquid_glass"] .lg-creator-mini { grid-template-columns:36px minmax(0,1fr); padding:.45rem; gap:.45rem; border-radius:12px; } [data-skin="liquid_glass"] .lg-creator-mini img, [data-skin="liquid_glass"] .lg-creator-mini > span { width:36px; height:36px; } [data-skin="liquid_glass"] .lg-creator-mini b { font-size:.7rem; } [data-skin="liquid_glass"] .lg-creator-mini small { font-size:.58rem; } [data-skin="liquid_glass"] .lg-creator-mini em { display:none; } /* Three simple steps fit in one row on normal phones. */ [data-skin="liquid_glass"] .lg-how-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; } [data-skin="liquid_glass"] .lg-how-grid > div { padding:.55rem .4rem; border-radius:12px; text-align:center; } [data-skin="liquid_glass"] .lg-how-grid span { width:24px; height:24px; margin:0 auto .4rem; border-radius:8px; font-size:.65rem; } [data-skin="liquid_glass"] .lg-how-grid b { font-size:.64rem; line-height:1.2; } [data-skin="liquid_glass"] .lg-how-grid p { display:none; } /* Keep live content intentionally short on mobile; section links expose the rest. */ [data-skin="liquid_glass"] .lg-phase42-media-row > :nth-child(n+5), [data-skin="liquid_glass"] .lg-creator-strip > :nth-child(n+5) { display:none; } } @media (max-width:360px) { [data-skin="liquid_glass"] .lg-earn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } [data-skin="liquid_glass"] .lg-how-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } /* V43 — Homepage Jobs refresh */ [data-skin="liquid_glass"] .lg-jobs-head > div { min-width:0; } [data-skin="liquid_glass"] .lg-jobs-head small { display:block; color:var(--text-muted); font-size:.76rem; margin-top:.2rem; } [data-skin="liquid_glass"] .lg-job-card { padding:0; overflow:hidden; min-height:0; } [data-skin="liquid_glass"] .lg-job-thumb { height:112px; position:relative; background:linear-gradient(135deg,rgba(255,122,0,.18),rgba(255,255,255,.045)); background-position:center; background-size:cover; display:flex; align-items:center; justify-content:center; } [data-skin="liquid_glass"] .lg-job-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.28)); pointer-events:none; } [data-skin="liquid_glass"] .lg-job-thumb .lg-opportunity-badge { position:absolute; z-index:1; top:.65rem; left:.65rem; color:#fff; background:rgba(5,10,20,.72); border-color:rgba(255,255,255,.18); backdrop-filter:blur(10px); } [data-skin="liquid_glass"] .lg-job-thumb-fallback { font-size:1.55rem; width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid var(--lg-glass-border); } [data-skin="liquid_glass"] .lg-job-body { padding:.85rem .9rem .9rem; display:flex; flex:1; flex-direction:column; min-width:0; } [data-skin="liquid_glass"] .lg-job-card h3 { margin:0 0 .25rem; min-height:2.6em; } [data-skin="liquid_glass"] .lg-job-company { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.55rem !important; } [data-skin="liquid_glass"] .lg-job-company span { color:var(--lg-primary); font-weight:900; } [data-skin="liquid_glass"] .lg-job-chips { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.55rem; } [data-skin="liquid_glass"] .lg-job-chips span { font-size:.64rem; color:var(--text-muted); border:1px solid var(--lg-glass-border); background:rgba(255,255,255,.035); border-radius:999px; padding:.24rem .42rem; } [data-skin="liquid_glass"] .lg-job-salary { color:var(--text-white); font-weight:800; } [data-skin="liquid_glass"] .lg-job-foot { margin-top:auto; padding-top:.72rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; border-top:1px solid var(--lg-glass-border); } [data-skin="liquid_glass"] .lg-job-foot small { color:var(--text-muted); font-size:.66rem; } [data-skin="liquid_glass"] .lg-job-foot strong { margin:0; padding:0; white-space:nowrap; } [data-skin="liquid_glass"] .lg-jobs-cta { flex-wrap:wrap; } @media (max-width:680px){ [data-skin="liquid_glass"] .lg-jobs-head small { display:none; } [data-skin="liquid_glass"] .lg-job-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; } [data-skin="liquid_glass"] .lg-job-card { border-radius:14px; } [data-skin="liquid_glass"] .lg-job-thumb { height:84px; } [data-skin="liquid_glass"] .lg-job-thumb .lg-opportunity-badge { top:.42rem; left:.42rem; font-size:.5rem; padding:.2rem .34rem; } [data-skin="liquid_glass"] .lg-job-thumb-fallback { width:36px; height:36px; border-radius:11px; font-size:1rem; } [data-skin="liquid_glass"] .lg-job-body { padding:.55rem .6rem .62rem; } [data-skin="liquid_glass"] .lg-job-card h3 { font-size:.76rem; margin:0 0 .12rem; min-height:2.55em; -webkit-line-clamp:2; } [data-skin="liquid_glass"] .lg-job-company { font-size:.62rem !important; margin-bottom:.35rem !important; } [data-skin="liquid_glass"] .lg-job-chips { gap:.22rem; margin-bottom:.4rem; } [data-skin="liquid_glass"] .lg-job-chips span { font-size:.54rem; padding:.18rem .3rem; } [data-skin="liquid_glass"] .lg-job-card .lg-opportunity-meta { gap:.18rem; font-size:.58rem; } [data-skin="liquid_glass"] .lg-job-card .lg-opportunity-meta span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } [data-skin="liquid_glass"] .lg-job-foot { padding-top:.45rem; margin-top:.5rem; } [data-skin="liquid_glass"] .lg-job-foot small { font-size:.54rem; } [data-skin="liquid_glass"] .lg-job-foot strong { font-size:.58rem; } [data-skin="liquid_glass"] .lg-jobs-cta span { width:100%; margin:0 0 .25rem; } }