/* Agoramores — "march" theme overrides. Loaded after main.css. Every selector here is scoped to body[data-theme-id="march"]. */ /* --------------------------------------------------------------------------- MARCH — "in like a lion, out like a lamb." The month is a duality, so the page is built as one continuous weather front running top to bottom: a bruised slate thunderhead with driving rain and wind combing through it at the LION end, a tear in the cloud where the sun breaks out as a tawny mane sunburst, and below the squall line a mild, clearing fleece-white sky over the first green shoots at the LAMB end. The heading rainbow walks the same journey — lion red and ember and mane gold first, then shoot green, moss, storm-bruise and rose — and red re-enters mid-cycle so the spectrum never stops reading as red-led. THE ONE STRUCTURAL RULE THAT MAKES THIS LEGIBLE ----------------------------------------------- .night-sky is position: fixed, so the whole page scrolls OVER it. That means every line of body copy passes over every band of the illustration at some scroll offset — a genuinely dark storm and a genuinely white fleece in the same backdrop cannot both carry one ink. So the duality here is carried by HUE, TEXTURE and CHROMA, never by luminance extremes, and the sky is built under a hard floor: NO LAYER ANYWHERE IN .night-sky IS DARKER THAN --mar-storm-bruise (#bbb8d2). Cloud masses are painted in exactly two colours — the cold --mar-storm-core and the violet --mar-storm-bruise — at varying alpha, so their composite can only ever be lighter than the darker of the two. Rain, wind, god-rays and the fleece nap are all LIGHT-ADDING (warm and cold whites), so they can only raise luminance, which can only improve contrast against the dark ink. That makes #bbb8d2 the true worst case for the entire page, and every colour in the palette below was measured against it rather than against --bg. Ratios are quoted per token; the tightest are called out where they land. The drama therefore has to come from HUE and EDGE rather than from shadow: cold violet-slate cloud with hard shoulders and a hot cream tear burning through it at one end, warm fleece at the other. Two colour temperatures held at one luminance read as far more weather than a grey ramp does, and they cost the reader nothing. Motion: two ambient transform-only layers (rain, wind), plus the header's existing neon strip. No new continuous effect beyond that, the first frame is already the finished picture, and both reduced-motion and reduced-data stop the travel without removing a single painted layer. --------------------------------------------------------------------------- */ body[data-theme-id="march"] { /* ---- Ink --------------------------------------------------------------- Storm ink. Measured against #bbb8d2 (the darkest pixel on the page) and against #faf8f3 (the brightest): --mar-ink 8.82 : 1 → 16.02 : 1 --mar-ink-soft 5.71 : 1 → 10.36 : 1 --mar-muted 4.75 : 1 → 7.46 : 1 All three clear AA body text at BOTH ends, which is the whole reason the luminance band above is kept as narrow as it is. */ --mar-ink: #201b18; --mar-ink-soft: #433b34; --mar-muted: #4f4740; /* ---- The lion: red anchor, mane, ember -------------------------------- Red is the standing anchor of every Agoramores month and it leads here as the gale-warning flag: --mar-red is the structural colour (borders, table headers, the first stop of all three gradients), --mar-red-deep is the link ink, and --mar-red-lit is bright enough that it is confined to illustration only — 2.33 : 1 on the storm, so it may never carry text. --mar-red 3.34 : 1 on the storm, 5.45 : 1 on --bg (borders, large type) --mar-red-deep 4.94 : 1 on the storm, 8.06 : 1 on --bg (links, AA everywhere) --mar-red-dark 5.65 : 1 on the storm (link hover, AA everywhere) */ --mar-red: #b8201f; --mar-red-deep: #8c1210; --mar-red-dark: #7c0f0e; --mar-red-lit: #d8342c; /* Mane. --mar-mane and --mar-straw are the lit fur catching the sun and are illustration-only (2.27 : 1 and lower on the storm). --mar-mane-deep is the tawny that can hold text: 3.80 : 1 on the storm, 6.50 : 1 on the breadcrumb card, which is where it actually sits as --tt-gold. */ --mar-mane-deep: #7a4c08; --mar-mane: #a06a10; --mar-straw: #d9b45e; --mar-ember: #a83c12; --mar-tawny: #7f5309; /* ---- The lamb: shoots, moss, and the cool supporting hues ------------- Cool colours are supporting cast only — never dominant over the red. Each one still clears 3 : 1 on the storm so it can take a heading stop: --mar-shoot-deep 4.54 --mar-bruise 4.75 --mar-slate 4.15 --mar-moss 3.61 --mar-rose 3.70 --mar-shoot 3.28 */ --mar-shoot-deep: #2f5417; --mar-shoot: #3d6b1f; --mar-moss: #4e5d43; --mar-slate: #5d4e37; --mar-bruise: #634133; --mar-rose: #9f3130; /* ---- Scenery ---------------------------------------------------------- The luminance ladder of the illustration, lion → lamb. The two storm values are the ONLY colours the cloud masses are drawn in, and --mar-storm-bruise is the floor described at the top of this file: nothing in .night-sky may go below it. They sit at effectively one luminance and differ in hue — cold blue-slate and a violet bruise — which is what lets the cloud have internal form without any of it going dark. --mar-card is the breadcrumb bar, the one element in the whole project allowed a background of its own. --mar-turf / --mar-turf-deep are the shoot band, kept deliberately bleached — March grass is thin new green over last year's dead straw, and a pale band keeps the footer readable (ink 9.40 : 1, links 5.26 : 1 on --mar-turf-deep). */ --mar-storm-core: #c5bab2; --mar-storm-bruise: #c8b8b1; --mar-storm: #cec7bb; --mar-storm-lit: #d8d1c5; --mar-overcast: #dbd9d1; --mar-fleece: #efe7d2; --mar-wool: #f2e6d2; --mar-card: #f0e7d2; --mar-turf: #d2d6b6; --mar-turf-deep: #bec596; /* ---- Geometry --------------------------------------------------------- Two squall depths and the shoot band, as percentages of the fixed backdrop so they hold at any viewport height. The rain and wind curtains END on a tonal step built into the sky gradient below — the same trick the April creek uses at its waterline. A curtain that stops in open sky shows a cut edge; a curtain that stops on the squall line reads as weather clearing. The mobile block at the foot of this file rescales all four. */ --mar-squall-near: 62%; --mar-squall-far: 46%; --mar-turf-h: clamp(2.6rem, 7vh, 4.4rem); --mar-sun-r: 22rem; --tt-bg: var(--mar-fleece); /* Link-hover paired to THIS block's ground (standing rule 2026-08-14), not the mode name — march's unmoded block is its own canonical lighting. #efece3 is light: #FF465A only measures 2.83:1 here, so this lighting takes the same-hue dark variant, #BD0014 — 5.60:1. */ --link-hover: #BC0900; --tt-bg-alt: #e2ded2; --tt-cyan: var(--mar-ink); --tt-cyan-soft: var(--mar-ink-soft); --tt-yellow: var(--mar-tawny); --tt-orange: var(--mar-ember); --tt-chartreuse: var(--mar-shoot-deep); --tt-green: var(--mar-shoot); --tt-pink: var(--mar-rose); --tt-purple: var(--mar-bruise); --tt-blue: var(--mar-slate); --tt-teal: var(--mar-moss); --tt-gray: var(--mar-muted); --tt-gold: var(--mar-mane-deep); --tt-red: var(--mar-red); --tt-breadcrumb-text: var(--mar-red-deep); /* Daylight: the breadcrumb glow is a warm bloom at low alpha, not neon. */ --tt-breadcrumb-glow: rgba(184, 32, 31, 0.16); /* Hover/focus halo for the zodiac glyphs. Every other month casts a LIGHT halo because its ground is dark; March's chips are dark tawny glyphs on a near-white card, so the halo has to be DARK to trace them at all — the same inversion the lava-lamp theme needs. Checked against --mar-card (#f4f1ea). This token is the chips' entire hover/focus affordance: they carry no border, no ring and no box-shadow on any theme. */ --zodiac-glow: rgba(140, 18, 16, 0.62); /* The engraving on the tarot card: the one text-shadow that cuts the card's numeral and the breadcrumb separators INTO its face rather than printing them on it. main.css defaults it to a black lip, which is right under a glyph on a dark card and wrong under one on fleece — on a pale face the lit edge of a struck stroke is the white BELOW the letter, not the black. Every light-ground theme has to state this or it inherits a smudge. */ --tt-engrave: 0 1px 0 rgba(242, 230, 210, 0.75); /* Structural border palette — every visible frame, rail and keyline in the project draws from this one gradient, so it is the lion → lamb journey in six stops. Red leads, red returns at stop four, and the run closes on red again so a repeated or rotated copy joins seamlessly. */ --tt-heading-rainbow: linear-gradient( 90deg, var(--mar-red), var(--mar-ember), var(--mar-mane-deep), var(--mar-red), var(--mar-shoot-deep), var(--mar-moss), var(--mar-red) ); --tt-heading-rainbow-vertical: linear-gradient( 180deg, var(--mar-red), var(--mar-ember), var(--mar-mane-deep), var(--mar-red), var(--mar-shoot-deep), var(--mar-moss), var(--mar-red) ); /* The heading spectrum: nine stops walking lion → lamb (red, ember, tawny, shoot-deep, RED AGAIN, moss, slate, bruise, rose), written out twice so the 200% background in main.css loops with no visible reset, and closed on red so the wrap point is invisible. Every one of these nine clears 3 : 1 on the storm core and 5 : 1 on --bg, so the gradient stays a readable heading at both ends of the page rather than eight near-blacks pretending to be a rainbow. Red appears twice per cycle, as the red-bias rule requires. */ --tt-heading-text-rainbow: linear-gradient( 90deg, var(--mar-red), var(--mar-ember), var(--mar-tawny), var(--mar-shoot-deep), var(--mar-red), var(--mar-moss), var(--mar-slate), var(--mar-bruise), var(--mar-rose), var(--mar-red), var(--mar-ember), var(--mar-tawny), var(--mar-shoot-deep), var(--mar-red), var(--mar-moss), var(--mar-slate), var(--mar-bruise), var(--mar-rose), var(--mar-red) ); /* ---- Type ------------------------------------------------------------- A condensed grotesque for headings. System stacks only — this project loads no webfonts anywhere, so the choice adds zero network requests and the first paint is already the finished typography. Condensed is the right voice for a gale: it packs tight, leans forward and reads as wind-raked, and it is unmistakably not September's engraved Copperplate caps or October's blocky uppercase mono. Body copy and the brand wordmark are left alone — --font-text is locked in main.css and is the same on every theme (2026-08-15), and --font-cursive is untouched at the token level because the brand is a locked fixture with its own stack. */ --font-heading: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Helvetica Neue Condensed", "Roboto Condensed", "Liberation Sans Narrow", "Arial Narrow", Optima, "Segoe UI", sans-serif; --bg: var(--mar-fleece); --surface: transparent; --text: var(--mar-ink); --text-soft: var(--mar-ink-soft); --muted: var(--mar-muted); /* Red binds to the structure, per the standing anchor rule: --border and every hairline in the theme are the month red rather than a neutral grey. */ --border: var(--mar-red); --border-dim: rgba(184, 32, 31, 0.26); --border-teal: rgba(78, 93, 67, 0.45); background: var(--mar-fleece); color: var(--mar-ink); color-scheme: light; } /* --------------------------------------------------------------------------- THE WIND, at page level. body::before is the CRT scanline — a permanent fixture, so it is repurposed rather than switched off. Here it becomes the rake of wind across the whole pane: one fine set of steep streaks and one very faint counter-rake, warm-white so it can only add light. This layer sits ABOVE the text at z-index 5, which is why the alpha is held at the floor: it has to be felt, never read. Static, no repeat cost beyond two repeating-linear-gradients on the one fixed element that already existed. --------------------------------------------------------------------------- */ body[data-theme-id="march"]::before { background: repeating-linear-gradient( 74deg, transparent 0 41px, rgba(242, 230, 210, 0.075) 41px 42px, transparent 42px 97px, rgba(238, 232, 210, 0.05) 97px 98px, transparent 98px 179px ), repeating-linear-gradient( 99deg, transparent 0 73px, rgba(242, 230, 210, 0.035) 73px 74px, transparent 74px 211px ); } /* --------------------------------------------------------------------------- THE CARD — the breadcrumb bar is the single element in the project allowed a background of its own, so it is where the duality is restated at object scale: a fleece card, lion at the left edge and lamb at the right. Left to right: a tawny mane wash bleeding in from the left, a wool nap over the whole face, then the fleece ground. The wash is a broad background gradient and NOT a rule down the edge — border-left in this project belongs exclusively to elements inside ul/ol, and nothing here is one. All static. Nothing added to this element animates. --------------------------------------------------------------------------- */ body[data-theme-id="march"] .breadcrumb-nav { background: /* Wool nap, same rule as the page fleece: each puff dies well inside its own tile so the flecks never touch and quilt up, and the two tiles share no common factor so they never phase into a pattern. */ radial-gradient(circle at 34% 42%, rgba(242, 230, 210, 0.2) 0 5%, transparent 24%) 0 0 / 3.1rem 2.5rem repeat, radial-gradient(circle at 68% 71%, rgba(242, 230, 210, 0.13) 0 4%, transparent 20%) 0.7rem 0.4rem / 5.3rem 4.1rem repeat, /* the lion end of the card */ linear-gradient( 100deg, rgba(217, 180, 94, 0.38) 0%, rgba(217, 180, 94, 0.14) 22%, transparent 46% ) 0 0 / 100% 100% no-repeat, linear-gradient(180deg, #f1e6d2 0%, var(--mar-card) 58%, #ece7dc 100%) 0 0 / 100% 100% no-repeat; /* A cast shadow, not a neon halo — this is a daylight theme. */ box-shadow: 0 2px 14px rgba(32, 27, 24, 0.1), inset 0 1px 0 rgba(242, 230, 210, 0.7); } /* The existing terminal sweep becomes a gust crossing the card. Same element, same keyframe, same duration — only the colours move from July's cyan and hotpink to this month's wool white and a breath of the anchor red. */ body[data-theme-id="march"] .breadcrumb-nav::before { background: linear-gradient( 90deg, transparent, rgba(239, 231, 210, 0.62), rgba(184, 32, 31, 0.1), transparent ); } /* The tooltip floats on , outside the card. This month has a real rainbow palette, so its border-image frame stands as written in main.css and only the drop shadow is retuned — a 0.45-alpha black halo is a dark-theme value and reads as soot on a fleece ground. */ body[data-theme-id="march"] .celestial-tooltip { background: var(--mar-card); box-shadow: 0 6px 22px rgba(32, 27, 24, 0.18); } /* --------------------------------------------------------------------------- THE SKY. One fixed element carrying the whole front, painted top layer first: 1 god-rays the light shafts thrown by the tear in the cloud 2 the tear the mane's hot core, breaking through at upper left 3 lit shoulders sun catching the tops of the nearer cloud 4-6 thunderheads three masses, drawn in --mar-storm-core at varying alpha 7 the front slate → overcast → fleece → wool, top to bottom Layers 1-3 and 7's lower half are light-adding; layers 4-6 are painted in the floor colour itself. Neither kind can take a pixel below #b6bcca, which is the invariant the whole palette was measured against. The rays are a repeating-conic-gradient whose origin sits just off the top left corner of the viewport, so only the down-and-right sector is ever visible and the fan reads as shafts raking across the page. There is no mask on it and none is needed: the alpha is low enough (0.13 / 0.08) that the shafts pass over the fleece end as light rather than as lines. All static, all no-repeat. This is the first frame and the final frame. */ body[data-theme-id="march"] .night-sky { background-color: var(--mar-fleece); background-image: /* 1. THE FADE. A conic gradient has no falloff — it paints its rays to the far corner of the element at full strength — so shafts thrown from the top left corner reach the bottom of the page as hard cream stripes and take the whole design over. That is what this layer exists to stop. It cannot be done with a mask: .night-sky is a fixed element whose children animate by transform, and a mask on it would ride along with them. So the fade is painted instead, as the TOPMOST background layer: transparent over the storm, ramping to solid fleece by the time it reaches the lamb end. It doubles as the organising lion-to-lamb ramp, and every value in it is far lighter than the floor, so it cannot cost a single point of contrast. */ linear-gradient( 180deg, transparent 0 32%, rgba(236, 231, 219, 0.34) 46%, rgba(240, 231, 210, 0.78) 60%, #f0e7d2 76%, #efe7d2 100% ), /* 2. The shafts themselves, thrown from the tear. Warm cream, kept low and spaced wide so that where they DO show, over the storm, they read as light in the air rather than as stripes on the page. */ repeating-conic-gradient( from 96deg at 12% -8%, rgba(245, 230, 197, 0.19) 0deg 1.9deg, transparent 1.9deg 5.6deg, rgba(238, 231, 210, 0.11) 5.6deg 6.9deg, transparent 6.9deg 12.4deg ), /* 2. the tear in the bank: the lion's mane, burning through the cloud. */ radial-gradient( circle var(--mar-sun-r) at 12% -8%, rgba(242, 232, 196, 0.95) 0 9%, rgba(255, 232, 175, 0.66) 26%, rgba(255, 222, 158, 0.3) 48%, rgba(255, 216, 150, 0.1) 66%, transparent 82% ), /* 3. lit shoulders — cream catching the top of the nearer cloud bank. */ radial-gradient(ellipse 26rem 5rem at 30% 4%, rgba(243, 231, 202, 0.62), transparent 68%), radial-gradient(ellipse 18rem 3.5rem at 57% 13%, rgba(240, 231, 209, 0.34), transparent 70%), /* The rim of light along the UNDERSIDE of the bank. Without it the cloud has a top and no bottom, and the whole storm dissolves into an even wash; one thin lit edge is what tells the eye where the weather stops. */ radial-gradient(ellipse 42rem 1.1rem at 64% 27%, rgba(239, 231, 210, 0.55), transparent 74%), radial-gradient(ellipse 22rem 0.8rem at 18% 31%, rgba(240, 231, 210, 0.38), transparent 76%), /* 4-6. The cloud banks. Hard shoulders: each mass holds full alpha out to a stated stop and then falls off fast, so the bank has an EDGE. A soft centre-to-transparent ramp is what turned this into fog last time. Drawn only in the two storm colours, so the floor holds. */ radial-gradient( ellipse 44rem 13rem at 76% -3%, var(--mar-storm-bruise) 0 44%, rgba(200, 184, 177, 0.72) 63%, rgba(200, 184, 177, 0.2) 80%, transparent 92% ), radial-gradient( ellipse 32rem 9.5rem at 33% 6%, var(--mar-storm-core) 0 40%, rgba(197, 186, 178, 0.68) 62%, rgba(197, 186, 178, 0.18) 81%, transparent 93% ), radial-gradient( ellipse 24rem 7rem at 58% 19%, rgba(200, 184, 177, 0.86) 0 36%, rgba(200, 184, 177, 0.42) 61%, transparent 86% ), radial-gradient( ellipse 30rem 6rem at 6% 24%, rgba(197, 186, 178, 0.7) 0 34%, rgba(197, 186, 178, 0.24) 62%, transparent 88% ), /* 7. The front. The top third sits at the storm's own value rather than a pale grey — a bank of cloud only reads as weather if the sky it covers is already the weather's colour. The firmer step at 52% → 58% is the squall line: it is the height both rain curtains stop on, so their bottom edge lands on a real feature instead of cutting open sky. */ linear-gradient( 180deg, #c7bfb7 0%, #c9c1ba 15%, #ccc6c2 29%, #d4cdc1 41%, #d9d2c6 52%, #e1ddd2 58%, #eae5d9 70%, #f0e7d2 84%, #f0e7d2 100% ); background-repeat: no-repeat; } /* --------------------------------------------------------------------------- THE FLEECE. .night-sky::before is the wool nap, and it is deliberately laid over the WHOLE page rather than only the lamb end: the fleece is the paper the storm is printed on, which is what ties the two halves into one image instead of two stacked pictures. The nap has to be FLECKS, not blobs. A soft radial whose falloff reaches the edge of its own tile touches its neighbours on all four sides, and the moment it does the eye stops seeing wool and starts seeing quilting — a grid of blurry squares over the whole page, which is exactly what the first pass of this theme shipped. So every puff here dies well inside its tile (transparent by 34-40% of a tile that is 9-16rem across), the tiles share no common factor, and the alpha is roughly a fifth of what it was. What is left reads as a faint mottle in the paper. Warm and cold whites only — every value is lighter than whatever it covers, so this layer can only raise contrast. July's star drift and twinkle are both switched off: wool does not move. --------------------------------------------------------------------------- */ body[data-theme-id="march"] .night-sky::before { inset: 0; opacity: 1; background-image: radial-gradient(circle at 34% 40%, rgba(242, 230, 210, 0.16) 0 9%, rgba(242, 230, 210, 0.06) 22%, transparent 36%), radial-gradient(circle at 72% 67%, rgba(238, 232, 210, 0.12) 0 7%, transparent 30%), radial-gradient(circle at 14% 79%, rgba(242, 230, 210, 0.09) 0 6%, transparent 26%); background-size: 9.5rem 7.75rem, 16.25rem 12.5rem, 6.75rem 5.25rem; background-position: 0 0, 3.4rem 2.1rem, 1.6rem 0.9rem; background-repeat: repeat; animation: none; } /* --------------------------------------------------------------------------- THE SQUALL — two depths on the two star layers that already existed, both confined to the lion end of the page and both stopping on the sky's own squall line. Motion is the difference between the two halves: the top of the page is weather, the bottom is still. --near the near wind, combing the cloud tops left to right. Long tapered streaks, all on 20rem-wide tiles, travelling exactly 20rem per loop so the comb restarts with no seam. Occupies the top 38%. --far the rain behind it, falling. Thin vertical streaks on tiles that are all 12rem tall, travelling exactly 12rem per loop. Occupies the top 54%. The rain SLANTS by carrying a constant skewX(-15deg) through both keyframe steps: the skew never animates, it just shears the tile so a vertical streak renders as a driven one, and it shears the translate vector with it so the drops fall down-and-across. Because the shear is constant and the travel is exactly one tile in element space, the loop is still seamless. That is also why the element is inset -14rem horizontally — the shear pushes content sideways by height × tan(15°), and .night-sky clips the overhang. Everything is white on slate, so the squall is light-adding like the rest of the sky. Transform only: no filter, no background-position animation, no layout property touched. --------------------------------------------------------------------------- */ body[data-theme-id="march"] .night-sky__stars--near { inset: -6rem -6rem var(--mar-squall-near) -6rem; opacity: 0.72; background-image: radial-gradient(ellipse 6.5rem 0.09rem at 22% 28%, rgba(242, 230, 210, 0.66) 0 44%, transparent 100%), radial-gradient(ellipse 9.5rem 0.075rem at 64% 61%, rgba(239, 231, 210, 0.5) 0 44%, transparent 100%), radial-gradient(ellipse 4.2rem 0.11rem at 86% 15%, rgba(242, 230, 210, 0.58) 0 42%, transparent 100%), radial-gradient(ellipse 7.8rem 0.08rem at 41% 82%, rgba(242, 230, 210, 0.44) 0 44%, transparent 100%); background-size: 20rem 6.5rem, 20rem 9.5rem, 20rem 13.5rem, 20rem 17.5rem; background-position: 0 0, 5rem 2rem, 11rem 4rem, 3rem 7rem; background-repeat: repeat; animation: marchWindComb 7.5s linear infinite; } body[data-theme-id="march"] .night-sky__stars--far { inset: -6rem -14rem var(--mar-squall-far) -14rem; opacity: 0.82; background-image: radial-gradient(ellipse 0.75px 13px at 26% 20%, rgba(242, 230, 210, 0.82) 0 42%, transparent 100%), radial-gradient(ellipse 0.75px 17px at 68% 63%, rgba(242, 230, 210, 0.68) 0 40%, transparent 100%), radial-gradient(ellipse 0.6px 10px at 43% 86%, rgba(242, 230, 210, 0.58) 0 44%, transparent 100%), radial-gradient(ellipse 0.85px 21px at 84% 35%, rgba(242, 230, 210, 0.54) 0 38%, transparent 100%); background-size: 3.25rem 12rem, 4.75rem 12rem, 6.5rem 12rem, 9rem 12rem; background-position: 0 0, 1.4rem 0, 3.1rem 0, 0.6rem 0; background-repeat: repeat; animation: marchRainDrive 2.4s linear infinite; } /* --------------------------------------------------------------------------- THE SHOOTS — the ground element. .night-sky__aurora is July's city skyline and belongs to July alone; every other month either hides it or repurposes it as natural scenery. March turns it into the first green coming up through last year's straw, which is the lamb end's only piece of hard geography. Drawn as a fringe rather than a lawn: two repeating-linear-gradient blade passes leaning against each other at 82° and 98°, a few radial tufts standing proud of them, and a bleached turf gradient underneath. The blades are confined to a 1.5rem strip at the TOP of the band, so the bulk of the band stays solid pale turf — a footer line sits on #bec596 (ink 9.40 : 1, links 5.26 : 1) and only ever crosses a 1px blade, never a dark field. July's skyline clip-path and its magenta horizon glow are both cleared. --------------------------------------------------------------------------- */ body[data-theme-id="march"] .night-sky__aurora { display: block; z-index: 2; left: -2%; right: -2%; bottom: -1px; inset-block-start: auto; height: var(--mar-turf-h); clip-path: none; box-shadow: none; background-color: var(--mar-turf); background-image: /* Three tufts standing proud of the fringe. Each one gets an explicit tile WIDTH rather than `auto`: a gradient sized auto fills the whole band, and a `left 6%` offset against a full-width layer resolves to zero, so the three would silently ignore their placement and stack wherever their own gradient centre fell. Sized tiles make the placement real. */ radial-gradient(ellipse 0.8rem 1.3rem at 50% 100%, rgba(61, 107, 31, 0.3) 0 50%, transparent 68%), radial-gradient(ellipse 0.62rem 1.05rem at 50% 100%, rgba(47, 84, 23, 0.26) 0 50%, transparent 68%), radial-gradient(ellipse 0.95rem 1.5rem at 50% 100%, rgba(61, 107, 31, 0.24) 0 50%, transparent 68%), /* The fringe: three blade passes leaning against each other. Two passes on their own comb up into an even picket fence — the periods here (15 / 25 / 37px) share no common factor, so the blades bunch and thin the way real new growth does, and the whole fringe is under a rem tall so the band stays mostly open turf under the footer. */ repeating-linear-gradient( 82deg, transparent 0 7px, rgba(61, 107, 31, 0.3) 7px 8px, transparent 8px 15px ), repeating-linear-gradient( 97deg, transparent 0 11px, rgba(47, 84, 23, 0.26) 11px 12px, transparent 12px 25px ), repeating-linear-gradient( 88deg, transparent 0 17px, rgba(61, 107, 31, 0.22) 17px 19px, transparent 19px 37px ), /* Bleached turf, straw at the foot. The top stop is --mar-turf at zero alpha rather than the keyword `transparent`: `transparent` is rgba(0,0,0,0), so interpolating from it drags the ramp through grey and leaves a dirty band across the top of the shoot line. */ linear-gradient(180deg, rgba(210, 214, 182, 0) 0%, var(--mar-turf) 34%, var(--mar-turf-deep) 100%); background-size: 3.4rem 1.3rem, 2.6rem 1.05rem, 4.2rem 1.5rem, 100% 0.95rem, 100% 0.8rem, 100% 0.7rem, 100% 100%; background-position: left 8% bottom 0, left 46% bottom 0, left 76% bottom 0, left top, left top, left top, left top; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, no-repeat; } /* Fireworks are Independence Day furniture: July theme only. The JS also refuses to spawn them off-July, so this is belt-and-braces for any burst already on screen when the theme is switched. */ body[data-theme-id="march"] .night-sky__fireworks { display: none; } /* --------------------------------------------------------------------------- Header and brand. --------------------------------------------------------------------------- */ /* The wordmark takes the anchor red, so the first thing on every page is the month's red. On the storm ground it measures 3.6 : 1 and the type is 2.8–5.75rem, well past the large-text threshold. The neon triple-glow is swapped for a mane bloom over a wool lift: a warm halo behind the letters and a single hairline of white under them, which is what backlit lettering actually does on an overcast day. */ body[data-theme-id="march"] .brand a { color: var(--mar-red); text-shadow: 0 1px 0 rgba(242, 230, 210, 0.7), 0 0 18px rgba(217, 180, 94, 0.55), 0 0 44px rgba(216, 52, 44, 0.16); } body[data-theme-id="march"] .brand a:hover { color: var(--mar-red-lit); text-shadow: 0 1px 0 rgba(242, 230, 210, 0.8), 0 0 22px rgba(217, 180, 94, 0.7), 0 0 52px rgba(216, 52, 44, 0.24); } /* The eyebrow is the little strip of weather bulletin over the hero. */ body[data-theme-id="march"] .eyebrow { letter-spacing: 0.3em; text-shadow: none; } /* --------------------------------------------------------------------------- HEADINGS — the condensed grotesque, leaning into the wind. --------------------------------------------------------------------------- */ /* Every heading, including the markdown H1, moves off the cursive and onto the condensed stack. Condensed sets narrower than the humanist sans it replaces, so the tracking comes in tight rather than out wide — the opposite move to September's engraved caps, and the reason the two months do not read alike. The separation from the busy sky behind is a white drop-shadow, and it has to be a FILTER rather than a text-shadow: these letters are painted with background-clip: text, and a text-shadow renders in the text phase, on top of the clipped gradient, which would bury the rainbow under a flat slab. A drop-shadow() reads the composited alpha instead, so the white lands behind the letterforms where it belongs. Two stops: a tight one that cuts the glyph out of the cloud, and a wider soft one that lifts it. */ body[data-theme-id="march"] main h1, body[data-theme-id="march"] .page-title, body[data-theme-id="march"] main h2, body[data-theme-id="march"] main h3, body[data-theme-id="march"] main h4, body[data-theme-id="march"] main h5, body[data-theme-id="march"] main h6, body[data-theme-id="march"] .markdown-page .heading-section__trigger { font-family: var(--font-heading); font-style: normal; font-weight: 700; letter-spacing: -0.015em; text-shadow: none; /* `var(--heading-tint)` first: it is the site-wide per-level heading ladder from main.css, and `filter` replaces rather than accumulates, so a rule that omits it drops the ladder for this whole sheet. */ filter: var(--heading-tint) drop-shadow(0 1px 0 rgba(242, 230, 210, 0.78)) drop-shadow(0 2px 6px rgba(242, 230, 210, 0.5)); } /* Condensed carries more characters per line, so the display sizes go UP rather than down. The trigger selectors are stated explicitly because main.css sizes those at (0,3,0) and would otherwise outrank a bare `main h1`. */ body[data-theme-id="march"] main h1, body[data-theme-id="march"] .page-title, body[data-theme-id="march"] .heading-section--level-1 > .heading-section__summary > .heading-section__trigger { font-size: clamp(2.7rem, 7.6vw, 5.2rem); letter-spacing: -0.028em; } body[data-theme-id="march"] main h2, body[data-theme-id="march"] .heading-section--level-2 > .heading-section__summary > .heading-section__trigger { font-size: clamp(1.85rem, 4.4vw, 2.85rem); } body[data-theme-id="march"] main h3, body[data-theme-id="march"] .heading-section--level-3 > .heading-section__summary > .heading-section__trigger { font-size: clamp(1.3rem, 2.6vw, 1.72rem); letter-spacing: 0; } /* The wind-rake under an H2: a short bar in the structural border palette, left-aligned so it trails off the way a gust does. It is drawn from --tt-heading-rainbow rather than a one-off gradient, because every visible rule in the project comes from that one palette. */ body[data-theme-id="march"] main h2::after { content: ""; display: block; width: min(13rem, 44%); height: 2px; margin: 0.5rem 0 0; background: var(--tt-heading-rainbow); opacity: 0.85; } /* The section rails keep their rainbow but lose July's cyan filament halo — a glow behind a 3px bar on a pale ground just muddies its edge. */ body[data-theme-id="march"] .heading-section::before, body[data-theme-id="march"] .page-toc::before { box-shadow: none; } body[data-theme-id="march"] .page-toc .page-toc__title { letter-spacing: 0.16em; } /* --------------------------------------------------------------------------- Links. main.css leaves content links at var(--text), which on this theme is the body ink — so without this they would be invisible as links. They take the deep red. A faint red underline used to run under them at rest, added so they were identifiable without relying on colour alone; it is gone per the standing no-underline rule (2026-08-14). Nothing rendered changes by dropping it — link-camouflage.css already holds every link flat at rest sitewide and was already winning the cascade over this rule, so the underline never painted. See public/link-camouflage.css before adding a new non-colour rest cue in its place. Hover DARKENS rather than brightens, which is the correct direction on a light ground and is also what keeps the state AA: --mar-red-dark measures 5.63 : 1 against the storm core, where the brighter reds fall under 4.5. The affordance the eye reads is that colour move, now that no rule is drawn under the word. July's looping linkHotpinkGlow is switched off outright — a continuous animation on every hovered link is not a cost this project pays. --------------------------------------------------------------------------- */ body[data-theme-id="march"] main a { color: var(--mar-red-deep); } /* Hover colour is --link-hover, standing user rule 2026-08-14: #FF465A on every theme. --mar-red-dark's own 5.63:1-on-the-storm-core measurement no longer applies to this state — see the per-theme contrast note in DUH/rules/presentation.md. */ body[data-theme-id="march"] a:hover, body[data-theme-id="march"] a:focus-visible { color: var(--link-hover); text-decoration: none; text-shadow: 0 0 14px rgba(217, 180, 94, 0.45); animation: none; } /* Visited links go to the storm bruise — 4.51 : 1 on the storm core, so a read link is still AA everywhere it can land. July's dark triple-glow is dropped; it was drawn to separate purple from a near-black page and does nothing here. */ body[data-theme-id="march"] a:visited { color: var(--mar-bruise); text-shadow: none; } /* --------------------------------------------------------------------------- Surfaces. Everything below already had a fill or a frame in main.css; each one is retuned for daylight. Nothing gains a background it did not already have — the single shared site background stands, and the breadcrumb bar remains its only exception. --------------------------------------------------------------------------- */ /* Paper, not glass: a warm white wash so code and fields read as an inset sheet on the fleece rather than as a dark well. Inline is left without the inner lip on purpose — an inline box fragments across line breaks and a hairline would break with it. */ body[data-theme-id="march"] input, body[data-theme-id="march"] textarea, body[data-theme-id="march"] select, body[data-theme-id="march"] code, body[data-theme-id="march"] pre { background: rgba(242, 230, 210, 0.66); color: var(--mar-ink); } body[data-theme-id="march"] input, body[data-theme-id="march"] textarea, body[data-theme-id="march"] select, body[data-theme-id="march"] pre { box-shadow: inset 0 1px 2px rgba(32, 27, 24, 0.08); } /* A code block is one sheet, not one per line: the wash belongs to the 
   and the  inside it stays clear. Stated explicitly because the rule
   above outranks main.css's `pre code`. */
body[data-theme-id="march"] pre code {
  background: transparent;
  box-shadow: none;
}

/* The table header is the anchor red carrying wool type at 6.12 : 1, tracked
   and capped like a printed weather table. */
body[data-theme-id="march"] th {
  background: var(--mar-red);
  color: #f2e6d2;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* mark is a highlighter here rather than glowing text — a bloom on a light
   ground is invisible. Straw wash, ink on top, 11 : 1. */
body[data-theme-id="march"] mark {
  background: rgba(217, 180, 94, 0.45);
  color: var(--mar-ink);
  text-shadow: none;
}

/* No left rule on quotes — border-left in this project is reserved for 
   elements inside ul/ol and nothing else. The inset wash just moves from July's
   green to this month's mane gold. */
body[data-theme-id="march"] blockquote {
  color: var(--mar-ink-soft);
  box-shadow: inset 1rem 0 1.4rem -1.2rem rgba(160, 106, 16, 0.55);
}

/* Cards keep their rainbow frame and swap July's purple bloom for a real cast
   shadow, which is what an object on a lit page has. */
body[data-theme-id="march"] .hero-card,
body[data-theme-id="march"] .folder-section {
  box-shadow: 0 1px 3px rgba(32, 27, 24, 0.07), 0 6px 18px rgba(32, 27, 24, 0.05);
}

body[data-theme-id="march"] .hero-card:hover,
body[data-theme-id="march"] .folder-section:hover {
  box-shadow: 0 2px 6px rgba(32, 27, 24, 0.1), 0 12px 28px rgba(32, 27, 24, 0.09);
}

/* Trim. Selected by CLASS, never by element: the zodiac strip ran mixed —  signs beside a