Air-cooled
Outside air below 10 °C for 300 days a year. No chillers to power.
Chillers0
Press M to toggle
Tokens, type, components and motion hooks exactly as they ship in the shared CSS. Change a class once and every page follows.
Black and greys carry the page; violet only appears as light. They are CSS variables with the same names in src/styles/template.css.
A grotesk for everything you read, a mono for everything you scan. Headings sit at weight 400 with tight tracking; sizes are fluid clamp() values, measured live below.
Inter Tight. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 € $ % −
Geist Mono. ABCDEFGHIJKLM 0123456789 $1.62 −4 °C
Arctic air, hydro power.
Lock a rate for three years.
Cooled by the climate.
Racked and burned in within 11 days.
Narvik sits at 68.4° N. For about 8,400 hours a year, outside air is colder than the 24 °C we feed the cold aisle.
Power, cooling, fabric and checkpoint storage are in the rate. Longer terms lower it.
Engineers reply within one working day.
$1.46 · 99.995%
Wrap a short gray ending in <span class="tone nw"> so headings never break on an orphan word. Headings already use text-wrap: balance.
The pill is the only button. It draws its own square and arrow, so the label is plain text. Hover the specimens to see the fill sweep.
Primary. 38px high, 2px radius, mono 11px. On hover a black fill sweeps in from the left in 0.6s and the arrow cell shifts.
Secondary. Hairline outline at 30% white; on hover it fills white and the text turns black.
Menu toggle. The label rolls from Menu to Close and the bars cross when aria-expanded is true. Click to try.
Never type an arrow into a label and never make round icon buttons; use a ghost pill instead.
Fields are underlined, not boxed. A violet line draws in on focus. Choice chips are plain radio inputs styled through their label.
Something went wrong. Please try again, or email hello@example.com.
Checked chip: lilac outline, 10% violet fill and a glowing square. Focus a field to see the underline draw.
Tags mark a category or a state. Chips sit on photos and the shader, so they carry their own blurred backing.
24px, hairline outline, gray mono text. Use with .mono.
Lilac variant for one highlighted state per view.
Icon + label on a blurred dark backing. Add .lit to light the icon on hover.
Eight icons drawn on a 3px dot grid. Hover a cell: the dots light up in sequence and turn lilac.
Each dot carries --i, which staggers its transition by 12ms. Put .lit on the hover parent, not on the SVG.
The number is a CSS counter on body, so labels count 01, 02, 03 down the page by themselves. Title first, subtitle second.
Outside air below 10 °C for 300 days a year. No chillers to power.
Fixed-price hydro from the valleys behind Narvik.
Non-blocking InfiniBand on every pod, shared or dedicated.
“In Narvik our runs just keep going. Fewer restarts, steadier throughput.”
The frame lines draw in sequence on scroll. Pair with .vph for the portrait, as on Home 04.
Power, cooling, rack space, InfiniBand fabric, checkpoint storage and 24/7 hands on site.
Yes. The lower rate applies from the next billing month.
No setup fee on Pod or Dedicated. Sovereign fit-out is agreed up front.
One item open at a time. The shared script toggles .on and aria-expanded; height animates with a grid-row trick, no JS measuring.
Two tokens set the rhythm: the side gutter and the section padding. Layouts sit on a 12-column grid with a fixed 24px gap.
12 columns, side labels, sticky asides.
Spans collapse to full width; meta rows go to two columns.
Single column, 16px gutter, tested at 375px.
One live SVG light draws every violet surface: soft silk folds seen through horizontal flutes, animated with GSAP. Each shader div takes its settings from a data-shader JSON attribute.
Where the light sits. x from the left, y from the bottom. It drifts slowly around this point.
How much of the block the light covers. Around .5 for cards, 1 for wide bands.
Height of one horizontal flute, in CSS pixels.
Violet of the light. Change it to recolour one block; every page uses the default.
Start position, so two blocks never fold the same way.
Overall strength of the light.
Strength of the small light that follows a fine pointer. 0 turns it off.
Turns the live light on. Without it the block keeps only its data-still image.
With a fine pointer a small light follows the cursor. The silk pauses off screen, holds one still frame with reduced motion, and keeps the rendered still on .glass when JavaScript is off.
Add a class or attribute and the shared script animates it with GSAP and ScrollTrigger. Without GSAP, with reduced motion or with ?still in the URL, everything simply shows.
Hero headline. Split into letters that fade in from a 16px blur, 20ms apart.
Same letter blur-in for section headlines, from a 14px blur.
Hero items rise 16px and fade in, 80ms apart, in DOM order.
Reveal: the block rises 28px and fades in over 1.1s.
Each direct child reveals in turn, 70ms apart. Use on grids and lists.
An image frame opens from an inset clip to full size as it travels up the screen.
Counts from 0 to the written number in 1.6s, keeping prefix, suffix, commas and decimals: $1.46, −34%, 2,048.
.lab labels rise in, .qa items stagger, .vq frames draw their lines, .vph portraits unclip with a slow parallax.
Variables, fonts, shader, motion and CMS, explained against the real code.
