/* ============================================================================ Collections dashboard — two-panel layout (PRD: dashboard-style redesign). Left panel: category nav (own scroll). Right panel: sticky search + asset grid (own scroll). Uses the global dark-theme tokens from /style.css. Applied only when has .is-dashboard (the tool-detail view keeps the normal scrolling page layout). ============================================================================ */ :root { --sidebar-width: 280px; } /* ── Full-height shell: the page itself never scrolls; the two panels do. ──── */ body.is-dashboard { overflow: hidden; } body.is-dashboard .page-shell { height: 100vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; } /* Global header becomes a full-width top bar in the dashboard. Relative, not static: it is the anchor for the wide Mini Tools panel (see .nav-dropdown--wide in style.css), and z-index 30 then lifts that panel over .dash-main. */ body.is-dashboard .site-header, body.is-dashboard .site-header.site-header--collection { position: relative; width: 100%; max-width: none; /* clears the centred cap from .site-header */ flex: 0 0 auto; margin: 0; border-radius: 0; border: none; backdrop-filter: none; } /* Hide the (capped/centered) tool-detail container + loading while the full-bleed dashboard is showing. */ body.is-dashboard .tool-container, body.is-dashboard .tool-loading { display: none; } body.is-dashboard main { flex: 1 1 auto; min-height: 0; /* §10 gotcha: lets inner panels actually scroll */ display: flex; padding: 0; } /* ── The two-column grid ──────────────────────────────────────────────────── */ .dashboard { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--sidebar-width) 1fr; overflow: hidden; /* the shell doesn't scroll; the panels do */ width: 100%; } /* ── Left panel: category navigation ──────────────────────────────────────── */ .dash-sidebar { min-height: 0; overflow: hidden; /* the panel itself no longer scrolls */ border-right: 1px solid var(--border); padding: 20px 12px 16px; display: flex; flex-direction: column; gap: 6px; } /* Footer strip, ruled off from the category list so it reads as its own section: copyright on the left, CTA on the right. The rule sits inside the sidebar's 12px side padding, matching the inset of the nav rows above it. */ .dash-sidebar-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); } .dash-sidebar-copy { padding-left: 12px; /* aligns with .dash-nav-row's text */ font-size: 0.75rem; color: var(--muted); white-space: nowrap; } .dash-sidebar-cta { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; /* label sits against the right edge */ gap: 8px; padding: 11px 12px; color: var(--text); font-size: 0.75rem; text-align: right; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } /* Same out-and-up nudge the resource cards give their arrow. */ .dash-sidebar-cta-arrow { flex: 0 0 auto; transition: transform 0.25s ease; } .dash-sidebar-cta:hover .dash-sidebar-cta-arrow, .dash-sidebar-cta:focus-visible .dash-sidebar-cta-arrow { transform: translate(2px, -2px); } /* Drop-up on the "List your tool" CTA. It opens UPWARD and right-aligned so it stays inside the sidebar, which clips overflow. Same show/hide pattern as the nav dropdowns: hover or keyboard focus, with an invisible bridge so the pointer can travel from the trigger to the menu without it closing. */ .dash-sidebar-menu { position: relative; flex: 0 0 auto; } .dash-dropup { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; display: grid; gap: 2px; min-width: 210px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-strong); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease; } .dash-dropup::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; /* bridges the 8px gap to the trigger */ } .dash-sidebar-menu:hover .dash-dropup, .dash-sidebar-menu:focus-within .dash-dropup { opacity: 1; pointer-events: auto; transform: translateY(0); } .dash-dropup-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--muted-strong); font-size: 0.8rem; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .dash-dropup-link svg { flex: 0 0 auto; opacity: 0.6; } .dash-dropup-link:hover, .dash-dropup-link:focus-visible { background: rgba(var(--fg-rgb), 0.08); color: var(--text); } /* "Hot trends" — a pinned block above the category list. It takes its natural height and never scrolls; .dash-nav below it keeps flex: 1 and absorbs the remainder, so it is still the only scrolling part of the sidebar. Rows reuse .dash-nav-row, so trends and categories stay visually identical. */ .dash-trends-section { flex: 0 0 auto; } .dash-trends { display: flex; flex-direction: column; gap: 8px; /* matches .dash-nav */ list-style: none; margin: 0; padding: 0; } /* Both sidebar headings carry an icon, so the flex layout that positions it belongs on the shared class. Without display:flex the ::before below is an inline box and its width/height are silently ignored — the icon vanishes. */ .dash-sidebar-label { display: flex; align-items: center; gap: 6px; font-family: "Geist", sans-serif; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 12px; } /* Shared icon box. Painted as a mask filled with currentColor, like the category icons, so each mark takes the label's own muted colour rather than sitting there as a full-black bitmap. Only mask-image differs per heading. */ .dash-sidebar-label::before { content: ""; flex: 0 0 auto; width: 13px; height: 13px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* "Hot trends" — the flame. This heading is nested inside .dash-trends-section. */ .dash-trends-section .dash-sidebar-label::before { -webkit-mask-image: url("/public/icons/hot-trends.webp"); mask-image: url("/public/icons/hot-trends.webp"); } /* "Categories" — the same four-square mark the "All" nav row uses. This is the only .dash-sidebar-label that is a DIRECT child of .dash-sidebar; the trends heading sits one level deeper, so > separates them with no extra markup. */ .dash-sidebar > .dash-sidebar-label::before { -webkit-mask-image: url("/public/icons/all-categories.svg"); mask-image: url("/public/icons/all-categories.svg"); } /* Divider between the trends block and the "Categories" heading below it. The :not([hidden]) matters — the section stays in the DOM when it has no rows, and without this the divider would sit above nothing. */ .dash-trends-section:not([hidden]) + .dash-sidebar-label { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); } /* The category list is the only scrolling part of the sidebar, so the "List your tool" CTA below it stays pinned. Scrollbar hidden to match the rest of the dashboard. */ .dash-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-direction: column; gap: 8px; /* was 2px — the list read as one dense block */ list-style: none; margin: 0; padding: 0; } .dash-nav::-webkit-scrollbar { width: 0; height: 0; display: none; } .dash-nav-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 10px; color: var(--muted-strong); text-decoration: none; font-size: 0.9rem; transition: background 0.15s ease, color 0.15s ease; } .dash-nav-row:hover { background: var(--panel-soft); color: var(--text); } .dash-nav-row[aria-current="true"] { background: rgba(var(--fg-rgb), 0.1); color: var(--pure); font-weight: 500; } .dash-nav-icon { flex: 0 0 auto; display: inline-flex; color: currentColor; opacity: 0.75; } /* Category icons supplied as monochrome PNGs are painted as a CSS mask filled with currentColor, so one asset works in both themes — same behaviour as the inline SVGs, which use stroke="currentColor". Used by the sidebar rows (16px) and the card footer tags (13px); tools.js sets the url and size inline. */ .dash-icon-mask { display: block; flex: 0 0 auto; width: 16px; height: 16px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .dash-nav-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-nav-count { flex: 0 0 auto; font-size: 0.72rem; color: var(--muted); font-family: "Geist", sans-serif; } .dash-nav-row[aria-current="true"] .dash-nav-count { color: var(--muted-strong); } /* ── Right panel: assets ──────────────────────────────────────────────────── */ .dash-main { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge / IE */ } /* This is a fixed-height flex column, so every child defaults to flex-shrink: 1 and gets squeezed when the content is taller than the panel. The hero clips its own overflow (for the starfield), so squeezing it slices the headline in half rather than overflowing visibly. Pin every child to its natural height and let .dash-main scroll instead. */ .dash-main > * { flex: 0 0 auto; } /* Sticky search bar pinned to the top of the right panel's own scroll. */ .dash-search { position: sticky; top: 0; z-index: 10; padding: 16px 24px; background: var(--surface-2); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dash-search-field { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--border); background: #1c1c1c; } .dash-search-field:focus-within { border-color: var(--border-strong); } .dash-search-field svg { flex: 0 0 auto; color: var(--muted); } .dash-search-input { flex: 1 1 auto; border: none; background: none; color: var(--text); font-family: "Inter", sans-serif; font-size: 0.95rem; outline: none; -webkit-appearance: none; /* remove WebKit's native search-field border */ appearance: none; } /* The global `input:focus-visible` ring in style.css is (0,1,1) and outranks the (0,1,0) `outline: none` above, so it drew a sharp 2px rectangle inset inside the rounded field. This selector is (0,2,0) and wins. Focus is still signalled — .dash-search-field:focus-within brightens the container border, which is the shape that actually reads as the search bar. */ .dash-search-input:focus-visible { outline: none; } .dash-search-input::placeholder { color: var(--muted); } .dash-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* Empty state (no search/category results) */ .dash-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--muted); } .dash-empty p { margin: 0 0 14px; font-size: 0.95rem; } .dash-empty-clear { background: none; border: 1px solid var(--border); color: var(--muted-strong); padding: 9px 18px; border-radius: 999px; font-size: 0.85rem; cursor: pointer; } .dash-empty-clear:hover { color: var(--pure); border-color: var(--border-strong); } /* Context header: category name + result count (scrolls normally). */ .dash-context { padding: 24px 24px 8px; } .dash-context h1, .dash-context h2 { margin: 0 0 4px; font-family: "Geist", sans-serif; font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--text); } .dash-context p { margin: 0; color: var(--muted); font-size: 0.9rem; } /* Asset grid (§6.2). */ .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 16px 24px 40px; } /* ── Asset card (§8) ──────────────────────────────────────────────────────── */ .dash-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--panel); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .dash-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); } /* Full-card click target → tool detail. Sits above non-interactive content, below the footer's own links (which get a higher z-index). */ .dash-card-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .dash-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .dash-card-logo { width: 52px; height: 52px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 99px; overflow: hidden; background: var(--panel-strong); border: 1px solid var(--border); font-family: "Geist", sans-serif; font-weight: 600; color: var(--muted-strong); } /* Fill the holder edge to edge — no CSS padding. iconUrl() in tools.js has already trimmed each logo to its own artwork and scaled it to a 128 square, so the artwork itself now reaches the tile's edges at one uniform scale. `cover` rather than `contain` so any logo that arrives non-square (a non-ImageKit URL, which skips the transform) still fills instead of letterboxing. */ .dash-card-logo img { width: 100%; height: 100%; object-fit: cover; } .dash-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .dash-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; } .dash-badge svg { width: 11px; height: 11px; } .dash-badge.price-free { color: #7db8ff; background: rgba(90, 150, 255, 0.12); border-color: rgba(90, 150, 255, 0.3); } .dash-badge.price-paid { color: #c39cff; background: rgba(160, 110, 255, 0.12); border-color: rgba(160, 110, 255, 0.3); } .dash-badge.price-freemium{ color: #ffc078; background: rgba(255, 170, 70, 0.12); border-color: rgba(255, 170, 70, 0.3); } .dash-card-title { margin: 0; font-size: 1.25rem; font-weight: 200; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-card-desc { margin: 0; color: #ffffff30; font-size: 0.8rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dash-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; } .dash-card-tag, .dash-card-visit { position: relative; z-index: 2; /* above .dash-card-hit so they're independently clickable */ } .dash-card-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--muted-strong); font-size: 0.74rem; text-decoration: none; max-width: 70%; } /* Label only — the icon may itself be a (.dash-icon-mask), which must not inherit the ellipsis/overflow treatment. */ .dash-card-tag span:not(.dash-icon-mask) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-card-tag:hover { color: var(--pure); border-color: var(--border-strong); } .dash-card-visit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--border); color: var(--muted-strong); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .dash-card-visit:hover { background: var(--panel-soft); color: var(--pure); } /* ── Responsive (basic; full mobile chip bar comes in increment 2) ────────── */ @media (max-width: 1023px) { :root { --sidebar-width: 220px; } } @media (max-width: 767px) { .dashboard { grid-template-columns: 1fr; } .dash-sidebar { display: none; /* replaced by a mobile chip bar in increment 2 */ } .dash-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; padding: 12px 16px 32px; } .dash-search { padding: 12px 16px; } .dash-context { padding: 18px 16px 4px; } } /* ══ First fold (homepage only) ═══════════════════════════════════════════ Sits at the top of the right-hand panel's own scroll, above the sticky search bar, so it scrolls away as you browse. tools.js reveals it only at the site root with no category selected. ═══════════════════════════════════════════════════════════════════════ */ .dash-hero { position: relative; /* anchors the absolutely-positioned starfield */ overflow: hidden; /* orbits run up to ~1000px wide — clip them */ flex: 0 0 auto; /* never compress: overflow:hidden would clip the copy */ padding: 56px 24px 40px; text-align: center; } /* Everything except the starfield sits above it. */ .dash-hero-content { position: relative; z-index: 1; } .dash-hero-badge { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; padding: 6px 6px 6px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-soft); font-size: 0.78rem; color: var(--muted-strong); } .dash-hero-badge a { padding: 5px 12px; border-radius: 999px; background: var(--panel-strong); color: var(--text); border: 1px solid var(--border); white-space: nowrap; } .dash-hero-badge a:hover { border-color: var(--border-strong); } .dash-hero h1 { max-width: 16ch; margin: 0 auto 14px; font-family: "Geist", sans-serif; font-weight: 100; font-size: clamp(2rem, 6vw, 14rem); line-height: 1.08; letter-spacing: -5px; color: var(--text); } .dash-hero-copy { margin: 0 auto 30px; color: var(--muted); line-height: 1.5; } /* Inline email capture — mirrors the modal form, shares one handler. */ .dash-hero-form { display: flex; align-items: center; gap: 6px; width: min(100%, 620px); margin: 0 auto; padding: 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); } .dash-hero-form:focus-within { border-color: var(--border-strong); } .dash-hero-form input { flex: 1 1 auto; min-width: 0; padding: 10px 16px; border: none; background: none; color: var(--text); font-family: "Inter", sans-serif; font-size: 0.95rem; outline: none; } .dash-hero-form input::placeholder { color: var(--muted); } .dash-hero-form button { flex: 0 0 auto; padding: 10px 22px; border-radius: 999px; font-size: 0.9rem; cursor: pointer; } /* ── "Loved by" social proof row ────────────────────────────────────────── Reuses the optimised 128px avatars in /public/avatars/ (23 KB for all ten), which were left unreferenced when the old marketing hero was removed. The ring uses --pure so it reads as a light cut-out in dark mode and a dark outline in light mode — matching the page rather than a fixed white. ─────────────────────────────────────────────────────────────────────── */ .dash-hero-loved { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; } .dash-hero-loved-label { font-family: "Geist", sans-serif; font-size: 0.8rem; font-weight: 400; color: var(--text); } /* The avatars and the Product Hunt badge share one centred row. It wraps as a unit, so on a narrow screen the badge drops under the avatars rather than being squeezed beside them — a 250px badge next to six 36px avatars has no sensible narrow layout. */ .dash-hero-proof { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 30px; } /* The row above owns the spacing now. */ .dash-hero-proof .dash-hero-loved { margin-top: 0; } /* Product Hunt launch badge, in Product Hunt's own colours. */ .dash-hero-ph { display: block; flex: 0 0 auto; border-radius: 10px; /* matches the badge SVG's own rx, so :focus sits tight */ line-height: 0; /* no inline-image descender gap */ transition: transform 0.2s ease; } .dash-hero-ph:hover, .dash-hero-ph:focus-visible { transform: translateY(-2px); } .dash-hero-ph img { display: block; width: 250px; max-width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { .dash-hero-ph { transition: none; } .dash-hero-ph:hover, .dash-hero-ph:focus-visible { transform: none; } } .dash-hero-avatars { display: flex; align-items: center; } .dash-hero-avatars img { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; border: 2px solid var(--pure); background: var(--panel-strong); margin-left: -7px; /* overlap */ } .dash-hero-avatars img:first-child { margin-left: 0; } @media (max-width: 700px) { .dash-hero-loved { gap: 10px; margin-top: 22px; } .dash-hero-proof { gap: 14px; margin-top: 22px; } .dash-hero-loved-label { font-size: 0.92rem; } .dash-hero-avatars img { width: 30px; height: 30px; margin-left: -9px; } } .dash-hero-note { margin: 14px 0 0; color: var(--muted); font-size: 0.8rem; } @media (max-width: 700px) { .dash-hero { padding: 36px 18px 28px; } .dash-hero-form { flex-wrap: wrap; border-radius: 20px; } .dash-hero-form input { width: 100%; } .dash-hero-form button { width: 100%; } } /* ══ Hide the scrollbars, keep the scrolling ══════════════════════════════ Both panels still scroll; the chrome is just not painted. Firefox and old Edge need their own properties — the ::-webkit rule alone is not enough. ═══════════════════════════════════════════════════════════════════════ */ .dash-sidebar::-webkit-scrollbar, .dash-main::-webkit-scrollbar { /* Chrome, Safari, modern Edge */ width: 0; height: 0; display: none; }