/* ========================================================================== brandenschiess.com — design system Blue and silver. Light and dark. No framework, no build step. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Colour — light */ --color-bg: #f4f6f9; --color-surface: #ffffff; --color-surface-alt: #e7ebf1; --color-primary: #2a5cdb; --color-primary-hover: #1e46b0; --color-on-primary: #ffffff; --color-accent: #7c8ca6; --color-text-primary: #141a24; --color-text-secondary: #4d5765; --color-border: #d6dce5; --color-success: #157a54; --color-warn: #8a5e07; --color-archived: #6b7280; /* Per-project accent, overridden inline by the accent colour field */ --project-accent: var(--color-primary); /* Type */ --font-heading: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.5rem); --text-3xl: clamp(2.125rem, 1.2rem + 4.2vw, 3.5rem); /* Space — 4px base */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Shape */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Elevation */ --shadow-card: 0 1px 3px rgba(20, 26, 36, 0.08), 0 1px 2px rgba(20, 26, 36, 0.04); --shadow-card-hover: 0 8px 24px rgba(20, 26, 36, 0.12); --wrap: 1160px; --header-h: 64px; } /* Dark theme. Applied on system preference, then overridden in both directions by an explicit data-theme on from the toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0f141b; --color-surface: #171f2a; --color-surface-alt: #1f2937; --color-primary: #5b8def; --color-primary-hover: #7da3f5; --color-on-primary: #0b1017; --color-accent: #9aaac4; --color-text-primary: #edf1f7; --color-text-secondary: #a7b2c1; --color-border: #2a3441; --color-success: #3dbe8b; --color-warn: #e0a83e; --color-archived: #8b94a3; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { --color-bg: #0f141b; --color-surface: #171f2a; --color-surface-alt: #1f2937; --color-primary: #5b8def; --color-primary-hover: #7da3f5; --color-on-primary: #0b1017; --color-accent: #9aaac4; --color-text-primary: #edf1f7; --color-text-secondary: #a7b2c1; --color-border: #2a3441; --color-success: #3dbe8b; --color-warn: #e0a83e; --color-archived: #8b94a3; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.55); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-3); text-wrap: balance; } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } p { margin: 0 0 var(--space-4); } a { color: var(--color-primary); text-underline-offset: 0.15em; } a:hover { color: var(--color-primary-hover); } img { max-width: 100%; height: auto; display: block; } /* One focus treatment, everywhere. Never removed without a replacement. */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(var(--space-3), 3vw, var(--space-5)); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 100; background: var(--color-surface); color: var(--color-text-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-card-hover); width: auto; height: auto; clip: auto; margin: 0; } /* -------------------------------------------------------------------------- 3. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; line-height: 1; padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); text-decoration: none; cursor: pointer; background: var(--project-accent); color: var(--color-on-primary); } .btn:hover { background: var(--color-primary-hover); color: var(--color-on-primary); } .btn--lg { font-size: var(--text-lg); padding: var(--space-4) var(--space-6); } .btn--ghost { background: transparent; color: var(--color-text-primary); border-color: var(--color-border); } .btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-text-primary); } .btn[aria-disabled="true"] { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); border-style: dashed; cursor: not-allowed; } @media (prefers-reduced-motion: no-preference) { .btn { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } } /* -------------------------------------------------------------------------- 4. Pills and chips -------------------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); white-space: nowrap; text-decoration: none; } a.pill:hover { color: #fff; filter: brightness(1.25); } /* Status pills sit on top of card art, so their backing is fixed dark in both themes — it has to stay readable over an arbitrary image. Status is always carried by the text label as well as the dot, never colour alone. */ .pill--status { background: rgba(8, 12, 18, 0.68); color: #fff; backdrop-filter: blur(6px); } .pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .pill--live .pill__dot { background: #3dbe8b; } .pill--wip .pill__dot { background: #e0a83e; } .pill--coming-soon .pill__dot { background: #9aaac4; } .pill--archived .pill__dot { background: #8b94a3; } .pill--type { background: rgba(8, 12, 18, 0.68); color: #fff; backdrop-filter: blur(6px); } .pill--new { background: var(--color-primary); color: var(--color-on-primary); } .chip { display: inline-block; font-size: var(--text-xs); color: var(--color-text-secondary); background: var(--color-surface-alt); border-radius: var(--radius-sm); padding: 2px var(--space-2); text-decoration: none; } a.chip:hover { color: var(--color-text-primary); background: var(--color-border); } /* -------------------------------------------------------------------------- 5. Header + footer -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(var(--space-2), 2vw, var(--space-4)); min-height: var(--header-h); } /* The wordmark scales with the viewport instead of snapping at breakpoints I happened to test. A longer name, a narrower phone or a future rename all stay on one line without anyone revisiting this rule. */ .site-brand { font-family: var(--font-heading); font-size: clamp(0.9375rem, 0.62rem + 1.55vw, 1.25rem); font-weight: 700; letter-spacing: -0.03em; color: var(--color-text-primary); text-decoration: none; min-width: 0; white-space: nowrap; } .site-brand span { color: var(--color-primary); } .site-nav { display: flex; align-items: center; gap: var(--space-2); } .site-nav a { font-size: clamp(0.8125rem, 0.72rem + 0.45vw, 0.875rem); font-weight: 500; color: var(--color-text-secondary); text-decoration: none; padding: var(--space-2) clamp(var(--space-2), 1.4vw, var(--space-3)); border-radius: var(--radius-sm); white-space: nowrap; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-text-primary); background: var(--color-surface-alt); } .theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); cursor: pointer; flex: none; } .theme-toggle:hover { color: var(--color-text-primary); background: var(--color-surface-alt); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } .site-footer { margin-top: var(--space-8); padding-block: var(--space-6); background: var(--color-surface-alt); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-secondary); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .site-footer a { color: var(--color-text-secondary); } .site-footer a:hover { color: var(--color-text-primary); } /* -------------------------------------------------------------------------- 6. Page furniture -------------------------------------------------------------------------- */ .page-head { padding-block: var(--space-7) var(--space-5); } .page-head__lede { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 46ch; margin: 0; } .section { padding-block: var(--space-6); } .section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); } .section__head h2 { margin: 0; } .section__link { font-size: var(--text-sm); font-weight: 600; text-decoration: none; } .eyebrow { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 var(--space-3); } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-top: var(--space-6); } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--project-accent) 14%, transparent) 0%, color-mix(in srgb, var(--color-accent) 10%, transparent) 100%); pointer-events: none; } .hero__inner { position: relative; display: grid; gap: var(--space-6); padding: var(--space-6); align-items: center; } @media (min-width: 56rem) { .hero__inner { grid-template-columns: 1fr 1fr; padding: var(--space-8) var(--space-7); } } .hero__title { font-size: var(--text-3xl); margin-bottom: var(--space-3); } .hero__tagline { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 42ch; margin-bottom: var(--space-5); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .hero__art { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card-hover); aspect-ratio: 4 / 3; } .hero__art img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 56rem) { .hero--reverse .hero__art { order: 2; } } .site-intro { max-width: 56ch; font-size: var(--text-lg); color: var(--color-text-secondary); margin-block: var(--space-7) 0; } /* -------------------------------------------------------------------------- 8. Project grid + card — the workhorse -------------------------------------------------------------------------- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); } @media (min-width: 48rem) { .project-grid { gap: var(--space-5); } } .card { position: relative; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; height: 100%; } @media (prefers-reduced-motion: no-preference) { .card { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .card__art img { transition: transform 260ms ease; } .card:hover { transform: translateY(-2px); } .card:hover .card__art img { transform: scale(1.03); } } .card:hover { box-shadow: var(--shadow-card-hover); border-color: color-mix(in srgb, var(--project-accent) 40%, var(--color-border)); } /* The whole card is one link target, but the title carries the accessible name. */ .card:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; } .card__art { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--project-accent) 0%, color-mix(in srgb, var(--project-accent) 45%, var(--color-accent)) 100%); overflow: hidden; } .card__art img { width: 100%; height: 100%; object-fit: cover; } /* Placeholder when a project has no art yet: big first letter on the accent. */ .card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-heading); font-size: 4rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); user-select: none; } .card__overlay { position: absolute; inset: var(--space-3) var(--space-3) auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); pointer-events: none; } .card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; } .card__title { font-size: var(--text-lg); font-weight: 600; margin: 0; } .card__title a { color: var(--color-text-primary); text-decoration: none; } /* Stretch the title link over the whole card so the entire card is clickable. */ .card__title a::after { content: ""; position: absolute; inset: 0; } .card:hover .card__title a { color: var(--project-accent); } .card__tagline { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); position: relative; z-index: 1; } .card--archived .card__art { filter: saturate(0.55); } /* -------------------------------------------------------------------------- 9. Filter bar -------------------------------------------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-5); } .filter-bar__chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; flex: 1 1 16rem; min-width: 0; } .filter-chip { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); cursor: pointer; white-space: nowrap; } .filter-chip:hover { color: var(--color-text-primary); border-color: var(--color-accent); } .filter-chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .filter-bar__tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .filter-search, .filter-sort { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-primary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); } .filter-search { min-width: 12rem; } .filter-toggle { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; cursor: pointer; } .filter-empty { padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-text-secondary); border: 1px dashed var(--color-border); border-radius: var(--radius-md); } .filter-count { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); } .card[hidden] { display: none; } /* -------------------------------------------------------------------------- 10. Single project -------------------------------------------------------------------------- */ .project { padding-block: var(--space-7); } .project__layout { display: grid; gap: var(--space-6); } @media (min-width: 56rem) { .project__layout { grid-template-columns: 1.1fr 1fr; align-items: start; } } .project__art { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--project-accent) 0%, var(--color-accent) 100%); } .project__art img { width: 100%; height: 100%; object-fit: cover; } .project__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .project__tagline { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 44ch; } .project__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block: var(--space-5); } .project__note { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; } .project__facts { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--text-sm); } .project__fact { display: flex; gap: var(--space-3); justify-content: space-between; align-items: baseline; } .project__fact dt { color: var(--color-text-secondary); margin: 0; } .project__fact dd { margin: 0; font-weight: 500; text-align: right; } .project__body { max-width: 68ch; margin-top: var(--space-6); } .project__body h2 { margin-top: var(--space-6); } /* -------------------------------------------------------------------------- 11. Play shell — the game owns the screen -------------------------------------------------------------------------- */ /* A column: a bar of its own height, then the frame taking everything left. The bar deliberately takes layout space rather than floating over the game. Overlaying meant every bundle had to reserve a margin for chrome it could not see, in a number copied from this file — so a new game was wrong by default and an edit here silently broke five others. This way the iframe IS the game's viewport, and bundles need to know nothing at all. */ .play-body { margin: 0; background: #0b1017; overflow: hidden; display: flex; flex-direction: column; height: 100vh; height: 100dvh; } .play-bar { flex: none; display: flex; align-items: center; /* Sits below a notch or status bar without hard-coding any device. */ padding: env(safe-area-inset-top, 0px) max(var(--space-2), env(safe-area-inset-right, 0px)) 0 max(var(--space-2), env(safe-area-inset-left, 0px)); background: #0b1017; border-bottom: 1px solid rgba(237, 241, 247, 0.08); min-width: 0; } .play-frame { /* min-height:0 lets a flex child actually shrink instead of overflowing. */ flex: 1 1 auto; min-height: 0; display: block; border: 0; width: 100%; } .play-back { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-silver, #9aaac4); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); } .play-back svg { flex: none; } /* Long project names truncate rather than forcing the bar wider. */ .play-back__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .play-back:hover, .play-back:focus-visible { color: #fff; background: rgba(237, 241, 247, 0.08); } @media (prefers-reduced-motion: no-preference) { .play-back { transition: color 160ms ease, background-color 160ms ease; } } /* -------------------------------------------------------------------------- 12. Pagination, prose pages, 404 -------------------------------------------------------------------------- */ .pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding-inline: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text-secondary); font-size: var(--text-sm); } .pagination .page-numbers:hover { background: var(--color-surface-alt); color: var(--color-text-primary); } .pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 600; } .prose { max-width: 68ch; padding-block: var(--space-7); } .prose img { border-radius: var(--radius-md); } .prose blockquote { margin: var(--space-5) 0; padding-left: var(--space-4); border-left: 3px solid var(--color-primary); color: var(--color-text-secondary); } .prose code { background: var(--color-surface-alt); padding: 2px 5px; border-radius: 4px; font-size: 0.9em; } .notfound { padding-block: var(--space-8); text-align: center; } .notfound__code { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--color-primary); margin: 0 0 var(--space-2); }