/* ============================================================ /room — the exchange. Five steps, he answers first. Structured as Aron's closeness procedure, not as a quiz (F9, F11). ============================================================ */ body.room { min-height: 100svh; display: flex; flex-direction: column; /* Each step has its own portrait of him; --room-bg is set per step below. */ background: var(--night) var(--room-bg, url("../assets/img/room-1-desktop.jpg")) center/cover no-repeat fixed; position: relative; } body.room::before { content: ""; position: fixed; inset: 0; /* These are bright studio shots on a pale backdrop, so the wash is heavier than a dark photo would need, to keep ivory type readable over them. */ background: linear-gradient(to right, rgba(18,12,14,0.93) 0%, rgba(18,12,14,0.78) 38%, rgba(18,12,14,0.30) 72%, rgba(18,12,14,0.18) 100%), radial-gradient(circle at 25% 50%, rgba(23,16,18,0.30) 0%, rgba(18,12,14,0.62) 95%); pointer-events: none; z-index: 0; } /* ---- one background per screen ---- main.js/room sets data-step on : 1-5 for the five steps, then "done". Landscape frames on wide screens, portrait on phones. */ body.room[data-step="1"] { --room-bg: url("../assets/img/room-1-desktop.jpg"); } body.room[data-step="2"] { --room-bg: url("../assets/img/room-2-desktop.jpg"); } body.room[data-step="3"] { --room-bg: url("../assets/img/room-3-desktop.jpg"); } body.room[data-step="4"] { --room-bg: url("../assets/img/room-4-desktop.jpg"); } body.room[data-step="5"] { --room-bg: url("../assets/img/room-5-desktop.jpg"); } body.room[data-step="done"] { --room-bg: url("../assets/img/room-done-desktop.jpg"); } @media (max-width: 62rem) and (orientation: portrait) { body.room { /* fixed attachment stutters on touch scrolling */ background-attachment: scroll; background-position: 50% 12%; } body.room::before { background: linear-gradient(to bottom, rgba(18,12,14,0.55) 0%, rgba(18,12,14,0.82) 38%, rgba(18,12,14,0.95) 70%), rgba(18,12,14,0.3); } body.room[data-step="1"] { --room-bg: url("../assets/img/room-1-mobile.jpg"); } body.room[data-step="2"] { --room-bg: url("../assets/img/room-2-mobile.jpg"); } body.room[data-step="3"] { --room-bg: url("../assets/img/room-3-mobile.jpg"); } body.room[data-step="4"] { --room-bg: url("../assets/img/room-4-mobile.jpg"); } body.room[data-step="5"] { --room-bg: url("../assets/img/room-5-mobile.jpg"); } body.room[data-step="done"] { --room-bg: url("../assets/img/room-done-mobile.jpg"); } } .room-top, .room-main { position: relative; z-index: 1; } .room-top { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line-soft); } .room-top a { text-decoration: none; } .room-exit { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .room-exit:hover { color: var(--amber-lit); } .room-main { flex: 1; display: grid; place-items: center; padding: var(--s5) clamp(1.25rem, 4vw, 2.5rem); } .room-inner { width: min(100%, 44rem); } /* progress — deliberately quiet. No bar, no percentage, no anxiety (F8). */ .room-count { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: var(--s4); display: flex; align-items: center; gap: .55rem; } .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--line); display: inline-block; } .pip.on { background: var(--amber); } .pip.done { background: var(--amber-deep); } /* his half — always first */ .his { border-left: 2px solid var(--amber); padding: 0 0 0 var(--s3); margin-bottom: var(--s5); } .his-label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin: 0 0 var(--s2); } .his p { font-family: var(--display); font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.42; color: var(--text); margin: 0; max-width: 34ch; } .his-voice { display: inline-flex; align-items: center; gap: .7rem; margin-top: var(--s3); background: none; border: 0; cursor: pointer; padding: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .his-voice:hover { color: var(--amber-lit); } .his-voice .circ { width: 2.4rem; height: 2.4rem; } /* her half */ .q { font-family: var(--display); font-size: clamp(1.8rem, 4.4vw, 2.9rem); line-height: 1.12; margin: 0 0 var(--s4); max-width: 20ch; } .opts { display: flex; flex-direction: column; gap: .7rem; } .opt { text-align: left; width: 100%; padding: 1.05rem 1.3rem; /* 44px+ (F7) */ background: var(--raise); border: 1px solid var(--line); cursor: pointer; font-size: 1rem; color: var(--text); transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); } .opt:hover { border-color: var(--amber); background: var(--ground-3); transform: translateX(4px); } .opt[aria-pressed="true"] { border-color: var(--amber); background: var(--ground-3); } /* final step */ .field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: var(--s3); } .field label { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .field input, .field select { padding: 1rem 1.1rem; font-size: 1.05rem; background: var(--raise); border: 1px solid var(--line); color: var(--text); font-family: var(--body); } .field input:focus, .field select:focus { border-color: var(--amber); outline: none; } .consent { display: flex; gap: .8rem; align-items: flex-start; margin: var(--s3) 0; } .consent input { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; margin-top: .18rem; accent-color: var(--amber); } .consent label { font-size: .88rem; color: var(--text-mid); line-height: 1.5; } .err { color: var(--error); font-size: .88rem; margin: 0 0 var(--s2); } /* the warm exit — shown if she leaves before the end (F8) */ .softexit { margin-top: var(--s5); font-size: .9rem; color: var(--dim); border-top: 1px solid var(--line-soft); padding-top: var(--s3); } .softexit a { color: var(--text-mid); } /* done */ .done { text-align: center; } .done h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); margin-bottom: var(--s3); } .done p { margin-inline: auto; color: var(--text-mid); } /* step transition */ .step { animation: stepIn .5s var(--ease) both; } @keyframes stepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .step { animation: none; } }