/* ═══════════════════════════════════════════════════════════════════ CASA g. · DESIGN SYSTEM · v1.0 Public brand: Casa g. · Operational mark: g. Shared across bajczman.com, /pitch, /ds, /os, /kairos. Copy-pasteable. No external JS. Theme: add [data-theme="dark"] to for dark mode. ═══════════════════════════════════════════════════════════════════ */ /* Fonts imported via on each page: Fraunces (serif) + Inter Tight (sans) + JetBrains Mono (mono) */ :root { /* ─── COLOR · LIGHT (default) — warm paper + ink ─── */ --bg: #f3ebd9; --surface: #faf5e8; --surface-elev: #ffffff; --border: #d9c9a7; --border-strong: #8a6d3f; --text: #1b1613; --text-muted: #5c4a3a; --text-subtle: #8a7560; --accent: #a8341f; --accent-hover: #8b2919; --accent-active: #6d1f13; --accent-soft: #f4dcd5; --success: #5c7a3a; --success-soft: #e3ead3; --danger: #a8341f; --danger-soft: #f4dcd5; --warning: #b8893a; --warning-soft: #f3e8cc; --product-dark: #2a4a3a; --product-oracle: #4a3a6b; --product-kairos: #a8341f; /* ─── SPACING ─── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; /* ─── RADIUS ─── */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-full: 9999px; /* ─── TYPE ─── */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --text-xs: 11px; --text-sm: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 34px; --text-3xl: 56px; --text-4xl: 88px; --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── SHADOWS ─── */ --shadow-sm: 0 1px 2px rgba(27,22,19,0.06), 0 1px 1px rgba(27,22,19,0.04); --shadow-md: 0 4px 12px rgba(27,22,19,0.08), 0 2px 4px rgba(27,22,19,0.04); --shadow-lg: 0 16px 40px rgba(27,22,19,0.14), 0 4px 12px rgba(27,22,19,0.06); /* ─── MOTION ─── */ --ease: cubic-bezier(.2,.7,.3,1); --duration: 180ms; } [data-theme="dark"] { --bg: #1a1411; --surface: #241d18; --surface-elev: #2e251f; --border: #3d3025; --border-strong: #6b513a; --text: #f3ebd9; --text-muted: #c8b79a; --text-subtle: #8a7560; --accent: #d4593f; --accent-hover: #e06a50; --accent-active: #b8482f; --accent-soft: #3d251f; --success: #8fa868; --success-soft: #2a3520; --danger: #d4593f; --danger-soft: #3d251f; --warning: #d4a95a; --warning-soft: #3a2f1c; --product-dark: #6ba085; --product-oracle: #8b6bb8; --product-kairos: #d4593f; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.2); --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2); --shadow-lg: 0 16px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); } /* ═══════════════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--duration), color var(--duration); } ::selection { background: var(--accent); color: #fff; } a { color: var(--accent); text-decoration: none; transition: color var(--duration); } a:hover { color: var(--accent-hover); } .caption { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); } .mono { font-family: var(--font-mono); } .serif { font-family: var(--font-serif); } .italic { font-style: italic; } .accent { color: var(--accent); } .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } /* Page layout helpers */ .page { max-width: 1180px; margin: 0 auto; padding: var(--space-7) var(--space-6) var(--space-8); } .row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } @media (max-width: 720px) { .row-2, .row-3 { grid-template-columns: 1fr; } .page { padding: var(--space-5) var(--space-4) var(--space-7); } } /* ═══════════════════════════════════════════════════════════════════ TOP CHROME (sticky header) ═══════════════════════════════════════════════════════════════════ */ .chrome { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .chrome__brand { display: flex; align-items: center; gap: var(--space-3); } .chrome__brand-name { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text); letter-spacing: -0.01em; } .chrome__nav { display: flex; gap: var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--text-subtle); } .chrome__nav a { color: var(--text-subtle); text-decoration: none; } .chrome__nav a:hover, .chrome__nav a.is-active { color: var(--accent); } .theme-toggle { appearance: none; -webkit-appearance: none; background: transparent; color: var(--text); border: 1px solid var(--border); padding: 6px 14px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; cursor: pointer; transition: all var(--duration); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* ═══════════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════════ */ .hero { padding: var(--space-8) 0 var(--space-7); border-bottom: 1px solid var(--border); } .hero__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.24em; color: var(--accent); margin-bottom: var(--space-4); } .hero__title { font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: var(--weight-normal); line-height: 0.96; letter-spacing: -0.03em; margin: 0 0 var(--space-4); max-width: 14ch; } .hero__title em { font-style: italic; font-weight: var(--weight-medium); color: var(--accent); position: relative; white-space: nowrap; } .hero__title em svg { position: absolute; left: 0; bottom: -7px; width: 100%; height: 11px; overflow: visible; } .hero__lede { font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.5; color: var(--text-muted); max-width: 60ch; font-weight: var(--weight-normal); } .hero__meta { display: flex; gap: var(--space-5); margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--text-subtle); flex-wrap: wrap; } @media (max-width: 720px) { .hero__title { font-size: var(--text-3xl); } } /* ═══════════════════════════════════════════════════════════════════ SECTION ═══════════════════════════════════════════════════════════════════ */ .sec { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); } .sec__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; } .sec__number { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; color: var(--text-subtle); } .sec__title { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: -0.015em; margin: 0; line-height: 1.05; } .sec__subtitle { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); font-size: var(--text-md); max-width: 420px; } /* ═══════════════════════════════════════════════════════════════════ CARDS · Engine / Product / Page cards for landing ═══════════════════════════════════════════════════════════════════ */ .engine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } @media (max-width: 960px) { .engine-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .engine-grid { grid-template-columns: 1fr; } } .engine { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; transition: all var(--duration) var(--ease); min-height: 200px; } .engine:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .engine--soon { opacity: 0.62; cursor: default; } .engine--soon:hover { transform: none; box-shadow: none; border-color: var(--border); } .engine__top { display: flex; align-items: center; gap: var(--space-3); } .engine__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-subtle); text-transform: uppercase; } .engine__name { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: -0.01em; margin: 0; color: var(--text); } .engine__desc { font-family: var(--font-serif); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin: 0; } .engine__link { margin-top: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); letter-spacing: 0.06em; display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3); border-top: 1px solid var(--border); text-transform: uppercase; } .engine--soon .engine__link { color: var(--text-subtle); } /* ═══════════════════════════════════════════════════════════════════ BUTTON ═══════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 20px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all var(--duration) var(--ease); white-space: nowrap; letter-spacing: -0.005em; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hover); } .btn--primary:active { background: var(--accent-active); } .btn--secondary { background: var(--text); color: var(--bg); } .btn--secondary:hover { background: var(--text-muted); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn--ghost:hover { border-color: var(--text); background: var(--surface); } .btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); } .btn--danger:hover { background: var(--danger); color: #fff; } .btn--sm { padding: 6px 12px; font-size: var(--text-xs); } .btn--lg { padding: 14px 28px; font-size: var(--text-md); } /* ═══════════════════════════════════════════════════════════════════ CARD · generic ═══════════════════════════════════════════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); } .card__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-3); flex-wrap: wrap; } .card__title { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--weight-medium); margin: 0; letter-spacing: -0.01em; } .card__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-subtle); text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════════════ METRIC ═══════════════════════════════════════════════════════════════════ */ .metric { display: flex; flex-direction: column; gap: 4px; } .metric__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-subtle); text-transform: uppercase; } .metric__value { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: 1; letter-spacing: -0.015em; color: var(--text); } .metric__value--mono { font-family: var(--font-mono); font-weight: var(--weight-medium); letter-spacing: -0.01em; } .metric__delta { font-family: var(--font-mono); font-size: var(--text-xs); } .metric__delta--up { color: var(--success); } .metric__delta--down { color: var(--danger); } .metric__delta--flat { color: var(--text-subtle); } /* ═══════════════════════════════════════════════════════════════════ BADGE ═══════════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-full); border: 1px solid transparent; } .badge--neutral { background: var(--surface); color: var(--text-muted); border-color: var(--border); } .badge--accent { background: var(--accent-soft); color: var(--accent); } .badge--success { background: var(--success-soft); color: var(--success); } .badge--danger { background: var(--danger-soft); color: var(--danger); } .badge--warning { background: var(--warning-soft); color: var(--warning); } .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ═══════════════════════════════════════════════════════════════════ TABS ═══════════════════════════════════════════════════════════════════ */ .tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); } .tab { padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); background: transparent; border: 0; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration); } .tab:hover { color: var(--text); } .tab--active { color: var(--accent); border-bottom-color: var(--accent); } /* ═══════════════════════════════════════════════════════════════════ INPUT ═══════════════════════════════════════════════════════════════════ */ .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-subtle); text-transform: uppercase; } .input, .select, .textarea { appearance: none; -webkit-appearance: none; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; font-family: var(--font-sans); font-size: var(--text-sm); transition: border-color var(--duration), box-shadow var(--duration); } .input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input::placeholder { color: var(--text-subtle); } /* ═══════════════════════════════════════════════════════════════════ ALERT ═══════════════════════════════════════════════════════════════════ */ .alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); border-left: 3px solid; } .alert--info { background: var(--accent-soft); border-left-color: var(--accent); color: var(--text); } .alert--success { background: var(--success-soft); border-left-color: var(--success); color: var(--text); } .alert--danger { background: var(--danger-soft); border-left-color: var(--danger); color: var(--text); } .alert--warning { background: var(--warning-soft); border-left-color: var(--warning); color: var(--text); } .alert__title { font-weight: var(--weight-semibold); margin: 0 0 2px; font-family: var(--font-sans); font-size: var(--text-sm); } .alert__body { font-family: var(--font-serif); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; margin: 0; } /* ═══════════════════════════════════════════════════════════════════ TABLE ═══════════════════════════════════════════════════════════════════ */ .table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-sm); } .table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border); font-weight: var(--weight-medium); } .table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } .table tbody tr:hover { background: var(--accent-soft); } .table__num { text-align: right; font-variant-numeric: tabular-nums; } .table__pos { color: var(--success); } .table__neg { color: var(--danger); } /* ═══════════════════════════════════════════════════════════════════ FOOTER · Casa g. ═══════════════════════════════════════════════════════════════════ */ .footer { margin-top: var(--space-8); padding: var(--space-7) var(--space-6); background: var(--text); color: var(--bg); text-align: center; border-radius: var(--radius-md); } .footer__brand { font-family: var(--font-serif); font-size: 44px; font-weight: var(--weight-medium); letter-spacing: -1px; margin-bottom: var(--space-2); line-height: 1; } .footer__brand em { font-style: italic; color: var(--accent); } .footer__tagline { font-family: var(--font-mono); font-size: 10px; letter-spacing: 4px; opacity: 0.6; text-transform: uppercase; } .footer__links { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid rgba(243,235,217,0.15); font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; opacity: 0.6; text-transform: uppercase; display: flex; gap: var(--space-5); justify-content: center; flex-wrap: wrap; } .footer__links a { color: inherit; text-decoration: none; } .footer__links a:hover { opacity: 1; color: var(--accent); }