/* ========================================================================== BookmarkHub — design system A restrained white theme: hairline borders, generous whitespace, one accent colour, and type that does most of the work. ========================================================================== */ :root { /* Surfaces */ --bg: #ffffff; --bg-subtle: #fafafa; --bg-sunken: #f6f6f7; --surface-hover: #f4f4f5; --surface-active: #efeff1; /* Lines */ --border: #eaeaec; --border-strong: #dcdce0; /* Ink */ --text: #09090b; --text-secondary: #52525b; --text-muted: #9b9ba3; /* Accent — a true blue rather than the old violet-leaning indigo. Held at this depth deliberately: a brighter blue (#5469ff and up) drops under 4.5:1 on white, and the accent is used for link text, not just fills. */ --accent: #4c5fd7; --accent-hover: #3f50c4; --accent-soft: #eef1fe; --accent-border: #d5dcfa; /* Status */ --danger: #dc2626; --danger-soft: #fef2f2; --success: #16a34a; --warning: #b45309; --warning-soft: #fffbeb; /* Geometry */ --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* Elevation — deliberately soft; borders carry most of the structure */ --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-sm: 0 1px 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-md: 0 4px 14px -2px rgba(9, 9, 11, 0.08), 0 2px 6px -2px rgba(9, 9, 11, 0.04); --shadow-lg: 0 20px 50px -12px rgba(9, 9, 11, 0.16), 0 6px 16px -6px rgba(9, 9, 11, 0.06); --ring: 0 0 0 3px rgba(76, 95, 215, 0.14); /* "Inter" sat here for a while but was never actually loaded anywhere (no @font-face, no CDN link) — every visitor was silently falling through to their OS default. Now genuinely loaded (see the tags in , every page), which matters beyond looks: the weight values used throughout this file (500, 550, 650, ...) only render as distinct steps on a variable font like this one — a system font's handful of fixed cuts would collapse most of them to the same rendered weight. Real system-font fallbacks after it either way, in case the request is blocked or slow. */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace; --topbar-h: 61px; --sidebar-w: 252px; --ease: cubic-bezier(0.32, 0.72, 0, 1); } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.022em; font-weight: 600; } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.038em; } h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -0.03em; } h3 { font-size: 1.0625rem; } ::selection { background: var(--accent-soft); color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Scrollbars — thin and unobtrusive */ * { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #dcdce0; border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #c4c4cb; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* ========================================================================== Primitives ========================================================================== */ .btn { --btn-bg: transparent; --btn-fg: var(--text); --btn-border: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font-size: 14px; font-weight: 500; letter-spacing: -0.008em; white-space: nowrap; cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), opacity 0.15s var(--ease), transform 0.1s var(--ease); } .btn:active:not(:disabled) { transform: scale(0.985); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn svg { width: 16px; height: 16px; flex: none; } .btn-primary { --btn-bg: var(--text); --btn-fg: #fff; box-shadow: var(--shadow-xs); } .btn-primary:hover:not(:disabled) { --btn-bg: #27272a; } .btn-accent { --btn-bg: var(--accent); --btn-fg: #fff; box-shadow: var(--shadow-xs); } .btn-accent:hover:not(:disabled) { --btn-bg: var(--accent-hover); } .btn-secondary { --btn-bg: #fff; --btn-border: var(--border-strong); box-shadow: var(--shadow-xs); } .btn-secondary:hover:not(:disabled) { --btn-bg: var(--surface-hover); } .btn-ghost { --btn-fg: var(--text-secondary); } .btn-ghost:hover:not(:disabled) { --btn-bg: var(--surface-hover); --btn-fg: var(--text); } .btn-danger { --btn-fg: var(--danger); } .btn-danger:hover:not(:disabled) { --btn-bg: var(--danger-soft); } .btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 11px; } .btn-lg:hover:not(:disabled) { transform: translateY(-1px); } .btn-lg:active:not(:disabled) { transform: translateY(0) scale(0.985); } .btn-sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: var(--r-sm); } .btn-block { width: 100%; } /* Square icon-only button */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .icon-btn:hover { background: var(--surface-hover); color: var(--text); } .icon-btn.is-danger:hover { background: var(--danger-soft); color: var(--danger); } .icon-btn.is-on { color: var(--accent); } .icon-btn svg { width: 17px; height: 17px; } /* Form controls */ .field { display: flex; flex-direction: column; gap: 6px; } .label { font-size: 13px; font-weight: 500; color: var(--text-secondary); letter-spacing: -0.005em; } .input, .textarea, .select { width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: #fff; font-size: 14.5px; color: var(--text); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--text-muted); } .input[readonly] { background: var(--bg-subtle); color: var(--text-secondary); cursor: default; } .input:hover, .textarea:hover, .select:hover { border-color: #c9c9d0; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .textarea { resize: vertical; min-height: 84px; line-height: 1.55; } .select { appearance: none; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9ba3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px; } .hint { font-size: 12.5px; color: var(--text-muted); } .error-text { font-size: 13px; color: var(--danger); } .turnstile-widget { margin: 2px 0 4px; width: 100%; /* size: 'flexible' in the render() call (app.js) is what actually makes Cloudflare's iframe stretch to fill this container instead of staying at its fixed 300px default — width:100% alone wouldn't do it, since the iframe still requests its own fixed dimensions otherwise. */ /* Cloudflare's iframe renders with its own square corners that CSS can't reach inside — clipping the wrapper to the same radius as every input around it is the only way to make it read as part of this form rather than a foreign embed dropped into it. */ border-radius: var(--r-md); overflow: hidden; } /* Tags */ .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-sm); background: var(--surface-active); color: var(--text); font-size: 12px; font-weight: 500; letter-spacing: -0.003em; white-space: nowrap; border: 1px solid var(--border); cursor: pointer; transition: background 0.13s var(--ease), color 0.13s var(--ease), border-color 0.13s var(--ease); } .tag:hover { background: var(--accent-soft); color: var(--accent-hover); } .tag.is-active { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent-border); } .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; background: var(--bg-sunken); color: var(--text-secondary); } .badge-pro { background: var(--text); color: #fff; } .badge-accent { background: var(--accent-soft); color: var(--accent-hover); } kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: #fff; font-family: var(--font); font-size: 11px; font-weight: 500; color: var(--text-muted); } /* Favicon tile with monogram fallback */ .favicon { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--tile, var(--bg-subtle)); overflow: hidden; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -0.01em; text-transform: uppercase; user-select: none; } /* Monogram shows until the real favicon reports a successful load. */ .favicon::before { content: attr(data-mono); } .favicon.has-icon { background: var(--bg-subtle); } .favicon.has-icon::before { content: none; } .favicon img { position: absolute; width: 17px; height: 17px; border-radius: 3px; opacity: 0; } .favicon.has-icon img { opacity: 1; } /* ========================================================================== Marketing site ========================================================================== */ .wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px; } .wrap-narrow { max-width: 760px; } .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); } .site-header.is-stuck { border-bottom-color: var(--border); } .site-header__inner { display: flex; align-items: center; gap: 32px; height: 64px; } .logo { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.024em; color: var(--text); } .logo__mark { display: inline-block; width: 27px; height: 27px; flex: none; background: url('/favicon.svg') center / contain no-repeat; font-size: 0; } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .site-nav a { padding: 7px 11px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: background 0.15s var(--ease), color 0.15s var(--ease); } .site-nav a:hover { background: var(--surface-hover); color: var(--text); } .site-header__cta { display: flex; align-items: center; gap: 8px; } /* Footer */ .site-footer { border-top: 1px solid var(--border); padding: 40px 0; } .site-footer__inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .site-footer p { font-size: 13.5px; color: var(--text-muted); } .site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; } .site-footer nav a, .site-footer nav button { font-size: 13.5px; color: var(--text-secondary); background: none; border: none; padding: 0; cursor: pointer; } .site-footer nav a:hover, .site-footer nav button:hover { color: var(--text); } /* ========================================================================== Auth screen ========================================================================== */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(76, 95, 215, 0.07), transparent), var(--bg); } .auth2 { width: 100%; max-width: 520px; border: 1px solid var(--border); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; } .auth2__form { padding: 40px 48px 40px; } .auth2__form .logo { margin-bottom: 28px; } .auth h1 { font-size: 22px; letter-spacing: -0.026em; } .auth__sub { margin-top: 6px; margin-bottom: 26px; font-size: 14.5px; color: var(--text-secondary); } .auth form { display: flex; flex-direction: column; gap: 16px; } .auth__field-row { display: flex; gap: 14px; } .auth__field-row .field { flex: 1; min-width: 0; } .auth__legal { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); } .auth__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .auth__legal a:hover { color: var(--text-secondary); } .auth__switch { margin-top: 20px; font-size: 14px; color: var(--text-secondary); } .auth__switch button { background: none; border: none; padding: 0; color: var(--accent); font-weight: 550; cursor: pointer; } .auth__switch button:hover { text-decoration: underline; } .auth__back { display: block; width: 100%; margin-top: 18px; padding: 0; border: none; background: none; text-align: left; font-size: 13.5px; font-family: inherit; color: var(--text-muted); cursor: pointer; } .auth__back:hover { color: var(--text-secondary); } /* Google button + divider */ .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; margin-bottom: 18px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: #fff; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 550; cursor: pointer; transition: background 0.13s var(--ease), border-color 0.13s var(--ease), box-shadow 0.13s var(--ease); } .btn-google:hover { background: var(--bg-subtle); border-color: var(--text-muted); } .btn-google:active { background: var(--surface-hover); } .auth__divider { position: relative; margin-top: 20px; margin-bottom: 18px; text-align: center; font-size: 12.5px; color: var(--text-muted); } .auth__divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); } .auth__divider span { position: relative; padding: 0 12px; background: #fff; } /* Live password strength meter — replaces the plain hint once typing starts, only shown where a NEW password is being chosen (signup/reset), never on login. */ .pw-strength { margin-top: 7px; } .pw-strength__track { height: 4px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; } .pw-strength__track i { display: block; height: 100%; width: 0%; border-radius: var(--r-full); transition: width 0.2s var(--ease), background-color 0.2s var(--ease); } .pw-strength span { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; } .link-btn { align-self: flex-start; padding: 0; border: none; background: none; font-size: 13px; font-weight: 550; color: var(--accent); cursor: pointer; margin-top: -6px; } .link-btn:hover { text-decoration: underline; } /* ========================================================================== App shell ========================================================================== */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* Sidebar */ .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--bg-subtle); } .sidebar__head { display: flex; align-items: center; height: var(--topbar-h); padding: 0 16px; flex: none; } .sidebar__body { flex: 1; overflow-y: auto; padding: 4px 12px 16px; } .sidebar__foot { flex: none; padding: 12px; border-top: 1px solid var(--border); } .nav-group { margin-bottom: 22px; } .nav-group__label { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; color: var(--text-secondary); } .nav-group__label button { border: none; background: none; padding: 2px; color: var(--text-muted); cursor: pointer; border-radius: 4px; display: grid; place-items: center; } .nav-group__label button:hover { background: var(--surface-active); color: var(--text); } .nav-group__label svg { width: 14px; height: 14px; } .nav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: none; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 14px; font-weight: 500; letter-spacing: -0.008em; text-align: left; cursor: pointer; transition: background 0.13s var(--ease), color 0.13s var(--ease); } .nav-item:hover { background: var(--surface-active); color: var(--text); } .nav-item.is-active { background: #fff; color: var(--text); font-weight: 550; /* inset ring instead of a border so the active state doesn't shift layout */ box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--border); } .nav-item.is-active svg { opacity: 1; color: var(--accent); } .nav-item svg { width: 16px; height: 16px; flex: none; opacity: 0.85; } .nav-item__text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item__count { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .nav-item.is-active .nav-item__count { color: var(--text-secondary); } .nav-item__more { opacity: 0; display: grid; place-items: center; padding: 2px; border-radius: 4px; color: var(--text-muted); } .nav-item:hover .nav-item__more { opacity: 1; } .nav-item__more:hover { background: var(--surface-hover); color: var(--text); } /* On collection rows the overflow button takes the count's place on hover */ .nav-item[data-collection]:hover .nav-item__count { display: none; } /* Small dot marking a collection that's publicly shared */ .nav-item__shared { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2.5px rgba(22, 163, 74, 0.16); } .tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 8px; } .sidebar__empty { padding: 4px 9px; font-size: 13px; color: var(--text-muted); line-height: 1.5; } /* Usage meter */ .usage { padding: 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; } .usage__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } .usage__label { font-size: 12.5px; font-weight: 600; color: var(--text); } .usage__count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .usage__bar { height: 5px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; } .usage__fill { height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width 0.4s var(--ease), background 0.3s var(--ease); } .usage__fill.is-warn { background: var(--warning); } .usage__fill.is-full { background: var(--danger); } .usage p { margin-top: 9px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; } .usage .btn { margin-top: 11px; } /* Quiet one-line plan mention for accounts that are already Pro — no box, no badge, nothing shouting a status back at someone who's already paying. */ .plan-line { display: flex; align-items: center; justify-content: space-between; padding: 4px 9px; font-size: 12.5px; color: var(--text-muted); } .plan-line span { font-weight: 500; color: var(--text-secondary); } .plan-line button { padding: 0; border: none; background: none; font-size: 12.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; } .plan-line button:hover { color: var(--text); text-decoration: underline; } /* Cookie notice — a centred popup over a dimmed page, so the choice is made deliberately rather than ignored in the corner. The backdrop is the positioning context; the card inside it is what animates. */ .cookie-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(9, 9, 11, 0.34); opacity: 0; transition: opacity 0.3s var(--ease); } .cookie-backdrop.is-open { opacity: 1; } .cookie-banner { width: 100%; max-width: 440px; padding: 26px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 24px 60px -12px rgba(9, 9, 11, 0.32), 0 8px 20px -8px rgba(9, 9, 11, 0.16); text-align: center; transform: translateY(12px) scale(0.97); opacity: 0; transition: transform 0.34s var(--ease), opacity 0.34s var(--ease); } .cookie-backdrop.is-open .cookie-banner { transform: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .cookie-backdrop, .cookie-banner { transition: opacity 0.2s linear; transform: none; } } .cookie-banner__icon { width: 46px; height: 46px; margin: 0 auto 16px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; } .cookie-banner__icon svg { width: 25px; height: 25px; } .cookie-banner__title { font-size: 17px; font-weight: 650; letter-spacing: -0.018em; margin-bottom: 8px; } .cookie-banner__body p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); } .cookie-banner__body a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__actions { display: flex; gap: 9px; margin-top: 22px; } .cookie-banner__actions .btn { flex: 1; } @media (max-width: 420px) { .cookie-banner { padding: 22px; } .cookie-banner__actions { flex-direction: column-reverse; } } /* Topbar */ .main { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 22px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } .search { position: relative; flex: 1; max-width: 440px; } .search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; } .search input { width: 100%; height: 37px; padding: 0 62px 0 34px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-subtle); font-size: 14px; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } /* type="search" gets its own native clear button in WebKit/Blink, which was rendering right alongside the custom animated one above — two X's stacked at the same corner. This is the one we designed; that one has to go. */ .search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; } .search input::placeholder { color: var(--text-muted); } .search input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: var(--ring); } /* Both live in the DOM at once rather than swapping via display:none — that can't transition at all, which is what made this swap feel like a snap instead of a collapse. Sharing one spot and crossfading with a small scale gives the hint a sense of tucking away as the clear button takes its place, instead of one blinking off and the other blinking on. */ .search__kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%) scale(1); display: flex; gap: 3px; opacity: 1; pointer-events: none; transition: opacity 0.14s var(--ease), transform 0.14s var(--ease); } .search input:focus ~ .search__kbd, .search.has-value .search__kbd { opacity: 0; transform: translateY(-50%) scale(0.7); } .search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) scale(0.5); width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--surface-active); color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.16s var(--ease), transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.13s var(--ease); } .search__clear:hover { background: var(--surface-hover); color: var(--text); } .search.has-value .search__clear { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .search__kbd, .search__clear { transition: opacity 0.1s linear; } } .topbar__spacer { flex: 1; } .topbar__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; } .seg { display: flex; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-subtle); } .seg button { display: grid; place-items: center; width: 30px; height: 29px; border: none; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; transition: background 0.13s var(--ease), color 0.13s var(--ease); } .seg button:hover { color: var(--text); } .seg button.is-active { background: #fff; color: var(--text); box-shadow: var(--shadow-xs); } .seg svg { width: 16px; height: 16px; } /* Compact select for toolbar use */ .select-sm { width: auto; height: 34px; padding: 0 29px 0 11px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background-color: var(--bg-subtle); background-position: right 8px center; background-size: 14px; } .select-sm:hover { color: var(--text); } /* Avatar menu */ .menu { position: relative; } .avatar { display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; text-transform: uppercase; } .menu__pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 216px; padding: 5px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-lg); z-index: 50; display: none; } .menu.is-open .menu__pop { display: block; animation: pop 0.14s var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } } .menu__head { padding: 9px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px; } .menu__head strong { display: block; font-size: 13.5px; font-weight: 600; } .menu__head span { display: block; font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; } #menuUsage:not(:empty) { margin-bottom: 5px; } #menuUsage .usage { border-radius: var(--r-sm); } .menu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; border-radius: var(--r-sm); background: none; color: var(--text-secondary); font-size: 14px; text-align: left; cursor: pointer; } .menu__item:hover { background: var(--surface-hover); color: var(--text); } .menu__item svg { width: 16px; height: 16px; opacity: 0.7; } .menu__item.is-danger:hover { background: var(--danger-soft); color: var(--danger); } .menu__sep { height: 1px; background: var(--border); margin: 5px 0; } /* Content area */ .content { flex: 1; padding: 28px 26px 72px; } .content__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .content__title { font-size: 20px; font-weight: 600; letter-spacing: -0.026em; } .content__sub { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .content__sub::before { content: "·"; margin-right: 9px; opacity: 0.55; } .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 18px; } .filter-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border: 1px solid var(--accent-border); border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-hover); font-size: 12.5px; font-weight: 500; } .filter-pill button { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: none; border-radius: 50%; background: rgba(76, 95, 215, 0.14); color: var(--accent-hover); cursor: pointer; } .filter-pill button:hover { background: rgba(76, 95, 215, 0.24); } .filter-pill svg { width: 10px; height: 10px; } /* Bookmark grid */ .bookmarks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .bm { position: relative; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; cursor: pointer; animation: card-in 0.38s var(--ease) backwards; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease); } @keyframes card-in { from { opacity: 0; transform: translateY(7px); } } .bm:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); } .bm:has(.bm__title:focus-visible) { border-color: var(--accent); box-shadow: var(--ring); } .bm__top { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 9px; } .bm__head { min-width: 0; flex: 1; } .bm__title { font-size: 14.5px; font-weight: 550; letter-spacing: -0.013em; line-height: 1.42; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bm:hover .bm__title { color: var(--accent); } .bm__title:focus-visible { outline: none; } /* Lives as a normal flex sibling in .bm__top, not an absolute overlay — that guarantees it can never land on top of the title text, however long the title runs, without needing to reserve an exact matching padding for it. */ .bm__fav { flex: none; width: 26px; height: 26px; color: var(--text-muted); opacity: 0.55; transition: opacity 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease); } .bm:hover .bm__fav { opacity: 1; } .bm__fav:hover { transform: scale(1.08); } .bm__fav.is-on { opacity: 1; color: #f59e0b; } .bm__domain { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bm__domain svg { width: 11px; height: 11px; flex: none; opacity: 0.8; } .bm__note { font-size: 13px; line-height: 1.52; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 11px; } .bm__foot { display: flex; align-items: center; gap: 7px; margin-top: auto; min-height: 22px; } .bm__tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; } .bm__date { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; flex: none; } .bm__collection { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); font-size: 11.5px; color: var(--text-muted); } .bm__collection svg { width: 11px; height: 11px; } /* Hover actions — float above the card on a solid backdrop, to the left of the always-visible favourite star so the two never compete for clicks. */ .bm__actions { position: absolute; top: 8px; right: 44px; display: flex; gap: 1px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(-3px) scale(0.97); transition: opacity 0.14s var(--ease), transform 0.14s var(--ease); pointer-events: none; } .bm:hover .bm__actions, .bm:focus-within .bm__actions { opacity: 1; transform: none; pointer-events: auto; } .bm__actions .icon-btn { width: 26px; height: 24px; border-radius: 6px; } .bm__actions .icon-btn svg { width: 14px; height: 14px; } /* ---- List variant: one bordered table-like block ---- */ .bookmarks.is-list { display: block; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; overflow: hidden; } .bookmarks.is-list .bm { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; border: none; border-bottom: 1px solid var(--border); border-radius: 0; transform: none; box-shadow: none; } .bookmarks.is-list .bm:last-child { border-bottom: none; } .bookmarks.is-list .bm:hover { background: var(--bg-subtle); box-shadow: none; transform: none; } .bookmarks.is-list .bm__top { margin: 0; flex: 1; min-width: 0; align-items: center; } .bookmarks.is-list .bm__title { -webkit-line-clamp: 1; font-size: 14px; } .bookmarks.is-list .bm__note { display: none; } .bookmarks.is-list .bm__foot { margin: 0; flex: none; min-height: 0; gap: 10px; padding-right: 78px; } .bookmarks.is-list .bm__tags { flex: none; flex-wrap: nowrap; } .bookmarks.is-list .bm__collection { display: none; } .bookmarks.is-list .bm__date { width: 46px; text-align: right; } .bookmarks.is-list .bm__actions { top: 50%; right: 12px; transform: translateY(-50%) scale(0.97); } .bookmarks.is-list .bm:hover .bm__actions { transform: translateY(-50%); } @media (max-width: 700px) { .bookmarks.is-list .bm__foot { display: none; } } /* Empty & loading states */ .empty { display: grid; place-items: center; padding: 72px 24px; text-align: center; grid-column: 1 / -1; } .empty__ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-subtle); color: var(--text-muted); } .empty__ico svg { width: 22px; height: 22px; } .empty h3 { font-size: 16.5px; margin-bottom: 6px; } .empty p { max-width: 40ch; color: var(--text-secondary); font-size: 14.5px; } .empty .btn { margin-top: 20px; } .skeleton-card { position: relative; height: 146px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; overflow: hidden; } .skeleton-card::before { /* rough silhouette of a card: tile, two title lines, a note block, tags */ content: ""; position: absolute; inset: 14px 15px; background: linear-gradient(#f1f1f3, #f1f1f3) 0 0 / 30px 30px no-repeat, linear-gradient(#f4f4f5, #f4f4f5) 41px 3px / 60% 10px no-repeat, linear-gradient(#f7f7f8, #f7f7f8) 41px 20px / 38% 9px no-repeat, linear-gradient(#f4f4f5, #f4f4f5) 0 48px / 100% 9px no-repeat, linear-gradient(#f4f4f5, #f4f4f5) 0 64px / 82% 9px no-repeat, linear-gradient(#f1f1f3, #f1f1f3) 0 96px / 52px 20px no-repeat, linear-gradient(#f1f1f3, #f1f1f3) 58px 96px / 44px 20px no-repeat; border-radius: 8px; } .skeleton-card::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(9, 9, 11, 0.028), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* ========================================================================== Modal ========================================================================== */ .overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(9, 9, 11, 0.28); backdrop-filter: blur(3px); animation: fade 0.16s var(--ease); } @keyframes fade { from { opacity: 0; } } .modal { width: 100%; max-width: 512px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-lg); animation: rise 0.2s var(--ease); overflow: hidden; } @keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } } .modal__head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 16px; flex: none; } .modal__head h2 { font-size: 17px; letter-spacing: -0.022em; } .modal__head p { margin-top: 2px; font-size: 13.5px; color: var(--text-muted); } .modal__head .icon-btn { margin-left: auto; } .modal__body { padding: 0 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .modal__foot { display: flex; align-items: center; gap: 9px; padding: 20px 22px; margin-top: 6px; flex: none; } .modal__foot .btn:last-child { margin-left: auto; order: 2; } .modal__foot .btn:first-child { order: 1; } .modal__foot > .spacer { flex: 1; order: 1; } .modal--sm { max-width: 408px; } .modal--plain .modal__body { padding-bottom: 4px; } /* Import — bookmarks HTML dropzone */ .import-drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 28px 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg-subtle); cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease), opacity 0.15s var(--ease); } .import-drop:hover, .import-drop:focus-visible { border-color: var(--accent); background: var(--accent-soft); } .import-drop.is-dragover { border-color: var(--accent); background: var(--accent-soft); } .import-drop.is-busy { opacity: 0.6; pointer-events: none; } .import-drop__ico { color: var(--text-muted); margin-bottom: 4px; } .import-drop__ico svg { width: 26px; height: 26px; } .import-drop:hover .import-drop__ico, .import-drop.is-dragover .import-drop__ico { color: var(--accent); } .import-drop__title { font-size: 14px; font-weight: 600; } .import-drop .hint { max-width: 280px; } /* Export — two plain download links */ .export-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: var(--text); transition: border-color 0.13s var(--ease), background 0.13s var(--ease); } .export-option:hover, .export-option:focus-visible { border-color: var(--accent); background: var(--accent-soft); } .export-option__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--bg-subtle); color: var(--text-secondary); } .export-option__ico svg { width: 18px; height: 18px; } .export-option strong { display: block; font-size: 14px; } .export-option .hint { display: block; margin-top: 2px; } /* Checkout — wide two-panel layout (order summary aside + payment form), the shape a real hosted checkout page takes. Own chrome, not .modal__head/.modal__body/.modal__foot — those assume a single narrow column, this doesn't. */ .modal--checkout { max-width: 900px; } .checkout2 { display: grid; grid-template-columns: 320px 1fr; min-height: 560px; } .checkout2__aside { position: relative; display: flex; flex-direction: column; padding: 30px 32px; background: var(--text); color: #fff; } .checkout2__back { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 26px; border: none; border-radius: var(--r-sm); background: none; color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: background 0.13s var(--ease), color 0.13s var(--ease); } .checkout2__back:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .checkout2__back svg { width: 18px; height: 18px; } .checkout2__brand { display: flex; align-items: center; gap: 9px; margin-bottom: 44px; font-size: 15px; font-weight: 600; } .checkout2__intro p { font-size: 14px; color: rgba(255, 255, 255, 0.65); } .checkout2__bigprice { margin-top: 6px; font-size: 34px; font-weight: 650; letter-spacing: -0.03em; } .checkout2__bigprice span { margin-left: 4px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.55); } .checkout2__aside .checkout-reason { margin-top: 22px; background: rgba(255, 255, 255, 0.1); color: #fff; } .checkout2__aside .checkout-reason svg { color: rgba(255, 255, 255, 0.7); } .checkout2__lineitem { display: flex; justify-content: space-between; gap: 10px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .checkout2__lineitem-info strong { display: block; font-size: 13.5px; font-weight: 550; } .checkout2__lineitem-info span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, 0.55); } .checkout2__lineitem-price { font-size: 13.5px; font-weight: 550; } .checkout2__totals { margin-top: auto; padding-top: 22px; } .checkout2__totalrow { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: rgba(255, 255, 255, 0.65); } .checkout2__totalrow--sum { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 14px; font-weight: 600; color: #fff; } .checkout2__main { position: relative; padding: 30px 32px; overflow-y: auto; } .checkout2__close { position: absolute; top: 18px; right: 18px; } .checkout2__heading { margin-top: 24px; margin-bottom: 12px; font-size: 13px; font-weight: 650; color: var(--text); } .checkout-step > .checkout2__heading:first-child { margin-top: 2px; } .cc-split { margin-top: 8px; } .cc-split .input { flex: 1; } @media (max-width: 700px) { /* The fixed 320px aside has nowhere to go on a phone-width modal — stack it above the form instead of squeezing both into one row. */ .checkout2 { grid-template-columns: 1fr; min-height: 0; } .checkout2__aside { padding: 22px 24px; } .checkout2__brand { margin-bottom: 20px; } .checkout2__totals { margin-top: 20px; } .checkout2__main { padding: 24px; } } /* URL field with inline fetch state */ .url-field { position: relative; } .url-field .input { padding-right: 40px; } .url-field__spin { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.65s linear infinite; display: none; } .url-field.is-loading .url-field__spin { display: block; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } .url-field__dup { margin-top: 7px; font-size: 12.5px; color: #b45309; } .url-field__dup button { border: none; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* Tag input */ .tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: #fff; cursor: text; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .tag-input:focus-within { border-color: var(--accent); box-shadow: var(--ring); } .tag-input input { flex: 1; min-width: 110px; border: none; outline: none; background: none; font-size: 14.5px; padding: 2px; } .tag-input input::placeholder { color: var(--text-muted); } .tag-token { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 5px 0 9px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-hover); font-size: 12.5px; font-weight: 500; } .tag-token button { display: grid; place-items: center; width: 15px; height: 15px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--accent-hover); cursor: pointer; opacity: 0.6; } .tag-token button:hover { opacity: 1; background: rgba(76, 95, 215, 0.14); } .tag-token svg { width: 9px; height: 9px; } .suggest { display: flex; flex-wrap: wrap; gap: 5px; } .suggest span { font-size: 12.5px; color: var(--text-muted); margin-right: 2px; align-self: center; } /* Upgrade modal */ /* ========================================================================== Checkout — order summary, card form, processing, success/receipt ========================================================================== */ .checkout-reason { display: flex; gap: 10px; padding: 11px 13px; margin-bottom: 4px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-hover); font-size: 13px; line-height: 1.5; } .checkout-reason svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } /* Manage-subscription screen */ .plan-hero { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px 4px; } .plan-hero__badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--r-full); background: var(--text); color: #fff; font-size: 12px; font-weight: 650; letter-spacing: 0.01em; } .plan-hero__price { font-size: 26px; font-weight: 650; letter-spacing: -0.03em; } .plan-hero__price span { margin-left: 3px; font-size: 13px; font-weight: 500; color: var(--text-muted); } .plan-details { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .plan-details__row { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; font-size: 13.5px; } .plan-details__row + .plan-details__row { border-top: 1px solid var(--border); } .plan-details__row > span:first-child { color: var(--text-muted); } .plan-details__row > span:last-child { font-weight: 550; } .plan-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; } .plan-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; } .cc-field { position: relative; } .cc-field input { padding-right: 52px; font-variant-numeric: tabular-nums; } .cc-field__brand { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--text-muted); pointer-events: none; } .checkout-secure { display: flex; align-items: center; gap: 8px; padding-top: 2px; font-size: 12px; color: var(--text-muted); line-height: 1.5; } .checkout-secure svg { width: 14px; height: 14px; flex: none; color: var(--success); } /* Step visibility — all three live in the DOM at once so the modal doesn't resize/flicker on swap; JS toggles which one is shown, sequentially (fade the old one out, THEN swap, THEN fade the new one in) rather than crossfading both together — the modal has no fixed height, so two different-height steps both partially visible at once would visibly jump. */ .checkout-step.hidden { display: none; } .checkout-step { display: flex; flex-direction: column; gap: 14px; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); } .checkout-step.is-leaving { opacity: 0; transform: translateY(-6px); } .checkout-step.is-entering { opacity: 0; transform: translateY(6px); } .checkout-processing { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 46px 24px 50px; text-align: center; } .checkout-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: checkout-spin 0.7s linear infinite; } @keyframes checkout-spin { to { transform: rotate(360deg); } } .checkout-processing p { font-size: 14.5px; color: var(--text-secondary); } .checkout-success { text-align: center; padding: 12px 0 4px; } .checkout-success__check { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: #dcfce7; color: var(--success); animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .checkout-success__check svg { width: 26px; height: 26px; } @keyframes pop-in { from { transform: scale(0.4); opacity: 0; } } .checkout-success h3 { font-size: 19px; letter-spacing: -0.026em; } .checkout-success > p { margin-top: 8px; color: var(--text-secondary); font-size: 14.5px; } /* Share panel */ .share-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-subtle); } .share-row code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .switch { display: flex; align-items: center; gap: 12px; justify-content: space-between; } .switch__text strong { display: block; font-size: 14px; font-weight: 550; } .switch__text span { font-size: 13px; color: var(--text-muted); } .switch input { position: absolute; opacity: 0; pointer-events: none; } .switch__track { position: relative; width: 40px; height: 23px; flex: none; border-radius: var(--r-full); background: var(--border-strong); cursor: pointer; transition: background 0.18s var(--ease); } .switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.18s var(--ease); } .switch input:checked + .switch__track { background: var(--accent); } .switch input:checked + .switch__track::after { transform: translateX(17px); } .switch input:focus-visible + .switch__track { box-shadow: var(--ring); } /* ========================================================================== Toasts ========================================================================== */ .toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; max-width: 440px; padding: 11px 15px; border-radius: var(--r-md); background: var(--text); color: #fff; font-size: 14px; box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in 0.22s var(--ease); } .toast.is-leaving { animation: toast-out 0.18s var(--ease) forwards; } .toast svg { width: 16px; height: 16px; flex: none; } .toast.is-error { background: var(--danger); } .toast.is-success svg { color: #4ade80; } .toast button { border: none; background: none; padding: 0 0 0 6px; color: rgba(255, 255, 255, 0.7); font-weight: 550; font-size: 13.5px; cursor: pointer; } .toast button:hover { color: #fff; } @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } } @keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } } /* ========================================================================== Onboarding tour — shown once, right after a fresh signup ========================================================================== */ .tour-highlight { position: relative; z-index: 151; border-radius: var(--r-md); animation: tour-pulse 1.8s ease-in-out infinite; } @keyframes tour-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(76, 95, 215, 0.18), 0 0 0 1.5px var(--accent); } 50% { box-shadow: 0 0 0 7px rgba(76, 95, 215, 0.1), 0 0 0 1.5px var(--accent); } } @media (prefers-reduced-motion: reduce) { .tour-highlight { animation: none; box-shadow: 0 0 0 4px rgba(76, 95, 215, 0.18), 0 0 0 1.5px var(--accent); } } .tour-card { position: fixed; z-index: 150; width: 280px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--text); color: #fff; box-shadow: var(--shadow-lg); animation: tour-card-in 0.22s var(--ease); } @keyframes tour-card-in { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .tour-card { animation: none; } } .tour-card__head { display: flex; align-items: center; justify-content: space-between; } .tour-card__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.12); color: #fff; flex: none; } .tour-card__icon svg { width: 16px; height: 16px; } .tour-card__dots { display: flex; align-items: center; gap: 5px; } .tour-card__dots i { display: block; width: 6px; height: 6px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.25); transition: all 0.2s var(--ease); } .tour-card__dots i.is-done { background: rgba(255, 255, 255, 0.55); } .tour-card__dots i.is-active { width: 16px; background: #fff; } .tour-card__title { margin-top: 13px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; } .tour-card__body { margin-top: 6px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); } .tour-card__actions { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tour-card__actions-left { display: flex; align-items: center; gap: 12px; } .tour-card__back { display: grid; place-items: center; width: 24px; height: 24px; border: none; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); cursor: pointer; transition: background 0.13s var(--ease), color 0.13s var(--ease); } .tour-card__back svg { width: 13px; height: 13px; } .tour-card__back:hover { background: rgba(255, 255, 255, 0.16); color: #fff; } .tour-card__skip { border: none; background: none; padding: 0; font-family: inherit; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); cursor: pointer; transition: color 0.13s var(--ease); } .tour-card__skip:hover { color: #fff; } .tour-card__next { border: none; border-radius: var(--r-sm); padding: 7px 14px; background: #fff; color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: opacity 0.13s var(--ease); } .tour-card__next:hover { opacity: 0.85; } .tour-card__arrow { position: absolute; width: 12px; height: 12px; background: var(--text); transform: rotate(45deg); } .tour-card__arrow--top { top: -5px; } .tour-card__arrow--bottom { bottom: -5px; } /* ========================================================================== Public share page ========================================================================== */ .share-page { padding: 56px 0 80px; } .share-hero { text-align: center; margin-bottom: 44px; } .share-hero .badge { margin-bottom: 18px; } .share-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .share-hero p { margin-top: 12px; color: var(--text-secondary); } .share-list { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .share-item { display: flex; align-items: flex-start; gap: 13px; padding: 17px 20px; background: #fff; border-bottom: 1px solid var(--border); transition: background 0.14s var(--ease); } .share-item:last-child { border-bottom: none; } .share-item:hover { background: var(--bg-subtle); } .share-item__body { min-width: 0; flex: 1; } .share-item__title { font-size: 15px; font-weight: 550; letter-spacing: -0.012em; } .share-item:hover .share-item__title { color: var(--accent); } .share-item__meta { margin-top: 3px; font-size: 12.5px; color: var(--text-muted); } .share-item__note { margin-top: 7px; font-size: 13.5px; color: var(--text-secondary); } .share-item__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .share-item__tags .tag { cursor: default; } .share-item__tags .tag:hover { background: var(--bg-sunken); color: var(--text-secondary); } .share-item__go { flex: none; color: var(--text-muted); margin-top: 4px; } .share-item:hover .share-item__go { color: var(--accent); } .share-item__go svg { width: 16px; height: 16px; } /* ========================================================================== Utilities ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hidden { display: none !important; } .stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; align-items: center; gap: 9px; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .sidebar-toggle { display: none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 860px) { .site-nav { display: none; } } @media (max-width: 800px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: 280px; transform: translateX(-100%); transition: transform 0.24s var(--ease); box-shadow: var(--shadow-lg); } .app.is-nav-open .sidebar { transform: none; } .app.is-nav-open::after { content: ""; position: fixed; inset: 0; z-index: 50; background: rgba(9, 9, 11, 0.3); } .sidebar-toggle { display: inline-flex; } .search { max-width: none; } .topbar { padding-inline: 14px; } .content { padding: 20px 14px 60px; } .bookmarks { grid-template-columns: 1fr; } } @media (max-width: 560px) { .topbar__tools .seg { display: none; } /* Grid collapses to a single column below 800px anyway (see .bookmarks above), so the view toggle already has nothing to switch between here. Sort follows the same logic: newest-first covers the mobile glance, and freeing this width is what stops the search box from being squeezed down to ~10 visible characters next to it. */ #sortSelect { display: none; } .modal__foot { flex-wrap: wrap; } .add-label { display: none; } .site-footer__inner { flex-direction: column; align-items: flex-start; } /* Side-by-side Name/Email and Password/Confirm rows get too cramped below this width — back to one field per row, same as before the wide-screen layout was added. */ .auth__field-row { flex-direction: column; gap: 15px; } .auth2__form { padding: 32px 24px 28px; } /* Sign in + Sign up plus the full logo don't fit one row under ~400px. Dropping the wordmark (the B mark alone is still clearly branded) frees up enough width to keep both buttons — including Sign in, which used to just get hidden here entirely with no way back to it from this page short of detouring through Sign up first. */ .site-header__inner { gap: 10px; } .logo__text { display: none; } .site-header__cta { gap: 6px; } .site-header__cta .btn { padding: 0 12px; font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }