/* ========================================================================= SyphonGames — public stylesheet Brand: SyphonDigital house system — ink ground, warm neutrals, one brass accent Type: Instrument Serif (display) / Inter (interface) ART DIRECTION NOTE, because it explains most of the decisions below. This is a games portal, and the instinct is to make the chrome loud. It does the opposite: the frame goes quiet so that THE GAME ART IS THE COLOUR. Twelve vivid thumbnails on a warm-black ground read as a curated catalogue; the same thumbnails inside cyan gradients and yellow pills read as a link farm. So: no gradients as decoration, sharp 2–3px corners instead of pills, a single brass accent used sparingly, and the serif reserved for display sizes only — interface text stays in Inter, where it is legible at 12px. Matches syphondigital.online, which is the parent site. ========================================================================= */ /* -------------------------------------------------------------- tokens */ :root { /* One accent, three weights. Brass reads as "premium hardware", carries a 10:1 contrast ratio on the ground, and is the same accent the parent site and the Concierge product use. */ --primary: #d9b477; --primary-bright: #f0dcb4; --primary-deep: #a9834a; --secondary: #0b0a09; /* Deliberately NOT a second hue. The old palette had cyan AND yellow fighting each other and the game art. Where two states must be distinguished (a NEW badge vs a FEATURED one) the difference is brass vs paper, not two colours. */ --accent: #f4efe7; --accent-deep: #cfc7ba; /* Surfaces climb away from ink with a faint WARM cast, matching the parent site's plaster-and-brass interior rather than the old cool cyan cast. */ --surface-0: #0b0a09; --surface-1: #121010; --surface-2: #171513; --surface-3: #201c19; --line: #2b2622; --line-soft: #1c1917; /* Contrast on --surface-0, measured: text 19.4:1, muted 7.7:1, dim 5.4:1. Every use of --text-dim is small text, so 4.5:1 is the floor. Do not darken. */ --text: #f4efe7; --text-muted: #a9a097; --text-dim: #8b847a; --font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Both of these were referenced further down the old stylesheet but never defined, so .strip__title and .ad--test silently fell back to the browser default. Defined now. */ --font-head: var(--font-body); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Sharp, not soft. Pills belong to the arcade register we moved away from. */ --radius-sm: 2px; --radius: 3px; --radius-lg: 4px; --radius-pill: 2px; --shadow-card: 0 10px 30px -12px rgba(0, 0, 0, .8); --shadow-lift: 0 22px 48px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(217, 180, 119, .3); --ease: cubic-bezier(.16, 1, .3, 1); --header-h: 68px; --wrap: 1360px; /* Safe-area insets, behind variables rather than used inline. Two reasons: env() cannot be used inside some shorthand contexts, and routing everything through a variable means the whole layout can be tested on a desktop by overriding --sat/--sab in devtools — otherwise notch bugs are only reproducible on the device that has the notch. Paired with viewport-fit=cover in the page ; without that, env() always resolves to 0 and none of this does anything. */ --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); } /* -------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; /* dvh accounts for the retractable mobile address bar; vh above is the fallback for browsers without it. Ordering matters — dvh must come second. */ min-height: 100dvh; background: var(--surface-0); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } img, svg, video, canvas, iframe { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } /* The serif is a DISPLAY face. It is applied at heading sizes only; anything that has to work at 14px or below stays in Inter, which is why .card__title and .stage__bar-title below deliberately opt out. */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--primary); color: #16120b; } /* ------------------------------------------------------------ utilities */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; /* The insets matter in landscape on a notched phone, where the notch eats into one side and content would otherwise sit under it. */ padding-left: calc(clamp(16px, 4vw, 32px) + var(--sal)); padding-right: calc(clamp(16px, 4vw, 32px) + var(--sar)); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -60px; left: 12px; z-index: 200; background: var(--accent); color: var(--secondary); padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; transition: top .2s var(--ease); } .skip-link:focus { top: 12px; } .hidden { display: none !important; } /* --------------------------------------------------------------- header */ /* The brand and search sat under the notch / status bar on real phones. The header is sticky at top:0, so its own top edge is the thing that needs the inset — padding here rather than a margin, so the blurred background still extends up behind the system UI instead of leaving a bare strip. */ .site-header { position: sticky; top: 0; z-index: 100; padding-top: var(--sat); background: rgba(11, 10, 9, .9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand__mark { width: 34px; height: 34px; } /* Set in the interface face, uppercase and tracked — the same lockup treatment the parent site uses, so the two headers read as one family. */ .brand__text { font-family: var(--font-body); font-weight: 400; font-size: 15px; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; } .brand__text em { font-style: normal; font-weight: 600; color: var(--primary); } /* Search sits in the header because finding a game is the site's core job. */ .header-search { position: relative; flex: 1; max-width: 460px; } .header-search__input { width: 100%; height: 42px; padding: 0 44px 0 42px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); transition: border-color .2s var(--ease), background .2s var(--ease); } .header-search__input::placeholder { color: var(--text-dim); } .header-search__input:focus { border-color: var(--primary-deep); background: var(--surface-1); outline: none; } .header-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-dim); pointer-events: none; } .header-search__submit { position: absolute; right: 5px; top: 5px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: #16120b; background: var(--primary); transition: background .2s var(--ease); } .header-search__submit:hover { background: var(--primary-bright); } /* Live suggestions under the header search. */ .header-search__results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; max-height: 380px; overflow-y: auto; } .suggest { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); transition: background .15s var(--ease); } .suggest:last-child { border-bottom: 0; } .suggest:hover, .suggest:focus-visible { background: var(--surface-3); } .suggest img { width: 56px; height: 32px; object-fit: cover; border-radius: 2px; } .suggest strong { font-size: 14px; font-weight: 600; } .suggest span { font-size: 12px; color: var(--text-dim); } .suggest--empty { padding: 16px; color: var(--text-dim); justify-content: center; } .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav__link { position: relative; padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); transition: color .2s var(--ease); white-space: nowrap; } .nav__link:hover { color: var(--text); } .nav__link.is-active { color: var(--text); } /* A single brass hairline marks the current section — the same datum rule that runs around the walls of the 3D studio on the parent site. */ .nav__link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: var(--primary); } .nav__toggle { display: none; padding: 8px; border-radius: var(--radius-sm); } /* ------------------------------------------------------- category rail */ .rail { border-bottom: 1px solid var(--line-soft); background: var(--surface-1); } /* The chips wrap onto a second row rather than scrolling off the edge. The rail used to scroll horizontally, but with the scrollbar hidden there was nothing telling anyone it could — on a mouse, the categories past the fold were simply unreachable. Wrapping shows the lot. Below 860px it goes back to a swipe, where the gesture is obvious and vertical space is worth more. */ .rail__track { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 10px; } @media (max-width: 860px) { .rail__track { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } } .rail__track::-webkit-scrollbar { display: none; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; scroll-snap-align: start; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .chip:hover { color: var(--text); border-color: var(--primary-deep); } .chip.is-active { background: var(--primary); border-color: var(--primary); color: #16120b; font-weight: 600; } .chip__count { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------- main */ main { flex: 1; padding-block: clamp(24px, 4vw, 44px); } .section { margin-bottom: clamp(36px, 5vw, 60px); } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); } .section__title { font-size: clamp(22px, 2.6vw, 30px); display: flex; align-items: center; gap: 12px; } /* A short brass rule before section titles. Flat, not a gradient — the parent site's hairline motif, borrowed intact. */ .section__title::before { content: ""; width: 22px; height: 1px; background: var(--primary); flex: 0 0 auto; } .section__sub { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; } .section__link { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); white-space: nowrap; transition: color .2s var(--ease); } .section__link:hover { color: var(--primary-bright); } /* ----------------------------------------------------------------- hero */ .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(26px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 52px); /* Flat. The old version stacked two coloured radial gradients here; against a featured game's cover art they simply muddied it. */ background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; } /* One brass hairline across the top edge, in place of the glow. */ .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--primary-deep), transparent 62%); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--primary); margin-bottom: 18px; } .hero__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--primary-deep); } .hero__title { font-size: clamp(34px, 5.4vw, 62px); margin-bottom: 16px; text-wrap: balance; } .hero__title em { font-style: italic; color: var(--primary); } .hero__text { color: var(--text-muted); font-size: clamp(15px, 1.3vw, 17px); max-width: 48ch; margin-bottom: 26px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero__stats { display: flex; gap: clamp(18px, 3vw, 34px); margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-soft); } .hero__stat b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; } .hero__stat span { font-size: 11px; color: var(--text-dim); letter-spacing: .16em; text-transform: uppercase; } .hero__art { position: relative; } /* display:block is load-bearing, not decoration. is inline by default, and an inline element ignores aspect-ratio, gives the img no height to fill, and — because it is the positioned ancestor — hands .hero__card-body a containing block derived from its line boxes rather than the card. The body collapses to near-zero width and the description wraps one letter per line, running down the side of the image. */ .hero__card { display: block; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); aspect-ratio: 16 / 10; background: var(--surface-2); } .hero__card img { display: block; width: 100%; height: 100%; object-fit: cover; } .hero__card-body { position: absolute; inset: auto 0 0 0; padding: 18px; background: linear-gradient(transparent, rgba(11, 10, 9, .95) 62%); } .hero__card-body h3 { font-size: 22px; margin-bottom: 4px; } .hero__card-body p { font-size: 13px; color: var(--text-muted); } /* --------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 26px; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: transform .16s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); border: 1px solid transparent; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--primary); color: #16120b; } .btn--primary:hover { background: var(--primary-bright); } /* Paper, not a second hue — the strongest thing available on an ink ground. */ .btn--accent { background: var(--accent); color: var(--secondary); } .btn--accent:hover { background: #fff; } .btn--ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn--ghost:hover { border-color: var(--primary-deep); color: var(--primary); } .btn--sm { height: 36px; padding: 0 16px; font-size: 12px; } .btn--block { width: 100%; } .btn[disabled] { opacity: .5; pointer-events: none; } /* ----------------------------------------------------------------- grid */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .grid--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* ------------------------------------------------------------ game card */ .card { position: relative; display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .card:hover, .card:focus-within { transform: translateY(-3px); border-color: var(--line); box-shadow: var(--shadow-lift); } .card__media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; } .card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease), filter .3s var(--ease); } /* No saturate() boost. The art is already the brightest thing on the page and pushing it further just posterises anything already vivid. */ .card:hover .card__img { transform: scale(1.05); } /* Signature: the intake. The gesture is kept — the card draws the game up on hover — but the cyan wash is now a plain ink scrim, so the thumbnail darkens evenly instead of being tinted a colour the game never used. */ .card__intake { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 10, 9, .62); opacity: 0; transition: opacity .25s var(--ease); } .card:hover .card__intake, .card:focus-within .card__intake { opacity: 1; } .card__play { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #16120b; transform: scale(.72); transition: transform .28s var(--ease); } .card:hover .card__play, .card:focus-within .card__play { transform: scale(1); } .card__badge { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--accent); color: var(--secondary); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } /* Brass vs paper distinguishes the two badge states without a second hue. */ .card__badge--new { background: var(--primary); color: #16120b; } .card__plays { position: absolute; bottom: 8px; right: 8px; padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(11, 10, 9, .82); font-size: 11px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; } .card__body { padding: 11px 12px 13px; } /* Interface face on purpose: a serif at 14px in a dense grid of two-line titles loses more legibility than it gains in character. */ .card__title { font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: 0; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .04em; color: var(--text-dim); } .card__cat { color: var(--primary-deep); font-weight: 600; text-transform: uppercase; } /* Stretched link keeps the whole card clickable without nesting anchors. */ .card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* --------------------------------------------------------- game skeleton */ .skeleton { background: var(--surface-2); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); } .skeleton__media { aspect-ratio: 16 / 9; } .skeleton__line { height: 11px; margin: 10px 12px; border-radius: 2px; } .skeleton__line:last-child { width: 55%; margin-bottom: 14px; } .skeleton__media, .skeleton__line { background: linear-gradient(90deg, var(--surface-3) 25%, #2c2723 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; } @keyframes shimmer { to { background-position: -200% 0; } } /* -------------------------------------------------------------- game page */ .player { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; } .stage { position: relative; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; } .stage.is-fullscreen { aspect-ratio: auto; height: 100vh; height: 100dvh; } .stage__frame { width: 100%; height: 100%; border: 0; background: var(--surface-0); } /* The pre-roll: nothing loads until the player asks for it. Saves bandwidth and stops twelve iframes fighting for the CPU on a phone. */ .stage__preroll { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; background-size: cover; background-position: center; } .stage__preroll::before { content: ""; position: absolute; inset: 0; background: rgba(11, 10, 9, .82); backdrop-filter: blur(6px); } .stage__preroll > * { position: relative; } .stage__preroll h1 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 10px; } .stage__preroll p { color: var(--text-muted); margin-bottom: 22px; } .stage__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); } .stage__bar-title { font-family: var(--font-body); font-weight: 600; font-size: 14px; } .stage__bar-tools { margin-left: auto; display: flex; gap: 6px; } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-muted); transition: background .2s var(--ease), color .2s var(--ease); } .icon-btn:hover { background: var(--surface-3); color: var(--primary); } .icon-btn.is-on { color: var(--primary); } .panel { background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px; } .panel + .panel { margin-top: 16px; } .panel h2 { font-size: 19px; margin-bottom: 10px; } .panel p { color: var(--text-muted); font-size: 14px; } .dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; } .dl dt { color: var(--text-dim); } .dl dd { text-align: right; font-weight: 500; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .tag { padding: 4px 10px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--line); font-size: 11.5px; letter-spacing: .03em; color: var(--text-muted); transition: color .2s var(--ease), border-color .2s var(--ease); } .tag:hover { color: var(--primary); border-color: var(--primary-deep); } /* Rating stars */ .stars { display: flex; gap: 4px; } .stars button { width: 26px; height: 26px; color: var(--text-dim); transition: color .15s var(--ease), transform .15s var(--ease); } .stars button:hover { transform: scale(1.15); } .stars button.is-lit { color: var(--primary); } .rating-note { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; } /* ------------------------------------------------------------- prose page */ .prose { max-width: 74ch; } .prose h1 { font-size: clamp(32px, 4.6vw, 48px); margin-bottom: 10px; } .prose h2 { font-size: 25px; margin: 38px 0 10px; } .prose h3 { font-size: 19px; margin: 24px 0 6px; } .prose p, .prose li { color: var(--text-muted); margin-bottom: 12px; } .prose ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; } .prose li { margin-bottom: 6px; } .prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: var(--primary-bright); } .prose strong { color: var(--text); } .prose__updated { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 28px; } .prose__lede { font-size: 17px; color: var(--text); margin-bottom: 24px; } /* ---------------------------------------------------------------- contact */ /* Google Forms renders its own white card, so it is boxed rather than blended — pretending an embedded third-party form is native never works, and the seam looks like a bug. A clear frame reads as deliberate. */ .contact-frame { width: 100%; height: min(1100px, 148vh); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); margin-block: 8px 28px; } .notice-block { padding: 16px 18px; border-left: 2px solid var(--primary-deep); background: rgba(217, 180, 119, .05); color: var(--text-muted); margin-bottom: 28px; } .notice-block a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } /* ---------------------------------------------------------------- toolbar */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius); margin-bottom: 20px; } .toolbar__label { font-size: 12px; letter-spacing: .06em; color: var(--text-dim); } .toolbar__spacer { margin-left: auto; } .select { height: 36px; padding: 0 32px 0 12px; /* Chevron stroke follows --text-dim; update both together. */ background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b847a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); appearance: none; cursor: pointer; font-size: 13px; } .select:focus { border-color: var(--primary-deep); outline: none; } /* ------------------------------------------------------------ empty state */ .empty { text-align: center; padding: clamp(40px, 8vw, 80px) 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface-1); } .empty__icon { font-size: 42px; margin-bottom: 12px; opacity: .5; } .empty h2 { font-size: 24px; margin-bottom: 8px; } .empty p { color: var(--text-muted); max-width: 44ch; margin: 0 auto 20px; } /* ------------------------------------------------------------- pagination */ .pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 32px; } .pager__btn { min-width: 38px; height: 38px; padding: 0 12px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .pager__btn:hover:not([disabled]) { border-color: var(--primary-deep); color: var(--primary); } .pager__btn.is-active { background: var(--primary); border-color: var(--primary); color: #16120b; } .pager__btn[disabled] { opacity: .35; pointer-events: none; } /* ------------------------------------------------------------ breadcrumbs */ .crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 16px; } .crumbs a:hover { color: var(--primary); } .crumbs span[aria-hidden] { opacity: .5; } /* ----------------------------------------------------------------- toast */ .toast { position: fixed; bottom: calc(20px + var(--sab)); left: 50%; transform: translate(-50%, 120%); z-index: 300; padding: 12px 22px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line); box-shadow: var(--shadow-card); font-size: 14px; font-weight: 500; transition: transform .3s var(--ease); } .toast.is-up { transform: translate(-50%, 0); } /* Error is the one place a second hue is justified: "something went wrong" must not be sayable in the same colour as "this is interactive". */ .toast--error { border-color: #b4553f; color: #f0b3a3; } .toast--ok { border-color: var(--primary-deep); } /* ---------------------------------------------------------------- footer */ .site-footer { margin-top: auto; /* The extra bottom inset clears the iPhone home indicator, which otherwise sits over the copyright line. */ padding-block: 48px calc(28px + var(--sab)); background: var(--surface-1); border-top: 1px solid var(--line-soft); } .site-footer__grid { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 32px; } .site-footer__about p { color: var(--text-dim); font-size: 13px; max-width: 40ch; margin-top: 12px; } .site-footer h3 { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; } .site-footer li { margin-bottom: 8px; } .site-footer a { font-size: 13px; color: var(--text-dim); transition: color .2s var(--ease); } .site-footer a:hover { color: var(--text); } /* The submit line sits under the footer blurb and should read as a nudge, not as body copy. */ .site-footer__submit { margin-top: 10px; } .site-footer__submit a { color: var(--primary); font-weight: 500; } .site-footer__submit a:hover { color: var(--primary-bright); } .site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--text-dim); } /* States the relationship out loud. SyphonGames is a SyphonDigital product, and the footer is where that belongs — not stamped across the header. */ .site-footer__parent { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); } .site-footer__parent a { color: var(--text-muted); font-size: inherit; letter-spacing: inherit; } .site-footer__parent a:hover { color: var(--primary); } /* ------------------------------------------------------------ responsive */ @media (max-width: 1024px) { .player { grid-template-columns: 1fr; } .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero__art { order: -1; } .nav { position: fixed; inset: calc(var(--header-h) + var(--sat)) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; background: var(--surface-1); border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .25s var(--ease); } .nav.is-open { transform: translateY(0); } .nav__link { padding: 12px 14px; } .nav__link.is-active::after { left: 14px; right: auto; width: 20px; } .nav__toggle { display: grid; place-items: center; margin-left: auto; } } @media (max-width: 620px) { .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .brand__text { display: none; } .header-search { max-width: none; } .site-footer__grid { grid-template-columns: 1fr; gap: 24px; } .hero__stats { flex-wrap: wrap; gap: 16px 24px; } .stage { aspect-ratio: 4 / 3; } } /* ---------------------------------------------------------- preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .card:hover { transform: none; } .card:hover .card__img { transform: none; } } @media print { .site-header, .site-footer, .rail, .stage { display: none; } body { background: #fff; color: #000; } } /* ------------------------------------------------------------------ * * Ads * * Slots are hidden until main.js decides there is something to put in * them, so with advertising switched off they cost the layout nothing. * Each one is labelled: an ad a player mistakes for part of the site is * a dark pattern, and Google's policies forbid it too. * ------------------------------------------------------------------ */ .ad { position: relative; display: block; overflow: hidden; background: var(--surface-1); border: 1px solid var(--line-soft); border-radius: var(--radius); } .ad[hidden] { display: none; } /* The label sits above the unit rather than over it, so it can never be mistaken for ad content or obscure a click. */ .ad::before { content: 'Advertisement'; display: block; padding: 5px 10px 0; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); } .ad__inner { padding: 6px 10px 10px; } /* Above the player and at the top of listings. min-height reserves space so the page does not lurch when the unit arrives; it collapses entirely if nothing fills it. */ .ad--leaderboard { min-height: 106px; margin-bottom: 20px; } /* Beside the player, in the column the panels already occupy. */ .ad--rail { min-height: 276px; margin-bottom: 16px; } /* Between rows of cards. */ .ad--feed { min-height: 106px; margin: 24px 0; } .ad--test { display: grid; place-items: center; min-height: 106px; border-style: dashed; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; } .ad--test.ad--rail { min-height: 276px; } @media (max-width: 1024px) { /* The rail unit stacks under the game on narrow screens, where a 300px column does not exist. */ .ad--rail { min-height: 0; } } @media (max-width: 620px) { .ad--leaderboard { min-height: 60px; } } @media print { .ad { display: none !important; } } /* ------------------------------------------------------------------ * * More-games strip * * Sits directly under the player. Horizontal, because vertical space * under the stage is precious and a row of five reads as "keep going" * where a grid reads as "the page continues". * ------------------------------------------------------------------ */ .strip { margin-top: 18px; } .strip[hidden] { display: none; } .strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .strip__title { position: relative; font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding-left: 32px; } /* The same brass rule the section heads use, so this reads as part of the set. */ .strip__title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 1px; background: var(--primary); } .strip__all { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .strip__all:hover { color: var(--primary); } .strip__track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; } /* Cards are built for a grid, where the column sets the width. In a scroller nothing does, so they would collapse to their content. */ .strip__track > * { flex: 0 0 clamp(148px, 20vw, 190px); scroll-snap-align: start; } @media (max-width: 620px) { .strip__track > * { flex-basis: 140px; } }