/* Art page — "The Darkroom" Immersive one-work-per-screen deck. Dark by default; a light ("Gallery") theme is available via [data-theme="light"] on (toggle in nav). All colour flips through the CSS variables below. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0b0b0e; --fg: #e8e6e3; --dim: rgba(232, 230, 227, 0.55); --soft: rgba(232, 230, 227, 0.78); --nav-fade: rgba(11, 11, 14, 0.85); --nav-div: rgba(232, 230, 227, 0.2); --amb-filter: blur(72px) brightness(0.42) saturate(1.5); --vig: radial-gradient(ellipse at center, transparent 30%, rgba(5, 5, 8, 0.75) 100%); --img-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.85); --img-shadow-hover: 0 40px 110px -20px rgba(0, 0, 0, 0.9); --num-stroke: rgba(255, 255, 255, 0.25); --dot-idle: rgba(232, 230, 227, 0.28); --dot-hover: rgba(232, 230, 227, 0.7); --stmt-backdrop: rgba(5, 5, 8, 0.72); --card-bg: #141317; --card-border: rgba(255, 255, 255, 0.1); --card-body: rgba(232, 230, 227, 0.9); --btn-border: rgba(255, 255, 255, 0.35); --btn-bg: rgba(12, 12, 14, 0.4); --btn-bg-hover: rgba(30, 30, 34, 0.7); } :root[data-theme="light"] { --bg: #ecebe6; --fg: #201f22; --dim: rgba(32, 31, 34, 0.62); --soft: rgba(32, 31, 34, 0.82); --nav-fade: rgba(236, 235, 230, 0.9); --nav-div: rgba(32, 31, 34, 0.22); --amb-filter: blur(80px) brightness(1.06) saturate(1.12); --vig: radial-gradient(ellipse at center, transparent 34%, rgba(236, 235, 230, 0.86) 100%); --img-shadow: 0 26px 70px -24px rgba(40, 34, 28, 0.45); --img-shadow-hover: 0 40px 100px -24px rgba(40, 34, 28, 0.55); --num-stroke: rgba(20, 18, 22, 0.3); --dot-idle: rgba(32, 31, 34, 0.3); --dot-hover: rgba(32, 31, 34, 0.65); --stmt-backdrop: rgba(228, 226, 220, 0.78); --card-bg: #faf9f6; --card-border: rgba(20, 18, 22, 0.12); --card-body: rgba(32, 31, 34, 0.9); --btn-border: rgba(20, 18, 22, 0.3); --btn-bg: rgba(255, 255, 255, 0.5); --btn-bg-hover: rgba(255, 255, 255, 0.88); } html, body { height: 100%; } html { overflow-x: hidden; } body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow: hidden; transition: background 0.4s ease, color 0.4s ease; } img { max-width: 100%; display: block; } /* ---------- mini nav ---------- */ .mini-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; background: linear-gradient(var(--nav-fade), transparent); pointer-events: none; } .mini-nav a { pointer-events: auto; text-decoration: none; color: var(--dim); transition: color 0.2s; } .mini-nav a:hover, .mini-nav a.active { color: var(--fg); } .mini-nav a.active { border-bottom: 1px solid var(--fg); padding-bottom: 2px; } .mini-nav .div { color: var(--nav-div); } .theme-toggle { pointer-events: auto; margin-left: auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--fg); border-radius: 50%; cursor: pointer; backdrop-filter: blur(6px); transition: border-color 0.2s, background 0.2s, transform 0.15s; } .theme-toggle:hover { background: var(--btn-bg-hover); transform: scale(1.06); } .theme-toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; display: block; } :root[data-theme="light"] .theme-toggle .i-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; } /* ---------- deck + panels ---------- */ .deck { height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; } .deck::-webkit-scrollbar { display: none; } .panel { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; overflow: hidden; } .panel .amb { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: var(--amb-filter); transform: scale(1.15); z-index: 0; } .panel .vig { position: absolute; inset: 0; z-index: 1; background: var(--vig); } .panel .big-num { position: absolute; z-index: 2; top: 4vh; right: 4vw; font-size: clamp(7rem, 22vh, 14rem); font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--accent, var(--num-stroke)); opacity: 0; transform: translateX(40px); transition: opacity 1s ease 0.15s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; user-select: none; pointer-events: none; } .panel .art { position: relative; z-index: 3; max-width: min(88vw, 620px); max-height: 76dvh; cursor: pointer; border: 0; background: none; padding: 0; opacity: 0; transform: scale(0.94) translateY(24px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .panel .art img { max-height: 76dvh; width: auto; max-width: 100%; box-shadow: var(--img-shadow), 0 0 120px -30px var(--accent, transparent); transition: transform 0.5s ease, box-shadow 0.5s ease; } .panel .art:hover img, .panel .art:focus-visible img { transform: scale(1.015); box-shadow: var(--img-shadow-hover), 0 0 160px -20px var(--accent, transparent); } .panel .art:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 6px; } .panel .info { position: absolute; z-index: 3; left: clamp(16px, 4vw, 56px); bottom: clamp(18px, 5vh, 48px); max-width: 380px; opacity: 0; transform: translateY(24px); transition: opacity 1s ease 0.25s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; pointer-events: none; } .panel .info .k { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent, var(--dim)); display: block; margin-bottom: 8px; } .panel .info h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 400; letter-spacing: 0.01em; line-height: 1.12; margin-bottom: 8px; color: var(--fg); } .panel .info .m { font-size: 0.8rem; font-style: italic; color: var(--dim); margin-bottom: 12px; } .panel .info .t { font-size: 0.86rem; color: var(--soft); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* The statement is up to three paragraphs. Clamped it reads as one run-on block, so the spacing only appears once there is room to show the whole thing (see the wide rule). */ .panel .info .t p { margin: 0; } .panel .info .t p + p { margin-top: 0; } .panel .info .info-actions { margin-top: 14px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .panel .info .stmt-btn { pointer-events: auto; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--fg); border-radius: 20px; padding: 7px 16px; font: inherit; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); transition: border-color 0.2s, background 0.2s; } .panel .info .stmt-btn:hover { border-color: var(--accent, var(--fg)); background: var(--btn-bg-hover); } .panel .info .enter { font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } .panel .info .enter::after { content: ' →'; } .panel.live .big-num { opacity: 0.5; transform: none; } .panel.live .art { opacity: 1; transform: none; } .panel.live .info { opacity: 1; transform: none; } /* ---------- wide screens: the statement moves into the empty space ---------- */ /* A centred image leaves a large dead column on a desktop while the statement sat clamped to three lines in the bottom-left corner, with the rest behind a button. Above 1024px the image shifts left and the whole statement takes the space that was doing nothing. `.amb`, `.vig` and `.big-num` are absolutely positioned, so the only flex children in flow are `.art` then `.info` — the row orders itself. (orion-artbot, 2026-07-26) */ @media (min-width: 1024px) and (min-height: 520px) { .panel.work-panel { gap: clamp(28px, 4vw, 68px); padding-inline: clamp(28px, 5vw, 80px); } .panel .art { max-width: min(48vw, 560px); } .panel .info { position: static; max-width: 44ch; /* Its own scroll, so a long statement can never push the layout past the panel or get silently cut off — the deck is scroll-snapped one work per screen. */ max-height: 76dvh; overflow-y: auto; scrollbar-width: thin; pointer-events: auto; } .panel .info .t { display: block; /* out of the -webkit-box clamp entirely */ -webkit-line-clamp: none; overflow: visible; font-size: 0.92rem; line-height: 1.62; } .panel .info .t p + p { margin-top: 0.85em; } /* Redundant here — the statement it opens is already on screen. */ .panel .info .stmt-btn { display: none; } /* The number would sit behind the text column now. Move it over the image side, where the painting covers it (art is z-index 3, big-num is 2). */ .panel .big-num { right: auto; left: clamp(16px, 3vw, 48px); } } /* ---------- artist statement modal ---------- */ .stmt-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 5vh, 60px) 20px; background: var(--stmt-backdrop); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .stmt-modal.on { opacity: 1; pointer-events: auto; } .stmt-card { position: relative; width: min(640px, 100%); max-height: 86vh; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--card-border); border-top: 3px solid var(--accent, var(--fg)); border-radius: 6px; padding: clamp(28px, 5vw, 48px); transform: translateY(20px) scale(0.98); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6); } .stmt-modal.on .stmt-card { transform: none; } .stmt-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid var(--card-border); background: var(--btn-bg); color: var(--fg); border-radius: 50%; font-size: 1rem; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .stmt-close:hover { background: var(--btn-bg-hover); border-color: var(--accent, var(--fg)); } .stmt-num { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent, var(--dim)); } .stmt-card h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 10px 0 6px; padding-right: 40px; color: var(--fg); } .stmt-meta { font-size: 0.82rem; font-style: italic; color: var(--dim); margin-bottom: 22px; } .stmt-body { font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; line-height: 1.72; color: var(--card-body); } .stmt-body p { margin-bottom: 1rem; } .stmt-body p:last-child { margin-bottom: 0; } /* ---------- intro / outro ---------- */ .intro-panel, .outro-panel { text-align: center; } .intro-inner { position: relative; z-index: 2; max-width: 680px; padding: 0 24px; } .dk-eyebrow { display: block; font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--dim); margin-bottom: 26px; } .intro-panel h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.8rem, 8.5vw, 5.25rem); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.05; max-width: 100%; margin-bottom: 26px; background: linear-gradient(100deg, #d4a017, #d1487f 30%, #9b7bd4 55%, #6fa0a8 80%, #b7c04a); -webkit-background-clip: text; background-clip: text; color: transparent; } .intro-panel p, .outro-panel p { color: var(--dim); font-size: 0.95rem; line-height: 1.7; } .dk-scroll-cue { margin-top: 7vh; font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--dim); } .dk-scroll-cue span { display: block; width: 1px; height: 44px; margin: 0 auto 12px; background: linear-gradient(var(--fg), transparent); animation: cue 1.8s ease-in-out infinite; } @keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } .outro-panel h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 400; letter-spacing: 0.04em; margin-bottom: 14px; color: var(--fg); } .dk-btn { display: inline-block; margin-top: 26px; padding: 14px 40px; border: 1px solid var(--fg); color: var(--fg); text-decoration: none; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; transition: background 0.25s, color 0.25s; } .dk-btn:hover { background: var(--fg); color: var(--bg); } /* Deliberately quieter than .dk-btn — the Contact CTA stays the primary action in the outro; this is just a way back up the deck. */ .dk-totop { display: block; margin: 22px auto 0; padding: 8px 18px; background: none; border: 0; color: var(--dim); font: inherit; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; transition: color 0.25s; } .dk-totop:hover { color: var(--fg); } .dk-totop:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; } .dk-foot { margin-top: 8vh; font-size: 0.68rem; letter-spacing: 0.14em; } .intro-panel::before, .outro-panel::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(40% 35% at 18% 25%, rgba(212, 160, 23, 0.16), transparent 70%), radial-gradient(38% 40% at 82% 30%, rgba(155, 123, 212, 0.15), transparent 70%), radial-gradient(45% 40% at 50% 85%, rgba(209, 72, 127, 0.13), transparent 70%); } /* ---------- progress rail ---------- */ .rail { position: fixed; z-index: 40; right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; } .rail button { width: 26px; height: 8px; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; } .rail button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-idle); transition: all 0.3s ease; } .rail button:hover::before { background: var(--dot-hover); } .rail button.on::before { width: 26px; border-radius: 4px; background: var(--dot, var(--fg)); } @media (max-width: 760px) { .panel .big-num { top: 8vh; right: 5vw; font-size: clamp(4.5rem, 15vh, 8rem); } .panel .art { max-height: 54dvh; } .panel .art img { max-height: 54dvh; } .panel .info { left: 18px; right: 18px; bottom: max(20px, env(safe-area-inset-bottom)); max-width: none; } .rail { right: 8px; gap: 11px; } }