/* ==========================================================================
Reputex Studios — base.css
Shared design rulebook for all four sites:
webinar.reputexstudios.com os.reputexstudios.com
linkedin.reputexstudios.com call.reputexstudios.com
What lives here: colours, fonts, text sizes, spacing, rules (the thin
horizontal lines), the ledger table, the button, focus states.
What does NOT live here: anything specific to one page's layout.
Fonts: add this line inside on every page that uses this file.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS — the only place you should ever need to change a colour or size
-------------------------------------------------------------------------- */
:root {
/* Colour — paper, ink, and the two accounting colours */
--paper: #F0EFEA; /* page background, ledger-paper grey-white */
--rule: #C8C4B8; /* every thin horizontal line */
--ink: #1A1D21; /* all text, blue-black */
--ink-faded: #5C6065; /* labels, footnotes, timestamps */
--debit: #B3261E; /* red: costs you. struck prices, "do not", seats running out */
--credit: #0F3D7A; /* blue: balances. bonuses, "after", the button */
--on-credit: #FFFFFF; /* text on top of the blue button */
/* Fonts */
--font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
--font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
/* Type scale — mobile first; the larger sizes step up at 768px */
--text-xs: 0.8125rem; /* 13px — sticky bar, timestamps, footnotes */
--text-sm: 0.9375rem; /* 15px — labels, eyebrow, small mono */
--text-base: 1.0625rem; /* 17px — body */
--text-md: 1.25rem; /* 20px — lead paragraph, subhead */
--text-lg: 1.5rem; /* 24px — section headings */
--text-xl: 2rem; /* 32px — H1 on mobile */
--text-2xl: 3rem; /* 48px — hero numbers on mobile */
--text-3xl: 4rem; /* 64px — price block number on mobile */
--leading-tight: 1.1;
--leading-snug: 1.3;
--leading-normal: 1.55;
/* Spacing — an 8px ladder */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
/* Layout widths */
--measure: 42rem; /* 672px — comfortable reading width for text */
--measure-wide: 60rem; /* 960px — ledger tables, two-column blocks */
--gutter: var(--space-4); /* side padding on phones */
/* Rules */
--rule-width: 1px;
--rule-double: 3px; /* the "total" rule: two lines with a gap */
/* Button */
--btn-height: 3.5rem; /* 56px minimum tap height */
/* Sticky bar height — pages with a sticky bar read this to pad the top */
--sticky-height: 3.25rem; /* 52px */
/* Motion — the toast is the only thing that moves */
--motion-fast: 200ms;
}
@media (min-width: 48em) { /* 768px and up */
:root {
--text-xl: 3.25rem; /* 52px — H1 */
--text-2xl: 4.5rem; /* 72px — hero numbers */
--text-3xl: 6rem; /* 96px — price block number */
--gutter: var(--space-6);
--sticky-height: 3.5rem;
}
}
/* --------------------------------------------------------------------------
2. RESET — small, predictable starting point
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: auto; /* no smooth scroll: nothing moves */
}
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-serif);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
img, video, iframe, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
ul, ol { padding-left: 0; list-style: none; }
/* Never any rounding or shadow anywhere on any Reputex page */
* { border-radius: 0 !important; box-shadow: none !important; }
/* --------------------------------------------------------------------------
3. TYPOGRAPHY
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 600;
line-height: var(--leading-tight);
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }
p { max-width: var(--measure); }
.lead { font-size: var(--text-md); line-height: var(--leading-snug); }
.faded { color: var(--ink-faded); }
/* Every number on the page uses this: monospace with equal-width digits */
.mono, .num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: 0;
}
.num { text-align: right; white-space: nowrap; }
/* Accounting colours, usable on any text */
.debit { color: var(--debit); }
.credit { color: var(--credit); }
/* Struck-through anchor price — one hard line, not the browser default */
.struck {
position: relative;
color: var(--debit);
text-decoration: none;
}
.struck::after {
content: "";
position: absolute;
left: -0.1em; right: -0.1em;
top: 52%;
height: 0.07em;
min-height: 2px;
background: currentColor;
transform: rotate(-4deg);
}
/* Eyebrow — the one-line "who this is for". Sentence case, mono, never caps. */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--ink-faded);
text-transform: none;
letter-spacing: 0;
}
/* --------------------------------------------------------------------------
4. RULES — horizontal lines are the texture of the page. Use these, not
borders on boxes.
-------------------------------------------------------------------------- */
.rule { border: 0; border-top: var(--rule-width) solid var(--rule); }
.rule-double { border: 0; border-top: var(--rule-double) double var(--ink); }
/* Put a rule above or below any element */
.rule-above { border-top: var(--rule-width) solid var(--rule); }
.rule-below { border-bottom: var(--rule-width) solid var(--rule); }
/* --------------------------------------------------------------------------
5. LEDGER — the label/value row that logistics, prices, bonuses, proof,
and before/after are all built from.
- Workshop fee
- ₹4,999
-------------------------------------------------------------------------- */
.ledger {
width: 100%;
border-top: var(--rule-width) solid var(--rule);
}
.ledger-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-4);
padding: var(--space-3) 0;
border-bottom: var(--rule-width) solid var(--rule);
}
.ledger-row dt { flex: 1 1 auto; }
.ledger-row dd { flex: 0 0 auto; }
/* The "total" row: double rule above and below, heavier text */
.ledger-row.is-total {
border-top: var(--rule-double) double var(--ink);
border-bottom: var(--rule-double) double var(--ink);
font-weight: 600;
}
/* Numbered entries — the index sits in a left gutter in mono */
.entry {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: var(--space-3);
padding: var(--space-5) 0;
border-bottom: var(--rule-width) solid var(--rule);
}
.entry-index {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--ink-faded);
padding-top: 0.2em;
}
/* Cells in a single ruled row — the credibility strip, the stat row */
.cells {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: var(--rule-width) solid var(--rule);
border-bottom: var(--rule-width) solid var(--rule);
}
.cells > * {
padding: var(--space-4) var(--space-3);
border-right: var(--rule-width) solid var(--rule);
}
.cells > *:nth-child(2n) { border-right: 0; }
.cells > *:nth-child(n+3) { border-top: var(--rule-width) solid var(--rule); }
@media (min-width: 48em) {
.cells { grid-template-columns: repeat(4, 1fr); }
.cells > *:nth-child(2n) { border-right: var(--rule-width) solid var(--rule); }
.cells > *:last-child { border-right: 0; }
.cells > *:nth-child(n+3) { border-top: 0; }
}
/* --------------------------------------------------------------------------
6. BUTTON — the one loud, solid element. Square, green, 56px, full width
on phones.
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--btn-height);
padding: var(--space-3) var(--space-5);
background: var(--credit);
color: var(--on-credit);
font-family: var(--font-mono);
font-size: var(--text-base);
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
border: 2px solid var(--credit);
}
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn:active { background: var(--ink); }
/* Small version for the sticky bar */
.btn-sm {
width: auto;
min-height: 2.25rem;
padding: var(--space-1) var(--space-4);
font-size: var(--text-xs);
}
@media (min-width: 48em) {
.btn { width: auto; min-width: 18rem; }
}
/* --------------------------------------------------------------------------
7. FOCUS — visible for keyboard users, invisible for mouse clicks
-------------------------------------------------------------------------- */
:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 3px;
}
.btn:focus-visible {
outline-color: var(--credit);
outline-offset: 4px;
}
/* --------------------------------------------------------------------------
8. LAYOUT HELPERS
-------------------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--measure-wide);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--measure); }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.section { padding-block: var(--space-7); }
@media (min-width: 48em) { .section { padding-block: var(--space-8); } }
/* Hide visually, keep for screen readers */
.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;
}
/* --------------------------------------------------------------------------
9. MOTION — off by default. Anything that moves must ask for it, and
reduced-motion switches it all off.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}