/* ============================================================ 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); }