/* UNSLOP | THE MUSICAL — site styles Single visual world (black stage, ivory type, gold/green/amber accents), painted explicitly. Environment states (Luah) live on . */ :root { --ink: #F2EADB; /* ivory */ --ink-2: #B9B0A2; /* muted ivory */ --ink-3: #7E786F; --bg: #0A0908; --panel: rgba(14, 12, 11, 0.86); --panel-solid: #14120F; --line: rgba(242, 234, 219, 0.14); --line-strong: rgba(242, 234, 219, 0.32); --gold: #D9A85A; --green: #52F29A; /* Vetkis monocle */ --amber: #E38A34; /* Ro-AN side */ --purple: #8B4BE0; /* stage LED */ --teal: #9FE9DD; /* Vetkis side */ --glow-a: #8B4BE0; --glow-b: #E38A34; --art-filter: none; --led-opacity: 1; --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --radius: 4px; --gutter: clamp(16px, 4vw, 40px); --maxw: 1180px; --ease: cubic-bezier(.2,.7,.2,1); } html[data-scene="backstage"] { --bg: #0F0A07; --panel: rgba(22, 15, 10, 0.88); --panel-solid: #1A120C; --glow-a: #C2621F; --glow-b: #E38A34; --art-filter: sepia(.28) saturate(.82) brightness(.86); --led-opacity: .35; } html[data-scene="room"] { --bg: #0C0C0E; --panel: rgba(16, 16, 18, 0.9); --panel-solid: #161618; --glow-a: #6E6A62; --glow-b: #8C8577; --art-filter: saturate(.55) brightness(.9) contrast(1.02); --led-opacity: 0; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { height: auto; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .8s var(--ease); } img { max-width: 100%; display: block; } a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--ink); } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } h1, h2, h3 { margin: 0; text-wrap: balance; } p { margin: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: #000; padding: .5rem .9rem; border-radius: var(--radius); font-weight: 600; } .skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); outline-color: var(--ink); } /* ---------- header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter) 10px; background: linear-gradient(to bottom, rgba(10,9,8,.85), rgba(10,9,8,0)); transition: background .4s var(--ease), backdrop-filter .4s var(--ease); } .site-header.is-solid { background: rgba(10,9,8,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .brand { font-family: var(--display); font-weight: 700; letter-spacing: .12em; font-size: 1rem; color: var(--ink); text-decoration: none; } .brand small { font-family: var(--mono); font-weight: 400; letter-spacing: .18em; font-size: .62rem; color: var(--gold); margin-left: .6rem; } .site-nav { display: none; gap: 1.2rem; } .site-nav a { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding: .3rem 0; border-bottom: 1px solid transparent; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); border-bottom-color: var(--gold); } .lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; background: rgba(10,9,8,.55); } .lang button { background: transparent; border: 0; border-radius: 999px; padding: .28rem .7rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; cursor: pointer; color: var(--ink-2); } .lang button[aria-pressed="true"] { background: var(--ink); color: #000; } @media (min-width: 900px) { .site-nav { display: flex; } } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: #000; } .hero-art { position: absolute; inset: 0; } .hero-art img, .hero-art picture { width: 100%; height: 100%; } .hero-art img { object-fit: contain; object-position: center center; filter: var(--art-filter); transition: filter .8s var(--ease); } @media (min-aspect-ratio: 5/4) { .hero-art img { object-fit: cover; object-position: center 28%; } } @media (orientation: portrait) { .hero-art img { object-fit: cover; object-position: 50% 0%; } } .hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 46%, rgba(0,0,0,.5) 64%, rgba(0,0,0,.88) 82%, #000 100%); } .hero-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, transparent 0%, rgba(82,242,154,.0) 45%, rgba(82,242,154,.35) 50%, rgba(82,242,154,.0) 55%, transparent 100%); background-size: 100% 300%; } html.is-scanning .hero-scan { animation: scan 1.4s var(--ease) 1; } @keyframes scan { 0% { opacity: 0; background-position: 0 100%; } 15% { opacity: 1; } 100% { opacity: 0; background-position: 0 0%; } } .hero-copy { position: relative; grid-row: 2; z-index: 2; text-align: center; padding: 14vh var(--gutter) calc(env(safe-area-inset-bottom, 0px) + clamp(28px, 6vh, 64px)); display: grid; gap: .55rem; justify-items: center; background: radial-gradient(70% 70% at 50% 100%, rgba(0,0,0,.7), rgba(0,0,0,0) 72%); } .eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .hero .eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 2px #000; } .hero-title { font-family: var(--display); font-weight: 700; font-size: clamp(3.4rem, 11vw, 7.6rem); line-height: .92; letter-spacing: .08em; color: var(--ink); text-shadow: 0 2px 30px rgba(0,0,0,.7); } .hero-sub { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2.6vw, 1.7rem); letter-spacing: .2em; color: var(--gold); text-transform: capitalize; } .hero-tagline { max-width: 34ch; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--ink); text-shadow: 0 1px 14px rgba(0,0,0,.8); margin-top: .4rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: .8rem; } .hero-meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-top: .4rem; } .hero-sound { font-size: .78rem; color: var(--ink-3); } .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.35rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: rgba(10,9,8,.6); color: var(--ink); font-weight: 500; text-decoration: none; cursor: pointer; letter-spacing: .02em; transition: background .25s, border-color .25s, transform .25s; } .btn:hover { background: rgba(242,234,219,.08); border-color: var(--ink); color: var(--ink); } .btn-primary { background: var(--ink); color: #0A0908; border-color: var(--ink); } .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: #0A0908; } .btn-ghost { background: transparent; } .btn svg { width: 1em; height: 1em; } /* ---------- layout ---------- */ .section { position: relative; padding-block: clamp(56px, 9vw, 112px); padding-inline: var(--gutter); } .wrap { max-width: var(--maxw); margin-inline: auto; } .prose { max-width: 66ch; } .section-head { display: grid; gap: .6rem; margin-bottom: clamp(24px, 4vw, 40px); } .h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.05; letter-spacing: .01em; } .lead { font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--ink-2); max-width: 62ch; } .led { height: 2px; background: linear-gradient(90deg, transparent, var(--glow-a), var(--glow-b), transparent); opacity: var(--led-opacity); transition: opacity .8s var(--ease); } /* ---------- film ---------- */ .film-grid { display: grid; gap: clamp(20px, 4vw, 48px); align-items: start; } @media (min-width: 900px) { .film-grid { grid-template-columns: 1.35fr 1fr; } } .film-frame { position: relative; aspect-ratio: 16/9; max-width: 100%; background: #000; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55); } .film-frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--art-filter); } .film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .film-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.05) 60%); color: var(--ink); cursor: pointer; display: grid; place-items: center; gap: .5rem; align-content: center; } .film-play:hover .film-play-ring, .film-play:focus-visible .film-play-ring { transform: scale(1.06); border-color: var(--gold); } .film-play-ring { width: 86px; height: 86px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; background: rgba(10,9,8,.55); transition: transform .3s var(--ease), border-color .3s; } .film-play-ring svg { width: 30px; height: 30px; margin-left: 6px; fill: var(--ink); } .film-play-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; } .film-start { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--green); } .film-start[hidden] { display: none; } .film-side { display: grid; gap: 1rem; } .film-note { font-size: .82rem; color: var(--ink-3); } .film-play[hidden] { display: none; } .film-yt { display: grid; gap: .5rem; justify-items: start; } .btn-yt svg { width: .9em; height: .9em; } /* festival band — the laurel separates the hero from the film ("Created for…", nothing more) */ .festival { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(212,175,55,0) 0%, rgba(212,175,55,.07) 50%, rgba(212,175,55,0) 100%); } .festival-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px); padding: clamp(18px, 3vw, 30px) 0; text-align: center; } .festival-laurel img { display: block; height: clamp(58px, 7vw, 78px); width: auto; opacity: .94; filter: drop-shadow(0 6px 22px rgba(212,175,55,.18)); } .festival-text { margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } @media (min-width: 640px) { .festival-text { border-left: 1px solid rgba(212,175,55,.35); padding-left: clamp(14px, 3vw, 34px); text-align: left; } } /* docked mini-player — once the film plays and #film-stage leaves the viewport, .film-frame goes fixed (top right) and keeps playing; the stage keeps the 16:9 slot so nothing below it moves. --dock-top is set from the header height. */ .film-stage { position: relative; aspect-ratio: 16/9; } .film-dock-bar { display: none; } .film-frame.is-docked { position: fixed; top: var(--dock-top, 72px); right: 12px; width: clamp(280px, 26vw, 400px); aspect-ratio: auto; z-index: 45; border-color: rgba(255,255,255,.2); box-shadow: 0 24px 70px rgba(0,0,0,.65); } @media (max-width: 639px) { .film-frame.is-docked { width: min(56vw, 260px); right: 10px; } .film-dock-title { display: none; } .film-frame.is-docked .film-dock-bar { justify-content: flex-end; padding-left: .3rem; } } .film-frame.is-docked > img, .film-frame.is-docked .film-play { display: none; } .film-frame.is-docked iframe { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 16/9; } .film-frame.is-docked .film-dock-bar { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .3rem .3rem .3rem .7rem; background: #0A0908; border-bottom: 1px solid var(--line); } .film-dock-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 700; letter-spacing: .12em; font-size: .72rem; color: var(--ink-2); } .film-dock-actions { display: inline-flex; gap: .25rem; flex: none; } .film-dock-btn { white-space: nowrap; border: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; padding: .38rem .55rem; border-radius: 999px; cursor: pointer; } .film-dock-btn:hover, .film-dock-btn:focus-visible { border-color: var(--gold); color: var(--gold); } .film-dock-close { font-family: inherit; font-size: 1rem; line-height: 1; padding: .18rem .55rem .24rem; } @media (prefers-reduced-motion: no-preference) { .film-frame.is-docked { animation: dock-in .35s var(--ease) both; } } @keyframes dock-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } } html.is-film-docked .pill, html.is-film-docked .pill.is-visible { opacity: 0; pointer-events: none; } .manifesto { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.35; color: var(--ink); } .manifesto span:last-child { color: var(--gold); } /* ---------- the room ---------- */ /* v1.3 "the characters are the interface": no panels, no lines, no bars. Each .char is a full-bleed .stage-row — a figure column (the cutout, bottom-aligned, in the outer corner) next to the panel content (.char-body, markup unchanged). Rows alternate sides (data-side) and carry a very dark tint of the character's colour (--tint-rgb). */ #room { padding-inline: 0; } #room > .wrap { max-width: calc(var(--maxw) + 2 * var(--gutter)); padding-inline: var(--gutter); } .room-grid { display: grid; gap: 6px; } .stage-row { position: relative; overflow: hidden; scroll-margin-top: 90px; padding: clamp(28px, 4vw, 48px) var(--gutter) 0; --tint-rgb: 217,168,90; --hs: var(--gold); --fig-dir: to left; --fig-x: 100%; background: radial-gradient(60% 55% at var(--fig-x) 100%, rgba(var(--tint-rgb), .16), rgba(var(--tint-rgb), 0) 70%), linear-gradient(var(--fig-dir), rgba(var(--tint-rgb), .10), rgba(var(--tint-rgb), 0) 65%); transition: box-shadow .4s; } .stage-row[data-side="left"] { --fig-dir: to right; --fig-x: 0%; } #vetkis { --tint-rgb: 120,238,190; --hs: var(--green); } #luah { --tint-rgb: 242,199,68; --hs: #F2C744; } #yuna { --tint-rgb: 139,75,224; --hs: #B48CFF; } #roan { --tint-rgb: 227,138,52; --hs: var(--amber); } #adam { --tint-rgb: 217,168,90; --hs: var(--gold); } .char[data-recommended="true"] { box-shadow: inset 0 0 0 1px rgba(82,242,154,.45), inset 0 0 80px rgba(82,242,154,.08); } .row-inner { position: relative; max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .char-body { display: grid; gap: 1.1rem; padding: 1rem 0 clamp(28px, 4vw, 48px); min-width: 0; } .figure { position: relative; min-width: 0; align-self: end; } .figure-box { position: relative; } .figure-par { position: relative; will-change: transform; transition: transform .35s ease-out; } .figure-img { display: block; width: 100%; height: min(52vh, 800px); object-fit: contain; object-position: bottom right; filter: var(--art-filter); transition: filter .8s var(--ease); } .stage-row[data-side="left"] .figure-img { object-position: bottom left; } @media (min-width: 900px) { .row-inner { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(20px, 3vw, 48px); align-items: end; } .stage-row[data-side="right"] .figure { grid-column: 2; grid-row: 1; } .stage-row[data-side="right"] .char-body { grid-column: 1; grid-row: 1; } .stage-row[data-side="left"] .row-inner { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); } .stage-row[data-side="left"] .figure { grid-column: 1; grid-row: 1; } .stage-row[data-side="left"] .char-body { grid-column: 2; grid-row: 1; } .char-body { align-self: center; padding-top: 0; } .figure-img { height: min(78vh, 800px); } .stage-row .portrait { display: none; } /* the figure is the portrait now (the small one stays in the DOM) */ .stage-row .char-head { grid-template-columns: 1fr; } } /* entrance: the figure slides in from its side, the content fades 150 ms later (once per row; JS adds .is-in) */ .figure-box { transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease-out; } .char-body { transition: opacity .5s ease-out .15s; } html.is-ready .stage-row:not(.is-in) .figure-box { opacity: 0; transform: translateX(12%); } html.is-ready .stage-row[data-side="left"]:not(.is-in) .figure-box { transform: translateX(-12%); } html.is-ready .stage-row:not(.is-in) .char-body { opacity: 0; } .char-head { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; } .portrait { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-strong); background: #000; } .portrait img { width: 100%; height: 100%; object-fit: cover; filter: var(--art-filter); } .portrait.p-vetkis img { object-position: 91% 42%; transform: scale(2.6); transform-origin: 91% 42%; } .portrait.p-roan img { object-position: 22% 45%; transform: scale(2.4); transform-origin: 22% 45%; } .portrait.p-adam img { object-position: 50% 30%; transform: scale(3.2); transform-origin: 50% 30%; } .portrait.p-stage img { object-position: 50% 62%; transform: scale(2.2); transform-origin: 50% 62%; } .portrait.p-stage-r img { object-position: 60% 62%; transform: scale(3.2); transform-origin: 60% 62%; } .char-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; } .char-role { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: .35rem; } .char-prompt { font-weight: 500; font-size: 1.05rem; } .choices { display: flex; flex-wrap: wrap; gap: .55rem; } .choice { padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .choice:hover { border-color: var(--ink); } .choice[aria-pressed="true"] { background: var(--ink); color: #0A0908; border-color: var(--ink); } .readout { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--green); padding: .7rem .9rem; border: 1px dashed rgba(82,242,154,.45); border-radius: var(--radius); background: rgba(82,242,154,.05); min-height: 2.6rem; display: flex; align-items: center; gap: .6rem; } .readout::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: none; opacity: .5; } html.is-scanning .readout::before { animation: blink 1.4s steps(2) 1; } @keyframes blink { 50% { opacity: 1; } } .fiction { font-size: .78rem; color: var(--ink-3); } .fiction strong { color: var(--ink-2); font-weight: 500; } .next-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding-top: .3rem; } .next-strip[hidden] { display: none; } .next-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .next-target { font-weight: 500; } /* Luah */ .env-status { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--ink-2); display: flex; gap: .6rem; align-items: center; } .env-swatch { width: 40px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--glow-a), var(--glow-b)); transition: background .8s var(--ease); } .reflection { height: 6px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--glow-a) 40%, var(--glow-b) 60%, transparent); opacity: .8; transition: background .8s var(--ease); } /* Yuna */ .console { display: grid; gap: .6rem; } .track { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1rem; align-items: center; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.25); } .track.is-playing { border-color: var(--gold); } .track-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; display: grid; place-items: center; } .track-btn:hover { border-color: var(--ink); } .track-btn svg { width: 16px; height: 16px; fill: var(--ink); } .track-btn .i-pause { display: none; } .track.is-playing .track-btn .i-play { display: none; } .track.is-playing .track-btn .i-pause { display: block; } .track-meta { display: grid; gap: .15rem; min-width: 0; } .track-title { font-weight: 600; } .track-title small { font-weight: 400; color: var(--ink-2); } .track-sub { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .5rem 1rem; } .track-sub a { color: var(--gold); text-transform: none; letter-spacing: .04em; } .track-controls { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; font-family: var(--mono); font-size: .68rem; color: var(--ink-2); font-variant-numeric: tabular-nums; } .track-controls[hidden] { display: none; } input[type="range"] { width: 100%; accent-color: var(--gold); cursor: pointer; } .console-foot { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; } .now { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--ink-2); } .now strong { color: var(--gold); font-weight: 500; } .vol { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .vol input { width: 110px; } .meter { display: flex; gap: 3px; align-items: flex-end; height: 22px; } .meter i { display: block; width: 4px; height: 20%; background: var(--gold); opacity: .35; border-radius: 1px; transition: height .08s linear; } .track.is-playing .meter i { opacity: .9; } .note { font-size: .8rem; color: var(--ink-3); max-width: 70ch; } /* Ro-AN */ .question { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.1; color: var(--amber); } .answer { padding: 1rem 1.1rem; border-left: 2px solid var(--amber); background: rgba(227,138,52,.06); color: var(--ink); max-width: 68ch; } .answer[hidden] { display: none; } .process { display: grid; gap: 1rem; padding-top: .4rem; } .process[hidden] { display: none; } .credits { display: grid; gap: .55rem; margin: 0; } .credits div { display: grid; grid-template-columns: 1fr; gap: .1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); } @media (min-width: 720px) { .credits div { grid-template-columns: 1.3fr 1fr; gap: 1rem; } } .credits dt { font-size: .86rem; color: var(--ink-2); } .credits dd { margin: 0; font-weight: 500; } .stays { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--amber); } /* Adam */ .adam-grid { display: grid; gap: 1.4rem; } @media (min-width: 900px) { .adam-grid { grid-template-columns: 1.2fr 1fr; gap: 2.4rem; } } .author-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); } .author-role { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: .3rem 0 .9rem; } .quote { font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.4; color: var(--ink); border-left: 2px solid var(--gold); padding-left: 1rem; margin: 1rem 0; } .contact { display: grid; gap: .9rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.25); } .contact h3 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; } .links { display: flex; flex-wrap: wrap; gap: .6rem; } .newsletter { display: grid; gap: .6rem; } .newsletter label { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .newsletter .row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; } .newsletter input[type="email"] { width: 100%; padding: .75rem .9rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: rgba(0,0,0,.35); color: var(--ink); font: inherit; } .newsletter .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* honeypot (bots only) */ .newsletter button[disabled] { opacity: .6; cursor: progress; } .form-msg { font-size: .82rem; color: var(--ink-2); min-height: 1.2em; } .form-msg.is-warn { color: var(--amber); } .form-msg.is-ok { color: var(--green); } /* ---------- ask ---------- */ .ask-list { display: grid; gap: .5rem; } .ask-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .ask-item[data-open="true"] { border-color: var(--line-strong); } .ask-q { width: 100%; text-align: left; background: transparent; border: 0; padding: 1rem 1.1rem; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; font-weight: 500; font-size: 1.02rem; } .ask-q::after { content: "+"; font-family: var(--mono); color: var(--gold); font-size: 1.1rem; } .ask-item[data-open="true"] .ask-q::after { content: "−"; } .ask-a { padding: 0 1.1rem 1.1rem; display: grid; gap: .8rem; color: var(--ink-2); max-width: 70ch; } .ask-a[hidden] { display: none; } .linkbtn { background: transparent; border: 0; padding: 0; color: var(--gold); cursor: pointer; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; justify-self: start; } .linkbtn:hover { color: var(--ink); } /* ---------- closing ---------- */ .closing { text-align: center; display: grid; gap: 1.4rem; justify-items: center; } .closing .manifesto { font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.3; } /* ---------- footer ---------- */ .site-footer { padding: 2rem var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 5rem); border-top: 1px solid var(--line); display: grid; gap: .5rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .site-footer .fiction { text-transform: none; letter-spacing: 0; } /* ---------- floating watch pill ---------- */ .pill { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 40; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 999px; background: var(--ink); color: #0A0908; text-decoration: none; font-weight: 600; font-size: .86rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none; } .pill.is-visible { opacity: 1; transform: none; pointer-events: auto; } .pill:hover { background: var(--gold); color: #0A0908; } .pill svg { width: .9em; height: .9em; fill: currentColor; } /* ---------- v1.1 motion layer ---------- Transform/opacity only; JS positions everything from renderedImageRect() (site.js) on load/resize. Every piece is disabled under prefers-reduced-motion (CSS below + live matchMedia checks in JS). */ /* hero glow: the luminous arc (portrait art) / Adam's halo (landscape art) */ .hero-glow { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; mix-blend-mode: screen; opacity: .25; border-radius: 50%; will-change: opacity; transition: opacity .18s var(--ease); -webkit-mask-image: linear-gradient(to bottom, #000 46%, rgba(0,0,0,0) 62%); mask-image: linear-gradient(to bottom, #000 46%, rgba(0,0,0,0) 62%); } .hero-glow.is-flash { transition-duration: 1.3s; } .hero-glow::before, .hero-glow::after { content: ""; position: absolute; inset: 0; border-radius: 50%; } .hero-glow::before { background: radial-gradient(circle closest-side, rgba(217,168,90,0) 0 60%, rgba(217,168,90,.55) 74%, rgba(217,168,90,.18) 84%, rgba(217,168,90,0) 100%); animation: glowpulse 6s ease-in-out infinite; } .hero-glow::after { background: radial-gradient(circle closest-side, rgba(82,242,154,0) 0 56%, rgba(82,242,154,.42) 68%, rgba(82,242,154,0) 74%); opacity: 0; transition: opacity .35s var(--ease); } .hero-glow.is-inside::after { opacity: 1; } @keyframes glowpulse { 0%, 100% { opacity: .62; } 50% { opacity: 1; } } /* banners in the wind: overlays sit on their own pixels; JS sets left/top/width/height */ .hero-art { perspective: 900px; } .hero-art .hero-banner { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; transform-origin: top center; will-change: transform; backface-visibility: hidden; /* feathered sides/top so a displaced edge never shows as a seam; the bottom stays opaque over the banner text (the gust rotates the bottom toward the viewer, so the overlay always covers its original) */ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), #000 10%, #000 90%, rgba(0,0,0,0)), linear-gradient(to bottom, rgba(0,0,0,0), #000 3%, #000 94%, rgba(0,0,0,0)); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, rgba(0,0,0,0), #000 10%, #000 90%, rgba(0,0,0,0)), linear-gradient(to bottom, rgba(0,0,0,0), #000 3%, #000 94%, rgba(0,0,0,0)); mask-composite: intersect; } .hero-art .hero-banner[data-visible="true"] { opacity: 1; } .hero-art .hero-banner img { width: 100%; height: 100%; object-fit: fill; object-position: 0 0; } /* Luah stage FX */ .stagefx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); } .stagefx.is-on { opacity: 1; } .fx-hint { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-3); } /* terminal (closing) */ .terminal { width: min(680px, 100%); text-align: left; background: #050505; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; } .terminal-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #0B0B0B; } .terminal-dot { width: 10px; height: 10px; border-radius: 50%; background: #2A2A2A; } .terminal-dot:nth-child(1) { background: var(--amber); } .terminal-dot:nth-child(2) { background: var(--gold); } .terminal-dot:nth-child(3) { background: var(--green); } .terminal-screen { margin: 0; padding: 1.1rem 1.2rem 1.3rem; min-height: 23em; font-family: var(--mono); font-size: .84rem; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } .terminal-cursor { display: inline-block; width: .6em; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--ink); animation: tblink 1.06s linear infinite; } .terminal[data-state="typing"] .terminal-cursor { animation: none; } @keyframes tblink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } } .terminal-foot { display: flex; justify-content: flex-end; padding: 0 14px 12px; } /* ---------- v1.2 character reaction clips ---------- Created by site.js only when config.videos. is set; inserted right after .char-head. The poster sits on top of the