/* * NamelessStory — Custom CSS * * Override any CSS variable here to restyle the engine without touching source code. * All variables fall back to their defaults if not set, so you only need to include * the ones you actually want to change. * * Usage: set variables on :root to apply them globally. * * ─── Typography ────────────────────────────────────────────────────────────── * * --vn-font-family Font stack for the entire engine (default: system-ui, Avenir, Helvetica, Arial, sans-serif) * * ─── Dialogue box (bottom / top positions) ─────────────────────────────────── * * --vn-dialogue-bg Background gradient (bottom position) (default: dark-to-transparent gradient) * --vn-dialogue-bg-top Background gradient (top position) (default: dark-to-transparent gradient) * --vn-dialogue-padding Inner spacing (default: 1rem 2rem 3rem) * --vn-dialogue-min-height Minimum height (default: 100px) * --vn-dialogue-min-width Minimum width (default: 100%) * --vn-dialogue-max-width Maximum width (default: 1000px) * --vn-text-color Dialogue text color (default: #fff) * --vn-text-font-size Dialogue text size (default: 1.2rem) * --vn-text-line-height Dialogue line height (default: 1.6) * --vn-name-font-size Character name size (default: 1.5rem) * --vn-name-padding Character name padding (default: 0 2rem) * * ─── Dialogue box (center position) ───────────────────────────────────────── * * --vn-dialogue-center-bg Panel background (default: rgba(0,0,0,0.82)) * --vn-dialogue-center-max-width Panel maximum width (default: 700px) * --vn-dialogue-center-padding Panel inner padding (default: 1.25rem 2rem) * --vn-dialogue-center-outer-padding Padding around the panel (default: 0.25rem 0.5rem) * * ─── Choice buttons ────────────────────────────────────────────────────────── * * --vn-option-bg Button background (default: blue gradient) * --vn-option-bg-hover Button background on hover (default: brighter blue gradient) * --vn-option-border Button border shorthand (default: 2px solid rgba(100,108,255,0.5)) * --vn-option-border-radius Button corner rounding (default: 8px) * --vn-option-color Button text color (default: #fff) * --vn-option-font-size Button text size (default: 1.2rem) * --vn-options-bottom Distance from bottom of screen (default: 20%) * --vn-options-gap Gap between option buttons (default: 1rem) * * ─── Text input ────────────────────────────────────────────────────────────── * * --vn-input-bg Input wrapper background (default: rgba(0,0,0,0.8)) * --vn-input-border Input wrapper border (default: 2px solid rgba(255,255,255,0.3)) * --vn-input-border-radius Input wrapper corner rounding (default: 8px) * --vn-input-color Input text color (default: #fff) * --vn-input-font-size Input text size (default: 1.2rem) * --vn-input-submit-bg Submit button background (default: rgba(100,108,255,0.5)) * --vn-input-submit-bg-hover Submit button background hover (default: rgba(100,108,255,0.7)) * --vn-input-wrong-color Border color when input is wrong (default: #ff4444) * --vn-input-bottom Distance from bottom of screen (default: 20%) * * ─── Overlays ──────────────────────────────────────────────────────────────── * * --vn-overlay-top-height Top bar height (default: 60px) * --vn-overlay-top-bg Top bar gradient background (default: dark-to-transparent gradient) * --vn-overlay-bottom-height Bottom bar height (default: 120px) * --vn-overlay-button-bg Overlay button background (default: rgba(255,255,255,0.1)) * --vn-overlay-button-border Overlay button border (default: 2px solid rgba(255,255,255,0.3)) * --vn-overlay-button-bg-hover Overlay button hover bg (default: rgba(255,255,255,0.2)) * --vn-overlay-button-color Overlay button text color (default: #fff) * * ─── Character sprites ─────────────────────────────────────────────────────── * * --vn-sprite-bottom Sprite distance from screen bottom (default: 10%) * --vn-sprite-side-offset Left/right sprite offset from edge (default: 10%) * * ─── Portrait in dialogue box ──────────────────────────────────────────────── * * --vn-portrait-size Square size of the portrait box (default: 130px) * --vn-portrait-border Border around the portrait box (default: 2px solid rgba(255,255,255,0.3)) * --vn-portrait-bg Background behind the portrait (default: rgba(0,0,0,0.4)) * --vn-portrait-gap Gap between portrait and text (default: 1.25rem) * --vn-portrait-outer-padding Padding of the portrait+text row (default: 0.5rem 2rem 2rem) * --vn-portrait-object-position Where to focus the portrait image (default: top center) * * ─── Volume slider ─────────────────────────────────────────────────────────── * * --vn-volume-slider-width Width of the slider track (default: 100px) * --vn-volume-track-bg Slider track color (default: rgba(255,255,255,0.3)) * --vn-volume-thumb-color Slider thumb color (default: #fff) * * ─── Credits screen ────────────────────────────────────────────────────────── * * --vn-credits-padding-block Top/bottom padding on credits (default: 7rem) * --vn-credit-el-margin Margin below each credit entry (default: 2rem) * --vn-credit-group-h2-margin-top Group title top margin (default: 7rem) * --vn-credit-group-h2-margin-bottom Group title bottom margin (default: 4rem) * * ─── Title page ────────────────────────────────────────────────────────────── * * --title-logo-max-width Logo maximum width (default: 400px) * --title-logo-max-height Logo maximum height (default: 200px) * --title-text-color Title text color (default: #fff) * --title-text-font-size Title text size (default: clamp(2rem, 5vw, 4rem)) * --title-text-font-weight Title text weight (default: 700) * --title-text-letter-spacing Title letter spacing (default: 0.04em) * --title-text-shadow Title drop shadow (default: 0 2px 8px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.4)) * --title-btn-bg Button background (default: rgba(100,108,255,0.25)) * --title-btn-bg-hover Button background on hover (default: rgba(100,108,255,0.5)) * --title-btn-border Button border shorthand (default: 2px solid rgba(100,108,255,0.5)) * --title-btn-border-color-hover Border color on hover (default: rgba(100,108,255,0.9)) * --title-btn-border-radius Button corner rounding (default: 6px) * --title-btn-color Button text color (default: #fff) * --title-btn-font-size Button text size (default: 1.1rem) * --title-btn-padding Button inner padding (default: 0.6rem 2.5rem) * --title-btn-min-width Button minimum width (default: 200px) * --title-btn-gap Space between buttons (default: 0.75rem) * --title-save-error-color Error message text color (default: #ff6b6b) * --title-save-error-bg Error message background (default: rgba(0,0,0,0.55)) * --title-save-error-border Error message border (default: 1px solid rgba(255,107,107,0.5)) * --title-save-error-border-radius Error message corner rounding (default: 6px) * --title-save-error-padding Error message inner padding (default: 0.5rem 1.25rem) * --title-save-error-font-size Error message text size (default: 0.95rem) * * ─── Background image ──────────────────────────────────────────────────────── * * --vn-bg-position Background image position (default: center) * * ─── Transitions ───────────────────────────────────────────────────────────── * * --vn-transition-duration Duration of each half of a transition (out or in phase) (default: 200ms) * Set automatically from `transitionDuration` in your story settings. * Change it there rather than here so the JS timing and CSS stay in sync. * * ───────────────────────────────────────────────────────────────────────────── * * Example — dark purple theme: * * :root { * --vn-dialogue-bg: rgba(20, 5, 40, 0.9); * --vn-dialogue-border: 2px solid rgba(180, 100, 255, 0.4); * --vn-dialogue-border-radius: 4px; * --vn-text-color: #f0d0ff; * --vn-name-font-size: 1.3rem; * --vn-option-bg: linear-gradient(135deg, rgba(140, 60, 200, 0.4), rgba(100, 20, 160, 0.2)); * --vn-option-border: 2px solid rgba(180, 100, 255, 0.5); * } */ :root { /* Add your overrides below */ }