/* =================================================================
Mali Richlen Advisory — Global Styles
----------------------------------------------------------------
Reset, base typography, utility classes used across every page.
Loads after tokens.css.
Fonts must be loaded in the document via:
================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
margin: 0;
background: var(--paper);
color: var(--navy-ink);
font-family: var(--body);
font-size: var(--fs-body);
line-height: 1.6;
font-weight: 400;
letter-spacing: 0.005em;
}
/* Subtle paper grain — fixed-positioned dot grid overlay, never crosses into noisy */
body::before {
content: "";
position: fixed; inset: 0;
background-image: radial-gradient(rgba(31,42,68,0.025) 1px, transparent 1px);
background-size: 3px 3px;
pointer-events: none;
z-index: 1;
mix-blend-mode: multiply;
opacity: 0.5;
}
a { color: inherit; text-decoration: none; }
/* --------------------------------------------------------------
DISPLAY HEADINGS
-------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--display);
font-weight: 500;
color: var(--navy);
letter-spacing: -0.012em;
line-height: 1.08;
margin: 0;
}
/* --------------------------------------------------------------
CONTAINERS
-------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
position: relative;
z-index: 2;
}
.read-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
position: relative;
z-index: 2;
}
.narrow { max-width: 720px; }
/* --------------------------------------------------------------
EYEBROW — tracked-out small caps
-------------------------------------------------------------- */
.eyebrow {
font-family: var(--body);
font-size: var(--fs-eyebrow);
white-space: nowrap;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--forest);
}
.eyebrow.on-navy { color: var(--camel); }
.eyebrow.dim { color: var(--muted); }
/* Eyebrow row: forest dash + label, used above H1/H2 */
.eyebrow-row {
display: flex; align-items: center; gap: 14px;
margin-bottom: 28px;
line-height: 1;
}
.eyebrow-row::before {
content: ""; display: block;
width: 36px; height: 1px; background: var(--forest);
}
/* --------------------------------------------------------------
NUM — small tabular-figured caps label (used in rails, paper-num)
-------------------------------------------------------------- */
.num {
font-family: var(--body);
font-size: 11px;
white-space: nowrap;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--camel-deep);
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------
ITALIC CAMEL SUBLINE — voice marker
Sits below an H1/H2 to set the thematic frame.
-------------------------------------------------------------- */
.subline {
font-family: var(--display);
font-style: italic;
font-weight: 400;
color: var(--camel-deep);
font-size: var(--fs-display-s);
line-height: 1.32;
letter-spacing: -0.005em;
}
/* --------------------------------------------------------------
RULES — thin horizontal section dividers
.rule.camel: 1px camel, full-width, used inside sections
.rule (default): half-camel, half-line, asymmetric editorial rule
.hairline-camel: short 80px camel rule, used below H1
-------------------------------------------------------------- */
.rule {
height: 1px;
background: linear-gradient(to right, var(--camel) 0, var(--camel) 56px, var(--line) 56px, var(--line) 100%);
border: 0;
margin: 0;
}
.rule.full { background: var(--line); }
.rule.camel { background: var(--camel); height: 1px; }
.hairline-camel {
width: 80px;
height: 1px;
background: var(--camel);
margin: 32px 0 0;
border: 0;
}
/* --------------------------------------------------------------
BUTTONS
.btn — navy fill, paper text (primary)
.btn.outline — transparent, navy stroke
.btn.camel — camel fill, navy text (the Schedule a Conversation CTA)
.nav-cta — size variant for the nav header
.btn .arr — arrow glyph that translateX(3) on hover
-------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
font-family: var(--body);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.04em;
padding: 12px 22px;
border: 1px solid var(--navy);
background: var(--navy);
color: var(--paper);
cursor: pointer;
transition: background var(--hover-fast),
color var(--hover-fast),
border-color var(--hover-fast),
transform var(--hover-fast);
}
.btn:hover { background: var(--navy-ink); }
.btn .arr { transition: transform 240ms ease; }
.btn:hover .arr { transform: translateX(3px); }
.btn.outline {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.btn.outline:hover { background: var(--navy); color: var(--paper); }
.btn.camel {
background: var(--camel);
border-color: var(--camel);
color: var(--navy);
}
.btn.camel:hover {
background: var(--camel-deep);
border-color: var(--camel-deep);
color: var(--paper);
}
.nav-cta {
padding: 11px 18px;
font-size: 13px;
}
/* --------------------------------------------------------------
REVEAL ON SCROLL
IntersectionObserver adds .in when element enters viewport.
-------------------------------------------------------------- */
[data-reveal],
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--reveal-dur) var(--reveal-ease),
transform var(--reveal-dur) var(--reveal-ease);
}
[data-reveal].in,
.reveal.in {
opacity: 1;
transform: translateY(0);
}