/* ============================================================================
TechBrot · BSS-1 · 02 — BASE
----------------------------------------------------------------------------
Reset, root typography, accessibility, utilities.
No component styles here.
============================================================================ */
/* --------------------------------------------------------------------------
FONTS — loaded from Google Fonts
Add this to before /css/styles.css:
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
RESET — modern, minimal
-------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "calt";
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 1rem);
font-size: 17px;
}
@media (max-width: 480px) {
html {
font-size: 16px;
}
}
body {
background: var(--bg-page);
color: var(--text-body);
font-family: var(--font-sans);
font-size: var(--fs-17);
line-height: var(--lh-base);
letter-spacing: var(--ls-base);
font-weight: var(--fw-regular);
min-height: 100vh;
overflow-x: hidden;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
max-width: 100%;
height: auto;
}
button {
font-family: inherit;
font-size: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
text-align: inherit;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--motion-base) var(--ease-out);
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
color: inherit;
}
ul, ol {
list-style: none;
}
/* Hide [hidden] explicitly (some browsers wobble on this) */
[hidden] {
display: none !important;
}
/* --------------------------------------------------------------------------
TYPOGRAPHY DEFAULTS
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: var(--fw-regular);
color: var(--text-primary);
line-height: var(--lh-snug);
letter-spacing: var(--ls-snug);
}
h1 {
font-size: var(--fs-52);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
h2 {
font-size: var(--fs-38);
}
h3 {
font-size: var(--fs-28);
}
h4 {
font-size: var(--fs-24);
}
h5 {
font-size: var(--fs-20);
}
h6 {
font-size: var(--fs-18);
}
@media (min-width: 960px) {
h1 {
font-size: var(--fs-68);
}
}
p {
margin-block-end: 0;
}
strong {
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
em {
font-style: italic;
}
small {
font-size: var(--fs-14);
color: var(--text-secondary);
}
/* --------------------------------------------------------------------------
LINKS
-------------------------------------------------------------------------- */
a {
color: var(--text-primary);
}
main a:not([class]) {
text-decoration: underline;
text-decoration-thickness: .5px;
text-underline-offset: 5px;
text-decoration-color: var(--color-ink-soft);
transition: text-decoration-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}
main a:not([class]):hover {
color: var(--color-accent);
text-decoration-color: var(--color-accent);
}
/* --------------------------------------------------------------------------
FOCUS — accessible, visible, branded
-------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) {
outline: none;
}
/* --------------------------------------------------------------------------
SELECTION
-------------------------------------------------------------------------- */
::selection {
background: var(--color-ink);
color: var(--color-paper);
}
/* --------------------------------------------------------------------------
SKIP LINK — accessibility
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
top: -40px;
left: 0;
z-index: var(--z-toast);
padding: var(--space-3) var(--space-4);
background: rgba(11,11,11,0);
color: var(--color-paper);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
transition: top var(--motion-base) var(--ease-out);
}
.skip-link:focus {
top: 0;
}
/* --------------------------------------------------------------------------
UTILITIES
-------------------------------------------------------------------------- */
/* Screen-reader-only — visually hide while remaining accessible */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Container — primary layout wrapper */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
@media (min-width: 720px) {
.container {
padding-inline: var(--container-padding-lg);
}
}
.container--narrow {
max-width: var(--container-narrow);
}
.container--wide {
max-width: var(--container-wide);
}
/* --------------------------------------------------------------------------
SECTION DEFAULTS
Every inherits this.
Vertical rhythm comes from here.
-------------------------------------------------------------------------- */
.section {
padding-block: var(--space-16);
position: relative;
}
@media (min-width: 960px) {
.section {
padding-block: var(--space-24);
}
}
/* Section header — eyebrow + heading + lede */
.section__header {
max-width: 720px;
margin-block-end: var(--space-12);
}
.section__header--centered {
margin-inline: auto;
text-align: center;
}
.section__eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-13);
font-weight: var(--fw-medium);
color: var(--text-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
margin-block-end: var(--space-4);
}
.section__eyebrow--inverted {
color: var(--color-ink-inverted-mute);
}
.section__heading {
font-size: var(--fs-32);
margin-block-end: var(--space-4);
max-width: 18ch;
}
.section__header--centered .section__heading {
margin-inline: auto;
}
@media (min-width: 720px) {
.section__heading {
font-size: var(--fs-38);
max-width: 20ch;
}
}
@media (min-width: 1200px) {
.section__heading {
font-size: var(--fs-44);
}
}
.section__lede {
font-size: var(--fs-18);
color: var(--text-secondary);
max-width: 56ch;
line-height: 1.5;
}
.section__header--centered .section__lede {
margin-inline: auto;
}
/* --------------------------------------------------------------------------
SECTION BACKGROUNDS — alternation rhythm
Wrap a section in section--alt to get warm-paper background.
-------------------------------------------------------------------------- */
.section--proof-strip, .section--process, .section--why-network, .section--featured-guides {
background: var(--bg-section-alt);
}
/* --------------------------------------------------------------------------
FINAL-CTA + TL;DR — site-wide warm-accent treatment (bookends the page)
----------------------------------------------------------------------------
Previously the final-cta was dark site-wide and only location pages got the
warm-accent close (in 07-location-child). This promotes that treatment to
the global default so every page — home, reviews, team, service — opens on
the TL;DR tint and closes on the matching final-cta tint. Location-child's
own .page--location override now resolves to the same values (harmless).
Tokens: warm paper tinted 4–6% with the ox-red accent; ink text.
-------------------------------------------------------------------------- */
.section--tldr {
background: color-mix(in srgb, var(--color-accent) 4%, var(--color-paper));
}
.section--final-cta {
background: color-mix(in srgb, var(--color-accent) 6%, var(--color-paper));
color: var(--text-body);
}
.section--final-cta .section__heading, .section--final-cta h2, .section--final-cta .final-cta__heading {
color: var(--text-primary);
}
/* Eyebrows on the now-light final-cta: the markup carries --inverted variants
for backwards-compatibility with the old dark treatment; re-point them to
the standard eyebrow color so they read correctly on the light band. */
.section--final-cta .section__eyebrow, .section--final-cta .section__eyebrow--inverted {
color: var(--text-eyebrow);
}
/* --------------------------------------------------------------------------
SECTION — DARK (.section--dark)
----------------------------------------------------------------------------
The canonical dark band used by advisory POV sections, "why verified-only",
and "how it works" across pillars, reviews, and team. Pairs with components
built for dark surfaces (mission-block, stance). Previously referenced in
markup but never defined — these bands rendered unstyled until now.
-------------------------------------------------------------------------- */
.section--dark {
background: var(--color-surface-dark);
color: var(--color-ink-inverted);
}
.section--dark .section__heading, .section--dark h2, .section--dark h3 {
color: var(--color-ink-inverted);
}
.section--dark .section__eyebrow, .section--dark .section__eyebrow--inverted {
color: var(--color-ink-inverted-mute);
}
.section--dark .section__lede {
color: var(--color-ink-inverted-soft);
}
/* Plain links inside dark bands stay legible */
.section--dark a:not([class]) {
color: var(--color-ink-inverted);
text-decoration-color: var(--color-accent-soft);
}
.section--dark a:not([class]):hover {
color: var(--color-accent-soft);
}
/* --------------------------------------------------------------------------
PROSE — for long-form content (used inside .container--narrow blocks)
-------------------------------------------------------------------------- */
.prose p + p {
margin-block-start: var(--space-5);
}
.prose p {
font-size: var(--fs-18);
line-height: var(--lh-loose);
color: var(--text-body);
}
/* --------------------------------------------------------------------------
REDUCED MOTION
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================================
CONTAINER OVERRIDE (must stay LAST in 02-base.css)
----------------------------------------------------------------------------
Bootstrap Studio injects its own .container rules (max-width 540/720/960/1320
+ 0.75rem gutters) which override the design container and cause the cramped,
shrunk, no-padding layout. This block re-establishes the design container and
neutralizes Bootstrap's responsive max-width steps. Keep this at the very end
so it wins the cascade. .container-fluid and the -sm/-md/-lg/-xl/-xxl helpers
are left alone for any BSS-generated markup that needs them.
============================================================================ */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
--bs-gutter-x: 0;
padding-right: var(--container-padding);
padding-left: var(--container-padding);
}
@media (min-width: 720px) {
.container {
padding-inline: var(--container-padding-lg);
padding-right: var(--container-padding-lg);
padding-left: var(--container-padding-lg);
}
}
/* Bootstrap sets max-width per breakpoint on .container; force the design value
back at every breakpoint Bootstrap touches (576 / 768 / 992 / 1200 / 1400). */
@media (min-width: 576px) {
.container {
max-width: var(--container-max);
}
}
@media (min-width: 768px) {
.container {
max-width: var(--container-max);
}
}
@media (min-width: 992px) {
.container {
max-width: var(--container-max);
}
}
@media (min-width: 1200px) {
.container {
max-width: var(--container-max);
}
}
@media (min-width: 1400px) {
.container {
max-width: var(--container-max);
}
}
.container--narrow {
max-width: var(--container-narrow);
}
.container--wide {
max-width: var(--container-wide);
}
/* Re-assert narrow/wide at the breakpoints too (Bootstrap only targets bare
.container, but being explicit prevents any inherited max-width surprises). */
@media (min-width: 992px) {
.container--narrow {
max-width: var(--container-narrow);
}
}
@media (min-width: 1400px) {
.container--narrow {
max-width: var(--container-narrow);
}
}
@media (min-width: 992px) {
.container--wide {
max-width: var(--container-wide);
}
}
@media (min-width: 1400px) {
.container--wide {
max-width: var(--container-wide);
}
}