/* ============================================================ JBSoftware — base.css Shared design tokens, reset, nav, footer, buttons, helpers. Loaded by every redesigned page. ============================================================ */ :root { /* canvas */ --bg: #fbfbfd; --surface: #ffffff; --ink: #15171e; --ink-soft: #5c6172; --ink-faint: #9197a8; --hairline: #e8e9ef; --hairline-2:#f0f1f5; /* per-app accents — solids share L/C, vary hue */ --indigo: oklch(0.56 0.15 272); --indigo-fill: oklch(0.965 0.022 272); --green: oklch(0.62 0.13 158); --green-fill: oklch(0.965 0.03 158); --coral: oklch(0.60 0.16 28); --coral-fill: oklch(0.965 0.03 28); --magenta: oklch(0.58 0.18 330); --magenta-fill: oklch(0.965 0.035 330); /* default page accent (overridden by .app-* body classes) */ --acc: var(--indigo); --acc-fill: var(--indigo-fill); --r-lg: 20px; --r-md: 14px; --r-sm: 9px; --maxw: 1080px; --sans: "Geist", system-ui, -apple-system, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* per-app accent themes (set on ) */ .app-bucketlist { --acc: var(--green); --acc-fill: var(--green-fill); } .app-pdftools { --acc: var(--coral); --acc-fill: var(--coral-fill); } .app-choosy { --acc: var(--magenta); --acc-fill: var(--magenta-fill); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* mono micro-label */ .mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 500; } .mono .br { color: var(--acc); } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--hairline); } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 11px; } .brand-mark { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--hairline); background: #fff; object-fit: cover; } .brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .brand-name b { color: var(--indigo); font-weight: 700; } .nav-tag { display: flex; align-items: center; gap: 8px; } .nav-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .nav-link { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; white-space: nowrap; border: 1px solid var(--hairline); background: var(--surface); transition: border-color .2s ease, color .2s ease, transform .2s ease; } .nav-link:hover { border-color: color-mix(in oklab, var(--acc) 45%, var(--hairline)); color: var(--ink); } .nav-link svg { width: 13px; height: 13px; } /* ---------- shared hero scaffolding ---------- */ .hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--hairline-2) 1px, transparent 1px), linear-gradient(to bottom, var(--hairline-2) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 22%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 50% 22%, #000 0%, transparent 78%); } /* ---------- section head ---------- */ .section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; } .section-head h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .section-head .rule { flex: 1; height: 1px; background: var(--hairline); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.92rem; font-weight: 600; padding: 10px 16px; border-radius: var(--r-sm); background: var(--acc); color: #fff; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; } .btn svg { width: 14px; height: 14px; transition: transform .2s ease; } .btn:hover { box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--acc) 70%, transparent); } .btn:hover svg { transform: translateX(3px); } .btn.soon { background: transparent; color: var(--ink-faint); border: 1px dashed var(--hairline); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: default; white-space: nowrap; } .btn.soon:hover { box-shadow: none; } /* status pill */ .status { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 6px; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .status.live { color: var(--green); background: var(--green-fill); } .status.live .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .status.soon { color: var(--ink-soft); background: var(--hairline-2); } /* ---------- footer ---------- */ .site-footer { margin-top: 36px; border-top: 1px solid var(--hairline); background: var(--surface); } .foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 30px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .foot-brand { display: flex; align-items: center; gap: 10px; } .foot-brand img { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--hairline); } .foot-brand span { font-weight: 600; font-size: 14px; } .foot-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; } .foot-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .foot-links a { font-size: 13.5px; color: var(--ink-soft); padding: 6px 11px; border-radius: 7px; transition: color .2s ease, background .2s ease; } .foot-links a:hover { color: var(--ink); background: var(--hairline-2); } .foot-base { padding: 0 28px 28px; } .foot-base .mono { font-size: 12px; } /* reduced motion */ @media (prefers-reduced-motion: reduce) { .cursor { animation: none !important; } } /* responsive */ @media (max-width: 520px) { .nav-tag { display: none; } .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; } }