/* * ericville26 — component primitives * ================================== * Copied from design_handoff_ericville26/design/v26.css with exact values * preserved (13.5px, -.028em, .42s, 14%/62%, 46% — none rounded). * * Every rule is scoped under `.ev26`. * ---------------------------------- * The prototype's class names are generic and six of them already mean * something else in this theme: `.tag` appears 89 times on the Lab page, * `.inverse` is a wp-block-group modifier, and the bare `nav` / `nav a` rules * — written for the new header, which does not exist until Stage 3 — were * collapsing the current header's nav tiles from 439px to 101px. * * So a component only takes effect inside an element carrying `.ev26`. As each * stage rebuilds a surface it opts that subtree in; everything else keeps * rendering as ericville25 until its turn. Stage 11 removes the scope and this * file merges back into v26.css. * * `:where(.ev26)` contributes zero specificity, so these behave exactly as the * unscoped prototype rules do once a subtree opts in. */ /* Real specificity, not :where(). basetags.css underlines every at (0,0,1); a zero-specificity scope loses to it and every button, card and section row renders underlined. `.ev26 a` is (0,1,1) and clears it. */ .ev26 a{color:inherit;text-decoration:none} :where(.ev26) .wrap{max-width:var(--col);margin:0 auto;padding:0 var(--gut)} /* #1500 — Eric: Home/Lab cards read narrow and misaligned on phone; UX did * not have the problem. Cause: `.wrap` (used by Home, Lab, Art, Shop, footer, * and every single-post template) never shrank its gutter below the desktop * 44px, while v26-ux.css's own container carries this exact 600px/22px * override for `.content.ev26.ux-landing`. 44px a side is ~23% of a 375px * viewport gone to padding before any content starts — that's the "too * narrow" cards. Mirroring UX's number here fixes every `.wrap` page at once * rather than patching Home and Lab separately, and keeps the two gutter * systems the site actually has (`.wrap` and UX's own) in visual agreement. */ @media (max-width:600px){ :where(.ev26) .wrap{padding-left:22px;padding-right:22px} } /* ── header: warm glass ─────────────────────────────── */ /* at rest: full-bleed, barely there. scrolled: a decisive floating pill. */ /* The fill is --frost, not --bg, and it is mixed in srgb like every other surface in the elevation system (--paper / --sunken). Mixing the GROUND into the ground is what made this a flat band; --frost is a material of its own. See the header-glass note in v26.css. */ /* #1464: .bar itself is now BARE at rest — no fill, no filter, no shadow, no edge. It is a positioning context and a layout box and nothing else; the material lives in ::before / ::after (the band) and comes back onto .bar only when the header shrinks into a pill. Note there is deliberately no `backdrop-filter` here any more: declaring it at blur(0) would still promote the bar to a backdrop root on every page at every scroll position, which is most of the cost #1432 measured. */ :where(.ev26) .bar{position:sticky;top:0;z-index:200;background:transparent;border-bottom:var(--hdr-line) solid color-mix(in oklab,var(--line) 70%,transparent);box-shadow:var(--hdr-shadow);border-radius:var(--hdr-radius);width:100%;margin:0 auto;transition:background .42s var(--ease),box-shadow .46s var(--spring),border-radius .46s var(--spring),width .46s var(--spring),max-width .46s var(--spring),margin .46s var(--spring),top .46s var(--spring)} /* backdrop-filter is deliberately NOT transitioned: animating a blur re-samples everything behind the bar every frame, which is the single most expensive thing a sticky header can do on scroll. It snaps between 14px and 26px instead; against the .42s move of everything else the change reads as part of the same gesture — and raising the RESTING radius from 5px narrows that snap from 4x to under 2x, so the one thing that cannot be animated is also the thing that now moves least. Per-frame cost was measured before the radius was raised: see the header-glass note in v26.css. */ /* z-index 200, not the prototype's 20: blocks/intro/style.css sets z-index:100 on the section banner, which painted straight over the sticky header on every non-home page. The chrome has to out-rank page content, so the bar sits above the highest z-index any block claims. */ /* The full-bleed bar carries no top-highlight line: its top edge IS the top of the window, so a specular line there is a line on the screen bezel, not on a pane. (The original rejection was also about the grain: the noise layer was a FIXED html::before painting over the chrome. #1421 moved it to body::after at z-index 9, and the bar is z-index 200 — the header is now above the grain, so that half of the objection is gone. The SHRUNK pill, which is a floating object with a real top edge in the middle of the page, does take a highlight; see the big move below.) */ /* ── the frost band (#1464) ───────────────────────────────────────────────── * AT REST THERE IS NO BAR. .bar paints no fill, runs no filter, casts no * shadow and draws no edge. What replaces it is a BAND that overhangs the * bar's own bottom edge by --hdr-fade and dies out inside that overhang. * * WHY IT CANNOT BE ONE LAYER ON .bar. Two hard constraints: * - it has to extend BELOW the element, so it cannot be .bar's own * background/filter, which are clipped to .bar's border box; * - mask-image on .bar itself would mask .bar's DESCENDANTS too, i.e. it * would fade out the wordmark and the nav row. Non-starter. * So the band is two absolutely-positioned pseudo-elements at z-index:-1. * Negative-z children of a stacking context paint ABOVE the element's own * background (paint step 3) and BELOW its in-flow content (steps 4-7), which * is exactly the slot a material needs: over the glass, under the type. * * WHY THE BLUR AND THE TINT CANNOT FADE SEPARATELY. The failure this project * has shipped and reverted four times (the hero wash, the footer band, the Lab * background, the paper-grain cutoff) is a fill that fades over an effect that * does not: the tint reaches zero, the blur is still at full radius, and the * eye reads the blur's hard cutoff as a line exactly where the fill said there * was none. The fix is structural rather than a matter of matching two * gradients by hand: the tint is `background` ON THE SAME ELEMENT whose * `backdrop-filter` is being masked, and one `mask-image` composites the whole * element — filtered backdrop and fill together. They cannot come apart, * because there is only one gradient and it is applied once, at composite. * * ONE FILTER, NOT TWO, AND CERTAINLY NOT EIGHT. taamannae.dev builds its * gradient blur from EIGHT stacked backdrop-filters (.5 -> 64px) with * overlapping masks, in a container at 130% of the navbar's height. That is * the right shape and the wrong bill for us. Measured here, /lab/ at 1440@2x * under a 6x CPU throttle, 179 rAF frames confined to the 0-38px at-rest * band: no filter 317ms of main-thread task time · #1432's single unmasked * bar filter 1054ms · this band with ONE masked filter 1305ms · with a second * masked filter layered on 2167ms. The second layer costs +46% and buys a * radius ramp that is only legible over detailed ground — and at rest the * ground on this site is ALWAYS a smooth section wash, because every template * puts a wash above its banner image. So the radius ramp was cut and the * SECOND layer (::before) keeps only the parts that are free: the material * and the grain, no filter, reaching further down than the blur does. The * blur's own box is also cropped to --hdr-blur-reach of the overhang rather * than all of it; that alone was 1559ms -> 1305ms, since a filter is billed * by area. Zero frames over 20ms in any configuration. * * THE ICE TOOTH IS IN THE MASK, NOT ON TOP OF IT. An overlaid grain does not * work here and cannot be made to: var(--grain) is an opaque JPEG, so as a * background-image it makes whatever carries it opaque, which is the one thing * a no-background header may not be; and as a mix-blend-mode layer it would * blend inside .bar's isolated stacking context (z-index:200) against pixels * that are transparent at rest, so multiply degrades to a flat grey veil. * Instead the noise goes into the MASK as a luminance layer, multiplied by the * fade and by a peak alpha: * alpha = fade x luminance(noise) x --hdr-ice * so the frost is DEPOSITED UNEVENLY — patchy, granular, thicker here than * there — and its MEAN is the tint. There is no separate fill to keep in step * with the grain, because the tint is nothing more than the average of the * grain. Measured on /art/: horizontal SD through the band 3.0-4.4 levels * against the page's own paper grain at 2.8-3.8 immediately below it, so the * texture crosses the header boundary without a step. * * rgb(0 0 0/x) in the masks is alpha, not colour — a stencil has no hue. */ :where(.ev26) .bar::before, :where(.ev26) .bar::after{content:"";position:absolute;left:0;right:0;top:0;bottom:calc(-1 * var(--hdr-fade));z-index:-1;pointer-events:none} /* far field: the frost TAIL. Deliberately carries NO backdrop-filter -- see the measured reason in the cost note above -- only the material, at a low alpha, through the same grain stencil, reaching further down than the blur does so the band's colour outlives its blur instead of the other way round. Zero filter cost; it is one more translucent rectangle. */ :where(.ev26) .bar::before{background-color:var(--frost-band); -webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--hdr-ice)) 0,rgb(0 0 0/var(--hdr-ice)) 34%,rgb(0 0 0/0) 100%); mask-image:linear-gradient(to bottom,rgb(0 0 0/.44) 0,rgb(0 0 0/.44) 34%,rgb(0 0 0/0) 100%), var(--grain), linear-gradient(rgb(0 0 0/var(--hdr-ice)),rgb(0 0 0/var(--hdr-ice))); mask-mode:alpha,luminance,alpha; mask-size:auto,var(--hdr-grain-size),auto; mask-repeat:no-repeat,repeat,no-repeat; mask-composite:intersect,intersect,add} /* near field: the deep step and the tint, laid down through the grain mask. The -webkit-mask-image line is the pre-15.4 Safari fallback and is deliberately the gradient ALONE — a smooth frost band, no tooth, rather than a broken one. Blink treats -webkit-mask-image as an alias, so the unprefixed block below overrides it there. */ :where(.ev26) .bar::after{bottom:calc(-1 * var(--hdr-fade) * var(--hdr-blur-reach));backdrop-filter:blur(var(--hdr-blur)) saturate(var(--hdr-band-sat));-webkit-backdrop-filter:blur(var(--hdr-blur)) saturate(var(--hdr-band-sat)); background-color:var(--frost-band); -webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--hdr-ice)) 0,rgb(0 0 0/var(--hdr-ice)) 26%,rgb(0 0 0/0) 100%); mask-image:linear-gradient(to bottom,rgb(0 0 0/1) 0,rgb(0 0 0/1) 24%,rgb(0 0 0/.38) 62%,rgb(0 0 0/0) 100%), var(--grain), linear-gradient(rgb(0 0 0/var(--hdr-ice)),rgb(0 0 0/var(--hdr-ice))); mask-mode:alpha,luminance,alpha; mask-size:auto,var(--hdr-grain-size),auto; mask-repeat:no-repeat,repeat,no-repeat; mask-composite:intersect,intersect,add} :where(.ev26) .bar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:var(--hdr-pad);padding-bottom:var(--hdr-pad);gap:24px;transition:padding .46s var(--spring)} :where(.ev26) .bar .logo{transition:width .42s var(--ease),opacity .28s var(--ease)} :where(.ev26) .bar .lockup{position:relative;display:flex;align-items:center;height:34px} :where(.ev26) .bar .lockup .mark{position:absolute;left:0;height:30px;width:auto;opacity:0;transform:scale(.9);transition:opacity .3s var(--ease),transform .42s var(--ease)} /* ── the big move ─────────────────────────────────── */ /* Thicker glass when it floats. Higher alpha and a wider radius because this state has real content moving under it: at 62% of a near-neutral the pill let dark photography smear through as warm grey (#BEBCB7 measured over a black image, next to #E7E5E0 over the ground — one pane reading as two). 72% of --frost attenuates the same image to a consistent pale ice. --hdr-shadow carries BOTH halves of "this is a lifted pane": the cast shadow (now token-derived from --shade, so it survives dark) and an inset specular line along the top edge. That highlight is a deliberate, scoped reversal of the "no highlight on the glass" spec rule -- argued in the .bar::before note above and in plan/design/1432-header-glass.md. The nav's own active pill has used exactly this device since #1418. */ /* #1480: the 72% above is the HISTORY of this value, not its current setting. Eric: "the scrolling version is now not glassy enough; make it more transparent and textured." The dial moved out to --hdr-pill-tint in v26.css (48% light / 56% dark) — it had been hard-coded here while the token note claimed it lived in :root, which is a trap the next tuner should not fall into twice. #1432's finding still stands and is why dark is cut less: at 62% of a NEAR-NEUTRAL the pane read as two panes. The fix for that was never the alpha alone, it was --frost's own hue; 48% of #F2FAFD stays one pane. */ /* #1483: every literal that used to sit in this rule — the 8px pad, the 26px blur, the 14px-a-side inset and the 1080px cap — is now a token in v26.css alongside --hdr-pill-tint, and every one of them moved. The pill is taller (50 -> 64px), wider (1080 -> the band minus 16px a side) and more transparent. The reasoning for each number, and the reason widening the glass does NOT move the type, is in the --hdr-pill-* note in v26.css. */ /* #1485 corrects the WIDTH half of #1483: --hdr-pill-max is now var(--col), so the pill's box IS .wrap's box and the inside gutter is exactly --gut at every viewport. #1483 capped the GLASS at 1440 while the CONTENT stayed at --col — two independently centred boxes, so the padding between them was an accident of the viewport (204px a side at 1512, 108 at 1280, and an outside gap of 36/80/144/240 above 1472 that matched nothing). Reasoning + measured ladder: the --hdr-pill-max note in v26.css. */ :where(.ev26) .bar.big.shrunk{--hdr-pad:var(--hdr-pill-pad);--hdr-tint:var(--hdr-pill-tint);--hdr-blur:var(--hdr-pill-blur);--hdr-sat:1.7;--hdr-radius:999px;--hdr-line:0px; --hdr-shadow:0 10px 28px -14px color-mix(in srgb,var(--shade) 34%,transparent), inset 0 1px 0 color-mix(in srgb,var(--lift) var(--hdr-hi),transparent); background:color-mix(in srgb,var(--frost) var(--hdr-tint),transparent); backdrop-filter:blur(var(--hdr-blur)) saturate(var(--hdr-sat));-webkit-backdrop-filter:blur(var(--hdr-blur)) saturate(var(--hdr-sat)); width:calc(100% - var(--hdr-pill-inset)*2);max-width:min(calc(100% - var(--hdr-pill-inset)*2),var(--hdr-pill-max));margin:0 auto;top:12px} /* #1464, the second half of Eric's note: "once scrolling, that heavy noise texture is MAINTAINED within the floating block". The band is gone — a gradiated overhang on an object that is now 1080px wide with a 999px radius and 12px of air above it would be a smear, not a material — so the frost goes back onto .bar, and ::after stops being a mask and becomes the tooth. THE PILL IS THE ONE PLACE A BLENDED GRAIN ACTUALLY WORKS. mix-blend-mode inside .bar's isolated stacking context needs opaque pixels beneath it to blend WITH; at rest there are none, but the pill paints a 72% frost fill plus its blurred backdrop into that same group first. So here the grain can be the page's own paper grain doing exactly what it does on body::after — multiply in light, overlay in dark — and the header stops being the one surface on the site with no texture on it. Same asset, same blend, ~3x the amplitude (.34 / .20 against the page's .12 / .06) and a 200px tile instead of 380px, because at pill scale a 380px tile shows one soft blotch rather than grain. border-radius:inherit clips it to the pill; no filter on this layer, so `opacity` is a safe amplitude control here. */ /* #1485. TWO CORRECTIONS TO THE PARAGRAPH ABOVE, both measured: (1) `opacity` here is NOT a pure amplitude control. This layer is bright (noise1.jpg through --hdr-grain-tone means ~225) and it blends over a pane that is only partly opaque; CSS composites a blend as (1-ab)*Cs + ab*B(), so at a 34% pane 66% of that pale layer lands as a FLAT VEIL. --hdr-grain was therefore half the pill's opacity, and lowering it made the pill darker over dark grounds and dropped /essay/ light to 3.19:1. #1485 moves that coverage into --hdr-pill-tint and cuts the noise 61%. The full argument is in the #1485 block above --hdr-pill-tint in v26.css — read it before touching --hdr-grain again. (2) background-size is --hdr-pill-grain-size (620px), NOT --hdr-grain-size (200px). The latter is the at-rest band's tile and is deliberately left alone; the pill needs a tile larger than the 431px asset so the texture upscales into slow undulation ("wavy glass") instead of fine sand. */ :where(.ev26) .bar.big.shrunk::before{content:none} :where(.ev26) .bar.big.shrunk::after{inset:0;bottom:0;border-radius:inherit; backdrop-filter:none;-webkit-backdrop-filter:none;background-color:transparent; background-image:var(--grain);background-size:var(--hdr-pill-grain-size);background-repeat:repeat; mix-blend-mode:var(--hdr-grain-blend);filter:var(--hdr-grain-tone);opacity:var(--hdr-grain); -webkit-mask-image:none;mask-image:none} /* #1483. This rule USED to read `padding-left:22px;padding-right:22px; max-width:none` — the pill took over the column, so the wordmark's x was a function of the pill's width and every width tune dragged the type sideways. It is now deleted rather than retuned: .wrap keeps var(--col) and var(--gut) in the scrolled state exactly as it has them at rest, so the pill can be any width at all and the content does not move. That is what makes the widened pill legal, and it is also "more padded" — the inside gutter goes 22px -> 44px on desktop — without a single new number. Below the column's binding width the content shifts inward by exactly --hdr-pill-inset, which is the whole visible cost of the pill being a floating object; the 640px rule below already sets both states to the same 16px, so the shift there is the inset alone, and smaller than the 16px the old 14+14 arrangement produced. */ :where(.ev26) .bar.big.shrunk .logo{width:0;opacity:0} :where(.ev26) .bar.big.shrunk .lockup .mark{opacity:1;transform:scale(1)} :where(.ev26) .bar.big.shrunk nav{font-size:var(--t-meta)} :where(.ev26) .bar.float{width:calc(100% - var(--hdr-inset)*2);max-width:var(--col);margin:var(--hdr-inset) auto 0} :where(.ev26) .bar.float .wrap{padding-left:24px;padding-right:24px} :where(.ev26) .bar .logo{height:32px;width:auto} /* ── the identity in dark ─────────────────────────────────────────────────── * #1456. There are THREE places the identity renders and only one of them had * a dark rule: * .bar .logo the wordmark, at rest above 640px — had this rule * .bar .mark the logomark, shown when the bar shrinks past 40px AND at * all times below 640px — had NOTHING, so * on a phone in dark the site's identity was a near-black E * on a near-black ground from the first paint * .foot-mark img the footer wordmark, every page — had NOTHING * * ONE mechanism for all three, and the eyeballed terms are gone. The old * declaration was invert(1) brightness(1.6) saturate(0): both extra terms are * no-ops on this artwork (inverting fill="black" already clamps to white, and * there is no colour to strip) and both would misbehave on any future coloured * mark. Plain invert(1) is the whole intent. * * Considered and rejected: swapping the source to assets/logo-light.svg, which * does exist and IS the real light-on-dark wordmark (fill #fcfbf8, same 489x90 * viewBox). It only solves ONE of the three — there is no light logomark asset * — so taking it would mean a source swap for the wordmark and a filter for the * mark: two mechanisms for three logos, which is how this drifted apart in the * first place. If a light logomark is ever drawn, swap all three together and * this rule retires as a unit. (assets/logo-light.svg stays unused for now.) * * The footer image carries no class of its own, so it is reached through its * link — no markup change, and footer.php is untouched. */ [data-theme="dark"] :where(.ev26) .bar .logo, [data-theme="dark"] :where(.ev26) .bar .lockup .mark, [data-theme="dark"] :where(.ev26) .foot-mark img{filter:invert(1)} /* Scoped to the bar. Unscoped, this caught every