@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype"); font-weight:500; font-style:italic; font-display:swap; } @font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype"); font-weight:600; font-style:italic; font-display:swap; } @font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; } :root{ --gold:#7E3187; --gold-bg:#7E3187; --ink:#f6f1e8; --muted:rgba(246,241,232,.68); --line:rgba(126,49,135,.30); --panel:rgba(16,16,16,.42); --glass:rgba(255,255,255,.075); --stage-scale:1; } *{box-sizing:border-box} /* REVERTED, per Dave (urgent regression report): "the upper darkening bar scrolls out of the picture now instead of being pinned/locked - I did not ask for that." Root cause of THAT bug: the `overflow-x:hidden` this comment used to add to (below) does more than clip horizontal overflow - per spec, giving the root element any non-visible overflow value makes it establish its OWN scrolling box, which in some engines breaks `position:sticky` on descendants like .wg-topbar (the header relies on sticking within the normal viewport-as-scroller behavior that a plain, un-overridden provides). That's a much worse, highly-visible bug than the rare ~60-70px phantom horizontal scroll it was meant to fix, so it's reverted here - back to relying on 's own overflow-x:hidden below (which was already there before that round and never caused this problem) as the primary guard. If the phantom horizontal scroll resurfaces, the safer next step is hunting down the actual offending "100vw" full-bleed element rather than touching 's overflow again. */ html{scroll-behavior:smooth;background:#2a2a2a;} body{ margin:0; min-height:100vh; color:var(--ink); font-family:"Plus Jakarta Sans"; background:#2a2a2a; overflow-x:hidden; max-width:100%; letter-spacing:.012em; } .page-bg{ position:fixed; inset:0; z-index:-2; background: radial-gradient(circle at 18% 15%, rgba(126,49,135,.095), transparent 30%), radial-gradient(circle at 78% 22%, rgba(190,190,190,.09), transparent 34%), linear-gradient(135deg, #222222 0%, #343434 48%, #2a2a2a 100%); } .page-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.24)); backdrop-filter:blur(0px); } .wg-topbar{ position:sticky; top:0; z-index:50; /* Bug fix, per Dave: "on this size window you have the waltersgroup growing and growing so it grows out of the background darkening box." Root cause: this box uses global box-sizing:border-box (see the *{} rule at the top of this file), so a fixed height:96px with an 18px bottom padding only leaves 78px of real content room from the top edge down to where the padding starts. The logo's real aspect ratio (164.344 x 36.512 per its SVG viewBox) puts it at ~82.6px tall at its 20%-bigger 372px max width (see the min-width:761px .wg-logo override later in this file) - ~4-5px taller than that 78px content room at the wider end of its vw-based scaling range, so it visually spilled past the padding into/past the bottom edge of the dark gradient background at those in-between window widths. Switched height to min-height so the bar itself grows just enough to always contain the logo (still 96px at every width where the smaller/un-scaled logo already fit), rather than clipping/overflowing a fixed box. */ min-height:96px; display:flex; align-items:flex-start; justify-content:space-between; padding:0 clamp(22px,4vw,64px) 18px 40px; background:linear-gradient(180deg, rgba(42,42,42,.72), rgba(42,42,42,.26)); backdrop-filter:blur(18px); border-bottom:6px solid rgba(255,255,255,.3); } /* Fix, per Dave: "Waltersgroup logo can move up 7px and be 25% smaller too on that base page (not inside pmts)" - scoped to this marketing/ base-page file only (tunnel.css's own header markup is untouched). Width clamp scaled to 0.75x across the board (190->143, 18vw->13.5vw, 310->233); margin-top:-7px nudges it up within the topbar's flex row without affecting the row's own height/other content. */ .wg-logo{width:clamp(143px,13.5vw,233px);max-width:52vw;height:auto;filter:brightness(1.06);display:block;margin-top:-7px;} .wg-logo-link{display:inline-block;line-height:0;text-decoration:none;} .wg-nav{display:flex;gap:10px;align-items:center;margin-top:18px;font-family:"Plus Jakarta Sans", Arial, sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,241,232,.78)} .wg-nav a{color:inherit;text-decoration:none;padding:10px 13px;border-radius:999px;transition:.25s ease} .wg-nav a:hover{color:var(--gold);background:rgba(255,255,255,.06)} .wg-nav .pill{border:1px solid rgba(255,255,255,.23);background:rgba(255,255,255,.06)} main{padding:clamp(6px,2.4vw,42px) clamp(18px,4vw,64px) 90px} /* v24: shift all below-nav content upward for a stronger initial reveal on arrival. */ .hero{max-width:1760px;margin:0 auto} /* v1018: eyebrow ("WEBSITE REDESIGN PROPOSAL") removed from all client pages per Dave - pull the hero copy block up a bit further on desktop to fill the freed space, since removing the eyebrow div alone only recovers its own height. Mobile untouched (eyebrow was already display:none there since v539). */ @media (min-width:761px){ .copy-block{ margin-top:-14px; } } .copy-block{max-width:1420px;margin:0 0 26px 0;text-align:left} .eyebrow{ display:inline-block; color:var(--gold); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:17px; } /* v539: drop the "WEBSITE REDESIGN PROPOSAL" eyebrow on mobile - it isn't necessary at that size and just pushes the before/after comparison further below the fold. */ @media (max-width:640px){ .copy-block .eyebrow{ display:none !important; } } h1{ font-family:"Plus Jakarta Sans", Arial, sans-serif; margin:0; font-size:clamp(42px,5.6vw,82px); line-height:.94; font-weight:500; letter-spacing:-.045em; max-width:1120px; } .headline-soft{color:rgba(246,241,232,.76);} .headline-punch{color:#ffffff;} .lead{ margin:25px 0 0; max-width:760px; font-family:"Plus Jakarta Sans", Arial, sans-serif; color:var(--muted); font-size:clamp(16px,1.6vw,21px); line-height:1.55; } .lead--below-compare{ margin-top:22px; max-width:640px; } /* Per Dave: this paragraph now sits over the dark comparison photo background instead of the solid hero background it used to live on - the site-wide ".lead{color:rgba(84,98,107,.74) !important}" rule further down this file (the "Subtle gray text balance" block) reads as dim/faded there. Compound selector (two classes) beats that rule's specificity so this one instance goes solid white without touching the shared rule every other .lead on the site still relies on. */ .lead.lead--below-compare{ color:#fff !important; } @media (max-width:760px){ .lead--below-compare{ margin-top:18px; } } /* Per Dave (desktop only - .comparison-card runs full-bleed edge-to-edge here by design, so this text block inherits zero side gutter from its parent and was running flush against the browser edge). Adds real side padding, and drops the type down from .lead's normal clamp(16px,1.6vw,21px) to a smaller fixed size matching the other overlay caption text on this same photo (.comparison-head p is 14px) - this is a caption over a photo now, not body copy, so it reads better smaller. box-sizing so the padding doesn't blow max-width back out past 640px. */ @media (min-width:761px){ .lead--below-compare{ box-sizing:border-box; padding:0 48px; font-size:16px; /* Per Dave: pull the caption up so it sits right under the laptop's keyboard edge (was 22px below the image crop, now tucked closer), shift it right within the full-bleed dark backdrop, and widen the block so the line count drops from 5 lines to 4 or fewer. */ margin-top:-8px; margin-left:30px; max-width:820px; } } .comparison-card{ position:relative; overflow:visible; border-radius:0; padding:0; background:transparent; border:none; box-shadow:none; } .compare-layout{ position:relative; display:block; } .compare-main{ min-width:0; width:100%; } .comparison-card::before{display:none} .comparison-head{ position:absolute; z-index:40; top:clamp(104px,7.2vw,148px); left:calc((1608px * var(--stage-scale)) + clamp(30px, 2.2vw, 42px)); right:auto; width:min(360px, calc(100% - ((1608px * var(--stage-scale)) + clamp(30px, 2.2vw, 42px)) - 22px)); min-width:240px; padding-left:0; box-sizing:border-box; display:flex; flex-direction:column; gap:10px; align-items:flex-start; text-align:left; pointer-events:none; } .small-label{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:#ffffff} h2{font-family:"Plus Jakarta Sans", Arial, sans-serif;margin:2px 0 0;font-size:clamp(24px,2.35vw,38px);line-height:1.08;font-weight:500;letter-spacing:-.03em;max-width:11ch} .comparison-head p{font-family:"Plus Jakarta Sans", Arial, sans-serif;margin:0;color:rgba(246,241,232,.66);font-size:14px;line-height:1.6;max-width:360px} .compare-shell{position:relative;z-index:2;width:100%;overflow:visible;border-radius:0;background:transparent;box-shadow:none} /* v1215, per Dave: was 1140px - see the matching baseH comment in main-v114.js (resizeStage() sets this element's height inline via JS, which always wins over this stylesheet value - both had to move together). Kept in sync here as the pre-JS fallback. */ .stage-holder{position:relative;width:100%;height:calc(1300px * var(--stage-scale));overflow:hidden;background:#fff;touch-action:pan-y} .stage-fixed{position:absolute;left:0;top:0;width:2000px;height:1402px;transform:scale(var(--stage-scale));transform-origin:top left;overflow:hidden;background:#fff;--split:1000px} .scene{position:absolute;inset:0;z-index:1} .scene-after{clip-path:inset(0 0 0 var(--split));z-index:2} .screen{position:absolute;overflow:hidden;background:#fff;z-index:1} .laptop-screen{left:363px;top:298px;width:1080px;height:676px} .phone-screen{left:1542px;top:585px;width:206px;height:451px;border-radius:26px} .before-screen{display:flex;align-items:flex-start;justify-content:center;background:#fff} .before-screen img{width:100%;height:100%;object-fit:contain;object-position:center top;background:#fff} .laptop-screen.before-screen img{object-fit:cover;object-position:center top;padding:0;background:#fff} .phone-screen.before-screen img{object-fit:cover;object-position:center top} /* FIX, per Dave: "white screen for two or three seconds, then the HTML website with a video pops in - looks terrible... wanted to show black first." Root cause: the shared .screen rule (base class both .before-screen and .after-screen use) hardcodes background:#fff - correct for .before-screen (a real photo needs a white matte behind it while it loads), but .after-screen has no photo at all, just an iframe showing the live redesigned site - so for those 2-3 seconds before the iframe's own page paints, the visible background is this shared white, not the iframe's own background:#000 below (which only applies once the iframe itself has something to render). Overriding just .after-screen (not the shared .screen rule, which would also turn .before-screen's photo-loading matte black) to black closes that gap - now black shows through immediately, then the iframe's real content replaces it. */ .after-screen{background:#000} /* REMOVED (2026-07-29, later), per Dave: the black cover-until-loaded overlay that used to sit here (a ::after covering the iframe until main-v114.js added .is-iframe-loaded on its 'load' event) was producing a multi-second black hold on both the laptop and phone - worse than the plain white-flash it was meant to fix. Dave's own "Your new website" tunnel-wizard monitor (assets/shared/tunnel.js buildRoot()) never used any such cover and loads/paints fine without one - matched that same no-mask behavior here instead. Both iframes are eager-loaded now (see index.html), so background:#000 above already covers the brief real gap before the iframe's own content paints. */ .after-screen iframe{border:0;display:block;background:#000;transform-origin:top left;pointer-events:auto} .laptop-screen.after-screen iframe{width:1440px;height:900px;transform:scale(.75)} .phone-screen.after-screen iframe{width:390px;height:850px;transform:scale(.5282)} .device-frame{position:absolute;inset:0;width:2000px;height:1402px;z-index:5;pointer-events:none;user-select:none} .focus-label{ position:absolute; left:50%; top:18px; transform:translateX(-50%); z-index:30; min-width:250px; text-align:center; pointer-events:none; } .focus-label__text{ position:absolute; left:50%; top:0; transform:translateX(-50%) translateY(8px); display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:12px 18px; border-radius:999px; background:rgba(0,0,0,.42); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.22); box-shadow:0 10px 28px rgba(0,0,0,.16); font-family:"Plus Jakarta Sans", Arial, sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:0; transition:opacity .28s ease, transform .28s ease; color:#fff; z-index:31; } .focus-label__text--proposed{ color:var(--gold); } .focus-label__text.is-active{ transform:translateX(-50%) translateY(0); } .divider{position:absolute;top:0;left:var(--split);height:1402px;width:80px;transform:translateX(-40px);z-index:18;pointer-events:auto;cursor:ew-resize;touch-action:none} .divider::before{content:"";position:absolute;top:62px;height:688px;bottom:auto;left:50%;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.78);box-shadow:0 0 0 1px rgba(0,0,0,.12)} .handle{position:absolute;left:50%;top:50%;width:86px;height:86px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.93);box-shadow:0 12px 30px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;gap:12px;color:#9a1f27;font-family:"Plus Jakarta Sans", Arial, sans-serif;font-size:40px;line-height:1;font-weight:350;pointer-events:auto} .range{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;z-index:-1;pointer-events:none;margin:0} .notes{max-width:1760px;margin:34px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .note-item{padding:26px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);text-align:left} .note-item span{color:#ffffff;font-size:12px;letter-spacing:.14em} .note-item h3{font-family:"Plus Jakarta Sans", Arial, sans-serif;margin:13px 0 10px;font-weight:500;font-size:20px;letter-spacing:-.02em} .note-item p{font-family:"Plus Jakarta Sans", Arial, sans-serif;margin:0;color:rgba(246,241,232,.66);line-height:1.55;font-size:14px} @media (max-width:1520px) and (min-width:1101px){ .comparison-head{ top:clamp(74px, 5.6vw, 104px); width:min(360px, calc(100% - ((1608px * var(--stage-scale)) + clamp(34px, 2.4vw, 46px)) - 28px)); left:calc((1608px * var(--stage-scale)) + clamp(34px, 2.4vw, 46px)); gap:8px; } .comparison-head h2{ font-size:clamp(21px, 1.92vw, 30px); line-height:1.06; max-width:14ch; } .comparison-head .small-label{ font-size:10px; } } @media (max-width:1420px) and (min-width:1101px){ .comparison-head{ top:70px; width:min(350px, calc(100% - ((1608px * var(--stage-scale)) + 36px) - 24px)); left:calc((1608px * var(--stage-scale)) + 36px); gap:7px; } .comparison-head h2{ font-size:clamp(20px, 1.78vw, 27px); line-height:1.05; max-width:15ch; } } @media (max-width:1100px){ .comparison-head{ position:relative; top:auto; right:auto; width:auto; max-width:760px; padding:0 0 18px 0; } } @media (max-width:900px){ .wg-topbar{height:auto;align-items:flex-start;gap:14px;flex-direction:column}.wg-nav{flex-wrap:wrap}.notes{grid-template-columns:1fr}.comparison-card{border-radius:24px;padding:18px}.shade{display:none}.handle{width:70px;height:70px;font-size:33px}.copy-block{margin-bottom:22px}.focus-label{top:16px;min-width:220px}.focus-label__text{font-size:11px;padding:10px 15px} } @media (max-width:640px){ main{padding-left:14px;padding-right:14px}.wg-logo{width:clamp(150px,42vw,230px);max-width:52vw}.comparison-card{padding:0;border-radius:0}.compare-shell{border-radius:0}.lead{font-size:15px}.wg-nav a{padding:8px 10px;font-size:10px}h1{font-size:38px} } /* Hide iframe scrollbars while preserving scroll functionality inside the live after site. */ .after-screen iframe{scrollbar-width:none;} .after-screen iframe::-webkit-scrollbar{display:none;} /* v3 refinements: let the device PNG truly float over the WG background and hide any white fringe around the live iframe. */ .compare-shell, .stage-holder, .stage-fixed{ background:transparent !important; } .compare-shell{ box-shadow:none; } /* Overscan the website layers slightly beneath the device frame so no white edge appears between content and mask. */ .laptop-screen{ left:357px; top:292px; width:1092px; height:688px; } .phone-screen{ left:1536px; top:579px; width:218px; height:463px; border-radius:26px; } .after-screen iframe{ background:#000; } /* FIX (2026-07-29), per Dave: the visible white vertical scrollbar on the right edge of these before/after preview iframes is the framed site's OWN native scrollbar, rendered inside its cross-document viewport - scrollbar-hiding CSS on the outer