/* ============================================================ THE HOUSE - shared stylesheet Everything you'll want to change lives up top in :root. Change a color there once and it updates across every page. ============================================================ */ :root { /* ============================================================ BACKGROUND - this is the part you asked about. "Leather" is active below. To go PURE BLACK instead, just change these three lines to the black values in the comment. ------------------------------------------------------------ LEATHER (active): --shadow:#1a1310 --wall:#251b15 --wall-lit:#33241a BLACK: --shadow:#0d0c0b --wall:#1a1613 --wall-lit:#241d18 ============================================================ */ --shadow: #1a1310; /* THE PAGE BACKGROUND (dark leather) */ --wall: #251b15; /* card background (a shade lighter) */ --wall-lit: #33241a; /* a card the lamp actually reaches */ /* ---- ACCENTS (leave or tweak) ---------------------------- */ --paper: #ece0cb; /* aged paper - headings, cream text */ --ink: #e4d8c6; /* main body text, warm cream */ --ink-soft: #ab9c86; /* quieter text, captions, labels */ --lamp: #e3a94e; /* amber lamplight - links + accents */ --edgeclr: #9d8570; /* faded-ink taupe - hairlines only */ /* ---- TYPE ------------------------------------------------ */ --display: "IM Fell English", Georgia, serif; /* haunted book */ --body: "EB Garamond", Georgia, serif; /* warm, readable */ --label: "Courier Prime", "Courier New", monospace; /* typewriter */ /* ---- SPACING / FEEL -------------------------------------- */ --measure: clamp(34rem, 72vw, 72rem); /* fluid: scales with window width */ --edge: 1px solid rgba(157, 133, 112, 0.28); /* taupe hairline */ --hand: "Caveat", cursive; /* Journal's handwriting */ --ink-on-paper: #2e2118; /* dark text for light "paper" cards */ --dt-on-paper: #8a5a24; /* label color for light "paper" cards */ --urgent: #c0463c; /* VA-needed tag glow */ } /* ---- RESET ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; /* iOS Safari specifically needs this on , not just , or a `position:fixed` element's overflowing child (like the guestbook lightbox) can still open up a sideways pan even with body's own overflow-x hidden */ width: 100%; } body { margin: 0; background: var(--shadow); color: var(--ink); font-family: var(--body); font-size: 1.15rem; line-height: 1.7; position: relative; min-height: 100vh; width: 100%; overflow-x: hidden; /* guards against any one element (a lightbox, a wide image, a `vw`-sized box) pushing the whole page wider than the viewport and making it pan sideways — nothing on the page is meant to scroll horizontally */ } /* ambient vignette: the room's edges never quite lit. this slow pulse is the one "moving" thing on the page. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient( 120% 100% at 50% 32%, transparent 42%, rgba(0, 0, 0, 0.5) 100% ); animation: breathe 11s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } .wrap, header, footer { position: relative; z-index: 2; } /* ---- LAYOUT ----------------------------------------------- */ .wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem 5rem; } /* ---- MASTHEAD / NAV --------------------------------------- */ header { padding: 2rem 1.5rem 1.2rem; max-width: 62rem; margin: 0 auto; display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 1rem 2rem; border-bottom: var(--edge); } .header-nav-wrap { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.3rem; } @media (max-width: 600px) { header { flex-direction: column; } header > a { align-self: center; } } .sitename { font-family: var(--display); font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: 0.02em; margin: 0; color: var(--paper); text-shadow: 0 0 26px rgba(227, 169, 78, 0.16); } .sitename a { color: inherit; text-decoration: none; } .tagline { font-family: var(--label); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--ink-soft); margin: 0; } nav.rooms { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; } nav.rooms a { font-family: var(--label); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } nav.rooms a:hover, nav.rooms a[aria-current="page"] { color: var(--lamp); border-bottom-color: var(--lamp); } /* ---- TYPOGRAPHY ------------------------------------------- */ h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; } h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); margin: 2.5rem 0 1rem; color: var(--paper); } h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 3rem 0 0.8rem; color: var(--lamp); } h3 { font-size: 1.4rem; margin: 1.6rem 0 0.4rem; color: var(--paper); } p { } a { color: var(--lamp); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--paper); } .eyebrow { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 0.5rem; } .eyebrow a { color: var(--ink-soft); } .eyebrow a:hover { color: var(--lamp); } /* character designer credit line */ .credit { font-family: var(--label); font-size: 0.8rem; color: var(--ink-soft); margin: 1.2rem 0 0; } /* ---- HERO (home page) ------------------------------------- */ .hero { padding: 3.5rem 0 1rem; text-align: center; } .hero img { max-width: 100%; height: auto; }.thesis { font-family: var(--display); font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.25; color: var(--paper); max-width: 30ch; margin: 1rem 0 2rem; } .thesis em { color: var(--lamp); font-style: italic; } /* ---- THRESHOLD DIVIDER ------------------------------------ */ .threshold { border: 0; height: 1px; margin: 3.5rem auto; max-width: var(--measure); background: linear-gradient(90deg, transparent, var(--edgeclr), transparent); opacity: 0.5; } /* ============================================================ CALENDAR PAGE ============================================================ */ .calendar-intro { max-width: var(--measure); } .calendar-season { margin: 2rem 0; } .calendar-season h2 { margin-top: 0.3rem; } .cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; min-width: 0; /* grid tracks default to min-width:auto, which lets long unbreakable holiday-name text force the whole grid wider than the viewport — this is the actual mobile overflow fix */ } .cal-weekdays { margin-bottom: 0.4rem; } .cal-weekdays span { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: center; } .cal-day { background: var(--wall); border: var(--edge); border-radius: 2px; min-width: 0; min-height: 3.8rem; padding: 0.35rem 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; } .cal-day .num { font-family: var(--label); font-size: 0.72rem; color: var(--ink-soft); } .cal-day.holiday { position: relative; background: var(--wall-lit); border-color: rgba(227, 169, 78, 0.5); box-shadow: inset 0 0 12px rgba(227, 169, 78, 0.12); } .cal-day.holiday .num { color: var(--lamp); } .cal-day .holiday-name { /* full name lives in the tooltip below (hover) and aria-label (screen readers) instead — the icon is the only visible content */ display: none; } /* custom tooltip, shown from data-title — near-instant, styled to the site, instead of the browser's own slow/plain title-attribute tooltip */ .cal-day.holiday::after { content: attr(data-title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--shadow); color: var(--paper); font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.02em; white-space: nowrap; padding: 0.35rem 0.6rem; border-radius: 3px; box-shadow: 0 4px 12px rgba(0,0,0,0.45); pointer-events: none; opacity: 0; transition: opacity 0.1s ease; z-index: 30; } .cal-day.holiday:hover::after, .cal-day.holiday:focus-visible::after { opacity: 1; } .cal-day .holiday-icon { display: block; width: 1.4rem; height: 1.4rem; color: var(--paper); /* icon uses stroke="currentColor" internally */ } .calendar-key { margin-top: 1.2rem; } .calendar-key dt { font-family: var(--display); color: var(--lamp); font-size: 1.05rem; margin-top: 1rem; } .calendar-key dd { margin: 0.2rem 0 0; color: var(--ink); } @media (max-width: 700px) { .cal-day { min-height: 3.2rem; padding: 0.3rem; } .cal-weekdays span { font-size: 0.6rem; } } /* ---- WALL CALENDAR (tear-off stack) ------------------------- */ .wall-calendar { position: relative; max-width: 36rem; margin: 3rem auto 4rem; } .wall-calendar-mount { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); width: 2.2rem; height: 2.2rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe680, #c9971f 70%, #8a6a12 100%); box-shadow: 0 3px 6px rgba(0,0,0,0.5); z-index: 20; } .calendar-stack { position: relative; display: grid; } .calendar-sheet { grid-area: 1 / 1; position: relative; min-width: 0; background: var(--paper); color: var(--ink-on-paper); border-radius: 4px; padding: 1.8rem 1.6rem 2.4rem; box-shadow: 0 18px 34px rgba(0,0,0,0.45), 0 3px 6px rgba(0,0,0,0.3); cursor: grab; user-select: none; touch-action: none; /* must be set here, not dynamically in JS on pointerdown — by then the browser may have already committed to scrolling */ transform: translate(calc(var(--stack-i, 0) * 5px), calc(var(--stack-i, 0) * 7px)); transition: transform 0.3s ease; /* dimming (filter) for sheets behind the front one is applied via JS in calendar.js's layout(), not here — see the comment there for why */ } .calendar-sheet:active { cursor: grabbing; } .calendar-sheet.dragging { transition: none; } .calendar-sheet header { margin-bottom: 0.6rem; } .calendar-sheet .eyebrow { color: var(--dt-on-paper); } .calendar-sheet h2 { color: var(--ink-on-paper); margin: 0.1rem 0 0; } /* perforated tear line along the bottom of every sheet */ .calendar-sheet::after { content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.7rem; border-bottom: 2px dashed rgba(46, 33, 24, 0.25); } /* paper-sheet versions of the day cells (light card, not dark wall) */ .calendar-sheet .cal-weekdays span { color: rgba(46, 33, 24, 0.55); } .calendar-sheet .cal-day { background: rgba(46, 33, 24, 0.05); border: 1px solid rgba(46, 33, 24, 0.15); } .calendar-sheet .cal-day .num { color: rgba(46, 33, 24, 0.55); } .calendar-sheet .cal-day.holiday { background: rgba(227, 169, 78, 0.4); border-color: rgba(180, 130, 40, 0.7); } .calendar-sheet .cal-day.holiday .num { color: #6b4a12; } .calendar-sheet .cal-day .holiday-name { color: var(--ink-on-paper); font-weight: 600; } .calendar-sheet .cal-day .holiday-icon { color: #6b4a12; } .calendar-sheet button.cal-day { font-family: inherit; text-align: left; cursor: pointer; } .calendar-sheet button.cal-day:hover { background: rgba(227, 169, 78, 0.55); } .calendar-sheet div.cal-day { cursor: default; } .calendar-controls { position: relative; z-index: 1; margin-top: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; } .tear-hint { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } @media (max-width: 700px) { .calendar-sheet { padding: 1.3rem 1rem 2rem; } } /* ---- CARDS ------------------------------------------------ */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; margin: 1.5rem 0; } .card { background: var(--wall); border: var(--edge); border-radius: 2px; padding: 1.3rem 1.4rem 1.5rem; transition: background 0.25s, transform 0.25s; text-decoration: none; display: block; } .card:hover { background: var(--wall-lit); transform: translateY(-2px); } .card h3 { margin-top: 0; } .card .role { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 0.6rem; } .card p { font-size: 1rem; margin: 0; color: var(--ink); } /* ============================================================ CHARACTER STAT BLOCK — the pinned "index card" ============================================================ */ .statblock { background-color: #f2e6a0; background-image: repeating-linear-gradient( to bottom, transparent, transparent 1.9em, rgba(120, 85, 40, 0.35) 1.9em, rgba(120, 85, 40, 0.35) calc(1.9em + 1px) ); border-radius: 2px; padding: 1rem 1.3rem; box-shadow: 0 10px 22px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3); display: grid; grid-template-columns: 1fr; gap: 0.5rem; align-content: start; overflow: visible; } .statblock dt { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dt-on-paper); display: block; margin: 0 0 0.15rem; } .statblock dd { margin: 0; color: var(--ink-on-paper); line-height: 1.35; } .statblock::before { content: ""; position: absolute; top: -0.5rem; left: 0.6rem; width: 2.6rem; height: 1rem; background: rgba(227, 169, 78, 0.5); transform: rotate(-8deg); box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .statblock::after { content: ""; position: absolute; bottom: -0.5rem; right: 0.6rem; width: 2.6rem; height: 1rem; background: rgba(227, 169, 78, 0.5); transform: rotate(-8deg); box-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* ============================================================ CHARACTER HEADER — free-form draggable board ============================================================ */ .character-header { position: relative; min-height: 420px; max-width: 80rem; margin: 2rem auto 2.5rem; } .portrait, .playlist, .character-header .statblock { position: absolute; top: var(--ty, 0%); width: 22rem; max-width: 32%; touch-action: none; cursor: grab; z-index: 1; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .portrait:active, .playlist:active, .character-header .statblock:active { cursor: grabbing; } .portrait { left: var(--tx, 17%); transform: translateX(-50%) rotate(calc(var(--rest-rot, -2.5deg) + var(--extra-rot, 0deg))) scale(var(--scl, 1)); margin: 0; display: flex; flex-direction: column; background: #ffffff; border-radius: 2px; padding: 0.8rem 0.8rem 1.6rem; box-shadow: 0 10px 22px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3); } .portrait img { max-height: 300px; height: auto; width: 100%; object-fit: contain; display: block; background-color: #b8c9d4; border-radius: 2px; } .portrait figcaption { font-family: var(--hand); font-size-adjust: 0.46; /* keeps the fallback cursive font (often Comic Sans) from rendering visibly larger than Caveat while it loads */ font-size: 1.3rem; color: var(--ink-on-paper); margin-top: 0.5rem; text-align: center; } .portrait::before { content: ""; position: absolute; top: -0.6rem; left: 42%; width: 3.2rem; height: 1.1rem; background: rgba(227, 169, 78, 0.5); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .character-header .statblock { left: var(--tx, 50%); transform: translateX(-50%) rotate(calc(var(--rest-rot, 1deg) + var(--extra-rot, 0deg))) scale(var(--scl, 1)); margin: 0; } .playlist { left: var(--tx, 83%); transform: translateX(-50%) rotate(calc(var(--rest-rot, 1.5deg) + var(--extra-rot, 0deg))) scale(var(--scl, 1)); min-width: 0; display: flex; flex-direction: column; } .playlist iframe { width: 100%; height: 450px; border: 0; border-radius: 10px; box-shadow: 0 10px 22px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3); display: block; } .playlist::before { content: ""; position: absolute; top: -0.5rem; left: 60%; width: 3.2rem; height: 1.1rem; background: rgba(227, 169, 78, 0.5); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 2px 4px rgba(0,0,0,0.3); z-index: 2; } .playlist .eyebrow { color: var(--paper); font-family: var(--hand); font-size-adjust: 0.46; font-size: 1.2rem; letter-spacing: normal; text-transform: none; margin-bottom: 0.5rem; } .playlist-embed { border: 1px dashed rgba(227, 169, 78, 0.4); border-radius: 2px; min-height: 12rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--ink-soft); font-family: var(--label); font-size: 0.85rem; } .playlist-embed iframe { width: 100%; border: 0; border-radius: 2px; } .portrait.is-lifted, .character-header .statblock.is-lifted { z-index: 10; box-shadow: 0 24px 34px rgba(0,0,0,0.55); } .playlist.is-lifted { z-index: 10; } .playlist.is-lifted iframe { box-shadow: 0 24px 34px rgba(0,0,0,0.55); } @media (max-width: 880px) { .character-header { position: static; min-height: auto; display: flex; flex-direction: column; gap: 1.5rem; } .portrait, .playlist, .character-header .statblock { position: relative; left: auto; top: auto; width: 100%; max-width: 420px; margin: 0 auto; transform: none !important; cursor: default; touch-action: auto; } .swing-playlist-wrap { /* !important because the full-size .swing-playlist-wrap rule sits later in this file (near the other art/theater/gallery styles) — without it, that later unconditional rule wins the cascade over this media-guarded reset regardless of viewport width */ position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 420px !important; margin: 0 auto !important; transform: none !important; } .swing-drag-handle { display: none; } /* let touch reach the iframe directly */ .content-columns { grid-template-columns: 1fr; } } /* ============================================================ CONTENT COLUMNS (description + VA side by side) ============================================================ */ .content-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem; align-items: start; } /* ---- CASTING CALL ----------------------------------------- */ .casting { border: 1px dashed rgba(227, 169, 78, 0.45); border-radius: 2px; padding: 1.4rem 1.6rem; margin: 2.5rem 0; } .content-columns .casting { margin: 0; } .casting .tag { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lamp); } .casting h2 { margin-top: 0.3rem; } .voice-notes { } .voice-notes li { margin-bottom: 0.6rem; } .guide { list-style: none; padding: 0; margin: 1rem 0 0; } .guide li { margin-bottom: 0.4rem; } .guide .song { font-family: var(--display); font-size: 1.2rem; color: var(--paper); } .guide .artist { font-family: var(--label); font-size: 0.78rem; color: var(--ink-soft); } /* ---- BUTTON ----------------------------------------------- */ .btn { display: inline-block; font-family: var(--label); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--shadow); background: var(--lamp); padding: 0.7rem 1.3rem; border-radius: 2px; text-decoration: none; margin: 0.4rem 0.6rem 0.4rem 0; transition: transform 0.15s, filter 0.15s; } .btn:hover { color: var(--shadow); filter: brightness(1.08); transform: translateY(-1px); } /* ---- FOOTER ----------------------------------------------- */ footer { max-width: 62rem; margin: 4rem auto 0; padding: 2rem 1.5rem 3rem; border-top: var(--edge); font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-soft); } footer a { color: var(--ink-soft); } footer a:hover { color: var(--lamp); } .listening { color: var(--lamp); opacity: 0.75; } /* ---- GLITCH / CORRUPTED TEXT ------------------------------ */ .glitch { font-family: var(--label); color: #fff; letter-spacing: 0.06em; text-shadow: -0.04em 0 rgba(255, 60, 80, 0.55), 0.04em 0 rgba(60, 180, 255, 0.55); animation: crt-jitter 0.08s steps(2) infinite; will-change: transform; } @keyframes crt-jitter { 0% { transform: translateX(0); } 100% { transform: translateX(0.5px); } } /* ---- ACCESSIBILITY: focus + reduced motion --------------- */ a:focus-visible, .card:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .glitch { animation: none; text-shadow: -0.04em 0 rgba(255, 60, 80, 0.55), 0.04em 0 rgba(60, 180, 255, 0.55); } } /* ---- BIG SCREENS / TVs ------------------------------------ */ @media (min-width: 1600px) { :root { font-size: 18px; } .wrap, header, footer { max-width: 84rem; } .wrap { padding-left: 1rem; padding-right: 1rem; } } @media (min-width: 2200px) { :root { font-size: 20px; } .wrap, header, footer { max-width: 96rem; } .wrap { padding-left: 0.5rem; padding-right: 0.5rem; } } .card { position: relative; } .character-icon { position: absolute; width: 110px; height: 110px; object-fit: contain; right: -15px; bottom: -15px; opacity: 0; transform: rotate(15deg) scale(0.7); transition: opacity 0.25s, transform 0.25s; pointer-events: none; } .card:hover .character-icon, .card.show-icon .character-icon { opacity: 1; transform: rotate(0deg) scale(1); } @media (max-width: 700px) { .character-icon { width: 70px; height: 70px; } } /* ---- TRAIT TAGS (glowing pills under the info card) --------- */ .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .tag { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lamp); background: rgba(227, 169, 78, 0.1); border: 1px solid rgba(227, 169, 78, 0.55); border-radius: 999px; padding: 0.3rem 0.75rem; box-shadow: 0 0 9px rgba(227, 169, 78, 0.35); } .tag.va-needed { color: var(--urgent); background: rgba(192, 70, 60, 0.12); border-color: rgba(192, 70, 60, 0.6); box-shadow: 0 0 9px rgba(192, 70, 60, 0.4); } /* ============================================================ TRIVIA NOTE — pinned sticky note, also draggable ============================================================ */ .trivia-note { position: relative; left: var(--dragX, 0px); top: var(--dragY, 0px); background: #f2f1ee; color: #2e2118; border-radius: 2px; padding: 1.2rem 1.4rem; max-width: var(--measure); margin: 2rem auto; box-shadow: 0 10px 20px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); cursor: grab; touch-action: none; z-index: 1; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; transform: rotate(calc(var(--rest-rot, -1deg) + var(--extra-rot, 0deg))) scale(var(--scl, 1)); } .trivia-note:active { cursor: grabbing; } .trivia-note.is-lifted { z-index: 10; box-shadow: 0 24px 34px rgba(0,0,0,0.55); } .trivia-note h3 { font-family: var(--hand); font-size-adjust: 0.46; color: #2e2118; font-size: 1.6rem; margin: 0 0 0.6rem; } .trivia-rule { display: block; width: auto; border: none; height: 2px; background: red; margin: 0.6rem -1.4rem 0.8rem; box-sizing: border-box; } .trivia-note ul { margin: 0 -1.4rem; padding: 0 1.4rem 0 2.6rem; line-height: 1.7em; background-image: repeating-linear-gradient( to bottom, transparent, transparent 1.7em, rgba(120, 170, 210, 0.4) 1.7em, rgba(120, 170, 210, 0.4) calc(1.7em + 1px) ); } .trivia-note li { margin: 0; } .tape { position: absolute; width: 2.6rem; height: 1rem; background: rgba(227, 169, 78, 0.5); box-shadow: 0 2px 4px rgba(0,0,0,0.3); top: -0.5rem; } .tape-left { left: 1.5rem; transform: rotate(-6deg); } .tape-right { right: 1.5rem; transform: rotate(6deg); } @media (max-width: 700px) { .trivia-note { cursor: default; touch-action: auto; } } /* ---- TORN PAGE REVEAL (quizsecret) --------------------------- */ .torn-page-reveal { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin: 2.5rem auto; } .torn-page-reveal img { display: block; width: 100%; max-width: 18rem; height: auto; transform: rotate(-2deg); filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55)); } .torn-page-reveal-caption { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); text-align: center; } /* ============================================================ CONNECTIONS (corkboard web + sticky-note popup) ============================================================ */ .connections { margin: 3rem 0 2rem; } .connections-board { position: relative; height: 420px; max-width: var(--measure); margin-top: 1rem; } .connections-strings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; /* SVGs clip to their own box by default, even without overflow:hidden on anything around them — this is what was cutting sagging strings off short */ } .connections { margin: 3rem 0 2rem; } .connections-board { position: relative; height: 420px; max-width: var(--measure); margin: 1rem auto 2rem; } .connection-pin { position: absolute; left: var(--x); top: var(--y); margin-left: -38px; width: 76px; background: none; border: none; padding: 0; cursor: pointer; z-index: 1; } .connection-pin img, .connection-pin .torn-shape { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; transform: rotate(var(--tilt, -3deg)); filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45)); transition: transform 0.2s; } .connection-pin:hover img, .connection-pin:hover .torn-shape { transform: rotate(0deg) scale(1.08); } .connection-self { cursor: default; } .connection-self:hover img { transform: rotate(var(--tilt, -3deg)); } .connection-torn .torn-shape { background: #6b5d52; clip-path: polygon(0% 4%, 12% 0%, 30% 6%, 48% 1%, 65% 5%, 82% 0%, 100% 6%, 97% 40%, 100% 70%, 88% 100%, 60% 96%, 40% 100%, 15% 94%, 0% 88%); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 1.6rem; color: var(--ink-soft); } .connections-strings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; } .connections-strings path { stroke: #a33b2f; stroke-width: 3px; stroke-linecap: round; fill: none; opacity: 0.85; } .connections-dots { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .connection-dot { position: absolute; width: 0.85rem; height: 0.85rem; margin-left: -0.425rem; margin-top: -0.425rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b5453a, #7a2e26 70%, #4a1a15); box-shadow: 0 2px 3px rgba(0,0,0,0.5); } @media (max-width: 700px) { .connections-board { height: auto; } .connections-strings, .connections-dots { display: none; } .connections-board { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .connection-pin { position: relative; left: auto; top: auto; margin-left: 0; } } /* ---- STICKY NOTE POPUP -------------------------------------- */ .note-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 50; } .note-overlay.open { display: flex; } .note { position: relative; max-width: 22rem; padding: 1.6rem 1.8rem; border-radius: 2px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); transform: rotate(-1.5deg); font-family: var(--hand); font-size-adjust: 0.46; font-size: 1.25rem; color: var(--ink-on-paper); background: #f0e0a0; } .note h4 { font-family: var(--display); font-size: 1.4rem; margin: 0 0 0.5rem; } .note-close { position: absolute; top: 0.4rem; right: 0.7rem; background: none; border: none; font-size: 1.4rem; color: var(--ink-on-paper); cursor: pointer; line-height: 1; } .note[data-color="journal"] { background: #693719; } .note[data-color="ap"] { background: #e8a2a8; } .note[data-color="bm"] { background: #a8d4c4; } .note[data-color="charlie"] { background: #bcd6ea; } .note[data-color="bunny"] { background: #cfc4d4; } .note[data-color="mirror"] { background: #d9b473; } .note[data-color="lp"] { background: #cfa8d4; } .note[data-color="indigo"] { background: #2904bd; } .note[data-color="cassette"] { background: #f0a878; } .note[data-color="geeky"] { background: #f0955a; } .connection-pin[data-color="charlie"] img { transform: rotate(var(--tilt, 4deg)) translateY(-7px) translateX(-7px); } .connection-pin[data-color="charlie"]:hover img { transform: rotate(0deg) scale(1.08) translateY(-7px) translateX(-7px); } @media (max-width: 700px) { .connection-self { display: none; } } .note[data-color="mirror"] { background: #d9b473; } .note[data-color="n528"] { background: #b8d4c9; } .note[data-color="dream"] { background: #3d2f69; } .note[data-color="liz"] { background: #f2c6d6; } .note[data-color="pbc"] { background: #e8781e; } .note[data-color="cools"] { background: #c4b0e8; } .note[data-color="dumptruck"] { background: #3f6b32; } .note[data-color="greendaisy"] { background: #a8d4a0; } .note[data-color="clickbaity"] { background: #c4b0e8; } .casting .tag { display: inline-block; margin-bottom: 1rem; } .casting h2 { margin-top: 0; } a.tag { text-decoration: none; } .casting-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; } .casting-left { flex: 0 0 auto; } .casting-left h2 { margin-top: 0; } .casting-right { display: flex; align-items: flex-start; justify-content: flex-end; gap: 1.2rem; flex: 1 1 auto; min-width: 0; } .casting-claim-text { text-align: right; max-width: 26rem; min-width: 0; } .casting-claim-text h3 { margin-top: 0; } .casting-video { flex: 0 0 280px; width: 280px; } .casting-video iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 2px; box-shadow: 0 10px 20px rgba(0,0,0,0.4); display: block; } @media (max-width: 880px) { .casting-top { flex-direction: column; } .casting-right { flex-direction: column; align-items: flex-start; width: 100%; } .casting-claim-text { text-align: left; max-width: none; } .casting-video { width: 100%; } } .audition-lines { clear: both; margin: 1.6rem 0; border: 1px dashed rgba(227,169,78,0.45); border-radius: 2px; padding: 0.9rem 1.2rem; } .audition-lines summary { cursor: pointer; font-family: var(--label); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lamp); } .audition-lines[open] summary { margin-bottom: 0.8rem; } .audition-lines-body p { margin-bottom: 1.2rem; } .audition-lines-body strong { color: var(--paper); } .breadcrumb { margin-top: 1.5rem; } .connection-pin { cursor: grab; } .connection-pin:active { cursor: grabbing; } .connection-pin { touch-action: none; } .character-header { min-height: 620px; } .connections-board { background-color: #c19a5b; background-image: radial-gradient(circle at 15% 22%, rgba(120, 85, 40, 0.5) 0 2px, transparent 3px), radial-gradient(circle at 62% 14%, rgba(90, 62, 28, 0.45) 0 3px, transparent 4px), radial-gradient(circle at 38% 68%, rgba(140, 100, 50, 0.5) 0 2px, transparent 3px), radial-gradient(circle at 84% 55%, rgba(105, 72, 32, 0.45) 0 2px, transparent 3px), radial-gradient(circle at 27% 90%, rgba(150, 110, 60, 0.4) 0 3px, transparent 4px), radial-gradient(circle at 71% 83%, rgba(95, 65, 30, 0.5) 0 2px, transparent 3px), radial-gradient(circle at 48% 40%, rgba(160, 120, 70, 0.35) 0 4px, transparent 5px), radial-gradient(circle at 8% 60%, rgba(110, 78, 36, 0.4) 0 2px, transparent 3px); background-size: 90px 90px, 130px 130px, 70px 70px, 110px 110px, 150px 150px, 85px 85px, 190px 190px, 60px 60px; outline: 12px solid #6b4a2a; outline-offset: -12px; border-radius: 4px; box-shadow: inset 0 0 60px rgba(90, 60, 25, 0.45), 0 8px 20px rgba(0, 0, 0, 0.5); padding: 1rem; } .connection-torn .torn-shape { color: #e8ddcc; } .connection-pin::before { content: ""; position: absolute; top: -0.35rem; left: 50%; width: 0.85rem; height: 0.85rem; margin-left: -0.425rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b5453a, #7a2e26 70%, #4a1a15); box-shadow: 0 2px 3px rgba(0,0,0,0.5); z-index: 2; } /* ---- CENTERED TEXT PAGE (Penny, and similar minimal pages) --- */ .center-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; } .center-page p { font-family: var(--display); color: var(--ink-soft); letter-spacing: 0.04em; font-style: italic; } /* ---- THE HOUSE'S EYES (mouse-tracking, house/index.html only) */ .house-eyes-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; gap: 4rem; } .house-eye { width: 180px; height: auto; } .house-eye path { fill: var(--paper); stroke: var(--shadow); stroke-width: 2; } .house-eye .pupil { fill: var(--shadow); } .va-badge { position: absolute; top: -0.6rem; right: -0.6rem; font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); background: var(--urgent); border-radius: 999px; padding: 0.25rem 0.6rem; box-shadow: 0 3px 8px rgba(0,0,0,0.4); z-index: 2; } .about-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 0.5rem; } .about-top .thesis { flex: 1 1 auto; min-width: 0; margin-bottom: 0; font-size: clamp(1.8rem, 6vw, 4rem); } .about-image { flex: 0 0 280px; width: 280px; max-width: 40%; display: flex; flex-direction: column; } .about-image img { width: 100%; max-height: 220px; object-fit: contain; display: block; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.5)); } .about-image .credit { text-align: center; margin-top: -1.6rem; } @media (max-width: 880px) { .about-top { flex-direction: column; } .about-image { width: 100%; max-width: none; } } .silent-link { color: inherit; text-decoration: none; cursor: inherit; } .silent-link:hover, .silent-link:visited, .silent-link:active { color: inherit; text-decoration: none; } .house-playlist { position: relative; left: var(--dragX, 0px); top: var(--dragY, 0px); max-width: 400px; margin: 2rem auto 4rem; cursor: grab; touch-action: none; z-index: 1; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; transform: rotate(calc(var(--rest-rot, -1deg) + var(--extra-rot, 0deg))) scale(var(--scl, 1)); } .house-playlist:active { cursor: grabbing; } .house-playlist.is-lifted { z-index: 10; } .house-playlist iframe { width: 100%; border: 0; border-radius: 12px; display: block; box-shadow: 0 10px 24px rgba(0,0,0,0.5); transition: box-shadow 0.2s ease-out; } .house-playlist.is-lifted iframe { box-shadow: 0 20px 34px rgba(0,0,0,0.6); } /* ============================================================ LOCATION MAP — resources/locations ============================================================ */ .location-map { position: relative; width: 100%; aspect-ratio: 4 / 3; max-width: 56rem; margin: 2rem auto; background: radial-gradient(circle at 25% 20%, rgba(227, 169, 78, 0.09), transparent 55%), radial-gradient(circle at 75% 75%, rgba(227, 169, 78, 0.06), transparent 50%), var(--wall); border: var(--edge); border-radius: 6px; box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 0 60px rgba(0,0,0,0.35); overflow: hidden; } /* pinned-polaroid style — a photo pin, not just a dot marker. Draggable, same as the trivia notes and connections-board pins elsewhere. */ .location-pin { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%) rotate(var(--tilt, -2deg)); width: 132px; background: #f2f1ee; border: none; border-radius: 2px; padding: 0.5rem 0.5rem 3rem; box-shadow: 0 8px 18px rgba(0,0,0,0.5); cursor: grab; touch-action: none; transition: transform 0.15s ease, box-shadow 0.15s ease, z-index 0s; } .location-pin:active { cursor: grabbing; } .location-pin:hover, .location-pin:focus-visible { transform: translate(-50%, -50%) rotate(var(--tilt, -2deg)) scale(1.1); box-shadow: 0 14px 26px rgba(0,0,0,0.6); z-index: 5; } .location-pin-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--wall-lit); } .location-pin-caption { position: absolute; left: 0.4rem; right: 0.4rem; bottom: 0.4rem; font-family: var(--hand); font-size: 0.9rem; line-height: 1.15; color: #2e2118; text-align: center; } .map-hint-mobile { display: none; } @media (max-width: 700px) { .map-hint-desktop { display: none; } .map-hint-mobile { display: inline; } /* free-form dragging doesn't translate well to a small touchscreen — the map becomes a wrapping grid instead, laid out top-to-bottom in document order rather than pinned at fixed coordinates, so nothing can overlap regardless of how many locations get added later */ .location-map { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 1.4rem 1rem; } .location-pin { position: static; width: 122px; padding: 0.4rem 0.4rem 2.2rem; transform: rotate(var(--tilt, -2deg)); cursor: pointer; touch-action: auto; } .location-pin:hover, .location-pin:focus-visible { transform: rotate(var(--tilt, -2deg)) scale(1.06); z-index: 1; } .location-pin-caption { font-size: 0.78rem; bottom: 0.35rem; } } /* ---- LOCATION BROCHURE POPUP -------------------------------- Replaces the sticky-note look just for this page's popup — a little travel-brochure panel instead, themed per location via data-theme (same idea as the connection-note data-color themes). The .note-panel wrapper is a plain, unstyled shell; the brochure itself supplies its own background/shadow so each theme reads as a distinct little postcard. ------------------------------- */ .note-panel { background: none; box-shadow: none; padding: 0; max-width: 26rem; transform: none; } .note-panel .note-close { top: 0.5rem; right: 0.5rem; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 6, 0.55); color: #fff; border-radius: 50%; z-index: 2; } .location-brochure { --b-bg: var(--wall); --b-accent: var(--lamp); --b-text: var(--ink); border-radius: 6px; overflow: hidden; background: var(--b-bg); color: var(--b-text); box-shadow: 0 20px 44px rgba(0,0,0,0.55); } .location-brochure[data-theme="house"] { --b-bg: #3a2a1c; --b-accent: #e3a94e; --b-text: #f3e9d8; } .location-brochure[data-theme="beach"] { --b-bg: #1c5b73; --b-accent: #f4d58d; --b-text: #eef8fb; } .location-brochure[data-theme="boardwalk"] { --b-bg: #1f6f78; --b-accent: #ff9f4d; --b-text: #fff6e8; } .location-brochure[data-theme="towncenter"] { --b-bg: #7a3b1e; --b-accent: #f2b544; --b-text: #fbeee0; } .location-brochure[data-theme="garden"] { --b-bg: #2f4a34; --b-accent: #a8d5ba; --b-text: #eef7ee; } .location-brochure[data-theme="library"] { --b-bg: #23243d; --b-accent: #c9a24b; --b-text: #ece8f4; } .location-brochure[data-theme="atrium"] { --b-bg: #3d3159; --b-accent: #f2a6c8; --b-text: #f6eefb; } .location-brochure[data-theme="theatre"] { --b-bg: #4a1620; --b-accent: #d4a446; --b-text: #f7e9de; } .location-brochure[data-theme="replay"] { --b-bg: #4a3018; --b-accent: #e0975a; --b-text: #f7ead9; } .brochure-hero { position: relative; } .brochure-hero-img { width: 100%; height: 11rem; object-fit: cover; display: block; background: rgba(0,0,0,0.2); } .brochure-hero-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.2rem 0.7rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); } .brochure-eyebrow { display: block; font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-accent); margin-bottom: 0.2rem; } .brochure-title { font-family: var(--display); font-size: 1.9rem; color: #fff; margin: 0; line-height: 1.1; } .brochure-body { padding: 1.1rem 1.3rem 1.4rem; } .brochure-gallery { display: flex; justify-content: center; gap: 0.6rem; overflow-x: auto; margin: 0 0 1rem; padding: 0.2rem 0.1rem 0.4rem; } .brochure-gallery img { flex: 0 0 auto; width: 5rem; height: 5rem; object-fit: cover; border-radius: 50%; border: 3px solid var(--b-accent); box-shadow: 0 6px 14px rgba(0,0,0,0.4); background: rgba(0,0,0,0.2); cursor: pointer; transition: transform 0.15s ease; } .brochure-gallery img:hover, .brochure-gallery img:focus-visible { transform: scale(1.1); } /* a themed SVG icon slot, sized to match the photo circles — fills the row out to four items so the gallery never ends on an empty gap */ .brochure-icon { flex: 0 0 auto; width: 5rem; height: 5rem; border-radius: 50%; border: 3px solid var(--b-accent); box-shadow: 0 6px 14px rgba(0,0,0,0.4); background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; color: var(--b-accent); } .brochure-icon svg { width: 2.1rem; height: 2.1rem; } .brochure-body p { margin: 0; font-family: var(--body); font-size: 1rem; line-height: 1.65; color: var(--b-text); } @media (max-width: 700px) { .brochure-title { font-size: 1.5rem; } .brochure-gallery img, .brochure-icon { width: 4.4rem; height: 4.4rem; } .brochure-icon svg { width: 1.8rem; height: 1.8rem; } } /* full-size preview for a tapped gallery circle — sits above the brochure popup (higher z-index than .note-overlay's 50) so it can be open at the same time without closing the brochure underneath */ .img-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 60; padding: 2.5rem 1.2rem; } .img-lightbox.open { display: flex; } .img-lightbox img { max-width: min(90vw, 40rem); max-height: 82vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); } .img-lightbox-close { position: fixed; top: 1rem; right: 1.2rem; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10, 8, 6, 0.6); color: #fff; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; } /* ---- MERGE GAME (Household) ----------------------------------- */ .merge-game { max-width: 22rem; margin: 2rem auto; } .merge-hud { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 0.8rem; } .merge-hud-block { display: flex; flex-direction: column; line-height: 1.2; } .merge-hud-label { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .merge-hud-value { font-family: var(--display); font-size: 1.3rem; color: var(--ink); } .merge-restart { margin-left: auto; padding: 0.4rem 0.9rem; font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; background: var(--wall-lit); color: var(--paper); border: var(--edge); border-radius: 3px; cursor: pointer; } .merge-restart:hover { filter: brightness(1.1); } .merge-stage { position: relative; border: var(--edge); border-radius: 6px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.5); line-height: 0; } .merge-stage canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; } .merge-gameover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; background: rgba(10, 8, 6, 0.78); } /* the [hidden] attribute and a class-based `display` rule have equal CSS specificity, so without this the class rule above (later in the cascade) would win and the overlay would show even while hidden */ .merge-gameover[hidden] { display: none; } .merge-gameover-title { font-family: var(--display); font-size: 1.5rem; line-height: 1.3; color: var(--paper); margin: 0 0 0.5rem; } .merge-gameover-score { font-family: var(--body); color: var(--paper); margin: 0 0 0.4rem; } /* ---- CROSSROADS (grid duel vs a resident of your choosing) ---- */ .crossroads-game { max-width: 22rem; margin: 2rem auto; } .crossroads-opponent-select { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; } .crossroads-opponent-btn { padding: 0.35rem 0.8rem; font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.03em; background: var(--wall); color: var(--ink-soft); border: 1px solid rgba(227, 169, 78, 0.25); border-radius: 999px; cursor: pointer; } .crossroads-opponent-btn.is-active { background: var(--lamp); color: #241a12; border-color: var(--lamp); } .crossroads-opponent-btn:not(.is-active):hover { border-color: var(--lamp); color: var(--ink); } .crossroads-hud { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 0.6rem; } .crossroads-hud-block { display: flex; flex-direction: column; line-height: 1.2; } .crossroads-hud-label { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .crossroads-hud-value { font-family: var(--display); font-size: 1.3rem; color: var(--ink); } .crossroads-status { font-family: var(--body); font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 0.8rem; min-height: 1.3em; } .crossroads-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; background: var(--wall); border: var(--edge); border-radius: 6px; padding: 0.6rem; box-shadow: 0 20px 40px rgba(0,0,0,0.5); } .crossroads-tile { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--label); font-size: 0.95rem; font-weight: bold; background: var(--wall-lit); color: var(--ink-soft); border: 1px solid rgba(227, 169, 78, 0.18); border-radius: 4px; cursor: default; transition: transform 0.12s ease, background 0.12s ease; } .crossroads-tile.is-positive { color: #6fbf73; } .crossroads-tile.is-negative { color: #e2726b; } .crossroads-tile.is-consumed { background: rgba(0,0,0,0.2); color: transparent; border-color: rgba(227, 169, 78, 0.06); } .crossroads-tile.is-token { background: var(--lamp); border-color: var(--lamp); padding: 0.2rem; } .crossroads-token-sprite { width: 65%; height: 65%; color: #241a12; } .crossroads-tile.is-legal { cursor: pointer; border-color: var(--lamp); box-shadow: 0 0 0 1px var(--lamp) inset; } .crossroads-tile.is-legal:hover { transform: scale(1.06); background: rgba(227, 169, 78, 0.22); } .crossroads-tile:disabled { cursor: default; } .crossroads-board-wrap { position: relative; } .crossroads-bubble { position: absolute; top: 0.4rem; left: 100%; margin-left: 0.9rem; width: 10rem; padding: 0.6rem 0.8rem; background: var(--paper); color: var(--ink-on-paper); font-family: var(--hand); font-size: 1.15rem; line-height: 1.25; border-radius: 10px; box-shadow: 0 8px 18px rgba(0,0,0,0.4); opacity: 0; transform: translateY(6px) scale(0.94); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; z-index: 2; } .crossroads-bubble::after { content: ''; position: absolute; top: 1rem; left: -0.5rem; width: 0.9rem; height: 0.9rem; background: var(--paper); transform: rotate(45deg); } .crossroads-bubble.is-visible { opacity: 1; transform: translateY(0) scale(1); } @media (max-width: 900px) { .crossroads-bubble { position: static; width: auto; max-width: 16rem; margin: 0 0 0.7rem; transform: none; } .crossroads-bubble.is-visible { transform: none; } .crossroads-bubble::after { display: none; } } .char-pagination { display: flex; justify-content: space-between; gap: 1rem; margin: 0.6rem 0 0; flex-wrap: wrap; } .char-pagination a { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; } .char-pagination a:hover { color: var(--lamp); } .grid .card { position: relative; touch-action: none; cursor: grab; z-index: 1; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; transform: translate(var(--dragX, 0px), var(--dragY, 0px)) rotate(var(--extra-rot, 0deg)) scale(var(--scl, 1)); } .grid .card:active { cursor: grabbing; } .grid .card.is-lifted { z-index: 10; box-shadow: 0 24px 34px rgba(0,0,0,0.55); } @media (max-width: 700px) { .grid .card { transform: none !important; touch-action: auto; cursor: default; } } @media (max-width: 700px) { .grid .card[data-sticky] { transform: translate(var(--dragX, 0px), var(--dragY, 0px)) !important; touch-action: manipulation; /* blocks the native double-tap-to-zoom gesture */ } } .card-slot { position: relative; display: flex; } .card-slot .card { flex: 1 1 auto; }.hidden-links { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; } .hidden-links a { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #33241a; text-decoration: none; } .hidden-links a:hover { color: var(--lamp); } /* ============================================================ TELLY ERROR PAGE ============================================================ */ .telly-stage { position: relative; } .telly-header { display: flex; gap: 2rem; align-items: start; flex-wrap: wrap; margin: 2rem 0; } .telly-broken-img { width: 220px; height: 220px; flex: 0 0 auto; background: #f4f4f4; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; overflow: hidden; } .telly-broken-img img { width: 100%; height: 100%; object-fit: cover; } .telly-title { font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.6rem); color: var(--paper); } .telly-title .err { color: var(--urgent); } .telly-stats { font-family: var(--body); color: var(--ink); line-height: 1.9; } .telly-errors { position: fixed; inset: 0; overflow: hidden; z-index: 40; pointer-events: none; } .telly-window { pointer-events: auto; } .telly-window { position: absolute; width: 360px; background: #c8c8c8; border: 2px solid #808080; box-shadow: 3px 3px 0 rgba(0,0,0,0.4); font-family: Tahoma, "Segoe UI", Verdana, Arial, sans-serif; opacity: 0; transform: scale(0.7); transition: opacity 0.12s ease-out, transform 0.12s ease-out; } .telly-window.show { opacity: 1; transform: scale(1); } .telly-window-bar { background: #a8ff3c; color: #1a1a1a; font-size: 0.85rem; font-weight: bold; padding: 0.3rem 0.5rem; display: flex; justify-content: space-between; align-items: center; cursor: grab; touch-action: none; } .telly-window.dragging .telly-window-bar { cursor: grabbing; } .telly-window.dragging { box-shadow: 0 20px 30px rgba(0,0,0,0.5); } .telly-window-bar .x { background: #c8c8c8; border: 1px solid #808080; width: 1.1rem; height: 1.1rem; text-align: center; line-height: 1rem; font-size: 0.75rem; cursor: pointer; } .telly-window-body { padding: 1rem; display: flex; gap: 1rem; align-items: center; color: #1a1a1a; } .telly-window-body svg { width: 40px; height: 40px; flex: 0 0 auto; } .telly-window-body p { margin: 0; font-size: 0.82rem; } .telly-window-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; padding: 0 1rem 1rem; } .telly-window-buttons button, .telly-window-buttons a { font-family: Tahoma, "Segoe UI", Verdana, Arial, sans-serif; font-size: 0.78rem; background: #c8c8c8; border: 2px outset #e8e8e8; padding: 0.3rem 0.8rem; color: #1a1a1a; text-decoration: none; cursor: pointer; } .telly-window-buttons button[disabled] { color: #888; cursor: default; } .telly-window-buttons a:hover { background: #dcdcdc; } .telly-window.final { width: min(90vw, 440px); transform: translate(-50%, -50%) scale(0.7); } .telly-window.final.show { transform: translate(-50%, -50%) scale(1); } .telly-forwarded { font-family: Tahoma, "Segoe UI", Verdana, Arial, sans-serif; color: var(--paper); font-size: 0.95rem; line-height: 1.7; max-width: 42rem; margin: 2rem 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width: 700px) { .telly-window { width: 220px !important; } .telly-window.final { width: min(90vw, 320px) !important; } } .telly-eas { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; background: #000; border-top: 5px solid var(--urgent); border-bottom: 5px solid var(--urgent); overflow: hidden; padding: 1rem 0; z-index: 100; box-shadow: 0 20px 60px rgba(0,0,0,0.7); } .telly-eas.show { display: block; } .telly-eas-track { display: flex; width: max-content; animation: telly-eas-scroll 16s linear infinite; } .telly-eas-track span { font-family: "Consolas", "Courier New", monospace; font-weight: bold; font-size: 1.3rem; letter-spacing: 0.06em; color: #fff; white-space: nowrap; padding-right: 4rem; } @keyframes telly-eas-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .telly-eas-track { animation: none; } } /* ---- TELLY'S PLAYLIST: draggable, always wobbles back sideways */ .telly-playlist-wrap { position: relative; max-width: 380px; margin: 1rem auto 8rem; left: var(--dragX, 0px); top: var(--dragY, 0px); transform-origin: 88% 6%; transform: rotate(var(--swing-deg, -70deg)); } .telly-playlist-wrap iframe { width: 100%; height: 352px; border: 0; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.5); display: block; } /* the actual draggable handle — a plain div, not the iframe, so pointer events always reach it (iframes swallow mouse events before they can reach the page's own JS) */ .telly-drag-handle { position: absolute; top: 0; left: 0; right: 0; height: 3rem; cursor: grab; touch-action: none; z-index: 5; } .telly-drag-handle:active { cursor: grabbing; } .telly-tape { position: absolute; top: -0.5rem; right: 0.8rem; width: 3.2rem; height: 1.2rem; background: rgba(227, 169, 78, 0.55); box-shadow: 0 3px 6px rgba(0,0,0,0.4); transform: rotate(-8deg); } /* ---- reusable tilted/swinging playlist (same drag physics as Telly's, generic class names so it can be reused on other character pages without touching telly.js/its markup at all — see playlist-swing.js). Positioned manually at the right side of .character-header (NOT via the shared --tx/--ty pin system .playlist/.portrait use), since this is a deliberately different drag mechanic on the same kind of page. */ .swing-playlist-wrap { /* declared as a real custom property (not just a var() fallback) so playlist-swing.js can actually read this value via getComputedStyle — a fallback-only value is invisible to JS and gets silently overridden by the script's own hardcoded default instead */ --swing-deg: -40deg; position: absolute; left: calc(76% + var(--dragX, 0px)); top: calc(0% + var(--dragY, 0px)); width: 22rem; max-width: 32%; transform: translateX(-50%) rotate(var(--swing-deg)); transform-origin: 88% 6%; z-index: 1; } .swing-playlist-wrap iframe { width: 100%; height: 352px; border: 0; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.5); display: block; } .swing-drag-handle { position: absolute; top: 0; left: 0; right: 0; height: 3rem; cursor: grab; touch-action: none; z-index: 5; } .swing-drag-handle:active { cursor: grabbing; } .swing-tape { position: absolute; top: -0.5rem; right: 0.8rem; width: 3.2rem; height: 1.2rem; background: rgba(227, 169, 78, 0.55); box-shadow: 0 3px 6px rgba(0,0,0,0.4); transform: rotate(-8deg); } .hidden-door-icon { width: 100px; height: auto; opacity: 0.25; filter: grayscale(40%); transition: opacity 0.2s, filter 0.2s; } .hidden-links a:hover .hidden-door-icon { opacity: 1; filter: grayscale(0%); } /* any plain image pasted directly into body text scales responsively by default — this catches images that don't have their own specific styling elsewhere (portraits, connections, etc. already have their own rules and are unaffected by this) */ main img { max-width: 100%; height: auto; } /* ============================================================ ART: MISC DESK ============================================================ */ .desk-scene { display: flex; align-items: stretch; gap: 0.75rem; margin: 2rem 0 3rem; } .desk { position: relative; flex: 1; min-height: 34rem; border-radius: 6px; /* no overflow:hidden — a dragged paper needs to visibly cross into the trash-zone beside the desk, not get clipped at the desk's own edge */ box-shadow: 0 10px 26px rgba(0,0,0,0.4); } /* the desk's own wood texture lives on a pseudo-element (rather than directly on .desk) so it paints in front of the drawer (a plain child with no stacking of its own) but behind the papers (z-index 2) — that's what lets the closed drawer look tucked away behind the desk surface instead of floating in front of it */ .desk::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 7px), linear-gradient(160deg, #8a5a34, #6b4226 55%, #4e331e); box-shadow: inset 0 0 50px rgba(0,0,0,0.55); } /* just the can, bottom-right beside the desk — no panel/background of its own, so it doesn't read as a big colored bar next to the table */ .trash-zone { flex: 0 0 auto; align-self: flex-end; display: flex; align-items: flex-end; padding-bottom: 0.5rem; } .desk-paper { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 9rem; max-width: 26%; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--scale, 1)); cursor: grab; touch-action: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45)); transition: transform 0.25s ease; z-index: 2; } .desk-paper:active { cursor: grabbing; } .desk-paper.dragging { transition: none; z-index: 50; cursor: grabbing; } .desk-paper img { display: block; width: 100%; height: auto; border: none; border-radius: 2px; background: #fff; pointer-events: none; /* the wrapper div handles dragging, not the image */ user-select: none; } /* the pen: no white card frame (it's a transparent PNG, not a "page"), and shrunk way down — at the base 9rem paper size it was rendering enormous */ .desk-paper[data-pen] { width: 0.5rem; } .desk-paper[data-pen] img { border: none; background: none; border-radius: 0; } /* the password sticky note: same deal, no white frame, and small like an actual sticky note rather than a full sheet of paper */ .desk-paper[data-password] { width: 2.6rem; } .desk-paper[data-password] img { border: none; background: none; border-radius: 0; } /* generic "this is a transparent object, not a paper page" marker — no white card frame, and sized way down from the base 9rem paper size */ .desk-paper[data-object] { width: 3.5rem; } .desk-paper[data-object] img { border: none; background: none; border-radius: 0; } /* the die specifically is much smaller than other objects */ .desk-paper[data-dice] { width: 1.4rem; } .desk-paper.entering { animation: paper-flutter-in 0.9s cubic-bezier(.2,.8,.3,1) both; } @keyframes paper-flutter-in { /* top-down view, so scale (not vertical movement) is the only real cue for "falling from above the desk" — starts oversized (like it's still up near the camera) and shrinks down to its resting size, landing */ 0% { opacity: 0; transform: translate(-50%, -50%) translateY(-14px) scale(1.8) rotate(calc(var(--rot, 0deg) - 45deg)); } 40% { opacity: 1; transform: translate(-50%, -50%) translateY(4px) scale(0.9) rotate(calc(var(--rot, 0deg) + 14deg)); } 65% { transform: translate(-50%, -50%) translateY(-2px) scale(1.05) rotate(calc(var(--rot, 0deg) - 7deg)); } 100% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(var(--scale, 1)) rotate(var(--rot, 0deg)); } } .desk-paper.crumpling { transition: transform 0.4s ease-in, filter 0.4s ease-in, left 0.35s ease-in, top 0.35s ease-in; } .desk-paper.crumpling img, .desk-paper.bouncing img { border: none; background: none; } /* the little in-can bounce, applied to the rather than .desk-paper itself — the img has no transform of its own, so it can be driven directly by JS (real position/velocity physics, reflecting off the can's circular rim) completely independently of the outer element's --x/--y/--rot/--scale system, with zero risk of fighting over the same `transform` property (the exact bug the `entering` animation caused earlier). No @keyframes here on purpose — see runBounce() in desk.js. */ .trash-can.wobble { animation: trashWobble 0.45s ease-out; } @keyframes trashWobble { 0% { transform: rotate(0deg); } 18% { transform: rotate(3deg); } 36% { transform: rotate(-2deg); } 55% { transform: rotate(1.5deg); } 72% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } .trash-can { width: 6.5rem; pointer-events: none; /* purely a visual target — JS checks overlap by rect */ } .trash-can img { display: block; width: 100%; height: auto; } @media (max-width: 880px) { .desk-scene { flex-direction: column; } .trash-zone { align-self: flex-end; /* still bottom-right, now of the stacked column */ padding: 0.5rem 0.5rem 0 0; } } @media (max-width: 700px) { .desk { min-height: 26rem; } .desk-paper { width: 4.5rem; max-width: 24%; } .trash-can { width: 4.5rem; } } /* click (not drag) a desk-paper to view the full image */ .photo-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.93); display: none; align-items: center; justify-content: center; z-index: 60; padding: 2rem; overflow: hidden; /* a child (like the guestbook lightbox) sizing itself even a hair wider than the viewport shouldn't be able to open up a sideways pan on the fixed overlay itself */ } .photo-overlay.open { display: flex; } .photo-overlay img { max-width: 90vw; max-height: 88vh; border-radius: 2px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); } .photo-close { position: fixed; top: 1.2rem; right: 1.5rem; background: none; border: none; color: var(--paper); font-size: 2.2rem; line-height: 1; cursor: pointer; } /* text reveal (used for the password slip) inside the same overlay the photo lightbox uses — swapped in place of the */ #photoOverlayText { background: #f0e0a0; color: var(--ink-on-paper); font-family: var(--label); font-size: 1.4rem; letter-spacing: 0.08em; text-align: center; padding: 2rem 2.5rem; border-radius: 2px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); transform: rotate(-1.5deg); } /* ---- desk drawer secret ------------------------------------- */ /* sits right at the desk's bottom edge, behind the desk's own texture (.desk::before is z-index 1, this has no z-index of its own so it paints underneath) — closed, it reads as tucked away under the table. Opening it slides it DOWN and out, like pulling a real drawer out from underneath rather than popping up through the tabletop. */ .desk-drawer { position: absolute; left: 50%; bottom: 0; width: 11rem; transform: translate(-50%, 0%); transition: transform 0.5s ease-out; pointer-events: none; } .desk-drawer.open { transform: translate(-50%, 100%); } /* a deeper box (not just a thin front lip) so the sticky note has room to sit visibly inside it once open, rather than perching on the edge */ .desk-drawer-front { position: relative; height: 6.5rem; background: linear-gradient(160deg, #6b4226, #4e331e); border: 2px solid #3a2415; border-top: none; border-radius: 0 0 5px 5px; box-shadow: 0 8px 16px rgba(0,0,0,0.5); transform: scaleY(-1); } /* the recessed interior floor of the drawer, sitting a little below the front lip — this is what the sticky note visually rests on */ .desk-drawer-front::before { content: ""; position: absolute; top: 1.6rem; left: 0.4rem; right: 0.4rem; bottom: 0.4rem; background: #2e1c11; border-radius: 0 0 4px 4px; box-shadow: inset 0 4px 8px rgba(0,0,0,0.6); } .desk-drawer-front::after { content: ""; position: absolute; top: 0.55rem; left: 50%; width: 2.4rem; height: 0.5rem; transform: translateX(-50%); background: #1e120a; border-radius: 2px; z-index: 1; } /* ============================================================ ART: ANIMATION THEATER ============================================================ */ .theater { max-width: 46rem; margin: 2rem auto 3rem; } .theater-marquee { font-family: var(--label); font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; color: var(--lamp); text-shadow: 0 0 14px rgba(227, 169, 78, 0.5); margin-bottom: 0.8rem; } .theater-stage { position: relative; aspect-ratio: 16 / 9; background: #050403; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 60px rgba(0,0,0,0.8); } /* a dim wash of light on the stage floor, behind the video, so an empty stage (no clips yet) doesn't read as a plain black rectangle */ .theater-spotlight { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(227,169,78,0.16), transparent 70%); pointer-events: none; } .theater-video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; background: #000; } /* real curtain art (drawn to overlap a little at center so the closed pair reads as one seamless photo) covering the stage on load — pulled open via .open, revealing whatever's already loaded behind them rather than waiting to load anything after the reveal */ .theater-curtain { position: absolute; top: 0; bottom: 0; width: calc(51% + 6px); z-index: 2; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; transition: transform 2s cubic-bezier(.4,0,.2,1); pointer-events: none; } .theater-curtain-left { left: 0; background-image: url('videos/curtainleft.webp'); } .theater-curtain-right { right: 0; background-image: url('videos/curtainright.webp'); } .theater-stage.open .theater-curtain-left { transform: translateX(-100%); } .theater-stage.open .theater-curtain-right { transform: translateX(100%); } .theater-controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1rem; } .theater-btn { font-family: var(--label); font-size: 1.1rem; color: var(--paper); background: var(--wall); border: var(--edge); border-radius: 4px; padding: 0.5rem 0.9rem; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .theater-btn:hover { color: var(--lamp); border-color: var(--lamp); } .theater-clip-title { font-family: var(--label); font-size: 0.85rem; letter-spacing: 0.05em; color: var(--ink-soft); min-width: 10rem; text-align: center; } @media (max-width: 600px) { .theater-controls { gap: 0.8rem; } .theater-clip-title { min-width: 0; font-size: 0.75rem; } } /* ============================================================ ART: OFFICIAL GALLERY ============================================================ */ .gallery-room { position: relative; margin: 2rem 0 3rem; padding: 2.5rem 2rem; border-radius: 6px; background: radial-gradient(120% 100% at 50% 0%, var(--wall-lit) 0%, var(--shadow) 70%); overflow: hidden; } .gallery-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem 2rem; position: relative; z-index: 1; } .gallery-frame { position: relative; margin: 0; width: 15rem; max-width: 100%; padding-top: 1.6rem; /* room for the lamp fixture above the frame */ text-align: center; } .gallery-frame img { display: block; width: 100%; height: auto; background: #14100d; border: 10px solid #3a2a1c; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 18px 34px rgba(0,0,0,0.55); cursor: pointer; position: relative; z-index: 1; transition: transform 0.25s ease, box-shadow 0.25s ease; } .gallery-frame img:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 24px 42px rgba(0,0,0,0.65); } /* a little gold museum placard, just the artist's name — corners curve inward like a ticket stub (via mask, cutting a small circle out of each corner rather than rounding it outward) */ .gallery-plate { display: inline-block; margin-top: 0.7rem; padding: 0.3rem 1.1rem; max-width: 100%; font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: #4a3410; background: linear-gradient(180deg, #f3d98a, #c8a24a 55%, #a9822f); border: 1px solid #8a6a2a; box-shadow: 0 2px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4); --notch: 0.5rem; mask-image: radial-gradient(circle at top left, transparent var(--notch), #000 calc(var(--notch) + 0.5px)), radial-gradient(circle at top right, transparent var(--notch), #000 calc(var(--notch) + 0.5px)), radial-gradient(circle at bottom left, transparent var(--notch), #000 calc(var(--notch) + 0.5px)), radial-gradient(circle at bottom right, transparent var(--notch), #000 calc(var(--notch) + 0.5px)); mask-composite: intersect; } /* the static picture-lamp fixture above each frame */ .gallery-frame::before { content: ""; position: absolute; top: 0; left: 50%; z-index: 2; width: 2.6rem; height: 0.55rem; transform: translateX(-50%); background: linear-gradient(180deg, #5a5a5a, #2b2b2b); border: 1px solid #1a1a1a; border-radius: 0 0 5px 5px; box-shadow: 0 3px 6px rgba(0,0,0,0.5); } /* its light cone, off by default, switching on only while THIS frame is hovered — apex at the lamp, widening downward over the frame, with a soft gradient falloff (same warm glow feel as the old cursor-tracking spotlight) rather than a flat-colored shape */ .gallery-frame::after { content: ""; position: absolute; top: 0.5rem; left: 50%; z-index: 1; width: 14rem; height: 13rem; transform: translateX(-50%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: radial-gradient( ellipse 70% 90% at 50% 0%, rgba(255, 214, 130, 0.55), rgba(255, 214, 130, 0.18) 55%, transparent 80% ); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .gallery-frame:hover::after { opacity: 1; } @media (max-width: 700px) { .gallery-frame { width: 11rem; } } /* ============================================================ THE D.A.I.S.Y.s ============================================================ */ .daisy-list { display: flex; flex-direction: column; } .daisy-block { position: relative; display: flex; gap: 1.5rem; align-items: flex-start; background: var(--wall); border: var(--edge); border-left: 4px solid var(--daisy-clr, var(--lamp)); border-radius: 2px; padding: 1.4rem 1.6rem 1.4rem 3rem; margin: 2rem 0; transition: transform 0.15s ease, box-shadow 0.15s ease; } .daisy-block.dragging { z-index: 20; cursor: grabbing; box-shadow: 0 16px 30px rgba(0,0,0,0.5); } .daisy-drag-handle { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; line-height: 1; color: var(--ink-soft); cursor: grab; touch-action: none; user-select: none; padding: 0.4rem; } .daisy-drag-handle:active { cursor: grabbing; } .daisy-portrait { width: 8rem; flex: 0 0 auto; height: auto; pointer-events: none; } .daisy-text h2 { margin: 0 0 0.6rem; color: var(--daisy-clr, var(--lamp)); } .daisy-text p { margin: 0 0 0.9rem; } .daisy-text p:last-child { margin-bottom: 0; } .daisy-aside { font-family: var(--label); font-size: 0.85rem; color: var(--ink-soft); border-top: var(--edge); padding-top: 0.8rem; } @media (max-width: 900px) { /* collapsed to just the handle, name, and footnote by default — the full bio only shows once tapped, so a block never grows taller than one screen and dragging to reorder stays physically possible. 900px (not 620px) so this also covers tablets like iPad, where the viewport is wider than a phone but still too narrow/short for a full-size expanded panel to be draggable in one screen. */ .daisy-block { flex-direction: column; align-items: center; text-align: center; padding: 1.4rem 1rem 1.4rem 1.6rem; margin: 1rem 0; cursor: pointer; } .daisy-portrait { width: 4rem; } .daisy-text p:not(.daisy-aside) { display: none; } .daisy-block.expanded .daisy-text p:not(.daisy-aside) { display: block; } .daisy-aside { border-top: none; padding-top: 0.3rem; } .daisy-tap-hint { display: block; font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.5rem; } } @media (min-width: 901px) { .daisy-tap-hint { display: none; } } /* the reward: a small system-popup that slides up from the bottom of the viewport once the D.A.I.S.Y. panels are dragged into the right order (Green landing directly between Yellow and Blue) — see daisy-drag.js */ .daisy-reward { position: fixed; left: 50%; bottom: 0; z-index: 100; width: 14rem; transform: translate(-50%, 100%); transition: transform 0.5s cubic-bezier(.2,.8,.3,1); background: #c0c0c0; border: 2px solid #000; box-shadow: 0 -6px 20px rgba(0,0,0,0.6); font-family: 'Courier Prime', monospace; font-size: 0.75rem; line-height: 1.5; } .daisy-reward.open { transform: translate(-50%, 0); } .daisy-reward-bar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold; padding: 0.3rem 0.5rem; letter-spacing: 0.04em; } .daisy-reward-body { padding: 0.6rem 0.7rem; color: #111; } .daisy-reward-body a { color: #00008b; } /* ============================================================ GUESTBOOK ============================================================ */ .guestbook-card { max-width: 26rem; margin: 2rem 0; padding: 1.6rem; background: var(--wall); border: var(--edge); border-radius: 4px; } .guestbook-input, .guestbook-textarea { width: 100%; padding: 0.6rem 0.7rem; margin-bottom: 1rem; background: var(--wall-lit); border: var(--edge); border-radius: 2px; color: var(--ink); font-family: var(--body); font-size: 1rem; box-sizing: border-box; } .guestbook-textarea { height: 5rem; resize: none; } .guestbook-input::placeholder, .guestbook-textarea::placeholder { color: var(--ink-soft); } .guestbook-canvas { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; background: #fff; border: 2px solid var(--edgeclr); border-radius: 3px; margin-bottom: 1rem; touch-action: none; cursor: crosshair; } .guestbook-btn-row { display: flex; gap: 0.7rem; } .guestbook-btn { flex: 1; padding: 0.7rem; border: var(--edge); border-radius: 2px; font-family: var(--label); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; } .guestbook-btn-clear { background: var(--wall-lit); color: var(--ink); } .guestbook-btn-clear:hover { background: var(--wall); } .guestbook-btn-submit { background: var(--lamp); color: #241a12; border-color: var(--lamp); } .guestbook-btn-submit:hover { background: var(--paper); } .guestbook-btn-submit:disabled { background: var(--wall-lit); color: var(--ink-soft); border-color: var(--edgeclr); cursor: default; } /* ---- palette groups: three expandable rows (Bright/Pastel/Dark) ---- */ .guestbook-palette-groups { margin-bottom: 0.8rem; } .guestbook-palette-group + .guestbook-palette-group { margin-top: 0.5rem; } .guestbook-palette-toggle { padding: 0.35rem 0.8rem; background: var(--wall-lit); border: var(--edge); border-radius: 4px; color: var(--ink); font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .guestbook-palette-toggle.active { background: var(--lamp); color: #241a12; border-color: var(--lamp); } .guestbook-palette-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: var(--edge); } /* the [hidden] attribute needs an explicit override here — otherwise the unconditional display:flex above wins the cascade and the row stays visible even while "hidden" */ .guestbook-palette-row[hidden] { display: none; } .guestbook-swatch { width: 1.9rem; height: 1.9rem; flex: 0 0 auto; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: 0 2px 5px rgba(0,0,0,0.45); transition: transform 0.1s ease, border-color 0.1s ease; } .guestbook-swatch:hover { transform: scale(1.15); } .guestbook-swatch.active { border-color: var(--paper); transform: scale(1.15); } /* ---- recently-used colors ---- */ .guestbook-history-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; min-height: 1.9rem; } .guestbook-history-label { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); flex: 0 0 auto; } .guestbook-history { display: flex; flex-wrap: wrap; gap: 0.5rem; } .guestbook-history-swatch { width: 1.4rem; height: 1.4rem; } /* ---- brush size slider + eraser ---- */ .guestbook-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; } .guestbook-size-row { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 auto; min-width: 10rem; } .guestbook-size-label { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } .guestbook-slider { flex: 1 1 auto; min-width: 5rem; accent-color: var(--lamp); } .guestbook-size-value { font-family: var(--label); font-size: 0.75rem; color: var(--ink); min-width: 2.4rem; text-align: right; } .guestbook-btn-eraser { flex: 0 0 auto; padding: 0.5rem 0.9rem; background: rgba(192, 70, 60, 0.2); border-color: var(--urgent); color: var(--paper); } .guestbook-btn-eraser.active { background: var(--urgent); color: #fff; } .guestbook-tools-row { display: flex; gap: 0.7rem; margin-bottom: 0.8rem; } .guestbook-btn-tool { background: var(--wall-lit); color: var(--ink); } .guestbook-btn-tool:hover { background: var(--wall); } .guestbook-stamps-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; } .guestbook-stamps { display: flex; gap: 0.4rem; } .guestbook-stamp-btn { width: 2.4rem; height: 2.4rem; border-radius: 6px; border: var(--edge); background: var(--wall-lit); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.1s ease, border-color 0.1s ease; } .guestbook-stamp-btn:hover { background: var(--wall); } .guestbook-stamp-btn.active { background: var(--lamp); border-color: var(--lamp); } /* ---- two-column layout: form on the left, submitted-drawing wall on the right — the wall reuses .gallery-frame/.gallery-plate as-is from the Official Art gallery, hover-lamp effect included for free ---- */ .guestbook-layout { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; } .guestbook-layout .guestbook-card { flex: 1 1 24rem; margin: 2rem 0; } .guestbook-gallery { flex: 1 1 20rem; margin: 2rem 0; } .guestbook-gallery-title { margin-top: 0; } /* auto-fit instead of a fixed viewport-width breakpoint — this reacts to how wide the gallery COLUMN itself actually ends up (which isn't the same as overall viewport width once the two-column desktop layout is in play, e.g. an iPad's wide screen still leaves this column pretty narrow), so it reliably goes 2-up whenever there's room, 1-up when there isn't, regardless of device */ .guestbook-gallery .gallery-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; } .guestbook-gallery .gallery-frame { width: 100%; } /* text-only submissions (no drawing) — styled to match the picture frames' border/shadow language so it still reads as belonging on the same wall, just holding a note instead of an image */ .guestbook-text-card { display: flex; align-items: center; justify-content: center; min-height: 10rem; background: #fdf6e3; color: #241a12; border: 10px solid #3a2a1c; border-radius: 2px; padding: 1.2rem; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 18px 34px rgba(0,0,0,0.55); font-family: var(--body); font-size: 1.05rem; line-height: 1.4; text-align: center; cursor: default; } /* ---- click-to-expand lightbox: reveals the message on entries that have both a drawing and text, since the frame itself only has room for the drawing + the name plate ---- */ .guestbook-lightbox { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; max-width: 90vw; max-height: 88vh; overflow-x: hidden; /* setting only overflow-y computes overflow-x to "auto" too per spec — without this, any sliver of horizontal overflow turns the whole lightbox into a sideways-draggable box */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0.2rem; /* keeps the scrollbar off the image/text edges */ } /* .photo-overlay img's own max-height:88vh would let the drawing alone fill the whole lightbox, leaving no room for the name/message/reply stacked below it — cap it shorter here so those aren't what forces the scroll in the common case. */ .guestbook-lightbox img { max-height: 55vh; } .guestbook-lightbox-name { font-family: var(--display); font-size: 1.2rem; color: var(--paper); margin: 0; } .guestbook-lightbox-message { font-family: var(--body); font-size: 1rem; color: var(--ink); width: 100%; max-width: 28rem; box-sizing: border-box; overflow-wrap: break-word; text-align: center; margin: 0; } .guestbook-lightbox-reply { font-family: var(--body); font-size: 0.95rem; color: var(--lamp); width: 100%; max-width: 28rem; box-sizing: border-box; overflow-wrap: break-word; text-align: center; margin: 0.4rem 0 0; padding-top: 0.6rem; border-top: var(--edge); } /* .guestbook-lightbox-reply prefix bumps specificity above `.photo-overlay img { max-width: 90vw }` — that rule's class+element selector otherwise wins over a bare `.guestbook-reply-photo` class regardless of source order, letting the reply photo render up to 90% of the *viewport* width (wider than the actual lightbox box) and get clipped at its right edge. */ .guestbook-lightbox-reply .guestbook-reply-photo { display: block; max-width: 100%; max-height: 16rem; border-radius: 3px; margin: 0.4rem auto; } .gallery-reply-badge { position: absolute; top: 0.4rem; right: 0.4rem; font-size: 1rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } @media (max-width: 900px) { .guestbook-layout { flex-direction: column; } } /* ============================================================ GUESTBOOK REVIEW (private moderation queue) ============================================================ */ .review-status { font-family: var(--label); font-size: 0.85rem; color: var(--ink-soft); } .review-section-title { margin-top: 2.5rem; } .review-list { display: flex; flex-direction: column; gap: 1rem; } .review-entry { display: flex; align-items: center; gap: 1.2rem; background: var(--wall); border: var(--edge); border-radius: 4px; padding: 1rem 1.2rem; flex-wrap: wrap; } .review-entry img { width: 5rem; height: 5rem; object-fit: cover; border-radius: 3px; background: #fff; flex: 0 0 auto; } .review-info { flex: 1 1 12rem; } .review-info strong { color: var(--paper); font-family: var(--display); font-size: 1.05rem; } .review-info p { margin: 0.3rem 0 0; color: var(--ink); font-size: 0.9rem; } .review-actions { display: flex; gap: 0.6rem; flex: 0 0 auto; } .review-btn-approve { background: #2e7d32; color: #fff; border-color: #2e7d32; padding: 0.5rem 1rem; } .review-btn-approve:hover { background: #388e3c; } .review-btn-reject { background: var(--urgent); color: #fff; border-color: var(--urgent); padding: 0.5rem 1rem; } .review-btn-reject:hover { background: #d9564a; } .review-reply-label { display: block; font-family: var(--label); font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.6rem; } .review-reply-input { display: block; width: 100%; margin-top: 0.3rem; font-family: var(--body); font-size: 0.9rem; color: var(--ink-on-paper); background: var(--paper); border: var(--edge); border-radius: 3px; padding: 0.5rem; resize: vertical; } .review-reply-select { font-family: var(--body); font-size: 0.9rem; color: var(--ink-on-paper); background: var(--paper); border: var(--edge); border-radius: 3px; padding: 0.4rem; flex: 0 0 auto; } .review-replies { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.3rem; } .review-reply-row { display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: wrap; } .review-reply-textcol { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 12rem; } .review-reply-row .review-reply-input { margin-top: 0; } .review-reply-photo-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .review-reply-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: 3px; background: var(--wall-lit); } .review-reply-thumb[hidden] { display: none; } .review-btn-remove-reply { background: transparent; color: var(--ink-soft); border: var(--edge); padding: 0.4rem 0.7rem; flex: 0 0 auto; } .review-btn-remove-reply:hover { color: var(--urgent); } .review-btn-reply { background: var(--lamp); color: var(--ink-on-paper); border-color: var(--lamp); padding: 0.4rem 0.9rem; margin-top: 0.5rem; margin-right: 0.5rem; }