:root { --paper: #f3ead7; --ink: #1c1a17; --red: #8a2b2b; --term: #0f0d0a; --term-text: #d9c89a; --gold: #c9a35a; --card: #fffdf5; --rule: #c9b98f; --shade: #e9dfc6; --accent: var(--red); } /* Part II mood, set once as data-mood="night" on when the code is accepted (see app.js). Same tokens, dark values: everything already styled off these variables shifts for free. */ :root[data-mood="night"] { --paper: #131820; --ink: #e6dfcb; --card: #1d2531; --rule: #33404f; --shade: #232c39; --term: #0a0e14; --term-text: #9fc0ee; --accent: #3f6fb5; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.4 "Cormorant Garamond", Georgia, serif; transition: background .8s, color .8s; } button { font: inherit; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 4px 12px; cursor: pointer; letter-spacing: 1px; } button.quiet { background: transparent; color: var(--ink); } button:disabled { opacity: .4; cursor: default; } input, textarea { font: inherit; background: var(--card); color: var(--ink); border: 1px solid var(--ink); padding: 4px 6px; } .label { font-weight: 700; letter-spacing: 1px; font-size: 11px; } .label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .col-erd .label-row { position: relative; z-index: 16; } .muted { opacity: .6; font-size: 13px; } .row { display: flex; gap: 8px; align-items: center; margin: 6px 0; } .box { border: 1px solid var(--ink); padding: 6px 8px; margin: 10px 0; } /* masthead */ .masthead { position: relative; text-align: center; border-bottom: 2px solid var(--ink); padding: 10px 16px 6px; } .chapter-menu-toggle { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .chapter-menu { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 6px; max-width: 90vw; background: var(--card); border: 1px solid var(--ink); box-shadow: 2px 2px 5px rgba(0,0,0,.25); padding: 8px; z-index: 21; } .chapter-menu[hidden] { display: none; } .chapter-menu-item { cursor: pointer; padding: 4px 10px; border: 1px solid var(--rule); background: var(--paper); font-size: 13px; } .chapter-menu-item:hover { background: var(--shade); } .mast-title { font: 900 32px/1 "Playfair Display", serif; letter-spacing: 1px; } .mast-sub { font-size: 11px; letter-spacing: 2px; margin-top: 4px; } /* landing */ #landing { position: fixed; inset: 0; background: var(--paper); z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; } #landing[hidden] { display: none; } .landing-card { max-width: 640px; text-align: center; border: 2px solid var(--ink); padding: 24px; } .landing-card h1 { font: 700 26px/1.15 "Playfair Display", serif; margin: 12px 0; } .landing-buttons { display: flex; gap: 12px; justify-content: center; margin: 16px 0 8px; } .compete-form { border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 8px; } .compete-form[hidden] { display: none; } .compete-form .row { justify-content: center; } .compete-form input { flex: 1; min-width: 160px; max-width: 320px; font-family: "Special Elite", monospace; } .compete-info { font-family: "Special Elite", monospace; color: var(--red); letter-spacing: 1px; margin-top: 6px; } .compete-info[hidden] { display: none; } /* columns */ .columns { display: grid; grid-template-columns: 340px 1fr 380px; gap: 16px; padding: 16px; align-items: start; } .col-story h2 { font: 700 22px/1.15 "Playfair Display", serif; margin: 0 0 6px; } .chapter-head { display: flex; align-items: center; gap: 10px; } .chapter-icon { width: 44px; height: 44px; flex: none; } .chapter-icon .accent { stroke: var(--accent); } .story { text-align: justify; } /* terminal */ #sql { width: 100%; min-height: 160px; background: var(--term); color: var(--term-text); border: 1px solid #6b5a33; font: 14px/1.4 "Special Elite", monospace; padding: 8px 10px; resize: vertical; } .results { background: var(--card); border: 1px solid var(--rule); font: 13px "Special Elite", monospace; overflow: auto; max-height: 50vh; margin-top: 6px; } .results table { border-collapse: collapse; width: 100%; } .results th { text-align: left; border-bottom: 1px solid var(--ink); padding: 2px 6px; font-weight: normal; letter-spacing: 1px; font-size: 11px; position: sticky; top: 0; background: var(--card); } .results td { padding: 2px 6px; border-bottom: 1px dotted var(--rule); white-space: nowrap; } .results .error { color: var(--red); padding: 8px; white-space: pre-wrap; } .answer-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .answer-row input { flex: 1; font-family: "Special Elite", monospace; } .reply { min-height: 1.4em; font-style: italic; } #history { font: 12px "Special Elite", monospace; padding-left: 20px; } #history li { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ERD */ .erd { background: var(--card); border: 1px solid var(--ink); overflow: auto; max-height: 80vh; position: relative; } .erd.large { position: fixed; inset: 16px; z-index: 15; max-height: none; } /* Native size, not squished to the column width: past a few tables the diagram is wider than the column, and .erd's own overflow:auto (above) scrolls it instead of shrinking labels to nothing. width:auto on an inline SVG resolves to the container's width, not the viewBox, hence max-content. */ .erd svg { display: block; width: max-content; height: max-content; font: 11px "Special Elite", monospace; } .erd .table rect { fill: var(--paper); stroke: var(--ink); } .erd .table rect.head { fill: var(--ink); } .erd .table .tname { fill: var(--paper); } .erd .table .col { fill: var(--ink); font-size: 10px; } .erd .fk { stroke: var(--red); fill: none; stroke-width: 1.2; } .erd .hidden { display: none; } .erd .reveal { animation: slidein .8s ease-out both; } .stamp { position: absolute; right: 12px; top: 12px; border: 3px solid var(--red); color: var(--red); font: 900 18px "Playfair Display", serif; padding: 3px 8px; letter-spacing: 2px; transform: rotate(-12deg); animation: stamp 1s ease-out both; pointer-events: none; } @keyframes slidein { from { transform: translateY(-30px); opacity: 0 } to { transform: none; opacity: 1 } } @keyframes stamp { 0% { transform: scale(3) rotate(-12deg); opacity: 0 } 60% { transform: scale(1) rotate(-12deg); opacity: 1 } 100% { transform: scale(1) rotate(-12deg); opacity: 1 } } /* story column */ .witnesses button { display: block; width: 100%; margin: 4px 0; text-align: left; background: var(--shade); color: var(--ink); } .witnesses .hint { background: var(--card); border-left: 3px solid var(--gold); padding: 6px 8px; margin: 4px 0; font-size: 14px; } .board { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; min-height: 40px; padding: 10px 8px 4px; background-color: #cda876; background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px); background-size: 6px 6px; } .card { position: relative; background: var(--card); box-shadow: 2px 2px 5px rgba(0,0,0,.3); padding: 8px 8px 6px; font-size: 13px; animation: drop .6s ease-out both; transform: rotate(-2deg); cursor: pointer; } .card::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0, var(--accent) 35%, #3a0d0d 100%); transform: translateX(-50%); box-shadow: 1px 2px 2px rgba(0,0,0,.4); } .card:hover { box-shadow: 2px 2px 8px rgba(0,0,0,.4); } .card:nth-child(even) { transform: rotate(1.5deg); } /* suspects gallery: portraits are site/portraits/*.jpg (Style A/Lavery colour, see the spec) */ .suspects { position: fixed; inset: 0; z-index: 19; background: var(--paper); overflow: auto; padding: 20px 16px 40px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-content: flex-start; } .suspects[hidden] { display: none; } .suspects-close { position: fixed; top: 16px; right: 16px; } .suspect { width: 180px; text-align: center; position: relative; } .suspect img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 50% / 40%; box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.25); position: relative; } /* halftone: the same dot-screen technique as the cork board, laid over the portrait */ .suspect::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 3/4; border-radius: 50% / 40%; background-image: radial-gradient(#000 1px, transparent 1px); background-size: 3px 3px; opacity: .10; mix-blend-mode: multiply; pointer-events: none; } .suspect b { display: block; font: 700 15px "Playfair Display", serif; margin-top: 8px; } .suspect p { font-size: 13px; margin: 2px 0 0; } /* a single portrait set into running text: the landing (Ganimard), the two endings (Blakeney, the Comtesse) */ .portrait { float: left; width: 96px; aspect-ratio: 3/4; object-fit: cover; border-radius: 50% / 40%; margin: 4px 14px 6px 0; box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.25); } :root[data-mood="night"] .suspect img, :root[data-mood="night"] .portrait { filter: brightness(.85) saturate(.9) contrast(1.15) drop-shadow(0 0 20px rgba(63,111,181,.35)); } @keyframes drop { from { transform: translateY(-40px) rotate(-6deg); opacity: 0 } to { opacity: 1 } } .telegram { font: 13px/1.4 "Special Elite", monospace; white-space: pre-wrap; background: #fff8e8; border: 1px solid var(--rule); padding: 8px; min-height: 3em; cursor: pointer; } .telegram:empty { display: none; } #notes { width: 100%; min-height: 120px; font: 13px/1.4 "Special Elite", monospace; } /* toasts */ /* ?admin in the URL only; not linked from anywhere a student would find */ .admin-panel { position: fixed; left: 16px; bottom: 16px; background: var(--card); border: 2px dashed var(--accent); padding: 6px 8px; z-index: 20; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: min(420px, calc(100vw - 32px)); } .admin-panel button { padding: 2px 8px; font-size: 12px; } .admin-seasons { flex-basis: 100%; font-size: 12px; } .admin-seasons input { font-size: 12px; } .admin-board { flex-basis: 100%; box-sizing: border-box; font-size: 12px; } .admin-seasons input[type=number] { width: 4em; } .admin-seasons textarea { width: 100%; box-sizing: border-box; font-size: 12px; } .admin-seasons #admin-season { width: 4em; } .admin-seasons table { border-collapse: collapse; margin: 6px 0; } .admin-seasons th, .admin-seasons td { padding: 1px 8px 1px 0; text-align: left; } .admin-msg { word-break: break-all; margin-top: 4px; } #toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 10; } .toast { background: var(--ink); color: var(--paper); padding: 8px 12px; border-left: 4px solid var(--gold); animation: slidein .4s ease-out both; max-width: 320px; } .toast b { color: var(--gold); } /* certificate and print */ #certificate { display: none; } @media print { body > *:not(#certificate) { display: none !important; } #certificate { display: block; padding: 40px; text-align: center; font-size: 18px; } #certificate .mast-title { font-size: 40px; } #certificate h1 { font: 700 30px "Playfair Display", serif; } #certificate .badges { columns: 2; text-align: left; } } @media (max-width: 900px) { .columns { grid-template-columns: 1fr; padding: 16px; } .erd { max-height: 40vh; } .mast-title { font-size: 24px; } .row, .landing-buttons, .answer-row { flex-wrap: wrap; } .landing-card { padding: 16px; } #sql { width: 100%; } }