/* =================================================================== EXPRESSIVE TWEAKS — surface / geometry / pulse Applied via [data-surface], [data-geo], [data-pulse] on . These reshape the overall feel; the Appearance cog handles the rest. =================================================================== */ /* ---------- SURFACE: material & depth ---------- */ /* Flat — no elevation, hairline structure */ [data-surface="flat"] { --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 0 0 1px var(--line-strong); --shadow-pop: 0 12px 40px rgba(16,18,32,.18); } [data-surface="flat"] .stat, [data-surface="flat"] .card, [data-surface="flat"] .area-tile, [data-surface="flat"] .srv-card, [data-surface="flat"] .live-card, [data-surface="flat"] .kpi-strip > * { box-shadow: none; border-color: var(--line-strong); } [data-surface="flat"] .stat:hover, [data-surface="flat"] .srv-card:hover, [data-surface="flat"] .area-tile:hover { transform: none; box-shadow: none; } /* Glass — translucent frosted surfaces */ [data-surface="glass"] .stat, [data-surface="glass"] .card, [data-surface="glass"] .area-tile, [data-surface="glass"] .srv-card, [data-surface="glass"] .live-card, [data-surface="glass"] .hub-top, [data-surface="glass"] .topbar, [data-surface="glass"] .sidebar-nav, [data-surface="glass"] .topnav-bar { background-color: color-mix(in srgb, var(--surface) 62%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-color: color-mix(in srgb, var(--line-strong) 70%, transparent); } [data-surface="glass"] .input { background-color: color-mix(in srgb, var(--surface-2) 55%, transparent); } /* ---------- GEOMETRY: corner language ---------- */ [data-geo="sharp"] { --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 9px; } [data-geo="sharp"] .brand-mark, [data-geo="sharp"] .at-ic, [data-geo="sharp"] .feed-ic, [data-geo="sharp"] .avatar { border-radius: 3px; } [data-geo="round"] { --r-xs: 11px; --r-sm: 15px; --r-md: 22px; --r-lg: 30px; --r-xl: 40px; } [data-geo="round"] .btn { border-radius: 999px; } [data-geo="round"] .pill, [data-geo="round"] .nav-item { border-radius: 999px; } [data-geo="round"] .brand-mark, [data-geo="round"] .at-ic, [data-geo="round"] .feed-ic, [data-geo="round"] .avatar { border-radius: 50%; } /* ---------- PULSE: ambient glow intensity ---------- */ [data-pulse="calm"] .pulse { animation-duration: 3.6s; } [data-pulse="frantic"] .pulse { animation-duration: .85s; } [data-pulse="frantic"] .tv-cap .cap-fill, [data-pulse="frantic"] .fill, [data-pulse="frantic"] .cap-fill { transition-duration: .5s; } [data-pulse="calm"] .tv-cap .cap-fill, [data-pulse="calm"] .fill, [data-pulse="calm"] .cap-fill { transition-duration: 1.8s; } /* =================================================================== TWEAKS PANEL (host-toggled) =================================================================== */ .tweaks-panel { position: fixed; left: 20px; bottom: 20px; z-index: 95; width: 256px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); overflow: hidden; font-family: var(--font-ui); animation: twpop .22s var(--ease); } .tweaks-panel.hidden { display: none; } @keyframes twpop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .tw-head { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--line); cursor: grab; } .tw-head.dragging { cursor: grabbing; } .tw-head .tw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .tw-head .tw-title { font-size: 13px; font-weight: 700; letter-spacing: -.01em; } .tw-head .tw-x { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); font-size: 18px; line-height: 1; transition: all .14s; } .tw-head .tw-x:hover { background: var(--surface-2); color: var(--text); } .tw-body { padding: 6px 15px 16px; } .tw-sec { padding-top: 13px; } .tw-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; display: flex; align-items: baseline; gap: 7px; } .tw-lbl .tw-hint { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); font-size: 11px; opacity: .8; margin-left: auto; } .tw-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; } .tw-seg button { padding: 8px 4px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); transition: all .14s; } .tw-seg button:hover { color: var(--text); } .tw-seg button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); } /* ── Hub top nav ────────────────────────────────────────────── */ .hub-top { z-index: 50; } /* ── Search button — match height of surrounding nav elements ─────────────── .hub-search-btn previously used padding:8px 14px which made it taller than the 36px clock/icon-btn row. Switch to explicit height + zero vertical padding so it sits flush in the nav row. ─────────────────────────────────────────────────────────────────────────── */ .hub-search-btn { height: 36px; padding: 0 12px; align-items: center; } /* When hub-search-btn wraps a real input (filter domains), show focus ring */ .hub-search-btn:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); } .hub-search-btn input { border: none; background: none; outline: none; flex: 1; color: var(--text); font-size: 13px; font-family: inherit; min-width: 0; } /* ── Normalise ALL .search instances (hub bar + sites filter) ─────────────── Base rule uses padding:9px 13px which gives it an oversized height and the focus glow is 4px spread which looks heavy next to compact nav elements. Override to an exact height + subtle ring to match Image 2. ─────────────────────────────────────────────────────────────────────────── */ .search { height: 36px !important; padding: 0 12px !important; } .search:focus-within { box-shadow: 0 0 0 2px var(--accent-soft) !important; }