/* ENVOY — light.css the three-up claims between the tour and the sale One part of a stylesheet split across files. The load order in index.html is part of the stylesheet — see css/base.css for the map. */ /* ----------------------------------------------------------------- light */ /* The three-up under the tour. Black, so the fixed plate stays hidden all the way to the order panel, and it paints it rather than inheriting it for the same reason every other section does: is what is behind everything, and a transparent section here would let the fire through half a page early. Padded rather than height-locked. The tour above is measured in whole screens because it is stepped through one panel at a time; this is read in one pass, so it should be exactly as tall as its content and no taller. The exception is the top padding, which is not really padding — it is the black run-up out of the tour, doing the job the .gap divs do either side of the order panel. It is here rather than in a box of its own because the tour's last panel is a *sticky* stage: an element between the two sections would be scrolled over by the board on its way out, where padding on this section is simply where the section starts. About a quarter of a screen: far enough that the board is properly gone before the heading arrives, short enough that the reader is not scrolling through empty black waiting for it. It was 42vh, which read as a stall rather than as a beat. */ .light { position: relative; z-index: 1; background: #000; /* A narrower gutter than the sections above and below, which is deliberate: this is the one section with a drawn border, and the border is what wants to be near the screen edge. The type inside is held off it by the frame's own padding instead, which is a lot more room than a gutter this size would have given it. */ padding: clamp(120px, 26vh, 300px) clamp(12px, 1.8vw, 36px) clamp(88px, 15vh, 170px); scroll-margin-top: calc(var(--nav-h) + 12px); } /* The frame's box, and the one block at the foot of the page that does NOT share the order panel's 1560px measure. It runs wider, out to where the section's gutter leaves it — the border is the thing that wants to be near the screen edge — and then holds its content well inside itself. So the type here is on a narrower measure than the order block's even though the box around it is wider. How much padding is not taste. The corner art is dense along the two edges and empty toward the middle — it runs the full width of its square for the top ~47% of it and reaches only ~44% across below that — so the vertical padding has to clear about half a corner and the horizontal about four tenths of one. At .lf-c's largest, 300px, that is 141 and 132, and the ceilings below are 200 and 190. Move one of the three and check the other two: the floors are the tight end, not the ceilings. position: relative is load-bearing. .light-frame is absolutely positioned against this box, so without it the ornament would hang off the section. */ .light-inner { position: relative; width: 100%; max-width: 1860px; margin: 0 auto; padding: clamp(84px, 11vw, 200px) clamp(46px, 10vw, 190px); } /* Centred, where the tour's and the order's heads are both hard left. Those two sit beside something — a board that travels, a form — and hang off the left edge because of it. This one has nothing beside it and three equal columns under it, so the axis is the middle. */ .light-head { max-width: min(100%, 1000px); margin: 0 auto clamp(40px, 7vh, 86px); text-align: center; } /* Cormorant Garamond, which is the lede's face under it and the order block's subheads — so the heading and the copy it introduces are now one family, where this used to be the site's only Bodoni Moda SC heading. Uppercase from the stylesheet: Cormorant has no small caps, so without it the lockup would come out as ordinary title case rather than the one-height line the rest of the section is built under. The tracking is what keeps a caps setting at this size from closing up. */ .light-title { margin: 0 0 clamp(14px, 2.2vh, 26px); font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif; font-size: clamp(34px, 5.4vw, 86px); font-weight: 600; line-height: 1.06; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); } .light-hot { color: var(--red); } .light-lede { max-width: 52ch; margin: 0 auto; font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif; font-size: clamp(16px, 1.4vw, 23px); line-height: 1.5; color: rgba(243, 228, 226, 0.82); } /* ---- the folk-art frame around the whole section ---- */ /* An overlay, not a border: it sits on top of .light-inner's own padding and takes no space, so the heading and the three cards are laid out as if the ornament were not there. pointer-events off because it covers all of them — text selection has to go through it. */ .light-frame { position: absolute; inset: 0; pointer-events: none; } /* One square per corner, sized as a share of the frame rather than off the viewport. That distinction is the whole reason this rule is not a fixed size: the heading box stops growing at its max-width, so a vw-based corner went on growing after the frame had stopped and shrank to a bug on a phone, where the box is nearly the full screen. A percentage is measured against the frame itself, so the ornament is the same fraction of the border at every width. The floor is where the flower stops being readable. Height comes from aspect-ratio rather than repeating the clamp, so the two cannot be edited apart. overflow: visible is not decoration — the stem's terminal curl runs a couple of units past x=140, and the default would clip it flat. The three mirrors are transforms rather than three more drawings, which is the whole reason the art is a single corner: there is one set of paths to edit and the frame stays symmetrical by construction. */ .lf-c { position: absolute; width: clamp(84px, 17%, 300px); aspect-ratio: 1; overflow: visible; } .lf-c--tl { top: 0; left: 0; } .lf-c--tr { top: 0; right: 0; transform: scaleX(-1); } .lf-c--bl { bottom: 0; left: 0; transform: scaleY(-1); } .lf-c--br { bottom: 0; right: 0; transform: scale(-1); } /* Four weights, and every one of them takes --red from here rather than from the markup — the same arrangement the .light-icon drawings below are on, and the reason both are inline SVG at all. */ .lf-solid { fill: var(--red); } .lf-line { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linejoin: round; } .lf-vein { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; } .lf-stem { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; } .lf-ring { fill: none; stroke: var(--red); stroke-width: 2.2; } /* The ornament struck across the middle of each edge. The reference leaves the edges open between the corners and puts one of these in the gap, which is what keeps the frame from reading as a box — it is four corners and four marks, not an outline. */ .lf-edge { position: absolute; overflow: visible; } /* The horizontal pair takes a percentage of the frame, so both stay the same share of the edge they are on as the heading rewraps. height: auto rather than a calc off that percentage — a percentage in `height` would resolve against the frame's HEIGHT, not its width, and the band would go to a different shape on each axis. An SVG with a viewBox sizes its own height from the aspect, which is the one place that is safe. */ .lf-edge--t, .lf-edge--b { left: 50%; width: clamp(170px, 26%, 520px); height: auto; transform: translateX(-50%); } .lf-edge--t { top: 10px; } /* Mirrored, so the band's terminal curls turn the same way relative to the frame at the foot as they do at the head. */ .lf-edge--b { bottom: 10px; transform: translateX(-50%) scaleY(-1); } /* The vertical pair is the same band turned a quarter turn, and it cannot use a percentage at all — its length runs down an edge whose height nothing on this axis measures. So it is sized off the viewport, and the height is a real calc off that length, which is what lets the offsets below know how thick the band is once it has been turned. Rotating about the centre leaves half the band's thickness hanging outside the frame, and --band-h / 2 is exactly that overhang: the margins push each one back in by its own half-thickness plus the inset the corners use. */ .lf-edge--l, .lf-edge--r { --len: clamp(150px, 24vh, 420px); --band-h: calc(var(--len) / 7.3913); /* the band's own 340 : 46 */ top: 50%; width: var(--len); height: var(--band-h); } .lf-edge--r { left: 100%; margin-left: calc(-1 * (var(--band-h) / 2 + 10px)); transform: translate(-50%, -50%) rotate(90deg); } /* scaleY before the turn flips the band across its own long axis, which after the rotation is a mirror about the frame's vertical centreline — so the two sides are a pair rather than one shape rotated 180°. */ .lf-edge--l { left: 0; margin-left: calc(var(--band-h) / 2 + 10px); transform: translate(-50%, -50%) rotate(90deg) scaleY(-1); } /* minmax(0,…) rather than a bare 1fr: a grid track's default minimum is its content, and the monospace below does not hyphenate — one long word would otherwise push its column wider than its third and take the other two out of true. */ .light-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 38px); } /* A drawn red box on black, centred on its own axis. It was the order form's frame — hairline box, heavy rule down the left, ember lit from one corner, grain over the top — and every one of those was a treatment for a panel sitting *over* something. These sit on the section's flat black inside a drawn border, so the card is now the border: a full 3px red box, a large radius, and nothing else but a glow behind the icon. The grain went with it. It was there to keep a near-flat dark gradient from reading as plastic, and there is no gradient left to save. Everything centres — icon, rule, copy — because the border is symmetrical and a left-aligned column inside a symmetrical box reads as a mistake. The cards stretch to the tallest of the three, which is what `stretch` does by default and is worth leaving alone: the copy is three different lengths and a row of three different heights is the thing that reads as untidy. */ .light-card { position: relative; /* No overflow clip. The hover ring below is drawn just OUTSIDE the card's own border, so anything hiding overflow here would cut it away entirely. */ display: flex; flex-direction: column; align-items: center; text-align: center; /* The three things in the card are an icon, a rule and a sentence, and they are only a stack if there is real air between them — closed up they read as one clump floating in a large box. */ gap: clamp(22px, 3.4vh, 44px); padding: clamp(34px, 3.4vw, 56px) clamp(22px, 2.4vw, 38px) clamp(38px, 4vw, 62px); border: 3px solid var(--red); /* Held in a variable because the hover ring is a second box just outside this one and has to be drawn to the same curve, one ring-offset larger. */ --lc-r: clamp(18px, 2vw, 32px); border-radius: var(--lc-r); /* One glow behind the icon and then black. The ember is at 50% 0% rather than in a corner now that the icon it is lighting is centred. */ background: radial-gradient(56% 38% at 50% 0%, rgba(238, 30, 18, 0.22) 0%, rgba(200, 16, 12, 0.12) 38%, rgba(90, 4, 6, 0.05) 66%, rgba(0, 0, 0, 0) 100%), #040001; /* The way OUT of hover, undelayed, and the hover rule's own transition is the way in. Border-color is no longer in it — the red box is the card at rest and on hover both, and the whole of the change is white light. */ transition: box-shadow 420ms ease; } /* ---- the hover ring ---- One white line just outside the card's red border, lit from the top of the box and drawn round it clockwise until it closes at the top again — then the whole card blooms and holds. Off the card, the line and the bloom go out together in one fade rather than un-drawing the way they came. The sweep is a conic-gradient mask whose angle is the animated thing, which is why --lc-sweep is registered: a custom property is a token to the parser and interpolates in discrete steps unless it is typed, and an angle that jumps is a ring that appears in chunks. Note the resting value is a FULL turn, not zero. That is what makes the exit read as a fade rather than as a rewind: dropping :hover removes the keyframe animation, the property falls back to this, and the ring is still whole while its opacity runs down. It inherits, and the card declares it as well as the registration doing so, which is belt and braces on purpose: in a browser that does not register the property the declaration is what --lc-sweep still resolves to, so the mask stays valid and the hover degrades to the whole ring crossfading in. */ @property --lc-sweep { syntax: ""; inherits: true; initial-value: 360deg; } .light-card { --lc-sweep: 360deg; } .light-card::before { content: ""; position: absolute; /* Four out from the border box, on the same curve plus the same four, so the ring is concentric with the card's corners rather than a rounded rectangle of its own guess sitting near them. */ inset: -4px; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: calc(var(--lc-r) + 4px); /* Inset only. `mask` clips to the border box, so an outward shadow here would be cut off at the ring itself and never seen — the light thrown out past the card is the card's own box-shadow in the hover rule. */ box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.20); pointer-events: none; opacity: 0; /* The trailing 8deg is the head of the sweep: a hard stop draws a line with a cut end, which reads as a wipe. This is what makes it read as light running round the box. */ -webkit-mask: conic-gradient(#000 0 var(--lc-sweep), rgba(0, 0, 0, 0) calc(var(--lc-sweep) + 8deg), rgba(0, 0, 0, 0) 360deg); mask: conic-gradient(#000 0 var(--lc-sweep), rgba(0, 0, 0, 0) calc(var(--lc-sweep) + 8deg), rgba(0, 0, 0, 0) 360deg); /* The exit. Entry overrides this in the hover rule — it has to arrive at the top of the box almost instantly, since the sweep is the animation and a slow fade-in would have it starting as a smudge. */ transition: opacity 420ms ease; } /* hover: hover, so a tap on a phone does not leave a card lit with no way to turn it off */ @media (hover: hover) { .light-card:hover { box-shadow: 0 0 46px rgba(255, 255, 255, 0.22), inset 0 0 70px rgba(255, 255, 255, 0.07); /* Delayed, and it lands about where the sweep closes: the line goes round an unlit box and the bloom is what it leaves behind. Coming out it uses the undelayed transition on the card itself, so bloom and ring go at once. */ transition: box-shadow 520ms ease 200ms; } .light-card:hover::before { opacity: 1; transition: opacity 120ms ease; animation: lc-sweep 620ms cubic-bezier(0.22, 0.61, 0.36, 1); } } /* No `forwards`: the resting value is already a full turn, so the ring simply stays whole when the animation ends. */ @keyframes lc-sweep { from { --lc-sweep: 0deg; } to { --lc-sweep: 360deg; } } /* above the portal, which is two siblings painted under them */ .light-card > * { position: relative; z-index: 1; } .light-card p { margin: 0; font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif; font-style: italic; font-weight: 600; font-size: clamp(17px, 1.5vw, 26px); line-height: 1.34; /* Full white, not the --ink off-white the rest of the page is set in: this is the one block of copy inside a red box on flat black, and the warm ink goes muddy against it. */ color: #fff; } /* ---- icons ---- */ /* A halo rather than a plate. The bordered plate the countdown uses was a second box inside the card's own box, and against a 3px red border that reads as two frames arguing; a soft square of light does the same job of setting the drawing apart without drawing another edge. The drawings are 64-unit squares and sit at 62% of it, so the optical weight of the three matches even though a bluetooth rune, a laptop and a key bed fill very different amounts of their box. */ .light-icon { display: grid; place-items: center; width: clamp(66px, 6.4vw, 104px); aspect-ratio: 1; border-radius: 10px; background: radial-gradient(58% 58% at 50% 48%, rgba(239, 32, 21, 0.34) 0%, rgba(239, 32, 21, 0.17) 44%, rgba(239, 32, 21, 0.05) 70%, rgba(239, 32, 21, 0) 100%); } .light-icon svg { display: block; width: 62%; height: auto; } /* Three weights of one red, and black. The heavy stroke is the object, the light one is everything that describes it — bezels, dividers, the carrier arcs — and --red-bright is spent once per drawing on the single thing that is meant to be *on*. */ .light-icon .li-key { stroke: var(--red); stroke-width: 2.1; } .light-icon .li-dim { stroke: rgba(239, 32, 21, 0.52); stroke-width: 1.6; } .light-icon .li-hot { stroke: var(--red-bright); stroke-width: 2.6; } .light-icon .li-node { fill: var(--red-bright); } .light-icon .li-lit { fill: rgba(239, 32, 21, 0.3); } .light-icon .li-black { fill: #080001; stroke: rgba(239, 32, 21, 0.7); stroke-width: 1.5; } /* The divider between the icon and the copy, and the only place on the site that is not red, black, ink or the footer's gold. It runs plum → ember → bone left to right: the card is now a red box on black with white type in it, and this is the one warm gradient that keeps that from being a two-colour diagram. Wide and blunt-ended rather than the hairline that faded out to the right. That one was struck from the card's left border and had somewhere to come from; this one is centred under a centred icon, so it has two ends and both of them have to be deliberate. */ .light-rule { display: block; width: clamp(120px, 62%, 280px); height: 6px; border-radius: 3px; /* The stops are placed, not evenly spread. An even ramp spends most of its length in the muddy middle where plum and ember meet and reads as one brown smear at this height; holding the plum through the first quarter and the bone through the last is what makes it read as three colours. */ background: linear-gradient(90deg, #35184a 0%, #4a2050 24%, #93413e 50%, #e0904f 72%, #f7e9d0 100%); }