/* ================================================================ THOM BREKKE — PORTFOLIO STYLESHEET style.css Design system: R3 Fog (2026-04-26 handoff) Tokens source: site/design-handoff/tokens.css Reference: site/design-handoff/reference-fog.html Set or to switch palettes. ================================================================ */ /* ---------------------------------------------------------------- PALETTES ---------------------------------------------------------------- */ :root, [data-palette="snow"] { --bg: #fcfcfa; --alt: #f1f1ed; --panel: #ffffff; --rule: #dcdcd5; --rule-strong: #b8b8af; --accent: #36584a; --accent-bg: rgba(54, 88, 74, 0.06); --ink: #101113; --body: #2a2a22; --muted: #6b6a5e; } [data-palette="fog"] { --bg: #eaedea; --alt: #dde2de; --panel: #f5f6f4; --rule: #bfc6bf; --rule-strong: #7d847d; --accent: #2e4a3e; --accent-bg: rgba(46, 74, 62, 0.07); --ink: #0f1411; --body: #1f2520; --muted: #5e6863; } /* ---------------------------------------------------------------- TYPE SYSTEM ---------------------------------------------------------------- */ :root { --font-sans: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Width-axis presets (Mona Sans variable) */ --wdth-normal: 'wdth' 100; --wdth-condensed: 'wdth' 87; --wdth-tight: 'wdth' 75; /* Type scale */ --fs-nameplate: 132px; --fs-h2-large: 56px; --fs-h2-mid: 38px; --fs-h2-sm: 32px; --fs-h3: 22px; --fs-lede: 26px; --fs-body: 15px; --fs-body-sm: 13.5px; --fs-meta: 11px; --fs-meta-sm: 10.5px; --fs-eyebrow: 10px; } /* ---------------------------------------------------------------- BASE ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-variation-settings: var(--wdth-normal); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } button { font-family: inherit; cursor: pointer; } /* ---------------------------------------------------------------- TYPE ROLES ---------------------------------------------------------------- */ .nameplate { font-family: var(--font-sans); font-variation-settings: var(--wdth-normal); font-weight: 900; font-size: var(--fs-nameplate); line-height: 0.92; letter-spacing: -0.045em; color: var(--ink); margin: 0; } .nameplate .dot { color: var(--accent); } .h2-large { font-family: var(--font-sans); font-variation-settings: var(--wdth-condensed); font-weight: 600; font-size: var(--fs-h2-large); line-height: 0.98; letter-spacing: -0.028em; margin: 0; } .h2-mid { font-family: var(--font-sans); font-variation-settings: var(--wdth-condensed); font-weight: 600; font-size: var(--fs-h2-mid); line-height: 1.15; letter-spacing: -0.02em; margin: 0; } .h2-sm { font-family: var(--font-sans); font-variation-settings: var(--wdth-condensed); font-weight: 600; font-size: var(--fs-h2-sm); line-height: 1.2; letter-spacing: -0.018em; margin: 0; } .h3 { font-family: var(--font-sans); font-variation-settings: var(--wdth-condensed); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.012em; margin: 0; } .lede { font-family: var(--font-sans); font-variation-settings: var(--wdth-normal); font-size: var(--fs-lede); font-weight: 400; line-height: 1.35; letter-spacing: -0.005em; color: var(--muted); max-width: 880px; } .lede strong { font-variation-settings: var(--wdth-normal); font-weight: 400; color: var(--ink); } strong, b { font-variation-settings: var(--wdth-condensed); font-weight: 600; } /* ---------------------------------------------------------------- MONO / META ---------------------------------------------------------------- */ .mono { font-family: var(--font-mono); font-feature-settings: 'liga' 0; } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .meta { font-family: var(--font-mono); font-size: var(--fs-meta-sm); letter-spacing: 0.06em; color: var(--muted); } .meta--upper { text-transform: uppercase; letter-spacing: 0.14em; } /* ---------------------------------------------------------------- LAYOUT — page chrome ---------------------------------------------------------------- */ .page { max-width: 1280px; margin: 0 auto; } /* Top meta bar */ .meta-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 48px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-meta-sm); color: var(--muted); letter-spacing: 0.06em; } .meta-bar > :nth-child(2) { color: var(--accent); } .meta-bar > :last-child { text-align: right; } /* Nav */ .nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 48px; border-bottom: 1px solid var(--rule); position: relative; } .nav__brand { font-family: var(--font-sans); font-variation-settings: var(--wdth-normal); font-weight: 700; font-size: 18px; letter-spacing: -0.015em; } .nav__brand a { color: inherit; } .nav__brand a:hover { color: inherit; } .nav__brand .dot { color: var(--accent); } .nav__links { display: flex; gap: 28px; } .nav__link { display: flex; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .nav__link:hover { color: var(--ink); } .nav__link[aria-current="page"] { color: var(--ink); } .nav__link__num { color: var(--accent); } .nav__badge { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--accent); border: 1px solid var(--accent); padding: 6px 14px; letter-spacing: 0.04em; } /* Mobile nav toggle */ .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); } /* ---------------------------------------------------------------- SECTIONS ---------------------------------------------------------------- */ .section { padding: 72px 48px; } .section--alt { background: var(--alt); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* 3-column section grid: left rail | main | right rail */ .section__grid { display: grid; grid-template-columns: 120px 1fr 200px; gap: 40px; } /* Left rail */ .section__rail { font-family: var(--font-mono); font-size: var(--fs-meta-sm); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); line-height: 1.7; } .section__rail__num { color: var(--accent); font-weight: 600; } .section__rail__label { margin-top: 4px; } /* Right rail (marginalia) */ .section__rail--right { font-family: var(--font-mono); font-size: var(--fs-meta-sm); color: var(--muted); line-height: 1.85; border-top: 1px solid var(--ink); padding-top: 12px; } /* ---------------------------------------------------------------- HERO ---------------------------------------------------------------- */ .hero { padding: 88px 48px 80px; } .hero__buttons { display: flex; gap: 8px; margin-top: 36px; } .btn { font-family: var(--font-mono); font-size: var(--fs-meta); padding: 10px 18px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--ink); background: transparent; color: var(--ink); } .btn--primary { background: var(--ink); color: var(--bg); border: none; } .btn--primary:hover { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn:hover { background: var(--ink); color: var(--bg); } /* ---------------------------------------------------------------- CAPABILITY INDEX TABLE ---------------------------------------------------------------- */ .table { border: 1px solid var(--rule-strong); background: var(--panel); } .table__head { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 11px 16px; border-bottom: 1px solid var(--rule); background: var(--alt); display: flex; justify-content: space-between; } .table__row { display: grid; grid-template-columns: 60px 1.2fr 1.4fr; padding: 12px 16px; align-items: center; border-bottom: 1px solid var(--rule); font-size: var(--fs-body-sm); } .table__row:last-child { border-bottom: none; } .table__row__num { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--accent); } .table__row__name { font-variation-settings: var(--wdth-condensed); font-weight: 600; color: var(--ink); letter-spacing: -0.005em; } .table__row__detail { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); } /* ---------------------------------------------------------------- ABOUT — two-column body grid ---------------------------------------------------------------- */ .about-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; } .about-body p { margin: 0; color: var(--body); font-size: var(--fs-body); line-height: 1.7; } /* ---------------------------------------------------------------- EXPERIENCE ROWS ---------------------------------------------------------------- */ .role { display: grid; grid-template-columns: 160px 1fr 140px; padding: 20px 0; align-items: baseline; gap: 24px; border-bottom: 1px solid var(--rule); } .role:last-child { border-bottom: 1px solid var(--rule-strong); } .role__co { font-variation-settings: var(--wdth-condensed); font-weight: 600; font-size: 15px; color: var(--ink); } .role__loc { font-family: var(--font-mono); font-size: var(--fs-meta-sm); color: var(--muted); margin-top: 4px; letter-spacing: 0.04em; } .role__title { font-family: var(--font-mono); font-size: var(--fs-meta-sm); color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .role__desc { font-size: var(--fs-body-sm); color: var(--body); line-height: 1.65; } .role__dates { text-align: right; font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); letter-spacing: 0.04em; } /* Role bullets */ .role__bullets { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .role__bullets li { font-size: var(--fs-body-sm); color: var(--muted); line-height: 1.6; padding-left: 1rem; position: relative; } .role__bullets li::before { content: '—'; position: absolute; left: 0; color: var(--accent); } /* ---------------------------------------------------------------- PROJECT ENTRIES ---------------------------------------------------------------- */ .entry { display: grid; grid-template-columns: 90px 1fr 130px; gap: 24px; padding: 24px 0; border-top: 1px solid var(--rule-strong); align-items: baseline; } .entry:last-child { border-bottom: 1px solid var(--rule-strong); } .entry__num { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--accent); letter-spacing: 0.04em; } .entry__desc { margin: 8px 0 0; font-size: var(--fs-body-sm); line-height: 1.65; color: var(--body); max-width: 720px; } .entry__tag { font-family: var(--font-mono); font-size: var(--fs-meta-sm); color: var(--muted); text-align: right; letter-spacing: 0.04em; } .entry__tag__domain { color: var(--accent); } .entry__tag__year { margin-top: 4px; } /* ---------------------------------------------------------------- FOOTER / CONTACT ---------------------------------------------------------------- */ .footer-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 48px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-meta-sm); color: var(--muted); letter-spacing: 0.06em; background: var(--bg); } .footer-strip > :nth-child(2) { color: var(--accent); text-align: center; } .footer-strip > :last-child { text-align: right; } /* ---------------------------------------------------------------- RESPONSIVE — collapse to single column below 900px ---------------------------------------------------------------- */ @media (max-width: 900px) { /* Type scale */ .nameplate { font-size: 64px; letter-spacing: -0.035em; } .h2-large { font-size: 36px; } .h2-mid { font-size: 28px; } .h2-sm { font-size: 24px; } .lede { font-size: 19px; } /* Spacing */ .meta-bar, .nav, .hero, .section, .footer-strip { padding-left: 24px; padding-right: 24px; } .section { padding-top: 56px; padding-bottom: 56px; } .hero { padding-top: 56px; padding-bottom: 48px; } /* Section grid collapses */ .section__grid { grid-template-columns: 1fr; gap: 24px; } .section__rail--right { order: 99; } /* About body stacks */ .about-body { grid-template-columns: 1fr; gap: 16px; } /* Tables, entries, roles collapse */ .table__row { grid-template-columns: 40px 1fr; } .table__row__detail { display: none; } .entry { grid-template-columns: 1fr; gap: 8px; } .entry__tag { text-align: left; } .role { grid-template-columns: 1fr; gap: 6px; } .role__dates { text-align: left; } /* Nav */ .nav__toggle { display: flex; } .nav__badge { display: none; } .nav__links { display: none; flex-direction: column; gap: 12px; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); padding: 20px 24px; border-bottom: 1px solid var(--rule); z-index: 50; } .nav__links.open { display: flex; } /* Footer */ .footer-strip { grid-template-columns: 1fr; gap: 6px; } .footer-strip > :nth-child(2) { text-align: left; } .footer-strip > :last-child { text-align: left; } /* Meta bar */ .meta-bar { grid-template-columns: 1fr; gap: 4px; } .meta-bar > :nth-child(2), .meta-bar > :last-child { display: none; } }