/* ============================================================ THE PM CODE — website design system A field manual for product judgment. Paper-first, editorial, deliberately un-corporate. Signal Blue is the one sharp accent. ============================================================ */ /* ---- Tokens : PAPER (default) ---------------------------------- */ :root { --paper: #FAFAFA; --paper-warm: #F4F4F6; --surface: #FFFFFF; --ink: #0A0A0A; --ink-soft: #2A2A30; --mute: #6B6B73; --faint: #767680; --line: #E6E6E9; --line-soft: #EFEFF1; --accent: #2563EB; /* Signal Blue — tweakable */ --accent-ink: #FFFFFF; /* text on accent */ --accent-wash:rgba(37,99,235,0.08); --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-display: 'Inter', system-ui, sans-serif; --display-weight: 800; --display-track: -0.035em; --fs-display: clamp(42px, 6.6vw, 84px); --fs-h1: clamp(32px, 4.4vw, 52px); --fs-h2: clamp(25px, 3vw, 35px); --fs-h3: 21px; --fs-lead: clamp(18px, 1.7vw, 21px); --fs-body: 17px; --fs-small: 14px; --fs-mono: 12px; --maxw: 1180px; --maxw-text: 720px; --gutter: clamp(20px, 5vw, 64px); --radius: 16px; --radius-sm: 10px; --grid-line: rgba(10,10,10,0.045); --shadow-card: 0 1px 2px rgba(10,20,60,0.04), 0 8px 30px rgba(10,20,60,0.05); --shadow-lift: 0 12px 40px rgba(10,20,60,0.12); } /* ---- Theme : EDITORIAL (warm paper + serif display) ----------- */ html[data-theme="editorial"] { --paper: #F5F2EC; --paper-warm: #ECE7DD; --surface: #FBF9F4; --line: #E2DCCF; --line-soft: #EAE5DA; --font-display: 'Newsreader', Georgia, serif; --display-weight: 600; --display-track: -0.012em; --grid-line: rgba(10,10,10,0.04); } /* ---- Theme : INK (dark) --------------------------------------- */ html[data-theme="ink"] { --paper: #0B0B0D; --paper-warm: #141418; --surface: #151519; --ink: #F4F4F5; --ink-soft: #D4D4D8; --mute: #9A9AA3; --faint: #6E6E78; --line: #26262C; --line-soft: #1E1E23; --accent-wash:rgba(79,134,255,0.12); --grid-line: rgba(255,255,255,0.05); --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 10px 36px rgba(0,0,0,0.5); --shadow-lift: 0 16px 50px rgba(0,0,0,0.6); } html[data-theme="ink"] .only-light { display: none !important; } html:not([data-theme="ink"]) .only-dark { display: none !important; } /* ---- Reset ---------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 0.4s ease, color 0.4s ease; } img, svg { display: block; max-width: 100%; } /* Overflow guardrails — no element may break the horizontal axis. `overflow-x: clip` on (above) is the single sticky-safe backstop; these stop content from ever needing it. Long words/URLs wrap, wide media/tables/code never push the page wide. */ table, pre, figure, video, iframe, canvas { max-width: 100%; } pre { overflow-x: auto; } p, li, h1, h2, h3, h4, h5, blockquote, figcaption, dd, dt { overflow-wrap: break-word; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--accent); color: var(--accent-ink); } /* page texture — subtle dotted grid reminiscent of the coming-soon page */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 0%, transparent 70%); } /* ---- Layout helpers ------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); position: relative; z-index: 1; } .wrap-text { max-width: var(--maxw-text); } .section { padding-block: clamp(56px, 8vw, 116px); position: relative; z-index: 1; } .section-tight { padding-block: clamp(40px, 5vw, 72px); } .rule { height: 1px; background: var(--line); border: 0; } .stack > * + * { margin-top: 1em; } /* ---- Type primitives ------------------------------------------ */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); } .eyebrow.on-accent { color: var(--accent); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 1.04; } .display { font-size: var(--fs-display); line-height: 1.05; } .h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); } .h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); font-weight: 400; } .mute { color: var(--mute); } .accent-text { color: var(--accent); } .balance { text-wrap: balance; } .pretty { text-wrap: pretty; } .serif-accent { font-family: 'Newsreader', Georgia, serif; } /* ---- Buttons -------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: var(--fs-small); letter-spacing: -0.005em; padding: 12px 20px; border-radius: 100px; border: 1px solid transparent; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease; white-space: nowrap; line-height: 1; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--ink); color: var(--paper); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .btn-accent { background: var(--accent); color: var(--accent-ink); } .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 12px 34px var(--accent-wash); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); background: var(--paper-warm); } .btn-lg { padding: 15px 26px; font-size: 15px; } .arrow-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--accent); font-size: var(--fs-small); } .arrow-link svg { width: 15px; height: 15px; transition: transform 0.2s ease; } .arrow-link:hover svg { transform: translateX(4px); } /* ---- Nav ------------------------------------------------------ */ .nav { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; } .nav.scrolled { background: color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .nav-logo { display: flex; align-items: center; } .nav-logo img { height: 38px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-link { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); padding: 8px 13px; border-radius: 100px; transition: background 0.15s ease, color 0.15s ease; } .nav-link:hover { background: var(--paper-warm); color: var(--ink); } .nav-link.active { color: var(--accent); font-weight: 600; } .nav-cta { margin-left: 8px; } .nav-toggle { display: none; background: none; border: 0; color: var(--ink); width: 44px; height: 44px; align-items: center; justify-content: center; } .nav-toggle svg { width: 22px; height: 22px; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink-soft); width: 36px; height: 36px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; margin-left: 2px; } .theme-toggle:hover { background: var(--paper-warm); color: var(--ink); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="ink"] .theme-toggle .icon-sun { display: block; } html[data-theme="ink"] .theme-toggle .icon-moon { display: none; } @media (max-width: 860px) { .nav-links { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px var(--gutter) 22px; box-shadow: var(--shadow-card); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: 0.2s ease; } .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-link { padding: 12px 14px; font-size: 16px; } .nav-cta { margin-left: 0; margin-top: 8px; justify-content: center; } .nav-toggle { display: inline-flex; } } /* ---- LinkedIn micro-badge ------------------------------------- */ .li-badge { width: 18px; height: 18px; border-radius: 4px; background: #0A66C2; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .li-badge svg { width: 11px; height: 11px; fill: #fff; } /* ---- Cards / surfaces ----------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); } .tag-accent { color: var(--accent); } .kicker-num { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--accent); font-weight: 500; } /* ---- Footer (dark slab — a deliberate ground to the paper page) - */ .footer { --foot-fg: rgba(255,255,255,0.62); --foot-line: rgba(255,255,255,0.12); border-top: 1px solid var(--ink); padding-block: clamp(52px, 6vw, 84px) 40px; background: #141518; color: #F4F4F5; position: relative; z-index: 1; overflow: hidden; } html[data-theme="editorial"] .footer { background: #181410; } html[data-theme="ink"] .footer { background: #0E0E11; border-top-color: var(--line); } .footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--accent), transparent 38%); opacity: 0.5; height: 2px; } .footer img.only-light { display: none !important; } .footer img.only-dark { display: block !important; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--foot-line); flex-wrap: wrap; } .footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.52); margin-bottom: 16px; } .footer p.mute { color: var(--foot-fg) !important; } .footer-links { display: flex; flex-direction: column; gap: 11px; } .footer-links a { color: var(--foot-fg); font-size: var(--fs-small); transition: color 0.15s, transform 0.15s; width: fit-content; } .footer-links a:hover { color: #fff; transform: translateX(3px); } .footer img { height: 36px; margin-bottom: 16px; } .footer-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .footer-grid > div:first-child { grid-column: 1 / -1; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } /* ---- Triad spine ---------------------------------------------- */ .triad { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); } .triad b { color: var(--ink); font-weight: 500; } .triad .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } /* ---- Reveal on scroll ----------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---- Utility -------------------------------------------------- */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-sm { gap: 10px; } .gap-md { gap: 18px; } .gap-lg { gap: 32px; } .wrap-gap { flex-wrap: wrap; } .grid { display: grid; } .mt-sm { margin-top: 14px; } .mt-md { margin-top: 28px; } .mt-lg { margin-top: 48px; } .center { text-align: center; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 16px; top: 16px; z-index: 9999; background: var(--accent); color: var(--accent-ink); padding: 12px 20px; border-radius: 8px; outline: 2px solid rgba(255,255,255,0.6); outline-offset: 0; } /* ---- Micro-interactions & polish ------------------------------ */ .btn { will-change: transform; } .btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.06s; } .btn-primary:active, .btn-accent:active { box-shadow: none; } /* nav links get an animated underline + the active page a persistent one */ .nav-link { position: relative; } .nav-link::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 0.26s cubic-bezier(.22,1,.36,1), opacity 0.2s; } .nav-link:hover::after { transform: scaleX(1); opacity: 1; } .nav-link.active::after { transform: scaleX(1); opacity: 1; } .nav-link.active { background: transparent; } /* the accent nav CTA reads as the one primary action */ .nav-cta { box-shadow: 0 1px 2px var(--accent-wash); } .nav-cta:hover { transform: translateY(-1px); } /* keyboard focus ring, never on mouse */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* arrow links: the whole label nudges, not just the glyph */ .arrow-link { transition: gap 0.2s ease; } .arrow-link:hover { gap: 11px; } /* card hover gets a hair of accent warmth */ .card-hover { will-change: transform; } /* respect reduced motion everywhere */ @media (prefers-reduced-motion: reduce) { .btn:active, .nav-cta:hover, .card-hover:hover { transform: none; } .nav-link::after { transition: none; } } @media (scripting: none) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- Newsletter full-width banner (shared across all pages) ---- */ .nl-full-band { background: var(--accent); padding: clamp(52px,7vw,88px) 0; } .nl-full-inner { text-align: center; max-width: 540px; margin: 0 auto; padding: 0 clamp(20px,5vw,40px); } .nl-logo { width: 44px; height: 44px; background: rgba(255,255,255,0.18); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; letter-spacing: -0.02em; color: #fff; margin: 0 auto 22px; } .nl-headline { font-size: clamp(24px,3.6vw,38px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 0; } .nl-sub { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 14px auto 0; max-width: 40ch; } .nl-full-band .nl-form { max-width: 440px; margin: 28px auto 0; display: flex; flex-direction: column; gap: 10px; } .nl-full-band .nl-row { display: flex; gap: 10px; align-items: stretch; } .nl-full-band .nl-input { height: 52px; border-radius: 10px; flex: 1; min-width: 0; background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.24); color: #fff; padding: 0 16px; font-size: 15px; } .nl-full-band .nl-input::placeholder { color: rgba(255,255,255,0.48); } .nl-full-band .nl-input:focus { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); outline: none; } .nl-submit { height: 52px; border-radius: 10px; padding: 0 26px; flex-shrink: 0; font-size: 15px; font-weight: 700; background: #fff; color: var(--accent); border: none; cursor: pointer; transition: background 0.15s, transform 0.15s; } .nl-submit:hover { background: rgba(255,255,255,0.92); transform: translateY(-1px); } .nl-triad { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); } .nl-triad span.sep { opacity: 0.35; } .nl-msg { font-size: 14px; margin: 10px auto 0; } .nl-msg.ok { color: rgba(180,255,200,0.92); } .nl-msg.err { color: rgba(255,200,200,0.92); } @media (max-width: 520px) { .nl-full-band .nl-row { flex-direction: column; } .nl-submit { width: 100%; } } /* Dark (Reps floor) variant */ .nl-full-band.nl-dark { background: #0A0B0E; } .nl-full-band.nl-dark .nl-logo { background: var(--accent); } .nl-full-band.nl-dark .nl-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } .nl-full-band.nl-dark .nl-input:focus { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.32); } .nl-full-band.nl-dark .nl-submit { background: var(--accent); color: #fff; } .nl-full-band.nl-dark .nl-submit:hover { background: #1d4ed8; transform: translateY(-1px); }