/* ============================================
NextGen Capital SA — Design System v1.0
Editorial Copper · Cormorant + Inter + JetBrains Mono
Square corners · hairline borders · copper accent
Fonts are loaded via tags in each page's
(preconnect + stylesheet). See any page's .
============================================ */
/* --- Design Tokens (per /design-system/tokens.css v1.0) --- */
:root {
/* Color · brand (copper) */
--accent: #9C6B3F;
--accent-deep: #7A4F2A;
--accent-soft: #C4A07A;
--accent-tint: #EFE3D2;
--gold: #C9A04E;
/* Color · ink (text) */
--ink: #1C1B19;
--ink-2: #4A4844;
--ink-3: #8A867E;
--ink-4: #B5B0A5;
/* Color · paper (surfaces) */
--paper: #FBF9F4;
--paper-2: #F4EFE3;
--paper-3: #ECE5D3;
--dark: #2A2724;
/* Color · rules */
--rule: #D9D4CB;
--rule-strong: #B5AE9D;
/* Color · semantic */
--success: #5B7A3E;
--warning: #B57A2A;
--danger: #A14738;
/* --- Legacy aliases — preserved so existing HTML keeps rendering ---
New code should reference the design-system tokens above directly. */
--color-bg-primary: var(--paper);
--color-bg-secondary: var(--paper-2);
--color-bg-card: var(--paper);
--color-bg-dark: var(--dark);
--color-bg-hero: var(--paper-2);
--color-text-primary: var(--ink);
--color-text-secondary:var(--ink-2);
--color-text-muted: var(--ink-3);
--color-text-light: var(--paper);
--color-accent: var(--accent);
--color-accent-light: var(--accent-soft);
--color-accent-dark: var(--accent-deep);
--color-accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 50%, var(--accent) 100%);
--color-border: var(--rule-strong);
--color-border-light: var(--rule);
--color-success: var(--success);
--color-success-bg: rgba(91, 122, 62, 0.08);
--color-error: var(--danger);
--color-error-bg: rgba(161, 71, 56, 0.08);
--color-overlay: rgba(28, 27, 25, 0.6);
--focus-ring: 0 0 0 3px rgba(156, 107, 63, 0.35);
/* Typography */
--f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--font-heading: var(--f-display);
--font-body: var(--f-body);
/* Type scale (responsive via clamp) — ceilings sized for 1920px+ displays.
Cormorant runs SMALL for its px size (x-height ~0.40em vs Inter's ~0.55em),
so every heading floor below is set against the Inter body copy it sits
next to, not against the number: an 18px Cormorant card title read as
smaller than the 15px Inter paragraph under it, and a 32px page h1 barely
cleared its own 17px lead on a phone. Hierarchy at 1920 / 1440 / 390:
page h1 76 / 57.6 / 44
centred section h2 48 / 48 / 40 (--fs-section-centred)
in-column h2 42 / 42 / 36 (--fs-section: Services, Philosophy, Fund overview)
card / sub h3 28 / 25.2 / 24 (--fs-h3)
lead 17 / 17 / 16, body 16 / 15 */
--fs-display: clamp(2.5rem, 5.5vw, 6.5rem); /* 40 → 104 */
--fs-h1: clamp(2.75rem, 4vw, 4.75rem); /* 44 → 76 */
--fs-h2: clamp(1.5rem, 2.8vw, 3.25rem); /* 24 → 52 */
/* In-column section titles — a heading set beside a picture with its own
paragraph (Services, Philosophy, the Fund overview). Holds steady from a
wide monitor to a laptop. */
--fs-section: clamp(2.25rem, 3vw, 2.625rem); /* 36 → 42 */
/* Centred section titles — a heading carrying a whole section on its own
above a card grid (Home, Who We Are, Fund, Contact). One step above the
in-column size so it reads as the section's headline, not a card title. */
--fs-section-centred: clamp(2.5rem, 3.4vw, 3rem); /* 40 → 48 */
/* Card titles and document sub-headings. Capped at 28px: the old 32px
ceiling put the six provider names on the Fund page within 10px of the
42px section title above them on a wide monitor, and the two read as one
size. Floor 24px so the title always outweighs 15px card copy. */
--fs-h3: clamp(1.5rem, 1.75vw, 1.75rem); /* 24 → 28 */
--fs-body: 1rem;
--fs-small: 0.8125rem; /* 13 */
--fs-caption: 0.75rem; /* 12 */
--fs-h4: 1.0625rem; /* 17 */
--lh-heading: 1.05;
--lh-body: 1.65;
--ls-wide: 0.18em;
--ls-wider: 0.32em;
/* Spacing — 4-unit base (kept legacy names + adds DS s-* tokens) */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-6: 24px;
--s-8: 32px;
--s-12: 48px;
--s-16: 64px;
--s-24: 96px;
--s-32:128px;
--space-3xs: 2px;
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--space-2xl:96px;
--space-3xl:128px;
/* Layout */
--max-width: 1280px; /* default container — institutional measure */
--max-width-wide: 1440px; /* hero / full-bleed sections */
--max-width-narrow: 800px; /* prose / reading width */
--nav-height: 72px;
/* Radii — square by default (DS rule: only pills get radius) */
--r-0: 0;
--r-1: 2px;
--r-pill: 999px;
--border-radius: 0;
--border-radius-lg: 0;
--radius-pill: 999px;
/* Z-index scale */
--z-nav: 100;
--z-modal: 200;
--z-toast: 300;
--z-skip: 9999;
/* Shadows (tightened per DS) */
--shadow-sm: 0 1px 2px rgba(28,27,25,.06), 0 1px 1px rgba(28,27,25,.04);
--shadow-md: 0 4px 12px rgba(28,27,25,.08), 0 2px 4px rgba(28,27,25,.04);
--shadow-lg: 0 16px 40px rgba(28,27,25,.12), 0 4px 12px rgba(28,27,25,.06);
--shadow-card: var(--shadow-sm);
/* Motion */
--ease: cubic-bezier(.22, .61, .36, 1);
--dur-1: 150ms;
--dur-2: 280ms;
--dur-3: 520ms;
--transition-fast: 150ms var(--ease);
--transition-base: 280ms var(--ease);
--transition-slow: 520ms var(--ease);
}
/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
font-family: var(--f-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink);
background: var(--paper);
font-feature-settings: "tnum", "ss01";
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-1) var(--ease); }
a:hover { color: var(--accent-deep); }
button { cursor: pointer; font-family: var(--f-body); border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); color: var(--ink); line-height: var(--lh-heading); letter-spacing: -0.012em; }
h1 { font-weight: 400; letter-spacing: -0.015em; }
h2, h3, h4 { font-weight: 500; }
em { color: var(--accent); font-style: italic; }
code, kbd, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
::selection { background: var(--accent-tint); color: var(--ink); }
/* --- Focus visible (a11y) --- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible, .btn:focus-visible { outline-offset: 3px; }
/* --- Skip link --- */
.skip-link { position: absolute; left: -10000px; top: 8px; z-index: var(--z-skip); padding: 10px 16px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: var(--fs-caption); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { left: 8px; color: var(--paper); }
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* --- No-JS / above-fold reveal fallback --- */
.no-js .reveal { opacity: 1; transform: none; }
/* --- Utility Classes --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); }
.container--narrow { max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 var(--space-md); }
.container--wide { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 var(--space-md); }
/* Hero containers get the wider max-width by default — gives full-bleed sections more breathing room on big monitors */
.hero > .container { max-width: var(--max-width-wide); }
.section { padding: var(--space-2xl) 0; }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--dark); color: var(--paper); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--paper); }
.section--dark em { color: var(--accent-soft); }
.section--dark .label { color: var(--accent-soft); }
.section--dark .gold-line { background: var(--accent-soft); }
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--ink-3); }
/* Eyebrow label — mono uppercase per DS */
.label {
display: inline-block;
font-family: var(--f-mono);
font-weight: 500;
font-size: var(--fs-caption);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--accent);
}
/* Gold rule — now copper hairline, square */
.gold-line {
width: 48px;
height: 1px;
background: var(--accent);
margin: var(--space-sm) 0 var(--space-md);
border: none;
}
.gold-line--center { margin-left: auto; margin-right: auto; }
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 12px 22px;
font-family: var(--f-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
border-radius: 0;
border: 1px solid transparent;
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: transparent; color: var(--paper); border-color: rgba(251, 249, 244, 0.4); }
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--ghost { background: transparent; color: var(--accent); border: 1px solid transparent; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--accent); border-radius: 0; }
.btn--ghost:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); background: transparent; }
.btn--disabled { opacity: 0.45; pointer-events: none; }
/* --- Navigation --- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-height); display: flex; align-items: center; background: rgba(251, 249, 244, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); transition: box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.nav--scrolled { box-shadow: var(--shadow-sm); }
.nav--hidden { transform: translateY(-100%); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); }
.nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; border: none; }
.nav__logo-icon { width: 32px; height: 32px; }
.nav__logo-img { height: 42px; width: auto; display: block; }
.nav__logo-text {
font-family: var(--f-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.2;
}
.nav__logo-text strong { font-weight: 600; }
.nav__logo-text span { display: block; font-weight: 400; font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); margin-top: 2px; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__link {
font-family: var(--f-body);
font-size: 14px;
font-weight: 400;
color: var(--ink-2);
text-decoration: none;
position: relative;
padding: 4px 0;
border: none;
transition: color var(--dur-1) var(--ease);
}
.nav__link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width var(--dur-2) var(--ease); }
.nav__link:hover, .nav__link--active { color: var(--accent); }
.nav__link:hover::after, .nav__link--active::after { width: 100%; }
.nav__cta { margin-left: var(--space-sm); }
.nav__cta.btn { padding: 9px 18px; }
/* Mobile Nav Toggle */
.nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --- Hero Section --- */
.hero {
position: relative;
min-height: 88vh; /* fallback for old browsers */
min-height: 88svh; /* small viewport, NOT dvh: dvh re-resolves when the phone
toolbar collapses on the first scroll, so the hero grew
and pushed the page down mid-scroll. svh never changes. */
display: flex;
align-items: center;
padding-top: var(--nav-height);
background: var(--paper);
border-bottom: 1px solid var(--rule);
overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.08; }
.hero__content { position: relative; z-index: 2; max-width: 760px; }
.hero__label { margin-bottom: var(--space-md); }
.hero__title {
font-family: var(--f-display);
font-size: var(--fs-display);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.015em;
margin-bottom: var(--space-md);
color: var(--ink);
}
.hero__title em { font-style: italic; color: var(--accent); font-weight: 400; }
.hero__subtitle {
font-family: var(--f-body);
font-size: 1.0625rem;
color: var(--ink-2);
line-height: 1.7;
margin-bottom: var(--space-lg);
max-width: 620px;
}
.hero__subtitle strong { color: var(--ink); font-weight: 500; }
.hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hero__badge {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: var(--space-xl);
padding: 6px 14px;
background: transparent;
border: 1px solid var(--accent);
border-radius: var(--radius-pill);
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.hero__badge svg { width: 12px; height: 12px; }
/* --- Cards --- */
.card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 0;
padding: var(--space-lg);
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.card__icon { width: 40px; height: 40px; margin-bottom: var(--space-md); color: var(--accent); }
.card__title { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h3); margin-bottom: var(--space-sm); color: var(--ink); letter-spacing: 0; }
.card__text { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.7; }
.card__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-md);
font-family: var(--f-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 1px solid var(--accent);
padding-bottom: 2px;
transition: color var(--dur-1) var(--ease), gap var(--dur-1) var(--ease);
}
.card__link:hover { gap: 10px; color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.card--location { padding: 0; overflow: hidden; }
.card--location__image { aspect-ratio: 3 / 2; background: var(--paper-2); border-bottom: 1px solid var(--rule); overflow: hidden; }
.card--location__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card--location > :not(.card--location__image) { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.card--location > .card__title { padding-top: var(--space-lg); }
.card--location > .card__text:last-child { padding-bottom: var(--space-lg); }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
/* KPI grid — performance snapshot on fund.html.
Uses container queries so the grid responds to its own width, not the viewport. */
.kpi-grid-wrap { container-type: inline-size; container-name: kpi; max-width: 1100px; margin: 0 auto; }
.cards-grid--kpi { grid-template-columns: repeat(4, 1fr); }
@container kpi (max-width: 720px) { .cards-grid--kpi { grid-template-columns: repeat(2, 1fr); } }
@container kpi (max-width: 380px) { .cards-grid--kpi { grid-template-columns: 1fr; } }
/* --- Service Feature --- */
.feature { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "img content"; gap: var(--space-2xl); align-items: center; padding: var(--space-2xl) 0; }
.feature__image { grid-area: img; }
.feature__content { grid-area: content; }
.feature:nth-child(even) { grid-template-areas: "content img"; }
/* A feature that is the sole content of its section (philosophy, services,
fund overview) carried its own 96px padding on top of the section's 96px:
384px of blank paper between consecutive sections on desktop and 320px on
phones. Let the section own the vertical rhythm in that case; the feature
keeps 40px of its own on desktop so the picture does not sit hard against
the section's colour boundary, and none on phones (<=768px, below). */
.section > .container > .feature:only-child { padding: var(--space-lg) 0; }
.feature__image { border: 1px solid var(--rule); border-radius: 0; overflow: hidden; aspect-ratio: 4/3; background: var(--paper-2); display: flex; align-items: center; justify-content: center; }
.feature__image img { width: 100%; height: 100%; object-fit: cover; }
/* The `.feature__content p` rule below is (0,1,1) and so out-specifies the bare
`.label` (0,1,0): without restating the colour here, an eyebrow inside a
feature block renders in body grey instead of copper. */
.feature__content .label { margin-bottom: var(--space-sm); color: var(--accent); }
.section--dark .feature__content .label { color: var(--accent-soft); }
.feature__content h2 { font-size: var(--fs-section); font-weight: 400; line-height: 1.1; margin-bottom: var(--space-sm); letter-spacing: -0.012em; }
.feature__content h3 { font-size: var(--fs-h2); margin-bottom: var(--space-sm); letter-spacing: -0.008em; }
.feature__content p { color: var(--ink-2); margin-bottom: var(--space-md); line-height: 1.7; }
.feature__list { margin-top: var(--space-md); }
.feature__list li { position: relative; padding-left: 20px; margin-bottom: 10px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.feature__list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--accent); }
/* --- Story / Corporate History timeline (embedded iframe) ---
The native rewrite was reverted; this restores the original component.
Pictet-style auto-scroll behaviour now lives inside the iframe source
(NXG Corporate History.html), so the parent here just has to size the
iframe correctly across viewports. */
.story-section { overflow-x: clip; padding-bottom: var(--space-lg); }
.story-section .page-header { margin-bottom: 0; }
.story-timeline {
width: 100%;
margin-top: var(--space-md);
position: relative;
}
.story-timeline__frame {
width: 100%;
height: 600px;
border: 0;
display: block;
background: var(--paper-2);
}
@media (max-width: 900px) {
.story-timeline { width: 100%; margin-left: 0; }
.story-timeline__frame { height: 560px; }
}
@media (max-width: 600px) {
/* Bumped from 440 → 600 so the below-baseline elements (secondary year
labels, building cutouts, ticks) are no longer clipped on phone. */
.story-timeline__frame { height: 600px; }
}
/* --- Team Section --- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.team-card { text-align: center; }
.team-card__photo { width: 168px; height: 168px; border-radius: 50%; margin: 0 auto var(--space-md); background: var(--paper-2); border: 1px solid var(--rule); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__photo-placeholder { font-family: var(--f-display); font-style: italic; font-size: 2.25rem; color: var(--accent); }
.team-card__name { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h3); margin-bottom: 4px; }
.team-card__role { font-family: var(--f-mono); font-size: 10.5px; color: var(--accent); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: var(--space-sm); }
.team-card__bio { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.7; text-align: left; max-width: 340px; margin: 0 auto; }
.team-card__credentials { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--space-sm); }
.team-card__credentials span {
font-family: var(--f-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.18em;
padding: 4px 10px;
background: transparent;
border: 1px solid var(--accent);
border-radius: var(--radius-pill);
color: var(--accent);
text-transform: uppercase;
}
/* Collapsible variant — clicking a senior-team photo reveals a preview box; clicking the preview opens the side drawer */
.team-card__details { display: none; }
button.team-card__trigger {
appearance: none;
-webkit-appearance: none;
font: inherit;
color: inherit;
padding: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .35s ease, border-color .35s ease;
}
button.team-card__trigger:hover { transform: scale(1.04); border-color: var(--accent); }
button.team-card__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button.team-card__trigger[aria-expanded="true"] { border-color: var(--accent); }
.team-card__preview {
display: none;
appearance: none;
-webkit-appearance: none;
width: 100%;
max-width: 280px;
margin: var(--space-sm) auto 0;
padding: var(--space-md);
background: var(--paper);
border: 1px solid var(--rule);
border-top: 2px solid var(--accent);
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.team-card--collapsible:hover .team-card__preview,
.team-card--collapsible:focus-within .team-card__preview {
display: block;
animation: previewReveal .3s ease;
}
.team-card__preview:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(31, 25, 19, 0.06);
}
.team-card__preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-card__preview-text {
display: block;
font-family: var(--f-body);
font-size: 0.875rem;
color: var(--ink-2);
line-height: 1.6;
margin-bottom: var(--space-sm);
}
.team-card__preview-cta {
display: block;
font-family: var(--f-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
}
@keyframes previewReveal {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Team Drawer (right-side bio panel) --- */
.team-drawer {
position: fixed;
inset: 0;
z-index: 1000;
pointer-events: none;
visibility: hidden;
transition: visibility 0s linear .4s;
}
.team-drawer.is-open {
pointer-events: auto;
visibility: visible;
transition: visibility 0s linear 0s;
}
.team-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(31, 25, 19, 0.4);
opacity: 0;
transition: opacity .35s ease;
}
.team-drawer.is-open .team-drawer__backdrop { opacity: 1; }
.team-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(480px, 92vw);
background: var(--paper);
border-left: 1px solid var(--rule);
box-shadow: -16px 0 48px rgba(31, 25, 19, 0.12);
transform: translateX(100%);
transition: transform .4s ease;
overflow-y: auto;
padding: calc(var(--space-xl) + var(--space-md)) var(--space-lg) var(--space-xl);
}
.team-drawer.is-open .team-drawer__panel { transform: translateX(0); }
.team-drawer__close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 36px;
height: 36px;
border: 1px solid var(--rule);
border-radius: 50%;
background: transparent;
color: var(--ink-2);
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color .25s ease, color .25s ease;
}
.team-drawer__close:hover { border-color: var(--accent); color: var(--accent); }
.team-drawer__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-drawer__inner { text-align: center; }
.team-drawer__photo {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto var(--space-md);
background: var(--paper-2);
border: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.team-drawer__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-drawer__initials {
font-family: var(--f-display);
font-style: italic;
font-size: 2rem;
color: var(--accent);
}
.team-drawer__name {
font-family: var(--f-display);
font-weight: 500;
font-size: var(--fs-h3);
margin-bottom: 4px;
}
.team-drawer__role {
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--accent);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.team-drawer__rule {
width: 48px;
height: 1px;
background: var(--accent);
margin: 0 auto var(--space-md);
}
.team-drawer__content { text-align: left; }
.team-drawer__content .team-card__bio {
font-size: 0.95rem;
color: var(--ink-2);
line-height: 1.75;
max-width: none;
margin: 0 0 var(--space-md);
}
.team-drawer__content .team-card__credentials {
margin: 0 0 var(--space-md);
justify-content: flex-start;
}
.team-drawer__content .languages-list {
margin-top: 0;
justify-content: flex-start;
}
/* --- Stats --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); text-align: center; padding: var(--space-xl) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat__number { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.5rem, 4vw, 3.5rem); color: var(--accent); margin-bottom: 8px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; font-style: italic; }
.stat__label { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.22em; text-transform: uppercase; }
/* --- Investor Gate --- */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--paper); padding: var(--space-lg); }
.gate__card {
max-width: 560px;
width: 100%;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 0;
padding: var(--space-xl);
text-align: center;
}
.gate__logo { width: 56px; height: 56px; margin: 0 auto var(--space-md); }
.gate__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); margin-bottom: var(--space-xs); letter-spacing: -0.012em; }
.gate__subtitle { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-lg); }
.gate__form { text-align: left; }
.gate__field { margin-bottom: var(--space-md); }
.gate__field label { display: block; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink); }
.gate__field select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--rule-strong);
border-radius: 0;
font-family: var(--f-body);
font-size: 14px;
background: var(--paper);
color: var(--ink);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239C6B3F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
transition: border-color var(--dur-1) var(--ease);
}
.gate__field select:focus { outline: none; border-color: var(--accent); }
.gate__checkbox { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--space-lg); cursor: pointer; }
.gate__checkbox input[type="checkbox"] { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.gate__checkbox span { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.gate__checkbox strong { color: var(--ink); font-weight: 600; }
.gate__disclaimer { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--rule); }
.gate__disclaimer a { color: var(--accent); border-bottom: 1px solid currentColor; }
.gate__btn { width: 100%; justify-content: center; }
/* --- Login Page --- */
.login { min-height: calc(100vh - var(--nav-height)); display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-height) + var(--space-lg)) var(--space-lg) var(--space-lg); background: var(--paper); }
.login__card { max-width: 480px; width: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: 0; padding: var(--space-xl); text-align: center; }
.login__options { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }
.login__option {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border: 1px solid var(--rule);
border-radius: 0;
text-align: left;
transition: border-color var(--dur-2) var(--ease);
text-decoration: none;
color: var(--ink);
}
.login__option:hover { border-color: var(--accent); color: var(--ink); }
.login__option-icon {
width: 40px; height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-tint);
color: var(--accent);
}
.login__option-title { font-family: var(--f-display); font-weight: 500; font-size: 1.125rem; margin-bottom: 2px; }
.login__option-desc { font-size: 12px; color: var(--ink-3); }
/* Fund sign-in form (client-login.php) — extends the .login/.login__card shell. */
.login__logo { display: inline-block; border: none; margin-bottom: var(--space-sm); }
.login__title { font-size: var(--fs-h2); letter-spacing: -0.012em; margin-bottom: var(--space-2xs); }
.login__subtitle { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3); }
.login__form { text-align: left; margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.login__submit { width: 100%; justify-content: center; }
.login__help { margin-top: var(--space-lg); font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.6; }
/* Phones (<=560px), both login pages. Below 560px the card no longer fits
beside the 40px page gutters, and the 64px card padding then eats half of
what is left: on an iPhone 13 the Fund sign-in card was 310px wide with 180px
inputs, a 24px title and a help paragraph wrapped to six lines (user's
screenshot, 2026-09-08). Use the site's phone content strip (16px gutters ->
358px on a 390px screen) with a 32px inset, hold the title at 32px, and set
the inputs at 16px: iOS Safari zooms the whole page into any focused field
smaller than 16px. The dialog variant below re-states its padding (its
desktop rule comes later in the file and would otherwise win). */
@media (max-width: 560px) {
.login { padding: calc(var(--nav-height) + var(--space-md)) var(--space-sm) var(--space-lg); }
.login__card { padding: var(--space-lg) var(--s-8); }
.login__title { font-size: 2rem; }
.login__form .form-group input { font-size: 16px; padding: 13px 14px; }
.login__submit { min-height: 44px; }
}
@media (max-width: 360px) {
.login__card { padding: var(--space-lg) var(--space-md); }
}
/* Dialog variant (client-login.html only) — the Masttro hand-off reads as a
popup: a tighter card, lifted off a darker ground so it stops being a
hairline outline on paper of its own colour, with ONE alignment throughout
(the old card centred everything except the body copy). The base
.login/.login__card rules above are shared with client-login.php's sign-in
form and are deliberately left untouched. */
.login--dialog { background: var(--paper-2); }
.login__card--dialog {
max-width: 420px;
padding: var(--space-lg) var(--space-lg) var(--space-md);
box-shadow: var(--shadow-lg);
}
.login__mark { width: 56px; height: 56px; margin: 0 auto var(--space-md); } /* matches .gate__logo */
.login__card--dialog .login__title { font-size: 2rem; margin: 0; }
.login__lede { margin: var(--space-xs) 0 0; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.6; }
.login__card--dialog .gold-line { margin: var(--space-md) auto; }
.login__card--dialog .login__submit { margin-top: var(--space-xs); } /* + the rule's 24px below it = 32px above the CTA */
.login__card--dialog .login__help { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--rule); }
/* Phone: same 32px inset as the sign-in card (see the shared block above); the
hairline-topped help keeps sitting closer to the bottom edge. Title stays 2rem. */
@media (max-width: 560px) {
.login__card--dialog { padding: var(--space-lg) var(--s-8) var(--space-md); }
}
@media (max-width: 360px) {
.login__card--dialog { padding: var(--space-lg) var(--space-md) var(--space-md); }
}
/* --- Fund Documents --- */
.docs-grid { display: grid; gap: var(--space-xs); }
.doc-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md); background: var(--paper); border: 1px solid var(--rule); border-radius: 0; transition: border-color var(--dur-1) var(--ease); }
.doc-row:hover { border-color: var(--accent); }
.doc-row__info { display: flex; align-items: center; gap: var(--space-sm); }
.doc-row__icon { color: var(--accent); flex-shrink: 0; }
.doc-row__name { font-weight: 500; font-size: 14px; color: var(--ink); }
.doc-row__meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }
.doc-row__download { color: var(--accent); padding: 8px; transition: color var(--dur-1) var(--ease); border: none; }
.doc-row__download:hover { color: var(--accent-deep); }
/* --- Contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-group label { display: block; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink); }
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--rule-strong);
border-radius: 0;
font-family: var(--f-body);
font-size: 14px;
background: var(--paper);
color: var(--ink);
transition: border-color var(--dur-1) var(--ease);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent); }
.form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"], .form-group select[aria-invalid="true"] { border-color: var(--danger); background: var(--color-error-bg); }
/* --- Autofill ---
Chrome/Safari paint their own pale-blue ground on an autofilled field, which
lands a foreign colour in the middle of the form (most visibly on the client
login). The UA background cannot be overridden with `background`; a large
inset box-shadow is the only thing that repaints it, and the absurd
transition delay stops the UA re-applying its colour a moment later. */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active,
.form-group textarea:-webkit-autofill,
.form-group select:-webkit-autofill {
-webkit-text-fill-color: var(--ink);
-webkit-box-shadow: 0 0 0 100px var(--paper) inset;
box-shadow: 0 0 0 100px var(--paper) inset;
caret-color: var(--ink);
transition: background-color 600000s 0s, border-color var(--dur-1) var(--ease);
}
.form-group input[aria-invalid="true"]:-webkit-autofill,
.form-group textarea[aria-invalid="true"]:-webkit-autofill,
.form-group select[aria-invalid="true"]:-webkit-autofill {
-webkit-box-shadow: 0 0 0 100px #F6EAE7 inset; /* --color-error-bg, opaque */
box-shadow: 0 0 0 100px #F6EAE7 inset;
}
/* Firefox honours the standard selector and only needs its own tint cleared.
Kept as a separate rule: browsers that don't know `:autofill` drop this one
instead of invalidating the -webkit- selector list above. */
.form-group input:autofill,
.form-group textarea:autofill,
.form-group select:autofill {
background-color: var(--paper);
color: var(--ink);
filter: none;
}
.form-group__error { display: block; font-size: 12px; color: var(--danger); margin-top: 4px; }
.form-group__help { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }
.form-consent { display: flex; align-items: flex-start; gap: 12px; padding: var(--space-md); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.form-consent input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.form-status { padding: var(--space-sm); border-radius: 0; font-size: 13px; }
.form-status[data-status="success"] { background: var(--color-success-bg); color: var(--success); border-left: 2px solid var(--success); }
.form-status[data-status="error"] { background: var(--color-error-bg); color: var(--danger); border-left: 2px solid var(--danger); }
.form-status:empty { display: none; }
.form-group textarea { min-height: 140px; resize: vertical; font-family: var(--f-body); }
.contact-info { padding: var(--space-lg); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 0; }
.contact-info h3 { margin-bottom: var(--space-md); font-size: var(--fs-h3); }
.office { margin-bottom: var(--space-lg); }
.office__name { font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; color: var(--accent); margin-bottom: 6px; letter-spacing: 0.22em; text-transform: uppercase; }
.office__address { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
/* --- Footer --- */
.footer { background: var(--dark); color: var(--paper); padding: clamp(48px, 6.5vw, var(--space-2xl)) 0 var(--space-lg); border-top: 1px solid var(--accent); }
/* ONE layout for every width, 2560px down to 320px: Brand takes the left and absorbs
all the slack, Client + Legal are sized to their own content and sit flush against
the container's right edge — so "Privacy Notice" lines up with the FINMA line in the
bottom bar. Only the column gap changes with the viewport, so no breakpoint has to
re-place anything. (Replaces the old 2fr/1fr/1fr/1fr desktop grid, which left ~90px
of dead space to the right of Legal, and the per-page inline style="grid-column-start"
on the Client column — see audit pass A1.) */
.footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: clamp(var(--space-md), 5vw, var(--space-xl)); row-gap: var(--space-lg); margin-bottom: clamp(var(--space-lg), 4vw, var(--space-xl)); align-items: start; }
/* Fluid logo: full 200px on desktop, shrinking with the viewport instead of staying a
200px block on a phone. */
.footer__brand img { width: clamp(132px, 19.5vw, 200px); height: auto; }
.footer__brand p { color: rgba(251, 249, 244, 0.6); font-size: 14px; line-height: 1.65; margin-top: var(--space-sm); max-width: 320px; }
.footer__heading { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: var(--space-md); }
.footer__link { display: block; font-size: 14px; color: rgba(251, 249, 244, 0.68); margin-bottom: 10px; transition: color var(--dur-1) var(--ease); text-decoration: none; border: none; }
.footer__link:hover { color: var(--accent-soft); }
/* Social row under the footer logo. Deliberately shares .footer__link's colour
and hover so the LinkedIn mark reads as one of the footer's text links, not a
button; the glyph is an inline SVG filled with currentColor.
The link box is the glyph itself (20px), so its left edge lines up exactly
with the logo above it. The 44px phone tap target is added by the ::before
overlay instead of by padding -- padding would push the glyph off that
alignment, and a fixed 44px box pulled back with a negative margin hangs
outside the container at 320px. */
.footer__social { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.footer__social-link { position: relative; display: inline-flex; color: rgba(251, 249, 244, 0.68); transition: color var(--dur-1) var(--ease); text-decoration: none; border: none; }
.footer__social-link::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.footer__social-link:hover { color: var(--accent-soft); }
.footer__social-link svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-lg); border-top: 1px solid rgba(251, 249, 244, 0.12); }
.footer__copy { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(251, 249, 244, 0.72); }
.footer__regulatory { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(251, 249, 244, 0.72); }
.footer__regulatory--link { color: rgba(251, 249, 244, 0.72); text-decoration: none; transition: color var(--dur-1) var(--ease); border: none; }
.footer__regulatory--link:hover { color: var(--accent-soft); }
/* --- Animations --- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal--visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }
/* --- Page header (replaces 4 near-duplicate inline blocks) --- */
.page-header { text-align: center; margin-bottom: var(--space-xl); }
.page-header--narrow { max-width: var(--max-width-narrow); margin-left: auto; margin-right: auto; }
.page-header--left { text-align: left; }
.page-header h1 { font-size: var(--fs-h1); letter-spacing: -0.012em; }
/* A centred h2 is a SECTION title, not a page title — it takes the centred
section size: below the page's own h1, one step above the in-column
feature headings (see the type-scale note at the top of this file). */
.page-header h2 { font-size: var(--fs-section-centred); font-weight: 400; line-height: 1.1; letter-spacing: -0.012em; }
/* A header whose block also holds the section's CTA (fund contact band). */
.page-header--flush { margin-bottom: 0; }
.page-header__lead { color: var(--ink-2); max-width: 640px; margin: 0 auto; font-size: 1.0625rem; line-height: 1.6; }
/* --- Languages list --- */
.languages-list { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.languages-list__item { padding: 4px 10px; background: transparent; border: 1px solid var(--accent); border-radius: var(--radius-pill); color: var(--accent); }
/* --- Fund Terms grid (8 cards) ---
Replaces the inline `style="grid-template-columns: repeat(4, 1fr);"` that
used to live on the Fund Terms container. The inline style won the
specificity fight against the global .cards-grid media queries, so the
layout stayed 4-col on phones and the cards crushed into unreadable
~95px columns. Modifier class gives proper responsive collapse. */
.cards-grid--terms {
grid-template-columns: repeat(4, 1fr);
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 1024px) { .cards-grid--terms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards-grid--terms { grid-template-columns: 1fr; } }
/* --- Card variants --- */
.card--minimal { padding: var(--space-md) var(--space-lg); }
.card--numbered { text-align: center; }
.card--numbered__index {
font-family: var(--f-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.32em;
color: var(--accent);
margin-bottom: var(--space-sm);
text-transform: uppercase;
}
/* --- aria-disabled / "coming soon" state --- */
[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.coming-soon-badge {
display: inline-block;
margin-left: 8px;
padding: 3px 8px;
font-family: var(--f-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-pill);
vertical-align: middle;
}
/* --- Verification notice on regulatory placeholders --- */
.verification-notice {
display: inline-block;
padding: 3px 8px;
font-family: var(--f-mono);
font-size: 10.5px;
background: var(--color-error-bg);
color: var(--danger);
border: 1px solid var(--danger);
border-radius: 0;
font-weight: 500;
letter-spacing: 0.08em;
}
/* --- Visually hidden helper --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* --- About — Our Mark / Alignment Coin --- */
.about-coin-section { position: relative; padding: var(--space-3xl) 0; background: var(--paper); overflow: hidden; }
.about-coin-section::before, .about-coin-section::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 48px; height: 1px; background: var(--accent); opacity: 0.6; }
.about-coin-section::before { top: var(--space-xl); }
.about-coin-section::after { bottom: var(--space-xl); }
.about-coin { max-width: 760px; margin: 0 auto; text-align: center; padding: 0 var(--space-md); position: relative; }
.about-coin__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); margin-bottom: var(--space-sm); letter-spacing: -0.012em; }
.about-coin__title em { font-style: italic; color: var(--accent); }
.about-coin__lead { color: var(--ink-2); max-width: 520px; margin: 0 auto var(--space-lg); }
.about-coin__figure { position: relative; margin: var(--space-xl) auto var(--space-lg); width: clamp(220px, 56vw, 420px); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.about-coin__figure::before { content: ''; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(156, 107, 63, 0.18) 0%, rgba(156, 107, 63, 0.05) 45%, transparent 72%); pointer-events: none; z-index: 0; }
.about-coin__image { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 16px 28px rgba(28, 27, 25, 0.14)) drop-shadow(0 6px 12px rgba(122, 79, 42, 0.10)); transition: transform 600ms var(--ease), filter 600ms var(--ease); }
.about-coin__figure:hover .about-coin__image { transform: scale(1.02) rotate(-1deg); filter: drop-shadow(0 20px 36px rgba(28, 27, 25, 0.18)) drop-shadow(0 8px 16px rgba(122, 79, 42, 0.14)); }
.about-coin__caption { font-family: var(--f-display); font-size: 1.25rem; font-style: italic; color: var(--ink-2); line-height: 1.6; max-width: 560px; margin: var(--space-md) auto 0; }
.about-coin__caption em { color: var(--accent); font-style: italic; }
.about-coin__attribution { display: block; margin-top: var(--space-sm); font-family: var(--f-mono); font-style: normal; font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 768px) {
.about-coin-section { padding: var(--space-2xl) 0; }
.about-coin__caption { font-size: 1.125rem; }
}
/* --- Insights / Content prose --- */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-size: var(--fs-h2); margin: var(--space-xl) 0 var(--space-md); letter-spacing: -0.008em; }
.prose h3 { font-size: var(--fs-h3); margin: var(--space-lg) 0 var(--space-sm); }
.prose p { margin-bottom: var(--space-md); color: var(--ink-2); line-height: 1.75; }
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.prose a:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.prose ul, .prose ol { margin: 0 0 var(--space-md) var(--space-md); }
.prose ul li, .prose ol li { margin-bottom: 8px; color: var(--ink-2); line-height: 1.7; }
.prose ul li { list-style: none; position: relative; padding-left: 18px; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: var(--space-md); margin: var(--space-lg) 0; font-family: var(--f-display); font-style: italic; font-size: 1.25rem; color: var(--ink); line-height: 1.5; }
/* --- Accordion (regulatory disclosures) ---
Built on native / so the content is reachable, keyboard-
operable, and Ctrl+F-findable with JS disabled. main.js layers on the height
animation and closes siblings; neither is required for the markup to work.
The row is a full-width bar with a hairline rule beneath and a copper chevron
that rotates on open — matching the disclosure bars on the previous site. */
.acc { margin-top: var(--space-lg); border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--nav-height) + var(--space-md)); }
.acc__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
width: 100%;
padding: var(--space-md) var(--space-xs);
cursor: pointer;
list-style: none;
transition: color var(--dur-1) var(--ease);
}
/* Suppress the native disclosure triangle (WebKit + the standard property). */
.acc__head::-webkit-details-marker { display: none; }
.acc__head::marker { content: ''; }
.acc__head:hover { color: var(--accent); }
.acc__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc__title {
font-family: var(--f-display);
font-weight: 500;
font-size: var(--fs-h3);
line-height: 1.25;
letter-spacing: -0.008em;
color: inherit;
margin: 0;
}
.acc__icon {
flex-shrink: 0;
color: var(--accent);
transition: transform var(--dur-2) var(--ease);
}
.acc__item[open] > .acc__head { color: var(--accent); }
.acc__item[open] > .acc__head .acc__icon { transform: rotate(180deg); }
.acc__body { padding: 0 var(--space-xs) var(--space-lg); max-width: 62ch; }
.acc__body > * + * { margin-top: var(--space-sm); }
.acc__body p, .acc__body li { color: var(--ink-2); line-height: 1.75; }
.acc__body a { color: var(--accent); border-bottom: 1px solid currentColor; }
.acc__body a:hover { color: var(--accent-deep); }
.acc__body strong { color: var(--ink); font-weight: 600; }
.acc__body ul { list-style: none; padding-left: 18px; }
.acc__body ul li { position: relative; padding-left: 18px; margin-top: var(--space-xs); }
.acc__body ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--accent); }
.acc__note { font-size: var(--fs-small); color: var(--ink-3); }
/* JS-driven height animation. The wrapper is only collapsed once main.js has
taken control (.acc--animated), so a no-JS browser never hides the panel. */
.acc--animated .acc__panel { overflow: hidden; }
.acc--animated .acc__panel[data-collapsing],
.acc--animated .acc__panel[data-expanding] { transition: height var(--dur-2) var(--ease); }
/* --- Disclosure table (cookie & storage inventory) --- */
.dtable-scroll { overflow-x: auto; margin-top: var(--space-md); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 640px; }
.dtable th, .dtable td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.dtable thead th {
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 1px solid var(--rule-strong);
white-space: nowrap;
}
.dtable tbody th { font-weight: 400; color: var(--ink-2); line-height: 1.6; }
.dtable td { color: var(--ink-2); white-space: nowrap; }
.dtable tbody tr:hover { background: var(--paper-2); }
/* ============================================================
Responsive — viewport breakpoints
Order: large → small (so smaller overrides larger).
Targets: 1920+ (4K), 1366 (laptop), 1024 (tablet), 768 (mobile),
430 (modern phone), 360 (small Android safety net),
landscape phone (height-based).
============================================================ */
/* --- 4K / ultra-wide: bigger vertical rhythm, lift hero --- */
@media (min-width: 1920px) {
.hero { min-height: 82vh; min-height: 82svh; }
.section { padding: calc(var(--space-2xl) * 1.25) 0; }
.hero__content { max-width: 880px; }
.hero__subtitle { max-width: 680px; font-size: 1.125rem; }
}
/* --- Common laptop range (1280×800 MacBook Air, 1366×768 Windows) --- */
@media (max-width: 1366px) and (min-width: 1025px) {
.cards-grid { gap: var(--space-sm); }
.feature { gap: var(--space-xl); }
.section { padding: var(--space-xl) 0; }
}
/* --- Tablet (≤1024px): grids collapse + hamburger nav --- */
/* Hamburger kicks in here (not 768px) because 7 nav links + Client Login CTA + logo
doesn't fit reliably between 768-1024px viewports. */
@media (max-width: 1024px) {
.cards-grid { grid-template-columns: repeat(2, 1fr); }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.feature { gap: var(--space-lg); }
.nav__toggle { display: flex; }
/* Dim backdrop behind the panel — body.nav-open is toggled by main.js.
Click outside the panel closes the menu. Starts at top: 0 so the strip
of photo to the right of the drawer (where the X sits) is also dimmed,
keeping the white X consistently readable against the hero background. */
body.nav-open::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(28, 27, 25, 0.42);
z-index: calc(var(--z-nav) - 1);
animation: navBackdropIn var(--dur-2) var(--ease);
}
/* Left-slide panel — fixed, full screen height (top:0 → 100dvh).
Solid dark surface (no translucency, no backdrop-filter). The drawer
covers the logo and the left portion of the nav bar; the toggle button
(now an X) sits at the right edge of the screen, outside the drawer's
320 px footprint, so it remains tappable.
Padding-top equals --nav-height so the first link sits below the visual
nav-bar zone (preserves where users expect the link list to start). */
.nav__links {
display: flex;
position: fixed;
top: 0;
left: 0;
right: auto;
height: 100vh; /* fallback for legacy engines */
height: 100dvh; /* preferred — iOS 15.4+; survives address-bar show/hide */
width: min(320px, 85vw);
background: var(--dark);
border-right: 1px solid rgba(251, 249, 244, 0.08);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: var(--nav-height) 0 var(--space-md);
overflow: hidden; /* no inner scrolling — items are sized to fit */
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.30);
transform: translateX(-100%);
transition: transform var(--dur-2) var(--ease);
visibility: hidden;
}
.nav__links--open {
transform: translateX(0);
visibility: visible;
}
/* Compact rows so all 7 links + CTA fit on common phone heights without a scrollbar.
Position: relative reserves the slot for the active item's left-bar accent. */
.nav__links .nav__link {
position: relative;
font-family: var(--f-body);
font-size: 0.9375rem; /* 15px */
font-weight: 500;
color: var(--paper);
padding: 14px var(--space-lg);
border-bottom: 1px solid rgba(251, 249, 244, 0.10);
width: 100%;
text-align: left;
line-height: 1.4;
transition: color var(--dur-1) var(--ease);
}
.nav__links .nav__link::after { display: none; }
.nav__links .nav__link:hover { color: var(--accent-soft); }
.nav__links .nav__link--active { color: var(--accent-soft); font-weight: 600; }
.nav__links .nav__link--active::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
background: var(--accent);
}
/* CTA — outlined cream on dark, inverts to filled cream on tap.
Override the global .btn--outline (cream bg / ink text) so the button
reads on the dark drawer instead of disappearing into a cream haze. */
.nav__cta {
margin: var(--space-md) var(--space-lg) 0;
align-self: stretch;
justify-content: center;
color: var(--paper);
border: 1px solid rgba(251, 249, 244, 0.5);
background: transparent;
}
.nav__cta:hover,
.nav__cta:focus-visible {
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
.nav__cta.btn { padding: 11px 18px; }
}
@keyframes navBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* --- In-page anchor scroll offsets ---
Sticky nav (72px) covers section headings when users jump via #anchors.
These IDs are the targets of the services nav and the fund "Access
Documents" link. */
#asset-management,
#investment-oversight,
#family-office,
#documents { scroll-margin-top: calc(var(--nav-height) + var(--space-md)); }
/* --- Mobile (≤768px): centered hero, single-column grids --- */
@media (max-width: 768px) {
.hero { min-height: 76vh; min-height: 76svh; }
.acc__head { padding: var(--space-sm) 0; gap: var(--space-sm); }
.acc__body { padding: 0 0 var(--space-md); }
.hero__content { text-align: center; margin: 0 auto; }
.hero__subtitle { margin-left: auto; margin-right: auto; }
.hero__actions { justify-content: center; }
.gold-line { margin-left: auto; margin-right: auto; }
.cards-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr; }
.feature { grid-template-columns: 1fr; grid-template-areas: "img" "content"; }
.feature:nth-child(even) { grid-template-areas: "img" "content"; }
.section > .container > .feature:only-child { padding: 0; }
.contact-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
.stats { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
/* The footer keeps its one shape here (Brand left, Client + Legal right) instead
of collapsing into a single left-aligned column — the old flex stack put the
whole footer against the left edge and left the right half empty. */
.footer__bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
}
/* --- Modern phones (≤430px): iPhone 13–17, Pixel 8, Samsung S24+ --- */
@media (max-width: 430px) {
.container,
.container--narrow,
.container--wide { padding: 0 var(--space-sm); }
.hero { min-height: 72vh; min-height: 72svh; }
.section { padding: var(--space-xl) 0; }
.hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-xs); width: 100%; }
.hero__actions .btn { width: 100%; justify-content: center; }
.hero__subtitle { font-size: 1rem; }
/* Same step-down as .hero__subtitle: 17px lead copy on a 390px screen read
as large as the title above it (services hero, 2026-09-08). */
.page-header__lead { font-size: 1rem; }
.stats { grid-template-columns: 1fr; }
/* --- Phone refinements (B4, B5, B7 from the audit pass) ---
.btn min-height meets WCAG 2.5.5 (44×44) for non-hero CTAs (hero CTAs
are already full-width via .hero__actions .btn above).
.page-header bottom margin tightens 64px→40px so headers don't eat
8% of the viewport for breathing room that doesn't earn its keep.
.card padding tightens 40px→24px so card text gets ~80px more
horizontal space on a 390px viewport. */
.btn { min-height: 44px; padding: 14px 24px; }
.page-header { margin-bottom: var(--space-lg); }
.card { padding: var(--space-md); }
/* B3 — feature image (External Asset Management on services, plus shared
use across the site) has aspect-ratio: 4/3; on a ~358px content width
that's a ~268px tall image which still feels chunky on phone. Cap it
so the surrounding section copy doesn't get pushed off the fold. */
.feature__image { max-height: 50vh; aspect-ratio: auto; }
.feature__image img { width: 100%; height: 100%; max-height: 50vh; object-fit: cover; }
/* B8 — contact form inputs: bump to 14px font so iOS Safari doesn't
auto-zoom on focus, with slightly tighter padding for the narrower
viewport. Labels stay readable but small enough to keep the form
compact. */
.form-group input,
.form-group textarea,
.form-group select { font-size: 14px; padding: 12px 14px; }
.form-group label { font-size: 11px; }
/* B9 — fund KPI cards: tighten padding so the numbers + labels get
~30px more horizontal room inside each card at 390px viewport. */
.card--minimal { padding: var(--space-sm) var(--space-md); }
}
/* --- Small Android safety net (≤360px) --- */
@media (max-width: 360px) {
.container,
.container--narrow,
.container--wide { padding: 0 var(--space-xs); }
.hero__label,
.label { font-size: 10px; letter-spacing: 0.22em; }
.btn { padding: 10px 16px; font-size: 10.5px; }
}
/* --- Landscape phones: short viewport, drop hero min-height --- */
@media (orientation: landscape) and (max-height: 500px) {
.hero {
min-height: auto;
padding-top: calc(var(--nav-height) + var(--space-lg));
padding-bottom: var(--space-xl);
}
.hero__badge { margin-top: var(--space-md); }
}
/* ===========================================================================
INVESTOR ENTRY GATE (FinSA classification overlay)
Moved here from home.html on 2026-08-27. The gate is now rendered IN PLACE on
every gated page instead of redirecting to home.html, so these rules must be
available site-wide. The markup is injected by js/gate.js -- this file is the
only stylesheet that needs to know about it.
=========================================================================== */
/* --- Investor entry gate as popup overlay --- */
.gate-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(28, 27, 25, 0.45);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
display: none;
align-items: flex-start;
justify-content: center;
padding: var(--space-lg);
overflow-y: auto;
}
.gate-locked .gate-overlay { display: flex; }
.gate-locked body { overflow: hidden; }
.gate-overlay .gate__card {
margin: auto;
max-width: 720px;
box-shadow: 0 30px 60px -20px rgba(28, 27, 25, 0.35);
}
/* Top intro paragraphs — always visible */
.gate__intro { text-align: left; margin-bottom: var(--space-md); }
/* Collapsible FinSA categories — closed by default */
.gate__details {
text-align: left;
margin-bottom: var(--space-md);
border: 1px solid var(--rule);
background: var(--paper-2);
}
.gate__summary {
list-style: none;
cursor: pointer;
padding: var(--space-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
transition: background var(--dur-1) var(--ease);
}
.gate__summary:hover { background: var(--paper-3); }
.gate__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gate__summary::-webkit-details-marker { display: none; }
.gate__summary::marker { content: ''; }
.gate__summary .gate__sub-heading { margin: 0; }
.gate__summary-icon {
flex-shrink: 0;
color: var(--accent);
transition: transform var(--dur-2) var(--ease);
}
.gate__details[open] .gate__summary-icon { transform: rotate(180deg); }
.gate__details-content {
padding: var(--space-md);
border-top: 1px solid var(--rule);
}
.gate__details-content > *:first-child { margin-top: 0; }
.gate__details-content > *:last-child { margin-bottom: 0; }
.gate__acceptance {
text-align: left;
font-size: 13.5px;
color: var(--ink-2);
line-height: 1.65;
margin-bottom: var(--space-lg);
}
.gate__intro p,
.gate__details-content p {
font-size: 13.5px;
color: var(--ink-2);
line-height: 1.65;
margin-bottom: var(--space-sm);
}
.gate__intro p:last-child,
.gate__details-content p:last-child { margin-bottom: 0; }
.gate__sub-heading {
font-family: var(--f-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
}
.gate__details-content ul {
list-style: none;
padding: 0;
margin: var(--space-sm) 0;
}
.gate__details-content li {
position: relative;
padding-left: 18px;
margin-bottom: 8px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.6;
}
.gate__details-content li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 1px;
background: var(--accent);
}
.gate__intro strong,
.gate__details-content strong { color: var(--ink); }
/* Phones (<=560px). The overlay's 40px padding plus the card's 64px inset left
a 180px column on an iPhone 13: the subtitle broke in two, the summary label
ran to seven lines and the enter button to three (user's screenshot,
2026-09-08). Same shell as the login cards: 16px overlay padding, 32px card
inset (24px under 360px), 32px title. The mono subtitle and summary label
lose some tracking so they hold one and three lines, the 56px gap between
subtitle and rule closes to 24px, and the button drops its side padding so
the label plus arrow stay on one line down to 360px. */
@media (max-width: 560px) {
.gate, .gate-overlay { padding: var(--space-sm); }
.gate__card { padding: var(--space-lg) var(--s-8); }
.gate__title { font-size: 2rem; }
.gate__subtitle { font-size: 10px; letter-spacing: 0.22em; margin-bottom: var(--space-xs); }
.gate__summary { padding: var(--space-sm); }
.gate__sub-heading { letter-spacing: 0.16em; }
.gate__details-content { padding: var(--space-sm); }
.gate__btn { min-height: 44px; padding-left: var(--space-sm); padding-right: var(--space-sm); }
}
@media (max-width: 360px) {
.gate__card { padding: var(--space-lg) var(--space-md); }
}