/* ------------------------------------------------------------------ Solomon Dworsky — solomondworsky.com Matches the ArGaze / tryswd design system: · brand/BRAND-GUIDELINES.md §4 colour, §5 type, §6 spacing · web/app/globals.css token values · web/app/(marketing)/page.tsx section grammar — alternating bg / bg-soft bands, 76px vertical rhythm, 1120px wrap, 24px gutter, 14px cards with a 2px primary top rule, 9px controls LIGHT ONLY, by design. The brand has no dark theme; globals.css pins color-scheme:light because OS dark mode put navy headings on black (08-GAP-01). The same guard is in the . ------------------------------------------------------------------ */ :root { /* §4 — HEX computed exactly from the HSL tokens */ --bg: #ffffff; --bg-soft: #f5f6fa; /* hsl(221 33% 97%) */ --ink: #101728; /* hsl(222 42% 11%) */ --muted: #606a80; /* hsl(222 14% 44%) */ --border: #e0e3eb; /* hsl(221 22% 90%) */ --primary: #1f3c7a; /* hsl(221 60% 30%) */ --primary-600: #254b9d; /* hsl(221 62% 38%) */ --primary-050: #f0f3fa; /* hsl(221 50% 96%) */ --green: #26824c; --amber: #dc8f09; /* §5 */ --font-display: 'Fraunces', ui-serif, Georgia, Cambria, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* §6 — 4px base grid */ --wrap: 1120px; --gutter: 24px; --band-y: 76px; --radius-card: 14px; --radius-ctl: 9px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* `clip`, not `hidden` — overflow-x:hidden on html/body creates a scroll container and silently kills every position:sticky descendant. Same reasoning as the ArGaze globals.css note (Phase 51 B3). */ max-width: 100vw; overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 100vw; overflow-x: clip; overflow-wrap: break-word; } /* --- Bands + wrap -------------------------------------------------- */ .band { padding: var(--band-y) 0; } .band-bg { background: var(--bg); } .band-soft { background: var(--bg-soft); } .band-primary { background: var(--primary); color: #fff; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .footer { padding: 32px 0; border-top: 1px solid var(--border); } .skip { position: absolute; left: -9999px; top: 0; padding: 10px 16px; background: #fff; color: var(--primary); border: 1px solid var(--border); border-radius: var(--radius-ctl); z-index: 10; } .skip:focus { left: 16px; top: 16px; } /* --- Hero ---------------------------------------------------------- */ .eyebrow, .section-eyebrow { margin: 0 0 12px; color: var(--primary); font-size: 13px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; } /* §5 H1 — Fraunces 560 */ h1 { margin: 0; font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: 'opsz' 144; font-size: clamp(34px, 5.4vw, 60px); font-weight: 560; line-height: 1.04; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; } /* §5 body large */ .lede { max-width: 760px; margin: 16px 0 0; font-size: clamp(17px, 2.2vw, 20px); font-weight: 400; line-height: 1.5; color: var(--muted); } .section-intro { max-width: 760px; margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); } /* --- Buttons (9px controls) ---------------------------------------- */ .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 1px solid transparent; border-radius: var(--radius-ctl); font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease); } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-600); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--primary); } .btn-ghost:hover { background: var(--primary-050); border-color: var(--primary); } .btn-invert { background: #fff; color: var(--primary); } .btn-invert:hover { background: var(--primary-050); } .btn-disabled { background: transparent; border-color: var(--border); color: var(--muted); cursor: default; } .btn .meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; opacity: 0.75; } /* --- Grid + cards -------------------------------------------------- */ .grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 32px; } @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .card { padding: 24px; border-radius: var(--radius-card); background: var(--bg); } /* On a soft band the cards are white; on a white band they are soft. */ .band-soft .card { background: var(--bg); } .band-bg .card { background: var(--bg-soft); } /* The 2px primary top rule is the ArGaze card signature. */ .card-top { border-top: 2px solid var(--primary); } .numeral { display: inline-block; padding: 4px 12px; border-radius: var(--radius-ctl); background: var(--primary); color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 600; } .card h3, .project h3 { margin: 16px 0 0; font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); } .card p, .project p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); } /* --- Projects / downloads ------------------------------------------ */ .project-list { margin: 32px 0 0; padding: 0; list-style: none; } .project { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg); transition: box-shadow 0.18s var(--ease); } .project:last-child { margin-bottom: 0; } .project:not(.empty):hover { box-shadow: 0 4px 12px rgba(16, 23, 40, 0.08); } .project.empty { border-style: dashed; background: transparent; } .project-body { flex: 1 1 20rem; } .project h3:first-child { margin-top: 0; } .project .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .project .tags span { padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; } /* --- GitHub contribution graph -------------------------------------- */ .github-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .github-head .section-eyebrow { margin-bottom: 0; } .github-handle { color: var(--muted); font-family: var(--font-mono); font-size: 13px; text-decoration: none; } .github-handle:hover { color: var(--primary); } .graph-frame { margin-top: 32px; border: 1px solid var(--border); } .graph-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* Month labels sit above the grid on the same column track sizing, so a label always lines up with the week it names. */ .graph-months { display: grid; grid-auto-flow: column; gap: 4px; min-width: max-content; margin-bottom: 6px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; line-height: 1; } .graph-months span { position: relative; white-space: nowrap; } .graph { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 4px; min-width: max-content; } .cell { width: 11px; height: 11px; border-radius: 2px; background: var(--l0); } /* Five steps stepping toward --primary. */ :root { --l0: #e8ebf2; --l1: #c3cee4; --l2: #8ea3c8; --l3: #4f6ba6; --l4: #1f3c7a; } .cell[data-level="1"] { background: var(--l1); } .cell[data-level="2"] { background: var(--l2); } .cell[data-level="3"] { background: var(--l3); } .cell[data-level="4"] { background: var(--l4); } /* Once there is room the weeks stretch to fill the card; below that they stay fixed-size and the card scrolls, which beats sub-pixel cells. */ @media (min-width: 768px) { .graph, .graph-months { width: 100%; min-width: 0; grid-auto-columns: minmax(0, 1fr); } .cell { width: 100%; height: auto; aspect-ratio: 1; border-radius: 3px; } .legend .cell { width: 11px; height: 11px; aspect-ratio: auto; } } .graph-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 16px; } .graph-total { margin: 0; color: var(--muted); font-size: 14px; } .graph-total strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .legend { display: flex; align-items: center; gap: 4px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; } .graph-status { margin: 0; padding: 12px 0; color: var(--muted); font-family: var(--font-mono); font-size: 13px; } .graph-frame[data-state="loading"] .graph-scroll, .graph-frame[data-state="loading"] .graph-foot, .graph-frame[data-state="error"] .graph-scroll, .graph-frame[data-state="error"] .graph-foot { display: none; } .graph-frame[data-state="ready"] .graph-status { display: none; } /* --- Final CTA band ------------------------------------------------- */ .final-headline { margin: 0; font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(27px, 3.5vw, 40px); font-weight: 540; line-height: 1.1; letter-spacing: -0.01em; color: #fff; } .final-body { max-width: 640px; margin: 16px 0 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); } .colophon { margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: 12px; } /* --- Responsive ----------------------------------------------------- */ @media (max-width: 767px) { :root { --band-y: 56px; --gutter: 20px; } .project { flex-direction: column; align-items: stretch; gap: 16px; } /* The desktop `flex: 1 1 20rem` basis becomes a HEIGHT once the card stacks, opening a 20rem hole under the text. Reset it. */ .project-body { flex: 0 1 auto; } /* Full-width targets. `width:100%` not align-items:stretch — with flex-wrap on a column each line sizes to content, so stretch no-ops. */ .cta-row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .btn { width: 100%; justify-content: center; min-height: 44px; } } @media (hover: none) and (pointer: coarse) { .btn { min-height: 44px; } } /* --- Focus visibility ----------------------------------------------- */ a:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; } .band-primary a:focus-visible { outline-color: #fff; } /* --- Preferences ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (prefers-contrast: more) { :root { --muted: #414b60; --border: #b9c0d0; --l0: #dde2ed; } } /* --- Print ----------------------------------------------------------- */ @media print { .skip { display: none; } .band { padding: 24px 0; } .band-primary { background: #fff; color: #000; } .final-headline, .final-body { color: #000; } }