Warning: Cannot modify header information - headers already sent by (output started at C:\Users\benrg\Local Sites\blood-on-the-clocktower\app\public\wp-config.php:33) in C:\Users\benrg\Local Sites\blood-on-the-clocktower\app\public\wp-content\themes\blood-on-the-clocktower\assets\styles\main.css.php on line 3
* { margin: 0; padding: 0; box-sizing: border-box; outline-color: var(--ada-outline); } html, body { max-width: 100vw; } body { width: 100%; max-width: 100vw; min-height: 100vh; display: flex; flex-direction: column; } #MainContent { display: flex; flex-direction: column; flex-grow: 1; background: radial-gradient(120% 90% at 50% -6%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 55%), radial-gradient(80% 70% at 50% 120%, color-mix(in srgb, var(--blood) 10%, transparent), transparent 60%), var(--void); } .skip-to-link { position: fixed; left: -150%; background: var(--white); z-index: 100000000; transition: left 0.3s; } .skip-to-link:focus, .skip-to-link:focus-within, .skip-to-link:active { left: 0; } a { color: var(--link); transition: color 0.2s; } a:hover { color: var(--link-hover); } summary::marker { content: ''; display: none; } img { max-width: 100%; }.accordion { border-top: var(--accordion-border-width) solid var(--accordion-border-color); color: var(--accordion-content-color); padding: 0.5rem 0.75rem; } .accordion:last-of-type { border-bottom: var(--accordion-border-width) solid var(--accordion-border-color); } .accordion__summary { padding-top: var(--accordion-title-padding); padding-bottom: var(--accordion-title-padding); display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .accordion__icon { max-width: 1rem; fill: var(--accordion-open-close-color); transform: scaleY(1); transition: transform 0.2s; } .accordion[open] .accordion__icon { transform: scaleY(-1); } blockquote.wp-block-quote { position: relative; border-left: 0; padding-top: 5rem; padding-bottom: 2rem; max-width: var(--blockquote-max-width); line-height: var(--lh-snug); background: var(--blockquote-background); } blockquote.wp-block-quote::before { content: '“'; position: absolute; display: block; top: 0; left: 1.5rem; text-align: center; font-size: var(--blockquote-quote-font-size); font-family: var(--blockquote-quote-font); } blockquote p + p { margin-top: 1.5rem; } blockquote p:last-of-type { color: var(--blockquote-name); }.breadcrumbs { padding: 1rem 0; background: var(--breadcrumbs); color: var(--breadcrumbs-text); } .breadcrumbs.breadcrumbs--hero { position: absolute; z-index: 1; left: 0; right: 0; background: var(--breadcrumbs-transparent); } .breadcrumbs a { color: inherit; } .breadcrumbs a:hover { color: var(--breadcrumbs-text-hover); } .breadcrumbs--hero-top { top: 0; } .breadcrumbs--hero-bottom { bottom: 0; } .breadcrumbs__list { display: flex; align-items: center; column-gap: 0.5rem; list-style-type: none; white-space: nowrap; overflow: auto; } .breadcrumbs__item { display: flex; } .breadcrumbs__item:not(:first-of-type)::before { content: '/'; margin-right: 0.5rem; }.button { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.625rem; font-family: var(--font-family-headings); font-weight: 600; font-size: var(--fs-13); letter-spacing: var(--ls-xl); text-transform: uppercase; line-height: var(--lh-none); text-decoration: none; border: 1px solid transparent; border-radius: 0.4375rem; transition: all 0.3s; } /* Primary — brass fill. Highest-emphasis action, one per view. */ .button, .button.button--primary { border: none; color: var(--void); background: linear-gradient(180deg, var(--brass-light), var(--brass)); box-shadow: 0 0.25rem 0.875rem var(--shadow); } .button:focus, .button:focus-visible, .button:hover, .button.button--primary:focus, .button.button--primary:focus-visible, .button.button--primary:hover { filter: brightness(1.07); } /* Secondary — brass outline. Navigation and lower-stakes actions. */ .button.button--secondary { background: transparent; border: 1px solid var(--border); color: var(--brass-light); box-shadow: none; filter: none; } .button.button--secondary:focus, .button.button--secondary:focus-visible, .button.button--secondary:hover { background: color-mix(in srgb, var(--brass) 10%, transparent); filter: none; } /* Danger — blood red. Destructive or irreversible acts only. */ .button.button--danger { border: none; color: var(--parchment); background: linear-gradient(180deg, var(--blood-bright), var(--blood-deep)); box-shadow: 0 0.25rem 0.875rem var(--shadow); } .button.button--danger:focus, .button.button--danger:focus-visible, .button.button--danger:hover { filter: brightness(1.08); } /* Ghost / text — no chrome. Dismissive or tertiary choices. */ .button.button--ghost { background: transparent; border: none; color: var(--text-muted); box-shadow: none; filter: none; padding: 0.6875rem 0.375rem; } .button.button--ghost:focus, .button.button--ghost:focus-visible, .button.button--ghost:hover { color: var(--brass-light); filter: none; } /* Disabled — 40% brass on inset. Not yet available. */ .button:disabled, .button.button--disabled { cursor: not-allowed; border: 1px solid var(--hairline); color: var(--disabled-text); background: color-mix(in srgb, var(--brass) 3%, transparent); box-shadow: none; filter: none; } /* Icon-only button — neutralize the text/padding treatment above. */ .button.button--icon { appearance: none; display: inline-flex; padding: 0; border: none; background: transparent; box-shadow: none; color: inherit; text-transform: none; letter-spacing: normal; filter: none; } /* Status pills — tinted glass chips for state and reminders. */ .pill { display: inline-flex; align-items: center; font-family: var(--font-family-headings); font-size: var(--fs-10); letter-spacing: var(--ls-md); text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 0.5625rem; border: 1px solid var(--hairline); background: var(--pill-neutral-bg); color: var(--neutral); } .pill.pill--alive { background: var(--pill-alive-bg); border-color: var(--pill-alive-border); color: var(--alive); } .pill.pill--warning { background: color-mix(in srgb, var(--brass) 12%, transparent); border-color: var(--pill-warning-border); color: var(--warning); } .card { position: relative; display: flex; flex-direction: column; } .card__image-wrap { position: relative; padding-bottom: var(--card-image-aspect-ratio); overflow: hidden; } .card__image-wrap::after { content: ''; position: absolute; inset: 0; display: block; background: var(--card-overlay-background); opacity: var(--card-overlay-opacity); transition: opacity 0.2s; } .card__image { transform: scale(1); transition: transform 0.2s; } .card__content { position: relative; flex-grow: 1; padding: var(--card-contents-padding); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-contents-spacing); text-align: var(--card-contents-alignment); background: var(--card-contents-background); color: var(--card-contents-text); z-index: 1; } .card__content--on-top { position: absolute; bottom: 0; left: 0; right: 0; } .card__content.card__content--patterned { display: block; padding: 0; } .card--search .card__content { grid-template-columns: 1fr; } .card__full-item, .card__title { grid-column: span 2; } .card__content a { color: var(--card-contents-links); transition: color 0.2s; } .card__content a:hover { color: var(--card-contents-links-hover); } .card:hover .card__image { transform: scale(1.03); } .card:hover .card__image-wrap::after { opacity: var(--card-overlay-opacity-hover); } .full-width { margin-left: 0 !important; margin-right: 0 !important; width: 100%; } .ccontain { margin-left: auto; margin-right: auto; padding-left: 0.75rem; padding-right: 0.75rem; max-width: var(--ccontain); } .hidden { display: none !important; } .fully-centered { display: flex; align-items: center; justify-content: center; min-height: 60vh; } .gbc { margin-top: 3rem; margin-bottom: 3rem; } .gbc .has-text-color a { color: inherit; } .flexible-grid { display: grid; grid-template-columns: repeat(var(--number-columns-mobile), 1fr); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); } .flex-grid { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); } .flex-grid > * { flex-basis: calc((100% - (var(--number-columns-mobile) - 1) * var(--grid-col-gap)) / var(--number-columns-mobile)); flex-shrink: 0; } .desktop-only { display: none; } .is-content-justification-center { justify-content: center; } .is-content-justification-right { justify-content: flex-end; } .is-content-justification-space-between { justify-content: space-between; } .block-padding-default { padding-top: var(--padding-default); padding-bottom: var(--padding-default); } .block-padding-none { padding-top: 0; padding-bottom: 0; } .block-padding-small { padding-top: 1rem; padding-bottom: 1rem; } .block-padding-medium { padding-top: 2rem; padding-bottom: 2rem; } .block-padding-large { padding-top: 4rem; padding-bottom: 4rem; }.footer { padding-top: var(--footer-padding); padding-bottom: var(--footer-padding); background: var(--footer-background); color: var(--footer-text); } .footer a { color: inherit; } .footer ul { list-style: none; } .footer__menu-wrapper--with-pattern { display: grid; grid-template-columns: var(--footer-pattern-width) 1fr; column-gap: 2rem; } .footer-menu { width: 100%; display: flex; flex-direction: column; } .footer-menu--desktop { display: none; } .copyright { padding: 0.75rem 0; text-align: center; background: var(--copyright-background); color: var(--copyright-text); } .social-links { margin-bottom: var(--footer-padding); display: flex; justify-content: center; align-items: center; column-gap: 3rem; font-size: 0; } .social-link { display: inline-block; height: 2rem; width: auto; } .social-link svg { height: 100%; fill: currentColor; }.form { display: flex; flex-direction: column; row-gap: 1.5rem; align-items: stretch; } .input-wrapper { display: flex; flex-direction: column; row-gap: 0.5rem; width: 100%; } .input-wrapper.input-wrapper__horizontal { margin-bottom: 1rem; flex-direction: row; align-items: center; justify-content: space-between; column-gap: 0.75rem; } .input-wrapper input, .input-wrapper select, .input-wrapper textarea { width: 100%; } .input-wrapper.input-wrapper__horizontal input, .input-wrapper.input-wrapper__horizontal select { width: auto; flex: 1 1 auto; } .input-wrapper textarea { box-sizing: border-box; max-width: 100%; min-height: 8rem; resize: vertical; } .check-wrapper { display: flex; align-items: center; column-gap: 0.5rem; } textarea, input, select { border: 0.09375rem solid var(--input-border); border-radius: 0.375rem; padding: 0.8125rem 0.9375rem; font-size: var(--fs-16); font-family: var(--font-family-general); color: var(--general-content); background-color: var(--input-background); transition: all 0.3s; } textarea::placeholder, input::placeholder { color: var(--text-faint); } textarea:hover, input:hover, select:hover { background-color: var(--input-background-hover); } textarea:focus-within, textarea:focus-visible, textarea:active, input:focus-within, input:focus-visible, input:active, select:focus-within, select:focus-visible { background-color: var(--input-background-active); border-color: var(--brass); box-shadow: 0 0 0 0.1875rem var(--input-focus-ring); } button, input, textarea { outline-offset: 0.25rem; outline-width: 0.125rem; } label { font-size: var(--fs-16); color: var(--label-color); cursor: pointer; } /* Form-field labels: uppercase per the brand style guide (scoped so other site labels keep their default treatment). */ .input-wrapper label { font-size: var(--fs-13); font-weight: 700; letter-spacing: var(--ls-xs); text-transform: uppercase; color: var(--label-color); } /* Custom dropdown chevron */ select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23c9a24a' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9375rem center; padding-right: 2.5rem; } input[type="checkbox"] { appearance: none; border: 0.09375rem solid var(--input-border); border-radius: 0.25rem; width: 1.25rem; height: 1.25rem; padding: 0; background-color: var(--input-background); transition: all 0.3s; flex: 0 0 auto; } input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; border-color: var(--brass); background-color: var(--brass); } /* Form Response: success/error messages revealed by forms.js after submission. Both render with the shared `hidden` class; only the matching one is shown. Border width and text alignment come from the inline --form-response-* variables set per element in the snippet (falling back to no border, left-aligned). */ .form-response__message { padding: var(--padding-default); border-radius: var(--border-radius-small); font-weight: 600; border-style: solid; border-width: var(--form-response-border-width, 0); text-align: var(--form-response-text-align, left); } .form-response__success { color: var(--brass); border-color: var(--brass); } .form-response__error { color: var(--error); border-color: var(--error); } /* ===== Game single template (Grimoire) ===== */ /* Colours, fonts, radii and spacing all come from existing :root variables; translucent accents are derived from them with color-mix(). Dynamic token positions stay inline. */ .game-grimoire { flex: 1; display: flex; align-items: stretch; min-height: 0; } .game-rail__label { font-family: var(--font-family-headings); font-size: var(--fs-11); letter-spacing: var(--ls-xl); text-transform: uppercase; color: var(--text-faint); } .game-rail__label--top { margin-top: 0.75rem; padding-top: 0.625rem; border-top: 1px solid var(--hairline); } /* ---- Team-coloured avatar ---- */ .game-avatar { flex-shrink: 0; display: inline-flex; border-radius: 50%; padding: 0.125rem; background: linear-gradient(145deg, var(--brass), var(--hairline)); } .game-avatar.team-evil { background: linear-gradient(145deg, var(--blood), var(--hairline)); } .game-avatar__inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; font-family: var(--font-family-headings); font-weight: 600; color: var(--ink); background: radial-gradient(circle at 50% 34%, var(--parchment), color-mix(in srgb, var(--parchment) 82%, var(--brass-deep))); } .game-avatar__img { width: 100%; height: 100%; object-fit: cover; } .game-avatar--sm { width: 2.125rem; height: 2.125rem; } .game-avatar--sm .game-avatar__inner { font-size: var(--fs-13); } .game-avatar--md { width: 2.75rem; height: 2.75rem; } .game-avatar--md .game-avatar__inner { font-size: var(--fs-18); } .game-avatar--lg { width: 3.25rem; height: 3.25rem; } .game-avatar--lg .game-avatar__inner { font-size: var(--fs-20); } .game-avatar.is-dead { opacity: 0.55; } /* Pregame lobby only: a player with no live board connection. game-live.js sets the `absent` attribute from the daemon's presence broadcast and clears it once the game starts, so the storyteller can see who they are still waiting on. Applies to both board tokens and room avatars. */ .game-avatar.is-absent, .game-token.is-absent { opacity: 0.3; } /* ---- Control header (admin only) ---- */ .game-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0 1.625rem; height: 4.125rem; background: linear-gradient(180deg, var(--surface-header), var(--ink)); border-bottom: var(--border-width-small) solid var(--hairline); box-shadow: 0 0.375rem 1.5rem color-mix(in srgb, var(--ink) 55%, transparent); } .game-header__brand { display: flex; align-items: baseline; gap: 0.875rem; min-width: 0; } .game-header__logo { font-family: var(--font-family-display); font-weight: 700; font-size: var(--fs-18); letter-spacing: var(--ls-xs); color: var(--brass-light); white-space: nowrap; text-decoration: none; } .game-header__logo-mid { color: var(--ember); } .game-header__edition { font-family: var(--font-family-headings); font-size: var(--fs-11); letter-spacing: var(--ls-xl); text-transform: uppercase; color: var(--text-faint); border-left: 1px solid var(--hairline); padding-left: 0.875rem; white-space: nowrap; } .game-header__actions { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; } .game-header__btn.button { font-size: var(--fs-12); letter-spacing: var(--ls-lg); padding: 0.5625rem 1.0625rem; } /* ---- Rooms rail (left) ---- */ .game-rooms, .game-rail { width: 18.75rem; flex-shrink: 0; padding: 1.375rem 1.125rem; background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--void) 60%, var(--panel))); display: flex; flex-direction: column; gap: 0.875rem; overflow-y: auto; } .game-rooms { width: 14.875rem; border-right: 1px solid var(--hairline); } .game-rail { border-left: 1px solid var(--hairline); gap: 1.25rem; } .game-room { padding: 0.8125rem 0.875rem; border-radius: var(--border-radius-medium); background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--brass) 5%, transparent), transparent); border: 1px solid var(--hairline); } .game-room__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6875rem; } .game-room__name { font-family: var(--font-family-headings); font-weight: 600; font-size: var(--fs-14); color: var(--text-bright); } .game-room__count { font-family: var(--font-family-headings); font-size: var(--fs-11); letter-spacing: var(--ls-md); color: var(--text-faint); } .game-room__players { display: flex; flex-wrap: wrap; gap: 0.5rem; } .game-room__player { display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; width: 2.75rem; } .game-room__player.is-dead { opacity: 0.5; } .game-room__player-name { font-size: var(--fs-10); color: var(--text-muted); max-width: 2.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-room__empty { font-size: var(--fs-12); font-style: italic; color: var(--text-faint); } /* ---- Room join / admit controls ---- */ .game-room__join, .game-rooms__return, .game-room__admit { font-size: var(--fs-11); padding: 0.3125rem 0.625rem; margin-top: 0.5rem; width: 100%; } .game-room__admit { margin-top: 0; width: auto; flex-shrink: 0; } .game-rooms__return { margin-top: 0.25rem; } .game-room__requests { margin-top: 0.625rem; padding-top: 0.5rem; border-top: 1px solid var(--hairline); } .game-room__requests-label { font-family: var(--font-family-headings); font-size: var(--fs-10); letter-spacing: var(--ls-lg); text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.375rem; } .game-room__request { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.375rem; } .game-room__request-name { font-size: var(--fs-12); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-room__pending { margin-top: 0.5rem; font-size: var(--fs-11); font-style: italic; color: var(--text-faint); } /* ---- Action feedback toast ---- */ .game-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 60; max-width: 90vw; padding: 0.625rem 1rem; border-radius: var(--border-radius-medium); border: 1px solid color-mix(in srgb, var(--blood) 50%, transparent); background: color-mix(in srgb, var(--blood) 16%, var(--panel-raised)); color: var(--text-bright); font-size: var(--fs-14); box-shadow: 0 0.375rem 1.25rem var(--shadow-soft); } /* ---- Board (centre) ---- */ .game-board { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 2.125rem; overflow: hidden; background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--brass) 9%, transparent), transparent 70%); } .game-board__stage { position: relative; width: min(76vh, 46.25rem); max-width: 100%; aspect-ratio: 1; } .game-board__felt { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid var(--hairline); background: radial-gradient(circle at 50% 42%, var(--panel-raised), var(--ink) 72%); box-shadow: inset 0 0 3.75rem color-mix(in srgb, var(--ink) 60%, transparent); } .game-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* width: 34%; */ aspect-ratio: 1; border-radius: 50%; border: var(--border-width-medium) solid var(--border); background: radial-gradient(circle at 50% 40%, var(--panel-raised), var(--ink) 75%); box-shadow: 0 0 2.5rem color-mix(in srgb, var(--brass) 14%, transparent), inset 0 0 1.5rem color-mix(in srgb, var(--ink) 65%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6%; } .game-hub__ticks { position: absolute; inset: 0; } .game-hub__tick { position: absolute; transform: translate(-50%, -50%); width: 0.1875rem; height: 0.1875rem; border-radius: 50%; background: var(--brass); opacity: 0.4; } .game-hub__tick--major { width: 0.375rem; height: 0.375rem; opacity: 0.85; } .game-hub__label { font-family: var(--font-family-headings); font-size: var(--fs-10); letter-spacing: var(--ls-2xl); text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.625rem; } .game-hub__label--block { color: var(--ember); margin-bottom: 0.3125rem; } .game-hub__nominee { font-family: var(--font-family-display); font-size: min(4vh, var(--fs-32)); line-height: var(--lh-none); color: var(--brass-light); margin-bottom: 0.5rem; } .game-hub__pips { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.3125rem; } .game-hub__pip { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--brass); opacity: 0.25; } .game-hub__pip.is-on { opacity: 1; } .game-hub__tally { font-family: var(--font-family-headings); font-size: var(--fs-10); letter-spacing: var(--ls-lg); text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5625rem; } .game-hub__begin-vote, .game-hub__vote.button, .game-hub__nominate.button { position: relative; z-index: 1; border-radius: 62.4375rem; padding: 0.5625rem 1.25rem; font-size: var(--fs-11); } .game-hub__mark.button { position: relative; z-index: 1; margin-top: 0.5rem; border-radius: 62.4375rem; padding: 0.4375rem 1rem; font-size: var(--fs-11); } /* ---- Player tokens ---- */ .game-token { position: absolute; transform: translate(-50%, -50%); z-index: 2; width: 5.125rem; height: 5.125rem; border-radius: 50%; padding: 0.1875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--brass), var(--hairline)); box-shadow: 0 0.25rem 0.875rem color-mix(in srgb, var(--ink) 50%, transparent); } /* Player icons that open the User Actions modal (admin only) are clickable. */ [data-game-open-user] { cursor: pointer; } .game-token__disc { position: relative; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 34%, var(--parchment), color-mix(in srgb, var(--parchment) 80%, var(--brass-deep)) 78%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .game-token__face { display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; border: 0.09375rem solid var(--brass); overflow: hidden; font-family: var(--font-family-headings); font-weight: 600; font-size: var(--fs-20); color: var(--ink); } .game-token__img { width: 100%; height: 100%; object-fit: cover; } .game-token.team-evil .game-token__face { border-color: var(--blood); } .game-token__shroud { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 78%, transparent), color-mix(in srgb, var(--panel-raised) 62%, transparent)); } /* ---- Storyteller-run vote indicators ---- */ /* A player counted as voting (hand up, or locked in as a yes): a solid gold ring around the token. */ .game-token.is-voting, .game-avatar.is-voting { outline: 0.1875rem solid var(--brass-light); outline-offset: 0.15rem; } /* The seat the traveling marker is on right now: a brighter, pulsing ring so it reads as "counting now". */ .game-token.is-vote-current { animation: botc-vote-pulse 1s ease-in-out infinite; } .game-avatar.is-vote-current { outline: 0.1875rem solid var(--blood-bright); outline-offset: 0.15rem; } @keyframes botc-vote-pulse { 0%, 100% { box-shadow: 0 0.25rem 0.875rem color-mix(in srgb, var(--ink) 50%, transparent), 0 0 0 0.125rem var(--blood-bright); } 50% { box-shadow: 0 0.25rem 0.875rem color-mix(in srgb, var(--ink) 50%, transparent), 0 0 0.75rem 0.3rem var(--blood-bright); } } /* ---- Name-plates ---- */ .game-nameplate { position: absolute; transform: translate(-50%, -50%); z-index: 6; width: 8.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; pointer-events: none; } .game-nameplate__wrap { position: absolute; top: 100%; } .game-nameplate__name { font-family: var(--font-family-headings); font-size: var(--fs-12); color: var(--text-bright); padding: 0.125rem 0.625rem; border-radius: 0.625rem; background: color-mix(in srgb, var(--ink) 82%, transparent); box-shadow: 0 1px 0.375rem color-mix(in srgb, var(--ink) 55%, transparent); white-space: nowrap; } .game-nameplate__tags { display: flex; flex-wrap: wrap; gap: 0.1875rem; justify-content: center; } .game-tag { font-size: var(--fs-9); padding: 1px 0.375rem; } .game-tag--novote { text-decoration: line-through; opacity: 0.85; } /* ---- Right rail ---- */ .game-card { padding: 0.9375rem; border-radius: var(--border-radius-medium); border: 1px solid var(--hairline); background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 10%, transparent), color-mix(in srgb, var(--brass) 2%, transparent)); } .game-character__head { display: flex; align-items: center; gap: 0.8125rem; margin-top: 0.6875rem; } .game-character__role { font-family: var(--font-family-headings); font-weight: 600; font-size: var(--fs-18); color: var(--text-bright); } .game-character__pills { display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem; } .game-character__ability { font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--text-muted); margin-top: 0.75rem; } .game-pill.team-good { background: color-mix(in srgb, var(--brass) 12%, transparent); border-color: color-mix(in srgb, var(--brass) 40%, transparent); color: var(--brass-light); } .game-pill.team-evil { background: color-mix(in srgb, var(--blood) 14%, transparent); border-color: color-mix(in srgb, var(--blood) 45%, transparent); color: var(--blood-bright); } .game-pill--dead { background: color-mix(in srgb, var(--blood) 12%, transparent); border-color: color-mix(in srgb, var(--blood) 40%, transparent); color: var(--blood-bright); } .game-status { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8125rem 1rem; border-radius: var(--border-radius-medium); background: color-mix(in srgb, var(--brass) 6%, transparent); border: 1px solid var(--hairline); } .game-status__day-label { font-family: var(--font-family-display); font-size: var(--fs-22); color: var(--brass-light); line-height: var(--lh-tight); margin-top: 0.1875rem; } .game-status__phase { font-size: var(--fs-13); color: var(--text-muted); font-style: italic; } .game-rail__script.button { width: 100%; } .game-rail__script-icon { font-size: var(--fs-16); line-height: 0; } .game-town { display: flex; gap: 0.625rem; margin-top: 0.625rem; } .game-town__stat { flex: 1; text-align: center; padding: 0.75rem 0.375rem; border-radius: var(--border-radius-small); background: color-mix(in srgb, var(--brass) 7%, transparent); border: 1px solid var(--hairline); } .game-town__stat--dead { background: color-mix(in srgb, var(--blood) 9%, transparent); border-color: color-mix(in srgb, var(--blood) 30%, transparent); } .game-town__num { font-family: var(--font-family-headings); font-size: var(--fs-26); line-height: var(--lh-none); color: var(--brass-light); } .game-town__stat--dead .game-town__num { color: var(--blood-bright); } .game-town__cap { font-size: var(--fs-11); letter-spacing: var(--ls-md); color: var(--text-muted); margin-top: 0.1875rem; } .game-block { background: linear-gradient(180deg, color-mix(in srgb, var(--blood) 12%, transparent), color-mix(in srgb, var(--blood) 4%, transparent)); border-color: color-mix(in srgb, var(--blood) 30%, transparent); } .game-block__label { color: var(--blood-bright); margin-bottom: 0.375rem; } .game-block__name { font-family: var(--font-family-headings); font-size: var(--fs-18); color: var(--text-bright); } .game-block__name--muted { color: var(--text-faint); } .game-block__tally { display: flex; align-items: baseline; gap: 0.5625rem; margin-top: 0.375rem; } .game-block__count { font-family: var(--font-family-headings); font-size: var(--fs-22); color: var(--brass-light); line-height: var(--lh-none); } .game-block__of { font-size: var(--fs-13); color: var(--text-faint); } .game-block__cap { font-size: var(--fs-11); letter-spacing: var(--ls-md); text-transform: uppercase; color: var(--text-muted); font-family: var(--font-family-headings); } .game-block__hint { font-size: var(--fs-13); color: var(--text-muted); margin-top: 0.125rem; font-style: italic; } .game-block__marked { display: flex; flex-direction: column; gap: 0.125rem; } /* Divider only when the marked row follows other content (nominee/heading), not when it stands alone. */ .game-block__marked-label { font-family: var(--font-family-headings); font-size: var(--fs-10); letter-spacing: var(--ls-lg); text-transform: uppercase; color: var(--blood-bright); } .game-block__marked-name { font-size: var(--fs-14); color: var(--text-bright); } .game-block__remove { align-self: flex-start; margin-top: 0.375rem; } .game-block__remove-nomination { margin-top: 0.5rem; } /* ---- Game modals (extend the base .modal component) ---- */ .game-modal__panel { max-height: 86vh; display: flex; flex-direction: column; text-align: left; } .game-modal__panel--kill { border-color: color-mix(in srgb, var(--blood) 45%, var(--border)); } /* .modal__panel (modal.css) is concatenated after game.css, so the game widths need a two-class selector to win, and cap at 90vw to honour the base rule on small screens. */ .modal__panel.game-modal__panel { max-width: min(27.5rem, 90vw); } .modal__panel.game-modal__panel--wide { max-width: min(57.5rem, 90vw); } .modal__panel.game-modal__panel--md { max-width: min(35rem, 90vw); } .modal__panel.game-modal__panel--confirm { max-width: min(25rem, 90vw); } .modal__panel.game-modal__panel--kill { max-width: min(27.5rem, 90vw); } .game-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.625rem; border-bottom: 1px solid var(--hairline); } .game-modal__title { font-family: var(--font-family-display); font-weight: 700; font-size: var(--fs-24); color: var(--brass-light); } .game-modal__subtitle { font-size: var(--fs-13); color: var(--text-muted); font-style: italic; margin-top: 0.1875rem; } .game-modal__header--danger { border-bottom-color: color-mix(in srgb, var(--blood) 40%, var(--hairline)); } .game-modal__header--danger .modal__supertitle { color: var(--blood-bright); } .game-modal__close.button { width: 2.125rem; height: 2.125rem; border-radius: 50%; border: 1px solid var(--hairline); font-size: var(--fs-18); color: var(--text-muted); } .game-modal__body { padding: 1.25rem 1.5rem; overflow-y: auto; } .game-modal__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem; padding: 1rem 1.5rem; border-top: 1px solid var(--hairline); } .game-modal__empty { color: var(--text-muted); font-style: italic; text-align: center; } /* Script modal */ .game-script-group { margin-bottom: 1.375rem; } .game-script-group__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8125rem; } .game-script-group__diamond { width: 0.625rem; height: 0.625rem; transform: rotate(45deg); background: var(--brass); box-shadow: 0 0 0.5rem var(--brass); } .game-script-group__head.team-evil .game-script-group__diamond { background: var(--blood); box-shadow: 0 0 0.5rem var(--blood); } .game-script-group__name { font-family: var(--font-family-headings); font-weight: 600; font-size: var(--fs-16); letter-spacing: var(--ls-xl); text-transform: uppercase; color: var(--brass-light); margin: 0; } .game-script-group__head.team-evil .game-script-group__name { color: var(--blood-bright); } .game-script-group__count { font-size: var(--fs-12); color: var(--text-faint); } .game-script-group__chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); align-items: start; gap: 0.625rem; } .game-char { padding: 0.6875rem 0.8125rem; border-radius: var(--border-radius-medium); background: color-mix(in srgb, var(--brass) 4%, transparent); border: 1px solid var(--hairline); } .game-char__summary { display: flex; align-items: center; gap: 0.6875rem; cursor: pointer; list-style: none; } .game-char__summary::-webkit-details-marker { display: none; } /* Chevron affordance: a rotated corner that points down when collapsed, up when open. */ .game-char__summary::after { content: ""; margin-left: auto; width: 0.4375rem; height: 0.4375rem; border-right: 0.125rem solid var(--text-faint); border-bottom: 0.125rem solid var(--text-faint); transform: rotate(45deg); transition: transform 0.15s ease; } .game-char[open] .game-char__summary::after { transform: rotate(-135deg); } .game-char__name { font-family: var(--font-family-headings); font-weight: 600; font-size: var(--fs-14); color: var(--text-bright); } .game-char__ability { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid var(--hairline); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--text-muted); } .script-char__ability br + br + br, .game-char__ability br + br + br { display: none; } /* Nomination modal */ .game-choose { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: 0.625rem; } .game-choose__option { cursor: pointer; display: flex; align-items: center; gap: 0.6875rem; padding: 0.625rem 0.75rem; border-radius: var(--border-radius-medium); background: color-mix(in srgb, var(--brass) 5%, transparent); border: 1px solid var(--hairline); text-align: left; color: var(--text); transition: border-color 0.15s; } .game-choose__option:hover { border-color: var(--border); } .game-choose__option:has(:checked) { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, transparent); } /* Reset the form-field styling forms.css applies to every <input> so the native radio doesn't animate/flash on hover (its input:hover background + transition:all leaked in). */ .game-choose__radio { accent-color: var(--brass); flex: 0 0 auto; margin: 0; padding: 0; border: none; border-radius: 0; background: none; transition: none; } .game-choose__radio:hover { background: none; } .game-choose__name { font-family: var(--font-family-headings); font-size: var(--fs-14); color: var(--text-bright); } /* Kill modal */ .game-kill { display: flex; flex-direction: column; gap: 0.375rem; } .game-kill__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.8125rem; border-radius: var(--border-radius-medium); background: color-mix(in srgb, var(--brass) 4%, transparent); border: 1px solid var(--hairline); cursor: pointer; } .game-kill__row.is-dead { background: color-mix(in srgb, var(--blood) 8%, transparent); border-color: color-mix(in srgb, var(--blood) 25%, transparent); } /* forms.css already styles input[type=checkbox]; input. prefix beats it on load order. */ .game-kill__check { flex-shrink: 0; } input.game-kill__check:checked { background-color: var(--blood); border-color: var(--blood); } .game-kill__name { flex: 1; min-width: 0; font-family: var(--font-family-headings); font-size: var(--fs-14); color: var(--text-bright); } .game-kill__ghost { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; } .game-kill__ghost-label { font-family: var(--font-family-headings); font-size: var(--fs-10); letter-spacing: var(--ls-sm); text-transform: uppercase; color: var(--text-faint); } /* Ghost vote rendered as a pill toggle from a real checkbox. */ input.game-kill__ghost-toggle { appearance: none; position: relative; flex: 0 0 auto; width: 2.125rem; height: 1.125rem; padding: 0; border-radius: 62.4375rem; background: color-mix(in srgb, var(--ink) 60%, transparent); border: 1px solid var(--hairline); cursor: pointer; transition: background 0.12s; } input.game-kill__ghost-toggle::after { content: ''; position: absolute; top: 1px; left: 1px; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--text-faint); transition: left 0.12s ease; } input.game-kill__ghost-toggle:checked { background: color-mix(in srgb, var(--brass) 40%, transparent); border-color: var(--brass); background-image: none; } input.game-kill__ghost-toggle:checked::after { left: 1.125rem; background: var(--brass-light); } /* ---- Responsive: stack the rails under the board ---- */ @media (max-width: 62.5rem) { .game-grimoire { flex-direction: column; } .game-rooms, .game-rail { width: 100%; border: none; border-bottom: 1px solid var(--hairline); } .game-rail { border-bottom: none; border-top: 1px solid var(--hairline); } .game-board { padding: 1.25rem; } .game-board__stage { width: min(90vw, 35rem); } } .header { background-color: var(--header-background); color: var(--header-text); z-index: 100; transition: background-color 0.3s; } body:not(.body-scrolled, .search-open) .header--transparent { background: transparent; } .header--transparent:not(.header--is-fixed) { position: absolute; top: 0; right: 0; left: 0; } .header__watcher { background: var(--header-background); width: 100%; height: var(--logo-height); z-index: -1; } .header__watcher.header__watcher--transparent { position: absolute; background-color: transparent; } .header__watcher--fixed-desktop { display: none; } .header--is-fixed { position: fixed; top: 0; left: 0; right: 0; } .header a { color: var(--header-text); } .header a:hover { color: var(--header-text-hover); } .header svg { fill: currentColor; } .header__logo-link { padding: 0.5rem 0; display: flex; align-items: center; justify-content: center; min-width: var(--logo-link-min-width, 0); font-size: 0; text-decoration: none; } .header__logo { max-height: var(--logo-height); height: var(--logo-height); transition: max-height 0.3s; } .body-scrolled .header__logo { max-height: var(--logo-height-scrolled); } /* ---- Brand: logo + site title ---- */ .header__brand { display: flex; align-items: center; gap: 0.85rem; } .header__site-title { font-family: var(--font-family-display); font-size: var(--fs-18); letter-spacing: var(--ls-xs); color: var(--brass-light); white-space: nowrap; text-decoration: none; } /* Matches the game header's "ON THE" treatment. */ .header__site-title-mid { font-family: inherit; font-size: inherit; letter-spacing: inherit; color: var(--ember); } /* ---- Right side: profile button / login (homepage only) ---- */ .header__profile { display: flex; align-items: center; gap: 0.75rem; padding: 0.3125rem 0.375rem 0.3125rem 0.875rem; background: transparent; border: 1px solid transparent; border-radius: 62.4375rem; color: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .header__profile:hover { border-color: var(--hairline); background: color-mix(in srgb, var(--brass) 6%, transparent); } .header__profile-name { font-family: var(--font-family-headings); font-size: var(--fs-13); color: var(--text-bright); white-space: nowrap; } .header__avatar { flex-shrink: 0; display: inline-flex; width: 2.375rem; height: 2.375rem; border-radius: 50%; padding: 0.125rem; background: linear-gradient(145deg, var(--brass), var(--hairline)); } .header__avatar-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; font-family: var(--font-family-headings); font-weight: 600; font-size: var(--fs-16); color: var(--ink); background: radial-gradient(circle at 50% 34%, var(--parchment), color-mix(in srgb, var(--parchment) 82%, var(--brass-deep))); } .header__avatar-img { width: 100%; height: 100%; object-fit: cover; } /* Colour comes from the existing .header a rules; this adds the pill chrome only. */ .header__login { font-family: var(--font-family-headings); font-size: var(--fs-12); letter-spacing: var(--ls-lg); text-transform: uppercase; border: 1px solid var(--border); padding: 0.5rem 1.125rem; border-radius: var(--border-radius-small); white-space: nowrap; } .header__login:hover { background: color-mix(in srgb, var(--brass) 10%, transparent); } .header__contents, .main-menu { display: flex; align-items: stretch; justify-content: space-between; } .header__contents { gap: 4rem; } .main-menu { column-gap: 2rem; height: 100%; list-style-type: none; } .main-menu a { font-family: var(--header-text-font-family); text-transform: var(--header-text-transform); letter-spacing: var(--header-text-letter-spacing); font-size: var(--header-text-font-size); font-weight: var(--header-text-font-weight); } .header__main-menu--right { margin-left: auto; } .header__main-menu--left { margin-right: auto; } .header__mobile-wrapper { position: fixed; top: 0; bottom: 0; right: -100%; width: 80vw; background: var(--submenu-background); color: var(--black); z-index: 1000; transition: right 0.3s; } .header__mobile-wrapper.open { right: 0; } .header__mobile-wrapper a { color: var(--submenu-text-color); } .header__mobile-wrapper a:hover { color: var(--submenu-text-color-hover); } .header__close-menu { position: absolute; top: 0; bottom: 0; right: 100%; width: 150vw; background: var(--void); opacity: 0.75; display: none; } .header__search-trigger { border: none; display: none; align-items: center; appearance: none; background: transparent; cursor: pointer; } .header__search-trigger-icon { height: 1.5rem; color: var(--header-text); } .header__mobile-wrapper.open .header__close-menu { display: block; } .header__mobile-menu .main-menu { padding-top: 3rem; flex-direction: column; } .main-menu > .main-menu__item { position: relative; display: flex; align-items: center; white-space: nowrap; } .main-menu__item-label { width: 100%; display: inline-flex; align-items: center; column-gap: 0.25rem; } .main-menu__item-label a { width: 100%; } .main-menu__item .item-icon { transform: scaleY(1); transition: transform 0.2s 0.25s; } .main-menu__item:hover .item-icon { transform: scaleY(-1); } .main-menu__sub-menu { position: absolute; top: 100%; max-height: 0; overflow: hidden; background: var(--submenu-background); color: var(--submenu-text-color); list-style-type: none; transition: max-height 0s, padding 0s, color 0.2s, box-shadow 0s; transition-delay: 0.25s; } .main-menu__sub-menu.main-menu__sub-menu--middle { right: 50%; transform: translateX(50%); } .main-menu__sub-menu.main-menu__sub-menu--left { left: 0; } .main-menu__sub-menu.main-menu__sub-menu--right { right: 0; } .main-menu__sub-menu a:hover { color: var(--submenu-text-color-hover); } .main-menu__sub-menu a { display: inline-block; padding: 0.5rem 2rem; color: inherit; } .main-menu__item:active .main-menu__sub-menu, .main-menu__item:focus .main-menu__sub-menu, .main-menu__item:focus-within .main-menu__sub-menu, .main-menu__item:hover .main-menu__sub-menu { padding: 0.5rem 0; max-height: 100vh; box-shadow: 0.125rem 1px 0.4375rem 1px var(--shadow-medium); } .accordion-menu__item:not(.accordion-menu__item--parent) { padding: 1rem 0 1rem 1rem; } .accordion-menu__item .summary-select { border: 0; } .accordion-menu__sub-menu { padding-left: 1rem; list-style-type: none; }.hero { position: relative; max-width: 100vw; overflow: hidden; } .hero, .hero__image { height: var(--hero-height); min-height: var(--hero-min-height); max-width: 100%; } .hero__image { display: block; width: 100%; object-fit: cover; } .hero.hero--text { height: var(--hero-text-only-height); } .hero--text, .hero__caption { display: flex; align-items: center; justify-content: center; } .hero__caption, .hero__caption-overlay { position: absolute; inset: 0; } .hero__content { position: relative; text-align: center; z-index: 1; color: var(--hero-text); } .hero__caption-overlay { background: var(--hero-background); opacity: var(--hero-opacity); }/* ===== Homepage ===== */ /* Colors, fonts, radii and spacing all come from existing :root variables (see utilities/variables.css.php). Translucent accents are derived from those variables via color-mix() rather than introducing new hex values. */ .home { flex-grow: 1; } /* ---- Signed out: login prompt ---- */ .home--signed-out { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 2.5rem 1.6rem; } .home-login { max-width: 27.5rem; text-align: center; } .home-login__sigil { width: 4rem; height: 4rem; margin: 0 auto 1.6rem; border-radius: 50%; border: var(--border-width-medium) solid var(--border); background: radial-gradient(circle at 50% 36%, var(--brass-light), var(--brass-deep) 62%, var(--ink)); box-shadow: 0 0 1.625rem color-mix(in srgb, var(--brass-light) 45%, transparent); animation: home-flick 3.2s ease-in-out infinite; } @keyframes home-flick { 0%, 100% { opacity: 0.9; } 45% { opacity: 0.62; } 70% { opacity: 0.82; } } .home-login__title { font-family: var(--font-family-display); font-size: var(--fs-32); color: var(--brass-light); margin: 0 0 0.875rem; text-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--ink) 50%, transparent); } .home-login__text { font-family: var(--font-family-general); font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--text-muted); margin: 0 0 1.875rem; } .home-login__button { display: inline-block; font-family: var(--font-family-headings); font-size: var(--fs-13); letter-spacing: var(--ls-xl); text-transform: uppercase; color: var(--void); background: linear-gradient(180deg, var(--brass-light), var(--brass)); padding: 0.8125rem 2.125rem; border-radius: var(--border-radius-small); box-shadow: 0 0.25rem 0.875rem color-mix(in srgb, var(--ink) 45%, transparent); transition: filter 0.15s; } .home-login__button:hover { color: var(--void); filter: brightness(1.06); } /* ---- Signed in: game roster ---- */ .home-games { max-width: 51.25rem; margin: 0 auto; padding: 3rem 1.6rem 5rem; } .home-games__intro { margin-bottom: 1.875rem; } .home-games__eyebrow { font-family: var(--font-family-headings); font-size: var(--fs-12); letter-spacing: var(--ls-2xl); text-transform: uppercase; color: var(--text-faint); margin: 0; } .home-games__name { font-family: var(--font-family-display); font-size: var(--fs-36); color: var(--brass-light); margin: 0.375rem 0 0; text-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--ink) 50%, transparent); } .home-games__heading { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; } .home-games__heading-title { font-family: var(--font-family-headings); font-size: var(--fs-16); letter-spacing: var(--ls-xl); text-transform: uppercase; color: var(--text-muted); margin: 0; } .home-games__count { font-size: var(--fs-13); font-style: italic; color: var(--text-faint); } .home-games__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hairline), transparent); } .home-games__list { display: flex; flex-direction: column; gap: 0.75rem; } .home-games__note, .home-games__empty { text-align: center; margin-top: 1.625rem; font-size: var(--fs-13); color: var(--text-faint); font-style: italic; } /* ---- Game tile ---- */ .game-tile { display: flex; align-items: center; gap: 1.125rem; padding: 1.125rem 1.25rem; border-radius: var(--border-radius-medium); background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--brass) 6%, transparent), transparent); border: var(--border-width-small) solid var(--hairline); color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; } .game-tile:hover { color: var(--text); border-color: var(--border); transform: translateX(0.1875rem); } /* Rendered as a non-link when the game-tile snippet is passed disabled => true. */ .game-tile--disabled { opacity: 0.45; pointer-events: none; cursor: default; } .game-tile__sigil { flex-shrink: 0; width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-family-display); font-size: var(--fs-20); color: var(--ink); background: radial-gradient(circle at 50% 34%, var(--parchment), color-mix(in srgb, var(--parchment) 82%, var(--brass-deep))); box-shadow: 0 0 0 0.15625rem var(--hairline), 0 0 0 0.1875rem var(--brass); } .game-tile__body { flex: 1; min-width: 0; } .game-tile__title { display: block; font-family: var(--font-family-headings); font-size: var(--fs-18); letter-spacing: var(--ls-xs); color: var(--text-bright); } .game-tile__meta { display: block; font-size: var(--fs-14); color: var(--text-muted); margin-top: 0.1875rem; } .game-tile__chevron { flex-shrink: 0; font-size: var(--fs-22); color: var(--text-faint); padding-left: 0.25rem; } @media (min-width: 46.875rem) { .home-login__title { font-size: var(--fs-40); } .home-games__name { font-size: var(--fs-48); } } .icon { width: 2rem; color: inherit; fill: inherit; } .icon.icon--menu { color: var(--header-text); }.image-wrapper, .image { display: block; width: 100%; } .image-wrapper { position: relative; height: 0; overflow: hidden; } .image { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; transform: scale(1.0); transition: transform 0.2s; } .parallax { position: relative; overflow: hidden; } .parallax img { display: block; object-fit: cover; } .parallax--banner img { width: 100% !important; } .parallax img { transform: scale(1.4); transform-origin: center var(--parallax-position); transition: all 0.1s; }.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .modal__overlay { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: var(--overlay); backdrop-filter: blur(1px); } .modal__panel { position: relative; width: 100%; max-width: 90vw; border-radius: 0.75rem; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel-raised), var(--panel)); box-shadow: 0 1.5rem 3.75rem var(--shadow-strong), 0 0 0 1px color-mix(in srgb, var(--brass) 5%, transparent); } .modal__header { padding: 1.375rem 1.5rem 0.875rem; border-bottom: 1px solid var(--hairline); text-align: center; } .modal__supertitle { font-family: var(--font-family-headings); font-size: var(--fs-10); letter-spacing: var(--ls-2xl); text-transform: uppercase; color: var(--text-faint); } .modal__title { font-family: var(--font-family-display); font-weight: 700; font-size: var(--fs-22); color: var(--brass-light); margin-top: 0.3125rem; } .modal__body { padding: 1.125rem 1.5rem 1.375rem; text-align: center; } .modal__content { font-size: var(--fs-14); line-height: var(--lh-relaxed); color: var(--text-muted); margin-bottom: 1.25rem; } .modal__actions { display: flex; gap: 0.625rem; justify-content: center; } body.modal-open { overflow: hidden; } .page-content__sidebar-list { display: none; } .page-content__sidebar-select { width: 100%; margin-top: -1rem; margin-bottom: 2rem; } .pagination { margin-bottom: 4rem; display: flex; align-items: center; justify-content: center; column-gap: 1rem; } .pagination a { color: var(--pagination-link); background: var(--pagination-link-background); transition: color 0.2s; } .pagination a:hover { color: var(--pagination-link-hover); } .page-numbers.current { background: var(--pagination-link-background); color: var(--pagination-link-active); } .page-numbers { padding: 0.5rem 0.75rem; }/* ===== Profile modal (opened from the header avatar) ===== */ /* Extends the base .modal component; existing variables only. */ /* Two-class selector: the base .modal__panel is max-width:90vw, and profile.css globs after modal.css, so this wins cleanly and keeps the panel narrow. */ .modal__panel.profile-modal__panel { max-width: min(26.25rem, 90vw); text-align: left; overflow: hidden; } .profile-modal__head { padding: 1.5rem 1.75rem 1.25rem; border-bottom: 1px solid var(--hairline); } .profile-modal__supertitle { font-family: var(--font-family-headings); font-size: var(--fs-11); letter-spacing: var(--ls-2xl); text-transform: uppercase; color: var(--text-faint); } .profile-modal__title { font-family: var(--font-family-display); font-weight: 700; font-size: var(--fs-24); color: var(--brass-light); margin-top: 0.375rem; } .profile-modal__form { padding: 1.5rem 1.75rem 1.625rem; display: flex; flex-direction: column; gap: 1.25rem; } .profile-modal__field { display: flex; flex-direction: column; gap: 0.5rem; } .profile-modal__label { font-family: var(--font-family-headings); font-size: var(--fs-11); letter-spacing: var(--ls-xl); text-transform: uppercase; color: var(--text-muted); } .profile-modal__avatar { display: flex; align-items: center; gap: 1rem; } .profile-modal__avatar-preview { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 34%, var(--parchment), color-mix(in srgb, var(--parchment) 82%, var(--brass-deep))); border: 0.125rem solid var(--hairline); } .profile-modal__avatar-img { width: 100%; height: 100%; object-fit: cover; } .profile-modal__avatar-initial { font-family: var(--font-family-headings); font-weight: 600; font-size: var(--fs-24); color: var(--ink); } .profile-modal__avatar-pick { cursor: pointer; } .profile-modal__error { margin: 0; color: var(--blood-bright); font-size: var(--fs-14); } .profile-modal__actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 0.25rem; } /* The single-script character sheet (templates/single-scripts.php). The group headers are shared with the in-game script modal and styled in game.css — everything here is the expanded reference-sheet row that the modal has no equivalent of. */ .script-characters { margin-top: 2.5rem; } .script-characters__empty { color: var(--text-muted); font-style: italic; text-align: center; } /* Abilities are always visible here and the portrait is 100px, so the cards need considerably more room than the modal's grid gives. */ .game-script-group__chars--wide { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); } /* Mirrors .game-char's shell so the page and the modal read as one system. */ .script-char { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6875rem 0.8125rem; border-radius: var(--border-radius-medium); background: color-mix(in srgb, var(--brass) 4%, transparent); border: 1px solid var(--hairline); } .script-char__icon { flex: none; width: 6.25rem; height: 6.25rem; border-radius: 50%; border: 1px solid var(--hairline); object-fit: cover; } /* The letter token fills the same slot for a role with no portrait, so it has to match the portrait's footprint — the shared sizes top out at 3.25rem (game.css .game-avatar--lg). */ .script-char .game-avatar { width: 6.25rem; height: 6.25rem; } .script-char .game-avatar__inner { font-size: var(--fs-40); } /* Name stacked over ability. min-width: 0 lets long ability text wrap inside the flex row instead of forcing the card wider than its grid track. */ .script-char__text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } /* Larger than the modal's .game-char__name — this page is read, not glanced at. The ability sits one step down the scale, which skips 15/17/19 (see variables.css.php). */ .script-char__name { font-family: var(--font-family-headings); font-weight: 600; font-size: var(--fs-16); color: var(--text-bright); } .script-char__ability { font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--text-muted); } .summary-select { border: 1px solid var(--hairline); padding: 0.5rem 0.75rem; } .summary-select a { display: inline-block; width: 100%; cursor: pointer; } .summary-select__summary { padding-top: 0.5rem; padding-bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .summary-select__contents { margin-top: 0.5rem; border-top: 1px solid var(--hairline); padding-top: 0.5rem; list-style: none; } .summary-select__icon { max-width: 1rem; transform: scaleY(1.0); transition: transform 0.2s; } .summary-select[open] .summary-select__icon { transform: scaleY(-1.0); } .summary-select__item + .summary-select__item { margin-top: 0.25rem; } * { font-family: var(--font-family-general); letter-spacing: var(--font-general-letter-spacing); line-height: var(--font-general-line-height); } body { font-size: var(--font-size-general); color: var(--general-content); background-color: var(--void); } h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--font-family-headings); text-transform: var(--font-header-transform); letter-spacing: var(--font-header-letter-spacing); line-height: var(--font-header-line-height); } h1, .h1 { font-family: var(--font-family-display); font-size: var(--header-one-mobile-size); } h2, .h2 { font-size: var(--header-two-mobile-size); } h3, .h3 { font-size: var(--header-three-mobile-size); } .text-large { font-size: calc(var(--general-content-mobile-size) * 1.25); } .text-normal { font-size: var(--general-content-mobile-size); } .text-small { font-size: calc(var(--general-content-mobile-size) * 0.8); } #MainContent { font-size: 0; } #MainContent > * { font-size: var(--general-content-mobile-size); }/* Voice chat: the floating in-game control bar (assets/scripts/components/game-voice.js drives its state) and the voice preference checkboxes in the profile modal. Dropped into components/ so the CSS pipeline (main.css.php) picks it up automatically. */ .voice-bar { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.75rem; border-radius: var(--border-radius-medium); border: 1px solid var(--hairline); background: var(--panel-raised); } .voice-bar__status { font-size: var(--fs-13); color: var(--text-muted); letter-spacing: var(--ls-md); white-space: nowrap; } .voice-bar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .voice-bar__mute[aria-pressed="true"] { border-color: color-mix(in srgb, var(--blood) 50%, transparent); background: color-mix(in srgb, var(--blood) 16%, var(--panel-raised)); color: var(--text-bright); } /* Hidden host for the per-peer <audio> elements — never displayed. */ .voice-audio { display: none; } /* Storyteller "listen in" toggle, stacked beneath each side-room's Join button (admin only). Matches the full-width Join button; the pressed (actively listening) state mirrors the mute button's treatment. */ .game-room__listen { width: 100%; margin-top: 0.5rem; padding: 0.3125rem 0.625rem; font-size: var(--fs-11); } .game-room__listen[aria-pressed="true"] { border-color: color-mix(in srgb, var(--blood) 50%, transparent); background: color-mix(in srgb, var(--blood) 16%, var(--panel-raised)); color: var(--text-bright); } /* Private storyteller<->player voice chat modal (snippets/game/modals/private-chat.php). It reuses the shared .modal / .game-modal chrome; only the live status line needs a touch of emphasis. */ [data-private-chat-status] { color: var(--text-bright); } /* Profile modal voice preferences. */ .profile-modal__checkbox { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; font-size: var(--fs-14); color: var(--text-muted); cursor: pointer; } .profile-modal__checkbox input { width: 1rem; height: 1rem; accent-color: var(--brass); } @media screen and (min-width: 750px) {blockquote.wp-block-quote { padding-top: 2rem; padding-left: 5rem; } blockquote.wp-block-quote::before { top: auto; left: 0.5rem; width: 4.5rem; }.flexible-grid { grid-template-columns: repeat(var(--number-columns-tablet), 1fr); } .flex-grid > * { flex-basis: calc((100% - (var(--number-columns-tablet) - 1) * var(--grid-col-gap)) / var(--number-columns-tablet)); flex-shrink: 0; }.footer-menu--mobile { display: none; } .footer-menu--desktop { display: block; } .footer-menu__list { display: grid; grid-template-columns: repeat(var(--columns), 1fr); } .footer-menu__item { display: flex; flex-direction: column; align-items: center; } .footer-menu svg { display: none; }h1, .h1 { font-size: var(--header-one-desktop-size); } h2, .h2 { font-size: var(--header-two-desktop-size); } h3, .h3 { font-size: var(--header-three-desktop-size); } .text-large { font-size: calc(var(--general-content-desktop-size) * 1.25); } .text-normal { font-size: var(--general-content-desktop-size); } .text-small { font-size: calc(var(--general-content-desktop-size) * 0.8); } #MainContent > * { font-size: var(--general-content-desktop-size); }}@media screen and (min-width: 1150px) {.desktop-only { display: block; } .mobile-only { display: none !important; } .flexible-grid { grid-template-columns: repeat(var(--number-columns), 1fr); } .flex-grid > * { flex-basis: calc((100% - (var(--number-columns) - 1) * var(--grid-col-gap)) / var(--number-columns)); }.header__search-trigger { display: flex; } .header--is-fixed-desktop { position: fixed; top: 0; left: 0; right: 0; } .header__watcher--fixed-desktop { display: block; } .page-content__have-children { display: grid; grid-template-columns: var(--page-content-columns); grid-column-gap: 3rem; } .page-content__sidebar { grid-column-start: var(--page-content-sidebar-position); } .page-content__sidebar, .page-content__contents { grid-row-start: 1; } .page-content__sidebar-list { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; } .page-content__sidebar-select { display: none; } } .has-void-background-color { background-color: var(--void); } .has-void-color { color: var(--void); } .has-panel-background-color { background-color: var(--panel); } .has-panel-color { color: var(--panel); } .has-panel-raised-background-color { background-color: var(--panel-raised); } .has-panel-raised-color { color: var(--panel-raised); } .has-surface-header-background-color { background-color: var(--surface-header); } .has-surface-header-color { color: var(--surface-header); } .has-ink-background-color { background-color: var(--ink); } .has-ink-color { color: var(--ink); } .has-brass-light-background-color { background-color: var(--brass-light); } .has-brass-light-color { color: var(--brass-light); } .has-brass-background-color { background-color: var(--brass); } .has-brass-color { color: var(--brass); } .has-brass-deep-background-color { background-color: var(--brass-deep); } .has-brass-deep-color { color: var(--brass-deep); } .has-border-background-color { background-color: var(--border); } .has-border-color { color: var(--border); } .has-hairline-background-color { background-color: var(--hairline); } .has-hairline-color { color: var(--hairline); } .has-blood-background-color { background-color: var(--blood); } .has-blood-color { color: var(--blood); } .has-blood-bright-background-color { background-color: var(--blood-bright); } .has-blood-bright-color { color: var(--blood-bright); } .has-blood-deep-background-color { background-color: var(--blood-deep); } .has-blood-deep-color { color: var(--blood-deep); } .has-ember-background-color { background-color: var(--ember); } .has-ember-color { color: var(--ember); } .has-parchment-background-color { background-color: var(--parchment); } .has-parchment-color { color: var(--parchment); } .has-text-background-color { background-color: var(--text); } .has-text-color { color: var(--text); } .has-text-bright-background-color { background-color: var(--text-bright); } .has-text-bright-color { color: var(--text-bright); } .has-text-muted-background-color { background-color: var(--text-muted); } .has-text-muted-color { color: var(--text-muted); } .has-text-faint-background-color { background-color: var(--text-faint); } .has-text-faint-color { color: var(--text-faint); } .has-alive-background-color { background-color: var(--alive); } .has-alive-color { color: var(--alive); } .has-warning-background-color { background-color: var(--warning); } .has-warning-color { color: var(--warning); } .has-neutral-background-color { background-color: var(--neutral); } .has-neutral-color { color: var(--neutral); } :root { /* ===== Palette tokens (gaslamp design system) ===== */ /* Surfaces — dusk & shadow */ --void: #140f0a; --panel: #191309; --panel-raised: #221a10; --surface-header: #1c150d; --ink: #120d08; /* Brass — the primary accent */ --brass-light: #e6c266; --brass: #c9a24a; --brass-deep: #b07a1f; --border: #6a5230; --hairline: #3a2c1c; /* Blood — evil & danger */ --blood: #b0392e; --blood-bright: #c0563e; --blood-deep: #9a2f24; --ember: #b8463a; /* Parchment & text */ --parchment: #f1e6cd; --text: #dccdae; --text-bright: #ecdcb8; --text-muted: #a89a7d; --text-faint: #8f7a56; /* Semantic states */ --alive: #a8c298; --warning: #e0b74f; --neutral: #a89a7d; --error: var(--blood); --ada-outline: #87ceeb; /* De-hardcoded literal colours (used by components) */ --shadow-soft: rgba(0, 0, 0, 0.35); --shadow: rgba(0, 0, 0, 0.4); --shadow-medium: rgba(0, 0, 0, 0.5); --shadow-strong: rgba(0, 0, 0, 0.6); --overlay: rgba(10, 7, 4, 0.55); --white: #ffffff; --black: #000000; --disabled-text: #6f6350; --pill-neutral-bg: rgba(125, 112, 89, 0.14); --pill-alive-bg: rgba(120, 160, 110, 0.14); --pill-alive-border: #3f5236; --pill-warning-border: #5a4620; /* ===== Type scale (px ÷ 16 → rem; --fs-15/-17/-19 intentionally consolidated into neighbours) ===== */ --fs-9: 0.5625rem; --fs-10: 0.625rem; --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-22: 1.375rem; --fs-24: 1.5rem; --fs-26: 1.625rem; --fs-32: 2rem; --fs-36: 2.25rem; --fs-40: 2.5rem; --fs-48: 3rem; /* Letter-spacing scale (px → rem) */ --ls-xs: 0.03125rem; --ls-sm: 0.05rem; --ls-md: 0.0625rem; --ls-lg: 0.09375rem; --ls-xl: 0.125rem; --ls-2xl: 0.1875rem; /* Line-height scale (unitless) */ --lh-none: 1; --lh-tight: 1.1; --lh-snug: 1.45; --lh-relaxed: 1.6; /* ===== Semantic role variables (mapped from the design's swatch "use") ===== */ --link: var(--brass); --link-hover: var(--brass-light); --general-content: var(--text); --button-background: var(--brass); --button-background-hover: var(--brass-light); --button-border: var(--brass); --button-border-hover: var(--brass-light); --button-text: var(--void); --button-text-hover: var(--void); --button-secondary-background: transparent; --button-secondary-background-hover: rgba(201, 162, 74, 0.10); --button-secondary-border: var(--border); --button-secondary-border-hover: var(--brass); --button-secondary-text: var(--brass-light); --button-secondary-text-hover: var(--brass-light); --label-color: var(--text-faint); --input-border: var(--border); --input-background: var(--panel); --input-background-hover: var(--panel-raised); --input-background-active: var(--panel-raised); --input-focus-ring: var(--brass); --font-family-general: "EB Garamond", Georgia, serif; --font-family-headings: "Cinzel", serif; --font-family-display: "Cinzel Decorative", serif; --font-size-general: 16px; --font-header-transform: none; --font-header-letter-spacing: 0px; --font-header-line-height: ; --font-general-letter-spacing: 0px; --font-general-line-height: ; --header-one-mobile-size: 2.5rem; --header-one-desktop-size: 3.1rem; --header-two-mobile-size: 2.2rem; --header-two-desktop-size: 2.7rem; --header-three-mobile-size: 1.7rem; --header-three-desktop-size: 2.3rem; --general-content-mobile-size: 1rem; --general-content-desktop-size: 1rem; --ccontain: 1252px; --number-columns-mobile: 1; --number-columns-tablet: 2; --number-columns: 2; --header-background: var(--void); --header-text: var(--brass-light); --header-text-hover: var(--brass); --submenu-background: var(--panel); --submenu-text-color: var(--text); --submenu-text-color-hover: var(--brass-light); --header-text-font-family: "Cinzel", serif; --header-text-transform: ; --header-text-letter-spacing: 0px; --header-text-font-size: 16px; --header-text-font-weight: 400; --logo-height: 50px; --logo-height-scrolled: 50px; --logo-link-min-width: 39px; --hero-background: var(--void); --hero-opacity: 0.8; --hero-text: var(--parchment); --hero-height: 40vh; --hero-text-only-height: 30vh; --hero-min-height: 300px; --breadcrumbs: var(--surface-header); --breadcrumbs-transparent: rgba(28, 21, 13, 0.8); --breadcrumbs-text: var(--text-muted); --breadcrumbs-text-hover: var(--brass-light); --blockquote-max-width: 800px; --blockquote-quote-font: "Cinzel Decorative", serif; --blockquote-quote-font-size: 4rem; --blockquote-background: var(--panel); --blockquote-name: var(--brass); --accordion-border-width: var(--border-width-small); --accordion-content-color: var(--text); --accordion-border-color: var(--hairline); --accordion-open-close-color: var(--brass); --accordion-title-padding: var(--padding-small); --footer-padding: 0px; --footer-pattern-width: 25%; --footer-background: var(--ink); --footer-text: var(--text-muted); --copyright-background: var(--void); --copyright-text: var(--text-faint); --border-width-small: 1px; --border-width-medium: 2px; --border-width-wide: 3px; --border-radius-small: 4px; --border-radius-medium: 8px; --border-radius-large: 16px; --padding-small: 1rem; --padding-medium: 2rem; --padding-large: 4rem; --padding-default: var(--padding-medium); --grid-row-gap: 3rem; --grid-col-gap: 2rem; --card-overlay-background: var(--void); --card-overlay-opacity: 0.5; --card-overlay-opacity-hover: 0.5; --card-image-aspect-ratio: 50%; --card-contents-padding: 10px 20px; --card-contents-alignment: left; --card-contents-spacing: 10px; --card-contents-background: rgba(25, 19, 9, 0.5); --card-contents-text: var(--text); --card-contents-links: var(--brass); --card-contents-links-hover: var(--brass-light); --pagination-link: var(--brass); --pagination-link-hover: var(--brass-light); --pagination-link-background: var(--panel); --pagination-link-active: var(--brass-light); --page-content-sidebar-position: 2; --page-content-columns: 1fr 20rem; }