/* Shared base styles for every JustSimple page (Homepage, Dashboard, ...).
Served from /static/base.css, loaded by base.html before any
page-specific stylesheet. Only things every page needs live here
(reset, page background, the .content wrapper, the shared hero/topbar
title) -- anything specific to one page belongs in that page's own
stylesheet instead.
DESIGN-CONSISTENCY PASS (see chat): h1/topbar sizing, spacing, and the
.content gutters below are now fixed here on purpose so every page --
in this dashboard AND every other app that links this same file --
renders the same title size, the same top/bottom spacing around it,
and the same 5%/5% left-right gutter, instead of drifting per page.
Do not redeclare .hero-title/.topbar/.content in a page's own
stylesheet just to nudge spacing -- fix it here instead so every page
stays in sync.
Colors/spacing that are shared with the sidebar (--ink, --muted,
--line, --accent, --brand-red) already come from sidebar.css's :root
-- no need to redeclare them here, CSS custom properties on :root
apply document-wide regardless of which stylesheet declared them. */
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
/* STEP 1 (Polaris fonts only): Inter first, system fallback so pages
still render offline if the Google Fonts in base.html fails.
14px/20px is the Polaris base rhythm (was 15px/1.55). */
font-family:var(--font-family-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
color:var(--ink);
min-height:100vh;
/* Framed Shopify shell: pure-black page backdrop so the outline
reads around the rail + white page card. */
background-color:var(--frame-bg, #000000);
padding:var(--frame-pad, 10px);
box-sizing:border-box;
/* Baseline type rhythm every page inherits unless a specific element
overrides it -- keeps paragraph/label text the same size, spacing
and line-height everywhere instead of every app picking its own. */
font-size:var(--font-body);
line-height:1.43;
letter-spacing:0;
/* Shopify/Polaris rendering: antialiased (not macOS subpixel) +
Inter single-story "a" (cv11), the way the admin reference reads. */
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-feature-settings:"cv11";
}
/* Standard content wrapper every page's main content sits inside.
width:90% + margin:0 auto = a fixed 5% gutter on the left AND right
on every page, regardless of that page's own content (form, table,
text, whatever) -- max-width keeps it from stretching edge-to-edge
unreadably wide on very large monitors, still centered either way.
Fixed top/bottom padding too, so the gap above/below content doesn't
vary page to page. Pages should NOT override width/margin/horizontal
padding here -- only extend vertical padding if a page genuinely
needs a different top/bottom rhythm. */
.content{
width:90%;
max-width:1200px;
margin:0 auto;
padding:0 0 64px;
}
/* Consistent "hero title -> first thing in content" gap, whether or not
a page uses {% block page_subtitle %}. That gap used to be split
across two places: .topbar's own bottom padding
(--stack-title-subtitle, 14px) plus .page-subtitle's own margin-bottom
(--stack-subtitle-card, 28px). A page WITHOUT a subtitle (Rank
Tracking, SEO Audit Tool, coming_soon, ...) only ever got the first
14px, so it read as noticeably more cramped under the title than a
page like Overview that has one -- see chat.
Fix: .content itself always carries the second number as real
padding-top, UNLESS .page-subtitle is literally the first thing
inside .content -- in that case it already supplies its own
margin-bottom for the exact same purpose, so we don't want to stack
both and end up with double the gap above the subtitle text. */
.content:not(:has(> .page-subtitle:first-child)){
padding-top: var(--stack-subtitle-card);
}
/* Shared hero header (title + red underline) used at the top of every
top-level page's content -- Homepage, Dashboard, and any future page
that wants the same branded header. Sits OUTSIDE .content (see
base.html, which now renders this once for every page instead of
each page's own template duplicating this markup -- see chat).
Top padding is DERIVED from the same two tokens that build the
bottom (h1 -> content) gap -- calc(--stack-title-subtitle +
--stack-subtitle-card) -- instead of its own hardcoded number. Before
this, top padding was a fixed 40px while the bottom gap was built
from the two tokens separately; the two only looked "aligned" by
coincidence at their original values (40 vs 14+28=42). The moment
either token changed to fix the bottom gap, the top stopped matching
("一长一短" -- see chat). Deriving top from the same tokens means the
two can never drift apart again, on any page, automatically. */
.topbar{
padding:calc(var(--stack-title-subtitle) + var(--stack-subtitle-card)) 5% var(--stack-title-subtitle);
/* Order #1078 frame: headers lead left-aligned (title + meta line),
never centered -- actions sit at the row's right where a page has
them (see .topbar-row in section 4). */
text-align:left;
}
.hero-title{
color:var(--ink);
font-family:var(--font-family-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
font-size:var(--font-hero);
font-weight:var(--weight-hero);
line-height:1.4;
letter-spacing:-0.01em;
margin:0;
text-align:left;
}
/* Red underline retired site-wide per design-consistency pass -- kept
as display:none (rather than deleted) so any page/app that still has
the old