/* ============================================================================
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: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--border-hairline);
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: var(--color-ink);
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--tldr, .section--process, .section--why-network, .section--featured-guides {
background: var(--bg-section-alt);
}
.section--final-cta {
background: var(--color-surface-dark);
color: var(--color-ink-inverted);
}
.section--final-cta .section__heading, .section--final-cta h2 {
color: var(--color-ink-inverted);
}
/* --------------------------------------------------------------------------
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;
}
}