/* The Count of Monte Cristo - the game's skin. * * css/game.css is the engine's stylesheet and ships byte-identical. This file is * layered after it and does three things: it retunes the palette from the * engine's terminal green to something that suits 1815, it styles the two * elements the patch layer injects (the names panel and the act chart), and it * makes the six accessibility profiles the engine sets on change this * game's layout and not only its colours. * * The engine toggles these classes on : high-contrast, reduced-motion, * large-controls, simplified-ui, reduced-typing and screen-reader-mode, and sets * --scale on the root element. */ :root { --mc-ink: #0b0e16; --mc-panel: #141824; --mc-panel-2: #1b2130; --mc-line: #2f3648; --mc-text: #e7e3d9; --mc-dim: #a4a096; --mc-gold: #cea652; --mc-gold-pale: #efd8a4; --mc-bad: #d98d74; --mc-serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif; --mc-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mc-mono: ui-monospace, "DejaVu Sans Mono", Menlo, monospace; } body { background: radial-gradient(1100px 560px at 20% -10%, #18202f 0%, rgba(24,32,47,0) 60%), var(--mc-ink); color: var(--mc-text); font-family: var(--mc-serif); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 90; background: var(--mc-gold); color: #14161d; padding: 10px 16px; font-family: var(--mc-sans); font-weight: 700; text-decoration: none; } .skip-link:focus { left: 8px; top: 8px; } /* The engine stylesheet leans on the browser default here, which is invisible against this palette. */ :focus-visible { outline: 2px solid var(--mc-gold); outline-offset: 2px; } /* --------------------------------------------------------------- the cover */ .cover-art { position: absolute; inset: 0; overflow: hidden; } .cover-sky { position: absolute; inset: 0 0 42% 0; background: linear-gradient(#080b14 0%, #131a28 55%, #37415a 100%); } .cover-moon { position: absolute; left: 74%; top: 12%; width: 58px; height: 58px; border-radius: 50%; background: #e8e7de; box-shadow: 0 0 90px 34px rgba(150,160,190,.24); } .cover-sea { position: absolute; inset: 58% 0 0 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 6px), linear-gradient(#111725, #05070c); } .cover-keep { position: absolute; left: 26%; bottom: 40%; width: 190px; height: 74px; background: #2b2f3a; border-top: 5px solid #363b48; } .cover-keep-tower { position: absolute; left: 38%; bottom: 40%; width: 54px; height: 132px; background: #32363f; border-top: 5px solid #3d424e; } .cover-window { position: absolute; left: 40.2%; bottom: 47%; width: 11px; height: 17px; background: #ffd782; box-shadow: 0 0 26px 9px rgba(255,196,96,.35); } .story-cover { background: var(--mc-ink); } .cover-art > * { pointer-events: none; } .cover-content { /* the art is absolutely positioned, so the copy has to sit above it */ position: relative; z-index: 2; background: rgba(11,14,22,.82); border: 1px solid var(--mc-line); box-shadow: 0 30px 90px rgba(0,0,0,.6); } .cover-kicker { font-family: var(--mc-sans); font-size: .72rem; letter-spacing: .22em; color: var(--mc-gold); } #cover-title { color: #f3efe4; letter-spacing: .02em; } #cover-subtitle { font-style: italic; color: var(--mc-gold-pale); } .cover-credit { color: var(--mc-dim); font-style: italic; } .cover-option { display: block; margin: 8px 0; color: var(--mc-text); } .start-story { background: var(--mc-gold); border: 1px solid var(--mc-gold); color: #14161d; font-family: var(--mc-sans); font-weight: 700; letter-spacing: .12em; min-height: 46px; cursor: pointer; } .story-cover small { display: block; color: var(--mc-dim); font-size: .82rem; } /* ------------------------------------------------------------------ chrome */ .topbar { background: linear-gradient(180deg, #151a26, #0e1219); border-bottom: 1px solid var(--mc-line); } .topbar .logo { font-family: var(--mc-serif); font-weight: 700; color: var(--mc-gold-pale); border: 2px solid var(--mc-gold); padding: 3px 9px; letter-spacing: .04em; } .topbar .product { color: var(--mc-dim); letter-spacing: .1em; } .topbar .product span { color: var(--mc-gold); } .metric b { color: var(--mc-gold-pale); } .panel, .mc-panel { background: var(--mc-panel); border: 1px solid var(--mc-line); } /* The injected panel cannot wear the .panel class, so it borrows the geometry the engine stylesheet gives one. */ .mc-panel { margin-bottom: 10px; } .mc-panel h2 { margin: 0; padding: 10px 12px; font-size: .7rem; } .mc-panel .panel-body { padding: 10px 12px; } .mc-panel .row { padding: 5px 0; } .panel h2, .mc-panel h2 { font-family: var(--mc-sans); font-size: .7rem; letter-spacing: .16em; color: var(--mc-gold); border-bottom: 1px solid var(--mc-line); } .panel .row, .mc-panel .row { border-bottom: 1px dotted var(--mc-line); } .panel .row.complete, .mc-panel .row.complete { color: var(--mc-gold-pale); } .panel .row.locked, .mc-panel .row.locked { color: #6d6a63; } .panel .row.locked .link { color: #6d6a63; } .panel .progress { background: #0d1017; border: 1px solid var(--mc-line); } .panel .progress i { background: var(--mc-gold); } .panel .link { background: none; border: 0; color: var(--mc-gold-pale); cursor: pointer; font: inherit; text-align: left; padding: 0; } /* the two things the patch layer injects */ .mc-tag { float: right; font-family: var(--mc-sans); font-size: .64rem; letter-spacing: .08em; color: var(--mc-dim); } .panel .row.complete .mc-tag, .mc-panel .row.complete .mc-tag { color: var(--mc-gold); } .mc-act { margin-bottom: 12px; } .mc-act h3 { font-family: var(--mc-sans); font-size: .66rem; letter-spacing: .12em; color: var(--mc-gold); margin: 8px 0 4px; text-transform: uppercase; } button.mc-verb { border-style: dashed !important; color: var(--mc-gold-pale) !important; } /* -------------------------------------------------------------- transcript */ .terminal { background: var(--mc-panel); border: 1px solid var(--mc-line); } .terminal .output { max-width: 68ch; } .terminal .output.command { font-family: var(--mc-mono); color: #7f93b5; margin-top: 16px; } .terminal .output.title { color: var(--mc-gold-pale); font-size: 1.06rem; border-left: 3px solid var(--mc-gold); padding-left: 14px; margin: 16px 0; } .terminal .output.system { border-left: 3px solid var(--mc-gold); padding-left: 14px; color: var(--mc-gold-pale); margin: 10px 0; } .terminal .output.warning, .terminal .output.error { color: var(--mc-bad); } .command-entry { background: var(--mc-panel); border: 1px solid var(--mc-line); } .command-entry input { font-family: var(--mc-mono); color: var(--mc-text); } .palette .palette-label { font-family: var(--mc-sans); font-size: .66rem; letter-spacing: .16em; color: var(--mc-gold); } .button-row button { font-family: var(--mc-sans); background: var(--mc-panel-2); border: 1px solid var(--mc-line); color: var(--mc-text); cursor: pointer; min-height: 34px; } .button-row button:hover { border-color: var(--mc-gold); } .button-row button.selected { background: var(--mc-gold); border-color: var(--mc-gold); color: #14161d; } .button-row.context button { border-style: dashed; } .button-row .hint { color: var(--mc-dim); font-style: italic; } .caption-region { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 80; background: rgba(11,14,22,.94); border: 1px solid var(--mc-gold); border-left-width: 4px; padding: 10px 18px; color: var(--mc-gold-pale); font-style: italic; max-width: min(680px, 90vw); } .caption-region[hidden] { display: none; } .caption-region::before { content: "cue \2014 "; font-family: var(--mc-sans); font-style: normal; font-size: .66rem; letter-spacing: .16em; color: var(--mc-gold); } .footerbar { border-top: 1px solid var(--mc-line); } .footerbar button { font-family: var(--mc-sans); background: var(--mc-panel-2); border: 1px solid var(--mc-line); color: var(--mc-text); cursor: pointer; min-height: 36px; } #dialog { background: var(--mc-panel); color: var(--mc-text); border: 1px solid var(--mc-line); } #dialog pre { white-space: pre-wrap; font-family: var(--mc-mono); font-size: .8rem; } .accessibility-grid label { display: block; margin: 8px 0; } .access-note { color: var(--mc-dim); font-size: .84rem; } .save-row { border-bottom: 1px solid var(--mc-line); padding: 8px 0; } /* ====================================================================== The six profiles. The engine sets the classes; this makes them mean something structural, not only cosmetic. ====================================================================== */ /* Low vision: whiter, heavier, and one column so nothing lives in a sidebar. */ body.high-contrast { --mc-ink: #000; --mc-panel: #000; --mc-panel-2: #101319; --mc-text: #fff; --mc-dim: #e4dfd1; --mc-line: #808a9e; --mc-gold: #ffd97a; --mc-gold-pale: #fff1c6; background: #000; } body.high-contrast .panel, body.high-contrast .terminal, body.high-contrast .command-entry { border-width: 2px; } body.high-contrast .button-row button, body.high-contrast .footerbar button { border-width: 2px; } body.high-contrast :focus-visible { outline-width: 4px; } /* Larger controls: reachable by a thumb or an unsteady hand. */ body.large-controls .button-row button, body.large-controls .footerbar button, body.large-controls .topbar button { min-height: 56px; padding: 10px 18px; } body.large-controls .command-entry input { min-height: 52px; } body.large-controls .button-row { gap: 10px; } /* Simplified: one column, and the panels that only add pressure removed. */ body.simplified-ui .workspace { display: block; } body.simplified-ui .stack { display: block; max-width: none; } body.simplified-ui .stack.right [data-panel="conversation"], body.simplified-ui .stack.left [data-panel="stats"], body.simplified-ui .stack.left [data-panel="achievements"], body.simplified-ui .topbar .metric { display: none; } body.simplified-ui .terminal { max-height: 46vh; } body.simplified-ui .terminal .output { max-width: 54ch; } /* Reduced typing: the buttons come forward. */ body.reduced-typing .command-entry { opacity: .85; } body.reduced-typing #context-buttons button { min-height: 48px; } /* Screen reader: linear order, decorative panels out of the tree. */ body.screen-reader-mode .workspace { display: block; } body.screen-reader-mode .stack { display: block; } body.screen-reader-mode [data-panel="map"] { display: none; } body.screen-reader-mode .cover-art { display: none; } body.screen-reader-mode .terminal { max-height: none; } body.screen-reader-mode .terminal .output { max-width: 78ch; } body.screen-reader-mode #context-buttons { display: block; } body.screen-reader-mode #context-buttons button { display: block; width: 100%; text-align: left; margin-bottom: 4px; } body.reduced-motion * { transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media (max-width: 1100px) { .workspace { display: block; } .stack { display: block; } } @media print { .topbar, .footerbar, .palette, .command-entry, .stack, .story-cover, #dialog, .caption-region { display: none; } body { background: #fff; color: #000; } .terminal { max-height: none; overflow: visible; border: 0; } }