/* * Application styles for the Rangwath portfolio. * * Loads tokens.css first (which loads Open Props + custom palette + * Inter @font-face). Defines base resets, typography, link styles, * focus rings, and a small set of utility classes. * * Convention: never use --color-accent as body text (fails WCAG AA * at normal size against --color-bg). Accent is reserved for button * backgrounds, focus rings, link emphasis, and large UI text. * * No @layer declaration — the project's CSS surface is small enough * that cascade-layer isolation buys nothing and adds maintenance * surface. Plain CSS specificity is sufficient. */ @import "./tokens.css"; /* ---------- Reset (low specificity via :where) ---------- */ *, *::before, *::after { box-sizing: border-box; } :where(html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote) { margin: 0; } :where(ol, ul) { padding: 0; } :where(img, svg, video, canvas) { display: block; max-width: 100%; height: auto; } :where(input, button, textarea, select) { font: inherit; color: inherit; } /* ---------- Page baseline ---------- */ :root { color-scheme: dark; } html { font-family: var(--font-sans); font-size: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* Always show the vertical scrollbar (even when content doesn't overflow) so viewport width is consistent across pages — no more navbar/logo jump between short and tall pages. Combined with the JS-measured --scrollbar-width below, this also gives true visual centering on every browser without depending on `scrollbar-gutter: both-edges` browser support. */ overflow-y: scroll; /* Balance the right-side scrollbar with a matching left padding. The JS snippet in measures the actual scrollbar width (varies by OS: ~15px Windows, ~17px Linux GTK, 0px Mac with overlay scrollbars) and sets --scrollbar-width. Content inside is now centered in the visible window, not in the scrollbar-area-shifted viewport. */ padding-left: var(--scrollbar-width, 0); } body { background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-base); line-height: var(--font-lineheight-3); /* Sticky-footer flex pattern: body becomes a flex column with min-height = full viewport. Main grows to fill any extra space, pinning the footer to the page bottom even on short pages (About, Contact). */ display: flex; flex-direction: column; min-height: 100dvh; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: var(--font-lineheight-1); } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } h4 { font-size: var(--font-size-md); } p { max-width: 70ch; } a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; transition: text-decoration-color var(--transition-fast), color var(--transition-fast); } a:hover, a:focus-visible { color: var(--color-accent); text-decoration-color: var(--color-accent-hover); } /* ---------- Focus rings (using accent) ---------- */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- Selection ---------- */ ::selection { background: var(--color-accent); color: var(--color-bg); } /* ---------- Utilities ---------- */ .container { width: 100%; max-width: var(--content-max-width); margin-inline: auto; padding-inline: var(--space-4); } .container--narrow { max-width: var(--content-narrow-width); } .container--wide { max-width: 78rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Site header / navbar ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); min-height: var(--navbar-height); padding-block: var(--space-2); } .site-nav__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; } .site-nav__brand svg { width: 2rem; height: 2rem; border-radius: var(--radius-sm); } .site-nav__wordmark { font-weight: 700; font-size: var(--font-size-md); letter-spacing: -0.01em; } .site-nav__toggle-input { display: none; } .site-nav__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 2.25rem; height: 2.25rem; margin-inline-start: auto; padding: 0.45rem; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; } .site-nav__toggle-bar { display: block; width: 100%; height: 2px; background: var(--color-text); border-radius: 2px; } .site-nav__toggle:hover, .site-nav__toggle-input:focus-visible + .site-nav__toggle { border-color: var(--color-accent); } .site-nav__links { list-style: none; display: none; flex-direction: column; gap: var(--space-2); width: 100%; margin: 0; padding: var(--space-2) 0 var(--space-1); } .site-nav__toggle-input:checked ~ .site-nav__links { display: flex; } .site-nav__link { display: inline-block; padding: var(--space-2) var(--space-3); color: var(--color-text); font-weight: 500; /* uniform weight across all nav links — active state distinguishes via color only, no width-shifting on bold transition */ text-decoration: none; border-radius: var(--radius-sm); } .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 12%, transparent); } .site-nav__link--active { color: var(--color-accent); /* color-only active state — preserves width-stability of the navbar between pages */ } @media (min-width: 768px) { .site-nav { flex-wrap: nowrap; padding-block: var(--space-2); } .site-nav__toggle, .site-nav__toggle-input { display: none; } .site-nav__links { display: flex; flex-direction: row; width: auto; margin-inline-start: auto; padding: 0; gap: var(--space-4); } } /* ---------- Site main ---------- */ .site-main { display: block; flex: 1 1 auto; /* absorbs leftover vertical space so the footer pins to the page bottom on short pages */ padding-block: var(--space-7); } /* ---------- Site footer ---------- */ .site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-4); background: var(--color-surface); color: var(--color-muted); font-size: var(--font-size-sm); } .site-footer__inner { text-align: center; } .site-footer__copy { margin: 0; } /* ---------- Chips (engine, kind, year — used in embed + timeline) ---------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; text-transform: capitalize; /* render engine/kind/jamName values in Title Case ("unity" → "Unity", "Brno game jam" → "Brno Game Jam") without changing the underlying data, which stays lowercase for CSS class suffixes like .chip--engine-unity */ } .chip--year { font-variant-numeric: tabular-nums; text-transform: none; /* numeric chips don't need capitalization handling */ } .chip--kind-jam { border-color: color-mix(in oklab, var(--color-accent) 60%, var(--color-border)); color: color-mix(in oklab, var(--color-accent) 80%, var(--color-text)); } /* ---------- game-embed component ---------- */ .game-embed { display: block; position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; max-width: 100%; } .game-embed__poster { margin: 0; display: block; position: relative; } .game-embed__poster picture, .game-embed__poster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-bg); } .game-embed__caption { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); } .game-embed__title { margin: 0; font-size: var(--font-size-lg); font-weight: 700; line-height: 1.15; } .game-embed__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; } .game-embed__controls { margin: 0; font-size: var(--font-size-sm); color: var(--color-muted); } .game-embed__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) var(--space-4) var(--space-4); padding: var(--space-3) var(--space-5); background: var(--color-accent); color: var(--color-bg); font-weight: 700; font-size: var(--font-size-md); text-decoration: none; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast); } .game-embed__cta:hover, .game-embed__cta:focus-visible { background: var(--color-accent-hover); color: var(--color-bg); } .game-embed__cta--view { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .game-embed__cta--view:hover, .game-embed__cta--view:focus-visible { background: color-mix(in oklab, var(--color-accent) 14%, transparent); color: var(--color-text); border-color: var(--color-accent); } .game-embed__cta-icon { display: inline-block; line-height: 1; } /* Download variant — multi-platform buttons */ .game-embed__downloads { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) var(--space-4) var(--space-4); padding: 0; } .game-embed__downloads .game-embed__cta { margin: 0; flex: 1 1 auto; min-width: 12rem; } .game-embed__cta--download svg { flex-shrink: 0; } /* Iframe injection state */ .game-embed--playing { /* Iframe takes over the wrapper; hide the poster/caption/CTA */ } .game-embed--playing .game-embed__poster, .game-embed--playing .game-embed__cta, .game-embed--playing .game-embed__downloads { display: none; } .game-embed__iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--color-bg); } /* Detail-page embed: a featured-style side-by-side hero card (screenshot + title / chips / blurb / Play), mirroring the homepage Monument. Clicking Play swaps the whole card to a full-width 16:9 iframe so the game plays comfortably large (see the --loading/--playing rule below). */ .game-embed--detail { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; padding: var(--space-5); } .game-embed--detail .game-embed__poster { aspect-ratio: 16 / 9; align-self: start; /* keep the 16:9 box; don't stretch to a taller body (e.g. Teddy's two download buttons), which would blow the width past the cell */ border-radius: var(--radius-md); overflow: hidden; } .game-embed--detail .game-embed__poster picture, .game-embed--detail .game-embed__poster img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } .game-embed__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .game-embed--detail .game-embed__title { font-size: var(--font-size-2xl); line-height: 1.15; } .game-embed__blurb { margin: 0; color: var(--color-muted); font-size: var(--font-size-base); line-height: 1.55; max-width: 50ch; } .game-embed--detail .game-embed__cta--play { align-self: flex-start; margin: 0; margin-block-start: auto; /* anchor the CTA to the bottom of the body */ } .game-embed--detail .game-embed__downloads { margin: 0; margin-block-start: auto; flex-direction: column; align-items: flex-start; } /* Loading + playing: the iframe takes over the full card width (the chosen "full content width" behavior) instead of sitting in the 32rem image cell. */ .game-embed--detail.game-embed--loading, .game-embed--detail.game-embed--playing { display: flex; align-items: center; justify-content: center; padding: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } /* In fullscreen the embed fills the screen; drop the 16:9 cap so fitScale scales the game up to the full viewport. */ .game-embed--detail:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; } /* The iframe is sized to the game's native resolution in JS and scaled to fit via transform; scale from the center so it letterboxes cleanly. */ .game-embed--detail .game-embed__iframe { transform-origin: center center; } /* Stack on narrow screens (image above body), like the Monument. */ @media (max-width: 899px) { .game-embed--detail { grid-template-columns: 1fr; gap: var(--space-4); } } .game-embed__close { position: absolute; top: var(--space-2); right: var(--space-2); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); line-height: 1; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; z-index: 2; } .game-embed__close:hover, .game-embed__close:focus-visible { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } .game-embed__fullscreen { position: absolute; top: var(--space-2); right: calc(var(--space-2) + 2rem + var(--space-2)); /* just left of the × close */ width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; z-index: 2; } .game-embed__fullscreen:hover, .game-embed__fullscreen:focus-visible { background: color-mix(in oklab, var(--color-accent) 14%, transparent); border-color: var(--color-accent); } .game-embed__return-hint { position: absolute; bottom: var(--space-2); right: var(--space-2); margin: 0; padding: var(--space-1) var(--space-3); background: color-mix(in oklab, var(--color-surface) 80%, transparent); color: var(--color-muted); font-size: var(--font-size-xs); border-radius: var(--radius-sm); opacity: 0; animation: game-embed-return-hint-fade-in 200ms ease-out 500ms forwards; } @keyframes game-embed-return-hint-fade-in { to { opacity: 1; } } .game-embed__failure { margin: var(--space-4); padding: var(--space-3) var(--space-4); background: color-mix(in oklab, var(--color-accent) 15%, var(--color-surface)); border: 1px solid var(--color-accent); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--font-size-sm); } .game-embed__failure a { color: var(--color-accent); text-decoration-color: currentColor; } /* Variant: row (timeline) — compact horizontal layout */ .game-embed--row { display: grid; grid-template-columns: minmax(0, 14rem) 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); } .game-embed--row .game-embed__poster { grid-row: span 2; border-radius: var(--radius-sm); overflow: hidden; } .game-embed--row .game-embed__caption { padding: 0; } .game-embed--row .game-embed__cta { margin: 0; align-self: center; } @media (max-width: 767px) { .game-embed--row { grid-template-columns: 1fr; gap: var(--space-3); } .game-embed--row .game-embed__poster { grid-row: auto; } } /* ---------- Monument — featured-game card (full container width) ---------- */ .monument { margin-block-end: var(--space-7); } .monument__card { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); /* image column up to 32rem; content takes the rest. Balanced for the unified 64rem content width. */ gap: var(--space-6); align-items: stretch; /* content column stretches to match image height so the body's auto-margin can push the CTA to the bottom */ padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .monument__media { display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9; } .monument__media picture, .monument__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .monument__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .monument__eyebrow { margin: 0; color: var(--color-accent); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .monument__title { margin: 0; font-size: var(--font-size-xl); font-weight: 700; line-height: 1.15; } .monument__title a { color: var(--color-text); text-decoration: none; } .monument__title a:hover, .monument__title a:focus-visible { color: var(--color-accent); } .monument__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .monument__blurb { margin: 0; color: var(--color-muted); font-size: var(--font-size-base); line-height: 1.55; max-width: 50ch; } .monument__cta { align-self: flex-start; margin-block-start: auto; /* push CTA to the bottom of the body so eyebrow+title+meta+blurb anchor at the top */ padding: var(--space-3) var(--space-5); background: var(--color-accent); color: var(--color-bg); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); font-size: var(--font-size-md); font-weight: 700; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .monument__cta:hover, .monument__cta:focus-visible { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-bg); } /* Tablet: switch to stacked layout earlier so the image gets enough width and the content column doesn't get too narrow. */ @media (max-width: 899px) { .monument__card { grid-template-columns: 1fr; gap: var(--space-4); } .monument__media { max-width: 42rem; margin-inline: auto; width: 100%; } } /* ---------- Timeline ---------- */ .timeline { display: flex; flex-direction: column; gap: var(--space-4); } .timeline__heading { margin: 0; font-size: var(--font-size-xl); } .timeline__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; } .timeline-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; grid-template-areas: "thumb head ctas" "thumb meta ctas"; gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), transform var(--transition-fast); } .timeline-row:hover, .timeline-row:focus-within { border-color: var(--color-accent); } .timeline-row__thumb { grid-area: thumb; display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 9; } .timeline-row__thumb picture, .timeline-row__thumb img { width: 100%; height: 100%; object-fit: cover; } .timeline-row__head { grid-area: head; display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; } .timeline-row__title { margin: 0; font-size: var(--font-size-md); font-weight: 600; line-height: 1.2; min-width: 0; } .timeline-row__title a { color: var(--color-text); text-decoration: none; } .timeline-row__title a:hover, .timeline-row__title a:focus-visible { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; } .timeline-row__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--space-2); } .timeline-row__ctas { grid-area: ctas; display: flex; gap: var(--space-2); align-items: center; } .timeline-row__cta { display: inline-block; padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .timeline-row__cta--primary { background: var(--color-accent); color: var(--color-bg); } .timeline-row__cta--primary:hover, .timeline-row__cta--primary:focus-visible { background: var(--color-accent-hover); } .timeline-row__cta--view { color: var(--color-muted); } .timeline-row__cta--view:hover, .timeline-row__cta--view:focus-visible { color: var(--color-text); } /* Timeline-row mobile responsive (D-06): two-line stack at <768px */ @media (max-width: 767px) { .timeline-row { grid-template-columns: 1fr; grid-template-areas: "thumb" "head" "meta" "ctas"; gap: var(--space-2); } .timeline-row__thumb { width: 100%; aspect-ratio: 16 / 9; } .timeline-row__ctas { justify-content: flex-start; } } /* ---------- Detail page (per-game) ---------- */ .detail-page { display: flex; flex-direction: column; gap: var(--space-6); } /* The detail page lives in a 64rem .container. Everything is left-aligned to the same edge as the embed (title, chips, screenshot, and prose share one left margin) so the layout reads as one clean column. Prose stays readable via the per-element 70ch caps below, not a narrower wrapper. */ .detail-page__header { display: flex; flex-direction: column; gap: var(--space-2); } .detail-page__back { align-self: flex-start; color: var(--color-muted); font-size: var(--font-size-sm); text-decoration: none; } .detail-page__back:hover, .detail-page__back:focus-visible { color: var(--color-accent); } .detail-page__title { margin: 0; font-size: var(--font-size-2xl); line-height: 1.15; } .detail-page__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; } .chip--jam { border-color: color-mix(in oklab, var(--color-accent) 40%, var(--color-border)); } .detail-page__embed { display: block; } .detail-page__blurb { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; font-size: var(--font-size-md); line-height: 1.55; color: var(--color-text); } .detail-page__blurb p { margin: 0; max-width: 70ch; } /* ---------- Recipe-card sections (Story / Stack / Duration / Notes) ---------- */ .recipe-section { display: flex; flex-direction: column; gap: var(--space-3); } .recipe-section__title { margin: 0; font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); } .recipe-section__body { color: var(--color-text); font-size: var(--font-size-base); line-height: 1.55; max-width: 70ch; } .recipe-section__body p { margin: 0 0 var(--space-3); max-width: none; } .recipe-section__body p:last-child { margin-bottom: 0; } .recipe-section__credits { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .recipe-section__credits li { padding: var(--space-1) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--font-size-sm); color: var(--color-muted); } /* ---------- Prose / static pages (About, Contact) ---------- */ .prose { display: flex; flex-direction: column; gap: var(--space-4); /* Prose-only pages (About, Contact) have a short readable measure, so center the column in the 64rem container instead of pinning it left with a lopsided gap on the right. The page frame stays the unified 64rem; only the text block is centered. */ max-width: 65ch; margin-inline: auto; } .prose h1 { margin: 0; font-size: var(--font-size-2xl); } .prose p { margin: 0; max-width: 65ch; line-height: 1.6; } /* ---------- Contact list ---------- */ .contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .contact-link { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; font-size: var(--font-size-md); transition: border-color var(--transition-fast), background var(--transition-fast); } .contact-link:hover, .contact-link:focus-visible { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 8%, var(--color-surface)); color: var(--color-text); } .contact-link svg { flex-shrink: 0; color: var(--color-accent); }