/* =====================================================================
2nd Skies Trading — combined stylesheet for WordPress handoff.
Concatenated from:
- colors_and_type.css (brand tokens + base type + @font-face)
- ui_kits/website/styles.css (all page + component classes)
Font files are expected at ./fonts/ relative to this stylesheet.
===================================================================== */
/* =====================================================================
2nd Skies Trading — Design Tokens
Brand: Chris Capre's online trading school (institutional positioning,
options flow, price action). Navy + gold, slab-serif body, sans display.
===================================================================== */
/* ---------- Webfont declarations -----------------------------------
All Montserrat and Roboto Slab weights are shipped locally in ./fonts.
No external network requests — the system runs fully offline.
------------------------------------------------------------------- */
/* ===== Montserrat ===== */
/* @font-face { font-family:'Montserrat'; font-weight:100; font-style:normal; src:url('../fonts/Montserrat-Thin.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:100; font-style:italic; src:url('../fonts/Montserrat-ThinItalic.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:200; font-style:normal; src:url('../fonts/Montserrat-ExtraLight.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:200; font-style:italic; src:url('../fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:300; font-style:normal; src:url('../fonts/Montserrat-Light.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:300; font-style:italic; src:url('../fonts/Montserrat-LightItalic.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:400; font-style:normal; src:url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:400; font-style:italic; src:url('../fonts/Montserrat-Italic.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:500; font-style:normal; src:url('../fonts/Montserrat-Medium.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:500; font-style:italic; src:url('../fonts/Montserrat-MediumItalic.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:600; font-style:normal; src:url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:600; font-style:italic; src:url('../fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:700; font-style:normal; src:url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:700; font-style:italic; src:url('../fonts/Montserrat-BoldItalic.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:800; font-style:normal; src:url('../fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:800; font-style:italic; src:url('../fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:900; font-style:normal; src:url('../fonts/Montserrat-Black.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Montserrat'; font-weight:900; font-style:italic; src:url('../fonts/Montserrat-BlackItalic.ttf') format('truetype'); font-display:swap; } */
/* ===== Roboto Slab ===== */
/* @font-face { font-family:'Roboto Slab'; font-weight:100; font-style:normal; src:url('../fonts/RobotoSlab-Thin.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Roboto Slab'; font-weight:200; font-style:normal; src:url('../fonts/RobotoSlab-ExtraLight.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Roboto Slab'; font-weight:300; font-style:normal; src:url('../fonts/RobotoSlab-Light.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Roboto Slab'; font-weight:400; font-style:normal; src:url('../fonts/RobotoSlab-Regular.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Roboto Slab'; font-weight:500; font-style:normal; src:url('../fonts/RobotoSlab-Medium.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Roboto Slab'; font-weight:600; font-style:normal; src:url('../fonts/RobotoSlab-SemiBold.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Roboto Slab'; font-weight:700; font-style:normal; src:url('../fonts/RobotoSlab-Bold.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Roboto Slab'; font-weight:800; font-style:normal; src:url('../fonts/RobotoSlab-ExtraBold.ttf') format('truetype'); font-display:swap; } */
/* @font-face { font-family:'Roboto Slab'; font-weight:900; font-style:normal; src:url('../fonts/RobotoSlab-Black.ttf') format('truetype'); font-display:swap; } */
:root {
/* ===== Brand palette =============================================== */
--blue-primary: #0a1c40; /* navy — primary brand */
--blue-secondary: #212d46; /* navy lifted — dark surfaces, proof bars */
--blue-deep: #060e1f; /* even darker — footer */
--gold-primary: #a68a4f; /* CTAs, eyebrow labels */
--gold-secondary: #d9b04f; /* highlights on dark, accent emphasis */
--gray-primary: #d9d9d9;
--gray-secondary: #e1e1e1;
--white: #ffffff;
--ink: #2a2a2a; /* body text */
--ink-muted: #5a5a5a; /* secondary body */
--surface: #f8f7f4; /* page sections, cream */
--border: #e1e1e1;
--green: #15803d; /* positive / checkmarks */
--green-bg: #f0faf4;
--green-border: #bbf7d0;
--blue-tint: #eef1f7; /* perf strip background */
--blue-tint-border:#c5cfe8;
--amber: #92400e;
--amber-bg: #fef3c7;
/* ===== Semantic surfaces =========================================== */
--bg: var(--white);
--bg-section: var(--surface);
--bg-dark: var(--blue-primary);
--bg-dark-alt: var(--blue-secondary);
--bg-footer: var(--blue-deep);
/* ===== Foreground tiers ============================================ */
--fg1: var(--ink); /* primary body on light */
--fg2: var(--ink-muted); /* secondary body on light */
--fg-heading: var(--blue-primary); /* h1–h4 on light */
--fg-accent: var(--gold-primary); /* eyebrows, links */
--fg-on-dark-1: rgba(255,255,255,0.92);
--fg-on-dark-2: rgba(255,255,255,0.65);
--fg-on-dark-3: rgba(255,255,255,0.4);
/* ===== Type families =============================================== */
--font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Roboto Slab', Georgia, 'Times New Roman', serif;
--font-mono: 'Courier New', ui-monospace, monospace;
/* ===== Type scale — clamp(min, fluid, max) for fluid web type ====== */
--t-display-1: clamp(36px, 5.5vw, 58px); /* hero display */
--t-display-2: clamp(34px, 5vw, 50px); /* secondary hero */
--t-h1: clamp(28px, 4vw, 40px);
--t-h2: clamp(24px, 3vw, 34px);
--t-h3: 17px;
--t-h4: 15px;
--t-body: 16px;
--t-body-sm: 14px;
--t-body-xs: 13px;
--t-label: 11px; /* eyebrow / overline */
--t-tiny: 10px;
/* ===== Weights ===================================================== */
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-semibold: 600;
--w-bold: 700;
--w-black: 900;
/* ===== Letter-spacing ============================================== */
--ls-display: -0.025em; /* tight on huge type */
--ls-h: -0.015em;
--ls-body: 0;
--ls-label: 0.12em; /* uppercase eyebrow */
--ls-button: 0.02em;
--ls-nav: 0.04em;
/* ===== Line-height ================================================= */
--lh-display: 1.05;
--lh-h: 1.2;
--lh-body: 1.8;
--lh-body-tight:1.7;
--lh-ui: 1.45;
/* ===== Layout / containers ========================================= */
--container: 1100px;
--container-narrow: 820px;
--gutter: 28px;
/* ===== Spacing scale (4px base, hand-tuned) ======================== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--section-pad-y: 80px;
--section-pad-y-sm: 56px;
/* ===== Radii — small, restrained =================================== */
--r-xs: 3px; /* badges, eyebrow chips */
--r-sm: 4px; /* buttons, inputs */
--r-md: 6px;
--r-lg: 8px; /* cards */
--r-xl: 10px; /* offer cards, panels */
--r-pill: 999px;
/* ===== Borders ===================================================== */
--bw-hair: 1px;
--bw-accent: 3px; /* gold top-rule on cards */
--bw-feature: 4px; /* gold left-rule on frustration block */
--border-light: 1px solid var(--border);
--border-dark: 1px solid rgba(255,255,255,0.07);
--border-dark-2: 1px solid rgba(255,255,255,0.1);
/* ===== Shadows — minimal, mostly absent ============================ */
--shadow-sm: 0 1px 2px rgba(10,28,64,0.05);
--shadow-md: 0 6px 18px rgba(10,28,64,0.08);
--shadow-lg: 0 12px 32px rgba(10,28,64,0.12);
/* ===== Motion ====================================================== */
--ease: ease;
--t-quick: 0.15s;
--t-base: 0.2s;
--t-slow: 0.35s;
}
/* =====================================================================
Semantic typography styles — apply via class OR @extend in components
===================================================================== */
/* Display — hero headlines on dark backgrounds */
.t-display {
font-family: var(--font-display);
font-size: var(--t-display-1);
font-weight: var(--w-bold);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--white);
}
.t-display em { /* gold-accented inline phrase */
font-style: normal;
color: var(--gold-secondary);
}
.t-display-2 {
font-family: var(--font-display);
font-size: var(--t-display-2);
font-weight: var(--w-semibold);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--white);
}
/* Section heads */
.t-h2 {
font-family: var(--font-display);
font-size: var(--t-h2);
font-weight: var(--w-semibold);
line-height: var(--lh-h);
letter-spacing: var(--ls-h);
color: var(--fg-heading);
}
.t-h3 {
font-family: var(--font-display);
font-size: var(--t-h3);
font-weight: var(--w-semibold);
line-height: 1.3;
color: var(--fg-heading);
}
.t-h4 {
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: var(--w-semibold);
color: var(--fg-heading);
}
/* Eyebrow / overline label — gold, all caps, wide track */
.t-label {
font-family: var(--font-display);
font-size: var(--t-label);
font-weight: var(--w-semibold);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--gold-primary);
}
.t-label--light { /* on dark backgrounds */
color: rgba(217,176,79,0.7);
font-weight: var(--w-medium);
}
/* Body — slab serif, light weight, generous leading */
.t-body {
font-family: var(--font-body);
font-size: var(--t-body);
font-weight: var(--w-light);
line-height: var(--lh-body);
color: var(--fg2);
}
.t-body strong {
font-weight: var(--w-regular);
color: var(--fg1);
}
.t-body-sm {
font-family: var(--font-body);
font-size: var(--t-body-sm);
font-weight: var(--w-light);
line-height: var(--lh-body-tight);
color: var(--fg2);
}
.t-body-xs {
font-family: var(--font-body);
font-size: var(--t-body-xs);
font-weight: var(--w-light);
line-height: 1.65;
color: var(--fg2);
}
/* Lead — larger intro paragraph */
.t-lead {
font-family: var(--font-body);
font-size: 18px;
font-weight: var(--w-light);
line-height: 1.7;
color: var(--fg2);
}
/* Sub on dark hero */
.t-sub-dark {
font-family: var(--font-body);
font-size: 18px;
font-weight: var(--w-light);
line-height: 1.7;
color: var(--fg-on-dark-2);
}
/* Meta — tiny attribution / timestamps in Montserrat */
.t-meta {
font-family: var(--font-display);
font-size: var(--t-tiny);
font-weight: var(--w-regular);
letter-spacing: var(--ls-nav);
color: var(--ink-muted);
text-transform: uppercase;
}
/* Mono — for ticker symbols, level codes (TCS, TPS, BBP, TGS) */
.t-mono {
font-family: var(--font-mono);
font-size: var(--t-body-sm);
color: var(--fg1);
}
/* ===== Element defaults — when used as a base.css ==================== */
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: var(--t-body);
line-height: 1.75;
color: var(--fg1);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
color: var(--fg-heading);
line-height: var(--lh-h);
}
h1 { font-size: var(--t-h1); font-weight: var(--w-bold); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-h2); font-weight: var(--w-semibold); letter-spacing: var(--ls-h); }
h3 { font-size: var(--t-h3); font-weight: var(--w-semibold); }
h4 { font-size: var(--t-h4); font-weight: var(--w-semibold); }
p {
font-family: var(--font-body);
font-weight: var(--w-light);
line-height: var(--lh-body);
color: var(--fg2);
}
a {
color: var(--gold-primary);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--t-quick) var(--ease);
}
a:hover { color: var(--gold-secondary); }
code, pre, .code {
font-family: var(--font-mono);
}
::selection { background: var(--gold-secondary); color: var(--blue-primary); }
/* =====================================================================
COMPONENT + PAGE STYLES
===================================================================== */
/* =====================================================================
2nd Skies Trading — Website UI kit styles
Imports tokens, then adds component classes. Closely mirrors the
source HTML in /uploads — modulated for re-use.
===================================================================== */
* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--white); color: var(--ink); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
/* ---------- Layout primitives -------------------------------------- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.container-narrow{ max-width: 820px; margin: 0 auto; padding: 0 28px; }
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
hr.divider { border: none; border-top: 1px solid var(--border); margin: 0; }
/* ---------- Nav ----------------------------------------------------- */
.site-nav {
background: var(--blue-primary);
position: sticky; top: 0; z-index: 100;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-inner {
max-width: 1100px; margin: 0 auto; padding: 0 28px;
display: flex; align-items: center; justify-content: space-between; height: 72px;
}
.nav-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img {
display: block; height: 36px; width: auto;
/* Optical centering — the cloud monogram's visual weight sits slightly
above its geometric center, so a 2px nudge brings it onto the same
baseline as the wordmark text */
transform: translateY(2px);
}
.nav-logo-word {
font-family: var(--font-display); font-weight: 700;
font-size: 17px; letter-spacing: 0.08em; color: #fff;
line-height: 1; white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
font-family: var(--font-display); font-size: 13px; font-weight: 500;
color: rgba(255,255,255,0.7); letter-spacing: 0.04em;
transition: color 0.15s;
}
.nav-links a:hover { color: #fff; }
.nav-cta {
background: var(--gold-primary); color: #fff !important;
padding: 8px 18px; border-radius: 4px; font-weight: 600;
transition: background 0.15s;
}
.nav-cta:hover { background: var(--gold-secondary); color: var(--blue-primary); }
.nav-login {
font-family: var(--font-display); font-size: 12px; color: rgba(255,255,255,0.4);
letter-spacing: 0.04em;
}
.nav-login:hover { color: rgba(255,255,255,0.75); }
/* Hamburger toggle — hidden on desktop, shown ≤860px */
.nav-toggle {
display: none;
background: transparent; border: none; cursor: pointer;
padding: 8px; margin-right: -8px;
width: 40px; height: 40px;
flex-direction: column; justify-content: center; align-items: center;
gap: 5px;
}
.nav-toggle span {
display: block; width: 22px; height: 2px; background: #fff;
border-radius: 1px; transition: transform 0.2s, opacity 0.15s;
transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile drawer — slides down under the nav */
.nav-drawer {
display: none;
position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
background: var(--blue-primary);
flex-direction: column; gap: 4px; padding: 24px;
z-index: 90;
overflow-y: auto;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.2s, visibility 0s linear 0.2s;
}
.nav-drawer.is-open {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity 0.2s, visibility 0s;
}
.nav-drawer a {
display: block; padding: 14px 8px;
font-family: var(--font-display); font-size: 16px; font-weight: 500;
color: rgba(255,255,255,0.78);
border-bottom: 1px solid rgba(255,255,255,0.07);
letter-spacing: 0.03em;
}
.nav-drawer a.nav-cta {
border-bottom: none; margin-top: 16px; text-align: center;
background: var(--gold-primary); color: #fff;
padding: 14px 18px; border-radius: 4px; font-weight: 600;
}
.nav-drawer-login {
margin-top: 24px !important;
color: rgba(255,255,255,0.5) !important;
font-size: 13px !important;
border-bottom: none !important;
}
/* ---------- Buttons ------------------------------------------------- */
.btn-gold {
display: inline-flex; align-items: center; justify-content: center;
background: var(--gold-primary); color: #fff;
font-family: var(--font-display); font-size: 15px; font-weight: 600;
line-height: 1; padding: 15px 32px;
border: 1px solid var(--gold-primary); border-radius: 4px; cursor: pointer;
letter-spacing: 0.02em; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-gold:hover { background: var(--gold-secondary); border-color: var(--gold-secondary); color: var(--blue-primary); }
.btn-outline-light {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: rgba(255,255,255,0.75);
border: 1px solid rgba(255,255,255,0.2);
font-family: var(--font-display); font-size: 14px; font-weight: 500;
line-height: 1; padding: 15px 28px; border-radius: 4px; cursor: pointer;
letter-spacing: 0.02em; transition: border-color 0.15s, color 0.15s;
}
.btn-outline-light:hover { background: #fff; border-color: #fff; color: var(--blue-primary); }
.btn-outline-navy {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--blue-primary);
border: 1px solid var(--blue-primary);
font-family: var(--font-display); font-size: 14px; font-weight: 600;
line-height: 1; padding: 15px 28px; border-radius: 4px; cursor: pointer;
letter-spacing: 0.02em; transition: background 0.15s, color 0.15s;
}
.btn-outline-navy:hover { background: var(--blue-primary); color: #fff; }
.btn-text {
font-family: var(--font-display); font-size: 14px; font-weight: 500;
color: var(--gold-primary); text-decoration: underline; text-underline-offset: 3px;
}
.btn-text:hover { color: var(--gold-secondary); }
/* ---------- Eyebrow / badges --------------------------------------- */
.eyebrow {
font-family: var(--font-display); font-size: 11px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-primary);
display: block; margin-bottom: 14px;
}
.eyebrow--light { color: rgba(217,176,79,0.7); font-weight: 500; }
.live-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(166,138,79,0.15); border: 1px solid rgba(166,138,79,0.3);
border-radius: 3px; padding: 5px 14px;
font-family: var(--font-display); font-size: 11px; font-weight: 500;
letter-spacing: 0.08em; color: var(--gold-secondary);
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
animation: pulse 2.5s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
/* ---------- Hero ---------------------------------------------------- */
.hero { background: var(--blue-primary); padding: 96px 0 80px; }
.hero-inner {
max-width: 1100px; margin: 0 auto; padding: 0 28px;
display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center;
}
@media (max-width: 860px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-right { display: none; }
}
.hero-title {
font-family: var(--font-display); font-size: clamp(36px, 5.5vw, 58px);
font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: #fff;
margin: 28px 0 0;
}
.hero-title em { font-style: normal; color: var(--gold-secondary); }
.hero-sub {
font-family: var(--font-body); font-size: 18px; font-weight: 300;
line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 540px;
margin: 22px 0 36px;
}
.hero-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-note {
font-family: var(--font-display); font-size: 11px; color: rgba(255,255,255,0.28);
margin-top: 16px; letter-spacing: 0.05em;
}
/* Hero right — stat panel */
.hero-right {
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
border-radius: 10px; padding: 28px 24px;
}
.hr-label {
font-family: var(--font-display); font-size: 10px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-secondary);
margin-bottom: 16px;
}
.hr-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.hr-stat { background: rgba(255,255,255,0.04); border-radius: 6px; padding: 14px 16px; }
.hr-stat-num {
font-family: var(--font-display); font-size: 26px; font-weight: 700;
color: var(--gold-secondary); display: block; line-height: 1; margin-bottom: 4px;
}
.hr-stat-label {
font-family: var(--font-display); font-size: 10px; color: rgba(255,255,255,0.38);
letter-spacing: 0.05em; text-transform: uppercase;
}
.hr-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 16px 0; }
.hr-perf-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hr-perf-label { font-family: var(--font-display); font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.04em; }
.hr-perf-val { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: #4ade80; }
.hr-perf-link {
font-family: var(--font-display); font-size: 11px; color: var(--gold-primary);
text-decoration: underline; text-underline-offset: 2px; display: block; margin-top: 12px;
}
/* ---------- Proof strip -------------------------------------------- */
.proof-strip { background: var(--blue-secondary); padding: 28px 0; }
.proof-strip-inner {
max-width: 1100px; margin: 0 auto; padding: 0 28px;
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.ps-item { display: flex; align-items: center; gap: 12px; }
.ps-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gold-secondary); }
.ps-label {
font-family: var(--font-display); font-size: 11px; font-weight: 400;
color: rgba(255,255,255,0.45); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.4;
}
.ps-sep { width: 1px; height: 32px; background: rgba(255,255,255,0.1); }
/* ---------- Problem block ------------------------------------------ */
.problem-section { background: var(--surface); padding: 72px 0; }
.problem-inner { max-width: 740px; margin: 0 auto; padding: 0 28px; text-align: center; }
.problem-reveal {
font-family: var(--font-display); font-size: 18px; font-weight: 600;
color: var(--blue-primary); margin-top: 28px; padding-top: 28px;
border-top: 1px solid var(--border); line-height: 1.45;
}
/* ---------- Differentiator cards ----------------------------------- */
.differentiators { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 700px) { .differentiators { grid-template-columns: 1fr; } }
.diff-card {
background: #fff; border: 1px solid var(--border);
border-top: 3px solid var(--gold-primary);
border-radius: 0 0 8px 8px; padding: 28px 24px;
}
.diff-icon {
font-family: var(--font-display); font-size: 11px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-primary);
margin-bottom: 14px; display: block;
}
.diff-title {
font-family: var(--font-display); font-size: 16px; font-weight: 600;
color: var(--blue-primary); margin-bottom: 10px; line-height: 1.3;
}
.diff-body { font-family: var(--font-body); font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--ink-muted); }
/* ---------- Offers section ---------------------------------------- */
.offers-section { background: var(--surface); padding: 80px 0; }
.offers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
@media (max-width: 700px) { .offers-grid { grid-template-columns: 1fr; } }
.offer-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.offer-card-header { background: var(--blue-primary); padding: 28px 28px 24px; }
.offer-card.premium .offer-card-header { background: linear-gradient(135deg, #0a1c40 0%, #1a3260 100%); }
.offer-card.premium { border-color: var(--gold-primary); }
.offer-card-tag {
font-family: var(--font-display); font-size: 10px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-secondary);
display: block; margin-bottom: 10px;
}
.offer-card-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 10px; }
.offer-card-sub { font-family: var(--font-body); font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.65; }
.offer-card-body { padding: 24px 28px 28px; }
.offer-features li {
font-family: var(--font-body); font-size: 13px; font-weight: 300; color: var(--ink-muted);
padding: 8px 0; border-bottom: 1px solid var(--border);
display: flex; align-items: flex-start; gap: 10px; line-height: 1.5;
}
.offer-features li:last-child { border: none; }
.li-check {
font-family: sans-serif; font-size: 11px; color: var(--green);
background: var(--green-bg); border: 1px solid var(--green-border);
border-radius: 50%; width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px;
}
.offer-price { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--blue-primary); margin: 18px 0 4px; }
.offer-price small { font-size: 16px; font-weight: 400; color: var(--ink-muted); }
.offer-price-note { font-family: var(--font-display); font-size: 11px; color: var(--ink-muted); margin-bottom: 16px; }
/* ---------- Bio ---------------------------------------------------- */
.bio-section { padding: 80px 0; }
.bio-inner {
max-width: 1100px; margin: 0 auto; padding: 0 28px;
display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start;
}
@media (max-width: 700px) { .bio-inner { grid-template-columns: 1fr; } }
.bio-img {
width: 240px; height: 280px; border-radius: 8px; overflow: hidden;
background: var(--surface); border: 1px solid var(--border);
flex-shrink: 0;
}
.bio-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.bio-stats-row { display: flex; gap: 32px; margin-bottom: 24px; flex-wrap: wrap; }
.bio-stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--blue-primary); display: block; line-height: 1; margin-bottom: 3px; }
.bio-stat-label { font-family: var(--font-display); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.02em; }
/* ---------- Testimonials ------------------------------------------ */
.testi-section { background: var(--surface); padding: 80px 0; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 24px; }
.testi-stars { font-size: 13px; color: var(--gold-secondary); letter-spacing: 1px; margin-bottom: 12px; display: block; }
.testi-text { font-family: var(--font-body); font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--ink-muted); font-style: italic; margin-bottom: 16px; }
.testi-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--blue-primary); }
.testi-cta { text-align: center; margin-top: 40px; }
/* ---------- Blog --------------------------------------------------- */
.blog-section { padding: 80px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
position: relative;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: border-color 0.15s;
cursor: pointer;
}
.blog-card:hover { border-color: var(--gold-primary); }
/* Stretched-link click affordance: the title's invisible ::after spans the
whole card, so clicking anywhere navigates to the post. Other interactive
children (image link, category links, "Read article" link) sit above the
overlay via z-index so they remain individually clickable to their own
destinations. Trade-off: excerpt body text can't be mouse-selected.
Two selectors needed because the title is rendered two different ways:
- Homepage teaser shortcode: Title
→ a.blog-card-title::after matches
- Archive / home / single templates (wp:post-title isLink:true):
→ .blog-card-title a::after matches the inner
*/
a.blog-card-title::after,
.blog-card-title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Explicit whitelist of children that must sit above the overlay so their
own clicks reach their own hrefs (image → post, category → archive,
read-more → post). Listed explicitly so the title's inner is NOT
given position:relative — otherwise its ::after would position relative
to the link itself rather than to the .blog-card. */
.blog-card-img,
.blog-card-cat,
.blog-card-cat a,
.blog-card-excerpt a,
.blog-card-link {
position: relative;
z-index: 2;
}
.blog-card-img {
position: relative;
width: 100%; height: 160px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 10px; color: rgba(10,28,64,0.4);
letter-spacing: 0.08em; text-transform: uppercase;
background:
radial-gradient(ellipse at 70% 30%, rgba(166,138,79,0.18), transparent 65%),
linear-gradient(180deg, #0a1c40 0%, #212d46 100%);
color: rgba(217,176,79,0.7);
overflow: hidden;
}
/* Featured image overlay — sits on top of the gradient when post has a thumbnail.
When no thumbnail, the gradient + (optional) inline text label show through.
Supports both rendering paths:
- wp:post-featured-image (used inside post-template loops in archive/home/single)
→ renders as with optional
- [sk_card_image] shortcode (used in the homepage teaser shortcode)
→ renders ![]()