/* Press kit pages for Gooder Games. Design tokens mirror index.css so the press pages read as the same studio. Layout is deliberately denser than the marketing site: a journalist is here to find a file fast, not to be sold to. */ :root { --bg-color: #f6f5f3; /* Three reds, because one cannot do all three jobs accessibly. --accent-red brand red, decoration only: borders, rules, shadows. --accent-red-fill background under white text, >= 4.76:1 on white. --accent-red-text red used AS text, >= 4.5:1 on every surface here. Small white-on-#ff4057 lands at 3.43:1, which fails WCAG AA, and press pages get read on bad newsroom monitors. */ --accent-red: #ff4057; --accent-red-fill: #e7001c; --accent-red-text: #da001a; --accent-dark: #282634; --accent-grey: #d8d5d5; --text-color: #282634; --text-muted: #5c5870; --border-color: #282634; --card-bg: #ffffff; --code-bg: #f0eeec; --border-width: 3px; --box-shadow: 6px 6px 0px var(--border-color); --box-shadow-sm: 4px 4px 0px var(--border-color); } /* Set on by an inline script in , so the stored theme is applied before first paint and there is no flash. One class, one source of truth. */ :root.dark-theme { --bg-color: #1a1921; --accent-red: #ff4057; --accent-red-fill: #e7001c; --accent-red-text: #ff576b; --accent-dark: #f6f5f3; --accent-grey: #3c3a4d; --text-color: #f6f5f3; --text-muted: #b3aec8; --border-color: #000000; --card-bg: #282634; --code-bg: #201f2a; --box-shadow: 6px 6px 0px #000000; --box-shadow-sm: 4px 4px 0px #000000; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; } body { font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.65; overflow-x: hidden; -webkit-text-size-adjust: 100%; } h1, h2, h3, h4 { font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; } a { color: inherit; } img { max-width: 100%; height: auto; } .pk-container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; } /* Skip link: newsroom keyboard users and screen readers land on content fast. */ .pk-skip { position: absolute; left: -9999px; top: 0; background: var(--accent-red-fill); color: #fff; padding: 0.75rem 1.25rem; border: var(--border-width) solid var(--border-color); border-radius: 8px; font-weight: 800; z-index: 200; } .pk-skip:focus { left: 1rem; top: 1rem; } /* ---------------------------------------------------------- Navigation --- */ .pk-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 1.25rem; margin: 1rem auto; max-width: 1120px; background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-radius: 999px; box-shadow: var(--box-shadow-sm); position: sticky; top: 0.75rem; z-index: 100; } .pk-nav-logo { height: 38px; display: block; } .pk-nav-logo-dark { display: none; } :root.dark-theme .pk-nav-logo-light { display: none; } :root.dark-theme .pk-nav-logo-dark { display: block; } .pk-nav-links { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; list-style: none; } .pk-nav-links a { text-decoration: none; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.95rem; padding: 0.35rem 0.7rem; border: 2px solid transparent; border-radius: 8px; white-space: nowrap; } .pk-nav-links a:hover, .pk-nav-links a:focus-visible { background-color: var(--accent-red-fill); color: #fff; border-color: var(--border-color); } .pk-theme-toggle { background: var(--accent-dark); color: var(--card-bg); font-size: 1.1rem; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; border: 2px solid var(--border-color); cursor: pointer; line-height: 1; } /* --------------------------------------------------------------- Hero --- */ .pk-hero { position: relative; margin: 0 auto 2rem; max-width: 1120px; border: var(--border-width) solid var(--border-color); border-radius: 20px; overflow: hidden; box-shadow: var(--box-shadow); background-color: #14121c; isolation: isolate; } .pk-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; } /* Keeps the logo and the date legible over the busiest part of the key art. */ .pk-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12, 10, 20, 0.55) 0%, rgba(12, 10, 20, 0.82) 70%); z-index: -1; } /* The hero is sized against viewport height, not just width, because the brief is explicit that the three action buttons sit above the fold. On a 1280x720 laptop the whole header plus the action row has to fit in 720px. */ .pk-hero-inner { padding: clamp(1.75rem, 5vh, 3.5rem) 1.5rem clamp(1.5rem, 4vh, 3rem); text-align: center; color: #ffffff; } .pk-hero-logo { /* 53vh on the width caps the rendered height near 30vh at this aspect ratio, so a short window shrinks the wordmark instead of pushing the buttons off screen. */ width: min(420px, 78%, 53vh); margin: 0 auto 1rem; display: block; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6)); } .pk-hero h1 { /* The wordmark carries the title visually. This stays for search and for screen readers without competing with the logo. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pk-hero-line { font-family: 'Fredoka', sans-serif; font-size: clamp(1.05rem, 2.6vw, 1.5rem); font-weight: 600; line-height: 1.4; max-width: 760px; margin: 0 auto 1rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); } .pk-hero-date { display: inline-block; background-color: var(--accent-red-fill); color: #fff; font-weight: 800; font-size: clamp(0.95rem, 2vw, 1.1rem); letter-spacing: 0.02em; padding: 0.5rem 1.25rem; border: var(--border-width) solid #000; border-radius: 999px; } /* ---------------------------------------------------------- Action row --- */ .pk-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 0.75rem; } .pk-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.25; padding: 1rem 1.75rem; min-height: 68px; flex: 1 1 260px; max-width: 360px; background-color: var(--card-bg); color: var(--text-color); border: var(--border-width) solid var(--border-color); border-radius: 14px; box-shadow: var(--box-shadow-sm); /* colour rides along with background-color. Transitioning only the background makes the label briefly white-on-white while the theme switch eases. */ transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .pk-btn:hover, .pk-btn:focus-visible { transform: translateY(-3px); box-shadow: var(--box-shadow); } .pk-btn:active { transform: translateY(1px); box-shadow: 2px 2px 0px var(--border-color); } .pk-btn-primary { background-color: var(--accent-red-fill); color: #fff; } .pk-btn small { display: block; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.8rem; margin-top: 0.15rem; } .pk-actions-note { text-align: center; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); margin-bottom: 3rem; } /* ----------------------------------------------------------- Sections --- */ .pk-section { padding: 2.75rem 0; border-top: var(--border-width) solid var(--accent-grey); } .pk-section:first-of-type { border-top: none; } .pk-h2 { display: inline-block; background-color: var(--accent-dark); color: var(--bg-color); font-size: clamp(1.5rem, 3.5vw, 2.1rem); padding: 0.4rem 1.2rem; border: var(--border-width) solid var(--border-color); border-radius: 10px; box-shadow: 5px 5px 0px var(--accent-red); margin-bottom: 1.75rem; } .pk-lead { font-size: 1.05rem; font-weight: 700; color: var(--text-muted); max-width: 70ch; margin-bottom: 1.5rem; } /* --------------------------------------------------------- Media grids --- */ .pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .pk-shot { display: block; text-decoration: none; background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-radius: 14px; overflow: hidden; box-shadow: var(--box-shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .pk-shot:hover, .pk-shot:focus-visible { transform: translateY(-4px); box-shadow: var(--box-shadow); } .pk-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--border-width) solid var(--border-color); background-color: var(--accent-grey); } .pk-shot-meta { padding: 0.85rem 1rem; font-size: 0.9rem; font-weight: 700; } .pk-shot-meta span { display: block; font-weight: 700; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; } /* Branding grid holds mixed aspect ratios, so it contains rather than crops. */ .pk-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } .pk-brand { display: flex; flex-direction: column; text-decoration: none; background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-radius: 14px; overflow: hidden; box-shadow: var(--box-shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .pk-brand:hover, .pk-brand:focus-visible { transform: translateY(-4px); box-shadow: var(--box-shadow); } .pk-brand img { display: block; width: 100%; height: 150px; object-fit: contain; padding: 0.75rem; background-color: var(--code-bg); border-bottom: var(--border-width) solid var(--border-color); } .pk-brand-meta { padding: 0.75rem 0.9rem; font-size: 0.88rem; font-weight: 700; } .pk-brand-meta span { display: block; font-size: 0.76rem; color: var(--text-muted); } /* ------------------------------------------------------------- Trailer --- */ .pk-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border: var(--border-width) solid var(--border-color); border-radius: 14px; overflow: hidden; box-shadow: var(--box-shadow); background-color: #14121c; } /* iframe covers the YouTube embed on the Rift Raiders kit. video covers a self-hosted file, which is what a kit uses when the trailer is not on YouTube yet. Same box either way, so the frame does not know the difference. */ .pk-video iframe, .pk-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* object-fit matters only for video: an iframe fills the box by definition, but a video letterboxes itself against a box whose aspect ratio does not match the file's. contain rather than cover, because cropping a trailer frame is worse than a black bar. */ .pk-video video { object-fit: contain; background-color: #14121c; } /* ---------------------------------------------------- Inline link lists --- */ .pk-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; } .pk-links a { display: inline-block; text-decoration: none; font-weight: 800; font-size: 0.92rem; padding: 0.5rem 1rem; background-color: var(--card-bg); border: 2px solid var(--border-color); border-radius: 999px; box-shadow: 3px 3px 0px var(--border-color); } .pk-links a:hover, .pk-links a:focus-visible { background-color: var(--accent-red-fill); color: #fff; } /* ---------------------------------------------------------- Fact sheet --- */ .pk-table-wrap { overflow-x: auto; border: var(--border-width) solid var(--border-color); border-radius: 14px; box-shadow: var(--box-shadow-sm); background-color: var(--card-bg); } .pk-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .pk-table th, .pk-table td { text-align: left; vertical-align: top; padding: 0.7rem 1rem; border-bottom: 2px solid var(--accent-grey); } .pk-table tr:last-child th, .pk-table tr:last-child td { border-bottom: none; } .pk-table th { font-family: 'Fredoka', sans-serif; font-weight: 600; white-space: nowrap; width: 1%; color: var(--text-color); background-color: var(--code-bg); border-right: 2px solid var(--accent-grey); } .pk-table td { font-weight: 700; word-break: break-word; } .pk-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .pk-spec { background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-radius: 14px; box-shadow: var(--box-shadow-sm); padding: 1.25rem 1.5rem; } .pk-spec h3 { font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--accent-red-text); } .pk-spec p { font-weight: 700; font-size: 0.95rem; } /* ------------------------------------------------------- Copy-out block --- */ .pk-copy { background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-radius: 14px; box-shadow: var(--box-shadow-sm); margin-bottom: 1.5rem; overflow: hidden; } .pk-copy-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 1.25rem; background-color: var(--code-bg); border-bottom: 2px solid var(--accent-grey); } .pk-copy-head h3 { font-size: 1.05rem; } .pk-copy-head h3 span { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.8rem; color: var(--text-muted); margin-left: 0.4rem; } /* Injected by press.js. It is not in the markup, so with JavaScript off there is no dead button, just plain selectable text. */ .pk-copy-btn { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.85rem; padding: 0.4rem 0.9rem; background-color: var(--accent-red-fill); color: #fff; border: 2px solid var(--border-color); border-radius: 8px; box-shadow: 3px 3px 0px var(--border-color); cursor: pointer; white-space: nowrap; } .pk-copy-btn:active { transform: translateY(1px); box-shadow: 1px 1px 0px var(--border-color); } .pk-copy-btn.is-done { background-color: #2e9e5b; } .pk-copy-body { padding: 1.25rem 1.5rem; font-size: 1rem; font-weight: 600; white-space: pre-wrap; font-family: inherit; line-height: 1.7; } /* ------------------------------------------------------------ Features --- */ .pk-features { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; } .pk-features li { background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-left: 10px solid var(--accent-red); border-radius: 12px; box-shadow: var(--box-shadow-sm); padding: 1.25rem 1.5rem; font-weight: 600; font-size: 0.98rem; } .pk-features strong { display: block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.15rem; margin-bottom: 0.35rem; } /* ---------------------------------------------------------- Permission --- */ .pk-permission { background-color: var(--accent-red-fill); color: #fff; border: var(--border-width) solid var(--border-color); border-radius: 16px; box-shadow: var(--box-shadow); padding: 1.75rem 2rem; } .pk-permission p { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(1.1rem, 2.6vw, 1.45rem); line-height: 1.4; } .pk-permission p + p { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.95rem; margin-top: 0.85rem; } /* ----------------------------------------------------------------- FAQ --- */ .pk-faq { display: grid; gap: 1.25rem; } .pk-faq-item { background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-radius: 14px; box-shadow: var(--box-shadow-sm); padding: 1.25rem 1.5rem; } .pk-faq-item h3 { font-size: 1.15rem; color: var(--accent-red-text); margin-bottom: 0.5rem; } .pk-faq-item p { font-weight: 600; font-size: 0.98rem; } .pk-faq-item p + p { margin-top: 0.75rem; } /* -------------------------------------------------------------- Quotes --- */ .pk-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; } .pk-quote { background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-radius: 14px; box-shadow: var(--box-shadow-sm); padding: 1.5rem 1.75rem; margin: 0; } .pk-quote p { font-family: 'Fredoka', sans-serif; font-weight: 400; font-size: 1.1rem; line-height: 1.5; } .pk-quote figcaption { margin-top: 0.9rem; font-weight: 800; font-size: 0.9rem; color: var(--accent-red-text); } /* ---------------------------------------------------------------- Team --- */ .pk-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .pk-person { background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-left: 10px solid var(--accent-red); border-radius: 14px; box-shadow: var(--box-shadow-sm); padding: 1.5rem; text-align: center; } .pk-person img { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; border: var(--border-width) solid var(--border-color); background-color: #fff; margin-bottom: 0.75rem; } .pk-person h3 { font-size: 1.3rem; } .pk-person p { font-weight: 700; font-size: 0.95rem; color: var(--text-muted); } .pk-boilerplate { background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-radius: 14px; box-shadow: var(--box-shadow-sm); padding: 1.5rem 1.75rem; margin-top: 1.5rem; font-weight: 600; } .pk-boilerplate h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .pk-credits { list-style: none; margin-top: 1.25rem; font-size: 0.92rem; font-weight: 700; color: var(--text-muted); } .pk-credits li { padding-left: 1.1rem; position: relative; margin-bottom: 0.25rem; } .pk-credits li::before { content: '\25B8'; position: absolute; left: 0; color: var(--accent-red-text); } /* -------------------------------------------------------------- Footer --- */ .pk-footer { margin-top: 2rem; padding: 2.5rem 1.5rem 3rem; border-top: var(--border-width) solid var(--border-color); background-color: var(--card-bg); text-align: center; } .pk-footer-mail { font-family: 'Fredoka', sans-serif; font-size: clamp(1.3rem, 4vw, 2rem); font-weight: 700; color: var(--accent-red-text); text-decoration: none; word-break: break-word; } .pk-footer-mail:hover { text-decoration: underline; } .pk-footer-note { font-weight: 700; color: var(--text-muted); margin: 0.5rem 0 1.5rem; } .pk-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; list-style: none; margin-bottom: 1.75rem; } .pk-footer-links a { text-decoration: none; font-weight: 800; font-size: 0.92rem; padding: 0.45rem 1rem; border: 2px solid var(--border-color); border-radius: 999px; box-shadow: 3px 3px 0px var(--border-color); background-color: var(--bg-color); } .pk-footer-links a:hover, .pk-footer-links a:focus-visible { background-color: var(--accent-red-fill); color: #fff; } .pk-footer-legal { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); } /* ------------------------------------------------------- /press index --- */ .pk-index-head { text-align: center; padding: 3rem 0 2rem; } /* No display rule here on purpose: the light variant stays inline and centres on text-align, the dark variant is switched to block by the theme rule and centres on the auto margins. Setting display would out-specify both. */ .pk-index-head img { width: min(320px, 72%); margin: 0 auto 1.5rem; } .pk-index-head h1 { font-size: clamp(2.2rem, 7vw, 4rem); text-transform: uppercase; margin-bottom: 0.75rem; } .pk-index-head p { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: var(--text-muted); max-width: 60ch; margin: 0 auto; } .pk-kits { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; padding-bottom: 3rem; } .pk-kit { display: flex; flex-direction: column; text-decoration: none; color: inherit; background-color: var(--card-bg); border: var(--border-width) solid var(--border-color); border-radius: 18px; overflow: hidden; box-shadow: var(--box-shadow); transition: transform 0.15s ease, box-shadow 0.15s ease; } .pk-kit:hover, .pk-kit:focus-visible { transform: translateY(-5px); box-shadow: 10px 10px 0px var(--border-color); } .pk-kit img { display: block; width: 100%; aspect-ratio: 920 / 430; object-fit: cover; border-bottom: var(--border-width) solid var(--border-color); background-color: var(--accent-grey); } .pk-kit-body { padding: 1.5rem; flex: 1; } .pk-kit-body h2 { font-size: 1.7rem; color: var(--accent-red-text); margin-bottom: 0.4rem; } .pk-kit-body p { font-weight: 700; font-size: 0.95rem; } .pk-tag { display: inline-block; background-color: var(--accent-dark); color: var(--bg-color); padding: 0.25rem 0.75rem; border: 2px solid var(--border-color); border-radius: 999px; font-weight: 800; font-size: 0.8rem; margin-bottom: 0.75rem; } .pk-kit-soon { opacity: 0.85; } .pk-kit-soon .pk-tag { background-color: var(--accent-grey); color: var(--text-color); } /* ------------------------------------------------------------- Mobile --- */ @media (max-width: 720px) { .pk-nav { border-radius: 18px; padding: 0.6rem 0.9rem; } .pk-nav-links a { font-size: 0.85rem; padding: 0.3rem 0.5rem; } .pk-hero { border-radius: 14px; } .pk-hero-inner { padding: 2.25rem 1rem 2rem; } /* Stacked buttons get compact so all three still clear a phone viewport. They are the first thing a journalist needs and scrolling to find the contact address is exactly the friction this page exists to remove. */ .pk-actions { gap: 0.65rem; } .pk-btn { flex: 1 1 100%; max-width: none; font-size: 1.05rem; min-height: 58px; padding: 0.65rem 1.25rem; } .pk-copy-body, .pk-quote, .pk-permission { padding-left: 1.15rem; padding-right: 1.15rem; } .pk-table th { white-space: normal; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* Print: journalists do print fact sheets. Drop the chrome, keep the facts, and expose link targets so a printed page stays actionable. */ @media print { .pk-nav, .pk-actions, .pk-actions-note, .pk-video, .pk-copy-btn, .pk-skip { display: none !important; } body { background: #fff; color: #000; } .pk-copy, .pk-table-wrap, .pk-faq-item, .pk-quote, .pk-spec { box-shadow: none; break-inside: avoid; } a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.75em; word-break: break-all; } }