one section only A page that only wants the tear or only wants the swash capital takes neither this class nor these colours. That is the point. Everything is prefixed rn- because this sheet loads alongside twenty one page stylesheets written independently, several of which already define generic names. A collision here would be silent and would look like a design bug on a page nobody was editing. */ :root{ /* The two workhorses, 23 uses each in their sheet. Both are pushed toward olive. Neither is #fff or #000, and that is the single reason the page reads as aged paper rather than as a screen. */ --rn-paper:#f7f7ee; --rn-ink:#292919; /* supporting greys, also olive-leaning */ --rn-band:#dcdcd0; /* rules, bands, card edges */ --rn-ink-2:#909083; /* secondary text */ --rn-ink-3:#5c5c4e; /* tertiary */ /* Their only two accents, used three or four times each on the WHOLE page. Restraint is the point. Ours stays the gold we already use. */ --rn-accent:#c9a96e; /* Type metrics, measured off .headline-* and .narrative-*. The tightness is most of the perceived quality: their headlines sit BELOW single line-height and are tracked in hard. */ --rn-head-leading:.9; --rn-head-tracking:-.03em; --rn-lede-leading:.96; --rn-lede-tracking:-.04em; --rn-script:'Imperial Script',cursive; } /* The opt-in theme. Repoints the page's own tokens, the same bridge trick the Avaria sheet uses, so a page changes colour without editing its stylesheet. */ .rn-warm{ --paper:var(--rn-paper); --ink:var(--rn-ink); --ink-2:var(--rn-ink-3); --line:rgba(41,41,25,.14); background:var(--rn-paper); color:var(--rn-ink); } /* ================= blocks.css ================= */ /* blocks.css The four moves. Every one opt in by class, nothing global. 1. .rn-hero the composing hero, stacked plates that assemble on scroll 2. .rn-tear a torn paper edge between two sections 3. .rn-illum the Imperial Script swash capital 4. .rn-head the tightened headline metrics Deliberately NOT here: their Rive runtime and their 27 animations. See _re/renaissance/SPEC.md for why that is a studio quarter of work and why these four carry the feeling without it. */ /* ---- 1. the composing hero -------------------------------------------- */ /* Their hero is not one picture. Their own filenames give it away: Agentic_fg_251207.png sits over BG-3, BG-B1, BG-B2, BG-G, BG-R, BG-Y, with Line_Grid.svg drawn over the top. Separate plates, each moving at its own rate, so the image ASSEMBLES as you arrive rather than just sitting there. Markup:

...

data-depth how fast the plate drifts once composed. 0 is locked, 1 moves a full step. Background small, foreground large. data-dx/dy where the plate STARTS, in percent of its own size. It travels from there to zero over the first part of the scroll, which is the assembling. The title frame never moves. On their page that still rectangle is the golden-ratio square from the opening drawing, and holding it still while everything else converges is what makes the hero feel composed rather than merely parallaxed. */ .rn-hero{ position:relative; background:var(--rn-ink); } .rn-hero__track{ height:220vh; } /* how long the assembly lasts */ .rn-hero__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; place-items:center; } .rn-hero__plate{ /* ⚠️ left/top/width/height explicitly, NEVER `inset` plus `width`. With both set, the browser drops one of them and the plate renders at exactly stage width, so the drift exposes a dead strip down one edge. Measured: stage 1864px, plate right edge 1757px, a 107px gap. */ position:absolute; left:-8%; top:-8%; width:116%; height:116%; /* ⚠️ Page stylesheets across this portfolio set img{max-width:100%}, which silently clamps the bleed back to stage width and puts the dead strip right back. Measured: width stayed 1868px against a 1864px stage while left correctly moved to -8%. Never drop this line. */ max-width:none; max-height:none; object-fit:cover; will-change:transform,opacity; transform:translate3d(var(--rn-x,0),var(--rn-y,0),0) scale(var(--rn-s,1)); opacity:var(--rn-o,1); } /* Plates generated on PURE BLACK stack as LIGHT, not as paint. Screen blend means black contributes nothing and only the glowing lines add up, so no plate needs an alpha channel and no cutting out is required. That is why the prompts all say "pure black background". The bottom plate stays normal. */ .rn-hero__plate--screen{ mix-blend-mode:screen; } /* An ACCENT plate is not full bleed. First build put the gold ornament in as a normal plate and it filled the screen and fought the headline, which is exactly the "more is not better" failure the course keeps warning about. On the Shopify page the graphic elements are small and off centre; the photograph carries the frame. Size and place it with the three variables, and it inherits the assemble/drift animation like any other plate. */ .rn-hero__plate--accent{ left:var(--rn-ax,56%); top:var(--rn-ay,6%); width:var(--rn-aw,34%); height:auto; object-fit:contain; opacity:calc(var(--rn-o,1) * var(--rn-af,.5)); } /* the one flat picture phones get instead of the stack */ .rn-hero__still{ display:none; } /* the hairline construction drawing, always on top of the plates */ .rn-hero__grid{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.5; stroke:currentColor; fill:none; stroke-width:.75; color:var(--rn-paper); } .rn-hero__frame{ position:relative; z-index:4; padding:clamp(1.5rem,4vw,3rem); color:var(--rn-paper); text-align:left; } /* the still rectangle. Hairline, not a box: it should read as drawn. */ .rn-hero__frame--ruled{ box-shadow:inset 0 0 0 1px rgba(247,247,238,.55); } /* ⭐ Phones get one picture, not the show. Every animated section on their page ships a Fallback_Mobile_*.jpg. Twelve of them. This is the whole reason a cinematic page can still be fast, and it is non negotiable on anything pointed at paid traffic. */ @media (max-width:767px), (prefers-reduced-motion:reduce){ .rn-hero__track{ height:auto; } .rn-hero__stage{ position:relative; height:auto; aspect-ratio:4/5; } .rn-hero__plate{ transform:none; opacity:1; } .rn-hero__plate[data-mobile="hide"]{ display:none; } .rn-hero__still{ display:block; position:relative; inset:auto; width:100%; height:auto; } .rn-hero__grid{ display:none; } } /* ---- 2. the tear ------------------------------------------------------- */ /* Theirs is baked into the alpha of a PNG. Ours is a path, about 1.6 KB, resolution independent and re-cuttable at any size from _tools/make_torn.py --seed N. That is the one place we are ahead of them. */ .rn-tear{ display:block; width:100%; height:clamp(3.5rem,7vw,7.5rem); margin-top:calc(-1 * clamp(3.5rem,7vw,7.5rem)); /* overlap the next block by a hair: without it, sub-pixel rounding on the SVG bottom edge draws a faint grey hairline the full width, which is the one thing a torn edge must never have */ margin-bottom:-2px; position:relative; z-index:2; pointer-events:none; } .rn-tear path{ fill:var(--paper,#fff); } .rn-tear--warm path{ fill:var(--rn-paper); } .rn-tear--band path{ fill:var(--rn-band); } .rn-tear--ink path{ fill:var(--rn-ink); } /* warm light along the rip. Fades back OUT at the bottom: an earlier version ended at full strength and the cut-off drew exactly the straight line the tear exists to remove. */ .rn-tear-glow{ position:relative; height:0; z-index:3; } .rn-tear-glow::before{ content:""; position:absolute; left:0; right:0; top:calc(-1 * clamp(3.5rem,7vw,7.5rem)); height:clamp(3.5rem,7vw,7.5rem); background:linear-gradient(to bottom, transparent 46%, rgba(201,169,110,.20) 86%, rgba(201,169,110,0) 100%); mix-blend-mode:screen; pointer-events:none; } @media (prefers-reduced-motion:reduce){ .rn-tear-glow::before{ display:none; } } /* ---- 3. the swash capital ---------------------------------------------- */ /* ⚠️ It goes on the PARAGRAPH, not the heading. Their rule is .narrative-2:first-letter at 70px, on 24px body serif, while the heading above stays a plain bold sans. I built it on the heading first, from screenshots, and that was wrong. The contrast between a clean heading and an ornamented paragraph under it is the entire effect. Use once per section at most. Their page spends it one time per chapter. */ .rn-illum::first-letter{ font-family:var(--rn-script); font-weight:400; font-style:normal; font-size:3.6em; /* ~70px against a 20px lede, their proportion */ line-height:.8; float:left; padding:.02em .1em 0 0; margin-left:-.04em; /* hang into the margin so it breaks the left edge */ color:var(--rn-accent); } @media (max-width:640px){ .rn-illum::first-letter{ font-size:2.8em; line-height:.84; } } /* centred text cannot carry a float without the rag going wrong */ .rn-illum--mid::first-letter{ float:none; font-size:2em; line-height:1; margin:0; padding:0; vertical-align:-.1em; } /* ---- 4. tightened headlines -------------------------------------------- */ /* Measured off .headline-1 to .headline-6: weight 700, line-height 0.9, tracking -0.03em. Most of the perceived quality is in that tightness. */ .rn-head{ line-height:var(--rn-head-leading); letter-spacing:var(--rn-head-tracking); font-weight:700; text-wrap:pretty; } .rn-lede{ line-height:var(--rn-lede-leading); letter-spacing:var(--rn-lede-tracking); text-wrap:pretty; }