/* ========================================================================== Portal shared stylesheet Tokens: DESIGN.md 5.3. Components: DESIGN.md 5.4. The values of the base theme are the literals of the Carcassonne page (css/styles.css and js/ui.js), copied by value. Nothing is imported from the game at run time, and no font file or other address is loaded. Themes base the Carcassonne look: parchment cards on dark olive, brown bar. It applies to every page that does not ask for anything else. dark dark cards with light ink. A page opts in on its root element: follows the visitor's system setting always dark always the base theme A page without the attribute always gets the base theme, so a game page never changes colour unless its builder asked for it. ========================================================================== */ :root { color-scheme: light; /* surfaces */ --p-page: #262e1f; --p-bar-top: #4a3a20; --p-bar-bottom: #3a2d18; --p-bar-text: #f0e6c8; --p-panel: #efe6cf; --p-card: #faf5e8; --p-field: #fffbf1; --p-line: #d9cba6; --p-line-soft: #e5dabb; --p-rule-strong: #4a3a20; /* ink */ --p-ink: #2b2417; --p-ink-heading: #4a3a20; --p-ink-body: #3c3220; --p-ink-muted: #8a7448; --p-ink-faint: #a08e60; /* attention */ --p-gold: #d8a927; --p-gold-wash: #fdf3d3; --p-highlight: #f0c432; --p-warn: #b3341f; /* results */ --p-win-bg: #dcefd2; --p-win-ink: #2c6420; --p-loss-bg: #f4d9d2; --p-loss-ink: #942f1f; --p-tie-bg: #efe8ce; --p-tie-ink: #6d5836; /* buttons */ --p-btn: #6d5836; --p-btn-line: #86703f; --p-btn-hover: #7e6740; --p-btn-text: #f7efdb; --p-go: #3f7d34; --p-go-line: #549a47; --p-go-hover: #4a9040; --p-stop: #9c3d2e; --p-stop-line: #b85441; /* layers */ --p-overlay: rgba(40,32,16,0.92); --p-overlay-text: #f2e9d2; --p-scrim: rgba(20,16,8,0.55); /* seats and table */ --p-seat-0: #2563eb; --p-seat-0-dark: #1a4bb0; --p-seat-1: #d63b2f; --p-seat-1-dark: #a52a1d; --p-table: #d9b985; /* type */ --p-font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --p-font-display: Cinzel, Georgia, serif; --p-font-mono: ui-monospace, Menlo, monospace; /* shape */ --p-radius-card: 10px; --p-radius-inner: 8px; --p-radius-btn: 7px; --p-radius-modal: 14px; --p-shadow-card: 0 1px 3px rgba(90,70,30,0.15); --p-shadow-float: 0 3px 12px rgba(0,0,0,0.4); --p-shadow-modal: 0 12px 48px rgba(0,0,0,0.5); } /* -------------------------------------------------------------------------- Dark theme. These values are new (chosen by the shell builder); they do not occur in the Carcassonne page, which has one look only. Button, gold and highlight colours stay as they are so both themes read as one family. The two blocks below must stay identical. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --p-page: #161b12; --p-bar-top: #3a2d18; --p-bar-bottom: #2a2011; --p-bar-text: #f0e6c8; --p-panel: #2a2418; --p-card: #332c1d; --p-field: #3d3523; --p-line: #5a4c30; --p-line-soft: #463b26; --p-rule-strong: #6d5836; --p-ink: #efe6cf; --p-ink-heading: #f0e6c8; --p-ink-body: #ddd2b4; --p-ink-muted: #b9a674; --p-ink-faint: #a3936a; --p-gold-wash: #4a3d18; --p-warn: #ef8a73; --p-win-bg: #23391c; --p-win-ink: #bfe3b0; --p-loss-bg: #47231c; --p-loss-ink: #f2b9ad; --p-tie-bg: #3a3320; --p-tie-ink: #e0d3a8; --p-overlay: rgba(12,10,5,0.92); --p-scrim: rgba(0,0,0,0.65); --p-seat-0: #4f86f7; --p-seat-0-dark: #2563eb; --p-seat-1: #e8574b; --p-seat-1-dark: #d63b2f; --p-table: #7a6238; --p-shadow-card: 0 1px 3px rgba(0,0,0,0.45); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --p-page: #161b12; --p-bar-top: #3a2d18; --p-bar-bottom: #2a2011; --p-bar-text: #f0e6c8; --p-panel: #2a2418; --p-card: #332c1d; --p-field: #3d3523; --p-line: #5a4c30; --p-line-soft: #463b26; --p-rule-strong: #6d5836; --p-ink: #efe6cf; --p-ink-heading: #f0e6c8; --p-ink-body: #ddd2b4; --p-ink-muted: #b9a674; --p-ink-faint: #a3936a; --p-gold-wash: #4a3d18; --p-warn: #ef8a73; --p-win-bg: #23391c; --p-win-ink: #bfe3b0; --p-loss-bg: #47231c; --p-loss-ink: #f2b9ad; --p-tie-bg: #3a3320; --p-tie-ink: #e0d3a8; --p-overlay: rgba(12,10,5,0.92); --p-scrim: rgba(0,0,0,0.65); --p-seat-0: #4f86f7; --p-seat-0-dark: #2563eb; --p-seat-1: #e8574b; --p-seat-1-dark: #d63b2f; --p-table: #7a6238; --p-shadow-card: 0 1px 3px rgba(0,0,0,0.45); } } /* ------------------------------- base ------------------------------------ */ /* No height: 100 % and no overflow: hidden here. A page that needs a full-screen board sets that in its own stylesheet. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--p-font-text); background: var(--p-page); /* Text that sits directly on the page background is light. Every parchment component below sets its own dark ink. */ color: var(--p-bar-text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } button, input, select, textarea { font-family: inherit; } [hidden] { display: none !important; } /* ------------------------------ top bar ---------------------------------- */ .p-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; background: linear-gradient(180deg, var(--p-bar-top), var(--p-bar-bottom)); color: var(--p-bar-text); padding: 8px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); position: relative; z-index: 20; } .p-brand { font-family: var(--p-font-display); font-size: 20px; font-weight: 700; letter-spacing: 1px; color: inherit; text-decoration: none; } a.p-brand:hover { text-decoration: underline; } a.p-brand:focus-visible { outline: 2px solid var(--p-gold); outline-offset: 3px; border-radius: 3px; } .p-topbar-title { font-size: 14px; font-weight: 600; opacity: 0.85; } .p-top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } /* ------------------------------- buttons --------------------------------- */ .p-btn { display: inline-block; background: var(--p-btn); color: var(--p-btn-text); border: 1px solid var(--p-btn-line); border-radius: var(--p-radius-btn); padding: 6px 12px; font-size: 13px; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.12s, transform 0.05s; } .p-btn:hover { background: var(--p-btn-hover); } .p-btn:active { transform: translateY(1px); } .p-btn:focus-visible { outline: 2px solid var(--p-gold); outline-offset: 2px; } .p-btn:disabled, .p-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; } .p-btn-primary { background: var(--p-go); border-color: var(--p-go-line); } .p-btn-primary:hover { background: var(--p-go-hover); } .p-btn-danger { background: var(--p-stop); border-color: var(--p-stop-line); } .p-btn-danger:hover { background: var(--p-stop-line); } .p-btn-wide { display: block; width: 100%; margin-top: 8px; } /* -------------------------------- layout --------------------------------- */ .p-layout { display: flex; min-height: 0; } .p-main { flex: 1; min-width: 0; } .p-side { width: 300px; background: var(--p-panel); color: var(--p-ink); border-left: 3px solid var(--p-rule-strong); display: flex; flex-direction: column; gap: 10px; padding: 10px; overflow-y: auto; } @media (max-width: 860px) { .p-layout { flex-direction: column; } .p-side { width: 100%; border-left: none; border-top: 3px solid var(--p-rule-strong); } } /* --------------------------------- card ---------------------------------- */ .p-card { background: var(--p-card); color: var(--p-ink); border: 1px solid var(--p-line); border-radius: var(--p-radius-card); padding: 10px 12px; box-shadow: var(--p-shadow-card); } .p-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--p-ink-muted); margin: 0 0 8px; } .p-hint { font-size: 12px; color: var(--p-ink-muted); } .p-panel-title .p-hint, .p-label .p-hint { text-transform: none; letter-spacing: 0; font-weight: 400; } /* --------------------------------- forms --------------------------------- */ .p-form-row { margin: 12px 0; } .p-label { display: block; font-size: 12px; font-weight: 700; color: var(--p-ink-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; } .p-seg { display: flex; gap: 6px; } .p-seg > button, .p-seg > label, .p-seg > a { flex: 1; padding: 8px 6px; border-radius: var(--p-radius-inner); border: 2px solid var(--p-line); background: var(--p-field); color: var(--p-ink-body); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; } .p-seg > button:focus-visible, .p-seg > a:focus-visible { outline: 2px solid var(--p-gold); outline-offset: 2px; } .p-seg > .p-seg-on { border-color: var(--p-gold); background: var(--p-gold-wash); } /* --------------------------------- modal --------------------------------- */ .p-modal-back { position: fixed; inset: 0; background: var(--p-scrim); z-index: 50; display: flex; align-items: center; justify-content: center; } .p-modal { background: var(--p-card); color: var(--p-ink); border: 1px solid var(--p-line); border-radius: var(--p-radius-modal); padding: 20px 22px; max-width: min(640px, 92vw); max-height: 86vh; overflow-y: auto; box-shadow: var(--p-shadow-modal); } .p-modal h2 { font-family: var(--p-font-display); color: var(--p-ink-heading); font-size: 19px; margin: 0 0 12px; } .p-modal-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; } /* --------------------------------- toast --------------------------------- */ .p-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--p-overlay); color: var(--p-overlay-text); border-radius: 9px; padding: 9px 16px; font-size: 13px; text-align: center; max-width: 70%; z-index: 60; box-shadow: var(--p-shadow-float); transition: opacity 0.3s; } .p-toast.p-toast-off { opacity: 0; pointer-events: none; } /* --------------------------- result and scores --------------------------- */ .p-banner-win, .p-banner-loss, .p-banner-tie { text-align: center; font-size: 22px; font-weight: 800; padding: 10px; border-radius: var(--p-radius-card); margin-bottom: 10px; } .p-banner-win { background: var(--p-win-bg); color: var(--p-win-ink); } .p-banner-loss { background: var(--p-loss-bg); color: var(--p-loss-ink); } .p-banner-tie { background: var(--p-tie-bg); color: var(--p-tie-ink); } .p-score-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; color: var(--p-ink); } .p-score-table th, .p-score-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--p-line-soft); } .p-score-table th:first-child, .p-score-table td:first-child { text-align: left; } .p-score-table .p-total td { font-weight: 800; font-size: 16px; border-top: 2px solid var(--p-ink-faint); } /* ---------------------------------- log ---------------------------------- */ .p-log { font-size: 12px; line-height: 1.45; color: var(--p-ink); overflow-y: auto; } .p-log > * { padding: 2px 0; border-bottom: 1px dotted var(--p-line-soft); } .p-log time, .p-log .p-log-time { color: var(--p-ink-faint); font-size: 10px; margin-right: 5px; } /* -------------------------------- key cap -------------------------------- */ .p-kbd { background: var(--p-line-soft); color: var(--p-ink); border: 1px solid var(--p-line); border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: inherit; } /* --------------------------------- notice -------------------------------- */ .p-note { background: var(--p-gold-wash); color: var(--p-ink-body); border: 1px solid var(--p-line); border-left: 4px solid var(--p-gold); border-radius: var(--p-radius-inner); padding: 10px 14px; font-size: 13px; line-height: 1.55; } .p-note > p, .p-note > ul { margin: 0 0 6px; } .p-note > :first-child { margin-top: 0; } .p-note > :last-child { margin-bottom: 0; } .p-note-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--p-ink-heading); margin: 0 0 4px; } /* ------------------------------ landing page ----------------------------- */ .p-landing { max-width: 1080px; margin: 0 auto; padding: 26px 16px 8px; } .p-intro { margin: 0 0 20px; } .p-intro h1 { font-family: var(--p-font-display); font-size: 26px; font-weight: 700; letter-spacing: 1px; line-height: 1.2; margin: 0 0 6px; color: var(--p-bar-text); } .p-intro p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--p-bar-text); opacity: 0.85; } .p-game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 20px; padding: 0; list-style: none; } @media (max-width: 960px) { .p-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .p-game-grid { grid-template-columns: minmax(0, 1fr); } } .p-game-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; } /* Cover picture: a screenshot of the game's own page, at the top of its card. It runs from edge to edge, so it takes back the card's 16 px padding, and its top corners follow the card's rounded corners (less the 1 px border). The ratio is set here as well as by the width and height attributes, so the card keeps its height while the picture loads and whatever the file's size. The panel colour shows until the picture arrives. */ .p-game-cover { display: block; width: calc(100% + 32px); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; margin: -16px -16px 2px; border-bottom: 1px solid var(--p-line); border-radius: calc(var(--p-radius-card) - 1px) calc(var(--p-radius-card) - 1px) 0 0; background: var(--p-panel); color: var(--p-ink-muted); font-size: 12px; } .p-game-name { font-family: var(--p-font-display); font-size: 20px; font-weight: 700; letter-spacing: 1px; line-height: 1.2; color: var(--p-ink-heading); margin: 0; } .p-game-desc { font-size: 14px; line-height: 1.5; color: var(--p-ink-body); margin: 0; } .p-status { margin: 0; padding: 9px 11px; background: var(--p-field); border: 1px solid var(--p-line-soft); border-radius: var(--p-radius-inner); } .p-status dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--p-ink-heading); margin: 0 0 4px; } .p-status dd { margin: 0; font-size: 13px; line-height: 1.5; color: var(--p-ink-body); } .p-badge { display: inline-block; padding: 1px 8px; border-radius: 9px; border: 1px solid var(--p-line); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: none; background: var(--p-tie-bg); color: var(--p-tie-ink); } .p-badge-measured { background: var(--p-win-bg); color: var(--p-win-ink); } .p-badge-beta { background: var(--p-gold-wash); color: var(--p-ink-heading); border-color: var(--p-gold); } .p-fair { font-size: 12.5px; line-height: 1.5; color: var(--p-ink-body); margin: 0; padding-left: 9px; border-left: 3px solid var(--p-gold); } .p-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; } .p-game-actions .p-btn { padding: 8px 16px; font-weight: 600; } .p-footer { max-width: 1080px; margin: 0 auto; padding: 14px 16px 28px; font-size: 12px; line-height: 1.5; color: var(--p-bar-text); opacity: 0.7; } /* Dark theme: the covers are dimmed a little, so that a bright screenshot does not glare on a dark card. The two rules must stay identical (shell test C11). */ :root[data-theme="dark"] .p-game-cover { filter: brightness(0.88); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .p-game-cover { filter: brightness(0.88); } } @media (max-width: 700px) { .p-landing { padding-top: 18px; } .p-intro h1 { font-size: 22px; } .p-brand { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .p-btn, .p-toast { transition: none; } }