/* macOS Tahoe Dark — Liquid Glass + high-contrast white text/icons */ :root { --border-radius: 22px; --widget-gap: 22px; --widget-content-vertical-padding: 18px; --widget-content-horizontal-padding: 20px; --content-bounds-padding: 7.5%; --tahoe-glass-bg: rgba(28, 32, 42, 0.55); --tahoe-glass-border: rgba(255, 255, 255, 0.18); --tahoe-glass-highlight: rgba(255, 255, 255, 0.24); --tahoe-glass-shadow: 0 22px 55px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.25); --tahoe-spotlight-bg: rgba(40, 44, 56, 0.7); --tahoe-chip-bg: rgba(255, 255, 255, 0.1); --tahoe-row-hover: rgba(255, 255, 255, 0.1); --tahoe-accent: hsl(210, 100%, 78%); --tahoe-text: rgba(255, 255, 255, 0.96); --tahoe-text-muted: rgba(255, 255, 255, 0.72); --tahoe-text-soft: rgba(255, 255, 255, 0.55); } /* Force readable white text across Glance utility classes */ body, .color-highlight, .color-paragraph, .color-base, .color-subdue, .widget-header, .widget-header h2, .widget-header a, .bookmarks-link, .bookmarks-group-title, .monitor-site, .size-h1, .size-h2, .size-h3, .size-h4, .size-h5, .size-h6 { color: var(--tahoe-text) !important; } .color-subdue, .houston-hour-time, .houston-hourly-label, .multi-search-hint { color: var(--tahoe-text-muted) !important; } /* White UI icons (bookmarks, monitors, search, MDI/SI) */ .bookmarks-icon, .monitor-site-icon, .search-icon, .bookmarks-icon-container img, .monitor-site img, .layout-ai-links img, .layout-bookmarks img, .layout-bookmarks-work img, .layout-monitor img, .layout-monitor-work img { filter: brightness(0) invert(1) !important; opacity: 1 !important; } /* Keep colorful weather condition art */ .houston-icon { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)) !important; opacity: 1 !important; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; font-variant-ligatures: common-ligatures; letter-spacing: -0.01em; color: var(--tahoe-text); background-color: #0b1220; background-image: radial-gradient(1000px 600px at 15% 10%, rgba(80, 120, 200, 0.35), transparent 55%), radial-gradient(900px 700px at 90% 20%, rgba(140, 90, 200, 0.22), transparent 50%), radial-gradient(800px 600px at 60% 90%, rgba(40, 90, 160, 0.35), transparent 55%), linear-gradient(165deg, #141a2a 0%, #0d1422 45%, #091018 100%); background-attachment: fixed; background-size: cover; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .body-content, .page { position: relative; z-index: 1; } /* Home / Work tab panels — driven by data-active-tab on */ html[data-active-tab="home"] .tab-panel-work, html:not([data-active-tab]) .tab-panel-work { display: none !important; } html[data-active-tab="work"] .tab-panel-home { display: none !important; } /* Head stack: tabs → search → AI */ .head-widgets { margin-bottom: var(--widget-gap); display: flex; flex-direction: column; gap: calc(var(--widget-gap) * 0.65); } .head-widgets .widget + .widget { margin-top: 0; } /* Home / Work toggle switch */ .layout-tabs .widget-content { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } .layout-tabs .widget-content::before { display: none !important; } .start-toggle { display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.55rem 0.9rem; border-radius: 999px; background: var(--tahoe-glass-bg); border: 1px solid var(--tahoe-glass-border); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--tahoe-glass-shadow); } .start-toggle-label { border: 0; background: transparent; color: var(--tahoe-text-soft) !important; font: inherit; font-weight: 700; letter-spacing: -0.01em; padding: 0.25rem 0.35rem; cursor: pointer; transition: color 0.2s ease; } .start-toggle-label.is-active, .start-toggle-label:hover { color: var(--tahoe-text) !important; } .start-toggle-switch { position: relative; width: 3.6rem; height: 2.1rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.14); cursor: pointer; padding: 0; transition: background 0.25s ease, border-color 0.25s ease; } .start-toggle-thumb { position: absolute; top: 0.18rem; left: 0.18rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .start-toggle.is-work .start-toggle-switch, .start-toggle-switch.is-work, .start-toggle-switch[aria-checked="true"] { background: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.92); } .start-toggle.is-work .start-toggle-thumb, .start-toggle-switch.is-work .start-toggle-thumb, .start-toggle-switch[aria-checked="true"] .start-toggle-thumb { transform: translateX(1.45rem); background: #0b1220; } /* Multi-engine search */ .layout-multi-search .widget-content { padding: 1rem 1.1rem !important; } .engine-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.85rem; } .engine-pill { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--tahoe-glass-border); background: var(--tahoe-chip-bg); color: var(--tahoe-text) !important; border-radius: 999px; padding: 0.45rem 0.9rem; font: inherit; font-size: var(--font-size-h5); font-weight: 600; cursor: pointer; pointer-events: auto; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .engine-pill-icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; display: block; } .engine-pill:hover { background: rgba(255, 255, 255, 0.16); } .engine-pill.is-active { background: rgba(255, 255, 255, 0.92); color: #0b1220 !important; border-color: rgba(255, 255, 255, 0.92); } .engine-pill.is-active img.engine-pill-icon { filter: brightness(0); } .layout-multi-search .widget-content, .layout-multi-search .widget-content * { pointer-events: auto; } .multi-search-form { display: flex; gap: 0.65rem; align-items: stretch; } .multi-search-input { flex: 1; min-width: 0; height: 5.2rem; border: 1px solid var(--tahoe-glass-border); border-radius: 999px; background: var(--tahoe-spotlight-bg); color: var(--tahoe-text) !important; padding: 0 1.4rem; font: inherit; font-size: 1.55rem; font-weight: 500; letter-spacing: -0.02em; outline: none; } .multi-search-input::placeholder { color: var(--tahoe-text-soft); } .multi-search-input:focus { border-color: var(--tahoe-accent); box-shadow: 0 0 0 4px rgba(64, 156, 255, 0.22); } .multi-search-submit { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 5.2rem; height: 5.2rem; border: 1px solid var(--tahoe-glass-border); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #0b1220 !important; padding: 0; font: inherit; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .multi-search-submit:hover { transform: scale(1.04); background: #fff; } .multi-search-submit-icon { display: block; } .multi-search-hint { margin-top: 0.65rem; } /* AI services row — one pill per service (icon + name together) */ .layout-ai-links .widget-content { padding-block: 0.9rem !important; } .layout-ai-links .dynamic-columns { display: block !important; } .layout-ai-links .bookmarks-group { border-left: none !important; padding-left: 0 !important; } .layout-ai-links .bookmarks-group > ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; list-style: none; margin: 0; padding: 0; } .layout-ai-links .bookmarks-group > ul > li { margin: 0 !important; min-width: 0; display: flex; } .layout-ai-links .bookmarks-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; padding: 0.75rem 0.9rem; border-radius: 16px; background: var(--tahoe-chip-bg); border: 1px solid var(--tahoe-glass-border); font-weight: 600; letter-spacing: -0.01em; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, border-color 0.2s ease; } .layout-ai-links .bookmarks-link:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); } .layout-ai-links .bookmarks-link::after { display: none !important; } .layout-ai-links .bookmarks-icon-container { display: none !important; } .layout-ai-links .ai-inline-icon, .layout-ai-links .bookmarks-link img { width: 1.8rem; height: 1.8rem; display: block; flex-shrink: 0; filter: brightness(0) invert(1) !important; opacity: 1 !important; } /* Page grid — Home */ .page-columns { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "weather monitor monitor" "bookmarks bookmarks bookmarks" "rss rss rss"; gap: var(--widget-gap); align-items: start; } html[data-active-tab="work"] .page-columns { grid-template-areas: "weather wmonitor wmonitor" "wbookmarks wbookmarks wbookmarks" "wrss wrss wrss"; } /* After start.js flattens widgets into .page-columns, hide any leftover shells. Never use display:contents here — it breaks clicks in Chromium. */ .page-columns.is-flattened > .page-column, .page-columns.is-flattened > .page-column-small, .page-columns.is-flattened > .page-column-full { display: none !important; } .page-columns > .widget { min-width: 0; pointer-events: auto; } .layout-weather { grid-area: weather; margin-top: 0 !important; } .layout-monitor { grid-area: monitor; margin-top: 0 !important; } .layout-bookmarks { grid-area: bookmarks; margin-top: 0 !important; } .layout-rss { grid-area: rss; margin-top: 0 !important; } .layout-monitor-work { grid-area: wmonitor; margin-top: 0 !important; } .layout-bookmarks-work { grid-area: wbookmarks; margin-top: 0 !important; } .layout-rss-work { grid-area: wrss; margin-top: 0 !important; } /* Work — Blackboard status row (split-column) */ .layout-bb-status-row { width: 100%; } .bb-status-list { list-style: none; margin: 0; padding: 0; } .bb-status-row { padding: 0.55rem 0.65rem; border-radius: 14px; background: var(--tahoe-chip-bg); border: 1px solid transparent; } .bb-status-pill { flex-shrink: 0; display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: var(--font-size-h6); font-weight: 700; text-transform: capitalize; letter-spacing: -0.01em; background: rgba(255, 255, 255, 0.1); color: var(--tahoe-text-muted) !important; } .bb-status-operational { background: rgba(52, 199, 89, 0.18); color: hsl(142, 70%, 62%) !important; } .bb-status-degraded_performance { background: rgba(255, 204, 0, 0.16); color: hsl(45, 100%, 62%) !important; } .bb-status-partial_outage, .bb-status-major_outage { background: rgba(255, 69, 58, 0.18); color: hsl(3, 100%, 72%) !important; } .bb-status-under_maintenance { background: rgba(100, 160, 255, 0.16); color: var(--tahoe-accent) !important; } .bb-maint-list { list-style: none; margin: 0; padding: 0; } .bb-maint-row { padding-bottom: 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .bb-maint-row:last-child { padding-bottom: 0; border-bottom: 0; } @media (max-width: 960px) { .page-columns, html[data-active-tab="work"] .page-columns { grid-template-columns: 1fr; grid-template-areas: "weather" "monitor" "bookmarks" "rss" "wmonitor" "wbookmarks" "wrss"; } .layout-ai-links .bookmarks-group > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .layout-ai-links .bookmarks-group > ul { grid-template-columns: 1fr; } .start-toggle { width: 100%; justify-content: center; } .multi-search-form { flex-direction: column; } } /* Liquid Glass panels */ .widget-content:not(.widget-content-frameless), .widget-content-frame { background: var(--tahoe-glass-bg) !important; backdrop-filter: blur(36px) saturate(180%); -webkit-backdrop-filter: blur(36px) saturate(180%); border: 1px solid var(--tahoe-glass-border) !important; border-radius: var(--border-radius) !important; box-shadow: var(--tahoe-glass-shadow) !important; position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease; } .widget-content:not(.widget-content-frameless)::before, .widget-content-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 145deg, var(--tahoe-glass-highlight) 0%, transparent 42%, transparent 70%, rgba(255, 255, 255, 0.06) 100% ); opacity: 0.55; z-index: 0; } .widget-content:not(.widget-content-frameless) > *, .widget-content-frame > * { position: relative; z-index: 1; } /* Ensure bookmark/monitor links remain clickable above glass styling */ .widget a[href], .bookmarks-link, .bookmarks-icon-container, .monitor-site a { position: relative; z-index: 3; pointer-events: auto !important; cursor: pointer; } .widget:hover > .widget-content:not(.widget-content-frameless), .widget:hover > .widget-content-frame { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.28) !important; } .widget-header { font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1.1rem; } /* Weather */ .houston-weather .widget-content { border-radius: 26px !important; } .houston-icon { display: block; flex-shrink: 0; object-fit: contain; } .houston-icon-now { width: 7.2rem; height: 7.2rem; } .houston-icon-hour { width: 3.2rem; height: 3.2rem; margin: 0.15rem auto 0.25rem; } .houston-now-precip, .houston-hour-precip { color: var(--tahoe-accent) !important; font-weight: 600; letter-spacing: -0.02em; } .houston-hourly-label { letter-spacing: 0.02em; text-transform: uppercase; } .houston-hourly { display: flex; gap: 0.45rem; overflow-x: auto; padding-bottom: 0.35rem; scrollbar-width: thin; } .houston-hour { flex: 0 0 3.8rem; min-width: 3.8rem; text-align: center; padding: 0.55rem 0.2rem 0.65rem; border-radius: 14px; background: var(--tahoe-chip-bg); border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .houston-hour:hover { transform: translateY(-2px); border-color: var(--tahoe-glass-border); } .houston-hour-temp { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .houston-hour-bar { margin: 0.45rem auto 0; width: 55%; height: 3px; border-radius: 999px; background: rgba(80, 150, 255, 0.18); position: relative; overflow: hidden; } .houston-hour-bar::after { content: ""; position: absolute; inset: 0; width: var(--rain, 0%); border-radius: inherit; background: linear-gradient(90deg, hsl(211, 100%, 70%), hsl(199, 100%, 62%)); } .houston-hour-wet { background: rgba(80, 150, 255, 0.14); border-color: rgba(80, 150, 255, 0.3); } .houston-hour-storm { background: rgba(80, 150, 255, 0.22); border-color: rgba(80, 150, 255, 0.45); } /* Bookmarks — 5-column group grid Homelab groups: Internal | External | Syncing | Homelab */ .layout-bookmarks .dynamic-columns, .layout-bookmarks-work .dynamic-columns { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 1.4rem 1.2rem !important; --columns-per-row: 5; } .layout-bookmarks .dynamic-columns > .bookmarks-group, .layout-bookmarks-work .dynamic-columns > .bookmarks-group { border-left: none !important; padding-left: 0 !important; min-width: 0; } @media (max-width: 1200px) { .layout-bookmarks .dynamic-columns, .layout-bookmarks-work .dynamic-columns { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 800px) { .layout-bookmarks .dynamic-columns, .layout-bookmarks-work .dynamic-columns { grid-template-columns: 1fr !important; } } .bookmarks-icon-container { border-radius: 14px; background: var(--tahoe-chip-bg); border: 1px solid var(--tahoe-glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 1; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease; } .bookmarks-link { display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; } .bookmarks-link .bookmark-inline-icon, .bookmarks-link .ai-inline-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; display: block; } .bookmarks-link:hover .bookmark-inline-icon, .bookmarks-link:hover .ai-inline-icon { transform: scale(1.08); } .bookmarks-link:hover .bookmarks-icon-container { transform: scale(1.08); background: rgba(255, 255, 255, 0.16); } .bookmarks-group-title { font-weight: 600; letter-spacing: -0.01em; font-size: var(--font-size-h5); text-transform: none; } .bookmarks-link { transition: color 0.2s ease, transform 0.2s ease; text-decoration: none; } .bookmarks-link:not(.bookmarks-link-no-arrow)::after { color: var(--tahoe-accent) !important; } .widget-type-monitor .monitor-site { border-radius: 14px; padding: 0.55rem 0.7rem; transition: background 0.2s ease, transform 0.2s ease; } .widget-type-monitor .monitor-site:hover { background: var(--tahoe-row-hover); transform: translateX(2px); } .monitor-site-icon { border-radius: 10px; } hr { background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.16), transparent ); height: 1px; opacity: 0.8; } @keyframes pageContentEntrance { from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .page.content-ready > .page-content { animation: pageContentEntrance 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; } ::selection { background-color: rgba(64, 156, 255, 0.35); color: #fff; } *:focus-visible { outline: 2px solid var(--tahoe-accent); outline-offset: 2px; border-radius: 12px; } ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } .popover, [class*="popover"] .popover-content { backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); } kbd { border-radius: 8px; border: 1px solid var(--tahoe-glass-border); background: var(--tahoe-chip-bg); color: var(--tahoe-text) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 rgba(0, 0, 0, 0.35); } .footer { opacity: 0.55; font-size: var(--font-size-h6); color: var(--tahoe-text-muted) !important; }