/* ============================================================
Mediaology — Base Styles
Reset, typography, document-level defaults.
============================================================ */
/* ---------- Modern reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { height: 100%; }
body { line-height: var(--lh-base); }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
/* Pair with the contextmenu/dragstart blockers in site.js — visual
feedback that images aren't draggable to the desktop. Doesn't
affect lightbox playback, hover effects, or click handlers. */
img { -webkit-user-drag: none; -webkit-touch-callout: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: 2px; }
/* ---------- Document defaults ---------- */
html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /* offset for sticky nav when anchor-scrolling */
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
color: var(--text-on-light-primary);
background: var(--surface-black); /* default to black; pages override */
overflow-x: hidden;
}
/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6, .display {
font-family: var(--font-display);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
}
.display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.display-md { font-size: var(--fs-display-md); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { line-height: var(--lh-relaxed); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.text-sm { font-size: var(--fs-body-sm); }
.text-caption { font-size: var(--fs-caption); }
/* Eyebrow text — uppercase label above headlines */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--text-on-light-primary);
}
.eyebrow-on-dark { color: var(--text-on-dark-primary); }
.eyebrow-pink { color: var(--brand-primary); }
/* Pink lightning-bolt eyebrow icon (used in page headers) */
.eyebrow .eyebrow-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--brand-primary);
flex-shrink: 0;
}
.eyebrow .eyebrow-icon svg { width: 12px; height: 12px; fill: var(--brand-white); }
/* Highlighted word in headlines (e.g., "Real Brands. Real Results.") */
.text-pink, .pink-highlight { color: var(--brand-primary); }
/* ---------- Section utilities ---------- */
.section {
padding-top: var(--section-py);
padding-bottom: var(--section-py);
position: relative;
}
.section-sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }
.section-black { background: var(--surface-black); color: var(--text-on-dark-primary); }
.section-white { background: var(--surface-white); color: var(--text-on-light-primary); }
.section-magenta {
background: linear-gradient(180deg, var(--surface-magenta-bg) 0%, var(--surface-magenta-mid) 50%, var(--surface-magenta-bg) 100%);
color: var(--text-on-dark-primary);
}
/* On dark sections, headings/text stay white */
.section-black h1, .section-black h2, .section-black h3, .section-black .display,
.section-magenta h1, .section-magenta h2, .section-magenta h3, .section-magenta .display {
color: var(--text-on-dark-primary);
}
.section-black p, .section-magenta p { color: var(--text-on-dark-secondary); }
/* ---------- Container ---------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
.container-narrow { max-width: 960px; margin-inline: auto; padding-inline: var(--container-px); }
.container-prose { max-width: var(--content-max-wide); margin-inline: auto; padding-inline: var(--container-px); }
/* ---------- Curved section dividers ----------
Apply .section-curve-top to a section to add a concave SVG curve at the top.
Color picker via inline style or a modifier class. */
.section-curve-top { position: relative; }
.section-curve-top::before {
content: '';
position: absolute;
top: -1px; left: 0; right: 0;
height: 64px;
background: inherit;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transform: translateY(-100%);
}
/* ---------- Skip link (a11y) ---------- */
.skip-link {
position: absolute;
top: -40px; left: 0;
background: var(--brand-primary);
color: var(--brand-white);
padding: var(--space-2) var(--space-4);
z-index: var(--z-toast);
}
.skip-link:focus-visible { top: 0; }
/* ---------- Visually hidden but screen-reader 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;
}
/* ---------- Web font loading state ---------- */
.fonts-loading body { opacity: 0.98; }
.fonts-loaded body { opacity: 1; transition: opacity var(--duration-base) var(--ease-out); }