/* Stoa Games marketing site — brand theme. Remaps the shared design-system tokens (--sg-*). Light-themed for a content site read by an older audience: white surfaces, high contrast, large type. Fonts: Clash Display (Fontshare, commercial-OK) for display, Inter (OFL) for body. The EPM Labs wordmark fonts (Acid CC BY-NC, Detroit 05) are NOT used. */ /* Values come from the shared design system (assets/design-system/tokens, loaded before this file with ). No hand-copied hexes — the single source of truth is stoagames-design. A few site-specific values (button ink, light-bg success, layout sizes) stay local. */ :root { /* Brand — shared */ --brand: var(--sg-brand); --brand-deep: var(--sg-brand-deep); --brand-light: var(--sg-brand-light); --brand-pale: var(--sg-brand-pale); --brand-grey: var(--sg-brand-grey); --brand-gradient: var(--sg-brand-gradient); --brand-wash: var(--sg-brand-gradient-subtle); /* Surfaces + text + borders — shared (light theme) */ --bg: var(--sg-bg-base); --surface: var(--sg-bg-surface); --ink: var(--sg-text-primary); --ink-2: var(--sg-text-secondary); --ink-3: var(--sg-text-muted); --border: var(--sg-border-subtle); --border-strong: var(--sg-border-medium); /* Fonts — shared */ --font-display: var(--sg-font-display); --font-serif: var(--sg-font-serif); --font-sans: var(--sg-font-sans); /* Site-specific (kept local by design) */ --on-brand: var(--sg-text-on-brand); /* pairs with the theme's brand (white on the light deep-orange) */ --success: #1E7F4C; /* darker green for text on the light content bg */ --radius: 14px; --radius-lg: 20px; --tap: 44px; --container: 72rem; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 1.125rem; /* 18px base — comfortable for older readers */ line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--brand); } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--ink); letter-spacing: -0.01em; } h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 0.5em; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 2em 0 0.6em; } h3 { font-size: 1.35rem; margin: 1.6em 0 0.4em; } p { margin: 0 0 1.1em; } .container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; } .container--narrow { max-width: 46rem; } .overline { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-deep); } .muted { color: var(--ink-3); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--tap); padding: 0.7rem 1.4rem; border-radius: var(--radius); font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .06s ease, filter .15s ease, background .15s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgba(0,0,0,.08); } .btn--primary:hover { background: var(--brand-deep); color: #fff; } .btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); } .btn--secondary:hover { background: var(--surface); color: var(--ink); } .btn--lg { font-size: 1.15rem; padding: 0.9rem 1.8rem; min-height: 3.25rem; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .02em; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; flex: none; } .badge--live { background: rgba(30,127,76,.12); color: var(--success); } .badge--soon { background: #EFEFF1; color: var(--ink-3); } .badge--brand { background: var(--brand); color: var(--on-brand); } /* ── Header / nav ─────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); } [data-theme="dark"] .site-header { background: rgba(22,23,26,.85); } .nav { display: flex; align-items: center; gap: 1rem; min-height: 4rem; } .nav__brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); text-decoration: none; } /* Sizing only — the .sg-coin mask coin tints itself per theme (jade light / white dark) via --sg-coin-ink, so the old black-SVG + invert-on-dark hack is gone. */ .nav__coin { width: 1.9rem; height: 1.9rem; flex: none; } .nav__links { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; } .nav__links a { color: var(--ink-2); text-decoration: none; font-weight: 500; } .nav__links a:hover { color: var(--ink); } .nav__theme { background: none; border: 0; cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); border-radius: var(--radius); } .nav__theme:hover { color: var(--ink); background: var(--bg); } .nav__theme .ic-sun { display: none; } [data-theme="dark"] .nav__theme .ic-moon { display: none; } [data-theme="dark"] .nav__theme .ic-sun { display: inline; } .nav__links a.btn--primary { color: var(--on-brand); } /* win over the nav link color */ .nav__links a.btn--primary:hover { color: #fff; } .nav__toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 1.6rem; line-height: 1; min-width: var(--tap); min-height: var(--tap); cursor: pointer; color: var(--ink); } @media (max-width: 46rem) { .nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: .5rem 1.25rem 1rem; } .nav__links.is-open { display: flex; } .nav__links a { padding: .6rem 0; width: 100%; } .nav__toggle { display: inline-flex; align-items: center; justify-content: center; } } /* ── Hero ─────────────────────────────────────────────────── */ .hero { background: var(--brand-wash); border-bottom: 1px solid var(--border); } /* Dark hero mirrors design-system.epmlabs.com: instead of the diagonal wash, a subtle orange glow radiating from near-centre — two soft epicentres (orange upper-left, pale lower-right) over a faint central wash, on the dark canvas. */ [data-theme="dark"] .hero { background: radial-gradient(38% 42% at 31% 30%, rgba(227, 111, 30, 0.13), transparent 72%), radial-gradient(34% 40% at 71% 72%, rgba(245, 199, 160, 0.09), transparent 72%), radial-gradient(66% 66% at 50% 46%, rgba(240, 151, 90, 0.05), transparent 76%); } .hero__inner { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem); text-align: center; } .hero h1 { max-width: 18ch; margin-inline: auto; } .hero h1 em { font-style: normal; color: var(--brand-deep); } .hero__sub { font-size: 1.3rem; color: var(--ink-2); max-width: 40ch; margin: 0 auto 1.6rem; } .hero__cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } /* ── Game grid ────────────────────────────────────────────── */ .section { padding: clamp(2.5rem, 6vw, 4rem) 0; } .section__head { text-align: center; margin-bottom: 2rem; } .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; align-items: stretch; } /* Cards sit on the design system's sg-card (+ sg-card--hover); content-only here. Meta + status on top so a two-word title never collides with the badge; the blurb flexes so every card in a row is the same height. */ .game-card { display: flex; flex-direction: column; gap: .45rem; height: 100%; text-decoration: none; color: inherit; } .game-card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .game-card__fam { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .game-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: .05rem 0 0; } .game-card__blurb { color: var(--ink-2); font-size: 1rem; margin: 0; flex: 1; } .game-card__more { font-weight: 600; font-size: .95rem; color: var(--brand-deep); margin-top: .35rem; } .game-card--soon { opacity: .9; } .game-card--soon .game-card__title { color: var(--ink-2); } /* Features — a full-width 3-up value grid (replaces the gappy card row) */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } @media (max-width: 52rem) { .features { grid-template-columns: 1fr; gap: 1.75rem; } } .feature { display: grid; gap: .5rem; padding-top: 1.1rem; border-top: 3px solid var(--brand); } .feature__n { font-family: var(--font-display); font-size: .85rem; font-weight: 600; letter-spacing: .08em; color: var(--brand-deep); } .feature h3 { margin: .1rem 0 0; font-size: 1.4rem; } .feature h3 em { font-style: normal; color: var(--brand-deep); } .feature p { margin: 0; color: var(--ink-2); font-size: 1.05rem; } /* ── Article / prose ──────────────────────────────────────── */ .article { padding: clamp(2rem, 5vw, 3.5rem) 0 3rem; } .article__header { margin-bottom: 1.5rem; } .article__meta { color: var(--ink-3); font-size: .95rem; } .prose { font-size: 1.15rem; } .prose > h2 { border-top: 1px solid var(--border); padding-top: 1.4rem; } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin: .35em 0; } .prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 1rem; } .prose th, .prose td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); } .prose th { background: var(--bg); } .callout { background: var(--brand-wash); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.4em 0; } .callout strong { color: var(--brand-deep); } .faq h3 { margin-bottom: .2em; } /* ── CTA block ────────────────────────────────────────────── */ /* CTA is the design-system Gradient Border Card (sg-card--gradient) with an always-on Glow (sg-glow) — no faux-border wash. The DS component draws the gradient border over a clean surface; sg-glow supplies the halo without hover. */ .cta { text-align: center; margin: 2.5rem 0; padding: clamp(2rem, 5vw, 3rem); } .cta h2 { margin-top: 0; } .cta p { color: var(--ink-2); max-width: 46ch; margin-inline: auto; } .cta__note { font-size: .9rem; color: var(--ink-3); margin-top: 1rem; } .cta__email { min-height: 3.25rem; padding: .7rem 1rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font-size: 1.05rem; min-width: 15rem; font-family: var(--font-sans); } .cta__email::placeholder { color: var(--ink-3); } /* ── Footer ───────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 2.5rem 0; margin-top: 2rem; color: var(--ink-3); font-size: .95rem; } .site-footer a { color: var(--ink-2); text-decoration: none; } .site-footer a:hover { color: var(--ink); } .footer-cols { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; } .footer-cols nav { display: grid; gap: .4rem; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } /* Blog index + post meta. The list is deliberately plain: these are shorter pieces feeding the game hubs, not the hubs themselves. */ .post-list__item { padding-block: 1.6rem; border-bottom: 1px solid var(--border); } .post-list__item:first-child { padding-top: 0; } .post-list__item:last-child { border-bottom: 0; } .post-list__item h2 { margin: .15em 0 .35em; font-size: 1.5rem; } .post-list__item h2 a { color: inherit; text-decoration: none; } .post-list__item h2 a:hover { color: var(--brand-deep); } .post__meta { font-size: .95rem; margin: 0; }