/* ============================================================
PEAK by Stefan Pfafenrot — Colors & Type
Lifted from PEAK's production CSS:
assets/css/custom.260308130901.css (in source)
Fonts loaded from Google Fonts (matches production exactly —
PEAK ships Poppins, Roboto Slab and Rubik One the same way).
============================================================ */
/* If you need fonts without internet, add this @import to your instead:
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Slab:wght@400;700;900&family=Rubik+One&display=swap');
:root {
/* ─── Brand colors ───────────────────────────────────────── */
--peak-primary: #15003b; /* deep indigo / aubergine — text on light, buttons-secondary */
--peak-primary-deep: #030008; /* near-black hover state for primary buttons */
--peak-secondary: #d95dda; /* magenta — accent, CTAs, headline highlights */
--peak-text: #4b1a4b; /* plum-grey — default body text */
--peak-text-soft: #7a7c7b; /* warm neutral — captions */
--peak-bg: #ffffff; /* page background */
--peak-surface-cream: #f7f7f7; /* lazy-load placeholder + light surface */
--peak-surface-paper: #f0f2f1; /* code blocks, search field */
--peak-divider: #cacccb; /* hairlines */
--peak-lavender: #e4cfe7; /* tertiary tint — backgrounds, badges */
/* Translucent overlays used over background photos */
--peak-overlay-light: rgba(255, 255, 255, 0.616);
--peak-overlay-soft: rgba(255, 255, 255, 0.306);
--peak-overlay-faint: rgba(255, 255, 255, 0.153);
--peak-overlay-magenta: rgba(217, 93, 218, 0.745); /* secondary @ 75% */
--peak-overlay-deep: rgba(21, 0, 59, 0.973); /* primary @ 97% — footer */
/* ─── Semantic aliases ───────────────────────────────────── */
--fg-strong: var(--peak-primary);
--fg: var(--peak-text);
--fg-muted: var(--peak-text-soft);
--bg: var(--peak-bg);
--accent: var(--peak-secondary);
/* ─── Type families ──────────────────────────────────────── */
--font-display: 'Roboto Slab', 'Rockwell', Georgia, serif;
--font-body: 'Poppins', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
--font-product: 'Rubik One', 'Poppins', sans-serif; /* used only for product cards */
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* ─── Type scale (matches production exactly) ────────────── */
--fs-h1: 70px; --lh-h1: 1.1;
--fs-h2: 65px; --lh-h2: 1.4;
--fs-h3: 2rem; --lh-h3: 1.1;
--fs-h4: 28px; --lh-h4: 1.4;
--fs-h5: 20px; --lh-h5: 1.4;
--fs-h6: 18px; --lh-h6: 1.4;
--fs-body: 16px; --lh-body: 1.6;
--fs-small: 14px;
--fs-button: 1rem;
/* ─── Radii ──────────────────────────────────────────────── */
--radius-button: 0.75rem; /* 12px — buttons, accordion */
--radius-card: 2rem; /* 32px — product / service cards */
--radius-sm: 0.25rem;
/* ─── Shadows ────────────────────────────────────────────── */
--shadow-nav: rgba(0, 0, 0, 0.2) 2px 2px 4px 0px;
--shadow-card: rgba(0, 0, 0, 0.608) 2px 2px 8px 4px; /* strong drop, used on hero/feature */
/* ─── Motion ─────────────────────────────────────────────── */
--ease: cubic-bezier(.4, 0, .2, 1);
--t-fast: 180ms;
--t-default: 300ms; /* PEAK uses .3s ease-in-out everywhere */
--t-reveal: 1000ms; /* slide-in on scroll */
/* ─── Layout ─────────────────────────────────────────────── */
--container-max: 78rem; /* 1248px */
--section-pad-y: 10rem; /* PEAK's .wv-spacer default */
--gutter: 1.5rem;
}
@media (max-width: 60.9375rem) {
:root {
--fs-body: 14px;
--fs-h1: 46px;
--fs-h2: 46px;
--fs-h3: 30px;
--fs-h4: 24px;
--fs-h5: 17px;
--fs-h6: 16px;
--section-pad-y: 6rem;
}
}
@media (max-width: 35.9375rem) {
:root {
--fs-h1: 38px;
--fs-h2: 32px;
--fs-h5: 14px;
--section-pad-y: 4rem;
}
}
/* ─── Resets + base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
margin: 0;
font-family: var(--font-body);
font-weight: 300;
color: var(--fg);
background-color: var(--bg);
font-size: var(--fs-body);
line-height: var(--lh-body);
letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 900;
color: var(--fg-strong);
margin: 0;
letter-spacing: 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); text-transform: uppercase; }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); text-transform: uppercase; }
h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); text-transform: uppercase; }
p { margin: 0; }
a {
color: var(--peak-primary);
text-decoration: none;
transition: all var(--t-default) ease-in-out;
}
a:hover { text-decoration: underline; }
::selection { background: var(--peak-secondary); color: #fff; }
/* ─── Utility colour classes (match PEAK's .color-*) ──────── */
.color-primary { color: var(--peak-primary) !important; }
.color-secondary { color: var(--peak-secondary) !important; }
.color-text { color: var(--peak-text) !important; }
.color-bg { color: #fff !important; }
.bg-primary { background: var(--peak-primary) !important; }
.bg-secondary { background: var(--peak-secondary) !important; }
.bg-lavender { background: var(--peak-lavender) !important; }
.bg-cream { background: var(--peak-surface-cream) !important; }
.bg-paper { background: var(--peak-surface-paper) !important; }
/* ─── Button (default = magenta CTA, secondary = dark ink) ─ */
.peak-button {
display: inline-block;
padding: 1rem 2.5rem;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-button);
line-height: 1;
border: 1px solid transparent;
border-radius: var(--radius-button);
background: var(--peak-secondary);
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all var(--t-default) ease-in-out;
transition-property: background, border-color, color;
}
.peak-button:hover { background: #fff; color: var(--peak-secondary); text-decoration: none; }
.peak-button.is-secondary {
background: var(--peak-primary);
color: #fff;
}
.peak-button.is-secondary:hover { background: #fff; color: var(--peak-secondary); }
.peak-button.is-small { padding: .75rem 2rem; }
.peak-button.is-large { padding: 1.25rem 2.75rem; }