/* Reset some default margins and padding */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Let the font cascade from (so per-mode fonts work); form controls don't inherit font-family by default, so opt them in. */ input, textarea, button, select { font-family: inherit; } /* Per-mode accent colour. Each mode sets --accent / --accent-dark; the rest of the stylesheet references these so a mode feels distinct without re-theming. */ body { --accent: #607d8b; --accent-dark: #4b626e; } /* fallback */ body.mode-general { --accent: #607d8b; --accent-dark: #4b626e; } /* slate */ body.mode-songs { --accent: #4a90e2; --accent-dark: #357ab7; } /* blue */ body.mode-questions { --accent: #8f2f46; --accent-dark: #b64a62; } /* wine (Manifest/Waypoint conference theme — see end of file) */ body.mode-person { --accent: #c0473b; --accent-dark: #9a382e; } /* brick red */ body.mode-place { --accent: #4a9d6e; --accent-dark: #3a7d57; } /* forest green */ /* Base (mobile): QR sits full-width in normal flow, as before. No zoom affordance. */ #qrWrap { position: relative; padding-top: 50px; } #qr { display: block; width: 100%; /* Adjust size as needed */ height: auto; } @media only screen and (min-width: 750px) { /* Only float in the corner on bigger screens */ /* The QR lives in the top-right corner as a floating widget you can click to zoom. */ #qrWrap { position: fixed; /* JS (layoutQr) sets --qr-top / --qr-size to centre and size the QR in the space beside the text box; these are the pre-JS fallbacks. */ top: var(--qr-top, 20px); right: 40px; width: var(--qr-size, 183px); padding-top: 0; cursor: zoom-in; /* magnifying-glass-with-plus cursor */ z-index: 150; transition: width 0.25s ease, top 0.25s ease, right 0.25s ease; } /* Zoomed: a big square overlay anchored top-right. Fixed, so it hovers over the page rather than reflowing anything. */ #qrWrap.zoomed { width: min(48vw, 80vh); top: 20px; right: 20px; cursor: zoom-out; /* magnifying-glass-with-minus cursor */ } } a { text-decoration: none; } /* Connection-lost banner: pinned across the top, hidden until JS adds .show when a request fails. Slides down so it's noticeable but not jarring. */ #connectionBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 10px 16px; background-color: #c0392b; color: #ffffff; text-align: center; font-weight: 600; font-family: Arial, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transform: translateY(-100%); transition: transform 0.25s ease; } #connectionBanner.show { transform: translateY(0); } body { background-color: #f3f4f6; /*leave space at the bottom for the QR code*/ padding: 40px 40px 250px 40px; /* top right bottom left */ color: #333333; margin: 0; font-family: Arial, sans-serif; /* Use a standard web font. Adjust as needed. */ position: relative; min-height: 100vh; /* Ensure full viewport height */ /* overflow-y: auto; /* Only show a scrollbar when necessary */ } h1 { color: var(--accent); margin-bottom: 20px; } /* The room URL subtitle: large and monospace so it's easy to read and type. */ h2 { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 400; word-break: break-all; } /* The room/url subtitle is a link to itself (easy to copy); it only hints that it's a link by underlining on hover, and the room name itself is bolded. */ h2 a#roomUrl { color: inherit; text-decoration: none; } h2 a#roomUrl:hover { text-decoration: underline; } h2 a#roomUrl strong { font-weight: 700; } label, input, button { margin-bottom: 10px; } input[type="text"], textarea, button { padding: 10px 15px; border-radius: 5px; border: 1px solid #cccccc; } /* Unified suggestion box (styling copied from the Waypoint "Add a comment" box): a bordered rounded container holds a borderless, transparent textarea, with the Submit button tucked into the bottom-right corner. The textarea reserves bottom padding so text never runs under the button. */ #submitform { position: relative; width: 100%; max-width: none; background: #ffffff; border: 1px solid #cccccc; border-radius: 8px; margin-bottom: 10px; } #submitform:focus-within { border-color: var(--accent); } #itemInput { display: block; width: 100%; max-width: none; margin: 0; border: none; background: transparent; border-radius: 8px; padding: 10px 12px 36px 12px; /* bottom space for the corner button */ color: inherit; } #submitBtn { position: absolute; bottom: 8px; right: 8px; width: auto; max-width: none; margin: 0; padding: 5px 12px; font-size: 13px; font-weight: 500; border-radius: 6px; } textarea { font-size: 1em; resize: none; /* single-line modes: no drag handle */ overflow: hidden; vertical-align: top; } textarea.multiline { min-height: 5em; resize: none; overflow: auto; } input[type="text"]:focus, textarea:focus { outline: none; } button { background-color: var(--accent); color: #ffffff; border: none; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: var(--accent-dark); } /* Mode switcher: gear icon + dropdown, tucked into the bottom-right of the footer (the top-right is now occupied by the QR code). */ #modeMenu { position: fixed; bottom: 4px; /* vertically centres the gear in the 40px footer band */ right: 48px; /* inset from the footer's right edge */ z-index: 200; } #modeGear { width: auto; max-width: none; margin: 0; padding: 4px 8px; background: none; color: #9aa0a6; font-size: 22px; line-height: 1; transition: color 0.2s, transform 0.2s; } #modeGear:hover { background: none; color: var(--accent); transform: rotate(30deg); } #modeMenuList { display: none; position: absolute; top: auto; bottom: 36px; /* open upward, since the gear sits at the bottom */ right: 0; margin: 0; list-style: none; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); overflow: hidden; min-width: 140px; } #modeMenu.open #modeMenuList { display: block; } #modeMenuList li { background: none; margin: 0; padding: 0; display: block; border-radius: 0; } #modeMenuList button { width: 100%; max-width: none; margin: 0; padding: 10px 14px; text-align: left; background: none; color: #333333; border-radius: 0; } #modeMenuList button:hover { background: #f3f4f6; color: #333333; } #modeMenuList button.active { background: var(--accent); color: #ffffff; } /* Title-as-switcher: the last word of the heading ("song"/"question"/"thing") is a clickable inline mode switcher. A dotted underline + pointer cursor hint that it's interactive. Clicking opens a dropdown whose items are styled like the heading word itself — every mode's noun, current one first and sitting in the trigger word's own spot — so it reads as if the word was always the top of a hidden list. The trigger is hidden while open (its space reserved) so the first list item slots cleanly into place. */ .noun-menu { position: relative; display: inline-block; } .mode-noun { cursor: pointer; /* No resting indication that it's clickable; the underline only appears on hover. */ text-decoration: none; } .mode-noun:hover { text-decoration: underline solid; text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Hide (but keep the space for) the trigger word while the menu is open; the menu's first item takes its place. */ .noun-menu.open .mode-noun { visibility: hidden; } .noun-menu-list { display: none; position: absolute; /* Offsets cancel the list/button padding so the first item's text lands exactly on the trigger word (list pad 6/14 + button pad 4/0). */ top: -10px; left: -14px; margin: 0; padding: 6px 14px; z-index: 200; list-style: none; background: #ffffff; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); /* Inherit the heading's font/size/weight so items look like the title word. */ font: inherit; } .noun-menu.open .noun-menu-list { display: block; } .noun-menu-list li { background: none; margin: 0; padding: 0; display: block; border-radius: 0; } .noun-menu-list button { display: block; width: 100%; max-width: none; margin: 0; padding: 4px 0; border: none; border-radius: 0; background: none; text-align: left; cursor: pointer; /* Match the heading word: same font/size (inherited), accent colour, and the dotted underline affordance. */ font: inherit; color: var(--accent); line-height: 1.15; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; /* Same quiet underline as the trigger word; firms up on hover. */ text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); transition: color 0.15s ease, text-decoration-color 0.15s ease; } .noun-menu-list button:hover { background: none; color: var(--accent-dark); text-decoration-style: solid; text-decoration-color: currentColor; } ul { list-style-type: none; margin-top: 20px; } /* The "Check the box…" prompt and the "Already Asked/Played:" label each sit right above a list (which carries its own margin-top), so they looked bottom-heavy. Add breathing room above them to balance the spacing. */ #likePrompt { margin-top: 24px; } #itemList2Label { margin-top: 24px; } li { background-color: #ffffff; padding: 10px 15px; margin-bottom: 10px; border-radius: 5px; display: grid; /* Changed to grid */ grid-template-columns: 1fr auto auto auto; /* 1st column for item text, 2nd for checkbox, 3rd for vote count */ align-items: center; gap: 10px; /* spacing between grid items */ } .hide-item-link { margin-left: 10px; /* Add spacing to keep it from touching the other content */ color: #ff0000; /* Optional: Change color to red or whatever you prefer */ cursor: pointer; text-decoration: none; /* Ensure the link doesn't have an underline */ } .hide-item-link:hover { text-decoration: underline; /* Optionally add underline on hover */ } li span { color: #555555; } /* .checkbox-container { } */ .count-span { width:5em; align-items: center; text-align:center; white-space: nowrap; } input[type="checkbox"] { margin: 5px; /* This provides spacing between checkbox and the count */ accent-color: var(--accent); /* padding: 7px 0; /* Add padding to center the text vertically */ } .item-text { background-color: #ff0000; text-decoration: none; } /* Completed items (Done / Already Played / Already Asked) live in #itemList2. They share the live-item markup, so de-emphasise them here: faded, slightly desaturated, flat (no shadow), with the text struck through. Hovering brings a card back to full strength so it stays readable and easy to un-complete. Mode-agnostic (works on the songs/general cards and the questions paper cards alike) since it leans on opacity/filter rather than fixed colours. */ #itemList2 li { opacity: 0.55; filter: grayscale(0.5); box-shadow: none; transition: opacity 0.2s ease, filter 0.2s ease; } #itemList2 li > span:first-child { text-decoration: line-through; text-decoration-color: #999999; } #itemList2 li:hover { opacity: 0.95; filter: grayscale(0); } .footer { position: absolute; /* Position the footer at the bottom */ bottom: 0; left: 40px; /* span symmetrically with the body padding so its right edge */ right: 40px; /* is predictable (the gear sits on it) */ height: 40px; /* Set the height of the footer */ background-color: #f1f1f1; /* A light grey background */ text-align: center; /* Center the text */ border-top: 1px solid #e0e0e0; /* A subtle top border */ } .footer p { padding: 7px 0; /* Add padding to center the text vertically */ margin: 0; /* Remove default margins */ color: #333333; /* A darker text color for contrast */ font-size: 14px; /* Adjust font size */ } .footer a { color: inherit; /* Blend with the footer text rather than default blue */ text-decoration: underline; text-decoration-color: #b0b0b0; /* Subtle grey underline */ text-underline-offset: 2px; transition: text-decoration-color 0.15s ease; } .footer a:hover { text-decoration-color: #333333; /* Underline darkens on hover */ } /* ───────────────────────────────────────────────────────────────────────── Questions mode: match the "look and feel" of the Manifest/Waypoint conference webapp (waypoint.lighthaven.space). Warm paper background, Source Serif 4 display headings, Karla body text, a wine accent, and rounded panels with soft shadows. Everything is scoped to body.mode-questions so the songs/general modes are untouched. ───────────────────────────────────────────────────────────────────────── */ body.mode-questions { --q-paper: #fffcf6; /* panel / surface */ --q-ink: #1a1816; /* primary text */ --q-muted: #6f625c; /* secondary text */ --q-line: #3d231438; /* hairline borders */ --q-shadow: 0 4px 16px #311f152e; background: linear-gradient(180deg, #f4efe5 0%, #ebe2d3 100%) fixed; color: var(--q-ink); font-family: "Karla", ui-sans-serif, system-ui, sans-serif; } /* Serif display heading, dark ink (the accent is reserved for interactive bits) */ body.mode-questions h1#heading { font-family: "Source Serif 4", ui-serif, Georgia, serif; font-weight: 600; color: var(--q-ink); letter-spacing: -0.01em; } /* room/url subtitle: quiet, but keep it large and monospace (see base h2) */ body.mode-questions h2 { color: var(--q-muted); } body.mode-questions #likePrompt { color: var(--q-muted); } /* "Asked:" rendered as a small uppercase tracked label, like the conference's "SESSION IDEA" eyebrow text */ body.mode-questions #itemList2Label p { color: var(--q-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; } /* paper panels: the suggestion box + the suggestion cards */ body.mode-questions #submitform { background: var(--q-paper); border-color: #bdb2a2; /* warm tan line, matching the conference box */ box-shadow: var(--q-shadow); } body.mode-questions #itemInput::placeholder { color: var(--q-muted); } body.mode-questions li { background: var(--q-paper); border: 1px solid var(--q-line); border-radius: 14px; box-shadow: var(--q-shadow); } /* secondary text muted, the question text itself ink */ body.mode-questions li span, body.mode-questions .count-span { color: var(--q-muted); } body.mode-questions li > span:first-child { color: var(--q-ink); } body.mode-questions .hide-item-link { color: var(--q-muted); } body.mode-questions .hide-item-link:hover { color: var(--accent); } /* gear dropdown on paper */ body.mode-questions #modeMenuList { background: var(--q-paper); border-color: var(--q-line); border-radius: 12px; box-shadow: var(--q-shadow); } body.mode-questions #modeMenuList button { color: var(--q-ink); } body.mode-questions #modeMenuList button:hover { background: #852f4014; /* accent wash */ color: var(--q-ink); } /* Title-noun dropdown on paper. The heading word here is ink-coloured serif (the h1 sets that and the items inherit the font), so the items use ink too — keeping the seamless "word expanded into a list" look. */ body.mode-questions .noun-menu-list { background: var(--q-paper); box-shadow: var(--q-shadow); } /* The general `body.mode-questions li` paper-card rule (border + radius + shadow) is more specific than the base .noun-menu-list li reset, so it gives each menu item its own little rectangle. Override it back to flat here. */ body.mode-questions .noun-menu-list li { background: none; border: none; border-radius: 0; box-shadow: none; } body.mode-questions .noun-menu-list button { color: var(--q-ink); } body.mode-questions .noun-menu-list button:hover { color: var(--accent); /* wine on hover */ } body.mode-questions .footer { background: transparent; border-top: 1px solid var(--q-line); } body.mode-questions .footer p { color: var(--q-muted); } /* ───────────────────────────────────────────────────────────────────────── Desktop layout overrides for the top-right QR. Kept at the end of the file so they win over the equal-specificity base #submitform / body rules above by source order. ───────────────────────────────────────────────────────────────────────── */ @media only screen and (min-width: 750px) { /* Narrow the content so it clears the floating top-right QR (183px + gap). */ #submitform, h1#heading, h2 { max-width: calc(100% - 240px); } /* The QR no longer reserves space at the bottom; just clear the footer. */ body { padding-bottom: 80px; } }