/* ============================================================== MAKETHEFISHRICH -- wish-card.css SHARED wish-card visual system + the ONE wish-drop animation. Single source of truth for how a wish looks and moves, used by BOTH: * the admin/OBS Wish Overlay (wish-overlay.html) * the homepage Christening (index.html) When someone submits a wish it drops into the aquarium; the submitter sees it through the homepage overlay and stream viewers see the SAME wish drop through the OBS overlay -- one card, one motion, rendered in both places, so they can never drift into two implementations. Self-contained (hard-codes the brand palette; no dependency on styles.css) so the standalone OBS page and the site can both include it. Layout that is context-specific (width, where it sits, the drop's horizontal base via --sink-x) lives in the consumer's CSS; APPEARANCE + the shared keyframe live here. SCALING: the whole card scales from ONE knob -- `.wish-note`'s font-size. Interior sizes are in `em`, so a consumer sizes the card by setting font-size (OBS: a fixed px; the ceremony: a frame-relative clamp) and everything follows. ============================================================== */ /* The treasury slip -- an investor note, not a sticky note. */ .wish-note { font-size: 16px; /* THE scale knob (consumer overrides) */ box-sizing: border-box; background: linear-gradient(180deg, #101013, #0B0B0D), repeating-linear-gradient(0deg, rgba(238,231,216,.014) 0 1px, transparent 1px 3px); border: 1px solid rgba(212,168,67,.32); border-radius: 0.4em; padding: 0.9em 1em 0.95em; box-shadow: 0 1.1em 2.5em rgba(0,0,0,.55), inset 0 1px 0 rgba(238,231,216,.05); } .wish-note-head { display: flex; align-items: center; justify-content: flex-start; gap: 0.5em; border-bottom: 1px solid rgba(212,168,67,.16); padding-bottom: 0.5em; margin-bottom: 0.55em; } .wish-note-head-right { display: inline-flex; align-items: center; gap: 0.4em; } /* Wish #N is the card's only header label now (the identity/spine), so it reads clearly but stays quiet next to the wish itself. */ .wish-note-serial { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.52em; font-weight: 700; letter-spacing: 0.1em; color: rgba(238,231,216,.62); white-space: nowrap; } /* Dev/test marker — a small gold-outlined "TEST" chip so a test wish is unmistakable while tuning, without shouting. */ .wish-note-test { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.44em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #ECC057; border: 1px solid rgba(212,168,67,.5); border-radius: 0.3em; padding: 0.14em 0.42em; line-height: 1; white-space: nowrap; } .wish-note-text { font-family: 'Playfair Display', Georgia, serif; font-size: 1em; font-style: italic; font-weight: 400; line-height: 1.4; color: #EEE7D8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wish-note-text::before { content: '\201C'; } .wish-note-text::after { content: '\201D'; } .wish-note-foot { display: flex; align-items: center; gap: 0.45em; margin-top: 0.7em; padding-top: 0.55em; border-top: 1px solid rgba(212,168,67,.1); } .wish-note-mark { font-size: 0.68em; line-height: 1; color: #7A5E20; } .wish-note-author { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.5em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238,231,216,.6); } /* Private wishes: masked slip with a quiet lock cue (the mask decision is made by the shared builder; this is only its look). */ .wish-note--private .wish-note-text { color: rgba(238,231,216,.32); } .wish-note-lock { display: inline-flex; width: 0.7em; height: 0.7em; opacity: .8; flex: 0 0 auto; } /* ONE shared drop animation, applied by a class, used by BOTH the homepage ceremony and the OBS overlay. Positioning (a centered point on the homepage, a horizontal lane on the OBS canvas) is supplied by the consumer via --sink-x. */ .wish-note.is-sinking { animation: wishSink var(--sink-dur, 6.5s) cubic-bezier(.4, 0, .2, 1) forwards; will-change: transform, opacity; } /* ── THE SHARED WISH DROP ────────────────────────────────────── Dropping a card into real water: it enters from ABOVE, falls, is slowed by the water (decelerating stops), sways side-to-side and wobbles, reaches the bottom, receives a brief golden glow, then fades as the aquarium accepts it. * Vertical travel is in cqh, so it scales to whatever the card is dropped into -- the site's stream frame (container-type on .aq-frame) or the full OBS canvas (no container -> cqh resolves to the viewport). Same code, right size in both. * Horizontal base --sink-x: -50% centres on a point (homepage ceremony) or 0 to sit at a lane's left edge (OBS overlay). * The gold glow + shadow are in em, so they scale with the card. */ @keyframes wishSink { 0% { transform: translate(var(--sink-x, -50%), -24cqh) rotate(-6deg); opacity: 0; box-shadow: 0 0.9em 2em rgba(0,0,0,.5); } 7% { opacity: 1; } 28% { transform: translate(calc(var(--sink-x, -50%) + 7px), 14cqh) rotate(5deg); } 52% { transform: translate(calc(var(--sink-x, -50%) - 6px), 36cqh) rotate(-3deg); } 74% { transform: translate(calc(var(--sink-x, -50%) + 4px), 54cqh) rotate(2deg); } 88% { transform: translate(calc(var(--sink-x, -50%) - 2px), 66cqh) rotate(-1deg); opacity: 1; box-shadow: 0 0.9em 2em rgba(0,0,0,.45), 0 0 2.8em rgba(212,168,67,.55); } 100% { transform: translate(var(--sink-x, -50%), 72cqh) rotate(0deg); opacity: 0; box-shadow: 0 0.9em 2em rgba(0,0,0,0), 0 0 3.6em rgba(212,168,67,0); } } @media (prefers-reduced-motion: reduce) { @keyframes wishSink { 0% { opacity: 0; transform: translate(var(--sink-x, -50%), 58cqh) rotate(0deg); } 18% { opacity: 1; box-shadow: 0 0.9em 2em rgba(0,0,0,.45), 0 0 2.8em rgba(212,168,67,.45); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sink-x, -50%), 62cqh) rotate(0deg); box-shadow: 0 0 3.4em rgba(212,168,67,0); } } }