/* Neutral, low-chroma palette with a single accent - colour is reserved for the one action that matters on a screen, everything else is greyscale so the photos stay the loudest thing in the UI. */ :root { --bg: #fbfbfd; --surface: #ffffff; --surface-2: #f5f5f7; --border: rgba(0, 0, 0, 0.09); --text: #1d1d1f; --text-dim: #6e6e73; --accent: #0071e3; --accent-dark: #0077ed; --accent-soft: #f0f6ff; --danger: #d70015; --danger-dark: #b3000f; --radius: 14px; --radius-sm: 10px; --radius-pill: 980px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12); color-scheme: light; } /* Follows the OS preference automatically unless the user picks a theme explicitly via the toggle (which stamps data-theme on ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --border: rgba(255, 255, 255, 0.12); --text: #f5f5f7; --text-dim: #98989d; --accent: #0a84ff; --accent-dark: #409cff; --accent-soft: #1c2c40; --danger: #ff453a; --danger-dark: #ff6961; --shadow-sm: none; --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --border: rgba(255, 255, 255, 0.12); --text: #f5f5f7; --text-dim: #98989d; --accent: #0a84ff; --accent-dark: #409cff; --accent-soft: #1c2c40; --danger: #ff453a; --danger-dark: #ff6961; --shadow-sm: none; --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Large type gets tightened tracking and a lighter weight, the way Apple sets headlines - bold-and-wide reads as heavy next to a photo grid. */ h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.021em; line-height: 1.1; margin: 0 0 8px; } h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.014em; } h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* The menu runs down the left rather than across the top. The old bar had six destinations plus a dropdown, language, theme, name and sign-out fighting for one line; vertically there is room for all of it, plus a count beside each entry and the storage bar at the foot. The offset for the page content comes from `.sidebar ~ main` below: the sidebar is rendered immediately before each page's
, so no view needed restructuring, and a page without a sidebar (login, a public share link) simply doesn't match. */ :root { --sidebar-w: 208px; --sidebar-w-collapsed: 62px; --mobile-bar-h: 52px; } :root.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); z-index: 40; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); padding: 10px 8px 8px; overflow-y: auto; overflow-x: hidden; transition: width 0.18s ease; } /* Suppressed for the first two frames after load so a folded bar doesn't animate open while the page is still settling. */ :root.sidebar-no-transition .sidebar { transition: none; } /* width: auto matters as much as the margin - .page sets width: 100%, which with a left margin adds up to wider than the window and gives the whole page a horizontal scrollbar. */ .sidebar ~ main { margin-left: var(--sidebar-w); width: auto; } .sidebar-head { display: flex; align-items: center; gap: 4px; padding: 0 2px 8px; min-height: 44px; } .brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); min-width: 0; flex: 1; } .brand-logo-icon { height: 34px; width: auto; display: block; flex: 0 0 auto; } .brand-logo-wordmark { height: 22px; width: auto; display: block; } .brand-logo-wordmark-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo-wordmark-light { display: none; } :root:not([data-theme="light"]) .brand-logo-wordmark-dark { display: block; } } :root[data-theme="dark"] .brand-logo-wordmark-light { display: none; } :root[data-theme="dark"] .brand-logo-wordmark-dark { display: block; } .sidebar-collapse { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .sidebar-collapse:hover { background: var(--surface-2); color: var(--text); } .sidebar-nav { display: flex; flex-direction: column; gap: 1px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-size: 0.875rem; white-space: nowrap; } .sidebar-item:hover { background: var(--surface-2); text-decoration: none; } /* The page you are on, in the one accent this design allows itself. */ .sidebar-item-active { background: var(--accent-soft); color: var(--accent); font-weight: 500; } .sidebar-item-active:hover { background: var(--accent-soft); color: var(--accent); } .sidebar-icon { flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); } .sidebar-icon svg { width: 18px; height: 18px; display: block; } .sidebar-item-active .sidebar-icon { color: var(--accent); } .sidebar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sidebar-count { flex: 0 0 auto; font-size: 0.6875rem; color: var(--text-dim); font-variant-numeric: tabular-nums; } .sidebar-item-active .sidebar-count { color: var(--accent); } /* Accounts still waiting to be let in - a job, not a total. */ .sidebar-count-alert { background: var(--accent); color: #fff; border-radius: var(--radius-pill); padding: 1px 7px; } .sidebar-group-label { font-size: 0.6875rem; color: var(--text-dim); padding: 14px 11px 4px; border-top: 1px solid var(--border); margin: 10px 2px 2px; white-space: nowrap; } .sidebar-foot { margin-top: auto; padding-top: 12px; } .sidebar-quota { display: block; text-decoration: none; padding: 6px 9px 9px; border-radius: var(--radius-sm); } .sidebar-quota:hover { background: var(--surface-2); text-decoration: none; } .sidebar-quota-text { display: block; font-size: 0.6875rem; color: var(--text-dim); margin-bottom: 5px; white-space: nowrap; } .sidebar-quota-track { display: block; height: 4px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; } .sidebar-quota-bar { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); } .sidebar-account { border-top: 1px solid var(--border); padding-top: 6px; } .sidebar-account > summary { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer; list-style: none; font-size: 0.875rem; } .sidebar-account > summary::-webkit-details-marker { display: none; } .sidebar-account > summary:hover { background: var(--surface-2); } .sidebar-avatar { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--text-dim); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; } .sidebar-account-caret { flex: 0 0 auto; font-size: 0.75rem; color: var(--text-dim); } .sidebar-account[open] .sidebar-account-caret { transform: rotate(180deg); } .sidebar-account-menu { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0 2px; } .sidebar-account-menu a, .sidebar-account-menu .link-button { display: block; /* A block-level