/* J — Darkroom. Red safelight, prints that develop, and a switch that turns the lights on. Prototype. */
:root { --bg: #130203; --bg2: #1F0507; --fg: #FFB9AC; --fg2: #E8796A; --hi: #FF2A1F; --ph: 1; --font: "Instrument Sans", system-ui, sans-serif; --pad: clamp(18px, 2.8vw, 42px); --ease: cubic-bezier(.2,.75,.15,1); }
html.lit { --bg: #F3F2EE; --bg2: #E7E5DF; --fg: #0E0E0E; --fg2: #4A4A46; --ph: 0; }
*, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.42 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color .35s, color .35s; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; } .skip { position: absolute; left: 12px; top: -70px; z-index: 200; background: var(--hi); color: #000; padding: 10px 14px; } .skip:focus { top: 10px; }
h1, h2, h3 { font-weight: 500; font-stretch: 75%; letter-spacing: -.025em; line-height: .9; } h2 { font-size: clamp(3.4rem, 1.6rem + 6.6vw, 9rem); }
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 66px; padding-inline: var(--pad); transition: transform .35s var(--ease); } .top--hide { transform: translateY(-100%); } .top:focus-within { transform: none; } .wm { height: 21px; width: auto; } .wm--d { display: none; } .lit .wm--l { display: none; } .lit .wm--d { display: block; } .top nav { display: flex; align-items: center; gap: 22px; font-weight: 500; font-size: .96rem; } .top nav a { text-decoration: none; } .top nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.sw { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 5px; border: 1.5px solid var(--fg); border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; } .sw i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 14px var(--hi); transition: background-color .3s, box-shadow .3s; } .lit .sw i { background: #FFD84A; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.hero { position: relative; display: flex; align-items: flex-end; min-height: 100svh; padding: 90px var(--pad) clamp(30px, 6vh, 60px); overflow: hidden; background: #070101; } .lit .hero { background: #DEDCD6; } #tray { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__p { position: absolute; right: 8vw; top: 12vh; height: 76vh; width: auto; filter: grayscale(1); } .hero__t { position: relative; width: min(100%, 39rem); } .hero h1 { font-size: clamp(5rem, 1rem + 13.2vw, 15.5rem); line-height: .84; letter-spacing: -.035em; } .hero p { max-width: 24em; margin: 30px 0 18px; font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); line-height: 1.22; }
.tip { margin: 12px 0 0 !important; font-size: .98rem !important; color: var(--fg2); } .btn { display: inline-flex; align-items: center; min-height: 54px; padding: 0 24px; background: var(--hi); color: #120000; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; } .btn:hover { background: var(--fg); } .lit .btn { background: #0E0E0E; color: #fff; } .lit .btn:hover { background: var(--hi); color: #000; } .btn--l { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); } .lit .btn--l { background: transparent; color: var(--fg); }
.sheet { padding: clamp(90px, 15vh, 160px) var(--pad); } .sheet__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 40px; margin-bottom: 30px; } .sheet__h p { max-width: 26em; color: var(--fg2); }
.frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 22px 0; background: #030000 radial-gradient(circle, transparent 0, transparent 0); position: relative; } .lit .frames { background: #0B0B0B; } .frames::before, .frames::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 12px, #3A0D0D 12px 26px, transparent 26px 34px); } .lit .frames::before, .lit .frames::after { background: repeating-linear-gradient(90deg, transparent 0 12px, #E9E7E2 12px 26px, transparent 26px 34px); } .frames::before { top: 5px; } .frames::after { bottom: 5px; }
.frames li { padding: 4px; } .frames a { position: relative; display: flex; flex-direction: column; aspect-ratio: 3 / 2; padding: clamp(12px, 1.3vw, 20px); overflow: hidden; color: #FFD4CB; text-decoration: none; background: #120405; } .lit .frames a { color: #fff; background: #1C1C1C; } .neg { position: absolute; inset: 0; background-size: cover; background-position: top left; filter: invert(1) grayscale(1) contrast(1.1); opacity: .2; mix-blend-mode: screen; transition: opacity .3s; } .frames a:hover .neg { opacity: .42; } .ed { position: absolute; right: 10px; bottom: 7px; font-size: .78rem; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; } .frames b { position: relative; font-weight: 500; font-stretch: 75%; font-size: clamp(2.1rem, 1.3rem + 1.9vw, 3.5rem); letter-spacing: -.02em; line-height: .94; } .l { position: relative; margin-top: 8px; font-size: .98rem; line-height: 1.24; } .frames .pr { position: relative; margin-top: auto; font-size: .96rem; font-weight: 600; }
.grease { position: absolute; inset: 3%; width: 94%; height: 94%; overflow: visible; pointer-events: none; } .grease path { fill: none; stroke: var(--hi); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1.02; stroke-dashoffset: 1.02; opacity: 0; transition: stroke-dashoffset .7s var(--ease), opacity .1s; } .frames a:hover .grease path, .frames a:focus-visible .grease path, .frames li:first-child .grease path { stroke-dashoffset: 0; opacity: 1; } .frames a.ask { background: var(--hi); color: #120000; } .lit .frames a.ask { background: #fff; color: #000; } .ask b { font-size: clamp(1.9rem, 1.2rem + 1.7vw, 3.1rem); }
.line { position: relative; height: 420svh; } .line__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; padding-top: clamp(72px, 11vh, 100px); } .line h2 { padding-inline: var(--pad); } .wire { position: absolute; left: 0; right: 0; top: 37svh; height: 2px; background: var(--fg2); opacity: .7; } .rail { position: absolute; left: 0; top: 37svh; display: flex; gap: clamp(30px, 5vw, 80px); padding-left: 42vw; padding-right: 30vw; will-change: transform; }
.print { --dev: 0; position: relative; flex: none; width: clamp(280px, 40vw, 620px); transform-origin: 50% 0; transform: rotate(calc(var(--tilt) + var(--sway, 0deg))); } .clip { position: absolute; left: 50%; top: -14px; width: 26px; height: 38px; margin-left: -13px; border-radius: 3px; background: var(--fg2); z-index: 2; } .ph { position: relative; display: block; margin-top: 12px; padding: 10px; background: #FFF; } html:not(.lit) .ph { background: var(--hi); } .ph img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; filter: grayscale(calc(var(--ph) * 1)) contrast(calc(1 + var(--ph) * (.1 + .9 * (1 - var(--dev))))) brightness(calc(1 + var(--ph) * 1.5 * (1 - var(--dev)))); transition: filter .35s; } .ph::after { content: ""; position: absolute; inset: 10px; background: var(--hi); mix-blend-mode: multiply; opacity: var(--ph); transition: opacity .35s; pointer-events: none; } .print:hover .ph img { filter: none; } .print:hover .ph::after { opacity: 0; } .print h3 { margin-top: 14px; font-size: clamp(1.9rem, 1.3rem + 1.6vw, 3rem); } .print p { margin-top: 4px; color: var(--fg2); }
.rate { position: relative; overflow: hidden; padding: clamp(90px, 15vh, 160px) var(--pad); } .strip { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); } .strip i { background: var(--hi); } html.lit .strip i { background: #111; } .strip i:nth-child(1) { opacity: .03; } .strip i:nth-child(2) { opacity: .06; } .strip i:nth-child(3) { opacity: .1; } .strip i:nth-child(4) { opacity: .15; } .strip i:nth-child(5) { opacity: .22; } .strip i:nth-child(6) { opacity: .3; } .strip i:nth-child(7) { opacity: .4; } .rate__t { position: relative; } .five { font-size: clamp(10rem, 2rem + 28vw, 34rem); font-weight: 500; font-stretch: 75%; line-height: .8; letter-spacing: -.04em; } blockquote { max-width: 20em; margin-top: 26px; font-size: clamp(1.9rem, 1.3rem + 2vw, 3.3rem); font-weight: 500; font-stretch: 75%; line-height: 1; letter-spacing: -.02em; } figcaption { margin-top: 12px; } .note { margin-top: 4px; }
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: clamp(24px, 5vw, 80px); padding: clamp(90px, 14vh, 150px) var(--pad); } .pr8 { position: relative; padding: 12px; background: #fff; transform: rotate(-1.2deg); } html:not(.lit) .pr8 { background: var(--hi); } .pr8 img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; filter: grayscale(var(--ph)); transition: filter .35s; } .pr8::after { content: ""; position: absolute; inset: 12px; background: var(--hi); mix-blend-mode: multiply; opacity: var(--ph); transition: opacity .35s; } .about p { max-width: 33em; margin-top: 14px; } .lead { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.how { padding: 0 var(--pad) clamp(90px, 14vh, 150px); } .how ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: 30px; } .how li { padding-top: 12px; border-top: 1.5px solid var(--fg); } .st { display: block; color: var(--fg2); font-weight: 600; } .how b { display: block; margin-top: clamp(26px, 6vh, 64px); font-weight: 500; font-stretch: 75%; font-size: clamp(2rem, 1.4rem + 1.5vw, 3rem); letter-spacing: -.02em; line-height: .94; } .how p { margin-top: 8px; line-height: 1.3; color: var(--fg2); }
.end { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding: 90px var(--pad) 16px; } .end h2 { font-size: clamp(7rem, .4rem + 25vw, 30rem); line-height: .82; letter-spacing: -.035em; } .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .end footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; margin-top: 26px; padding-bottom: 56px; font-size: .95rem; }
html:not(.js) .line { height: auto; } html:not(.js) .line__pin { position: static; height: auto; } html:not(.js) .wire { display: none; } html:not(.js) .rail { position: static; flex-wrap: wrap; padding: 30px var(--pad); } html:not(.js) .print { --dev: 1; }
@media (max-width: 860px) { .top nav a { display: none; } .hero { align-items: flex-end; } .hero h1 { font-size: 26vw; } .hero p { font-size: 1.1rem; } .frames { grid-template-columns: 1fr; } .frames a { aspect-ratio: 16 / 10; } .about { grid-template-columns: 1fr; } .how ol { grid-template-columns: 1fr 1fr; } .print { width: 76vw; } .rail { padding-left: 12vw; gap: 26px; } .wire, .rail { top: 30svh; } .five { font-size: 52vw; } .end h2 { font-size: 34vw; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } .line { height: auto; } .line__pin { position: static; height: auto; } .wire { display: none; } .rail { position: static; flex-wrap: wrap; padding: 30px var(--pad); transform: none !important; } .print { --dev: 1; width: min(100%, 520px); } }