/* ═══════════════════════════════════════════════════════════════
PivotPt Capital — main.css
Brand System v2.0 · Black / White / #4682B4 Steel Blue · Helvetica Neue
═══════════════════════════════════════════════════════════════ */
/* ─── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
/* Brand Colors */
--color-blue: #4682b4;
--color-blue-dim: rgba(70, 130, 180, 0.12);
--color-blue-mid: rgba(70, 130, 180, 0.30);
--color-blue-glow: rgba(70, 130, 180, 0.07);
--color-black: #000000;
--color-white: #ffffff;
/* Gray Scale — surfaces & borders (kept dark) */
--gray-900: #0a0a0a; /* page background */
--gray-800: #111111; /* card / elevated surface */
--gray-700: #1a1a1a; /* subtle raised surface */
--gray-600: #222222; /* borders */
--border-strong: #333333; /* strong border (formerly --gray-500's border role) */
/* Brand rule: NO grey text. Every on-dark text token resolves to white.
(Hierarchy is carried by size / weight / letter-spacing, not by greying.)
To bring back tonal text later, change these values in one place. */
--gray-500: #ffffff; /* was #333 — micro labels */
--gray-400: #ffffff; /* was #555 — muted text */
--gray-300: #ffffff; /* was #888 — secondary text */
--gray-200: #ffffff; /* was #bbb — body text */
--gray-100: #ffffff; /* was #e5e5e5 */
--gray-50: #f5f5f5; /* light surface (unused as text) */
/* Typography */
--font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'Roboto Mono', 'Courier New', monospace;
/* Spacing (8-point scale) */
--sp-xs: 4px;
--sp-sm: 8px;
--sp-md: 16px;
--sp-lg: 24px;
--sp-xl: 40px;
--sp-2xl: 64px;
--sp-3xl: 96px;
--sp-4xl: 128px;
/* Layout */
--max-width: 1280px;
--nav-height: 64px;
--col-gap: 24px;
--page-padding: clamp(24px, 4vw, 64px);
/* Radii */
--radius-sm: 2px;
--radius-md: 3px;
--radius-lg: 6px;
/* Transitions */
--trans-fast: 150ms ease;
--trans-base: 200ms ease;
--trans-slow: 400ms ease-out;
}
/* ─── 2. RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-primary);
background-color: var(--gray-900);
color: var(--color-white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-blue); text-decoration: none; transition: color var(--trans-fast); }
a:hover { color: #6cc8ff; }
/* Focus ring — WCAG AA */
:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Remove outline for mouse users */
:focus:not(:focus-visible) { outline: none; }
/* WordPress admin bar offset — header shifts down 32px */
.admin-bar .site-header { top: 32px; }
/* All hero sections need extra top padding when admin bar is visible
so content doesn't collide with the taller combined header+adminbar */
.admin-bar .hero,
.admin-bar .fund-hero,
.admin-bar .about-hero,
.admin-bar .brand-hero,
.admin-bar .invest-hero {
padding-top: calc(var(--nav-height) + 32px + var(--sp-3xl));
}
/* Mobile admin bar is 46px */
@media screen and (max-width: 782px) {
.admin-bar .site-header { top: 46px; }
.admin-bar .hero,
.admin-bar .fund-hero,
.admin-bar .about-hero,
.admin-bar .brand-hero,
.admin-bar .invest-hero {
padding-top: calc(var(--nav-height) + 46px + var(--sp-3xl));
}
}
/* ─── 3. LAYOUT UTILITIES ───────────────────────────────────── */
.site-container {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--page-padding);
}
.section-eyebrow {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-blue);
margin-bottom: var(--sp-lg);
display: block;
}
/* ─── 4. SCROLL ANIMATIONS ──────────────────────────────────── */
.animate-on-scroll {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--trans-slow), transform var(--trans-slow);
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── 5. BUTTONS ────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-sm);
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 13px 32px;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast), box-shadow var(--trans-fast);
white-space: nowrap;
text-decoration: none;
line-height: 1;
}
.btn--primary {
background: var(--color-blue);
color: var(--color-black);
}
.btn--primary:hover {
background: #60c7ff;
color: var(--color-black);
}
.btn--primary:active { background: #2da8f0; }
.btn--secondary {
background: transparent;
color: var(--color-white);
border: 1px solid rgba(255,255,255,0.18);
}
.btn--secondary:hover {
color: var(--color-white);
border-color: rgba(255,255,255,0.5);
}
.btn--ghost {
background: transparent;
color: var(--color-blue);
border: 1px solid rgba(70,130,180,0.3);
}
.btn--ghost:hover {
background: var(--color-blue-dim);
border-color: var(--color-blue);
color: var(--color-blue);
}
/* ─── 6. TAGS ───────────────────────────────────────────────── */
.tag {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-sm);
background: var(--color-blue-dim);
color: var(--color-blue);
border: 1px solid rgba(70,130,180,0.18);
}
/* ─── 7. SITE HEADER / NAV ──────────────────────────────────── */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9990; /* below WP admin bar (99999) but above all page content */
height: var(--nav-height);
display: flex;
align-items: center;
background: transparent;
border-bottom: 1px solid transparent;
transition: background var(--trans-base), border-color var(--trans-base), backdrop-filter var(--trans-base);
}
/* JS adds .scrolled after hero */
.site-header.scrolled {
background: rgba(0,0,0,0.92);
border-color: rgba(255,255,255,0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.site-header__inner {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--page-padding);
display: flex;
align-items: center;
gap: var(--sp-xl);
}
/* Logo */
.site-header__logo {
flex-shrink: 0;
display: flex;
align-items: center;
}
.site-header__logo img,
.site-header__logo-img {
height: 36px;
width: auto;
display: block;
}
/* Fallback text — only shown if image fails to load */
.site-header__logo-text {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-white);
white-space: nowrap;
}
/* Footer logo */
.site-footer__logo {
display: inline-block;
line-height: 0;
}
.site-footer__logo-img {
height: 32px;
width: auto;
display: block;
opacity: 0.85;
transition: opacity var(--trans-fast);
}
.site-footer__logo:hover .site-footer__logo-img {
opacity: 1;
}
/* Nav */
.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav__list {
display: flex;
align-items: center;
gap: var(--sp-2xl);
list-style: none;
}
.site-nav__item { position: relative; }
.site-nav__link {
font-family: var(--font-primary); /* Helvetica Neue (was DM Mono) */
font-size: 13px; /* was 9px — slightly larger */
letter-spacing: 0.04em; /* tightened: mono tracking reads too wide on Helvetica */
text-transform: uppercase;
color: var(--color-white); /* was muted gray */
text-decoration: none;
transition: color var(--trans-fast);
padding-block: var(--sp-sm);
}
.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__item.current-menu-item .site-nav__link {
color: var(--color-blue);
}
/* ── Desktop dropdown ─────────────────────────────────────────
JS-driven: mouseenter/leave toggles .is-open on the .
display:none → display:block is bulletproof — no cascade or
specificity issues with visibility/opacity.
position:relative on every top-level ensures the panel
anchors correctly regardless of class order.
──────────────────────────────────────────────────────────── */
/* Position anchor — applied directly to the element type,
not a class, so it always wins */
.site-nav__list > li {
position: relative;
}
/* Chevron on parent links */
.site-nav__list > li.menu-item-has-children > a {
display: inline-flex;
align-items: center;
gap: 6px;
}
.site-nav__list > li.menu-item-has-children > a::after {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform var(--trans-fast);
flex-shrink: 0;
}
.site-nav__list > li.menu-item-has-children.is-open > a::after {
transform: rotate(-135deg) translateY(-2px);
}
/* Sub-menu panel — hidden by default via display:none */
.site-nav__list > li > .sub-menu {
display: none;
list-style: none;
position: absolute;
top: 100%; /* flush — no gap, so mouse never exits in transit */
left: 0; /* left-align with the trigger */
min-width: 220px;
background: rgba(8,8,8,0.97);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
box-shadow: 0 16px 40px rgba(0,0,0,0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* top padding creates visual breathing room without a gap */
padding: 8px 0 6px;
z-index: 9999;
white-space: nowrap;
animation: dropdownIn 160ms ease forwards;
}
@keyframes dropdownIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Notch — removed (no longer centered, notch would look odd left-aligned) */
.site-nav__list > li > .sub-menu::before {
display: none;
}
/* Show when .is-open is toggled by JS */
.site-nav__list > li.is-open > .sub-menu {
display: block;
}
/* Sub-menu items */
.site-nav__list > li > .sub-menu > li {
list-style: none;
}
.site-nav__list > li > .sub-menu > li > a {
display: block;
padding: 9px 18px;
font-family: var(--font-primary); /* Helvetica Neue, matches top-level nav */
font-size: 12px; /* was 9px */
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--color-white); /* was muted gray */
text-decoration: none;
transition: color var(--trans-fast), background var(--trans-fast);
border-left: 2px solid transparent;
}
.site-nav__list > li > .sub-menu > li > a:hover,
.site-nav__list > li > .sub-menu > li.current-menu-item > a {
color: var(--color-blue);
background: var(--color-blue-glow);
border-left-color: var(--color-blue);
}
/* Nav CTA */
.site-header__cta {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-black);
background: var(--color-blue);
padding: 8px 18px;
border-radius: var(--radius-sm);
transition: background var(--trans-fast);
text-decoration: none;
}
.site-header__cta:hover { background: #60c7ff; color: var(--color-black); }
/* Hamburger */
.site-header__toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 17px;
background: none;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.site-header__toggle-bar {
display: block;
width: 100%;
height: 2px;
background: var(--color-white);
transition: transform var(--trans-base), opacity var(--trans-base);
}
/* ─── 8. MOBILE NAV DRAWER ──────────────────────────────────── */
.mobile-nav {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
bottom: 0;
background: var(--color-black);
z-index: 99;
transform: translateX(100%);
transition: transform var(--trans-slow);
overflow-y: auto;
}
.mobile-nav.is-open {
transform: translateX(0);
}
.mobile-nav__inner {
padding: var(--sp-xl) var(--page-padding);
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
.mobile-nav__list { list-style: none; }
.mobile-nav__list .menu-item {
border-bottom: 1px solid var(--gray-700);
}
.mobile-nav__list .menu-item a {
display: block;
padding: var(--sp-lg) 0;
font-family: var(--font-primary); /* Helvetica Neue, matches desktop bar */
font-size: 15px; /* was 11px */
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-white); /* was muted gray */
}
.mobile-nav__list .menu-item a:hover { color: var(--color-blue); }
/* ── Mobile accordion toggle button (injected by JS) ── */
.mobile-nav__list .menu-item-has-children {
position: relative;
}
.mobile-sub-toggle {
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 54px; /* matches link padding height */
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-400);
transition: color var(--trans-fast);
padding: 0;
}
.mobile-sub-toggle:hover { color: var(--color-blue); }
.mobile-sub-toggle__icon {
width: 10px;
height: 10px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform var(--trans-base);
display: block;
margin-top: -4px; /* optical centre */
}
.mobile-nav__list .menu-item-has-children.is-open > .mobile-sub-toggle .mobile-sub-toggle__icon {
transform: rotate(-135deg);
margin-top: 4px;
}
/* ── Mobile sub-menu — collapsed by default, expanded on .is-open ── */
.mobile-nav__list .sub-menu {
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease;
}
.mobile-nav__list .menu-item-has-children.is-open > .sub-menu {
max-height: 600px; /* large enough for any realistic sub-menu */
}
.mobile-nav__list .sub-menu .menu-item {
border-bottom: none;
border-top: 1px solid var(--gray-700);
}
.mobile-nav__list .sub-menu .menu-item a {
font-size: 10px;
letter-spacing: 0.18em;
color: var(--gray-300);
padding-left: var(--sp-lg); /* indent to show hierarchy */
padding-block: var(--sp-md);
border-left: 2px solid var(--gray-600);
}
.mobile-nav__list .sub-menu .menu-item a:hover {
color: var(--color-blue);
border-left-color: var(--color-blue);
}
.mobile-nav__cta {
margin-top: var(--sp-xl);
text-align: center;
}
/* ─── 9. HERO ───────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: var(--color-black);
overflow: hidden;
padding-top: var(--nav-height);
}
/* Compact hero for archive / landing pages (e.g. /funds/):
same dark look as the homepage hero, but not full-screen height. */
.hero--compact { min-height: 56vh; }
.hero--compact .hero__inner {
padding-top: var(--sp-2xl);
padding-bottom: var(--sp-2xl);
}
/* Radial glow */
.hero__glow {
position: absolute;
top: -20%;
right: -10%;
width: 700px;
height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(70,130,180,0.07) 0%, transparent 65%);
pointer-events: none;
}
/* Subtle grid lines background */
.hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(70,130,180,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(70,130,180,0.03) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}
.hero__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3xl);
padding-top: var(--sp-3xl);
padding-bottom: var(--sp-3xl);
width: 100%;
}
.hero__content { max-width: 600px; }
.hero__eyebrow {
display: flex;
align-items: center;
gap: var(--sp-sm);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-blue);
margin-bottom: var(--sp-xl);
}
.hero__eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-blue);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.7); }
}
.hero__headline {
font-size: clamp(48px, 7.5vw, 88px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 0.95;
color: var(--color-white);
margin-bottom: var(--sp-xl);
}
.hero__subheading {
font-size: 16px;
font-weight: 300;
color: var(--gray-300);
line-height: 1.7;
max-width: 460px;
margin-bottom: var(--sp-2xl);
}
.hero__actions {
display: flex;
align-items: center;
gap: var(--sp-md);
flex-wrap: wrap;
}
/* Floating metric cards */
.hero__metrics {
display: flex;
flex-direction: column;
gap: var(--sp-md);
flex-shrink: 0;
}
.hero__metric-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
padding: var(--sp-xl) var(--sp-2xl);
min-width: 160px;
backdrop-filter: blur(4px);
}
.hero__metric-card--offset { transform: translateX(24px); }
.hero__metric-value {
font-family: var(--font-mono);
font-size: 32px;
font-weight: 500;
color: var(--color-blue);
letter-spacing: -0.01em;
line-height: 1;
}
.hero__metric-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray-400);
margin-top: var(--sp-sm);
}
/* Scroll hint */
.hero__scroll-hint {
position: absolute;
bottom: var(--sp-xl);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-sm);
}
.hero__scroll-line {
display: block;
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, var(--color-blue));
animation: scrollLine 1.5s ease-in-out infinite;
}
@keyframes scrollLine {
0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
50% { opacity: 1; }
100% { opacity: 0; transform: scaleY(1); transform-origin: top; }
}
.hero__scroll-text {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gray-500);
}
/* ─── 10. STATS STRIP ───────────────────────────────────────── */
.stats-strip {
background: var(--color-black);
border-top: 1px solid var(--gray-600);
border-bottom: 1px solid var(--gray-600);
}
.stats-strip__inner {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--page-padding);
display: flex;
align-items: stretch;
overflow-x: auto;
scrollbar-width: none;
}
.stats-strip__inner::-webkit-scrollbar { display: none; }
.stats-strip__item {
flex: 1;
min-width: 140px;
padding: var(--sp-xl) var(--sp-lg);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-xs);
}
.stats-strip__divider {
width: 1px;
background: var(--gray-600);
margin-block: var(--sp-xl);
flex-shrink: 0;
}
.stats-strip__value {
font-family: var(--font-mono);
font-size: clamp(24px, 3vw, 36px);
font-weight: 500;
color: var(--color-blue);
letter-spacing: -0.01em;
line-height: 1;
}
.stats-strip__label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gray-400);
margin-top: var(--sp-xs);
}
/* ─── 11. INVESTMENT STRATEGY ───────────────────────────────── */
.strategy {
padding-block: var(--sp-3xl);
background: var(--gray-900);
}
.strategy__inner { }
.strategy__header {
max-width: 640px;
margin-bottom: var(--sp-3xl);
}
.strategy__headline {
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.0;
color: var(--color-white);
margin-bottom: var(--sp-xl);
}
.strategy__intro {
font-size: 15px;
color: var(--gray-300);
line-height: 1.7;
}
.strategy__gates {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: var(--gray-600);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
overflow: hidden;
}
.strategy__gate {
background: var(--gray-800);
padding: var(--sp-2xl) var(--sp-xl);
display: flex;
flex-direction: column;
gap: var(--sp-lg);
transition: background var(--trans-base);
}
.strategy__gate:hover { background: rgba(70,130,180,0.04); }
.strategy__gate-number {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--color-blue);
}
.strategy__gate-title {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--color-white);
line-height: 1.2;
}
.strategy__gate-desc {
font-size: 13px;
color: var(--gray-300);
line-height: 1.65;
flex: 1;
}
.strategy__gate-criteria {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-sm);
border-top: 1px solid var(--gray-600);
padding-top: var(--sp-lg);
margin-top: auto;
}
.strategy__gate-criterion {
font-family: var(--font-mono);
font-size: 10px;
color: var(--gray-300);
line-height: 1.5;
display: flex;
align-items: flex-start;
gap: var(--sp-sm);
}
.strategy__gate-criterion-icon {
color: var(--color-blue);
flex-shrink: 0;
font-size: 10px;
margin-top: 1px;
}
/* ─── 12. PORTFOLIO CARDS ───────────────────────────────────── */
.portfolio {
padding-block: var(--sp-3xl);
background: var(--color-black);
}
.portfolio__header {
max-width: 560px;
margin-bottom: var(--sp-3xl);
}
.portfolio__headline {
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
margin-bottom: var(--sp-lg);
}
.portfolio__intro {
font-size: 14px;
color: var(--gray-300);
line-height: 1.7;
}
.portfolio__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-md);
}
.property-card {
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--trans-base), transform var(--trans-slow);
}
.property-card:hover {
border-color: rgba(70,130,180,0.3);
transform: translateY(-2px);
}
/* 3px blue top accent line */
.property-card::before {
content: '';
display: block;
height: 3px;
background: var(--color-blue);
opacity: 0;
transition: opacity var(--trans-base);
}
.property-card:hover::before { opacity: 1; }
.property-card__image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--gray-700);
}
.property-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--trans-slow);
}
.property-card:hover .property-card__image img {
transform: scale(1.04);
}
.property-card__image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
}
.property-card__image-placeholder-text {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--gray-500);
text-align: center;
padding: var(--sp-md);
}
.property-card__status {
position: absolute;
top: var(--sp-md);
left: var(--sp-md);
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-sm);
}
.property-card__status--acquisition-target,
.property-card__status--active {
background: var(--color-blue-dim);
color: var(--color-blue);
border: 1px solid rgba(70,130,180,0.2);
}
.property-card__status--stabilized {
background: rgba(26,126,68,0.15);
color: #6fefab;
border: 1px solid rgba(111,239,171,0.2);
}
.property-card__content { padding: var(--sp-xl); }
.property-card__meta {
display: flex;
align-items: center;
gap: var(--sp-md);
margin-bottom: var(--sp-md);
}
.property-card__fund {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-blue);
}
.property-card__location {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray-400);
}
.property-card__title {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-white);
margin-bottom: var(--sp-md);
line-height: 1.2;
}
.property-card__title a {
color: inherit;
text-decoration: none;
}
.property-card__title a:hover { color: var(--color-blue); }
.property-card__excerpt {
font-size: 12px;
color: var(--gray-300);
line-height: 1.65;
margin-bottom: var(--sp-lg);
}
.property-card__data {
display: flex;
gap: var(--sp-xl);
border-top: 1px solid var(--gray-600);
padding-top: var(--sp-lg);
}
.property-card__data-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.property-card__data-value {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 500;
color: var(--color-blue);
line-height: 1;
}
.property-card__data-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray-500);
margin-top: 2px;
}
/* ─── 13. WHY PIVOTPT ───────────────────────────────────────── */
.why-pivotpt {
padding-block: var(--sp-3xl);
background: var(--gray-900);
}
.why-pivotpt__header {
max-width: 480px;
margin-bottom: var(--sp-2xl);
}
.why-pivotpt__headline {
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.0;
color: var(--color-white);
}
.why-pivotpt__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-md);
}
.why-pillar {
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
padding: var(--sp-xl);
transition: border-color var(--trans-base), background var(--trans-base);
}
.why-pillar:hover {
border-color: rgba(70,130,180,0.25);
background: rgba(70,130,180,0.03);
}
.why-pillar__icon {
width: 40px;
height: 40px;
background: var(--color-blue-dim);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-blue);
margin-bottom: var(--sp-lg);
}
.why-pillar__title {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-white);
margin-bottom: var(--sp-md);
line-height: 1.3;
}
.why-pillar__body {
font-size: 12px;
color: var(--gray-300);
line-height: 1.65;
}
/* ─── 14. TEAM ───────────────────────────────────────────────── */
.team {
padding-block: var(--sp-3xl);
background: var(--color-black);
}
.team__header {
max-width: 480px;
margin-bottom: var(--sp-2xl);
}
.team__headline {
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
}
.team__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-md);
}
.team-card {
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--trans-base);
}
.team-card:hover { border-color: rgba(70,130,180,0.25); }
.team-card__image {
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--gray-700);
}
.team-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(30%);
transition: filter var(--trans-slow), transform var(--trans-slow);
}
.team-card:hover .team-card__image img {
filter: grayscale(0%);
transform: scale(1.03);
}
.team-card__image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
}
.team-card__image-placeholder span {
font-size: 40px;
font-weight: 700;
color: var(--gray-500);
}
.team-card__content { padding: var(--sp-lg); }
.team-card__name {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-white);
margin-bottom: 4px;
}
.team-card__title {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-blue);
margin-bottom: var(--sp-md);
}
.team-card__bio {
font-size: 11px;
color: var(--gray-300);
line-height: 1.6;
margin-bottom: var(--sp-md);
}
.team-card__tags {
display: flex;
flex-wrap: wrap;
gap: var(--sp-xs);
margin-bottom: var(--sp-md);
}
.team-card__linkedin {
display: inline-flex;
align-items: center;
gap: var(--sp-xs);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray-400);
transition: color var(--trans-fast);
}
.team-card__linkedin:hover { color: var(--color-blue); }
.team__placeholder {
text-align: center;
padding: var(--sp-3xl);
background: var(--gray-800);
border: 1px dashed var(--gray-600);
border-radius: var(--radius-md);
}
.team__placeholder-text {
font-family: var(--font-mono);
font-size: 11px;
color: var(--gray-400);
letter-spacing: 0.05em;
}
/* ─── 15. INQUIRY / FORM ─────────────────────────────────────── */
.inquiry {
padding-block: var(--sp-3xl);
background: var(--gray-900);
border-top: 1px solid var(--gray-600);
}
.inquiry__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3xl);
align-items: start;
}
.inquiry__copy { }
.inquiry__headline {
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
margin-bottom: var(--sp-xl);
line-height: 1.1;
}
.inquiry__body {
font-size: 14px;
color: var(--gray-300);
line-height: 1.7;
margin-bottom: var(--sp-xl);
}
.inquiry__checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-md);
margin-bottom: var(--sp-xl);
}
.inquiry__checklist li {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--gray-200);
display: flex;
align-items: flex-start;
gap: var(--sp-md);
padding-left: 0;
}
.inquiry__checklist li::before {
content: '→';
color: var(--color-blue);
flex-shrink: 0;
}
.inquiry__minimum {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray-500);
}
/* Form */
.inquiry-form {
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
padding: var(--sp-2xl);
display: flex;
flex-direction: column;
gap: var(--sp-lg);
}
.inquiry-form__row--2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-md);
}
.inquiry-form__field {
display: flex;
flex-direction: column;
gap: var(--sp-xs);
}
.inquiry-form__label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gray-400);
}
.inquiry-form__label span[aria-label="required"] {
color: var(--color-blue);
margin-left: 2px;
}
.inquiry-form__input {
width: 100%;
background: var(--color-black);
border: 1px solid var(--gray-600);
color: var(--color-white);
font-family: var(--font-primary);
font-size: 13px;
padding: 10px 14px;
border-radius: var(--radius-sm);
outline: none;
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
appearance: none;
}
.inquiry-form__input::placeholder { color: rgba(255,255,255,0.5); }
.inquiry-form__input:focus {
border-color: var(--color-blue);
box-shadow: 0 0 0 3px rgba(70,130,180,0.08);
}
.inquiry-form__input:invalid:not(:placeholder-shown) {
border-color: #ff4444;
}
.inquiry-form__select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.inquiry-form__select option {
background: var(--gray-800);
color: var(--color-white);
}
.inquiry-form__textarea { resize: vertical; min-height: 80px; }
.inquiry-form__field--checkbox {
flex-direction: row;
align-items: flex-start;
gap: var(--sp-md);
}
.inquiry-form__checkbox {
width: 16px;
height: 16px;
border: 1px solid var(--border-strong);
border-radius: 2px;
background: var(--color-black);
cursor: pointer;
appearance: none;
flex-shrink: 0;
margin-top: 2px;
transition: border-color var(--trans-fast), background var(--trans-fast);
}
.inquiry-form__checkbox:checked {
background: var(--color-blue);
border-color: var(--color-blue);
background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.inquiry-form__checkbox-label {
font-size: 11px;
color: var(--gray-300);
line-height: 1.6;
letter-spacing: 0;
text-transform: none;
font-family: var(--font-primary);
cursor: pointer;
}
.inquiry-form__submit {
width: 100%;
position: relative;
overflow: hidden;
}
.inquiry-form__submit-loader {
display: none;
width: 14px;
height: 14px;
border: 2px solid rgba(0,0,0,0.3);
border-top-color: var(--color-black);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.inquiry-form__submit.is-loading .inquiry-form__submit-text { opacity: 0; }
.inquiry-form__submit.is-loading .inquiry-form__submit-loader { display: block; position: absolute; }
.inquiry-form__response {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
padding: var(--sp-md);
border-radius: var(--radius-sm);
display: none;
}
.inquiry-form__response.is-success {
display: block;
background: rgba(26,126,68,0.12);
color: #6fefab;
border: 1px solid rgba(111,239,171,0.2);
}
.inquiry-form__response.is-error {
display: block;
background: rgba(220,38,38,0.1);
color: #ff9a9a;
border: 1px solid rgba(255,100,100,0.2);
}
/* ─── 16. SITE FOOTER ───────────────────────────────────────── */
.site-footer {
background: var(--color-black);
border-top: 1px solid var(--gray-600);
padding-top: var(--sp-2xl);
}
.site-footer__inner {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--page-padding);
}
.site-footer__top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--sp-2xl);
padding-bottom: var(--sp-2xl);
}
.site-footer__logo-text {
display: block;
font-family: var(--font-primary);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-white);
margin-bottom: var(--sp-md);
text-decoration: none;
}
.site-footer__logo-text:hover { color: var(--gray-200); }
.site-footer__tagline {
font-size: 12px;
color: var(--gray-200);
line-height: 1.6;
margin-top: var(--sp-md);
}
/* Nav column wrapper */
.site-footer__nav-col { display: flex; flex-direction: column; gap: var(--sp-md); }
.site-footer__nav-heading {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-white);
font-weight: 600;
margin-bottom: var(--sp-sm);
}
.site-footer__nav-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
.site-footer__nav-list .menu-item a {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gray-200);
text-decoration: none;
transition: color var(--trans-fast);
}
.site-footer__nav-list .menu-item a:hover { color: var(--color-blue); }
.site-footer__contact-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-white);
font-weight: 600;
margin-bottom: var(--sp-sm);
}
.site-footer__contact-email {
font-size: 13px;
color: var(--color-blue);
text-decoration: none;
display: block;
}
.site-footer__contact-email:hover { color: #7aabcf; }
.site-footer__divider {
height: 1px;
background: linear-gradient(90deg, var(--color-blue) 0%, transparent 60%);
opacity: 0.4;
}
.site-footer__bottom {
padding-block: var(--sp-xl);
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
.site-footer__disclaimer {
font-size: 10px;
color: var(--gray-300);
line-height: 1.7;
max-width: 800px;
}
.site-footer__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-xl);
}
.site-footer__copy {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--gray-300);
}
.site-footer__legal-link {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray-300);
}
.site-footer__legal-link:hover { color: var(--color-white); }
/* ─── 17. INTERIOR PAGE ──────────────────────────────────────── */
.page-hero {
padding-top: calc(var(--nav-height) + var(--sp-3xl));
padding-bottom: var(--sp-3xl);
background: var(--color-black);
border-bottom: 1px solid var(--gray-600);
}
.page-hero__eyebrow { margin-bottom: var(--sp-md); }
.page-hero__title {
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.0;
color: var(--color-white);
}
.page-content {
padding-block: var(--sp-3xl);
background: var(--gray-900);
}
/* Prose styles for WordPress editor content */
.page-content .entry-content {
max-width: 720px;
}
.entry-content h2 {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-bottom: var(--sp-lg);
margin-top: var(--sp-2xl);
}
.entry-content h3 {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-white);
margin-bottom: var(--sp-md);
margin-top: var(--sp-xl);
}
.entry-content p {
font-size: 15px;
color: var(--gray-200);
line-height: 1.7;
margin-bottom: var(--sp-lg);
}
.entry-content ul, .entry-content ol {
margin-left: var(--sp-xl);
margin-bottom: var(--sp-lg);
}
.entry-content li {
font-size: 14px;
color: var(--gray-200);
line-height: 1.7;
margin-bottom: var(--sp-sm);
}
.entry-content a {
color: var(--color-blue);
border-bottom: 1px solid rgba(70,130,180,0.3);
transition: border-color var(--trans-fast);
}
.entry-content a:hover { border-color: var(--color-blue); }
.entry-content blockquote {
border-left: 3px solid var(--color-blue);
padding-left: var(--sp-xl);
margin: var(--sp-xl) 0;
font-size: 16px;
font-style: italic;
color: var(--gray-300);
line-height: 1.7;
}
/* ─── 18. PROPERTY SINGLE ───────────────────────────────────── */
.property-single {
padding-top: calc(var(--nav-height) + var(--sp-3xl));
}
/* ─── 19. 404 PAGE ─────────────────────────────────────────── */
.page-404 {
min-height: 100vh;
display: flex;
align-items: center;
background: var(--color-black);
padding-top: var(--nav-height);
}
.page-404__content {
text-align: center;
padding: var(--sp-3xl) var(--page-padding);
}
.page-404__code {
font-family: var(--font-mono);
font-size: clamp(80px, 15vw, 160px);
font-weight: 500;
color: var(--gray-700);
line-height: 1;
margin-bottom: var(--sp-lg);
}
.page-404__title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-bottom: var(--sp-md);
}
.page-404__body {
font-size: 14px;
color: var(--gray-400);
margin-bottom: var(--sp-xl);
}
/* ─── 20. RESPONSIVE ────────────────────────────────────────── */
@media ( max-width: 1100px ) {
.why-pivotpt__grid { grid-template-columns: repeat(2, 1fr); }
.team__grid { grid-template-columns: repeat(3, 1fr); }
}
@media ( max-width: 900px ) {
.strategy__gates { grid-template-columns: 1fr; }
.portfolio__grid { grid-template-columns: repeat(2, 1fr); }
.hero__metrics { display: none; }
.site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
.inquiry__layout { grid-template-columns: 1fr; gap: var(--sp-2xl); }
}
@media ( max-width: 768px ) {
.site-nav,
.site-header__cta { display: none; }
.site-header__toggle { display: flex; margin-left: auto; }
.portfolio__grid { grid-template-columns: 1fr; }
.why-pivotpt__grid { grid-template-columns: 1fr; }
.team__grid { grid-template-columns: repeat(2, 1fr); }
.stats-strip__item { min-width: 100px; padding: var(--sp-lg) var(--sp-md); }
.inquiry-form__row--2col { grid-template-columns: 1fr; }
.site-footer__top { grid-template-columns: 1fr 1fr; }
.site-footer__meta { flex-direction: column; align-items: flex-start; }
.hero__actions { flex-direction: column; align-items: flex-start; }
}
@media ( max-width: 480px ) {
.site-footer__top { grid-template-columns: 1fr; }
}
@media ( max-width: 480px ) {
.team__grid { grid-template-columns: 1fr; }
.inquiry-form { padding: var(--sp-xl) var(--sp-lg); }
}
/* ─── 21. PRINT ─────────────────────────────────────────────── */
@media print {
.site-header,
.site-footer,
.hero__scroll-hint { display: none; }
body { background: white; color: black; }
}
/* ═══════════════════════════════════════════════════════════════
DEAL PAGE TEMPLATE STYLES
═══════════════════════════════════════════════════════════════ */
/* ── Distribution banner ──────────────────────────────────── */
.deal-banner {
position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 99;
padding: 10px 0;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: .1em; text-align: center;
}
.deal-banner--blocker { background: rgba(220,38,38,0.95); color: #fff; }
.deal-banner--warn { background: rgba(180,120,0,0.95); color: #fff; }
.deal-banner--clear { background: rgba(26,126,68,0.95); color: #fff; }
/* Offset body when banner is shown */
.template-page-deal .deal-hero { padding-top: calc(var(--nav-height) + 44px + var(--sp-3xl)); }
/* ── Deal hero ────────────────────────────────────────────── */
.deal-hero {
position: relative;
padding-top: calc(var(--nav-height) + var(--sp-3xl));
padding-bottom: var(--sp-3xl);
background: var(--color-black);
min-height: 55vh; display: flex; align-items: flex-end;
overflow: hidden;
}
.deal-hero__image { position: absolute; inset: 0; overflow: hidden; }
.deal-hero__image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.3); }
.deal-hero__image-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
}
.deal-hero__content { position: relative; z-index: 1; width: 100%; }
.deal-hero__meta {
display: flex; align-items: center; gap: var(--sp-md);
flex-wrap: wrap; margin-bottom: var(--sp-lg);
}
.deal-hero__fund { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-blue); }
.deal-hero__location { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400); }
.deal-status {
font-family: var(--font-mono); font-size: 8px; letter-spacing: .15em; text-transform: uppercase;
padding: 4px 10px; border-radius: var(--radius-sm);
background: var(--color-blue-dim); color: var(--color-blue); border: 1px solid rgba(70,130,180,.2);
}
.deal-status--stabilized { background: rgba(26,126,68,.15); color: #6fefab; border-color: rgba(111,239,171,.2); }
.deal-status--dead, .deal-status--deprioritized { background: rgba(100,100,100,.15); color: var(--gray-400); border-color: var(--gray-600); }
.deal-rec {
font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
padding: 4px 10px; border-radius: var(--radius-sm);
}
.deal-rec--proceed { background: rgba(26,126,68,.2); color: #6fefab; border: 1px solid rgba(111,239,171,.2); }
.deal-rec--conditional{ background: rgba(180,100,0,.2); color: #ffc060; border: 1px solid rgba(255,192,96,.2); }
.deal-rec--pass { background: rgba(220,38,38,.15); color: #ff9a9a; border: 1px solid rgba(255,100,100,.2); }
.deal-hero__title { font-size: clamp(28px,5vw,52px); font-weight:700; letter-spacing:-.03em; color:var(--color-white); margin-bottom:var(--sp-md); }
.deal-hero__excerpt { font-size:14px; color:var(--gray-300); max-width:580px; line-height:1.7; margin-bottom:var(--sp-xl); }
.deal-hero__stats { display:flex; gap:var(--sp-2xl); flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08); padding-top:var(--sp-xl); }
.deal-hero__stat { display:flex; flex-direction:column; gap:4px; }
.deal-hero__stat-value { font-family:var(--font-mono); font-size:24px; font-weight:500; color:var(--color-blue); line-height:1; }
.deal-hero__stat-label { font-family:var(--font-mono); font-size:8px; letter-spacing:.15em; text-transform:uppercase; color:var(--gray-500); }
/* ── Deal body ────────────────────────────────────────────── */
.deal-body { padding-block: var(--sp-3xl); background: var(--gray-900); }
.deal-body__layout { display:grid; grid-template-columns:1fr 300px; gap:var(--sp-2xl); align-items:start; }
.deal-section { margin-bottom: var(--sp-2xl); padding-bottom: var(--sp-2xl); border-bottom: 1px solid var(--gray-700); }
.deal-section:last-child { border-bottom: none; }
.deal-section__title { font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--color-white); margin-bottom:var(--sp-lg); }
.deal-section__subtitle { font-size:15px; font-weight:600; color:var(--gray-200); margin-bottom:var(--sp-md); margin-top:var(--sp-xl); }
.deal-section__body { font-size:14px; color:var(--gray-200); line-height:1.75; }
.deal-section__note { font-size:12px; color:var(--gray-400); font-style:italic; margin-top:var(--sp-sm); }
.deal-inline-fact { display:flex; justify-content:space-between; align-items:center; padding:var(--sp-md); background:var(--gray-800); border:1px solid var(--gray-600); border-radius:var(--radius-sm); margin-top:var(--sp-lg); }
.deal-inline-fact__label { font-family:var(--font-mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--gray-400); }
.deal-inline-fact__value { font-size:13px; color:var(--color-white); font-weight:500; }
/* ── Three-gate scorecard ─────────────────────────────────── */
.deal-gate-avg { display:flex; align-items:baseline; gap:var(--sp-md); margin-bottom:var(--sp-xl); }
.deal-gate-avg__label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-400); }
.deal-gate-avg__value { font-family:var(--font-mono); font-size:32px; font-weight:500; color:var(--color-blue); line-height:1; }
.deal-gate-avg__value span { font-size:14px; color:var(--gray-500); }
.deal-gates { display:flex; flex-direction:column; gap:var(--sp-lg); }
.deal-gate { background:var(--gray-800); border:1px solid var(--gray-600); border-radius:var(--radius-md); padding:var(--sp-lg) var(--sp-xl); }
.deal-gate__header { display:flex; align-items:center; gap:var(--sp-md); margin-bottom:var(--sp-md); }
.deal-gate__num { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; color:var(--color-blue); }
.deal-gate__title { font-size:14px; font-weight:600; color:var(--color-white); flex:1; }
.deal-gate__score { font-family:var(--font-mono); font-size:18px; font-weight:500; color:var(--color-blue); margin-left:auto; }
.deal-gate__score span { font-size:10px; color:var(--gray-500); }
.deal-gate__bar { height:3px; background:var(--gray-700); border-radius:2px; margin-bottom:var(--sp-md); overflow:hidden; }
.deal-gate__bar-fill { height:100%; background:var(--color-blue); border-radius:2px; transition:width .6s ease-out; }
.deal-gate__notes { font-size:12px; color:var(--gray-300); line-height:1.6; }
.deal-loi-rec { padding:var(--sp-lg) var(--sp-xl); border-radius:var(--radius-md); margin-top:var(--sp-xl); border:1px solid; }
.deal-loi-rec--proceed { background:rgba(26,126,68,.08); border-color:rgba(111,239,171,.2); }
.deal-loi-rec--conditional{ background:rgba(180,100,0,.08); border-color:rgba(255,192,96,.2); }
.deal-loi-rec--pass { background:rgba(220,38,38,.08); border-color:rgba(255,100,100,.2); }
.deal-loi-rec__verdict { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; margin-bottom:var(--sp-sm); }
.deal-loi-rec--proceed .deal-loi-rec__verdict { color:#6fefab; }
.deal-loi-rec--conditional .deal-loi-rec__verdict{ color:#ffc060; }
.deal-loi-rec--pass .deal-loi-rec__verdict { color:#ff9a9a; }
.deal-loi-rec__notes { font-size:12px; color:var(--gray-300); line-height:1.6; }
/* ── Risk list ────────────────────────────────────────────── */
.deal-risk-list { list-style:none; display:flex; flex-direction:column; gap:var(--sp-sm); }
.deal-risk-list__item { font-size:13px; color:var(--gray-200); line-height:1.6; padding-left:20px; position:relative; }
.deal-risk-list__item::before { content:'→'; position:absolute; left:0; color:#ff8a8a; font-size:11px; }
/* ── Deal sidebar ─────────────────────────────────────────── */
.deal-facts { background:var(--gray-800); border:1px solid var(--gray-600); border-radius:var(--radius-md); padding:var(--sp-lg); margin-bottom:var(--sp-md); position:sticky; top:calc(var(--nav-height)+var(--sp-lg)); }
.deal-facts__title { font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-400); padding-bottom:var(--sp-md); margin-bottom:var(--sp-md); border-bottom:1px solid var(--gray-600); }
.deal-facts__list { display:flex; flex-direction:column; }
.deal-facts__row { display:flex; justify-content:space-between; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--gray-700); gap:var(--sp-md); }
.deal-facts__row:last-child { border-bottom:none; }
.deal-facts__label { font-family:var(--font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-400); flex-shrink:0; }
.deal-facts__value { font-size:12px; color:var(--gray-200); font-weight:500; text-align:right; }
.deal-facts__value--blue { color:var(--color-blue); }
.deal-facts--flags .deal-facts { background:rgba(255,50,50,.04); border-color:rgba(255,100,100,.15); }
.deal-flag-list { list-style:none; display:flex; flex-direction:column; gap:var(--sp-sm); }
.deal-flag { display:flex; align-items:flex-start; gap:var(--sp-sm); padding:var(--sp-sm) var(--sp-md); border-radius:var(--radius-sm); font-size:11px; line-height:1.5; }
.deal-flag__icon { flex-shrink:0; font-size:10px; }
.deal-flag__text { color:var(--gray-200); }
.deal-flag--blocker { background:rgba(220,38,38,.1); border:1px solid rgba(255,100,100,.2); }
.deal-flag--high { background:rgba(180,80,0,.1); border:1px solid rgba(255,140,60,.2); }
.deal-flag--medium { background:rgba(180,140,0,.1); border:1px solid rgba(255,200,60,.2); }
.deal-flag--low { background:rgba(26,100,60,.1); border:1px solid rgba(80,200,100,.2); }
.deal-sidebar-cta { width:100%; justify-content:center; margin-bottom:var(--sp-md); }
.deal-back-link { display:block; text-align:center; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-400); }
.deal-back-link:hover { color:var(--color-blue); }
@media (max-width:900px) { .deal-body__layout { grid-template-columns:1fr; } .deal-facts { position:static; } }
/* ═══════════════════════════════════════════════════════════════
FUND PAGE TEMPLATE STYLES
═══════════════════════════════════════════════════════════════ */
/* ── Fund hero ────────────────────────────────────────────── */
/* Breadcrumb bar — sits in document flow between header and hero */
.fund-breadcrumb-bar {
/* Offset for fixed header + admin bar if present */
margin-top: var(--nav-height);
background: var(--gray-900);
border-bottom: 1px solid var(--gray-700);
padding: 10px 0;
}
.admin-bar .fund-breadcrumb-bar {
margin-top: calc(var(--nav-height) + 32px);
}
@media screen and (max-width: 782px) {
.admin-bar .fund-breadcrumb-bar {
margin-top: calc(var(--nav-height) + 46px);
}
}
.fund-hero {
position:relative; background:var(--color-black);
padding-top: var(--sp-3xl); /* breadcrumb is now above, not inside */
padding-bottom:var(--sp-3xl); overflow:hidden;
}
.fund-hero__grid {
position:absolute; inset:0;
background-image: linear-gradient(rgba(70,130,180,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(70,130,180,.025) 1px, transparent 1px);
background-size:64px 64px; pointer-events:none;
mask-image:radial-gradient(ellipse at 60% 40%, black 0%, transparent 70%);
}
.fund-hero__glow {
position:absolute; top:-15%; right:-5%;
width:600px; height:600px; border-radius:50%;
background:radial-gradient(circle, rgba(70,130,180,.07) 0%, transparent 65%);
pointer-events:none;
}
.fund-hero__inner { position:relative; z-index:1; }
.fund-hero__meta { display:flex; align-items:center; gap:var(--sp-md); flex-wrap:wrap; margin-bottom:var(--sp-xl); }
.fund-hero__label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-400); }
.fund-status { font-family:var(--font-mono); font-size:8px; letter-spacing:.15em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-sm); }
.fund-status--open { background:rgba(26,126,68,.2); color:#6fefab; border:1px solid rgba(111,239,171,.25); }
.fund-status--deploying{ background:var(--color-blue-dim); color:var(--color-blue); border:1px solid rgba(70,130,180,.25); }
.fund-status--closed { background:rgba(100,100,100,.15); color:var(--gray-400); border:1px solid var(--gray-600); }
.fund-hero__inv-type { font-family:var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-400); background:rgba(255,255,255,.05); border:1px solid var(--gray-600); padding:4px 10px; border-radius:var(--radius-sm); }
.fund-hero__title { font-size:clamp(36px,6vw,72px); font-weight:700; letter-spacing:-.03em; line-height:.95; color:var(--color-white); margin-bottom:var(--sp-lg); }
.fund-hero__subtitle { font-size:15px; color:var(--gray-300); margin-bottom:var(--sp-2xl); }
.fund-hero__returns { display:flex; flex-wrap:wrap; gap:0; background:var(--gray-700); border-radius:var(--radius-md); overflow:hidden; margin-bottom:var(--sp-2xl); width:fit-content; }
.fund-hero__return-item { padding:var(--sp-lg) var(--sp-xl); background:var(--gray-800); border-right:1px solid var(--gray-700); display:flex; flex-direction:column; gap:4px; }
.fund-hero__return-item:last-child { border-right:none; }
.fund-hero__return-value { font-family:var(--font-mono); font-size:24px; font-weight:500; color:var(--color-blue); line-height:1; }
.fund-hero__return-label { font-family:var(--font-mono); font-size:8px; letter-spacing:.15em; text-transform:uppercase; color:var(--gray-500); }
.fund-hero__actions { display:flex; gap:var(--sp-md); flex-wrap:wrap; }
/* ── Fund body ────────────────────────────────────────────── */
.fund-body { padding-block:var(--sp-3xl); background:var(--gray-900); }
.fund-body__layout { display:grid; grid-template-columns:1fr 300px; gap:var(--sp-2xl); align-items:start; }
.fund-section { margin-bottom:var(--sp-2xl); padding-bottom:var(--sp-2xl); border-bottom:1px solid var(--gray-700); }
.fund-section:last-child { border-bottom:none; }
.fund-section__title { font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--color-white); margin-bottom:var(--sp-lg); }
.fund-section__body { font-size:14px; color:var(--gray-200); line-height:1.75; }
.fund-section__body--risks { color:var(--gray-300); }
.fund-structure-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-md); }
.fund-block { background:var(--gray-800); border:1px solid var(--gray-600); border-radius:var(--radius-md); padding:var(--sp-xl); }
.fund-block__title { font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-300); margin-bottom:var(--sp-lg); padding-bottom:var(--sp-md); border-bottom:1px solid var(--gray-600); }
.fund-block__list { display:flex; flex-direction:column; }
.fund-block__row { display:flex; justify-content:space-between; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--gray-700); gap:var(--sp-md); }
.fund-block__row:last-child { border-bottom:none; }
.fund-block__label { font-family:var(--font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-200); flex-shrink:0; }
.fund-block__value { font-size:12px; color:var(--color-white); font-weight:500; text-align:right; }
.fund-block__value--blue { color:var(--color-blue); font-size:14px; }
.fund-page-disclaimer { font-size:10px; color:var(--gray-500); line-height:1.7; padding:var(--sp-xl); background:rgba(255,255,255,.02); border:1px solid var(--gray-700); border-radius:var(--radius-md); }
/* ── Fund sidebar ─────────────────────────────────────────── */
.fund-facts { background:var(--gray-800); border:1px solid var(--gray-600); border-radius:var(--radius-md); padding:var(--sp-lg); margin-bottom:var(--sp-md); position:sticky; top:calc(var(--nav-height)+var(--sp-lg)); }
.fund-facts__title { font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-blue); padding-bottom:var(--sp-md); margin-bottom:var(--sp-md); border-bottom:1px solid var(--gray-600); }
.fund-facts__list { display:flex; flex-direction:column; }
.fund-facts__row { display:flex; justify-content:space-between; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--gray-700); gap:var(--sp-md); }
.fund-facts__row:last-child { border-bottom:none; }
.fund-facts__label { font-family:var(--font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-200); flex-shrink:0; }
.fund-facts__value { font-size:12px; color:var(--color-white); font-weight:500; text-align:right; }
.fund-facts__value--blue { color:var(--color-blue); }
.fund-docs { background:var(--gray-800); border:1px solid var(--gray-600); border-radius:var(--radius-md); padding:var(--sp-lg); margin-bottom:var(--sp-md); }
.fund-docs__title { font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-400); margin-bottom:var(--sp-md); }
.fund-docs__note { font-size:10px; color:var(--gray-500); font-style:italic; margin-bottom:var(--sp-md); line-height:1.5; }
.fund-docs__list { list-style:none; display:flex; flex-direction:column; gap:var(--sp-sm); }
.fund-docs__link { display:flex; align-items:center; gap:var(--sp-sm); font-size:12px; color:var(--color-blue); text-decoration:none; padding:var(--sp-sm) 0; border-bottom:1px solid var(--gray-700); transition:color var(--trans-fast); }
.fund-docs__link:hover { color:#60c7ff; }
.fund-docs__list li:last-child .fund-docs__link { border-bottom:none; }
.fund-sidebar-cta { width:100%; justify-content:center; margin-bottom:var(--sp-sm); }
.fund-sidebar-min { font-family:var(--font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-600); text-align:center; line-height:1.5; }
@media (max-width:900px) { .fund-body__layout { grid-template-columns:1fr; } .fund-facts { position:static; } .fund-structure-grid { grid-template-columns:1fr; } .fund-hero__returns { width:100%; } }
@media (max-width:600px) { .fund-hero__return-item { min-width:calc(50% - 1px); } }
/* ── Portfolio empty state ────────────────────────────────── */
.portfolio__empty {
border: 1px dashed var(--gray-600);
border-radius: var(--radius-md);
padding: var(--sp-3xl);
text-align: center;
}
.portfolio__empty-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: var(--sp-md);
}
.portfolio__empty-body {
font-size: 13px;
color: var(--gray-400);
line-height: 1.7;
}
.portfolio__empty-body strong { color: var(--gray-200); font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════
v2.0.0 — PAGE TEMPLATES: ABOUT, BRAND, INVEST
Append block. All tokens from :root — never hardcoded values.
Class prefixes: about-, brand-, invest-
═══════════════════════════════════════════════════════════════ */
/* ─── SHARED: PAGE HERO BASE ─────────────────────────────────
About, Brand, and Invest all share the same hero structure.
Each gets its own class for glow color variation.
─────────────────────────────────────────────────────────── */
.about-hero,
.brand-hero,
.invest-hero {
position: relative;
min-height: 70vh;
display: flex;
align-items: center;
padding-top: calc(var(--nav-height) + var(--sp-4xl));
padding-bottom: var(--sp-4xl);
overflow: hidden;
}
/* Background grid — same as .hero__grid on homepage */
.about-hero__grid,
.brand-hero__grid,
.invest-hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
}
/* Radial glow — blue tinted, subtle */
.about-hero__glow,
.brand-hero__glow,
.invest-hero__glow {
position: absolute;
top: -200px;
left: -200px;
width: 800px;
height: 800px;
border-radius: 50%;
background: radial-gradient(circle, var(--color-blue-glow) 0%, transparent 70%);
pointer-events: none;
}
.about-hero__inner,
.brand-hero__inner,
.invest-hero__inner {
position: relative;
z-index: 1;
max-width: 740px;
}
/* Breadcrumb */
.about-hero__breadcrumb,
.brand-hero__breadcrumb,
.invest-hero__breadcrumb {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray-400);
margin-bottom: var(--sp-xl);
display: flex;
gap: var(--sp-sm);
align-items: center;
}
.about-hero__breadcrumb a,
.brand-hero__breadcrumb a,
.invest-hero__breadcrumb a {
color: var(--gray-400);
transition: color var(--trans-fast);
}
.about-hero__breadcrumb a:hover,
.brand-hero__breadcrumb a:hover,
.invest-hero__breadcrumb a:hover { color: var(--color-white); }
/* Headline */
.about-hero__headline,
.brand-hero__headline,
.invest-hero__headline {
font-family: var(--font-primary);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.08;
color: var(--color-white);
margin-bottom: var(--sp-lg);
}
/* Sub-heading */
.about-hero__subheading,
.brand-hero__subheading,
.invest-hero__subheading {
font-size: 1.05rem;
line-height: 1.7;
color: var(--gray-300);
max-width: 600px;
margin-bottom: var(--sp-xl);
}
/* Actions */
.about-hero__actions,
.brand-hero__actions,
.invest-hero__actions {
display: flex;
gap: var(--sp-md);
flex-wrap: wrap;
align-items: center;
}
/* ─── ABOUT — CREDENTIALS STRIP ──────────────────────────── */
.about-creds-strip {
border-top: 1px solid var(--gray-600);
border-bottom: 1px solid var(--gray-600);
background: var(--gray-800);
padding: var(--sp-xl) 0;
}
.about-creds-strip__inner {
display: flex;
gap: var(--sp-2xl);
flex-wrap: wrap;
align-items: flex-start;
}
.about-cred {
display: flex;
flex-direction: column;
gap: 4px;
}
.about-cred__label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gray-400);
}
.about-cred__value {
font-family: var(--font-primary);
font-size: 0.9rem;
font-weight: 600;
color: var(--color-white);
}
/* ─── SHARED: NARRATIVE SECTION ──────────────────────────── */
.about-narrative {
padding: var(--sp-4xl) 0;
border-bottom: 1px solid var(--gray-600);
}
.about-narrative__inner {
display: grid;
grid-template-columns: 240px 1fr;
gap: var(--sp-3xl);
align-items: start;
}
.about-narrative__label {
position: sticky;
top: calc(var(--nav-height) + var(--sp-xl));
}
.about-narrative__body {
font-size: 1rem;
line-height: 1.85;
color: var(--gray-200);
}
.about-narrative__body p {
margin-bottom: var(--sp-lg);
}
.about-narrative__body p:last-child {
margin-bottom: 0;
}
.about-narrative__body strong {
color: var(--color-white);
font-weight: 600;
}
@media (max-width: 768px) {
.about-narrative__inner {
grid-template-columns: 1fr;
gap: var(--sp-xl);
}
.about-narrative__label { position: static; }
}
/* ─── SHARED: APPROACH / PILLAR GRID ─────────────────────── */
.about-approach,
.brand-thesis,
.invest-why {
padding: var(--sp-4xl) 0;
border-bottom: 1px solid var(--gray-600);
}
.about-approach__inner,
.brand-thesis__inner,
.invest-why__inner {
/* uses .site-container directly */
}
.about-approach__header,
.brand-thesis__header,
.invest-why__header {
margin-bottom: var(--sp-3xl);
}
.about-approach__headline,
.brand-thesis__headline,
.invest-why__headline {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-top: var(--sp-md);
}
.about-approach__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-lg);
}
.about-pillar {
padding: var(--sp-xl);
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-top: 2px solid var(--color-blue);
border-radius: var(--radius-md);
transition: border-color var(--trans-base);
}
.about-pillar:hover {
border-color: var(--color-blue);
border-top-color: var(--color-blue);
}
.about-pillar__num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--color-blue);
margin-bottom: var(--sp-md);
}
.about-pillar__title {
font-size: 1.05rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: var(--sp-md);
letter-spacing: -0.01em;
}
.about-pillar__body {
font-size: 0.875rem;
line-height: 1.7;
color: var(--gray-300);
margin: 0;
}
@media (max-width: 1024px) {
.about-approach__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.about-approach__grid { grid-template-columns: 1fr; }
}
/* ─── ABOUT — ADVISORY BOARD ─────────────────────────────── */
.about-advisory {
padding: var(--sp-4xl) 0;
border-bottom: 1px solid var(--gray-600);
}
.about-advisory__inner { /* uses .site-container */ }
.about-advisory__header {
margin-bottom: var(--sp-3xl);
}
.about-advisory__headline {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-top: var(--sp-md);
}
.about-advisory__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-lg);
}
.about-advisor {
padding: var(--sp-xl);
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
}
.about-advisor__initial {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-blue-dim);
border: 1px solid var(--color-blue-mid);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-primary);
font-size: 1.2rem;
font-weight: 700;
color: var(--color-blue);
margin-bottom: var(--sp-lg);
}
.about-advisor__name {
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 4px;
}
.about-advisor__title {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-blue);
margin-bottom: var(--sp-md);
}
.about-advisor__bio {
font-size: 0.825rem;
line-height: 1.65;
color: var(--gray-300);
margin: 0;
}
@media (max-width: 1024px) {
.about-advisory__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.about-advisory__grid { grid-template-columns: 1fr; }
}
/* ─── BRAND — TAGLINE ─────────────────────────────────────── */
.brand-hero__tagline {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-blue);
margin-bottom: var(--sp-lg);
display: flex;
align-items: center;
gap: var(--sp-md);
}
.brand-hero__tagline::before {
content: '';
display: block;
width: 32px;
height: 1px;
background: var(--color-blue);
flex-shrink: 0;
}
/* ─── BRAND — METRICS STRIP ──────────────────────────────── */
.brand-metrics-strip {
border-top: 1px solid var(--gray-600);
border-bottom: 1px solid var(--gray-600);
background: var(--gray-800);
padding: var(--sp-xl) 0;
}
.brand-metrics-strip__inner {
display: flex;
gap: var(--sp-2xl);
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
.brand-metric {
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
min-width: 100px;
}
.brand-metric__value {
font-family: var(--font-primary);
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-blue);
line-height: 1;
}
.brand-metric__label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gray-400);
}
/* ─── BRAND — COMPARE GRID ───────────────────────────────── */
.brand-compare {
padding: var(--sp-4xl) 0;
border-bottom: 1px solid var(--gray-600);
background: var(--gray-800);
}
.brand-compare__inner { /* uses .site-container */ }
.brand-compare__header {
margin-bottom: var(--sp-3xl);
max-width: 640px;
}
.brand-compare__headline {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-top: var(--sp-md);
margin-bottom: var(--sp-md);
}
.brand-compare__intro {
font-size: 0.9rem;
line-height: 1.7;
color: var(--gray-300);
margin: 0;
}
.brand-compare__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-lg);
}
.brand-compare-col {
padding: var(--sp-xl);
border-radius: var(--radius-md);
border: 1px solid var(--gray-600);
}
.brand-compare-col--beco {
background: var(--color-blue-glow);
border-color: var(--color-blue-mid);
}
.brand-compare-col--chain {
background: var(--gray-700);
}
.brand-compare-col__header {
margin-bottom: var(--sp-lg);
}
.brand-compare-col__badge {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-sm);
}
.brand-compare-col__badge--win {
background: var(--color-blue-dim);
color: var(--color-blue);
border: 1px solid var(--color-blue-mid);
}
.brand-compare-col__badge--lose {
background: rgba(255,255,255,0.04);
color: var(--gray-400);
border: 1px solid var(--gray-600);
}
.brand-compare-col__list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
.brand-compare-col__list li {
display: flex;
align-items: baseline;
gap: var(--sp-sm);
font-size: 0.875rem;
line-height: 1.5;
color: var(--gray-200);
}
.brand-compare-col--beco li svg { color: var(--color-blue); flex-shrink: 0; }
.brand-compare-col--chain li svg { color: var(--gray-500); flex-shrink: 0; }
@media (max-width: 768px) {
.brand-compare__grid { grid-template-columns: 1fr; }
}
/* ─── BRAND — PORTFOLIO PREVIEW ──────────────────────────── */
.brand-portfolio {
padding: var(--sp-4xl) 0;
border-bottom: 1px solid var(--gray-600);
}
.brand-portfolio__inner { /* uses .site-container */ }
.brand-portfolio__header {
margin-bottom: var(--sp-3xl);
}
.brand-portfolio__headline {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-top: var(--sp-md);
}
.brand-portfolio__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-lg);
margin-bottom: var(--sp-xl);
}
.brand-prop-card {
display: flex;
flex-direction: column;
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
overflow: hidden;
text-decoration: none;
transition: border-color var(--trans-base), transform var(--trans-slow);
}
.brand-prop-card:hover {
border-color: var(--color-blue);
transform: translateY(-3px);
}
.brand-prop-card__image {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--gray-700);
}
.brand-prop-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.brand-prop-card:hover .brand-prop-card__image img {
transform: scale(1.04);
}
.brand-prop-card__image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gray-700), var(--gray-600));
}
.brand-prop-card__body {
padding: var(--sp-lg);
display: flex;
flex-direction: column;
gap: var(--sp-sm);
}
.brand-prop-card__name {
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
letter-spacing: -0.01em;
}
.brand-prop-card__location,
.brand-prop-card__keys {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray-400);
}
.brand-portfolio__footer {
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.brand-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.brand-portfolio__grid { grid-template-columns: 1fr; }
}
/* ─── BRAND — CTA BLOCK ──────────────────────────────────── */
.brand-cta {
padding: var(--sp-4xl) 0;
text-align: center;
background: var(--gray-800);
border-top: 1px solid var(--gray-600);
}
.brand-cta__inner {
max-width: 560px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-lg);
}
.brand-cta__headline {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
}
.brand-cta__body {
font-size: 0.95rem;
line-height: 1.7;
color: var(--gray-300);
margin: 0;
}
/* ─── INVEST — BADGE ─────────────────────────────────────── */
.invest-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--sp-sm);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-blue);
margin-bottom: var(--sp-xl);
border: 1px solid var(--color-blue-mid);
padding: 6px 14px;
border-radius: 100px;
background: var(--color-blue-glow);
}
.invest-hero__badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-blue);
flex-shrink: 0;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* ─── INVEST — STATS STRIP ───────────────────────────────── */
.invest-stats-strip {
border-top: 1px solid var(--gray-600);
border-bottom: 1px solid var(--gray-600);
background: var(--gray-800);
padding: var(--sp-2xl) 0;
}
.invest-stats-strip__inner {
display: flex;
gap: var(--sp-2xl);
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
.invest-stat {
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
min-width: 120px;
}
.invest-stat__value {
font-family: var(--font-primary);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--color-blue);
line-height: 1;
}
.invest-stat__label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gray-400);
}
/* Divider between stats on wider screens */
.invest-stats-strip__inner .invest-stat + .invest-stat {
padding-left: var(--sp-2xl);
border-left: 1px solid var(--gray-600);
}
@media (max-width: 768px) {
.invest-stats-strip__inner {
justify-content: flex-start;
gap: var(--sp-xl);
}
.invest-stats-strip__inner .invest-stat + .invest-stat {
padding-left: 0;
border-left: none;
}
.invest-stat { text-align: left; min-width: auto; }
}
/* ─── INVEST — PROCESS STEPS ─────────────────────────────── */
.invest-process {
padding: var(--sp-4xl) 0;
border-bottom: 1px solid var(--gray-600);
background: var(--gray-800);
}
.invest-process__inner { /* uses .site-container */ }
.invest-process__header {
margin-bottom: var(--sp-3xl);
}
.invest-process__headline {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-top: var(--sp-md);
}
.invest-process__steps {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
overflow: hidden;
}
.invest-step {
display: grid;
grid-template-columns: 72px 1fr;
gap: var(--sp-xl);
padding: var(--sp-xl);
border-bottom: 1px solid var(--gray-600);
background: var(--gray-700);
transition: background var(--trans-base);
align-items: start;
}
.invest-step:last-child {
border-bottom: none;
}
.invest-step:hover {
background: var(--gray-800);
}
.invest-step__num {
font-family: var(--font-mono);
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 400;
color: var(--gray-600);
line-height: 1;
padding-top: 2px;
user-select: none;
}
.invest-step__content {
padding-top: 2px;
}
.invest-step__label {
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: var(--sp-sm);
letter-spacing: -0.01em;
}
.invest-step__body {
font-size: 0.875rem;
line-height: 1.65;
color: var(--gray-300);
margin: 0;
}
@media (max-width: 640px) {
.invest-step {
grid-template-columns: 48px 1fr;
gap: var(--sp-md);
}
.invest-step__num { font-size: 1.5rem; }
}
/* ─── INVEST — DOC BLOCK ─────────────────────────────────── */
.invest-doc-block {
padding: var(--sp-4xl) 0;
border-bottom: 1px solid var(--gray-600);
}
.invest-doc-block__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-3xl);
align-items: center;
}
.invest-doc-block__headline {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-top: var(--sp-md);
margin-bottom: var(--sp-md);
}
.invest-doc-block__body {
font-size: 0.9rem;
line-height: 1.7;
color: var(--gray-300);
max-width: 480px;
margin: 0;
}
.invest-doc-block__actions {
display: flex;
flex-direction: column;
gap: var(--sp-sm);
align-items: stretch;
flex-shrink: 0;
min-width: 220px;
}
@media (max-width: 768px) {
.invest-doc-block__inner {
grid-template-columns: 1fr;
gap: var(--sp-xl);
}
}
/* ─── INVEST — DISCLAIMER BAR ────────────────────────────── */
.invest-disclaimer-bar {
background: var(--gray-900);
border-top: 1px solid var(--gray-700);
padding: var(--sp-xl) 0;
}
.invest-disclaimer-bar__text {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.04em;
line-height: 1.8;
color: var(--gray-500);
max-width: 860px;
margin: 0;
}
/* ═══════════════════════════════════════════════════════════════
v2.1.0 — HOMEPAGE REDESIGN + FUND DETAIL PAGE
Company-focused hero, company strip, brand-break section,
fund detail hero image, fund props grid.
═══════════════════════════════════════════════════════════════ */
/* ─── HERO — IMAGE PANEL (replaces metric cards) ─────────────
The right column now holds a photo instead of stat boxes.
.hero__content max-width tightens to give the image room.
─────────────────────────────────────────────────────────── */
/* Override: when image is present the hero becomes 2-col */
.hero--has-image .hero__inner {
align-items: stretch;
}
.hero--has-image .hero__content {
max-width: 520px;
align-self: center;
}
.hero__image-panel {
flex: 1;
min-width: 0;
max-width: 500px;
display: flex;
align-items: center;
flex-shrink: 0;
}
.hero__image-frame {
position: relative;
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
/* Framed with a subtle blue glow border */
box-shadow:
0 0 0 1px rgba(70,130,180,0.12),
0 32px 64px rgba(0,0,0,0.6);
}
.hero__image-frame img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.hero__image-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
padding: var(--sp-xl) var(--sp-lg) var(--sp-lg);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-white);
}
/* Placeholder shown when no image is uploaded */
.hero__image-frame--placeholder {
height: 480px;
background: var(--gray-800);
border: 1px dashed var(--gray-600);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero__image-placeholder-text {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--gray-500);
line-height: 1.8;
}
.hero__image-placeholder-text strong {
color: var(--gray-400);
}
/* Hide image panel on mobile — content takes full width */
@media (max-width: 900px) {
.hero__image-panel { display: none; }
.hero--has-image .hero__content { max-width: 100%; }
}
/* ─── HERO — FULL-BLEED VARIANT (.hero--bleed) ───────────────
Edge-to-edge background photo with the company statement laid
directly on top (Beco-style). Applied automatically whenever a
hero image is set. A layered scrim keeps text legible over any
photo, regardless of how light or busy it is.
─────────────────────────────────────────────────────────── */
/* Background photo fills the whole hero */
.hero--bleed .hero__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero--bleed .hero__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Legibility scrim — three stacked gradients:
1) left→right: darkens the left where the text sits
2) bottom→top: anchors the lower edge into black
3) top fade: keeps the transparent nav readable over bright photos
Tune the rgba alphas if a specific photo needs more/less contrast. */
.hero--bleed .hero__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 42%, rgba(0,0,0,0.15) 100%),
linear-gradient(0deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.00) 45%),
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.00) 22%);
}
/* Content sits above the photo + scrim, left-aligned and single column */
.hero--bleed .hero__inner {
position: relative;
z-index: 2;
justify-content: flex-start;
align-items: center;
}
.hero--bleed .hero__content {
max-width: 760px;
align-self: center;
}
/* Text-shadow safety net so type stays crisp even over a light photo */
.hero--bleed .hero__headline {
text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.hero--bleed .hero__subheading {
color: var(--color-white);
text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
/* Scroll hint text is near-black by default — lift it over the photo */
.hero--bleed .hero__scroll-text { color: var(--color-white); }
/* Optional photo caption, bottom-right of the bleed */
.hero--bleed .hero__bleed-caption {
position: absolute;
right: var(--page-padding);
bottom: var(--sp-xl);
z-index: 2;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-white);
}
/* On narrow screens, shift the scrim weight to the bottom so the
left→right darkening doesn't wash out the photo behind the text */
@media (max-width: 900px) {
.hero--bleed .hero__scrim {
background:
linear-gradient(0deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.20) 60%),
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.00) 22%);
}
.hero--bleed .hero__content { max-width: 100%; }
}
/* ─── COMPANY STRIP (replaces fund stats strip) ───────────── */
.company-strip {
background: var(--color-black);
border-top: 1px solid var(--gray-600);
border-bottom: 1px solid var(--gray-600);
padding-block: var(--sp-3xl);
}
.company-strip__inner {
display: flex;
flex-direction: column;
gap: var(--sp-2xl);
}
.company-strip__intro {
font-size: 1rem;
line-height: 1.8;
color: var(--gray-200);
max-width: 720px;
font-weight: 300;
}
.company-strip__facts {
display: flex;
align-items: stretch;
gap: 0;
}
.company-strip__fact {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sp-xs);
padding: var(--sp-xl) var(--sp-lg);
min-width: 140px;
text-align: center;
align-items: center;
}
.company-strip__divider {
width: 1px;
background: var(--gray-600);
margin-block: var(--sp-md);
flex-shrink: 0;
}
.company-strip__fact-value {
font-family: var(--font-mono);
font-size: clamp(22px, 3vw, 32px);
font-weight: 500;
color: var(--color-blue);
letter-spacing: -0.01em;
line-height: 1;
}
.company-strip__fact-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gray-400);
}
@media (max-width: 640px) {
.company-strip__facts { flex-direction: column; }
.company-strip__divider { width: 100%; height: 1px; margin: 0; }
.company-strip__fact { text-align: left; align-items: flex-start; }
}
/* ─── BRAND BREAK SECTION ────────────────────────────────────
Two-column: images left, text right.
─────────────────────────────────────────────────────────── */
.brand-break {
padding-block: var(--sp-3xl);
background: var(--gray-900);
border-top: 1px solid var(--gray-600);
}
.brand-break__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3xl);
align-items: center;
}
/* Images column */
.brand-break__images {
position: relative;
}
.brand-break__image-primary {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.brand-break__image-primary img {
width: 100%;
height: 460px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.brand-break__images:hover .brand-break__image-primary img {
transform: scale(1.02);
}
.brand-break__image-placeholder {
width: 100%;
height: 460px;
background: var(--gray-800);
border: 1px dashed var(--gray-600);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--gray-500);
line-height: 1.8;
}
/* Smaller overlapping secondary image */
.brand-break__image-secondary {
position: absolute;
bottom: -32px;
right: -32px;
width: 48%;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow:
0 0 0 3px var(--gray-900),
0 12px 32px rgba(0,0,0,0.6);
z-index: 2;
}
.brand-break__image-secondary img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
/* Text column */
.brand-break__text {
display: flex;
flex-direction: column;
gap: var(--sp-lg);
}
.brand-break__headline {
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--color-white);
}
.brand-break__body {
font-size: 0.9375rem;
line-height: 1.75;
color: var(--gray-300);
margin: 0;
}
@media (max-width: 900px) {
.brand-break__inner {
grid-template-columns: 1fr;
gap: var(--sp-2xl);
}
.brand-break__image-secondary {
bottom: -24px;
right: -12px;
}
}
/* ─── FUND DETAIL PAGE ────────────────────────────────────────
New "Fund Detail" template (page-fund-detail.php).
Hero adds a right-column image. Props grid shows fund's
properties filtered by _deal_fund meta.
─────────────────────────────────────────────────────────── */
/* Breadcrumb */
.fund-breadcrumb {
display: flex;
align-items: center;
gap: var(--sp-sm);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray-400);
margin-bottom: var(--sp-xl);
}
.fund-breadcrumb a { color: var(--gray-400); }
.fund-breadcrumb a:hover { color: var(--color-blue); }
/* Fund hero — two column when image present */
.fund-hero__layout {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-3xl);
align-items: center;
}
.fund-hero__image {
width: 380px;
flex-shrink: 0;
position: relative;
}
.fund-hero__image > img {
width: 100%;
height: 340px;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow:
0 0 0 1px rgba(70,130,180,0.10),
0 24px 48px rgba(0,0,0,0.6);
display: block;
}
.fund-hero__image-secondary {
position: absolute;
bottom: -24px;
left: -24px;
width: 55%;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow:
0 0 0 3px var(--color-black),
0 8px 24px rgba(0,0,0,0.7);
}
.fund-hero__image-secondary img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
}
@media (max-width: 900px) {
.fund-hero__layout { grid-template-columns: 1fr; }
.fund-hero__image { display: none; }
}
/* Fund portfolio properties grid (inside fund body) */
.fund-props-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-md);
margin-top: var(--sp-lg);
}
.fund-prop-card {
display: flex;
flex-direction: column;
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color var(--trans-base), transform var(--trans-slow);
}
.fund-prop-card:hover {
border-color: rgba(70,130,180,0.3);
transform: translateY(-2px);
}
.fund-prop-card__image {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--gray-700);
}
.fund-prop-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--trans-slow);
}
.fund-prop-card:hover .fund-prop-card__image img {
transform: scale(1.04);
}
.fund-prop-card__image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
}
.fund-prop-card__status {
position: absolute;
top: var(--sp-sm);
left: var(--sp-sm);
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: var(--color-blue-dim);
color: var(--color-blue);
border: 1px solid rgba(70,130,180,0.2);
}
.fund-prop-card__body {
padding: var(--sp-lg);
display: flex;
flex-direction: column;
gap: 4px;
}
.fund-prop-card__name {
font-size: 15px;
font-weight: 600;
color: var(--color-white);
letter-spacing: -0.01em;
}
.fund-prop-card__loc,
.fund-prop-card__keys {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray-400);
}
@media (max-width: 768px) {
.fund-props-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
v2.1.0 — FUND CPT CARDS + FUNDS SECTION
Fund card component. Section rendered by template-parts/funds.php.
═══════════════════════════════════════════════════════════════ */
/* ─── FUNDS SECTION WRAPPER ─────────────────────────────────── */
.funds-section {
padding-block: var(--sp-3xl);
background: var(--gray-800);
border-top: 1px solid var(--gray-600);
border-bottom: 1px solid var(--gray-600);
}
.funds-section__inner { /* uses .site-container */ }
.funds-section__header {
max-width: 640px;
margin-bottom: var(--sp-3xl);
}
.funds-section__headline {
font-size: clamp(32px, 4.5vw, 52px);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
margin-bottom: var(--sp-lg);
}
.funds-section__intro {
font-size: 14px;
line-height: 1.75;
color: var(--gray-300);
}
/* ─── FUND CARDS GRID ───────────────────────────────────────── */
.funds-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-lg);
}
/* Collapse gracefully:
2 open funds → still 3-col but the third slot is visually empty
Use auto-fill so you never get odd partial rows */
@media (max-width: 1100px) {
.funds-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.funds-grid { grid-template-columns: 1fr; }
}
/* ─── FUND CARD ──────────────────────────────────────────────── */
.fund-card {
display: flex;
flex-direction: column;
background: var(--gray-900);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--trans-base), transform var(--trans-slow);
}
/* Top blue accent line on hover */
.fund-card::before {
content: '';
display: block;
height: 3px;
background: linear-gradient(to right, var(--color-blue), rgba(70,130,180,0.3));
opacity: 0;
transition: opacity var(--trans-base);
flex-shrink: 0;
}
.fund-card:hover {
border-color: rgba(70,130,180,0.25);
transform: translateY(-3px);
}
.fund-card:hover::before { opacity: 1; }
/* Image */
.fund-card__image {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--gray-700);
flex-shrink: 0;
}
.fund-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--trans-slow);
}
.fund-card:hover .fund-card__image img {
transform: scale(1.04);
}
.fund-card__image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-500);
}
/* Status badge over image */
.fund-card__status {
position: absolute;
top: var(--sp-md);
left: var(--sp-md);
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-sm);
/* Solid dark base so the badge reads against any photo */
background: rgba(0,0,0,0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.fund-card__status--open {
/* Keep the blue tint on top of the solid dark base */
background: rgba(0,16,32,0.82);
color: var(--color-blue);
border-color: rgba(70,130,180,0.45);
}
.fund-card__status--deploying {
background: rgba(10,10,28,0.82);
color: #a5b4fc;
border-color: rgba(99,102,241,0.45);
}
.fund-card__status--closed,
.fund-card__status--wind-down {
background: rgba(0,0,0,0.72);
color: var(--gray-200);
border-color: rgba(255,255,255,0.18);
}
/* Card body */
.fund-card__body {
display: flex;
flex-direction: column;
gap: var(--sp-md);
padding: var(--sp-xl);
flex: 1;
}
.fund-card__meta {
display: flex;
gap: var(--sp-md);
align-items: center;
flex-wrap: wrap;
}
.fund-card__vintage,
.fund-card__geo {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray-400);
}
.fund-card__vintage { color: var(--color-blue); }
.fund-card__title {
font-size: clamp(20px, 2.5vw, 26px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
line-height: 1.15;
}
.fund-card__title a {
color: inherit;
text-decoration: none;
}
.fund-card__title a:hover { color: var(--color-blue); }
.fund-card__strategy {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray-400);
}
.fund-card__excerpt {
font-size: 13px;
line-height: 1.65;
color: var(--gray-300);
margin: 0;
flex: 1;
}
/* Fund stats strip inside card */
.fund-card__stats {
display: flex;
gap: var(--sp-lg);
padding-top: var(--sp-lg);
border-top: 1px solid var(--gray-600);
}
.fund-card__stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.fund-card__stat-value {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 500;
color: var(--color-blue);
letter-spacing: -0.01em;
line-height: 1;
}
.fund-card__stat-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray-500);
margin-top: 2px;
}
/* Card footer */
.fund-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--sp-md);
border-top: 1px solid var(--gray-700);
margin-top: auto;
}
.fund-card__inv-type {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray-500);
}
.fund-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-blue);
text-decoration: none;
transition: gap var(--trans-fast), color var(--trans-fast);
}
.fund-card__cta:hover {
gap: 10px;
color: #6cc8ff;
}
/* ─── FUND HERO COVER IMAGE (single-fund.php) ────────────────── */
.fund-hero__cover {
/* Fixed size — every fund hero image renders identically */
width: 720px;
max-width: 100%;
height: 400px;
margin-top: var(--sp-xl);
margin-bottom: var(--sp-3xl);
margin-inline: auto; /* center within the hero column */
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow:
0 0 0 1px rgba(70,130,180,0.10),
0 24px 48px rgba(0,0,0,0.5);
}
.fund-hero__cover img {
width: 100%;
height: 100%; /* fills the fixed container */
object-fit: cover;
object-position: center;
display: block;
}
/* ═══════════════════════════════════════════════════════════════
FUND PHOTO GRID (single-fund.php)
Static 2×2 grid of up to 4 photos. No JS required.
Layout adapts to photo count: 1 full-width, 2 side-by-side,
3 (one large + two stacked), 4 = 2×2.
═══════════════════════════════════════════════════════════════ */
.fund-photo-grid {
background: var(--color-black);
border-top: 1px solid var(--gray-700);
border-bottom: 1px solid var(--gray-700);
overflow: hidden;
padding: var(--sp-2xl) 0;
}
.fund-photo-grid__inner {
display: grid;
width: 100%;
max-width: 960px; /* constrain — never bleeds full viewport */
margin-inline: auto; /* center on page */
padding-inline: var(--page-padding);
gap: 6px;
/* Default: single photo */
grid-template-columns: 1fr;
}
/* ── 2 photos: side by side ── */
.fund-photo-grid__count-2 {
grid-template-columns: 1fr 1fr;
}
/* ── 3 photos: large left, two stacked right ── */
.fund-photo-grid__count-3 {
grid-template-columns: 3fr 2fr;
grid-template-rows: 180px 180px;
}
.fund-photo-grid__count-3 .fund-photo-grid__item--1 {
grid-row: 1 / 3;
}
/* ── 4 photos: 2×2 grid ── */
.fund-photo-grid__count-4 {
grid-template-columns: 1fr 1fr;
grid-template-rows: 240px 240px;
}
/* ── Individual photo cell ── */
.fund-photo-grid__item {
overflow: hidden;
background: var(--gray-800);
height: 320px;
border-radius: 4px;
}
.fund-photo-grid__count-1 .fund-photo-grid__item {
height: 400px;
}
.fund-photo-grid__count-2 .fund-photo-grid__item {
height: 280px;
}
.fund-photo-grid__count-3 .fund-photo-grid__item {
height: 100%; /* driven by grid-template-rows */
}
.fund-photo-grid__count-4 .fund-photo-grid__item {
height: 100%; /* driven by grid-template-rows */
}
/* ── Photo image ── */
.fund-photo-grid__item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s ease;
}
.fund-photo-grid__item:hover img {
transform: scale(1.03);
}
@media (max-width: 640px) {
.fund-photo-grid__count-2,
.fund-photo-grid__count-3,
.fund-photo-grid__count-4 {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.fund-photo-grid__count-3 .fund-photo-grid__item--1 {
grid-row: auto;
}
.fund-photo-grid__item,
.fund-photo-grid__count-1 .fund-photo-grid__item,
.fund-photo-grid__count-2 .fund-photo-grid__item {
height: 220px;
}
}
/* ── MEET THE TEAM CTA (homepage) ────────────────────────── */
.meet-team-cta {
padding-block: var(--sp-3xl);
background: var(--gray-800);
border-top: 1px solid var(--gray-600);
border-bottom: 1px solid var(--gray-600);
}
.meet-team-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2xl);
}
.meet-team-cta__headline {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin: var(--sp-sm) 0 var(--sp-md);
}
.meet-team-cta__body {
font-size: 0.95rem;
line-height: 1.7;
color: var(--gray-300);
max-width: 540px;
margin: 0;
}
.meet-team-cta__action {
flex-shrink: 0;
}
@media (max-width: 768px) {
.meet-team-cta__inner {
flex-direction: column;
align-items: flex-start;
gap: var(--sp-xl);
}
}
/* ═══════════════════════════════════════════════════════════════
ARTICLES — News, Insights & Press Coverage
archive-article.php + single-article.php
═══════════════════════════════════════════════════════════════ */
/* ─── Archive hero ───────────────────────────────────────── */
.archive-hero {
padding-top: calc(var(--nav-height) + var(--sp-3xl));
padding-bottom: var(--sp-2xl);
background: var(--color-black);
border-bottom: 1px solid var(--gray-700);
}
.admin-bar .archive-hero { padding-top: calc(var(--nav-height) + 32px + var(--sp-3xl)); }
.archive-hero__title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
margin: var(--sp-sm) 0 var(--sp-md);
}
.archive-hero__intro {
font-size: 1rem;
line-height: 1.7;
color: var(--gray-300);
max-width: 600px;
margin: 0;
}
/* ─── Category filter pills ──────────────────────────────── */
.article-filter-bar {
background: var(--gray-900);
border-bottom: 1px solid var(--gray-700);
padding: var(--sp-md) 0;
position: sticky;
top: var(--nav-height);
z-index: 50;
}
.admin-bar .article-filter-bar { top: calc(var(--nav-height) + 32px); }
.article-filter-bar__pills {
display: flex;
gap: var(--sp-sm);
flex-wrap: wrap;
align-items: center;
}
.article-pill {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 100px;
border: 1px solid var(--gray-600);
color: var(--gray-300);
text-decoration: none;
transition: border-color var(--trans-fast), color var(--trans-fast), background var(--trans-fast);
white-space: nowrap;
}
.article-pill:hover { border-color: var(--color-blue); color: var(--color-blue); }
.article-pill.is-active {
background: var(--color-blue-dim);
border-color: var(--color-blue);
color: var(--color-blue);
}
/* ─── Shared meta atoms ──────────────────────────────────── */
.article-cat-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-blue);
text-decoration: none;
padding: 3px 8px;
border: 1px solid var(--color-blue-mid);
border-radius: var(--radius-sm);
background: var(--color-blue-glow);
white-space: nowrap;
}
.article-cat-label:hover { background: var(--color-blue-dim); }
.article-date {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--gray-400);
}
.article-publication {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray-500);
}
.article-read-time {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--gray-500);
}
.article-byline {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--gray-300);
}
/* Type badge — sits over card image */
.article-type-badge {
position: absolute;
top: var(--sp-md);
left: var(--sp-md);
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-sm);
background: rgba(0,0,0,0.72);
backdrop-filter: blur(6px);
}
.article-type-badge--own {
color: var(--color-blue);
border: 1px solid rgba(70,130,180,0.45);
}
.article-type-badge--external {
color: var(--gray-200);
border: 1px solid rgba(255,255,255,0.18);
}
/* ─── Featured article ───────────────────────────────────── */
.article-featured {
padding-block: var(--sp-2xl);
border-bottom: 1px solid var(--gray-700);
}
.article-featured__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2xl);
align-items: start;
}
.article-featured__image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16/9;
background: var(--gray-800);
}
.article-featured__image img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.5s ease;
}
.article-featured__image:hover img { transform: scale(1.03); }
.article-featured__image-placeholder {
width: 100%; height: 100%;
background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
}
.article-featured__body { display: flex; flex-direction: column; gap: var(--sp-md); padding-top: var(--sp-sm); }
.article-featured__meta { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.article-featured__title {
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
line-height: 1.2;
}
.article-featured__title a { color: inherit; text-decoration: none; }
.article-featured__title a:hover { color: var(--color-blue); }
.article-featured__excerpt { font-size: 0.95rem; line-height: 1.7; color: var(--gray-300); margin: 0; }
.article-featured__footer { display: flex; align-items: center; gap: var(--sp-lg); flex-wrap: wrap; margin-top: var(--sp-sm); }
@media (max-width: 768px) {
.article-featured__inner { grid-template-columns: 1fr; }
}
/* ─── Article grid ───────────────────────────────────────── */
.article-grid-section { padding-block: var(--sp-2xl); }
.article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-lg);
}
.article-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .article-grid { grid-template-columns: 1fr; } }
/* ─── Article card ───────────────────────────────────────── */
.article-card {
display: flex;
flex-direction: column;
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--trans-base), transform var(--trans-slow);
}
.article-card:hover { border-color: rgba(70,130,180,0.3); transform: translateY(-2px); }
.article-card__image {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--gray-700);
flex-shrink: 0;
}
.article-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--trans-slow); }
.article-card:hover .article-card__image img { transform: scale(1.04); }
.article-card__image-placeholder {
width: 100%; height: 100%;
background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
display: flex; align-items: center; justify-content: center;
color: var(--gray-600);
}
.article-card__body { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); flex: 1; }
.article-card__meta { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.article-card__title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-white); line-height: 1.3; }
.article-card__title a { color: inherit; text-decoration: none; }
.article-card__title a:hover { color: var(--color-blue); }
.article-card__publication { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.article-card__excerpt { font-size: 0.825rem; line-height: 1.65; color: var(--gray-300); margin: 0; flex: 1; }
.article-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-sm); border-top: 1px solid var(--gray-700); margin-top: auto; }
.article-card__cta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-blue); text-decoration: none; transition: color var(--trans-fast); }
.article-card__cta:hover { color: #7aabcf; }
/* ─── Pagination ─────────────────────────────────────────── */
.article-pagination { margin-top: var(--sp-2xl); display: flex; justify-content: center; }
.article-pagination .page-numbers {
display: flex; gap: var(--sp-sm); list-style: none; align-items: center;
}
.article-pagination .page-numbers li a,
.article-pagination .page-numbers li span {
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
padding: 8px 14px; border: 1px solid var(--gray-600); border-radius: var(--radius-sm);
color: var(--gray-300); text-decoration: none; transition: border-color var(--trans-fast), color var(--trans-fast);
}
.article-pagination .page-numbers li a:hover { border-color: var(--color-blue); color: var(--color-blue); }
.article-pagination .page-numbers li .current { background: var(--color-blue-dim); border-color: var(--color-blue); color: var(--color-blue); }
/* ─── Empty state ────────────────────────────────────────── */
.article-empty { text-align: center; padding: var(--sp-3xl); color: var(--gray-400); }
/* ─── Single article: hero ───────────────────────────────── */
.article-hero {
padding-top: var(--sp-2xl);
padding-bottom: var(--sp-xl);
border-bottom: 1px solid var(--gray-700);
}
.article-hero__inner { max-width: 760px; }
.article-hero__meta { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; margin-bottom: var(--sp-md); }
.article-hero__title {
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
line-height: 1.15;
margin-bottom: var(--sp-lg);
}
.article-hero__excerpt { font-size: 1.1rem; line-height: 1.75; color: var(--gray-200); margin-bottom: var(--sp-lg); }
.article-hero__byline { display: flex; align-items: center; gap: var(--sp-md); }
/* ─── Single article: featured image ─────────────────────── */
.article-thumb { padding-block: var(--sp-xl); }
.article-thumb__img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); display: block; }
/* ─── Single article: body layout ───────────────────────── */
.article-body { padding-block: var(--sp-2xl); border-bottom: 1px solid var(--gray-700); }
.article-body__layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--sp-2xl);
align-items: start;
}
.article-content {
font-size: 1rem;
line-height: 1.85;
color: var(--gray-100);
max-width: 680px;
}
.article-content h2 { font-size: 1.5rem; font-weight: 700; color: var(--color-white); margin: 2rem 0 1rem; letter-spacing: -0.015em; }
.article-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--color-white); margin: 1.75rem 0 0.75rem; }
.article-content p { margin-bottom: 1.25rem; }
.article-content a { color: var(--color-blue); }
.article-content a:hover { color: #7aabcf; }
.article-content blockquote {
border-left: 3px solid var(--color-blue);
padding-left: var(--sp-lg);
margin: var(--sp-xl) 0;
font-size: 1.05rem;
color: var(--gray-200);
font-style: italic;
}
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-content li { margin-bottom: 0.5rem; }
.article-body__tags { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; margin-top: var(--sp-xl); padding-top: var(--sp-lg); border-top: 1px solid var(--gray-700); }
.article-tags__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); }
.article-body__nav { margin-top: var(--sp-xl); }
/* ─── Article sidebar ────────────────────────────────────── */
.article-body__sidebar { display: flex; flex-direction: column; gap: var(--sp-md); position: sticky; top: calc(var(--nav-height) + var(--sp-lg)); }
.admin-bar .article-body__sidebar { top: calc(var(--nav-height) + 32px + var(--sp-lg)); }
.article-sidebar-card {
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
padding: var(--sp-lg);
display: flex;
flex-direction: column;
gap: var(--sp-sm);
}
.article-sidebar-card--cta { border-color: var(--color-blue-mid); background: var(--color-blue-glow); }
.article-sidebar-card__title { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-blue); }
.article-sidebar-card__body { font-size: 0.825rem; line-height: 1.6; color: var(--gray-300); margin: 0; }
.article-sidebar-card__link { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-blue); text-decoration: none; margin-top: auto; }
.article-sidebar-card__link:hover { color: #7aabcf; }
/* ─── Related articles ───────────────────────────────────── */
.article-related { padding-block: var(--sp-2xl); border-bottom: 1px solid var(--gray-700); }
.article-related__header { margin-bottom: var(--sp-xl); }
.article-related__headline { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--color-white); margin-top: var(--sp-sm); }
@media (max-width: 900px) {
.article-body__layout { grid-template-columns: 1fr; }
.article-body__sidebar { position: static; }
.article-grid--3 { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
HOME — RECENT NEWS SECTION
═══════════════════════════════════════════════════════════════ */
.home-news {
padding-block: var(--sp-3xl);
background: var(--gray-800);
border-top: 1px solid var(--gray-600);
border-bottom: 1px solid var(--gray-600);
}
.home-news__inner { /* uses .site-container */ }
/* Header row — headline left, "View All" right */
.home-news__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-xl);
margin-bottom: var(--sp-2xl);
}
.home-news__headline {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-top: var(--sp-sm);
margin-bottom: 0;
}
.home-news__view-all {
flex-shrink: 0;
white-space: nowrap;
}
/* 3-column card grid */
.home-news__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-lg);
}
@media (max-width: 1024px) { .home-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
.home-news__grid { grid-template-columns: 1fr; }
.home-news__header { flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
}
/* Card */
.home-news-card {
display: flex;
flex-direction: column;
background: var(--gray-900);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--trans-base), transform var(--trans-slow);
}
.home-news-card:hover {
border-color: rgba(70,130,180,0.3);
transform: translateY(-3px);
}
/* Card image */
.home-news-card__image {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--gray-700);
flex-shrink: 0;
}
.home-news-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--trans-slow);
}
.home-news-card:hover .home-news-card__image img {
transform: scale(1.04);
}
.home-news-card__image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-600);
}
/* Card body */
.home-news-card__body {
display: flex;
flex-direction: column;
gap: var(--sp-sm);
padding: var(--sp-lg);
flex: 1;
}
.home-news-card__meta {
display: flex;
align-items: center;
gap: var(--sp-sm);
flex-wrap: wrap;
}
.home-news-card__title {
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-white);
line-height: 1.35;
}
.home-news-card__title a {
color: inherit;
text-decoration: none;
}
.home-news-card__title a:hover { color: var(--color-blue); }
.home-news-card__pub {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray-500);
}
.home-news-card__excerpt {
font-size: 0.825rem;
line-height: 1.65;
color: var(--gray-300);
margin: 0;
flex: 1;
}
.home-news-card__cta {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-blue);
text-decoration: none;
margin-top: auto;
padding-top: var(--sp-sm);
border-top: 1px solid var(--gray-700);
transition: color var(--trans-fast);
}
.home-news-card__cta:hover { color: #7aabcf; }
/* ═══════════════════════════════════════════════════════════════
EVENTS — page-events.php
Calendar grid + event list cards + past events accordion
═══════════════════════════════════════════════════════════════ */
/* ─── Calendar section ───────────────────────────────────── */
.ev-calendar-section {
padding-block: var(--sp-2xl);
background: var(--gray-900);
border-bottom: 1px solid var(--gray-700);
}
.ev-calendar {
max-width: 780px;
margin-inline: auto;
background: var(--gray-800);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: var(--sp-xl);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
/* Header row */
.ev-calendar__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-lg);
padding-bottom: var(--sp-lg);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ev-calendar__month-label {
font-family: var(--font-primary);
font-size: 1.15rem;
font-weight: 700;
color: var(--color-white);
letter-spacing: -0.01em;
text-align: center;
flex: 1;
}
.ev-calendar__nav {
background: var(--gray-700);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-200);
cursor: pointer;
transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
padding: 0;
flex-shrink: 0;
}
.ev-calendar__nav:hover:not(:disabled) {
background: var(--color-blue-dim);
border-color: var(--color-blue);
color: var(--color-blue);
}
.ev-calendar__nav:disabled { cursor: default; opacity: 0.3; }
/* Day-of-week header row */
.ev-calendar__dow {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: var(--sp-sm);
}
.ev-calendar__dow span {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray-200);
padding-block: 4px;
font-weight: 600;
}
/* Day grid — 1px white lines between cells via background + outline trick */
.ev-calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
border-top: 1px solid rgba(255,255,255,0.08);
border-left: 1px solid rgba(255,255,255,0.08);
}
.ev-cal-day {
position: relative;
min-height: 86px;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 6px 5px 5px;
border-right: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: background var(--trans-fast);
}
.ev-cal-day--empty { pointer-events: none; background: rgba(0,0,0,0.15); }
.ev-cal-day--past { opacity: 0.45; }
.ev-cal-day__num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--gray-200);
line-height: 1;
padding-left: 2px;
margin-bottom: 4px;
flex-shrink: 0;
}
/* Today */
.ev-cal-day--today {
background: rgba(70,130,180,0.18);
}
.ev-cal-day--today .ev-cal-day__num {
color: var(--color-blue);
font-weight: 700;
}
/* Has events */
.ev-cal-day--has-events { background: rgba(255,255,255,0.03); }
.ev-cal-day--has-events:hover,
.ev-cal-day--has-events.is-active {
background: rgba(70,130,180,0.12);
}
/* Bars container */
.ev-cal-day__bars {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
}
/* Individual event bar */
.ev-cal-day__bar {
display: block;
width: 100%;
background: var(--color-blue-dim);
border-left: 2px solid var(--color-blue);
color: var(--color-blue);
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.03em;
line-height: 1.3;
padding: 2px 4px;
border-radius: 0 2px 2px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: background var(--trans-fast), color var(--trans-fast);
}
.ev-cal-day__bar:hover {
background: var(--color-blue-mid);
color: var(--color-white);
}
/* Past event bars — muted */
.ev-cal-day--past .ev-cal-day__bar {
background: rgba(255,255,255,0.04);
border-left-color: var(--border-strong);
color: var(--gray-400);
}
/* "+N more" overflow */
.ev-cal-day__bar--more {
background: transparent;
border-left: none;
color: var(--gray-500);
font-size: 8px;
padding-left: 2px;
border-radius: 0;
}
@media (max-width: 640px) {
.ev-cal-day { min-height: 56px; }
.ev-cal-day__bar { display: none; } /* too small — dots only on mobile */
.ev-cal-day--has-events::after {
content: '';
display: block;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--color-blue);
margin: 2px auto 0;
}
}
/* Tooltip */
.ev-calendar__tooltip {
margin-top: var(--sp-md);
background: var(--gray-800);
border: 1px solid var(--color-blue-mid);
border-radius: var(--radius-md);
padding: var(--sp-md) var(--sp-lg);
animation: dropdownIn 160ms ease forwards;
}
.ev-cal-tooltip-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-sm);
}
.ev-cal-tooltip-item {
display: flex;
align-items: baseline;
gap: var(--sp-sm);
flex-wrap: wrap;
font-size: 0.825rem;
}
.ev-cal-tooltip-type {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-blue);
flex-shrink: 0;
}
.ev-cal-tooltip-title { color: var(--color-white); font-weight: 500; }
.ev-cal-tooltip-city { font-size: 0.75rem; color: var(--gray-400); }
/* ─── Event list section ─────────────────────────────────── */
.ev-list-section {
padding-block: var(--sp-3xl);
}
.ev-list-header {
margin-bottom: var(--sp-2xl);
}
.ev-list-headline {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin-top: var(--sp-sm);
}
.ev-list {
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
/* ─── Event card ─────────────────────────────────────────── */
.ev-card {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: var(--sp-xl);
align-items: start;
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
padding: var(--sp-xl);
transition: border-color var(--trans-base);
}
.ev-card--featured {
border-color: var(--color-blue-mid);
background: linear-gradient(135deg, var(--gray-800), var(--color-blue-glow));
}
.ev-card--highlight {
border-color: var(--color-blue);
box-shadow: 0 0 0 2px var(--color-blue-mid);
}
.ev-card:hover { border-color: rgba(70,130,180,0.35); }
/* Date badge */
.ev-card__date-badge {
display: flex;
flex-direction: column;
align-items: center;
background: var(--color-blue-dim);
border: 1px solid var(--color-blue-mid);
border-radius: var(--radius-sm);
padding: var(--sp-sm) var(--sp-md);
text-align: center;
flex-shrink: 0;
min-width: 60px;
}
.ev-card__date-month {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-blue);
line-height: 1;
}
.ev-card__date-day {
font-family: var(--font-primary);
font-size: 1.75rem;
font-weight: 700;
color: var(--color-white);
line-height: 1.1;
letter-spacing: -0.02em;
}
.ev-card__date-year {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--gray-400);
line-height: 1;
}
/* Card body */
.ev-card__body { display: flex; flex-direction: column; gap: var(--sp-sm); }
.ev-card__meta { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.ev-type-badge {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: var(--gray-700);
color: var(--gray-300);
border: 1px solid var(--gray-600);
white-space: nowrap;
}
.ev-type-badge--conference { background: rgba(99,102,241,0.12); color: #a5b4fc; border-color: rgba(99,102,241,0.25); }
.ev-type-badge--panel { background: var(--color-blue-dim); color: var(--color-blue); border-color: var(--color-blue-mid); }
.ev-type-badge--networking { background: rgba(52,211,153,0.12); color: #6ee7b7; border-color: rgba(52,211,153,0.25); }
.ev-type-badge--webinar { background: rgba(251,191,36,0.12); color: #fcd34d; border-color: rgba(251,191,36,0.25); }
.ev-type-badge--virtual { background: rgba(167,139,250,0.12); color: #c4b5fd; border-color: rgba(167,139,250,0.25); }
.ev-card__title {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-white);
line-height: 1.3;
}
.ev-card__details { display: flex; flex-direction: column; gap: 4px; }
.ev-card__detail {
display: flex;
align-items: baseline;
gap: var(--sp-sm);
font-size: 0.825rem;
color: var(--gray-300);
}
.ev-card__detail svg { color: var(--gray-500); flex-shrink: 0; }
.ev-card__excerpt {
font-size: 0.825rem;
line-height: 1.65;
color: var(--gray-400);
margin: 0;
}
/* Action column */
.ev-card__action { flex-shrink: 0; align-self: center; }
.ev-card__btn {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
@media (max-width: 768px) {
.ev-card {
grid-template-columns: 60px 1fr;
grid-template-rows: auto auto;
}
.ev-card__action {
grid-column: 2;
grid-row: 2;
}
}
@media (max-width: 480px) {
.ev-card { grid-template-columns: 1fr; }
.ev-card__date-badge { flex-direction: row; gap: var(--sp-sm); width: fit-content; }
.ev-card__action { grid-column: 1; }
}
/* ─── Past events accordion ──────────────────────────────── */
.ev-past-section {
padding-bottom: var(--sp-3xl);
border-top: 1px solid var(--gray-700);
padding-top: var(--sp-2xl);
}
.ev-past-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
padding: var(--sp-lg) var(--sp-xl);
color: var(--gray-300);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
transition: border-color var(--trans-fast), color var(--trans-fast);
}
.ev-past-toggle:hover { border-color: var(--color-blue-mid); color: var(--color-blue); }
.ev-past-toggle__icon { transition: transform var(--trans-base); flex-shrink: 0; }
.ev-past-list {
margin-top: var(--sp-md);
display: flex;
flex-direction: column;
gap: 1px;
}
.ev-past-row {
display: grid;
grid-template-columns: 120px 1fr 120px 140px;
gap: var(--sp-lg);
align-items: center;
padding: var(--sp-md) var(--sp-lg);
background: var(--gray-800);
border-radius: var(--radius-sm);
opacity: 0.65;
transition: opacity var(--trans-fast);
}
.ev-past-row:hover { opacity: 1; }
.ev-past-row__date {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray-400);
}
.ev-past-row__title {
font-size: 0.875rem;
color: var(--gray-200);
font-weight: 500;
}
.ev-past-row__type,
.ev-past-row__location {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gray-500);
}
@media (max-width: 768px) {
.ev-past-row { grid-template-columns: 100px 1fr; grid-template-rows: auto auto; }
.ev-past-row__type, .ev-past-row__location { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
CONTACT PAGE — page-contact.php
═══════════════════════════════════════════════════════════════ */
/* ─── Hero ───────────────────────────────────────────────── */
.contact-hero {
background: var(--color-black);
border-bottom: 1px solid var(--gray-700);
}
.contact-hero__inner {
padding-top: var(--sp-2xl);
padding-bottom: var(--sp-2xl);
}
.contact-hero__headline {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
margin: var(--sp-sm) 0 var(--sp-md);
line-height: 1.1;
}
.contact-hero__subheading {
font-size: 1rem;
line-height: 1.75;
color: var(--gray-300);
max-width: 560px;
margin: 0;
}
/* ─── Body layout ────────────────────────────────────────── */
.contact-body {
padding-block: var(--sp-3xl);
}
.contact-body__layout {
display: grid;
grid-template-columns: 340px 1fr;
gap: var(--sp-3xl);
align-items: start;
}
@media (max-width: 900px) {
.contact-body__layout {
grid-template-columns: 1fr;
gap: var(--sp-2xl);
}
}
/* ─── Left info column ───────────────────────────────────── */
.contact-info {
display: flex;
flex-direction: column;
gap: var(--sp-xl);
position: sticky;
top: calc(var(--nav-height) + var(--sp-xl));
}
.admin-bar .contact-info {
top: calc(var(--nav-height) + 32px + var(--sp-xl));
}
@media (max-width: 900px) {
.contact-info { position: static; }
}
/* Office cards */
.contact-offices {
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
.contact-office-card {
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
padding: var(--sp-lg);
display: flex;
flex-direction: column;
gap: 4px;
}
.contact-office-card__label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-blue);
margin-bottom: var(--sp-sm);
}
.contact-office-card__name {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-white);
}
.contact-office-card__address {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 0.825rem;
color: var(--gray-300);
line-height: 1.5;
margin-top: 4px;
}
.contact-office-card__phone,
.contact-office-card__email {
font-size: 0.825rem;
color: var(--gray-300);
text-decoration: none;
margin-top: 4px;
transition: color var(--trans-fast);
}
.contact-office-card__phone:hover,
.contact-office-card__email:hover { color: var(--color-blue); }
/* Channel list */
.contact-channels {
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
padding: var(--sp-lg);
}
.contact-channels__title {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gray-400);
margin-bottom: var(--sp-md);
}
.contact-channels__list {
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
.contact-channel { display: flex; flex-direction: column; gap: 2px; }
.contact-channel__label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray-500);
}
.contact-channel__value {
font-size: 0.875rem;
color: var(--gray-200);
text-decoration: none;
transition: color var(--trans-fast);
}
.contact-channel__value:hover { color: var(--color-blue); }
/* Social links */
.contact-social {
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-md);
padding: var(--sp-lg);
}
.contact-social__links {
display: flex;
flex-direction: column;
gap: var(--sp-sm);
margin-top: var(--sp-md);
}
.contact-social__link {
display: flex;
align-items: center;
gap: var(--sp-md);
font-size: 0.875rem;
color: var(--gray-300);
text-decoration: none;
padding: var(--sp-sm) 0;
border-bottom: 1px solid var(--gray-700);
transition: color var(--trans-fast);
}
.contact-social__link:last-child { border-bottom: none; }
.contact-social__link:hover { color: var(--color-blue); }
.contact-social__link svg { flex-shrink: 0; }
/* ─── Right form column ──────────────────────────────────── */
.contact-form-wrap {
background: var(--gray-800);
border: 1px solid var(--gray-600);
border-radius: var(--radius-lg);
padding: var(--sp-2xl);
}
.contact-form-header {
margin-bottom: var(--sp-xl);
padding-bottom: var(--sp-xl);
border-bottom: 1px solid var(--gray-700);
}
.contact-form-header__title {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--color-white);
margin-bottom: var(--sp-sm);
}
.contact-form-header__body {
font-size: 0.875rem;
line-height: 1.65;
color: var(--gray-300);
margin: 0;
}
/* Form fields */
.contact-form {
display: flex;
flex-direction: column;
gap: var(--sp-lg);
}
.contact-form__row { display: flex; gap: var(--sp-md); }
.contact-form__row--2col > .contact-form__field { flex: 1; min-width: 0; }
@media (max-width: 540px) {
.contact-form__row--2col { flex-direction: column; }
}
.contact-form__field {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.contact-form__label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray-300);
}
.contact-form__req { color: var(--color-blue); margin-left: 2px; }
.contact-form__input {
width: 100%;
box-sizing: border-box;
background: var(--gray-900);
border: 1px solid var(--gray-600);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 14px;
font-family: var(--font-body);
color: var(--color-white);
transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
-webkit-appearance: none;
appearance: none;
}
.contact-form__input::placeholder { color: rgba(255,255,255,0.5); }
.contact-form__input:focus {
outline: none;
border-color: var(--color-blue);
box-shadow: 0 0 0 2px var(--color-blue-glow);
}
.contact-form__input.is-invalid {
border-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239,68,68,0.12);
}
.contact-form__select {
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234682b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
cursor: pointer;
}
.contact-form__textarea {
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
/* Submit */
.contact-form__submit {
position: relative;
overflow: hidden;
width: 100%;
justify-content: center;
}
.contact-form__submit-loader {
display: none;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
position: absolute;
}
.contact-form__submit.is-loading .contact-form__submit-text { opacity: 0; }
.contact-form__submit.is-loading .contact-form__submit-loader { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Response message */
.contact-form__response {
font-size: 0.875rem;
line-height: 1.5;
padding: var(--sp-md) var(--sp-lg);
border-radius: var(--radius-sm);
display: none;
}
.contact-form__response.is-success {
display: block;
background: rgba(52,211,153,0.1);
border: 1px solid rgba(52,211,153,0.25);
color: #6ee7b7;
}
.contact-form__response.is-error {
display: block;
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.25);
color: #fca5a5;
}
/* ═══════════════════════════════════════════════════════════════
SINGLE EVENT — single-event.php
═══════════════════════════════════════════════════════════════ */
.event-hero {
padding-top: var(--sp-2xl);
padding-bottom: var(--sp-2xl);
border-bottom: 1px solid var(--gray-700);
}
.event-hero__inner {
display: flex;
flex-direction: column;
gap: var(--sp-lg);
max-width: 760px;
}
.event-hero__date-badge {
display: inline-flex;
align-items: center;
gap: var(--sp-sm);
background: var(--color-blue-dim);
border: 1px solid var(--color-blue-mid);
border-radius: var(--radius-sm);
padding: var(--sp-sm) var(--sp-lg);
width: fit-content;
}
.event-hero__date-badge .ev-card__date-month {
font-size: 10px;
}
.event-hero__date-badge .ev-card__date-day {
font-size: 1.4rem;
line-height: 1;
}
.event-hero__date-badge .ev-card__date-year {
font-size: 10px;
}
.event-hero__meta {
display: flex;
align-items: center;
gap: var(--sp-sm);
flex-wrap: wrap;
}
.event-hero__title {
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
line-height: 1.15;
}
.event-hero__details {
display: flex;
flex-direction: column;
gap: var(--sp-sm);
}
.event-hero__actions {
display: flex;
gap: var(--sp-md);
align-items: center;
flex-wrap: wrap;
margin-top: var(--sp-sm);
}
.event-body {
padding-block: var(--sp-2xl);
border-bottom: 1px solid var(--gray-700);
}
.event-body__inner {
max-width: 760px;
}
.event-back {
padding-block: var(--sp-xl);
}
/* ── Pillar bullet lists (page-brand.php thesis section) ─── */
.about-pillar__lead {
font-size: 0.875rem;
line-height: 1.65;
color: var(--gray-200);
margin: 0 0 var(--sp-md);
}
.about-pillar__bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.about-pillar__bullets li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.875rem;
line-height: 1.55;
color: var(--gray-200);
}
/* Blue check marker */
.about-pillar__bullets li::before {
content: '';
display: block;
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 2px;
background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 4' stroke='%234682b4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
/* ═══════════════════════════════════════════════════════════════
BRAND NARRATIVE SECTION — editorial prose layout
═══════════════════════════════════════════════════════════════ */
.brand-narrative-section {
padding-block: var(--sp-3xl);
border-bottom: 1px solid var(--gray-700);
}
.brand-narrative__inner {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--sp-3xl);
align-items: start;
}
@media (max-width: 768px) {
.brand-narrative__inner {
grid-template-columns: 1fr;
gap: var(--sp-xl);
}
}
/* Sticky eyebrow label on desktop */
.brand-narrative__label {
position: sticky;
top: calc(var(--nav-height) + var(--sp-xl));
padding-top: 4px;
}
/* Content column — prose + images flow together */
.brand-narrative__content {
max-width: 680px;
}
.brand-narrative__body {
display: flex;
flex-direction: column;
}
/* Each paragraph gets editorial spacing and size */
.brand-narrative__body p {
font-size: 1.05rem;
line-height: 1.85;
color: var(--gray-100);
margin: 0 0 var(--sp-xl);
}
.brand-narrative__body p:last-child {
margin-bottom: 0;
}
/* First paragraph — larger pull-quote style */
.brand-narrative__body p:first-child {
font-size: 1.2rem;
line-height: 1.75;
color: var(--color-white);
font-weight: 400;
border-left: 3px solid var(--color-blue);
padding-left: var(--sp-lg);
margin-bottom: var(--sp-2xl);
}
/* Floated images — text wraps around them naturally */
.brand-narrative__img {
width: 280px;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
clear: both;
}
.brand-narrative__img img {
width: 100%;
height: 210px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.brand-narrative__img:hover img {
transform: scale(1.03);
}
/* Photo 1 — floats right, text wraps left */
.brand-narrative__img--1 {
float: right;
margin: var(--sp-sm) 0 var(--sp-lg) var(--sp-xl);
}
/* Photo 2 — floats left, text wraps right */
.brand-narrative__img--2 {
float: left;
margin: var(--sp-sm) var(--sp-xl) var(--sp-lg) 0;
}
/* Clearfix */
.brand-narrative__body::after {
content: '';
display: table;
clear: both;
}
@media (max-width: 768px) {
.brand-narrative__img,
.brand-narrative__img--1,
.brand-narrative__img--2 {
float: none;
width: 100%;
margin: var(--sp-lg) 0;
}
.brand-narrative__img img { height: 220px; }
}