/* ============================================================ SHARED DESIGN TOKENS The base system — used by all three sites (joeldoesdata, jtmeals, caliper). Per-site overrides ride on top via [data-site="..."] attribute on or . ============================================================ */ :root { /* -------- Color: base ( dark ) -------- */ --bg-0: #000000; --bg-1: #0a0a0a; --bg-2: #111111; --bg-3: #181818; --bg-4: #222222; --ink-0: #ffffff; --ink-1: rgba(255, 255, 255, 0.92); --ink-2: rgba(255, 255, 255, 0.70); --ink-3: rgba(255, 255, 255, 0.50); --ink-4: rgba(255, 255, 255, 0.32); --ink-5: rgba(255, 255, 255, 0.16); --ink-6: rgba(255, 255, 255, 0.08); --ink-7: rgba(255, 255, 255, 0.04); --hairline: rgba(255, 255, 255, 0.10); --hairline-strong: rgba(255, 255, 255, 0.18); /* -------- Color: accent (overridden per site) -------- */ --accent: #5E9E78; /* joeldoesdata — muted sage green */ --accent-dim: rgba(94, 158, 120, 0.14); --accent-ink: rgba(94, 158, 120, 0.85); --accent-glow: rgba(94, 158, 120, 0.22); /* -------- Type -------- */ --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif; --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Scale — type */ --t-hero-1: clamp(72px, 14vw, 220px); --t-hero-2: clamp(48px, 9vw, 140px); --t-display: clamp(40px, 6vw, 88px); --t-h1: clamp(32px, 4.4vw, 56px); --t-h2: clamp(24px, 2.6vw, 34px); --t-h3: 18px; --t-body: 15px; --t-small: 13px; --t-label: 11px; --t-micro: 10px; /* -------- Spacing ( 4px base ) -------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; --section-y: clamp(40px, 6vh, 72px); --gutter: clamp(24px, 4vw, 72px); /* -------- Radius + borders -------- */ --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px; /* -------- Motion -------- */ --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-io: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 180ms; --d-med: 380ms; --d-slow: 640ms; } /* ============================================================ PER-SITE ACCENT OVERRIDES ============================================================ */ [data-site="jtmeals"] { --bg-0: #0B0805; --bg-1: #110D08; --bg-2: #17120B; --bg-3: #1E180F; --bg-4: #2A2214; --accent: #E8A857; --accent-dim: rgba(232, 168, 87, 0.14); --accent-ink: rgba(232, 168, 87, 0.88); --accent-glow: rgba(232, 168, 87, 0.30); } [data-site="caliper"] { --bg-0: #000000; --bg-1: #060709; --bg-2: #0A0C10; --bg-3: #0F1218; --bg-4: #161A22; --accent: #6BA4FF; --accent-dim: rgba(107, 164, 255, 0.14); --accent-ink: rgba(107, 164, 255, 0.90); --accent-glow: rgba(107, 164, 255, 0.32); } /* ============================================================ BASE RESET + TYPOGRAPHY ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg-0); color: var(--ink-1); font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11", "ss03"; } body { background: var(--bg-0); min-height: 100vh; overflow-x: hidden; cursor: none; } /* Allow normal cursor on touch / low-precision */ @media (hover: none), (pointer: coarse) { body { cursor: auto; } .cursor, .cursor-ring { display: none !important; } } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: none; } ::selection { background: var(--accent); color: var(--bg-0); } /* ============================================================ UTILITIES — used as shared primitives ============================================================ */ /* Section label: "01 ABOUT" */ .section-label { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; gap: var(--s-4); align-items: baseline; } .section-label .num { color: var(--ink-4); font-variant-numeric: tabular-nums; } /* Container / grid */ .shell { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); } .section { padding-top: var(--section-y); padding-bottom: var(--section-y); position: relative; } /* Card */ .card { background: var(--ink-7); border: 1px solid var(--hairline); border-radius: var(--r-2); padding: var(--s-6); transition: border-color var(--d-med) var(--e-out), background var(--d-med) var(--e-out), transform var(--d-med) var(--e-out); } .card:hover { border-color: var(--hairline-strong); background: var(--ink-6); } /* Pill / tag */ .pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); line-height: 1; } .pill--accent { color: var(--accent); border-color: var(--accent); } .pill--live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); animation: pulse 2.4s var(--e-io) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.85); } } /* Tag chip — for tech stack */ .chip { display: inline-flex; padding: 4px 10px; border-radius: var(--r-2); background: var(--ink-6); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--t-label); color: var(--ink-2); } /* Button */ .btn { display: inline-flex; align-items: center; gap: var(--s-3); padding: 14px 22px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-1); transition: all var(--d-fast) var(--e-out); cursor: none; position: relative; overflow: hidden; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn--solid { background: var(--accent); color: var(--bg-0); border-color: var(--accent); } .btn--solid:hover { background: transparent; color: var(--accent); } /* Link with arrow */ .link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-1); font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--hairline); padding-bottom: 4px; transition: all var(--d-fast) var(--e-out); } .link-arrow .arrow { transition: transform var(--d-fast) var(--e-out); display: inline-block; } .link-arrow:hover { color: var(--accent); border-color: var(--accent); } .link-arrow:hover .arrow { transform: translate(3px, -3px); } /* Hairline divider */ .hr { border: 0; border-top: 1px solid var(--hairline); } /* Grain overlay (subtle) */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--e-out), transform 800ms var(--e-out); } .reveal.is-visible { opacity: 1; transform: none; } /* Cursor */ .cursor, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transition: opacity var(--d-fast) var(--e-out); } .cursor { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; border-radius: 50%; } .cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid #fff; border-radius: 50%; transition: transform 300ms var(--e-out), width 200ms var(--e-out), height 200ms var(--e-out), margin 200ms var(--e-out), opacity var(--d-fast) var(--e-out); } body.cursor-lg .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--accent); } /* Tiny chrome: topbar with site identity */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: var(--s-5) var(--gutter); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .topbar a:hover { color: var(--accent); } .topbar .nav { display: flex; gap: var(--s-6); } /* Footer */ .site-footer { border-top: 1px solid var(--hairline); padding: var(--s-8) var(--gutter) var(--s-6); margin-top: var(--s-9); font-family: var(--font-mono); font-size: var(--t-label); color: var(--ink-3); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-4); text-transform: uppercase; letter-spacing: 0.1em; }