/* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } button { font-family: inherit; } /* ── CSS Variables — Light theme (default) ───────────────────────────────── */ :root { --bg: linear-gradient(135deg, #dde1f0 0%, #c8cee8 100%); --dock-bg: rgba(255, 255, 255, 0.60); --dock-border: rgba(0, 0, 0, 0.10); --dock-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); --window-bg: #ffffff; --window-titlebar: rgb(244, 240, 233, 0.91); --window-titlebar-text: #0f172a; --window-border: rgba(0, 0, 0, 0.08); --window-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08); --window-shadow-focused: 0 24px 72px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(99, 102, 241, 0.35); --accent: #6366f1; --accent-muted: #e4e0de; --icon-label: #1e293b; --icon-shadow: none; --text: #0f172a; --text-muted: #43493e; --placeholder-bg: #f8fafc; --placeholder-text: #94a3b8; --separator: rgba(0, 0, 0, 0.08); } /* ── CSS Variables — Dark theme (PostHog-inspired) ───────────────────────── */ [data-theme="dark"] { --bg: linear-gradient(135deg, #060c15 0%, #0d1117 45%, #111827 100%); --dock-bg: rgba(15, 23, 42, 0.78); --dock-border: rgba(129, 140, 248, 0.18); --dock-shadow: 0 8px 40px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(129, 140, 248, 0.08); --window-bg: #0f172a; --window-titlebar: #1e293b; --window-titlebar-text: #e2e8f0; --window-border: rgba(129, 140, 248, 0.12); --window-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 20px rgba(0, 0, 0, 0.40); --window-shadow-focused: 0 28px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(129, 140, 248, 0.30); --accent: #818cf8; --accent-muted: rgba(129, 140, 248, 0.12); --icon-label: #e2e8f0; --icon-shadow: 0 1px 4px rgba(0, 0, 0, 0.80); --text: #e2e8f0; --text-muted: #94a3b8; --placeholder-bg: #1e293b; --placeholder-text: #475569; --separator: rgba(129, 140, 248, 0.10); } /* ── Desktop ─────────────────────────────────────────────────────────────── */ /* Sync html/body background with the active theme so there is no flash of the wrong colour during load or theme transitions. The JS sets data-theme on immediately before Elm renders, so these rules take effect right away. */ html { height: 100%; overflow: hidden; background: #0d1117; /* dark default — overridden below for light */ } html[data-theme="light"] { background: #dde1f0; } body { height: 100%; overflow: hidden; font-family: "Google Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } /* ── Custom scrollbars ───────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--separator); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } * { scrollbar-width: thin; scrollbar-color: var(--separator) transparent; } /* ── Focus styles ────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ── Smooth theme transitions ────────────────────────────────────────────── */ /* Excludes properties that would interfere with drag performance. */ .desktop, .window, .window__titlebar, .window__content, .window__placeholder, .dock, .dock__theme-btn, .desktop-icon { transition: background 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; } /* ── Window open animation ───────────────────────────────────────────────── */ @keyframes windowOpen { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes windowClose { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.75); } } .desktop { width: 100vw; height: 100dvh; overflow: hidden; position: relative; background: url('./bg-laviesta3.png') center center / 1250px no-repeat, url('./bg-repeat.jpg') repeat; font-family: "Google Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } /* Overlay for dot-grid texture */ .desktop::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* Ensure all direct children sit above the dot-grid pseudo-element */ .desktop > * { position: relative; z-index: 1; } /* Dock is fixed so it stays on top regardless */ .desktop--dragging { cursor: grabbing; user-select: none; } /* ── Desktop icons ───────────────────────────────────────────────────────── */ .desktop-icons { position: absolute; display: flex; flex-direction: column; gap: 20px; z-index: 1; } .desktop-icons--top-left { top: calc(40px + 24px); left: 24px; } .desktop-icons--apps { top: calc(40px + 24px); left: 124px; } .desktop-icons--top-right { top: calc(40px + 24px); right: 24px; } .desktop-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 76px; border-radius: 12px; padding: 8px 4px; transition: background 0.15s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; } .desktop-icon:hover { background: var(--accent-muted); transform: translateY(-3px) scale(1.06); } .desktop-icon:active { background: rgba(129, 140, 248, 0.22); transform: translateY(0) scale(0.96); } .desktop-icon__img { font-size: 36px; color: var(--icon-label); line-height: 1; } .desktop-icon__caret { font-size: 14px; color: var(--icon-label); opacity: 0.6; line-height: 1; } .desktop-icon__label { font-size: 11px; font-weight: 500; color: var(--icon-label); text-shadow: var(--icon-shadow); text-align: center; line-height: 1.3; max-width: 68px; word-break: break-word; } /* ── Windows layer ───────────────────────────────────────────────────────── */ .windows-layer { position: absolute; inset: 0; pointer-events: none; } .windows-layer > * { pointer-events: auto; } /* ── Window chrome ───────────────────────────────────────────────────────── */ .window { position: absolute; border-radius: 5px; border: 1px solid var(--window-border); background: var(--window-bg); box-shadow: var(--window-shadow); display: flex; flex-direction: column; min-width: 320px; min-height: 240px; overflow: hidden; transition: box-shadow 0.15s ease; animation: windowOpen 0.20s cubic-bezier(0.34, 1.30, 0.64, 1) both; transform-origin: center center; } .window--closing { animation: windowClose 0.12s ease-in forwards; pointer-events: none; } .window--focused { box-shadow: var(--window-shadow-focused); } .window--maximized { position: fixed !important; top: 40px !important; /* sit below the fixed topbar */ left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: calc(100dvh - 40px) !important; border-radius: 0 !important; } /* Title bar */ .window__titlebar { height: 42px; background: var(--window-titlebar); border-bottom: 1px solid var(--window-border); display: flex; position: relative; align-items: center; padding: 0 12px; gap: 10px; cursor: grab; user-select: none; flex-shrink: 0; } .window__titlebar:active { cursor: grabbing; } /* Windows-style titlebar buttons */ .window__controls { display: flex; gap: 0; align-items: stretch; flex-shrink: 0; height: 100%; margin-left: auto; } .window__btn { width: 34px; height: calc( 100% - 12px ); /* 5px margin top + 5px margin bottom = 10px total vertical margin */ margin-top:5px; margin-bottom:5px; margin-left:2px; margin-right:2px; border-radius: 0; border:1px solid transparent; border-radius:5px; cursor: pointer; padding: 0; font-size: 15px; background: transparent; color: var(--window-titlebar-text); display: flex; align-items: center; justify-content: center; transition: background 0.1s ease, color 0.1s ease; } .window__btn--minimize:hover { border-color: var(--accent-muted); } .window__btn--maximize:hover { border-color: var(--accent-muted); } .window__btn--close:hover { border-color: var(--accent-muted); } .window__title { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--window-titlebar-text); letter-spacing: 0.01em; white-space: nowrap; pointer-events: none; } .window__title-icon { font-size: 18px; opacity: 0.7; } /* Info button on the left of the titlebar */ .window__info-wrap { position: relative; flex-shrink: 0; margin-right: 4px; } .window__info-btn { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; height: 32px; border: none; border-radius: 6px; background: transparent; color: var(--window-titlebar-text); font-size: 24px; cursor: pointer; opacity: 0.75; transition: opacity 0.15s, background 0.15s; } .window__info-btn:hover, .window__info-btn--active { opacity: 1; background: var(--accent-muted); } .window__info-caret { font-size: 12px; opacity: 0.5; pointer-events: none; } /* App info popover */ .window__info-popover { position: absolute; top: calc(100% + 8px); left: 0; width: 240px; background: var(--window-bg); border: 1px solid var(--window-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; z-index: 100; } .window__info-popover__title { font-size: 13px; font-weight: 700; color: var(--text); } .window__info-popover__body { font-size: 12px; line-height: 1.6; color: var(--text-muted); } /* Content */ .window__content { flex: 1; overflow: auto; background: var(--window-bg); color: var(--text); position: relative; } /* Placeholder (replaced in steps 7–9) */ .window__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--placeholder-bg); } .window__placeholder-icon { font-size: 52px; opacity: 0.45; } .window__placeholder-label { font-size: 14px; font-weight: 600; color: var(--placeholder-text); } .window__placeholder-sub { font-size: 12px; color: var(--placeholder-text); opacity: 0.70; } /* ── Top header bar ──────────────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: 40px; z-index: 9999; display: flex; align-items: center; padding: 0 16px; gap: 0; background: var(--window-titlebar); border-bottom: 1px solid var(--window-border); transition: background 0.25s ease, border-color 0.25s ease; } /* Logo */ .topbar__logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-right: 20px; text-decoration: none; } .topbar__logo-icon { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; } .topbar__logo-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } /* Nav links */ .topbar__nav { display: flex; align-items: center; gap: 2px; flex: 1; } .topbar__nav-item { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 5px; border: none; background: transparent; color: var(--text); font-size: 13.5px; line-height:18px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .topbar__dropdown--open > .topbar__nav-item, .topbar__nav-item:hover { background: var(--accent-muted); color: var(--text); } .topbar__nav-item:active { opacity: 0.75; } .topbar__nav-item--open { color: var(--text); } /* Open indicator dot below the active nav item */ .topbar__nav-item--open::after { content: ""; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .topbar__nav-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } /* Apps dropdown */ .topbar__dropdown { position: relative; } .topbar__dropdown-arrow { font-size: 18px; margin-left: 3px; opacity: 0.6; display: inline-block; position:relative; top:-1px; transition: transform 0.15s ease; } .topbar__dropdown-menu { position: absolute; top: calc( 100% + 15px ); /* 8px gap + 6px nav item padding */ left: 0; min-width: 190px; background: var(--window-titlebar); border-radius: 5px; padding: 4px; box-shadow: var(--window-shadow); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease; z-index: 10000; } .topbar__actions .topbar__dropdown-menu { top: calc( 100% + 12px ); /* 8px gap (no nav item padding on the right) */ } .topbar__dropdown--open .topbar__dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .topbar__dropdown--open .topbar__dropdown-arrow { top:1px; transform: rotate(180deg); } /* Click-away overlay — sits below topbar (z-index 9999) but above everything else */ .topbar-overlay { position: fixed; inset: 0; z-index: 9998; } .topbar__dropdown-item { display: flex; align-items: center; width: 100%; padding: 8px 12px; border-radius: 5px; border: none; background: transparent; color: var(--text); font-size: 13.5px; font-weight: 500; font-family: inherit; text-align: left; cursor: pointer; transition: background 0.1s ease; } .topbar__dropdown-item:hover { background: var(--accent-muted); } /* Right actions */ .topbar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } .topbar__theme-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--window-border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; font-family: inherit; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .topbar__theme-btn:hover { background: var(--accent-muted); color: var(--text); transform: scale(1.08); } .topbar__theme-btn:active { transform: scale(0.94); } /* Storage icon button — same shape as theme toggle */ .topbar__icon-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--window-border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; font-family: inherit; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .topbar__icon-btn:hover { background: var(--accent-muted); color: var(--text); transform: scale(1.08); } .topbar__icon-btn:active { transform: scale(0.94); } /* Right-aligned dropdown (opens to the left) */ .topbar__dropdown--right .topbar__dropdown-menu { left: auto; right: 0; } /* Storage dropdown panel */ .topbar__storage-menu { min-width: 220px; } .topbar__storage-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 8px 0; padding: 0 8px; } .topbar__storage-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 6px; } .topbar__storage-row:hover { background: var(--accent-muted); } .topbar__storage-label { font-size: 13px; color: var(--text); } .topbar__storage-value { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .topbar__storage-total { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; margin-top: 4px; border-top: 1px solid var(--window-border); font-size: 13px; font-weight: 600; color: var(--text); } /* Date & time */ .topbar__datetime { font-size: 12.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; padding: 0 4px; font-variant-numeric: tabular-nums; } /* Push the windows layer + dot-grid below the header */ .desktop { padding-top: 40px; } /* ── Dock ────────────────────────────────────────────────────────────────── */ .dock { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--dock-bg); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--dock-border); border-radius: 22px; box-shadow: var(--dock-shadow); padding: 10px 16px; display: flex; align-items: center; gap: 6px; z-index: 9999; } .dock__separator { width: 1px; height: 30px; background: var(--separator); margin: 0 4px; } .dock__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; border: none; background: transparent; padding: 4px 6px; border-radius: 14px; transition: transform 0.15s ease, background 0.15s ease; -webkit-tap-highlight-color: transparent; } .dock__item:hover { transform: translateY(-5px) scale(1.12); background: var(--accent-muted); } .dock__item:active { transform: translateY(-2px) scale(1.05); } .dock__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; } .dock__label { font-size: 10px; font-weight: 500; color: var(--text-muted); max-width: 54px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Open indicator dot */ .dock__item--open::after { content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } /* Theme-toggle button */ .dock__theme-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--dock-border); background: var(--window-titlebar); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; } .dock__theme-btn:hover { transform: translateY(-5px) scale(1.12); background: var(--accent); color: #fff; } .dock__theme-btn:active { transform: translateY(-2px) scale(1.05); } /* ── Mobile animations ───────────────────────────────────────────────────── */ @keyframes panelSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes homeGridFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Mobile shell ────────────────────────────────────────────────────────── */ .mobile { width: 100vw; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); font-family: "Google Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; position: relative; } /* Same dot-grid texture as desktop */ .mobile::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(148, 163, 184, 0.13) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: 0; } .mobile[data-theme="light"]::before { background-image: radial-gradient(circle, rgba(100, 116, 139, 0.10) 1px, transparent 1px); } .mobile > * { position: relative; z-index: 1; } /* Smooth theme transitions on mobile */ .mobile, .mobile-home, .mobile-home__header, .mobile-home__theme-btn, .mobile-icon, .mobile-panel, .mobile-panel__header, .mobile-panel__back { transition: background 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ── Home screen ─────────────────────────────────────────────────────────── */ .mobile-home { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .mobile-home__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; padding-top: max(16px, env(safe-area-inset-top)); } .mobile-home__title { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .mobile-home__theme-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--dock-border); background: var(--dock-bg); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-tap-highlight-color: transparent; } .mobile-home__theme-btn:active { opacity: 0.7; transform: scale(0.94); } .mobile-home__grid { flex: 1; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 16px; padding: 24px 20px; overflow-y: auto; animation: homeGridFadeIn 0.28s cubic-bezier(0.34, 1.20, 0.64, 1) both; } /* ── Mobile icon ─────────────────────────────────────────────────────────── */ .mobile-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; width: calc(33.333% - 11px); padding: 12px 8px; border-radius: 16px; -webkit-tap-highlight-color: transparent; } .mobile-icon:active { opacity: 0.7; transform: scale(0.94); } .mobile-icon__img { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26), 0 1px 4px rgba(0, 0, 0, 0.16); transition: box-shadow 0.15s ease, transform 0.15s ease; } .mobile-icon:active .mobile-icon__img { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20); } .mobile-icon__label { font-size: 12px; font-weight: 500; color: var(--icon-label); text-shadow: var(--icon-shadow); text-align: center; line-height: 1.3; max-width: 72px; word-break: break-word; } /* ── App panel ───────────────────────────────────────────────────────────── */ .mobile-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; animation: panelSlideUp 0.24s cubic-bezier(0.34, 1.20, 0.64, 1) both; } .mobile-panel__header { height: 52px; padding-top: max(0px, env(safe-area-inset-top)); height: calc(52px + max(0px, env(safe-area-inset-top))); background: var(--window-titlebar); border-bottom: 1px solid var(--window-border); display: flex; align-items: flex-end; padding-bottom: 0; padding-left: 4px; padding-right: 16px; flex-shrink: 0; } .mobile-panel__back { height: 44px; padding: 0 12px; border: none; background: transparent; color: var(--accent); font-size: 16px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .mobile-panel__back:active { opacity: 0.6; } .mobile-panel__title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: var(--window-titlebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 10px; } .mobile-panel__spacer { /* mirrors back button width so title is centred */ width: 60px; flex-shrink: 0; } .mobile-panel__content { flex: 1; overflow: hidden; position: relative; background: var(--window-bg); color: var(--text); } /* ── Static pages (About, FAQ) ───────────────────────────────────────────── */ /* ── Minimized windows tray ──────────────────────────────────────────────── */ .minimized-tray { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: row; gap: 8px; padding: 8px 12px; background: var(--dock-bg); border: 1px solid var(--dock-border); border-radius: 12px; box-shadow: var(--dock-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 500; } .minimized-item { display: flex; align-items: center; border: 1px solid var(--window-border); border-radius: 8px; background: var(--window-titlebar); color: var(--window-titlebar-text); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); overflow: hidden; white-space: nowrap; } .minimized-item__restore { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; border: none; color: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s; } .minimized-item__restore:hover { background: var(--accent-muted); } .minimized-item__close { display: flex; align-items: center; justify-content: center; padding: 8px 8px; background: transparent; border: none; border-left: 1px solid var(--window-border); color: var(--text-muted); font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s; } .minimized-item__close:hover { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .minimized-tray__empty { font-size: 12px; color: var(--text-muted); opacity: 0.6; white-space: nowrap; padding: 2px 4px; } .minimized-item:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); } .minimized-item i { font-size: 16px; opacity: 0.8; } /* ── Static pages ────────────────────────────────────────────────────────── */ .static-page { padding: 24px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; height: 100%; } .static-page__section { display: flex; flex-direction: column; gap: 8px; } .static-page__heading { font-size: 14px; font-weight: 700; color: var(--text); } .static-page__body { font-size: 13px; line-height: 1.7; color: var(--text-muted); white-space: pre-wrap; }