/* ══════════════════════════════════════════════════════════════════════════ J & A CAPITAL MANAGEMENT — styles.css Single stylesheet. Loaded once, on every page. Replaces obsidian.tokens.css · obsidian.primitives.css · landing.css · site.css. Cascade order, top to bottom: 01 · TOKENS — :root custom properties (color, type, spacing, motion) 02 · FONTS — @font-face declarations (self-hosted woff2) 03 · RESET — minimal normalize, scoped to 04 · BASE — typography defaults, prose 05 · LAYOUT — containers, grid helpers, rule, eyebrow, measure 06 · NAV — top rail (.lp-rail) 07 · LINKS — .ob-link, mask-reveal .rv layer 08 · BUTTONS — .ob-btn solid/outline/quiet, transform-only press 09 · FORMS — .ob-field / input / textarea / select / checkbox 10 · FOOTER — .ja-foot 11 · PAGE-SPECIFIC — only the truly shared bits (Landing aperture) 12 · MOTION — page fade, custom cursor 13 · A11Y — focus rings, prefers-reduced-motion 14 · COLOR — dark-only (no light fallback) ══════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────────── 01 · TOKENS Single source of truth for every visible value on the site. Components below reference these only. No literal hex / px / ms values past line ~180. ────────────────────────────────────────────────────────────────────────── */ :root { /* ── Color · field & surfaces ─────────────────────────────────────── */ --ob-field: #0B0907; /* page background, never pure black */ --ob-surface: #15110D; /* +4 L. cards, footer */ --ob-surface-raised: #1D1812; /* +8 L. modal, popover */ --ob-rule: #201A13; /* hairline divider, umber */ --ob-rule-strong: #2C241A; /* key divider inside surface */ /* ── Color · ink (alpha tiers on a single bone base) ──────────────── */ --ob-ink-base: 233, 226, 211; /* #E9E2D3 */ --ob-ink: rgb(var(--ob-ink-base)); --ob-ink-80: rgba(var(--ob-ink-base), 0.80); --ob-ink-60: rgba(var(--ob-ink-base), 0.60); --ob-ink-40: rgba(var(--ob-ink-base), 0.65); --ob-ink-20: rgba(var(--ob-ink-base), 0.20); --ob-ink-10: rgba(var(--ob-ink-base), 0.10); /* ── Color · gold (the only accent) ───────────────────────────────── */ --ob-gold: #B7995F; --ob-gold-soft: #C9AE78; /* hover */ --ob-gold-deep: #8A6F3E; /* pressed / active */ --ob-gold-20: rgba(183, 153, 95, 0.20); --ob-gold-40: rgba(183, 153, 95, 0.40); /* ── Color · semantic aliases (prefer these in components) ────────── */ --ob-bg: var(--ob-field); --ob-bg-elev-1: var(--ob-surface); --ob-bg-elev-2: var(--ob-surface-raised); --ob-text: var(--ob-ink); --ob-text-muted: var(--ob-ink-60); --ob-text-faint: var(--ob-ink-40); --ob-text-accent: var(--ob-gold); --ob-border: var(--ob-rule); --ob-border-strong: var(--ob-rule-strong); --ob-link: var(--ob-ink); --ob-link-underline: var(--ob-gold); --ob-focus-ring: var(--ob-gold); /* ── Type · families (self-hosted, see §02) ───────────────────────── */ --ob-font-display: 'Instrument Serif', 'Cormorant Garamond', ui-serif, Georgia, serif; --ob-font-text: 'Cormorant Garamond', 'Times New Roman', ui-serif, Georgia, serif; --ob-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Type · fluid display scale (clamp continuous 360 → 1920) ─────── */ --ob-fs-d1: clamp(4.5rem, 2.8rem + 4.8vw, 8rem); /* 72→128 */ --ob-fs-d2: clamp(3rem, 2.1rem + 2.8vw, 4.5rem); /* 48→72 */ --ob-fs-d3: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); /* 32→44 */ --ob-lh-d1: 0.98; --ob-lh-d2: 1.06; --ob-lh-d3: 1.1; --ob-tr-d1: -0.018em; --ob-tr-d2: -0.012em; --ob-tr-d3: -0.008em; /* ── Type · text scale ────────────────────────────────────────────── */ --ob-fs-lede: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); /* 20→24 */ --ob-fs-body: clamp(1.0625rem, 1rem + 0.22vw, 1.1875rem); /* 17→19 */ --ob-fs-body-sm: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem); /* 15→17 */ --ob-lh-lede: 1.5; --ob-lh-body: 1.58; --ob-lh-body-sm: 1.55; /* ── Type · small caps & mono (fixed sizes, never fluid) ──────────── */ --ob-fs-sc: 0.8125rem; /* 13 */ --ob-fs-sc-lg: 1rem; /* 16 · section labels */ --ob-fs-mono: 0.6875rem; /* 11 */ --ob-tr-sc: 0.28em; --ob-tr-mono: 0.18em; /* ── Type · weights & feature settings ────────────────────────────── */ --ob-w-display: 400; --ob-w-text: 400; --ob-w-mono: 300; --ob-w-sc: 500; --ob-ff-default: "lnum" 0, "onum" 1, "dlig" 1, "kern" 1; /* ── Spacing · 8pt grid (half-steps for optical 1px tuning only) ──── */ --ob-s-0-5: 0.25rem; /* 4 optical */ --ob-s-1: 0.5rem; /* 8 base */ --ob-s-2: 1rem; /* 16 */ --ob-s-3: 1.5rem; /* 24 */ --ob-s-4: 2rem; /* 32 */ --ob-s-5: 2.5rem; /* 40 */ --ob-s-6: 3rem; /* 48 */ --ob-s-8: 4rem; /* 64 */ --ob-s-10: 5rem; /* 80 */ --ob-s-12: 6rem; /* 96 */ --ob-s-14: 7rem; /* 112 */ --ob-s-16: 8rem; /* 128 */ /* ── Spacing · fluid page gutters & measure ───────────────────────── */ --ob-gutter: clamp(1.5rem, 1rem + 2.5vw, 4.5rem); --ob-gutter-section: clamp(4rem, 3rem + 5vw, 10rem); --ob-measure: 52ch; --ob-measure-narrow: 36ch; /* ── Radii (Obsidian is architectural — radii are nearly nothing) ── */ --ob-r-2: 2px; --ob-r-3: 4px; --ob-r-disc: 50%; /* aperture, avatar disc */ /* ── Shadows · warm-toned ramp (never cool) ───────────────────────── */ --ob-glow-gold: 0 0 120px -20px rgba(183, 153, 95, 0.35); /* ── Motion · named durations + easings ───────────────────────────── */ --ob-d-instant: 80ms; --ob-d-micro: 180ms; --ob-d-quick: 240ms; --ob-d-base: 400ms; --ob-e-out: cubic-bezier(0.22, 1.00, 0.36, 1.00); --ob-e-draw: cubic-bezier(0.76, 0.00, 0.24, 1.00); /* ── Layout primitives ────────────────────────────────────────────── */ --ob-z-nav: 40; --ob-hairline: 1px solid var(--ob-rule); --ob-focus: 0 0 0 2px var(--ob-field), 0 0 0 3px var(--ob-focus-ring); } /* ────────────────────────────────────────────────────────────────────────── 02 · FONTS — sourced via the Google Fonts in each page . To self-host, drop woff2s at /assets/fonts/ and reinstate @font-face declarations here for Instrument Serif, Cormorant Garamond, and JetBrains Mono in the weights/styles actually used. ────────────────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────────────────── 03 · RESET — minimal, scoped to Universal box-sizing, clean margins, no list bullets where we render

, rely on document defaults that the typography layer overrides explicitly. ────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--ob-bg); color: var(--ob-text); font-family: var(--ob-font-text); font-feature-settings: var(--ob-ff-default); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--ob-gold-20); color: var(--ob-ink); } /* ────────────────────────────────────────────────────────────────────────── 04 · BASE TYPOGRAPHY — defaults; primitives below override per-component ────────────────────────────────────────────────────────────────────────── */ body { font-size: var(--ob-fs-body); line-height: var(--ob-lh-body); } em { font-style: italic; } em.gold, .gold { color: var(--ob-gold); } /* ────────────────────────────────────────────────────────────────────────── 05 · LAYOUT PRIMITIVES — section, eyebrow, measure helpers ────────────────────────────────────────────────────────────────────────── */ .ob-measure { max-width: var(--ob-measure); } /* ────────────────────────────────────────────────────────────────────────── 06 · NAV — top rail Flex (not grid) so each cell can shrink; eyebrow drops out below 1100px before squeezing the wordmark or the contact link off the page. ────────────────────────────────────────────────────────────────────────── */ .lp-rail { /* 3-col grid: outer columns are 1fr each so they balance, mid is auto. This puts the mid's left/right edges at the same distance from the viewport center as the opposite outer column's inner edge — i.e., the mid is centered on the viewport, not on the residual space between mark and rail-right (which is asymmetric because the nav stack is wider than the J & A mark). */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--ob-s-6); padding: var(--ob-s-4) var(--ob-gutter); position: relative; z-index: var(--ob-z-nav); } .lp-rail > .lp-mark { justify-self: start; } .lp-rail > .lp-railmid { justify-self: center; } .lp-rail > .lp-railright { justify-self: end; } .lp-mark { flex: 0 0 auto; display: inline-flex; gap: 10px; align-items: baseline; font-family: var(--ob-font-display); font-size: 1.6rem; letter-spacing: 0.14em; color: var(--ob-text); white-space: nowrap; } .lp-mark .amp { color: var(--ob-gold); font-style: italic; } .lp-railmid { text-align: center; font-family: var(--ob-font-mono); font-weight: var(--ob-w-mono); font-size: var(--ob-fs-mono); letter-spacing: var(--ob-tr-mono); text-transform: uppercase; color: var(--ob-text-faint); white-space: nowrap; } .lp-railright { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--ob-s-3); white-space: nowrap; } .lp-railright a[aria-current="page"] { color: var(--ob-text-faint); pointer-events: none; cursor: default; } .lp-railright a[aria-current="page"]::after { display: none; } @media (max-width: 480px) { .lp-railright { gap: var(--ob-s-2); font-size: 0.92em; } } @media (max-width: 1100px) { .lp-railmid { display: none; } .lp-rail { grid-template-columns: 1fr auto; } } @media (max-width: 560px) { .lp-rail { gap: var(--ob-s-3); padding: var(--ob-s-3) var(--ob-s-5); } .lp-mark { font-size: 1.35rem; } } /* ────────────────────────────────────────────────────────────────────────── 07 · LINKS .ob-link — italic with a gold hairline that draws L→R on hover .rv — mask-reveal (text-replacement on hover); used by site.js wrapper. Reduced-motion fallback near the bottom. ────────────────────────────────────────────────────────────────────────── */ .ob-link { position: relative; display: inline-block; font-style: italic; font-family: inherit; font-weight: var(--ob-w-text); color: var(--ob-link); padding-bottom: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ob-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ob-link-underline); transform: scaleX(0); transform-origin: right center; transition: transform var(--ob-d-quick) var(--ob-e-draw); } .ob-link:hover::after, .ob-link:focus-visible::after { transform: scaleX(1); transform-origin: left center; } .ob-link:focus-visible { outline: none; color: var(--ob-text-accent); } /* iOS / Safari renders bare arrow Unicode (↗ → ↓) as colored emoji from Apple Color Emoji. font-variant-emoji: text forces monochrome glyphs on Safari 16.4+ and Firefox 108+; the U+FE0E variation selector after each arrow character covers older versions. */ .lp-cta-arrow, .ob-btn__arrow, .ob-select__chevron, .ob-link--arrow::before { font-variant-emoji: text; } .ob-link--arrow::before { content: '\2197\FE0E'; display: inline-block; margin-right: 0.3em; color: var(--ob-text-accent); font-style: normal; font-variant-emoji: text; transform: translateY(-1px); transition: transform var(--ob-d-quick) var(--ob-e-out); } .ob-link--arrow:hover::before { transform: translate(2px, -3px); } /* Mask-reveal layer (.rv) — wrapper applied by site.js */ .rv { position: relative; display: inline-flex; overflow: hidden; line-height: inherit; color: inherit; background-image: linear-gradient(var(--ob-border), var(--ob-border)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-image 300ms ease-out; cursor: pointer; } .rv > .rv__rest, .rv > .rv__hover { display: inline-block; transition: clip-path 420ms cubic-bezier(0.76, 0, 0.24, 1), transform 420ms cubic-bezier(0.76, 0, 0.24, 1); will-change: clip-path, transform; } .rv > .rv__rest { clip-path: inset(0 0 0 0); } .rv > .rv__hover { position: absolute; left: 0; top: 0; color: var(--ob-gold); clip-path: inset(100% 0 0 0); transform: translateY(0.08em); pointer-events: none; } .rv:hover, .rv:focus-visible { background-image: linear-gradient(var(--ob-gold), var(--ob-gold)); } .rv:hover > .rv__rest, .rv:focus-visible > .rv__rest { clip-path: inset(0 0 100% 0); transform: translateY(-0.08em); } .rv:hover > .rv__hover, .rv:focus-visible > .rv__hover { clip-path: inset(0 0 0 0); transform: translateY(0); } /* ────────────────────────────────────────────────────────────────────────── 08 · BUTTONS — solid (one CTA per page), outline, quiet Press is transform-only. No color shift on press. ────────────────────────────────────────────────────────────────────────── */ .ob-btn { --_fg: var(--ob-ink); --_bg: transparent; --_bd: transparent; display: inline-flex; align-items: center; gap: var(--ob-s-2); padding: 0.8em 1.6em; font-family: var(--ob-font-text); font-weight: var(--ob-w-sc); font-variant: small-caps; letter-spacing: var(--ob-tr-sc); font-size: var(--ob-fs-sc-lg); font-feature-settings: var(--ob-ff-default); color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--ob-r-3); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--ob-d-quick) var(--ob-e-out), color var(--ob-d-quick) var(--ob-e-out), border-color var(--ob-d-quick) var(--ob-e-out), transform var(--ob-d-micro) var(--ob-e-out); } .ob-btn:focus-visible { outline: none; box-shadow: var(--ob-focus); } .ob-btn:active { transform: translateY(1px) scale(0.985); } .ob-btn[disabled], .ob-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; } .ob-btn--solid { --_fg: var(--ob-field); --_bg: var(--ob-gold); --_bd: var(--ob-gold); } .ob-btn--solid:hover { --_bg: var(--ob-gold-soft); --_bd: var(--ob-gold-soft); } .ob-btn--solid:active { --_bg: var(--ob-gold-deep); --_bd: var(--ob-gold-deep); } .ob-btn--outline { --_fg: var(--ob-text); --_bd: var(--ob-border-strong); } .ob-btn--outline:hover { --_bd: var(--ob-gold); --_fg: var(--ob-gold-soft); } .ob-btn--outline:active { --_bd: var(--ob-gold-deep); --_fg: var(--ob-gold-deep); } .ob-btn--quiet { --_fg: var(--ob-text-muted); padding-left: 0; padding-right: 0; border-radius: 0; } .ob-btn--quiet:hover { --_fg: var(--ob-text); } /* ────────────────────────────────────────────────────────────────────────── 09 · FORMS — field wrapper, input, textarea, select, checkbox Transparent inputs with bottom hairline. Gold line on focus. ────────────────────────────────────────────────────────────────────────── */ .ob-field { display: flex; flex-direction: column; gap: var(--ob-s-1); min-width: 0; } .ob-field__label { font-family: var(--ob-font-text); font-weight: var(--ob-w-sc); font-variant: small-caps; letter-spacing: var(--ob-tr-sc); font-size: var(--ob-fs-sc); color: var(--ob-text-accent); } .ob-field__label .opt { margin-left: 0.6em; color: var(--ob-text-faint); font-variant: small-caps; letter-spacing: var(--ob-tr-sc); } .ob-field__caption { font-family: var(--ob-font-mono); font-weight: var(--ob-w-mono); font-size: var(--ob-fs-mono); letter-spacing: var(--ob-tr-mono); text-transform: uppercase; color: var(--ob-text-faint); } .ob-field__error { font-family: var(--ob-font-text); font-style: italic; font-size: var(--ob-fs-body-sm); color: var(--ob-gold-soft); } .ob-input, .ob-textarea { width: 100%; font: inherit; font-family: var(--ob-font-text); font-size: var(--ob-fs-body); line-height: var(--ob-lh-body); color: var(--ob-text); background: transparent; border: 0; border-bottom: 1px solid var(--ob-border-strong); border-radius: 0; padding: var(--ob-s-2) 0 var(--ob-s-1); outline: none; caret-color: var(--ob-gold); transition: border-color var(--ob-d-quick) var(--ob-e-out), color var(--ob-d-quick) var(--ob-e-out); } .ob-textarea { min-height: 7rem; resize: vertical; } .ob-input::placeholder, .ob-textarea::placeholder { color: var(--ob-text-faint); font-style: italic; } .ob-input:hover, .ob-textarea:hover { border-bottom-color: var(--ob-ink-40); } .ob-input:focus, .ob-textarea:focus { border-bottom-color: var(--ob-gold); } .ob-input:disabled, .ob-textarea:disabled { color: var(--ob-text-faint); border-bottom-color: var(--ob-border); cursor: not-allowed; } .ob-field[data-invalid="true"] .ob-input, .ob-field[data-invalid="true"] .ob-textarea { border-bottom-color: var(--ob-gold-soft); } /* Select — native, with a gold chevron sibling */ .ob-select { position: relative; display: block; } .ob-select__native { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; font: inherit; font-family: var(--ob-font-text); font-size: var(--ob-fs-body); line-height: var(--ob-lh-body); color: var(--ob-text); background: transparent; border: 0; border-bottom: 1px solid var(--ob-border-strong); border-radius: 0; padding: var(--ob-s-2) var(--ob-s-4) var(--ob-s-1) 0; cursor: pointer; outline: none; transition: border-color var(--ob-d-quick) var(--ob-e-out); } .ob-select__native:hover { border-bottom-color: var(--ob-ink-40); } .ob-select__native:focus { border-bottom-color: var(--ob-gold); } .ob-select__native:disabled { color: var(--ob-text-faint); cursor: not-allowed; } .ob-select__native option { background: var(--ob-bg-elev-2); color: var(--ob-text); } .ob-select__chevron { position: absolute; right: 4px; top: 50%; transform: translateY(-40%); pointer-events: none; color: var(--ob-gold); transition: transform var(--ob-d-quick) var(--ob-e-out); } .ob-select__native:focus ~ .ob-select__chevron { transform: translateY(-30%); } /* Checkbox — visually-hidden native input + drawn box + animated tick */ .ob-check { display: inline-flex; align-items: flex-start; gap: var(--ob-s-2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .ob-check__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .ob-check__box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ob-border-strong); border-radius: var(--ob-r-2); transition: border-color var(--ob-d-quick) var(--ob-e-out), background var(--ob-d-quick) var(--ob-e-out); } .ob-check__tick { width: 12px; height: 12px; fill: none; stroke: var(--ob-field); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--ob-d-base) var(--ob-e-draw); } .ob-check__label { font-family: var(--ob-font-text); font-size: var(--ob-fs-body-sm); line-height: var(--ob-lh-body-sm); color: var(--ob-text); user-select: none; } .ob-check__label em { font-style: italic; color: var(--ob-text-accent); } .ob-check:hover .ob-check__box { border-color: var(--ob-ink-40); } .ob-check__native:focus-visible + .ob-check__box { box-shadow: var(--ob-focus); } .ob-check__native:checked + .ob-check__box { background: var(--ob-gold); border-color: var(--ob-gold); } .ob-check__native:checked + .ob-check__box .ob-check__tick { stroke-dashoffset: 0; } .ob-check__native:disabled + .ob-check__box { opacity: 0.4; cursor: not-allowed; } /* ────────────────────────────────────────────────────────────────────────── 10 · FOOTER — .ja-foot, shared across all pages Wordmark + sitemap + legal links + disclaimer strip + colophon. No social, no newsletter. ────────────────────────────────────────────────────────────────────────── */ .ja-foot { margin-top: 0; background: transparent; border-top: 1px solid var(--ob-border); } .ja-foot__inner { max-width: 1180px; margin: 0 auto; padding: var(--ob-s-10) var(--ob-gutter) var(--ob-s-4); } /* Top: single broken-gold rule echoing the site vocabulary */ .ja-foot__rule { height: 1px; margin-bottom: var(--ob-s-8); background: linear-gradient(90deg, var(--ob-gold) 0%, var(--ob-gold) 58%, var(--ob-gold-deep) 58%, var(--ob-gold-deep) 64%, transparent 64%); opacity: 0.7; } .ja-foot__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--ob-s-10); margin-bottom: var(--ob-s-10); } .ja-foot__brand { display: flex; flex-direction: column; gap: var(--ob-s-3); } .ja-foot__mark { font-family: var(--ob-font-display); font-weight: var(--ob-w-display); font-size: 1.9rem; letter-spacing: 0.14em; line-height: 1; color: var(--ob-text); white-space: nowrap; } .ja-foot__mark .amp { color: var(--ob-gold); font-style: italic; } .ja-foot__tagline { margin: 0; max-width: 34ch; font-family: var(--ob-font-text); font-style: italic; font-size: var(--ob-fs-body-sm); line-height: 1.5; color: var(--ob-text-muted); } .ja-foot__tagline em { color: var(--ob-gold); font-style: italic; } .ja-foot__col h5 { margin: 0 0 var(--ob-s-3); font-family: var(--ob-font-text); font-weight: var(--ob-w-sc); font-variant: small-caps; letter-spacing: var(--ob-tr-sc); font-size: var(--ob-fs-sc); color: var(--ob-text-accent); } .ja-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ja-foot__col a { display: inline-block; padding-bottom: 1px; font-family: var(--ob-font-text); font-size: var(--ob-fs-body-sm); color: var(--ob-text); white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color var(--ob-d-quick), color var(--ob-d-quick); } .ja-foot__col a:hover { border-bottom-color: var(--ob-gold); } /* Disclaimer strip */ .ja-foot__disclaimer { max-width: 78ch; margin: 0 0 var(--ob-s-6); padding: var(--ob-s-4) 0; border-top: 1px solid var(--ob-border); border-bottom: 1px solid var(--ob-border); font-family: var(--ob-font-text); font-size: 12.5px; /* fixed: legal copy needs a stable measure */ line-height: 1.65; color: var(--ob-text-muted); } .ja-foot__disclaimer em { color: var(--ob-text); font-style: italic; } /* Bottom meta row */ .ja-foot__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ob-s-4); font-family: var(--ob-font-mono); font-weight: var(--ob-w-mono); font-size: var(--ob-fs-mono); letter-spacing: var(--ob-tr-mono); text-transform: uppercase; color: var(--ob-text-faint); } .ja-foot__meta .seal { display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--ob-gold); transform: translateY(-1px); } .ja-foot__legal { display: flex; gap: var(--ob-s-4); } .ja-foot__legal a { color: var(--ob-text-faint); transition: color var(--ob-d-quick); } .ja-foot__legal a:hover { color: var(--ob-gold); } /* Closing italic line — quiet, centered */ .ja-foot__closing { margin-top: var(--ob-s-5); padding-top: var(--ob-s-5); border-top: 1px solid var(--ob-border); text-align: center; font-family: var(--ob-font-text); font-style: italic; font-size: 13px; letter-spacing: 0.02em; color: var(--ob-text-muted); } .ja-foot__closing em { color: var(--ob-gold); font-style: italic; } @media (max-width: 760px) { .ja-foot__top { grid-template-columns: 1fr; gap: var(--ob-s-6); } .ja-foot__meta { flex-direction: column; align-items: flex-start; gap: var(--ob-s-3); } } @media (max-width: 560px) { .ja-foot__inner { padding-left: 22px; padding-right: 22px; } } @media (max-width: 380px) { .ja-foot__inner { padding-left: 18px; padding-right: 18px; } } /* ────────────────────────────────────────────────────────────────────────── 11 · PAGE-SPECIFIC — Landing aperture & hero Genuinely shared at this layer because the aperture is the brand mark on the cover; per-page (firm/contact/legal/404) layout stays inline. ────────────────────────────────────────────────────────────────────────── */ .ob-landing { position: relative; } .ob-landing--cover { min-height: 100vh; } .lp-aperture-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, 64vw); aspect-ratio: 1 / 1; pointer-events: none; z-index: 0; } .lp-aperture { position: absolute; inset: 0; border-radius: var(--ob-r-disc); background: radial-gradient(circle at 50% 50%, rgba(183, 153, 95, 0.22) 0%, rgba(183, 153, 95, 0.14) 22%, rgba(183, 153, 95, 0.05) 48%, rgba(183, 153, 95, 0.00) 66%); filter: blur(0.5px); } .lp-aperture-rim { position: absolute; inset: 10%; border-radius: var(--ob-r-disc); border: 1px solid rgba(183, 153, 95, 0.28); box-shadow: var(--ob-glow-gold); mix-blend-mode: screen; } .lp-aperture-antidisc { position: absolute; inset: 18%; border-radius: var(--ob-r-disc); background: radial-gradient(circle at 48% 55%, rgba(11, 9, 7, 0.55) 0%, rgba(11, 9, 7, 0.22) 42%, rgba(11, 9, 7, 0.00) 72%); } .lp-aperture-grain { position: absolute; inset: 0; border-radius: var(--ob-r-disc); opacity: 0.08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .lp-hero { position: relative; z-index: 2; isolation: isolate; min-height: calc(100vh - 88px); padding: var(--ob-s-10) var(--ob-gutter) var(--ob-s-12); display: flex; flex-direction: column; justify-content: center; } .lp-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; } .lp-eyebrow { margin: 0 0 var(--ob-s-5); font-family: var(--ob-font-text); font-weight: var(--ob-w-sc); font-variant: small-caps; letter-spacing: 0.34em; font-size: var(--ob-fs-sc); color: var(--ob-gold); } .lp-head { margin: 0; max-width: 18ch; font-family: var(--ob-font-display); font-weight: 400; font-size: var(--ob-fs-d1); line-height: var(--ob-lh-d1); letter-spacing: var(--ob-tr-d1); color: var(--ob-text); } .lp-head em { font-style: italic; color: var(--ob-gold); } .lp-caret { display: inline-block; width: 4px; height: 0.82em; margin-left: 6px; vertical-align: -0.08em; background: var(--ob-text); } .lp-cta { margin-top: clamp(3rem, 2rem + 2vw, 5rem); display: inline-flex; align-items: center; gap: var(--ob-s-3); } .lp-cta-label { font-family: var(--ob-font-text); font-weight: var(--ob-w-sc); font-variant: small-caps; letter-spacing: var(--ob-tr-sc); font-size: var(--ob-fs-sc); color: var(--ob-gold); } .lp-cta-rule { width: var(--ob-s-8); height: 1px; background: var(--ob-gold); } .lp-cta-link { font-family: var(--ob-font-display); font-style: italic; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); color: var(--ob-text); } .lp-cta-arrow { margin-left: 0.25em; color: var(--ob-gold); font-style: normal; } /* ────────────────────────────────────────────────────────────────────────── 12 · MOTION — page fade + custom cursor ────────────────────────────────────────────────────────────────────────── */ /* Page fade (out only, on same-origin nav). site.js sets html.page-leaving */ html.page-leaving body { opacity: 0; transform: translateY(-2px); transition: opacity 260ms ease-in, transform 260ms ease-in; } /* Press feedback — applies to interactive controls without a no-press flag */ .ob-btn, button:not([data-no-press]), .lp-cta-link { transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1), background-color var(--ob-d-quick) var(--ob-e-out), color var(--ob-d-quick) var(--ob-e-out), border-color var(--ob-d-quick) var(--ob-e-out); transform-origin: center; } button:not([data-no-press]):active, .lp-cta-link:active { transform: translateY(1px) scale(0.985); transition-duration: 80ms; } /* Custom cursor — gold dot trailing the pointer; expands on hover */ .cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 999px; background: var(--ob-gold); pointer-events: none; z-index: 9999; opacity: 0; /* revealed by site.js after first mousemove */ transform: translate(-50%, -50%); transition: width var(--ob-d-quick) var(--ob-e-out), height var(--ob-d-quick) var(--ob-e-out), background var(--ob-d-quick) var(--ob-e-out), border-color var(--ob-d-quick) var(--ob-e-out), opacity var(--ob-d-quick) var(--ob-e-out); will-change: transform; } .cursor[data-state="ready"] { opacity: 1; } .cursor[data-state="hover"] { width: 28px; height: 28px; background: transparent; border: 1px solid var(--ob-gold); box-shadow: 0 0 12px rgba(197, 158, 99, 0.25); } .cursor[data-state="text"] { width: 2px; height: 18px; border-radius: 0; background: var(--ob-gold); } .cursor[data-state="press"] { width: 18px; height: 18px; background: var(--ob-gold); border: 0; } html.has-cursor, html.has-cursor * { cursor: none !important; } html.has-cursor input, html.has-cursor textarea, html.has-cursor [contenteditable="true"] { cursor: text !important; } /* ────────────────────────────────────────────────────────────────────────── 13 · ACCESSIBILITY — focus ring + reduced-motion fallbacks ────────────────────────────────────────────────────────────────────────── */ /* Universal focus-visible: gold hairline + soft halo. Suppress non-keyboard focus rings (the :focus-visible polyfill is native in evergreen browsers). */ :where(a, button, [role="button"], input, textarea, select, [tabindex]):focus-visible { outline: 1px solid var(--ob-gold); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(197, 158, 99, 0.12), 0 0 0 1px var(--ob-rule) inset; transition: outline-offset var(--ob-d-micro) var(--ob-e-out), box-shadow var(--ob-d-micro) var(--ob-e-out); } .ob-input:focus-visible, .ob-textarea:focus-visible, .ob-select__native:focus-visible { box-shadow: 0 0 0 3px rgba(197, 158, 99, 0.10); } :where(a, button, [role="button"], input, textarea, select, [tabindex]):focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { /* Kill named durations across the system */ :root { --ob-d-instant: 1ms; --ob-d-micro: 1ms; --ob-d-quick: 1ms; --ob-d-base: 1ms; --ob-e-out: linear; --ob-e-draw: linear; } /* Page fade: no */ html.page-leaving body { opacity: 1 !important; transform: none !important; transition: none !important; } /* Mask-reveal: collapse to a simple gold flip */ .rv > .rv__rest, .rv > .rv__hover { transition: none !important; } .rv:hover > .rv__rest, .rv:focus-visible > .rv__rest { clip-path: inset(0 0 0 0); transform: none; } .rv:hover > .rv__hover, .rv:focus-visible > .rv__hover { display: none; } .rv:hover, .rv:focus-visible { color: var(--ob-gold); background-image: linear-gradient(var(--ob-gold), var(--ob-gold)); } /* Press: no */ .ob-btn:active, button:not([data-no-press]):active, .lp-cta-link:active { transform: none; } /* Custom cursor: hide */ .cursor { display: none !important; } html.has-cursor, html.has-cursor * { cursor: auto !important; } } /* Touch devices: no custom cursor, no mask-reveal hover */ @media (hover: none) { .cursor { display: none !important; } html.has-cursor, html.has-cursor * { cursor: auto !important; } .rv > .rv__hover { display: none; } .rv:hover > .rv__rest { clip-path: inset(0 0 0 0); transform: none; } } /* ────────────────────────────────────────────────────────────────────────── 14 · COLOR SCHEME Dark-mode only by design. We don't ship a light fallback — the brand reads "private investment firm at midnight" and a paper variant undermines it. on each page tells the UA not to invert form controls in light-OS environments. ────────────────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────────────────── 15 · MOBILE TIGHTENING ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 760px) { .lp-hero { min-height: calc(100svh - 64px); padding: var(--ob-s-7) var(--ob-gutter) var(--ob-s-8); } .lp-eyebrow { margin-bottom: var(--ob-s-4); } .lp-cta { margin-top: var(--ob-s-7); } .ja-foot__inner { padding-top: var(--ob-s-7); padding-bottom: var(--ob-s-4); } } @media (max-width: 560px) { .lp-head { font-size: clamp(40px, 11vw, 56px); line-height: 1.06; max-width: 14ch; } .lp-eyebrow { font-size: 11px; letter-spacing: 0.28em; } .lp-aperture-wrap { width: min(620px, 88vw); } /* align hero gutter with header rail (.lp-rail uses --ob-s-5 at this width) */ .lp-hero { padding-left: var(--ob-s-5); padding-right: var(--ob-s-5); } /* CTA wraps cleanly on narrow widths; rule hidden when stacked */ .lp-cta { flex-wrap: wrap; row-gap: var(--ob-s-2); column-gap: var(--ob-s-3); } .lp-cta-rule { display: none; } } @media (max-width: 480px) { .lp-hero { padding: var(--ob-s-5) var(--ob-s-5) var(--ob-s-6); } .lp-eyebrow { margin-bottom: var(--ob-s-3); } .lp-cta { margin-top: var(--ob-s-6); } .lp-head { font-size: clamp(34px, 10vw, 44px); line-height: 1.08; max-width: 13ch; } }