/* ========================================================= 7 STAR WEB STUDIO - prototype styles (wd-s2) Dark theme. Brand red #CC0000. Glass + strong shadow. ASCII only. ========================================================= */ :root{ --bg:#0a0a0a; --bg-2:#111112; --red:#CC0000; --white:#ffffff; --gray:#a8a8a8; --gray-dim:#6c6c6c; --glass-bg:rgba(255,255,255,0.04); /* wd-s10: border .10 -> .14 and the top highlight .08 -> .20. Both are what "more defined" actually means on a frosted panel - the edge is the only thing separating it from the dark behind it. */ --glass-brd:rgba(255,255,255,0.14); --glass-hi:rgba(255,255,255,0.20); --glass-lo:rgba(0,0,0,0.32); --shadow-lg:0 24px 70px rgba(0,0,0,0.65); --shadow-md:0 8px 32px rgba(0,0,0,0.45); } *{box-sizing:border-box;margin:0;padding:0;} /* >> DELIBERATELY NOT HERE: `html{scroll-behavior:smooth}` (wd-s18). The GCH example site carries that line and this one must NOT, and the difference is the pinned hero. GCH runs no GSAP at all; this page pins its hero with ScrollTrigger (`pin:true, scrub:.7`), and ScrollTrigger writes the scroll position itself on every refresh and pin release. With a global smooth mode those writes become animations and the pin fights them. The travel is done per click in `assets/js/nav-scroll.js` instead - one explicit `scrollTo({behavior:"smooth"})`, which leaves ScrollTrigger's own scrolling alone. >> THIS IS THE "SAME NUMBER, DIFFERENT CONDITIONS" TRAP from the shared standard: the donor's declaration is right for the donor and wrong here. Do not add it back. */ /* >> STOPS iPHONE SAFARI RESIZING TEXT ON ITS OWN (wd-s30, owner - iPhone only). Without it, iOS will inflate text in some layouts, notably after the phone is turned sideways and back, so type renders LARGER than the stylesheet asks for. A heading measured to fit then no longer fits, and the stats headline broke mid-word on iPhone only while Android and every desktop browser tested were clean - Android ignores this property, which is exactly the split that was reported. It has no effect on any desktop browser, so it is mobile-only by nature. `100%` rather than `none`: `none` also blocks the visitor's own pinch-zoom text scaling on some versions. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;} /* >> THE 404 AND THE OTHER INNER PAGES PUT THE NEAR-BLACK ON THE ROOT, NOT ON `body` (owner, wd-s34 - the phone bug he photographed). On those pages the backdrop picture is a `z-index:-1` pseudo-element on `html`. That paints above the canvas but BELOW any background `body` paints inside its own box - so on a page shorter than the screen (the 404 is 406px of content in an 844px viewport) a phone painted body's near-black over the picture and left it showing only below the content. >> SCOPED BY `:not(:has(.bp-bg))`, THE SAME SELECTOR THE BACKDROP ITSELF USES, so the HOME PAGE IS EXCLUDED: it carries `.bp-bg`, its picture is an ``, and its own `body` background is what sits behind that. The shared `body` rule below is untouched. */ html:not(:has(.bp-bg)){background:var(--bg);} html:not(:has(.bp-bg)) body{background:transparent;} body{ background:var(--bg); color:var(--white); font-family:'Barlow',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* radial brand glow behind everything */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(60rem 40rem at 78% 18%, rgba(204,0,0,0.16), transparent 60%), radial-gradient(50rem 40rem at 12% 82%, rgba(204,0,0,0.07), transparent 60%); } /* ================= EXPERIMENT, wd-s23 SOSI 1 - THE BLUEPRINT BACKDROP HELD STATIC The backdrop stops travelling with the hero. It is the SAME picture the hero brings into focus; once the sequence completes and the stage unpins, it simply stays where it is and the rest of the site scrolls over it. >> THIS IS A LOOK-SEE, NOT A DECISION. Revert = delete this block, restore `.bp-bg{position:absolute}` and put the `` back inside `.bp-stage`, delete `assets/js/site-backdrop.js` and its script tag on the three pages. >> ONE IMAGE, PROMOTED TO FIXED - NOT A SECOND COPY UNDERNEATH. The first build of this put a separate fixed layer behind the whole page and left the hero's own backdrop where it was. Same picture twice: as the stage scrolls off, the hero's copy TRAVELS UP over a stationary copy of itself, which ghosts. **The backdrop the visitor watches come into focus has to be the one that stays**, so the `` is hoisted out of `.bp-stage` to body level and made `fixed`. Nothing about the sequence changes - during the pin the stage filled the viewport at top:0, so an absolute child of it and a fixed child of the viewport draw identically. >> IT HAD TO LEAVE `.bp-stage`, IT COULD NOT JUST BE SET TO `fixed` IN PLACE. `position:sticky` creates a stacking context. A `z-index:-1` child is trapped inside it, and the stage's own context paints at z=0 - ABOVE the static sections further down the page. The backdrop would have covered their text. Out at body level it is a sibling of the sections and -1 puts it genuinely behind them. >> Z-INDEX -1 DOES NOT HIDE IT. `body` carries `background:var(--bg)`, which propagates to the canvas, and the canvas paints BELOW negative z-index. The near-black stays as the fallback if the image ever fails to load. >> KNOWN CHANGE TO THE HERO, AND IT IS THE ONLY ONE: the red glow (`body::before`, z-index 0) now paints OVER the backdrop instead of behind the whole stage, so the hero's picture picks up a faint warm wash top-right. It cannot be avoided while the backdrop is behind everything - and with an opaque picture over the full viewport the glow has nowhere else to land, so tinting the picture is the only way it survives at all. ================================================================================== */ /* The two inner pages have no hero, so there is no sequence to inherit a backdrop from - they get the picture as a root layer, sharp from load. `:has()` scopes it: the home page is the only file carrying a `.bp-bg`. */ html:not(:has(.bp-bg))::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:url("https://media.7starwebstudio.com/7star/hero/bg-land.webp"); background-size:cover; background-position:center center; /* >> ONE BRIGHTNESS FOR THE PLATE, READ BY BOTH SURFACES THAT SHOW IT (wd-s24 SOSI 1). The home page paints this picture through `.bp-bg`, these two pages through this pseudo-element. Same photograph, two mechanisms - so the multiply is a custom property both read rather than a number typed in two places, or the inner pages quietly keep the old level the first time the hero's is tuned. `.bp-bg` in hero-blueprint-index.html carries the reasoning and the headroom. */ filter:brightness(var(--sbg-bright,1.6)); } @media (orientation:portrait){ html:not(:has(.bp-bg))::before{ background-image:url("https://media.7starwebstudio.com/7star/hero/bg-port.webp"); } } /* the veil, on every page - dialled by ?veil=N or ?pveil=N. >> IT ONLY EXISTS WHEN ONE IS ACTUALLY SET, AND THAT IS A PERFORMANCE RULE, NOT TIDINESS. A second full-viewport FIXED layer costs a full-viewport composite on every scroll frame whether it is painting black at 0.4 or painting nothing at 0. It was on for everyone by default at zero alpha - pure cost, no pixels. The script adds `.has-veil` only when a value is passed. */ html.has-veil::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:rgba(0,0,0,var(--sbg-veil,0)); } @media (orientation:portrait){ /* portrait gets its own value, because the shaft is a far bigger share of the frame here - see the PORTRAIT SHAFT note at the foot of this block */ html.has-pveil::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:rgba(0,0,0,var(--sbg-pveil,0)); } } /* >> A COMPOSITOR PROMOTION (`will-change:transform`) WAS ADDED HERE AND HAS BEEN REMOVED. It was a fix for a misdiagnosis. The reasoning was sound in general - an unpromoted fixed layer is repainted every scroll frame - but it was not what made this page sticky, and the owner had already told me the phone scrolled fine WITH the fixed backdrop in place. A promotion costs a full-screen texture in GPU memory, so it does not stay on the page as insurance against a cause we now know it does not address. >> IF A REAL FIXED-LAYER SCROLL COST EVER SHOWS UP, this is the first thing to try. It was not wrong, it was aimed at the wrong thing. */ /* ?bg=off - today's site, for the A/B. On the home page the script also puts the image back inside `.bp-stage`, so this restores the real previous behaviour rather than mimicking it. */ html.bg-off::before, html.bg-off::after{ display:none; } html.bg-off .bp-bg{ position:absolute; z-index:auto; } /* ---------- wd-s23 SOSI 1, ROUND 2 - the owner's section-by-section verdict ---------- Everything below is scoped `html:not(.bg-off)`, so `?bg=off` still restores the real previous page with none of it applied. >> THE POSITION THIS ROUND TAKES, AND IT IS THE OWNER'S, NOT A COMPROMISE: THE BACKDROP DOES NOT HAVE TO BE EQUALLY PRESENT ON EVERY SECTION. It earns its place on Portfolio and it is a liability on Pricing and Contact. That is the wd-s8 band alternation doing exactly the job it was built for - the bands decide where the fixed layer shows - so this extends that scheme rather than arguing with it. 1. PRICING AND CONTACT - the diagonal light shaft is the problem, not the picture. A FIXED backdrop pins that shaft to one place on screen forever, so on these two it cuts straight through a centred panel and leaves the left of the card darker than the right. Owner: "the diag line and lighting difference on either side of line." Pricing carries NO band today (wd-s8, deliberate) and Contact carries 0.50 - at 0.50 the shaft is halved, not removed. Both go to a heavier band, which flattens it. >> THIS OVERRIDES A LOCKED wd-s8 DECISION (Pricing is one of the three bare sections). If the backdrop stays, that needs a DESIGN.md row of its own - the reason bare mattered was a subtle glow behind it, and a photograph is not that. */ html:not(.bg-off) .offer, html:not(.bg-off) .contact{ background:rgba(0,0,0,var(--sbg-band,0.80)); } /* 2. THE FOOTER SPLIT. The footer carries no background at all - just the .5px top rule - so with Contact at a heavy band and the footer bare, the boundary reads as two different shades of background rather than as one page. Owner flagged exactly that. It takes the SAME value as Contact, from the same custom property, so the two cannot drift apart and the seam has nothing to show. */ /* >> THE FOOTER IS THE DARK CARD (owner, wd-s34). It was rgba(0,0,0,.80) flat - the only dark surface on the site that did not match the stat cards, the step cards, the example cards and the offer panel. Same gradient, same blur, same border colour as all four. */ html:not(.bg-off) footer{ background:rgba(0,0,0,var(--sbg-band,0.80)); } /* >> THE FOUR DARK CARDS' RECIPE, ON THE START PAGE ONLY (owner, wd-s34) - same gradient and blur as its stat tiles, example cards, step cards and offer panel. The home page keeps the flat rgba(0,0,0,.80) above, which is what the repo carries. One shared footer rule, so the change is scoped rather than written into it. */ html:not(.bg-off) body:has(.start-page) footer{ background:linear-gradient(180deg, rgba(32,32,37,.80), rgba(15,15,18,.88)); backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); } /* 3-5. TEXT OVER THE PICTURE, ON THE PORTFOLIO SECTION THE OWNER LIKES. All three of these were coloured against near-black and are now sitting on mid-cyan. >> THIS IS THE "SAME NUMBER, DIFFERENT CONDITIONS" TRAP FROM THE SHARED STANDARD, and the house already has the answer for it: the legibility text-shadow from the 7Star HTML Component Standards - "any text set over a photo/video". Copied value for value, not re-derived. 3. The heading. Owner: "the header could pop more, now that it's against the cyan bg", then later - once the two helper lines were approved - asked for the same treatment here. >> ONLY HALF OF THAT TREATMENT CAN APPLY, AND IT IS WORTH KNOWING WHICH HALF. The helper lines got a COLOUR lift plus a WEIGHT bump. This heading is already pure white, so there is no colour left to lift - white is the ceiling. The weight is the whole of it: 700 -> 800. >> 800 IS A REAL WEIGHT, NOT A SYNTHESISED ONE. The page loads Barlow Condensed at 400;600;700;800. Same check as the helper lines - a weight the link does not carry comes back as faux-bold, and smeared strokes on busy linework are worse than the drawn face one step down. >> THE SHADOW STAYS AND IS UNCHANGED. It is safe here in a way it is not under the deck: `.work h2` lives in `.work-head`, outside `.work-item`, so nothing re-rasterises it every frame. >> THE SIZE IS UNTOUCHED - it is a wd-s10 value. Weight thickens the strokes without changing how much room the line takes or where it wraps. */ html:not(.bg-off) .work h2{ font-weight:800; text-shadow:0 2px 12px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6); } /* 4. The helper line under the heading - APPROVED ON PHONE, THEN EXTENDED TO THE LAPTOP (owner, wd-s23: "make the same change for laptop also"). It went in behind an 820px media query so it could be judged on a phone alone; that query is gone and the three declarations sit on the one rule, at every width. >> THE COLOUR: `--gray-dim` is #6c6c6c, picked to sit quietly on #0a0a0a. On cyan it is not quiet, it is illegible - a dim grey needs a dark ground to read as grey at all. It lifts to #c9c9c9 and keeps the body-weight legibility shadow. >> THE WEIGHT DOES MORE THAN ANOTHER STEP OF BRIGHTNESS WOULD: the picture behind it is BUSY, not dark - blueprint linework runs straight through the letterforms - and against detail it is stroke thickness that separates type from its ground, not tone. Barlow 400 is a thin face at .98rem; 600 thickens every stroke without touching the size, so the line does not start competing with the heading above it. >> 600 IS A REAL WEIGHT HERE, NOT A SYNTHESISED ONE. The page loads Barlow at 300;400;500;600, so this is the drawn face. Asking for a weight the link does not carry gets a smeared faux-bold, which on a busy ground looks worse than 400. >> ONE RULE, ONE BREAKPOINT-FREE LOOK - AND THAT IS THE POINT OF FOLDING IT BACK IN. A phone-only override would have meant the same line reading two different ways on two devices, which is a second look for one element by accident rather than by decision. The house rule is one look per element type; the media query was a testing scaffold, not a design call. >> IT IS NOT INSIDE `.work-item`, WHICH IS WHY IT WAS THE SAFE ONE TO TRY FIRST. `.work-sub` lives in `.work-head`; the deck script rewrites `.work-item`'s transform every frame and never touches this. The link and the helper UNDER the deck do live in there, and they stay reverted until each is judged on its own. */ html:not(.bg-off) .work-sub{ color:#c9c9c9; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7); } /* 5. The quiet text link under the deck. >> THIS IS A DELIBERATE DEVIATION FROM THE 7 STAR QUIET TEXT LINK STANDARD, WHICH FIXES REST OPACITY AT .72. White at .72 over near-black is a quiet link; the same number over a lit photograph is a washed-out one. The standard's own wording already concedes the point - it changes colour on a light background - so this is the same allowance applied to a photographic one. Rest opacity goes to 1. >> THE COST, SAID OUT LOUD: the link's rest state and its HOVER state are now the same brightness, so hover is carried by the underline alone. The alternative is a link nobody can read at rest, which is worse. >> THE SHADOW IS THE ROUND-2 ONE, UNCHANGED - NOT DEEPENED. That matters: `.work-open` sits inside `.work-item`, whose transform the deck script rewrites every frame, so everything in it is re-rasterised per frame and a blurred shadow is the most expensive thing that can live there. Opacity is free; blur is not. Round 3 deepened this to a 10px blur AND added a second shadow below - that is what was reverted, and it is not coming back. >> WEIGHT IS ALREADY 600 FROM THE HOUSE QUIET-LINK RULE AND STAYS THERE. 700 was the obvious next step and is wrong: the page loads Barlow at 300;400;500;600 only, so 700 would be a synthesised faux-bold - smeared strokes, which on busy linework reads worse than the real 600. >> IF THE BACKDROP IS KEPT, THIS NEEDS A DESIGN.md ROW. A standard bent without a record is a standard that quietly stops existing. */ html:not(.bg-off) .work-open{ opacity:1; text-shadow:0 1px 8px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7); } /* 6. THE HELPER LINE UNDER THE DECK - now the same three declarations as the one under the heading: colour, weight, and the body-weight legibility shadow. `.work-tag` is `--gray-dim` too, and it sits below the deck where the backdrop is at its brightest, so it was the worst-off line in the section. >> THE SHADOW WAS HELD BACK AND HAS BEEN PUT IN. It was left off because this line lives inside `.work-item`, whose transform the deck script rewrites every frame, so a blurred shadow here is re-rasterised per frame - and that was my read on what made the owner's phone sticky. >> TWO THINGS KILLED THAT REASONING. The owner traced the stickiness to his phone's CACHE, not the code - it survived a full revert and went away when he cleared it. And `.work-open`, directly above this line, sits in the SAME `.work-item` and has carried the shadow throughout, on a page that scrolls fine. A cost one line can afford is not a cost its neighbour cannot. >> WHAT IS LEFT OF THE ORIGINAL CAUTION, BECAUSE IT IS STILL TRUE: blur radius is the expensive part and it is paid per glyph, per frame, inside a transformed layer. If scroll performance is ever genuinely in question again, the shadows INSIDE `.work-item` are the first place to look - and the fix is a zero-blur offset (`0 1px 0`), not deleting them. Round 3's mistake was a 10px blur, not a shadow. >> HIERARCHY IS UNCHANGED BY THIS: the link above is WHITE at full opacity, this is #c9c9c9 at .9rem, so the thing meant to be clicked is still the loudest thing under the card. */ html:not(.bg-off) .work-tag{ color:#c9c9c9; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7); } /* 6b. THE MARQUEE NAMES - wd-s24. RESTORING A PARITY, NOT SETTING A NEW LEVEL. wd-s18 put `.mq-item` on `--gray-dim` for one stated reason: to sit at exactly the same level as `.work-tag`, so a scrolling list of single words could not pull rank on the sentence that closes the section. Round 6 above then lifted `.work-tag` to #c9c9c9/600 and left the marquee on #6c6c6c/400 - so that decision quietly broke, and the strip has been the dimmest thing in the section since. >> NO SHADOW HERE, UNLIKE ITS TWIN ABOVE. These names sit inside `.mq-strip.glass`, and the standard excludes text on a glass panel - the panel IS the controlled surface. `.work-tag` needs one because it sits on the bare picture. */ html:not(.bg-off) .mq-item{ color:#c9c9c9; font-weight:600; } /* ---------- wd-s23 SOSI 1 - ROUND 3 REVERTED, AND WHY IT IS RECORDED RATHER THAN DELETED ROUND 3 was three readability tweaks on this section: `.work-sub` bolded to 600 and brightened, `.work-open` taken from .88 opacity to 1 with a deeper shadow, and a text-shadow added to `.work-tag` for the first time. All three are OUT. >> THE OWNER PINNED IT PRECISELY: the phone scrolled fine before those three, and was sticky immediately after. That is the evidence, and it beats my reasoning about fixed layers - which was aimed at the ORIGINAL backdrop change, something he had already been scrolling smoothly for two rounds. >> THE MECHANISM THAT FITS, AND IT IS THE ONE TO REMEMBER: `.work-open` AND `.work-tag` LIVE INSIDE `.work-item`, AND THE DECK SCRIPT REWRITES THAT ELEMENT'S TRANSFORM ON EVERY SINGLE FRAME. Anything inside it is re-rasterised every frame, and a BLURRED text-shadow is the most expensive thing you can put in that position - blur radius is the cost, and it is paid per glyph. Round 2 had one short one-line link carrying an 8px shadow and that was affordable. Round 3 added a second shadow on a full-width two-line paragraph and deepened the first to 10px. On a phone that tipped it over. >> SO: NO BLURRED TEXT-SHADOW ON ANYTHING INSIDE THE DECK RAIL. If those lines need to read against the picture, buy it with COLOUR, WEIGHT, or a ZERO-BLUR offset shadow (`0 1px 0`), which costs almost nothing. That is the retry, and it is not started. >> THE SHADOW BOXES THE OWNER SEES ABOVE AND BELOW THE DECK ARE THESE SAME SHADOWS. On a laptop these are short centred lines and a soft shadow reads as a shadow. On a phone they run full width and wrap, so four blurred wrapped lines merge into what looks like a dark rectangle. `.work-sub`'s round-2 shadow is the upper box and is still in place. ------------------------------------------------------------------------------------- */ /* ---------- wd-s23 SOSI 1, ROUND 4 - the two mobile findings ---------- >> THE PORTRAIT SHAFT - the "funky shading" under the deck, and it is NOT a CSS shadow. It is the backdrop's OWN diagonal light shaft. `bg-port.webp` carries a heavy dark band across its upper-middle, far wider as a share of the frame than the landscape file's, and a FIXED layer pins that band to one place on the screen forever. On a phone it lands directly under the slide deck. >> THIS IS THE SAME DEFECT THE OWNER ALREADY REJECTED ON PRICING AND CONTACT - "the diag line and lighting difference on either side of line". It reads worse in portrait because the shaft occupies more of the picture, which is why a section he LIKES on a laptop is the one showing it on a phone. `?pveil=N` flattens it portrait-only, so the laptop is untouched. It is a stopgap: the real fix is to even out the shaft in the image, the way the GCH material shots were flattened - and that is a decision, because it means regenerating an asset the locked hero sequence reads. Not started. >> THE GLASS DIAGNOSTIC. The nav and the marquee strip carry `backdrop-filter:blur(20px)`. That was cheap while the pixels behind them were flat near-black; behind a detailed photograph the browser now has a real blur to compute on every scroll frame, on the one element that is on screen the whole time. `?glass=off` kills every backdrop-filter on the page so the cost can be isolated in one reload. IT IS A TEST, NOT A FIX - the frosted nav is a house standard and this makes it plain glass. If it turns out to be the culprit, the answer is a decision about the blur radius on phones, not this switch. */ html.glass-off *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ---------- wd-s23 SOSI 1, ROUND 5 - THE TREATMENT GOES SITE-WIDE ---------- Owner, after approving all four lines on the Portfolio section: apply the same three declarations - colour, weight, shadow - across the whole site, the stats page included. >> THE RULE THAT DECIDES WHO GETS IT: THE SURFACE THE TEXT SITS ON, NOT WHAT THE TEXT IS. Text sitting DIRECTLY on the picture gets the treatment. Text on a frosted panel or on one of the heavy bands does not - it already has a surface between it and the picture, and changing it would be re-styling something that was approved and is not in trouble. That single test is what keeps this a scoped pass instead of a find-and-replace across 42 colour declarations. >> DELIBERATELY EXCLUDED, AND EACH FOR ITS OWN REASON: - EVERYTHING INSIDE A GLASS PANEL - the stat cards, the catalogue card, the price card, the contact form. Checked on screen: those panels render as near-black cards and their text is perfectly legible. The panel IS the surface. - PRICING, CONTACT AND THE FOOTER - they carry the 0.80 band, so they are near-black again. A shadow there would do nothing visible and a weight change would alter a look the owner has already signed off. - THE HERO - it has `.bp-scrim`, a purpose-built gradient behind its copy. Solved. - FORM PLACEHOLDERS, THE BROWSER-MOCK CHROME, THE STRUCK-THROUGH OLD PRICE. Bolding a placeholder makes it look like a filled field; bolding fake UI inside a screenshot makes it stop reading as a screenshot. >> ONE RULE PER ELEMENT TYPE, DECLARED ONCE, SHARED BY EVERY USE - the house rule, and the reason these are three grouped selector lists rather than a rule per page. A heading on the stats page and a heading on the home page are the same job; if they are ever to differ that is a decision, not an accident of having been written twice. >> TWO OF THE FIVE HEADINGS WERE ALREADY AT 800 (`.stats-head h1`, `.cat-head h1`), so for those this only adds the shadow. Declaring 800 on all five costs nothing and stops the set drifting apart later. */ /* headings - white already, so weight and shadow are the whole treatment */ html:not(.bg-off) .work h2, html:not(.bg-off) .say h2, html:not(.bg-off) .how h2, .faq h2, .start-head h1, .start-ex h2, .start-price h2, html:not(.bg-off) .stats-head h1, html:not(.bg-off) .cat-head h1, html:not(.bg-off) .cat-head h2, /* the stats page's own closing heading - "Let's build yours." It is the last thing on that page and the one the whole argument lands on, so leaving it off the list was a miss, not a scoping decision. Already 800 in its own rule; this only adds the shadow. */ html:not(.bg-off) .stats-close h2{ font-weight:800; text-shadow:0 2px 12px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6); } /* the small caps kicker above a heading. It is the worst-off text on the site - #6c6c6c, .76rem and letter-spaced, which spreads what little ink it has even thinner. Weight stays at its own 600; only the colour and the shadow change. */ html:not(.bg-off) .kicker{ color:#c9c9c9; text-shadow:0 1px 8px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7); } /* helper and intro copy sitting on the picture */ html:not(.bg-off) .say p, html:not(.bg-off) .how-sub, /* >> `.how-terms` - "Payment is simple: half to start, half before it goes live." - IS DELIBERATELY NOT IN THIS LIST (owner, wd-s23). It was added, seen, and taken back out. It is a TERMS line, not a helper line: it sits at the very bottom of How it works, below the four steps, and its job is to be available rather than to be read on the way past. Given the treatment it pulled level with `.how-sub` at the top of the section - two lines of equal voice bracketing the steps, which is not the hierarchy that section has. >> THE SCOPING RULE STILL HOLDS - it does sit on the picture, so by surface alone it qualifies. This is the exception the rule allows for: legibility is the floor, not the goal, and the quietest thing on a section is allowed to stay the quietest. */ html:not(.bg-off) .stats-intro, .start-intro, .start-sub, .start-stats-line, .start-note, .start-reply, html:not(.bg-off) .cat-intro{ color:#c9c9c9; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7); } /* the house quiet link, wherever it sits on the picture. `.work-open` is handled above with its own note; this is its opposite number in How it works. The two contact-form links are NOT here - they live on a glass panel inside a banded section. */ html:not(.bg-off) .how-next a{ opacity:1; text-shadow:0 1px 8px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7); } /* ===== WHERE AN ANCHOR JUMP STOPS - solved wd-s10, owner. Two attempts, and the second is the one that is right for a SEE-THROUGH nav. ATTEMPT 1 (wrong): `scroll-margin-top` big enough to clear the nav. It does clear it - but scroll-margin stops the SECTION'S TOP EDGE that far down the screen, so the strip above it is the BOTTOM OF THE PREVIOUS SECTION. Behind a frosted bar that is see-through, so the tail of the last section reads through the nav and a stray line of it sits just above it. The owner caught it on four separate jumps. ATTEMPT 2 (this one): stop at the very top - `scroll-margin-top:0` - and let the SECTION'S OWN TOP PADDING carry the clearance. The strip behind the nav is then the section's own empty padding, so there is nothing to read through the glass, and the heading clears the bar by design rather than by luck. >> THE RULE THIS LEAVES BEHIND: with a fixed TRANSLUCENT nav the clearance belongs to the SECTION, not to the scroll. Padding removes the problem; scroll-margin only moves it. Measured, not guessed: the nav's bottom edge is 78px on a laptop and 95px on a phone (it wraps to two rows there). The four target sections carry more top padding than that, leaving ~33px of air under the bar at either size. >> IF THE NAV'S HEIGHT OR ITS 1.1rem TOP OFFSET EVER CHANGES, RE-MEASURE AND RESET THOSE FOUR PADDINGS. */ [id]{scroll-margin-top:0;} /* ===== SECTION TEXT REVEAL (wd-s18) - the kicker, heading and helper line of every section rise into place as it arrives. Driven by `assets/js/section-reveal.js`. >> VALUES PORTED FROM THE7STARAGENCY.COM'S HERO TAGLINE, via the GCH example site which already carries this effect. 30px of rise, .6s ease, 28ms per character. Not re-derived - if one of these numbers is ever changed, GCH's `.char` rules are the other copy and the two are supposed to match. >> THE MASK IS THE HALF THAT MATTERS. `.rv-line` is `overflow:hidden`, so characters rise from behind its own bottom edge rather than fading in mid-air. Remove it and the whole thing collapses into an ordinary fade. The padding/negative-margin pair protects descenders from that same mask. >> KNOWN LIMIT, AND IT IS THE DONOR'S TOO: THE MASK IS PER LINE OF MARKUP, NOT PER LINE OF RENDERED TEXT. A heading broken with `
` gets one mask per line and the effect is exact. A heading that WRAPS on its own - the stats page's h1, or any heading on a narrow phone - is one mask around all of it, so its characters rise past each other inside the box instead of out from under a clean edge. It still reads as a rise; it is just softer. >> THE CHEAP FIX IS A `
` where the line should break. The expensive one is grouping characters by their measured `offsetTop` after layout and re-grouping on resize - real, but it is a different piece of work and it was not what was asked for. >> NOTHING HERE HIDES ANYTHING BY DEFAULT. Every class below is added by the script, so a blocked or failed script leaves the page fully readable, and a visitor who asked for reduced motion gets the untouched page - the script returns before it touches the DOM. That is why there is no `prefers-reduced-motion` block here: there is nothing to undo. */ .rv-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;} /* >> .5s, NOT THE DONOR'S .6s (owner, wd-s18 - "speed it up a little"). Its partner is STEP in section-reveal.js, which came down 28ms -> 20ms in the same pass. The two are one setting split across two files: the step decides how long the run takes, the duration decides how long each character takes to arrive. Change one without the other and the effect either bunches up or trails. */ .rv-char{ display:inline-block;opacity:0;transform:translateY(30px); transition:opacity .5s ease, transform .5s ease; } .rv-char.visible{opacity:1;transform:none;} /* the kicker and the helper line rise as whole blocks - a paragraph split per character reads as a gimmick, and the donor treats its sub-line exactly this way. 18px, not 30 */ .rv-block{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease;} .rv-block.visible{opacity:1;transform:none;} /* ================================================================================== THE HERO MARQUEE (wd-s18) - a `Built for` label, then the business types scrolling. >> MECHANISM COPIED FROM THE GCH EXAMPLE SITE'S REVIEWS STRIP, not written fresh. Source: `sites/example/gch-gangnam-chimaek-house/site/assets/css/style.css`, the `.marquee` block. Three rules came across with it and all three are load-bearing: 1. >> NO `will-change` AND NO `translateZ(0)` ON THE TRACK. It is thousands of pixels wide; promoting it to its own compositor layer asks the GPU for a texture past the size limit, the layer fails, and THE WHOLE STRIP PAINTS AS NOTHING. That failure looks like a gap in the loop, which sends you hunting in the wrong place. 2. >> THE LIST IS WRITTEN TWICE AND THE ANIMATION TRAVELS EXACTLY -50%, which lands on the duplicate's first item so there is no seam. 3. >> HALF THE TRACK MUST STAY WIDER THAN THE WIDEST SCREEN THIS IS SEEN ON, or the wrap point happens ON screen and opens a real blank band once per cycle - a bug that only appears on big monitors, so never on the machine it was built on. Thirty-four items is what keeps that margin; cutting the list back is what brings it back. >> THE PAUSE IS SCOPED TO THE WHOLE STRIP HERE, AND THAT IS A DELIBERATE DEPARTURE. GCH scopes its pause to `:has(.quote:hover)` because its strip sits inside a padded section with a heading, so a section-level hover froze the marquee while the cursor was nowhere near it. This strip has no padding and no heading - it IS the band, edge to edge and about 40px tall - so hovering it and hovering an item are the same gesture. ================================================================================== */ .mq-strip{ /* >> IT SITS BETWEEN THE PORTFOLIO DECK AND HOW-IT-WORKS, NOT IN THE HERO (owner, wd-s18). It was built in the hero first, under the animation frame, and moved after seeing it run. Three things were wrong there and only the last one is about taste: - the frame's payoff is the moment meant to be watched, and a moving band directly under it gives the eye two things moving at once; - it answers "is this for me?" before the visitor has been told who is talking, which is the same objection that cut the button and the scroll cue from that spot in wd-s4; - the reference site the owner brought this idea from runs its own marquee AFTER its work showcase, not in its hero. It reinforces a case already made. Down here it is doing that job: the visitor has just seen the examples. >> AND IT LIVES INSIDE `.work-stage`, THE PINNED PART - not after the section. Sitting between the two sections it was only ever on screen in the dark gap between them, so the deck it is meant to sit under had already scrolled away by the time it appeared. Inside the stage it is pinned WITH the cards and is on the same screen as them the whole time the section holds, which is the point. >> `margin-top:auto` PUTS IT ON THE STAGE FLOOR. The stage is a centred flex column, so an auto margin on the last child absorbs the free space and the cards stay centred in what is left - nothing has to be measured against the stage height. >> IT IS A FROSTED BAR NOW, NOT A FULL-BLEED BAND (owner, wd-s18). It carries the shared `.glass` class - the same one the nav, the price card and the contact panel carry - so it cannot drift from them, and the geometry below matches `.nav` exactly rather than approximately. The red rule above and grey rule below are gone; the panel's own border and its four shadows do that job, and doing it twice was what made the old version read as a divider rather than an object. >> WHICH MEANS IT STOPS BEING EDGE TO EDGE, AND THAT IS THE POINT OF THE CHANGE. A band runs to the screen edges; a bar sits ON the page with its corners showing. >> AND THE SIDE MARGINS ARE ZERO, WHICH LOOKS LIKE A DETAIL AND IS ACTUALLY THE FIX FOR THE CLIPPED CORNERS. They were -.1rem, to close the 0.1rem gap between `.work`'s 1.5rem padding and the nav's 1.4rem inset so the bar lined up with the nav down both edges. But `.work-stage` is `overflow:hidden` - it has to be, the deck's outgoing cards fly out through it - and a negative margin puts the bar 1.6px OUTSIDE the box that is doing the clipping. Measured: stage 24.0 to 1341.0, strip 22.4 to 1342.6. So exactly 1.6px was being sliced off each rounded corner, which is what reads as "cut off at the very ends". >> THE NAV ALIGNMENT IS THE THING GIVEN UP, AND IT IS THE RIGHT ONE TO GIVE UP: 1.6px on a 1320px bar is not visible, a chopped corner is. Do not put the negative margin back without also giving the stage that much horizontal padding to clip against. >> AND THE AUTO TOP MARGIN IS WHAT BRINGS THE DECK UP. An auto margin makes the stage ignore its own `justify-content:center`, so the heading, helper line and cards pack to the TOP of the stage and all the leftover height collects above the strip. That is the owner's ask - the whole portfolio group moves up, and the strip sits on the floor with both of them on one screen. >> BOTH SIDE MARGINS ARE `auto`, NOT JUST THE TOP (owner, wd-s18 - the bar was sitting right under the helper line). It was `auto 0 3rem`, which sent ALL the leftover height above the bar and pinned it 3rem off the floor - so on a shorter window there was nothing left to send and the gap above collapsed. Measured: 89px at 1920x1080, 59 at 1440x900, 25 at 1512x850 and **4px at 1280x720**. That is the complaint, and it is a window-height problem, not a spacing value. >> `auto` ON BOTH SIDES SPLITS THE LEFTOVER EVENLY INSTEAD, so the bar self-centres between the helper line and the bottom edge at ANY window height and cannot close up on either. Same technique as the hero stat line on a phone, and the same reason: a fixed margin can only be right at one screen size. >> AND THE DECK STILL PACKS TO THE TOP, which is the job the original auto margin was doing. ANY auto margin defeats the stage's `justify-content:center` - it does not have to be the top one - so nothing above the bar moves. */ margin:auto 0; /* >> `align-self:stretch` IS THE FIX FOR A REAL BUG, NOT A TIDY-UP. `.work-stage` sets `align-items:center`, so this strip did NOT take the stage's width the way it did in the hero - it sized to its own contents, which is the entire scrolling track, thousands of pixels wide. Centred, that put the `BUILT FOR` label far off the left edge of the screen and the strip started mid-list. The label is the one thing that stops this reading as a client logo wall, so losing it is a hard rule 3 problem, not a cosmetic one. >> AND IT IS THE "SAME DECLARATION, DIFFERENT CONDITIONS" TRAP. Nothing about the strip changed when it moved out of the hero; the hero's flex container simply has no `align-items`, so the default stretch was doing this silently. `min-width:0` on the window below is the other half - a flex item will not shrink under its content width without it, so the strip would still have been track-wide. */ align-self:stretch; /* >> THE OUTER LAYER IS A SURFACE, NOT THE BAR ITSELF (owner, wd-s18 - he pointed at the "See the numbers" CTA and asked for that arrangement). That control is a frosted pill, `.say-cta-bar`, with a liquid-glass button sitting on it. Here the same two layers hold the label and the moving list: `.mq-strip` is the surface, `.mq-inner` is the object. >> ROUNDED RECTANGLE, NOT A PILL. A full 999px was tried and the owner's call was that the semicircular ends were too much for a bar this long; 14px is the nav's own radius. >> AND THE PADDING IS THIN ON PURPOSE - "less of the surface area of that edge visible". The CTA shows .55rem of surface all round its button, which is right for something the size of a button; on a bar this wide the same ring reads as a frame. .3rem leaves a hint of the surface at the edge, which is all the layering needs to register. */ display:flex;align-items:center; /* >> NO BORDERS OF ITS OWN. `.glass` supplies the border and the inset pair; adding a red top rule back would sit on top of the panel's lit top edge and flatten it. The two rules this replaced were a previous, non-glass version of the same idea. */ overflow:hidden; } /* the object that sits ON the surface - it carries `btn-liquid` in the markup, so its depth is the house button treatment and there is no second copy of those eight shadows */ /* >> BOTH SELECTORS BELOW CARRY TWO CLASSES, AND THAT IS NOT STYLE - IT IS THE ONLY WAY THEY WIN. `.glass` and `.btn-liquid` are both defined LATER in this file, so at equal specificity file order decides and every value here was being thrown away: the bar kept `.glass`'s 16px radius and the inner kept `.btn-liquid`'s 999px pill and its button padding. Measured in the browser, not spotted by reading. Same trap the hover/active note further down describes - it has now cost time twice in this file. */ .mq-strip.glass{ padding:.3rem; border-radius:14px; /* >> A SANCTIONED DEVIATION FROM THE SHARED GLASS FILL, AND IT IS RECORDED IN DESIGN.MD (owner, wd-s18 - "make the frosted effect darker for this marque, i think drawing eye away from examples"). The house recipe says the fill and blur do not change, and that holds for every other surface on the site. This one earns the exemption on POSITION: every other glass panel is the thing being looked at, and this one sits directly under the deck whose entire job is to be looked at. A bar at the shared brightness with a red glow around it wins that fight, which is backwards. >> THE STRUCTURE IS UNTOUCHED - `.glass` still owns all four shadows and the border, and the top-edge highlight is dimmed by redefining its TOKEN here rather than by rewriting the shadow. Change the shared recipe and this still follows it. >> AND THE TOP-EDGE HIGHLIGHT IS THE ONE VALUE THAT CAME BACK UP - .10 to .14, against the shared .20 (owner, wd-s18: the bar reads dark enough now but the frosted depth got lost with it). THE FILL STAYED DARK. That split is the house standard's own point: the inset pair is what makes a panel read as a solid object with thickness, and raising the fill alpha to buy back "solidity" is named in the parent brand file as the wrong fix. So the edge is what gets restored and the surface stays down - the dimming survives, the depth comes back. >> THE OTHER TWO OPTIONS ON THE TABLE WERE DECLINED. A red rule inside the container is the thing removed earlier this session and the reason has not changed: the panel's own border and lit edge already draw that line, doing it twice reads as a divider rather than an object, and brand red on a supporting strip is the same "look at me" signal the glow was just taken down for. Lifting the fill was the other, and it is the wrong lever - see above. ONE VALUE MOVES THIS: `--glass-hi` on this rule. Nothing else. */ --glass-hi:rgba(255,255,255,0.14); /* >> LIGHTENED .26 -> .14, wd-s24 (owner). This softens the wd-s18 dimming above rather than cancelling it - the fill is still a dark tint, not the house white one, so the bar still sits under the deck rather than competing with it. >> WHY THE wd-s18 REASONING SURVIVES A CHANGE OF VALUE: that call was made against a NEAR-BLACK backdrop, where .26 read as a subtle darkening. The backdrop is now a lit picture at 1.6x, and against that the same .26 reads as a heavy black slab. Same intent, different ground, different number. Steps if it wants to go further: .10, then .06, then `var(--glass-bg)` for the house recipe - at which point the wd-s18 deviation is gone and DESIGN.md row 77 needs updating. */ background:rgba(0,0,0,0.14); } .mq-strip .mq-inner{ display:flex;align-items:center;gap:1.1rem; width:100%;min-width:0; padding:.55rem 1.2rem; /* 14px outer minus the .3rem ring - concentric, or the corners look wrong against it */ border-radius:10px; overflow:hidden; /* it is a div wearing a button's class - it must not offer a button's pointer */ cursor:default; /* >> THE SAME EIGHT LAYERS `.btn-liquid` DECLARES, WITH THE WHITES HALVED AND THE RED GLOW TAKEN DOWN FROM .22 TO .07. The order and the geometry are copied exactly so the object still reads as the house button; only the intensity moves. The red glow is what was actually pulling the eye - it is a halo, and a halo on a supporting element under a showcase is the wrong signal. It is kept rather than deleted because at .07 it is what stops the bar looking grey. */ box-shadow: 0 0 8px rgba(0,0,0,0.10), 0 3px 10px rgba(0,0,0,0.35), inset 3px 3px .5px -3.5px rgba(255,255,255,0.28), inset -3px -3px .5px -3.5px rgba(255,255,255,0.28), inset 1px 1px 1px -.5px rgba(255,255,255,0.18), inset -1px -1px 1px -.5px rgba(255,255,255,0.18), inset 0 0 8px 7px rgba(255,255,255,0.03), 0 0 14px rgba(204,0,0,0.07); } /* >> THE INNER LAYER'S BACKDROP BLUR IS REMOVED, AND IT DOES TWO JOBS AT ONCE. `.btn-liquid::before` frosts what is behind the button. Here that is the strip, which is ALREADY frosting the page behind it - so this was a blur sampling an already-blurred surface, contributing almost nothing visually while costing a full backdrop re-sample. 1. IT IS HALF THE DIM. A flat dark fill instead of a white one is what takes the object itself down without touching the text on it. 2. IT IS THE CHOPPY SCROLLING (owner, wd-s18 - "the auto scroll of names"). A `backdrop-filter` has to re-sample everything behind it EVERY FRAME the content on it moves, and this bar had two of them stacked, over a section that is already running a scroll-driven rAF loop writing transforms to five deck cards. That is the frame budget gone. One backdrop-filter on the outer surface is what the look needs; the second was paying full price for nothing. >> DO NOT "RESTORE" THIS TO MATCH `.btn-liquid`. It is a deliberate removal on this one element, for an element that is not a control. */ .mq-strip .mq-inner::before{ background:rgba(0,0,0,0.24); backdrop-filter:none; -webkit-backdrop-filter:none; } /* >> THE BUTTON BEHAVIOUR IS SWITCHED OFF, AND IT HAS TO BE. `.btn-liquid` grows on hover and dips on press because it is a control; this bar is not one, and a strip that swells when the cursor crosses it reads as a broken link. Specificity, not `!important` - two classes beat the one on `.btn-liquid:hover`. */ @media (hover:hover) and (pointer:fine){ .mq-strip .mq-inner:hover{transform:none;filter:none;} } .mq-strip .mq-inner:active{transform:none;filter:none;} /* >> THE LIST FADES OUT AT BOTH ENDS RATHER THAN BEING SLICED (owner, wd-s18 - "cutting off slightly the very ends"). With a hard clip a name is cut through mid-letter at the moment it leaves, which reads as a rendering fault rather than as motion. The mask takes the last 28px at each end down to nothing, so words arrive and leave instead of being chopped. */ .mq-view{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%); } /* >> THE LABEL SITS OUTSIDE THE SCROLLING TRACK AND NEVER MOVES, AND THAT IS A HARD RULE 3 MATTER, NOT A LAYOUT ONE. A bare row of business names under a hero reads as a client logo wall; we have no clients. The label is the whole difference between "who we serve" and "who we have served", so it must be on screen at every moment of the loop - which it cannot be if it scrolls. */ .mq-label{ flex:0 0 auto; font-family:'Barlow Condensed',sans-serif;font-weight:700; font-size:.8rem;letter-spacing:.2em;text-transform:uppercase; /* >> wd-s27 - THE SAME TREATMENT AS THE 84% LINE, value for value. Brand red is darker than the backdrop it sits on and near-opposite it in hue, so it vibrates rather than separates; the tight achromatic halo gives every letter a neutral edge and lets the colour stay saturated. Safe to carry a blurred layer because the LABEL IS STATIC - it sits outside `.mq-track`, which is the part that moves. Never copy this onto anything inside the track: blur is paid per glyph per frame. */ color:#FF2A2A; text-shadow: 0 1px 0 rgba(0,0,0,.95), 0 -1px 0 rgba(0,0,0,.95), 1px 0 0 rgba(0,0,0,.95), -1px 0 0 rgba(0,0,0,.95), 0 1px 6px rgba(0,0,0,.85); } /* the window the track moves behind - the strip's own overflow would clip the label too. `min-width:0` lets it shrink below the track's width; without it the flex item refuses to go under its content size and the whole strip grows to thousands of pixels. */ .mq-view{flex:1 1 auto;min-width:0;overflow:hidden;} /* >> NO `will-change` AND NO `translateZ(0)` ON THIS ELEMENT. THIS IS THE OBVIOUS FIX FOR A CHOPPY MARQUEE AND IT IS THE WRONG ONE HERE - GCH ALREADY PAID FOR THAT LESSON. Promoting a track to its own compositor layer asks the GPU for a texture as wide as the track, doubled on a 2x display. GCH's reviews strip is about 7,900px, so 15,800px, which is past the limit: the layer fails and THE WHOLE STRIP PAINTS AS NOTHING. That is written up in `sites/example/gch-gangnam-chimaek-house/site/assets/css/style.css` above its own `.marquee`, and the symptom there was read as "a large gap in the loop" for a while before anyone worked out the cards simply never drew. >> THIS TRACK IS 6,200px, WHICH IS THE SAME NEIGHBOURHOOD, AND THE FAILURE IS INVISIBLE TO EVERY CHECK WE CAN RUN. It needs a real 2x display to show up; a headless screenshot at 1x renders it perfectly. Measured, then left unpromoted on GCH's evidence rather than on a test we cannot perform. >> THE CHOPPINESS FIX IS THE `backdrop-filter` REMOVAL ON `.mq-inner::before` INSTEAD, and that is also GCH's answer, arrived at independently on that site: "Do not put backdrop-filter back on a MOVING element." Same conclusion, same reason. */ .marquee{display:flex;width:max-content;} .mq-item{ /* >> `--gray-dim`, NOT `--gray` (owner, wd-s18). At `--gray` the business names were BRIGHTER than `.work-tag` directly above them - the section's own closing line - so a scrolling list of single words was pulling rank on the sentence that finishes the section. Matching `.work-tag` exactly puts them at the same level in the hierarchy, which is where a supporting strip belongs. */ font-family:'Barlow',sans-serif;font-size:.86rem;color:var(--gray-dim);white-space:nowrap; } /* >> THE SEPARATOR IS A DRAWN CIRCLE, NOT A TYPED BULLET (owner wants a coloured bullet). Drawn rather than typed for two reasons: a real box takes an exact size and sits on the optical centre, where a text bullet's size and baseline are whatever the font decides; and the bullet character is non-ASCII, which the house rule keeps out of source files. Generated rather than written into the markup so the list stays a clean set of names - add or remove an item and the dividers look after themselves. */ .mq-item::after{ content:"";display:inline-block;vertical-align:middle; width:5px;height:5px;border-radius:50%;background:var(--red); margin:0 .85rem; } @media (prefers-reduced-motion: no-preference){ /* 90s -> 70s (owner, wd-s18 - "speed up slightly") */ .marquee{animation:mq-slide 70s linear infinite;} } /* >> NO PAUSE ON HOVER, AND IT WAS REMOVED ON PURPOSE (owner, wd-s18). The donor pauses because its items are REVIEWS - text somebody may want to stop and finish reading. These are single words, nothing is clickable, and there is nothing to stop for; a strip that halts under the cursor just reads as broken. Do not port GCH's `:has(.quote:hover)` rule across on the grounds that the donor has it. */ /* >> REDUCED MOTION LEAVES THE LIST STATIC RATHER THAN HIDING IT. The first few items stay on screen and say who this is for, which is the point of the strip; only the travel is removed. That is why the animation lives inside a `no-preference` query rather than being switched off in a `reduce` one. */ @keyframes mq-slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ---------- shared glass ---------- >> ONE RECIPE FOR EVERY FROSTED SURFACE ON THE SITE (locked wd-s10, owner). The nav, the how-it-works cards, the price card, the contact panel, the button pills and the catalog cards all carry this class, so they can never drift apart - change it here and they all move together. >> THE FOUR SHADOWS ARE WHAT MAKE IT READ 3D, and they are two separate jobs: 1+2. OUTSIDE - a wide soft shadow that lifts the panel off the page, plus a tight one directly under it that stops it looking like it is floating in space. 3+4. INSIDE - a bright line on the TOP edge and a dark line on the BOTTOM edge. That pair is the whole illusion: it says the light is above and the panel has thickness. It is the same pair the parent brand standard puts on every button, which is why the buttons always looked more solid than the panels did. The fill and the blur are deliberately NOT changed - the nav has to stay see-through. */ .glass{ background:var(--glass-bg); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border:1px solid var(--glass-brd); border-radius:16px; box-shadow: var(--shadow-md), 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 var(--glass-hi), inset 0 -2px 0 var(--glass-lo); } /* >> THE ONE EXEMPTION: the meter pills on why-a-website.html. That page is a LAST KNOWN GOOD and is not being reopened, and a 26px-tall bar does not want a panel's depth on it - the inset bottom line alone would eat a tenth of its height. It keeps the original two. */ .meter.glass{ border:1px solid rgba(255,255,255,0.10); box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08); } /* ---------- nav ---------- */ .nav{ position:fixed;top:1.1rem;left:1.4rem;right:1.4rem;z-index:50; display:flex;align-items:center;justify-content:space-between; gap:1.5rem;padding:.7rem 1.1rem;border-radius:14px; } /* wd-s8: this is an to the home page on every page. It must not pick up link colour or an underline - the wordmark's red 7 is set by its own span and would be overridden. */ .nav-logo{display:flex;align-items:center;gap:12px;min-width:0; text-decoration:none;color:var(--white);transition:opacity .2s;} /* mouse-only, see the HOVER AND PRESS block above `.btn-liquid` */ @media (hover:hover) and (pointer:fine){ .nav-logo:hover{opacity:.82;} } .nav-logo:active{opacity:.7;} .nav-logo img{width:42px;height:auto;display:block;flex-shrink:0; filter:drop-shadow(0 3px 10px rgba(0,0,0,0.7));} .nav-wordmark{ font-family:'Barlow Condensed',sans-serif;font-weight:700; font-size:20px;letter-spacing:.15em;text-transform:uppercase; white-space:nowrap; } /* the 7 runs slightly larger than the rest of the wordmark (owner, wd-s3). `em` here is relative to .nav-wordmark's own size, so it scales with the mobile override too. */ .nav-wordmark .seven{color:var(--red);font-size:1.14em;line-height:1;} .nav-links{display:flex;gap:1.6rem;} .nav-short{display:none;} .nav-links a{ white-space:nowrap; color:var(--gray);text-decoration:none;font-size:.9rem;font-weight:500; transition:color .2s; } /* mouse-only, see the HOVER AND PRESS block above `.btn-liquid` */ @media (hover:hover) and (pointer:fine){ .nav-links a:hover{color:var(--white);} } .nav-links a:active{color:var(--white);} /* ---------- liquid glass button ---------- */ .btn-liquid{ /* inline-flex + no underline so the SAME class works on a