/* ============================================================ elliot.la — tuned to A440 Two states, set on : silent paper. ash ground, steel ink. nothing moves. resonant struck. steel ground, salt figures, brass heat. ============================================================ */ :root { --ash: #e8e9e4; --steel: #0e141b; --salt: #f2f1ea; --brass: #c8963e; --ground: var(--ash); --ink: var(--steel); --muted: #5d6672; --rule: #c3c5bd; --accent: #8a6a26; --shift: 900ms cubic-bezier(.22,.61,.36,1); --display: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif; --body: "Archivo", "Helvetica Neue", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --measure: 34rem; --gutter: clamp(1.5rem, 5vw, 4.5rem); } html[data-state="resonant"] { --ground: var(--steel); --ink: var(--salt); --muted: #8896a4; --rule: #2a3542; --accent: var(--brass); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.65; transition: background var(--shift), color var(--shift); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- the plate ------------------------------------------------ */ #field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity var(--shift); } html[data-state="resonant"] #field { opacity: 1; } /* paper tooth in the silent state; sand tooth in the resonant one */ .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); transition: opacity var(--shift); } html[data-state="resonant"] .grain { opacity: .22; mix-blend-mode: overlay; } /* --- shared type ---------------------------------------------- */ .eyebrow, .harmonic__mark, .fork__label, .readout, .partial, footer p { font-family: var(--mono); font-size: .6875rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; } h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.65rem, 1.05rem + 2.4vw, 2.6rem); line-height: 1.14; letter-spacing: -.032em; margin: 0 0 1.1rem; } p { margin: 0 0 1.1rem; } a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: .1em; transition: color 200ms, border-color 200ms; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* --- hero ------------------------------------------------------ */ main { position: relative; } .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem var(--gutter) 3rem; } .eyebrow { color: var(--muted); margin: 0 0 clamp(1.5rem, 4vh, 2.75rem); transition: color var(--shift); } .wordmark { font-family: var(--display); font-weight: 600; font-size: clamp(2.9rem, 13.5vw, 9.5rem); line-height: .95; letter-spacing: -.045em; margin: 0; } .wordmark__note { color: var(--accent); transition: color var(--shift); } .lede { font-size: clamp(1rem, .92rem + .35vw, 1.15rem); line-height: 1.55; color: var(--muted); margin: clamp(1.1rem, 3vh, 1.65rem) 0 clamp(1.5rem, 4vh, 2.5rem); transition: color var(--shift); } /* --- the fork -------------------------------------------------- */ .fork { appearance: none; background: none; border: 0; padding: .5rem 1.5rem 0; cursor: pointer; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 1.35rem; } .fork__svg { display: block; position: relative; } /* The halo is a gradient rather than a drop-shadow on purpose: a filter promotes the SVG to its own composited layer, which snapshots the body background mid-transition and leaves a stale rectangle behind the fork. --amp is written per frame from the analyser, so this breathes with the note. */ .fork__svg::before { content: ""; position: absolute; left: 50%; top: 52%; width: 340%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(200, 150, 62, .34), rgba(200, 150, 62, 0) 72%); opacity: calc(var(--amp, 0) * 1.1); pointer-events: none; z-index: 0; } .fork svg { display: block; position: relative; z-index: 1; width: auto; height: max(118px, min(24vh, 44vw, 214px)); fill: currentColor; } /* Tines flex on the strike; --vib is written per frame by JS. They pivot from the base rather than sliding sideways: a cantilever bends that way, and it leaves no seam where the tine meets the yoke. */ .fork__tine { transform-box: fill-box; transform-origin: 50% 100%; } .fork__tine--l { transform: rotate(calc(var(--vib, 0) * -1.3deg)); } .fork__tine--r { transform: rotate(calc(var(--vib, 0) * 1.3deg)); } .fork__label { color: var(--muted); transition: color 200ms; } .fork:hover .fork__label, .fork:focus-visible .fork__label { color: var(--accent); } /* --- readout --------------------------------------------------- */ .readout { display: flex; align-items: center; gap: .85rem; margin-top: clamp(1.35rem, 3.5vh, 2.15rem); color: var(--muted); opacity: 0; transition: opacity 600ms, color var(--shift); } html[data-state="resonant"] .readout { opacity: 1; } .readout__hz { font-variant-numeric: tabular-nums; } .readout__meter { display: block; width: clamp(84px, 22vw, 152px); height: 2px; background: var(--rule); transition: background var(--shift); } .readout__meter i { display: block; height: 100%; width: 0%; background: var(--accent); transition: background var(--shift); } /* --- harmonic sections ----------------------------------------- */ .harmonic { max-width: var(--measure); margin-inline: auto; padding: clamp(4.5rem, 13vh, 8.5rem) var(--gutter); border-top: 1px solid var(--rule); transition: border-color var(--shift); } .harmonic__mark { display: flex; align-items: baseline; gap: .8em; color: var(--muted); margin: 0 0 1.75rem; transition: color var(--shift); } .harmonic__num { /* Plex Mono's capital I carries crossbars, so II reads as a numeral rather than a pause button the way it does in a grotesque. */ font-family: var(--mono); font-size: 1rem; font-weight: 500; letter-spacing: .06em; text-transform: none; color: var(--accent); transition: color var(--shift); } .links { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } /* --- partial buttons ------------------------------------------- */ .partial { appearance: none; margin-top: 2.25rem; padding: .6rem 1.05rem; background: none; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .6em; font-variant-numeric: tabular-nums; transition: color 200ms, border-color 200ms, background var(--shift); } .partial:hover { color: var(--accent); border-color: var(--accent); } .partial__tri { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; } /* --- reveal ---------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.22,.61,.36,1); } [data-reveal].is-in { opacity: 1; transform: none; } /* --- footer ---------------------------------------------------- */ footer { max-width: var(--measure); margin-inline: auto; padding: 0 var(--gutter) clamp(3rem, 9vh, 5rem); color: var(--muted); transition: color var(--shift); } footer p { margin: 0; } /* --- quality floor --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; } .fork__tine { transform: none !important; } } /* --- retune ---------------------------------------------------- A dial, not a form control: hairline track, brass thumb, and the historical pitches marked where they actually fall on the scale. */ .retune { margin-top: 2.5rem; } .retune__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.9rem; } .retune__bar .partial { margin-top: 0; } .retune__read { font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--accent); margin: 0; transition: color var(--shift); } .retune__slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; background: none; cursor: ew-resize; } .retune__slider::-webkit-slider-runnable-track { height: 1px; background: var(--rule); } .retune__slider::-moz-range-track { height: 1px; background: var(--rule); } .retune__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 3px; height: 22px; margin-top: -10.5px; border: 0; border-radius: 0; background: var(--accent); } .retune__slider::-moz-range-thumb { width: 3px; height: 22px; border: 0; border-radius: 0; background: var(--accent); } .retune__slider:focus-visible { outline: none; } .retune__slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--accent); } .retune__slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--accent); } .retune__ticks { position: relative; height: 3.6em; margin: .3rem 0 0; padding: 0; list-style: none; } /* The li is a zero-width anchor at the exact pitch. The hairline mark sits on that point and never moves; the label is centred on it but may be nudged inward at the ends so it cannot overflow the measure. */ .retune__ticks li { position: absolute; left: var(--at); top: 0; width: 0; } .retune__ticks li::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: .42rem; background: var(--rule); transform: translateX(-50%); transition: background var(--shift); } .retune__ticks button { appearance: none; background: none; border: 0; transform: translateX(-50%); margin-top: .78rem; padding: .2rem .4rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .3em; font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; color: var(--muted); transition: color 200ms; } .retune__ticks button span { font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; opacity: .72; white-space: nowrap; } .retune__ticks button:hover { color: var(--accent); } .retune__note { margin: 1.1rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--muted); transition: color var(--shift); }