/* owdgames.com — page layer on top of the Industry design system (styles.css). Every value here comes from the design source; only the responsive fallbacks at the bottom are additions. */ /* Fallback for no-JS; app.js takes over with its own easing and duration. */ html { scroll-behavior: smooth; } /* Anchor targets land with air above them instead of flush to the edge. */ :target, [id] { scroll-margin-top: 24px; } body { margin: 0; background: var(--color-bg); text-wrap: pretty; } a:not(.btn) { color: var(--link); } a:not(.btn):hover { color: var(--link-hover); } /* — dark theme — Industry ships light-only, so the dark ground is defined here: same steel accent, raised to the ramp step that carries on ink (400) instead of the one tuned for paper. app.js stamps data-theme on ; the media query below repeats the block so the system preference still lands without JavaScript. */ /* Which ramp step a role takes depends on the ground, so each theme sets these and the rules below stay theme-agnostic. On paper the deep steps carry text; on ink they are unreadable and the light steps carry it instead. */ :root { --link: var(--color-accent-700); --link-hover: var(--color-accent-900); --primary-hover: var(--color-accent-700); --primary-active: var(--color-accent-800); --secondary-hover-text: var(--color-accent-800); --tag-accent-bg: var(--color-accent-100); --tag-accent-text: var(--color-accent-800); } :root[data-theme="dark"] { color-scheme: dark; --color-bg: #16181a; --color-surface: #1e2124; --color-text: #e6e7e9; --color-accent: #94bce3; --color-divider: color-mix(in srgb, #e6e7e9 18%, transparent); --shadow-sm: 0 1px 2px color-mix(in srgb, #000 55%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #000 55%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #000 60%, transparent); --link: var(--color-accent-300); --link-hover: var(--color-accent-200); --primary-hover: var(--color-accent-200); --primary-active: var(--color-accent-100); --secondary-hover-text: var(--color-accent-200); --tag-accent-bg: color-mix(in srgb, var(--color-accent) 20%, transparent); --tag-accent-text: var(--color-accent-200); } /* Same block again for the no-JavaScript path: app.js stamps data-theme, so without it only the system preference is left to go on. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #16181a; --color-surface: #1e2124; --color-text: #e6e7e9; --color-accent: #94bce3; --color-divider: color-mix(in srgb, #e6e7e9 18%, transparent); --shadow-sm: 0 1px 2px color-mix(in srgb, #000 55%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #000 55%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #000 60%, transparent); --link: var(--color-accent-300); --link-hover: var(--color-accent-200); --primary-hover: var(--color-accent-200); --primary-active: var(--color-accent-100); --secondary-hover-text: var(--color-accent-200); --tag-accent-bg: color-mix(in srgb, var(--color-accent) 20%, transparent); --tag-accent-text: var(--color-accent-200); } } .tag-accent { background: var(--tag-accent-bg); color: var(--tag-accent-text); } /* — theme toggle — */ .theme-toggle { flex: none; } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-to-light { display: none; } :root[data-theme="dark"] .theme-toggle .icon-to-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-to-light { display: block; } /* — interaction states — The design system puts .btn-primary's hover on --color-accent-600, but the base --color-accent (#5980a6) already sits on that step of the ramp (#597ea3), so the hover was invisible. Shift every state one step deeper — still ramp values, as the system asks, just ones you can actually see. */ .btn { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: var(--color-accent-500); color: var(--secondary-hover-text); } .btn-secondary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); border-color: var(--color-accent-700); } /* Inert buttons are labels, not controls — no state at all. */ .btn-inert, .btn-inert:hover, .btn-inert:active { background: transparent; border-color: var(--color-divider); color: var(--color-text); } /* 14px nav links need the same step as body links, not the raw accent. */ .nav a:not(.btn):hover { color: var(--link); } /* The design system's `.nav a { color: inherit }` and `.nav a:hover { color: var(--color-accent) }` are specificity 0,1,1 and beat `.btn-primary` at 0,1,0, so the nav's Discord button drew ink on steel, then turned its label accent-on-accent on hover — the same colour as its own fill. Re-assert the button's own colours at 0,2,0. */ .nav .btn-primary, .nav .btn-primary:hover, .nav .btn-primary:active { color: var(--color-bg); } .nav .btn-secondary:hover { color: var(--secondary-hover-text); } /* — skip link — */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-bg); font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-decoration: none; } .skip-link:focus { left: 0; } /* — shell — */ .nav { padding-inline: max( clamp(20px, 5vw, 72px), calc((100% - 1200px) / 2 + clamp(20px, 5vw, 72px)) ); } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); } /* — hero — */ .hero { padding: 72px 0 60px; } .hero-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(40px, 5.5vw, 72px); line-height: 1.06; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 0 -0.052em; max-width: 20ch; } .hero-title span { display: block; } .hero-lede { font-size: 16px; line-height: 24px; max-width: 60ch; margin: 32px 0 0; } /* — section chrome — */ .section { padding: 60px 0; } .section-last { padding: 60px 0 72px; } .kicker { display: block; font-size: 13px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--link); margin-bottom: 12px; } .rule { height: 1px; background: var(--color-divider); margin-bottom: 32px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 48px); } /* — game cards — */ .game { display: flex; flex-direction: column; } .game-media { border-bottom: 1px solid var(--color-divider); } .game-media img { width: 100%; height: auto; /* beat the width/height attributes so the ratio wins */ aspect-ratio: 16 / 9; object-fit: cover; } .game-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .game-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; } .game-title { font-size: 26px; line-height: 28px; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } .game-desc { font-size: 15px; line-height: 24px; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); } .game-meta { font-size: 13px; line-height: 20px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .game-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 12px; } .btn-inert { opacity: 0.45; cursor: default; } /* — about — */ .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px clamp(24px, 5vw, 96px); } .about-title { font-size: 32px; line-height: 36px; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } .about-body { font-size: 15px; line-height: 24px; margin: 16px 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); } .team { display: flex; flex-direction: column; gap: 0; } .team-row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-divider); align-items: baseline; } .team-row:last-child { border-bottom: none; } .team-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; letter-spacing: 0.02em; min-width: 9ch; } .team-role { font-size: 14px; line-height: 22px; color: color-mix(in srgb, var(--color-text) 78%, transparent); } /* — community panels — */ .panel { padding: 32px 24px; } .panel-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; } .panel-title { font-size: 24px; line-height: 26px; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } .panel-body { font-size: 15px; line-height: 24px; margin: 12px 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); } .panel-actions { margin-top: 20px; } /* — 404 — */ .error-page { min-height: 56vh; } .error-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; } .error-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(40px, 5.5vw, 72px); line-height: 1.06; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 0 -0.052em; max-width: 14ch; } .error-body { font-size: 16px; line-height: 24px; max-width: 46ch; margin: 24px 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); } .actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: 24px; } /* — footer — */ .site-footer { padding: 48px 0; font-size: 13px; line-height: 24px; color: color-mix(in srgb, var(--color-text) 70%, transparent); border-top: 1px solid var(--color-divider); display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; } .footer-links { display: flex; gap: 16px; } /* — responsive fallbacks (additions to the design source) — */ @media (max-width: 560px) { .nav { flex-wrap: wrap; row-gap: var(--space-2); } .nav-brand { flex: 1 0 100%; margin-right: 0; } .hero { padding: 48px 0 40px; } .game-head { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }