/* beavr.css — beavr brand skin. * * The single stylesheet for the beavr brand. Defines the * colour palette (warm tan #A67B5B on near-black #26211D), the * design tokens (--space-*, --text-*, --radius, --font-*, * --max-w-page), the sidebar + topbar + command-palette layout, * the tool-page chrome (.site-main.tool-page, .tool-h1, .tool-lede), * and the global element styles. * * All values are defined as CSS custom properties under * [data-brand="beavr"] so the project can host other brands * in the future by swapping the data attribute and the * token block. * * No JS dependency: the palette + theme toggle scripts are * inlined by the Astro components (Sidebar, Topbar, CommandPalette) * and they all read data-* attributes from . */ /* ============================================================ Beavr tokens ============================================================ */ :root { /* Typography — system stack first, fall back to webfonts later */ --beavr-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; --beavr-font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace; /* Motion */ --beavr-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --beavr-t-fast: 120ms; --beavr-t: 200ms; --beavr-t-slow: 360ms; /* Radii */ --beavr-r-sm: 6px; --beavr-r: 10px; --beavr-r-lg: 14px; --beavr-r-xl: 20px; } [data-brand="beavr"] { /* Light mode — warm off-white surface, tan accent */ --color-bg: #f7f4f0; /* warm cream */ --color-bg-elevated: #ffffff; /* cards, inputs */ --color-bg-sunken: #efe9e1; /* subtle sunken */ --color-fg: #26211d; /* ink, near-black */ --color-fg-muted: #6b5f54; --color-fg-faint: #a89c8e; --color-border: #e2d9cc; --color-border-strong: #c9bca9; --color-accent: #a67b5b; /* warm tan — beavr */ --color-accent-fg: #ffffff; --color-accent-2: #8a6246; /* deeper tan, gradients */ --color-terminal: #6b8e3d; /* olive / sage — terminal vibe */ --color-danger: #b3261e; --color-code-bg: #efe9e1; /* Shared design tokens (referenced as `var(--space-N)`, `var(--text-…)`, `var(--radius)` etc. throughout the per-tool inline styles). Keeping them here means the spacing scale, type scale, and corner radius are one consistent system rather than 26 different copies. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --radius: var(--beavr-r); --font-sans: var(--beavr-font-sans); --font-mono: var(--beavr-font-mono); --leading: 1.55; --max-w-page: 1100px; --color-warning: #b87a1a; --color-success: #1b7f3a; /* Shadows tinted with the brand */ --beavr-shadow-sm: 0 1px 2px rgba(38, 33, 29, 0.06); --beavr-shadow: 0 4px 14px rgba(38, 33, 29, 0.08), 0 1px 2px rgba(38, 33, 29, 0.05); --beavr-shadow-lg: 0 24px 60px rgba(38, 33, 29, 0.16), 0 2px 6px rgba(38, 33, 29, 0.08); } [data-brand="beavr"][data-theme="dark"] { --color-bg: #1a1612; /* warm near-black */ --color-bg-elevated: #26211d; /* brand near-black */ --color-bg-sunken: #14110e; --color-fg: #f4ede4; /* warm off-white */ --color-fg-muted: #a89c8e; --color-fg-faint: #6b5f54; --color-border: #3a322a; --color-border-strong: #4a4138; --color-accent: #c89976; /* tan lightens in dark mode */ --color-accent-fg: #1a1612; --color-accent-2: #a67b5b; --color-terminal: #9bbc5b; --color-danger: #f28b82; --color-code-bg: #14110e; --beavr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --beavr-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --beavr-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); --color-warning: #d99e30; --color-success: #2ea84a; } @media (prefers-color-scheme: dark) { [data-brand="beavr"]:not([data-theme]) { --color-bg: #1a1612; --color-bg-elevated: #26211d; --color-bg-sunken: #14110e; --color-fg: #f4ede4; --color-fg-muted: #a89c8e; --color-fg-faint: #6b5f54; --color-border: #3a322a; --color-border-strong: #4a4138; --color-accent: #c89976; --color-accent-fg: #1a1612; --color-accent-2: #a67b5b; --color-terminal: #9bbc5b; --color-danger: #f28b82; --color-code-bg: #14110e; --beavr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --beavr-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --beavr-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); } } /* ============================================================ App shell (sidebar + topbar + main) ============================================================ */ [data-brand="beavr"] body { font-family: var(--beavr-font-sans); background: var(--color-bg); color: var(--color-fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Safety net for any wide content (long URLs, code blocks, large SVGs) that might otherwise push a horizontal scrollbar on narrow viewports. Content is still scrollable inside its own container; the body itself never scrolls horizontally. */ overflow-x: hidden; } [data-brand="beavr"] .app { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 56px 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; min-height: 100vh; } /* Marketing pages: no sidebar, full-width main column, wider. */ [data-brand="beavr"] .app--no-sidebar { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } [data-brand="beavr"] .main--prose { max-width: 720px; } /* Tablet landscape / small desktop: 881–1023px. Sidebar shrinks to 220px, the breadcrumb can ellipsize, the search label collapses to a magnifier-only icon to make room. This sits BETWEEN the full desktop layout (>=1024px) and the off-canvas drawer (<=880px), so the page is usable in landscape on a phone, on small laptops, and on portrait tablets without ever needing the drawer. */ @media (max-width: 1023px) and (min-width: 881px) { [data-brand="beavr"] .app { grid-template-columns: 220px 1fr; } [data-brand="beavr"] .sidebar { padding: 12px 8px 20px; } [data-brand="beavr"] .sidebar .brand { padding: 4px 6px 14px; } [data-brand="beavr"] .sidebar .brand .name { font-size: 13px; } [data-brand="beavr"] .sidebar .brand .tag { display: none; } [data-brand="beavr"] .nav-group-label { font-size: 10px; padding: 0 6px; } [data-brand="beavr"] .nav-item a { padding: 5px 6px; font-size: 12px; gap: 8px; } [data-brand="beavr"] .nav-item .new { font-size: 8px; } [data-brand="beavr"] .topbar { padding: 0 14px; } [data-brand="beavr"] .topbar .crumbs { min-width: 0; flex: 1; } [data-brand="beavr"] .topbar .crumbs .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } [data-brand="beavr"] .search-trigger { min-width: 0; width: 36px; height: 36px; padding: 0; justify-content: center; } [data-brand="beavr"] .search-trigger .label, [data-brand="beavr"] .search-trigger .kbd { display: none; } [data-brand="beavr"] .search-trigger .icon svg { width: 18px; height: 18px; } [data-brand="beavr"] .icon-btn { width: 36px; height: 36px; } [data-brand="beavr"] .main { padding: 28px 28px 64px; } } @media (max-width: 880px) { [data-brand="beavr"] .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } /* Sidebar becomes an off-canvas drawer. Default state: parked off-screen on the left, full-height, scrollable inside, with a slide-in transform triggered by a `data-mobile-open="true"` attribute set by the toggle. */ [data-brand="beavr"] .sidebar { display: block; position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 320px); z-index: 50; transform: translateX(-100%); transition: transform var(--beavr-t) var(--beavr-ease), box-shadow var(--beavr-t) var(--beavr-ease); box-shadow: none; border-right: 1px solid var(--color-border); } [data-brand="beavr"] .sidebar[data-mobile-open="true"] { transform: translateX(0); box-shadow: var(--beavr-shadow-lg); } /* Backdrop rendered as a sibling of the sidebar so it can fade in/out without affecting layout. */ [data-brand="beavr"] .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 49; opacity: 0; pointer-events: none; transition: opacity var(--beavr-t) var(--beavr-ease); } [data-brand="beavr"] .sidebar-backdrop[data-mobile-open="true"] { opacity: 1; pointer-events: auto; } /* Topbar gets tighter on mobile. */ [data-brand="beavr"] .topbar { padding: 0 12px; gap: 8px; } [data-brand="beavr"] .topbar .crumbs { flex: 1; min-width: 0; overflow: hidden; } [data-brand="beavr"] .topbar .crumbs .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hide search label and kbd on phone, keep just the icon button. */ [data-brand="beavr"] .search-trigger { min-width: 0; width: 36px; height: 36px; padding: 0; justify-content: center; } [data-brand="beavr"] .search-trigger .label, [data-brand="beavr"] .search-trigger .kbd { display: none; } [data-brand="beavr"] .search-trigger .icon svg { width: 18px; height: 18px; } /* Bring back icon-btn size we shrank: keep the .icon-btn at 36. */ [data-brand="beavr"] .icon-btn, [data-brand="beavr"] .search-trigger { width: 36px; height: 36px; } } /* === Footer === */ [data-brand="beavr"] .site-footer { max-width: none; margin: 0; text-align: center; padding: 24px; border-top: 1px solid var(--color-border); color: var(--color-fg-muted); font-size: 13px; background: var(--color-bg-elevated); } [data-brand="beavr"] .site-footer a { color: inherit; } @media (max-width: 720px) { [data-brand="beavr"] .topbar { padding: 0 10px; gap: 6px; } [data-brand="beavr"] .topbar .top-actions { gap: 6px; } [data-brand="beavr"] .main { padding: 20px 16px 60px; } [data-brand="beavr"] .hero h1 { font-size: 28px; letter-spacing: -0.02em; } [data-brand="beavr"] .hero p.lede { font-size: 15px; } [data-brand="beavr"] .hero .prompt-line { font-size: 11px; } [data-brand="beavr"] .search-card { padding: 14px; } [data-brand="beavr"] .search-input { height: 48px; } [data-brand="beavr"] .search-input input { font-size: 15px; } /* Hide the "↵ to open" chip — at 375px it pushes the input too narrow. The Enter hint is redundant on touch devices. */ [data-brand="beavr"] .search-input .kbd { display: none; } [data-brand="beavr"] .cat-block { margin-top: 32px; } [data-brand="beavr"] .cat-head h2 { font-size: 13px; } [data-brand="beavr"] .principles { margin-top: 36px !important; padding: 18px !important; } /* Footer: stack the legal line and the link row vertically on small screens. The padding-bottom uses max() so: - iOS Safari (viewport-fit=cover): respects safe-area-inset-bottom which can be 20-34px on notched devices. - Android Chrome + older WebKit: env() resolves to 0px, so max() falls back to 56px to clear the gesture-bar + system bar height. Without this fallback Android covers the footer with its gesture pill (verified on Chrome 120+). */ [data-brand="beavr"] .site-footer { padding: 20px 16px calc(20px + max(env(safe-area-inset-bottom), 36px)); } [data-brand="beavr"] .site-footer small { display: block; line-height: 1.6; } [data-brand="beavr"] .site-footer br + a { margin-left: 0; } [data-brand="beavr"] .cat-section { margin-top: 20px; } } @media (max-width: 600px) { [data-brand="beavr"] .tool-grid { grid-template-columns: 1fr; gap: 6px; } [data-brand="beavr"] .tool { padding: 10px 12px; gap: 10px; } [data-brand="beavr"] .tool .glyph { width: 28px; height: 28px; font-size: 12px; } [data-brand="beavr"] .tool .name { font-size: 13px; } [data-brand="beavr"] .tool .desc { font-size: 11px; } [data-brand="beavr"] .palette-card { width: 96vw; } [data-brand="beavr"] .palette { padding-top: 6vh; } } /* ===== Topbar ===== */ [data-brand="beavr"] .topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 10; /* Don't let wide breadcrumbs or action clusters push the bar wider than the viewport. The crumbs