/* ============================================================
ODT PLATFORM — SHARED STYLESHEET
============================================================
Locked brand system (2026-08-12): Barlow / Barlow Condensed,
navy/gold/orange/teal palette, per the odt-landing-v2 artifact.
Supersedes the earlier Montserrat/Source Serif 4 pass.
Load order on any page:
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id], div[id] { scroll-margin-top: 70px; }
:root {
--navy: #1B2A4A;
--navy2: #152238;
--gold: #C9A84C;
--gold-lt: #E8C96A;
--orange: #E8671A;
--teal: #1A7A7A;
--paper: #FAFAF7;
--warm: #F4F1EA;
--light: #EEF0F4;
--ink: #1A1C22;
--mid: #5A6070;
--border: #D8D4C8;
--white: #FFFFFF;
}
body {
font-family: 'Barlow', sans-serif;
background: var(--paper);
color: var(--ink);
font-size: 16px;
line-height: 1.6;
}
a { color: inherit; }
/* ── NAV ── */
.site-nav {
position: sticky;
top: 0;
z-index: 200;
background: var(--white);
border-bottom: 2px solid var(--gold);
padding: 0 40px;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.site-nav-logo {
font-family: 'Barlow Condensed', sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--navy);
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.site-nav-logo span, .site-nav-logo em { color: var(--orange); font-style: normal; }
.site-nav-right { display: flex; align-items: center; gap: 20px; }
.site-nav-link {
font-size: 13px;
font-weight: 600;
color: var(--mid);
text-decoration: none;
letter-spacing: 0.03em;
}
.site-nav-link:hover { color: var(--orange); }
.nav-logo-short { display: none; }
/* ── BUTTONS ── */
.btn-primary, .hero-btn, .nav-cta, .gate-btn, .cta-primary {
display: inline-block;
background: var(--orange);
color: white;
padding: 14px 32px;
font-family: 'Barlow', sans-serif;
font-size: 15px;
font-weight: 700;
border: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
transition: background 0.2s, transform 0.1s;
white-space: nowrap;
}
.btn-primary:hover, .hero-btn:hover, .nav-cta:hover, .gate-btn:hover, .cta-primary:hover {
background: #d05d16;
transform: translateY(-1px);
}
.site-nav .btn-primary { padding: 9px 20px; font-size: 12px; }
.btn-outline, .hero-btn-outline, .cta-outline {
display: inline-block;
background: transparent;
color: var(--navy);
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
border: 2px solid var(--navy);
cursor: pointer;
font-family: 'Barlow', sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
transition: all 0.2s;
}
.btn-outline:hover, .hero-btn-outline:hover, .cta-outline:hover { background: var(--navy); color: white; }
/* Trimmed padding on just the hero pair (not the shared .btn-primary/.btn-outline
used elsewhere) so both buttons fit on one line in the hero's ~520px column
instead of wrapping to two rows at typical desktop widths. */
.hero-btn, .hero-btn-outline { padding-left: 24px; padding-right: 24px; }
/* ── HERO ── */
.hero { background: var(--white); padding: 72px 40px 64px; border-bottom: 1px solid var(--border); overflow: hidden; }
.hero-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hero-eyebrow {
font-family: 'Barlow Condensed', sans-serif;
font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--orange);
margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: var(--orange); }
.hero-headline {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(42px, 5vw, 66px); font-weight: 900; line-height: 1.0;
color: var(--navy); margin-bottom: 20px;
}
.hero-headline em { color: var(--orange); font-style: normal; }
.hero-sub { font-size: 17px; line-height: 1.75; color: var(--mid); max-width: 480px; margin-bottom: 32px; }
.hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 36px; }
.hero-stat { background: var(--paper); padding: 16px 18px; text-align: center; }
.hero-stat-val { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 900; color: var(--navy); line-height: 1; }
.hero-stat-lbl { font-size: 11px; color: var(--mid); margin-top: 4px; line-height: 1.3; font-weight: 500; }
.hero-image { display: flex; justify-content: center; align-items: flex-end; }
.hero-image img { width: 100%; max-width: 520px; display: block; filter: drop-shadow(0 20px 40px rgba(27,42,74,0.18)); }
.book-cover-container { position: relative; width: 100%; max-width: 520px; }
.book-cover-container img { width: 100%; height: auto; display: block; }
.book-badge {
position: absolute; top: -14px; right: -14px;
width: 68px; height: 68px; background: var(--orange);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
text-align: center; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.25;
border: 2px solid white; color: white;
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.hero-highlight {
margin-bottom: 24px; padding: 16px 20px; border-left: 4px solid var(--gold);
background: var(--warm); font-size: 14px; line-height: 1.7; color: var(--mid);
}
.hero-highlight strong { color: var(--navy); }
/* ── WELCOME BACK ── */
#welcome-back-bar { background: var(--navy); border-bottom: 2px solid var(--gold); padding: 20px 40px; }
#welcome-back-bar > div { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
#welcome-back-bar p { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; color: white; }
/* ── URGENCY BAR ── */
.urgency-bar { background: var(--navy); padding: 16px 40px; text-align: center; }
.urgency-bar p { font-family: 'Barlow', sans-serif; font-size: 15px; color: rgba(255,255,255,0.85); }
.urgency-bar strong { color: var(--gold); }
/* ── SECTION SHARED ── */
.section { padding: 80px 40px; }
.section-inner { max-width: 1000px; margin: 0 auto; }
.section-eyebrow {
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
}
.section-headline {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(32px, 4vw, 48px); font-weight: 900; color: var(--navy);
line-height: 1.1; margin-bottom: 16px;
}
.section-sub { font-size: 16px; color: var(--mid); line-height: 1.75; max-width: 620px; }
/* ── FIVE AREAS ── */
.areas-section { background: var(--warm); }
.areas-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; border: 1px solid var(--border); margin-top: 48px; background: var(--border); }
.area-card { background: var(--white); padding: 28px 22px; }
.area-num { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; font-weight: 900; color: rgba(27,42,74,0.08); line-height: 1; margin-bottom: 6px; }
.area-name { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.area-desc { font-size: 13px; color: var(--mid); line-height: 1.6; }
/* ── BOOKS SECTION ── */
.books-section { background: var(--navy); }
.books-section .section-eyebrow { color: var(--gold); }
.books-section .section-headline { color: var(--white); }
.books-section .section-sub { color: rgba(255,255,255,0.6); }
.books-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; }
.book-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.25); padding: 28px 24px; }
.book-card-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.book-card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 900; color: white; line-height: 1.15; margin-bottom: 10px; }
.book-card-desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.65; }
/* ── LEAD-CAPTURE GATE ── */
.gate-section { background: var(--light); border-top: 4px solid var(--orange); border-bottom: 4px solid var(--orange); padding: 72px 40px; }
.gate-inner { max-width: 580px; margin: 0 auto; text-align: center; }
.gate-headline { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(30px,4vw,44px); font-weight: 900; color: var(--navy); line-height: 1.1; margin-bottom: 12px; }
.gate-sub { font-size: 16px; color: var(--mid); line-height: 1.7; margin-bottom: 36px; }
.gate-form { display: flex; flex-direction: column; gap: 14px; }
.gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gate-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.gate-field.full { grid-column: 1 / -1; }
.gate-label { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy); }
.gate-input {
padding: 12px 16px; border: 1.5px solid var(--border); background: white;
font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--ink);
outline: none; transition: border-color 0.15s; width: 100%;
}
.gate-input:focus { border-color: var(--orange); }
.gate-select {
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6070' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
}
.gate-error { color: var(--orange); font-size: 12px; font-weight: 600; display: none; margin-top: 6px; }
.gate-note { font-size: 12px; color: var(--mid); margin-top: 14px; }
.gate-consent-label {
display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--mid);
text-align: left; cursor: pointer; margin-top: 4px;
}
/* ── FOOTER ── */
.site-footer { background: var(--navy); padding: 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 900; color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase; }
.footer-creds { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.6; }
.footer-email { font-size: 13px; color: var(--gold); font-weight: 600; }
.footer-creds a { color: rgba(255,255,255,0.6); }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; gap: 32px; }
.hero-image { display: none; }
.areas-grid { grid-template-columns: 1fr 1fr; }
.books-grid { grid-template-columns: 1fr; }
.gate-row { grid-template-columns: 1fr; }
.site-nav { padding: 0 20px; }
.site-nav-link { display: none; }
.section { padding: 56px 24px; }
.hero { padding: 48px 24px 0; }
.site-footer { flex-direction: column; text-align: center; }
#welcome-back-bar { padding: 20px 24px; }
#welcome-back-bar > div { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 500px) {
.areas-grid { grid-template-columns: 1fr; }
.hero-stats { grid-template-columns: 1fr; }
.site-nav { padding: 0 16px; }
.site-nav-logo { font-size: 13px; letter-spacing: 0.02em; }
.site-nav .btn-primary { padding: 8px 12px; font-size: 11px; }
}
/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.6s ease forwards; }
.d1 { animation-delay: 0.1s; opacity: 0; }
.d2 { animation-delay: 0.25s; opacity: 0; }
.d3 { animation-delay: 0.4s; opacity: 0; }
.d4 { animation-delay: 0.55s; opacity: 0; }