/* thefutureisnow.to — one screen, no build step. Read CLAUDE.md before changing the stack; plain CSS is a decision, not an oversight. */ @font-face { font-family: "Archivo Black"; src: url("/assets/fonts/archivo-black-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* The mesh, sampled off the source artwork and then darkened as a set. Every gradient below reads its colour from here, so the page retunes from these eight values. The darkening is what makes the white type legible — it replaces the scrim layers this page used to carry. Each colour was converted to linear light, scaled by 0.201, and converted back: one factor for all of them, so their tonal relationships survive intact. That puts the lightest (--cream) at relative luminance 0.166 — 4.87:1 against white — and every other colour is darker still. Gradient compositing is a weighted average, so no pixel of the mesh can be lighter than its lightest input, and the whole field clears WCAG AA by construction. Editing these: keep every colour at or below 0.166 relative luminance and the guarantee holds. Lighten any one of them and it does not. */ --coral: 116 69 56; --peach: 118 89 71; --cream: 121 113 88; --olive: 88 92 51; --sky: 87 100 104; --sage: 76 94 68; --moss: 64 84 51; --base: 166 164 144; --title: "Archivo Black", ui-sans-serif, system-ui, sans-serif; --body: "Outfit", ui-sans-serif, system-ui, sans-serif; --gutter: clamp(1.5rem, 5vw, 5.5rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; font-family: var(--body); color: #fff; background-color: rgb(var(--base)); overflow-x: hidden; } /* ---------------------------------------------------------------- layout */ /* The mesh lives here, not on , and the reason is load-bearing: .page sets `z-index` and so opens a stacking context. `mix-blend-mode` on the ring can only blend against a backdrop inside that same context — with the gradient on the ring had nothing to blend with and rendered as raw rainbow. Moving the paint inside the context is what makes multiply work. Every stop fades to its own colour at zero alpha rather than to `transparent`, which would interpolate through transparent *black* and leave grey haloes across the mesh. */ .page { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; background-color: rgb(var(--base)); background-image: radial-gradient(78% 68% at 93% 2%, rgb(var(--coral)) 0%, rgb(var(--coral) / 0) 72%), radial-gradient(52% 55% at 100% 34%, rgb(var(--peach)) 0%, rgb(var(--peach) / 0) 70%), radial-gradient(62% 52% at 57% 0%, rgb(var(--cream)) 0%, rgb(var(--cream) / 0) 70%), radial-gradient(58% 55% at 8% 2%, rgb(var(--olive)) 0%, rgb(var(--olive) / 0) 72%), radial-gradient(62% 62% at 97% 76%, rgb(var(--sky)) 0%, rgb(var(--sky) / 0) 70%), radial-gradient(70% 58% at 44% 100%, rgb(var(--sage)) 0%, rgb(var(--sage) / 0) 72%), radial-gradient(58% 62% at 2% 92%, rgb(var(--moss)) 0%, rgb(var(--moss) / 0) 70%); background-attachment: fixed; } .stage { flex: 1; display: grid; gap: clamp(2rem, 5vw, 3rem); align-content: center; padding: clamp(2.5rem, 7vh, 5rem) var(--gutter) clamp(1.5rem, 4vh, 2.5rem); } @media (min-width: 62rem) { .stage { grid-template-columns: 40% 1fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(2rem, 6vh, 4rem); } } /* -------------------------------------------------------------- wordmark */ .wordmark { position: relative; display: flex; align-items: center; min-width: 0; } .ring { position: absolute; z-index: 0; left: 50%; top: 50%; width: clamp(26rem, 66vw, 62rem); max-width: none; height: auto; translate: -58% -50%; /* Multiply is doing double duty. It blends the ring into the mesh, and it is also what keeps the wordmark legible where the two overlap: a multiplied result is never lighter than its backdrop, per channel, so the ring can only ever darken the mesh beneath it. The mesh is capped at 0.166 luminance, so the ring is too — no matter how bright the artwork's own pixels are. That is why no scrim is needed behind the wordmark, and why the brightness knock-down this rule used to carry is gone. */ mix-blend-mode: multiply; /* Pushed up rather than down: multiply against a dark mesh is heavy, and the ring is the page's main graphical element. Values above 1 clamp at white and so cannot break the bound above. */ filter: saturate(1.08) brightness(1.15); pointer-events: none; } @media (min-width: 62rem) { .ring { left: 0; translate: -34% -50%; width: clamp(38rem, 63vw, 70rem); } } /* Stacked layout. Here the ring is sized off the wordmark block rather than off the viewport, and that is the whole fix: `height: 100%` makes its diameter equal to the block's, so it cannot reach the items below no matter how the type reflows. Sizing it in `vw` did — at 390px wide the old `clamp(26rem, 66vw, 62rem)` resolved to its 416px floor inside a ~196px block, and the ~110px of overhang landed on the first item. The min-height is what gives it somewhere to be: without it the block collapses to the height of the type and the ring shrinks with it. */ @media (max-width: 61.99rem) { .wordmark { min-height: min(52vh, 25rem); } .ring { left: 0; width: auto; height: 100%; translate: -34% -50%; } } .wordmark h1 { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; font-family: var(--title); font-weight: 400; font-size: clamp(3.2rem, 12.5vw, 8.5rem); line-height: 0.84; letter-spacing: -0.015em; text-transform: uppercase; } @media (min-width: 62rem) { .wordmark h1 { font-size: clamp(3.6rem, 6.6vw, 7.5rem); } } /* "The" is set small in the source artwork — it is a lead-in, not a line of the wordmark proper. */ .wordmark h1 .the { font-size: 0.42em; line-height: 1.1; margin-bottom: 0.12em; } /* ----------------------------------------------------------------- items */ .items { display: flex; flex-direction: column; gap: clamp(1.4rem, 3.2vh, 2.6rem); min-width: 0; } .item { display: block; color: inherit; text-decoration: none; padding: clamp(0.5rem, 1.4vh, 0.9rem) clamp(0.75rem, 1.6vw, 1.1rem); margin-inline: calc(-1 * clamp(0.75rem, 1.6vw, 1.1rem)); border-radius: 0.9rem; transition: transform 0.22s ease, background-color 0.22s ease; } .item:hover { background-color: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .item:focus-visible { outline: 2px solid #fff; outline-offset: 3px; background-color: rgba(255, 255, 255, 0.12); } .item > * { display: block; } .item-title { font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.05; letter-spacing: -0.015em; } .item-desc { margin-top: 0.4em; font-weight: 600; font-size: clamp(0.95rem, 1.45vw, 1.2rem); line-height: 1.3; } .item-meta { margin-top: 0.25em; font-weight: 600; font-size: clamp(0.8rem, 1.05vw, 0.95rem); line-height: 1.35; /* Deliberately not dimmed with `opacity`. At 0.92 this line measured 4.41:1 against the lightest mesh colour — under the 4.5:1 floor. Size and weight carry the hierarchy instead, and the type stays pure white. */ } /* ---------------------------------------------------------------- footer */ .footer { display: flex; flex-wrap: wrap; gap: 0.5em; padding: clamp(1rem, 3vh, 1.75rem) var(--gutter); font-size: 0.85rem; font-weight: 500; } .footer a { color: inherit; text-underline-offset: 0.25em; } .footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 0.2rem; } /* ------------------------------------------------------------ decoration */ .squiggle { position: absolute; z-index: 0; top: clamp(-3rem, -4vh, -1rem); right: -6vw; width: min(52vw, 46rem); height: auto; pointer-events: none; } @media (max-width: 61.99rem) { .squiggle { opacity: 0.5; width: min(80vw, 26rem); } } /* Film grain over everything, keyed to the artwork's texture. Generated in an SVG filter so it costs one data URI instead of a raster tile. */ .grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.42; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }