/* ========================================================================== stromfee.us — unified page theme Companion to nav.css. nav.css owns the bar; this file owns everything below it. WHY THIS EXISTS --------------- The nav was already identical on all 362 pages, but the pages underneath it were not, so clicking a menu item felt like landing on a different website. Measured at 1440px across the 12 nav destinations before this file existed: body font Inter (11 pages) vs Sora (/learn/) h1 font Inter (11 pages) vs Unbounded (/learn/) background #fdfcff (11) vs #ffffff (/charge-director.html) body colour #1d1d1f (10) vs #1e293b (CD), #1b1830 (/learn/) h1 scale 96 / 56 / 54.4 / 51.2 / 46.4 / 40px (six scales) container none / 1240 / 1200 / 1180 / 1080px (five widths) The front page (/) is the reference; its values are the canon below. NO !important ANYWHERE ---------------------- Overriding is done purely with specificity, so page CSS cannot win by load order and nothing is nailed shut for future work: html body (0,0,2) beats body (0,0,1) html body h1 (0,0,3) beats h1 (0,0,1) html body .hero h1 (0,1,3) beats .hero h1 (0,1,1) The homepage hero is deliberately NOT captured: index.html carries , and the hero rule below excludes it, so the landing hero keeps its clamp(2.6rem,7.5vw,6rem). Everything else lands on one scale. ========================================================================== */ :root { --sf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sf-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sf-bg: #fdfcff; /* front-page background */ --sf-ink: #1d1d1f; /* front-page body text */ --sf-ink-soft: #515154; --sf-accent: #a78bfa; /* the violet 10 of 12 pages already declared */ --sf-wrap: 1240px; /* widest of the existing content containers */ /* the scale powergen/pool already used — the majority, so least churn */ --sf-h1: clamp(2rem, 5vw, 3.4rem); --sf-h2: clamp(1.6rem, 3.6vw, 2.5rem); --sf-h3: clamp(1.15rem, 2vw, 1.5rem); } /* ---------- page surface ---------- */ html body { font-family: var(--sf-font); background-color: var(--sf-bg); color: var(--sf-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- headings: one family everywhere ---------- This is what removes 'Unbounded' from /learn/ without touching its layout. */ html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { font-family: var(--sf-font); } /* ---------- one heading scale ---------- (0,0,3) — catches the plain `h1{}` pages: powergen, pool, glass, learn. */ html body h1 { font-size: var(--sf-h1); } html body h2 { font-size: var(--sf-h2); } /* (0,1,3) — catches the classed heroes: the markets family (.hero h1) and charge-director (.page-header h1). :not(.sf-home) spares the landing hero. */ html body:not(.sf-home) .hero h1, html body:not(.sf-home) .page-header h1, html body:not(.sf-home) h1.hero-title { font-size: var(--sf-h1); } /* ---------- one vertical rhythm under the nav ---------- Measured before: the first content block started at 101 / 103 / 120 / 208 / 244px depending on the page, so every click felt like a different template. The mobile drawer sits directly before the first content block on every page, which makes it a reliable anchor (:first-of-type was not — the markets family and /learn/ use DIV.wrap and were silently skipped). The landing page and full-bleed hero sections are excluded so no white band appears above their image. */ html body:not(.sf-home) .sfus-drawer + .wrap, html body:not(.sf-home) .sfus-drawer + .container, html body:not(.sf-home) .sfus-drawer + main, html body:not(.sf-home) .sfus-drawer + section:not(.hero-slider):not(.hero) { padding-top: 56px; } /* Padding alone only ADDS to whatever margin the first child already carried (the powergen family had 39px of its own, so it ended at 95px while the markets family sat at 56px). Zeroing that margin makes the gap identical. */ html body:not(.sf-home) .sfus-drawer + .wrap > *:first-child, html body:not(.sf-home) .sfus-drawer + .container > *:first-child, html body:not(.sf-home) .sfus-drawer + main > *:first-child, html body:not(.sf-home) .sfus-drawer + section:not(.hero-slider):not(.hero) > *:first-child { margin-top: 0; } /* ---------- one content width ---------- (0,1,2) beats the pages' own (0,1,0) .wrap/.main-content rules: learn 1080px, markets family 1180px, charge-director 1200px -> 1240px. */ html body .wrap, html body .container, html body .main-content, html body .page-header { max-width: var(--sf-wrap); margin-left: auto; margin-right: auto; /* identical left edge on every page: the containers carried 14/24/40px of their own, so headlines started at 122 / 134 / 140px. */ padding-left: 40px; padding-right: 40px; } @media (max-width: 640px) { html body .wrap, html body .container, html body .main-content, html body .page-header { padding-left: 20px; padding-right: 20px; } } /* ---------- monospace stays monospace ---------- */ html body code, html body pre, html body kbd, html body samp { font-family: var(--sf-mono); } /* The nav owns its own type; never let the theme reach into it. */ html body .sfus-nav, html body .sfus-drawer { color: inherit; } /* ========================================================================== PAGE-SPECIFIC LEGACY CORRECTIONS Kept here rather than in the pages themselves because those pages are script-generated and would lose local edits on the next rebuild. ========================================================================== */ /* --- charge-director.html: brand colour was green, site accent is violet --- ONLY the branding elements are recoloured. The other greens on that page are SEMANTIC and deliberately left alone: .live-dot / .status-text / .hero-badge .pulse -> "live" status .flow-charging -> charging state ECharts itemStyle #22c55e/#ef4444 -> up/down candles Recolouring those would destroy information, not unify a theme. */ html body .director-title, html body .hero-stat-value { color: var(--sf-accent); } /* The two large page headings were green. The page title now reads as ink like every other page's h1; the photo hero keeps an accent highlight. */ html body .page-header h1 { color: var(--sf-ink); } /* The hero word is not coloured by `color:` at all — it is a green gradient clipped to the glyphs with -webkit-text-fill-color:transparent, so a colour override does nothing. Keep the gradient treatment, restate it in violet. */ html body .hero-title span { background-image: linear-gradient(135deg, #a78bfa, #c4b5fd); } html body .slider-dot.active { background: var(--sf-accent); border-color: var(--sf-accent); } html body .slider-arrow:hover { border-color: var(--sf-accent); } /* The old navbar was FIXED, so the first section carried a manual top offset. The nav is sticky and in-flow now, so that offset is just an empty band. */ html body .hero-slider { margin-top: 0; } /* --- duplicate brand rows from before the unified nav --- /learn/index.html carried .topbar and the 14 /learn/D*.html carried .sfbar: a SECOND "Stromfee.US" wordmark plus Home/Overview links, sitting directly under the real nav. That second logo is the loudest "this is another site" signal there is. Verified first: the only links inside these bars point to "/" and "/learn/", both already in the nav, so nothing is lost. */ html body .topbar, html body .sfbar, html body .ab-back { display: none; } /* --- no sideways scrolling on narrow phones --- At 320px the homepage overflowed the viewport by 11px: the decorative .svf-bloom glows sit deliberately outside their section, and the .pillar cards are 11px wider than the track once their padding is added. Both are pre-existing and neither is worth re-laying-out, so the overflow is simply contained. `clip` — NOT `hidden`. Verified in Chromium at 320px: overflow:hidden on html/body makes the element a scroll container, which can strand position:sticky. `clip` does not, and the sticky nav was re-measured at scrollTop 1200 afterwards: still pinned at top:0. Browsers without `clip` ignore the line and keep today's behaviour, so this can only improve things. */ html, body { overflow-x: clip; }