/* SHOTGUN: hide before/after UI. CSS only — the DOM stays intact because main-v114.js resizeStage() reads #range and throws if it is missing. */ .scene-before, .divider, .range, .focus-label, .mobile-phone-before, .mobile-phone-divider, .mobile-phone-focus-label, #mobilePhoneRange{display:none!important} .scene-after{clip-path:none!important;-webkit-clip-path:none!important} .mobile-phone-after{clip-path:none!important;-webkit-clip-path:none!important;width:100%!important} /* ── Foundations: 8 design directions ────────────────────────────────────── Monitor mockup = the tunnel's own asset, white cut to transparency and the aluminium stand remapped to charcoal (desktop-monitor-v2-cutout.png, native 587x435). Screen box uses the measured safe black area from tunnel-styles-test.css: L16 T11 R573 B352 => 2.73% / 2.53% / 94.89% / 78.39%. Standalone component — none of the .notes full-bleed rules apply here. */ .fdn-grid{position:relative;z-index:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,2.3vw,40px) clamp(16px,1.8vw,30px); /* Dave 8/26: "fills the browser window up way too much; 15% smaller w/ more margin" — 1560->1326px cap and 92vw->78vw so there is real air either side. */ width:min(1326px,78vw); /* Dave 8/26: the last row's description was sitting flush on the edge of the dark band — needs real air beneath it, not zero. */ margin:clamp(34px,3.8vw,58px) auto 0;padding-bottom:clamp(38px,3.4vw,52px)} .fdn-card{position:relative;z-index:5;display:flex;flex-direction:column} .fdn-card__label{position:relative;z-index:6} .fdn-card__monitor{position:relative;width:100%;aspect-ratio:587/435; transition:transform .38s cubic-bezier(.2,.7,.3,1)} .fdn-card:hover .fdn-card__monitor{transform:translateY(-6px)} .fdn-card__frame{position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:contain;z-index:2;pointer-events:none;transition:opacity .38s ease} /* charcoal by default; the aluminium warms back to its real silver on hover and while the card is the chosen one (Dave, 8/26) */ .fdn-card__frame--silver{opacity:0} .fdn-card__monitor:hover .fdn-card__frame--silver, .fdn-card.is-chosen .fdn-card__frame--silver{opacity:1} .fdn-card__monitor:hover .fdn-card__frame--dark, .fdn-card.is-chosen .fdn-card__frame--dark{opacity:0} .fdn-card__screen{position:absolute;/* Dave 8/26: show real black bezel around the site — the measured safe area (2.73/2.53/94.89/78.39) filled the whole face edge to edge. Inset inside it, kept horizontally centred on the face (spans 2.73%..97.62%, centre 50.17%). */ left:6.17%;top:5.6%;width:88%;height:70.6%; /* ABOVE the frame: the monitor face in the PNG is opaque black (only the page white was cut out), so a screen sitting behind it would never be visible. */ z-index:3;border-radius:3px;overflow:hidden;background:#0d0f11} .fdn-card__shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} /* hover: "View Site Style +". Dave 8/26: the hover/click target must cover the WHOLE screen on all eight — it used to live inside .fdn-card__screen, so parts of the mockup did nothing. It now overlays the monitor and is inset to the screen box itself. */ .fdn-card__view{position:absolute; /* [FIX] 2026-09-04, Dave: "the darkening that goes over the HTML is not covering the whole HTML on any of the eight - halos and little white strips. If you have to go a little bit overflow I don't care." Same defect the phones had, still on desktop because that fix was inside a max-width query. Measured screen box is left 5.754% top 6.897% width 89.531% height 69.917%; this is that box bled 0.8% past on every edge so it always overshoots. The bleed lands on the black bezel, which is why the overflow does not read. */ left:4.954%;top:6.097%;width:91.131%;height:71.517%; border-radius:3px;z-index:4;display:flex;align-items:center; justify-content:center;gap:7px;cursor:pointer;border:0;line-height:1; background:rgba(10,12,14,.52);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); color:#fff;font-family:"Plus Jakarta Sans",Arial,sans-serif;font-size:10.5px; letter-spacing:.15em;text-transform:uppercase;font-weight:500; opacity:0;transition:opacity .28s ease} .fdn-card__monitor:hover .fdn-card__view, .fdn-card__view:focus-visible{opacity:1} /* Dave 8/26: no ring around the plus. */ .fdn-card__plus{display:inline-block;font-size:15px;line-height:1;font-weight:400; color:rgba(255,255,255,.9); /* Dave 8/26 (2nd pass): still sitting low — the flex row was centering it on the line box, so vertical-align did nothing. Align the row to baseline and lift the glyph 4px. */ position:relative;top:-4px;vertical-align:baseline} /* label row: name + small toggle in the gap to its right, description under */ .fdn-card__label{margin-top:clamp(10px,1vw,15px); /* Dave 8/26: name + descriptor were hanging left of the monitor — shift in 10px so they sit under the screen, not the frame's outer edge. */ padding:0 2px 0 10px; display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px} .fdn-card__name{color:#f6f1e8;font-size:12px;letter-spacing:.15em; /* Dave 8/26: 600 read too heavy at this size — lighter weight, same scale. */ text-transform:uppercase;font-weight:400} .fdn-card__desc{grid-column:1 / -1;margin-top:3px; /* narrower so it wraps inside the monitor's width instead of running past it */ max-width:calc(100% - 22px); /* Dave 8/26: "much smaller, slightly thinner" — 13.5px/400 -> 11.5px/300 */ font-family:"Plus Jakarta Sans",Arial,sans-serif;font-size:11.5px;font-weight:300; line-height:1.5;letter-spacing:.005em;color:rgba(246,241,232,.56)} /* iOS-style switch */ .fdn-toggle{position:relative;width:34px;height:19px;flex:0 0 auto;padding:0;border:0; border-radius:19px;cursor:pointer; /* Dave 8/26: OFF must recede into the dark ground, not read as lit. */ background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); transition:background .24s ease;justify-self:end; /* Dave 8/26: nudge all toggles 20px left, off the right edge */ margin-right:20px; /* and keep them above anything the hero absolutely-positions nearby, which is what killed the first two cards' clicks on the live deploy */ z-index:6} .fdn-toggle__knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%; background:rgba(246,241,232,.34);box-shadow:none; transition:transform .24s cubic-bezier(.3,.8,.4,1),background .24s ease} .fdn-toggle[aria-pressed="true"]{background:#EFAA15;box-shadow:none} .fdn-toggle[aria-pressed="true"] .fdn-toggle__knob{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.32)} .fdn-card:hover .fdn-toggle[aria-pressed="false"]{background:rgba(255,255,255,.14)} .fdn-card:hover .fdn-toggle[aria-pressed="false"] .fdn-toggle__knob{background:rgba(246,241,232,.5)} .fdn-toggle[aria-pressed="true"] .fdn-toggle__knob{transform:translateX(15px)} .fdn-toggle:focus-visible{outline:2px solid #EFAA15;outline-offset:2px} .fdn-card.is-chosen .fdn-card__screen{box-shadow:inset 0 0 0 2px #EFAA15} .fdn-card.is-chosen .fdn-card__name{color:#fff} /* full-screen example-site viewer. Dave 8/26: the site must SCROLL, so nothing sits over the iframe. The frame is inset instead, leaving a backdrop ring that is the click-to-close target, with a label that follows the pointer over it. Escape also closes. */ .fdn-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(8,9,11,.93); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s; /* Dave 8/26: true full-bleed — no black margin, the site fills the viewport and the only way out is the close button (or Escape). */ display:block;padding:0;cursor:auto} .fdn-lightbox.is-open{opacity:1;visibility:visible} .fdn-lightbox__frame{width:100vw;height:100vh;display:block;border:0;background:#fff; border-radius:0;box-shadow:none} .fdn-lightbox__cursor{position:fixed;z-index:3;pointer-events:none; transform:translate(14px,14px);color:rgba(255,255,255,.9);font-size:10px; letter-spacing:.16em;text-transform:uppercase;background:rgba(0,0,0,.62); padding:7px 12px;border-radius:999px;white-space:nowrap;opacity:0; transition:opacity .18s ease} .fdn-lightbox__cursor{display:none} /* always-available close control — the follow-cursor label cannot be clicked while the pointer is inside the embedded site, so this never depends on it */ /* Dave 8/27: was a black × in a circle jammed into the corner — now a gold pill reading "← Back", pulled 40px down / 30px in from the right, throbbing so it reads as the way out of a full-screen site preview. */ .fdn-lightbox__close{position:fixed;top:110px;right:30px;z-index:10000; width:auto;height:auto;border:0;border-radius:999px;cursor:pointer; background:#EFAA15;color:#fff; font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif; font-size:14px;font-weight:600;letter-spacing:.02em;line-height:1; padding:12px 22px 12px 18px; display:inline-flex;align-items:center;gap:9px; box-shadow:0 6px 22px rgba(0,0,0,.32); transition:background .22s ease,box-shadow .22s ease; animation:fdnBackThrob 1.9s ease-in-out infinite} .fdn-lightbox__back-arrow{font-size:17px;line-height:1;position:relative;top:-1px} @keyframes fdnBackThrob{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.085)} } .fdn-lightbox__close:hover{background:#111;animation-play-state:paused;transform:scale(1.085)} .fdn-lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:3px} @media (prefers-reduced-motion:reduce){.fdn-lightbox__close{animation:none}} @media (max-width:1024px){.fdn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.fdn-grid{grid-template-columns:1fr;width:82vw}} /* keep the foundations headline on one line, per Dave */ .fdn-h2{white-space:nowrap} @media (max-width:820px){.fdn-h2{white-space:normal}} /* ── Hero: drop the "See a Finished Site" pill ───────────────────────────── Dave 8/26: the eight options below already open full sites, so the hero CTA is redundant — and the $XX/mo badge should fall into the space it leaves. The pill stays in the DOM but invisible ON PURPOSE: the mirror script near the bottom of index.html positions the badge off the pill's live rect and bails out entirely if the pill is missing or display:none. visibility keeps the rect, so the badge still tracks it across every breakpoint. */ .comparison-side-cta__btn{visibility:hidden !important;pointer-events:none !important} /* script sets transform:translate(-50%, calc(-100% - 14px)) to sit ABOVE the pill; this drops the badge down into the pill's own position instead. */ /* script sets transform:translate(-50%, calc(-100% - 14px)) to sit ABOVE the pill; this drops the badge into the pill's place, then nudges it per Dave 8/26: up 20px, left 10px. */ /* Dave 9/1: shift the whole tag's contents 20px right (was -10px). */ html body .comparison-price-tag{transform:translate(calc(-50% + 10px),-20px) !important} /* Dave 8/27: the dark "Choose a look" block moves in 40px with the white lead block above it. foundations.js aligns the two BOXES (margin-left), so adding the same padding to each keeps their text edges flush while the monitor grid below stays exactly where it is. */ #foundationsIntro{padding-left:90px !important} /* ── Hero lead block ─────────────────────────────────────────────────────── Dave's own copy, 8/26: lead-in header, two paragraphs, lead-out header that hands off to the eight foundations directly below. Uses .lead--below-compare so it keeps the template's existing width and placement under the mockup. */ .fdn-lead{ /* Dave 8/26: narrow the measure so neither paragraph drops a one-word widow. */ /* Dave 8/27 (round 2): 62ch was too narrow — at the top of the clamp the 41px header wrapped and dropped "here." on a line by itself, and the body ran short next to the dark section below it. 80ch fits the header on one line at every width and widens the paragraphs. */ max-width:80ch; /* Both text blocks (this one and #foundationsIntro) sit 50px in from the left edge. Padding, not margin, so the measure above is unaffected and the two blocks stay flush with each other. */ padding-left:90px !important; /* .lead--below-compare carries ~48px of left padding on the CONTAINER, which is why its text sat right of the dark section's heading even though both boxes started at the same x. Zero it here; the section's own margin still provides the outer inset. (Dave 8/26) */ margin-left:0 !important} .fdn-lead__in,.fdn-lead__out{ font-family:"Plus Jakarta Sans",Arial,sans-serif; font-size:clamp(17px,1.28vw,20px);font-weight:400;line-height:1.35; letter-spacing:-.005em;color:#20242a;margin:0; /* the template's own h2 rules cap width and centre — both wrong here */ max-width:none !important;width:100% !important;text-align:left !important; /* the template's h2 carries an inherited left indent (~48px at desktop) which pushed these in past the dark section's heading — zero it (Dave 8/26) */ padding-left:0 !important;margin-left:0 !important;text-indent:0 !important} .fdn-lead__out{margin-top:1.15em} .fdn-lead p{margin:.85em 0 0;font-size:clamp(14px,1.02vw,15.5px);line-height:1.62; font-weight:300;color:rgba(32,36,42,.78)} .fdn-lead p + p{margin-top:.8em} /* $XX/mo badge: left-justified, not centred (Dave 8/26) */ html body .comparison-price-tag{text-align:left !important} html body .comparison-price-tag strong, html body .comparison-price-tag em{text-align:left !important} /* Eyebrow + chosen style must read as ONE line of identical type (Dave 8/26). */ .investment-entry__eyebrow{white-space:nowrap !important} /* the template renders eyebrow descendants as display:block, which is what was forcing the style onto its own line even with nowrap set */ #fdnEyebrowStyle{display:inline !important;font:inherit !important;font-size:inherit !important; font-weight:inherit !important;letter-spacing:inherit !important; text-transform:inherit !important;color:inherit !important;white-space:nowrap} /* WebYay is always bold in body copy (Dave 8/26) */ .fdn-lead b, .fdn-lead strong{font-weight:600;color:inherit} /* "Included" nav item: it is now the first in .wg-nav (the old "See a Finished Site" link was removed), so it inherited that link's pill styling. Match Contact/FAQ instead. */ #navIncludedLink:not(:hover):not(:focus-visible){background:transparent !important; border-color:transparent !important;box-shadow:none !important} /* Section headers to 400 (Dave 8/26) — "What changes beyond the look.", "Questions worth answering.", "Three decades of design experience…", and the foundations headline. The template sets these heavier in several places, so these need to win outright. */ html body .value-intro h2, html body .faq-intro h2, html body .credentials-intro__copy h2, html body .fdn-h2{font-weight:400 !important} /* Selected card: descriptor goes pure white — selection cue, not a hover cue. */ .fdn-card.is-chosen .fdn-card__desc{color:#fff !important} /* Anchor jump for "What's Included" was landing under the sticky topbar, hiding the eyebrow and part of the headline. Reserve the bar's height plus air. */ #scopeIntro,#creditsIntro{scroll-margin-top:110px} /* "About Us" is another .nav-contact link, so it needs the same reset that keeps the first nav from inheriting the old pill styling. */ /* The ID reset must NOT apply on hover, or these two lose the faint grey pill that Contact/FAQ get and fall through to the gold link-hover colour instead. (Dave 8/26) */ #navAboutLink:not(:hover):not(:focus-visible){background:transparent !important; border-color:transparent !important;box-shadow:none !important} /* ONLY the lead-in header is enlarged (Dave 8/26: 40% larger, weight 400). The lead-out keeps the original size. */ /* Dave 8/26: lead-IN only, another 20% larger. The lead-OUT stays as is. */ .fdn-lead__in{font-size:clamp(34px,2.55vw,41px) !important;line-height:1.22 !important} /* Contact/FAQ keep the dark text on hover; the generic .wg-nav a:hover gold was still winning on the two new links. Match Contact exactly. */ html body .wg-topbar .wg-nav a#navIncludedLink:hover, html body .wg-topbar .wg-nav a#navIncludedLink:focus-visible, html body .wg-topbar .wg-nav a#navAboutLink:hover, html body .wg-topbar .wg-nav a#navAboutLink:focus-visible{ color:#3a3f42 !important;background:rgba(0,0,0,.06) !important; /* Dave 8/26: no gold ring — Contact/FAQ have no border on hover, and these two were still picking up the first-nav-link border treatment. */ border-color:transparent !important;border:0 !important;outline:none !important; box-shadow:none !important} /* body copy in the lead block must share that same flush-left edge */ .fdn-lead p{padding-left:0 !important;margin-left:0 !important;text-indent:0 !important} /* the "View Site Style" row centres its children; the plus needs its own lift */ .fdn-card__view{align-items:center !important} .fdn-card__view > span:first-child{display:inline-block;line-height:1} /* The two new nav items inherited the first-nav-link tracking (0.88px) instead of Contact/FAQ's 0.22px — that is the loose kerning. Match exactly. */ html body .wg-topbar .wg-nav a#navIncludedLink, html body .wg-topbar .wg-nav a#navAboutLink{letter-spacing:.22px !important} /* WaltersGroup logo sat high in the topbar — drop it 10px (Dave 8/26). */ html body .wg-topbar .wg-logo-link{position:relative;top:8px} /* The example site inside the laptop/phone must scroll (Dave 8/26). The shared stylesheet already sets pointer-events/overflow auto on these; the leftover scrolling="no" attribute was the part still locking them. */ .after-screen iframe, .mobile-phone-after iframe{overflow:auto !important;-webkit-overflow-scrolling:touch !important; pointer-events:auto !important} /* Monitor FRAME only at 70% until hovered or chosen; the screenshot inside stays fully opaque (Dave 8/26). The two frames cross-fade against each other, so the opacity has to ride on the wrapper, not on the individual s. */ .fdn-card__monitor{opacity:1} .fdn-card__frame{opacity:.5} .fdn-card__frame--silver{opacity:0} .fdn-card__monitor:hover .fdn-card__frame--dark, .fdn-card.is-chosen .fdn-card__frame--dark{opacity:0} .fdn-card__monitor:hover .fdn-card__frame--silver, .fdn-card.is-chosen .fdn-card__frame--silver{opacity:1} /* Broken vertical separators between the four columns (Dave 8/26, variant B). Inset top and bottom so they float rather than boxing each card in. */ .fdn-grid{column-gap:0 !important} .fdn-card{padding:0 26px} .fdn-card:not(:nth-child(4n))::after{content:"";position:absolute;right:0; top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.16);pointer-events:none} @media (max-width:1024px){ /* 2-up: only the first of each pair gets a rule */ .fdn-card:not(:nth-child(4n))::after{display:none} .fdn-card:nth-child(odd)::after{content:"";display:block;position:absolute;right:0; top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.16);pointer-events:none} } @media (max-width:560px){.fdn-card::after{display:none !important}} /* ── Intro wall: PT/clinic imagery + half the duration ───────────────────── intro.js and intro.css are SHARED by all 35 client pages, so nothing there is touched. Both changes are page-local overrides (Dave 8/26). 1) Duration: the wall holds 6s then fades 3.2s (~9.2s total). Halved. */ #webyayIntroWall{animation:iwOverlayOut 1.6s ease-in 3s forwards !important} #webyayIntroWall .iw-wall{animation-duration:4.5s !important} #webyayIntroWall .iw-black-veil{animation-duration:.5s !important} /* 2) Swap the portfolio images for the eight PT style pages. Six columns of six cards; each column cycles three images twice, matching the markup. */ #webyayIntroWall .iw-col:nth-of-type(1) .iw-card:nth-child(1) .iw-media{background-image:url("assets/intro/modern.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(1) .iw-card:nth-child(2) .iw-media{background-image:url("assets/intro/traditional.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(1) .iw-card:nth-child(3) .iw-media{background-image:url("assets/intro/sage.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(1) .iw-card:nth-child(4) .iw-media{background-image:url("assets/intro/modern.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(1) .iw-card:nth-child(5) .iw-media{background-image:url("assets/intro/traditional.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(1) .iw-card:nth-child(6) .iw-media{background-image:url("assets/intro/sage.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(2) .iw-card:nth-child(1) .iw-media{background-image:url("assets/intro/friendly.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(2) .iw-card:nth-child(2) .iw-media{background-image:url("assets/intro/athletic.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(2) .iw-card:nth-child(3) .iw-media{background-image:url("assets/intro/clinical.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(2) .iw-card:nth-child(4) .iw-media{background-image:url("assets/intro/friendly.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(2) .iw-card:nth-child(5) .iw-media{background-image:url("assets/intro/athletic.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(2) .iw-card:nth-child(6) .iw-media{background-image:url("assets/intro/clinical.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(3) .iw-card:nth-child(1) .iw-media{background-image:url("assets/intro/boutique.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(3) .iw-card:nth-child(2) .iw-media{background-image:url("assets/intro/bold.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(3) .iw-card:nth-child(3) .iw-media{background-image:url("assets/intro/modern.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(3) .iw-card:nth-child(4) .iw-media{background-image:url("assets/intro/boutique.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(3) .iw-card:nth-child(5) .iw-media{background-image:url("assets/intro/bold.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(3) .iw-card:nth-child(6) .iw-media{background-image:url("assets/intro/modern.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(4) .iw-card:nth-child(1) .iw-media{background-image:url("assets/intro/traditional.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(4) .iw-card:nth-child(2) .iw-media{background-image:url("assets/intro/sage.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(4) .iw-card:nth-child(3) .iw-media{background-image:url("assets/intro/friendly.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(4) .iw-card:nth-child(4) .iw-media{background-image:url("assets/intro/traditional.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(4) .iw-card:nth-child(5) .iw-media{background-image:url("assets/intro/sage.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(4) .iw-card:nth-child(6) .iw-media{background-image:url("assets/intro/friendly.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(5) .iw-card:nth-child(1) .iw-media{background-image:url("assets/intro/athletic.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(5) .iw-card:nth-child(2) .iw-media{background-image:url("assets/intro/clinical.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(5) .iw-card:nth-child(3) .iw-media{background-image:url("assets/intro/boutique.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(5) .iw-card:nth-child(4) .iw-media{background-image:url("assets/intro/athletic.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(5) .iw-card:nth-child(5) .iw-media{background-image:url("assets/intro/clinical.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(5) .iw-card:nth-child(6) .iw-media{background-image:url("assets/intro/boutique.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(6) .iw-card:nth-child(1) .iw-media{background-image:url("assets/intro/bold.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(6) .iw-card:nth-child(2) .iw-media{background-image:url("assets/intro/modern.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(6) .iw-card:nth-child(3) .iw-media{background-image:url("assets/intro/traditional.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(6) .iw-card:nth-child(4) .iw-media{background-image:url("assets/intro/bold.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(6) .iw-card:nth-child(5) .iw-media{background-image:url("assets/intro/modern.jpg") !important} #webyayIntroWall .iw-col:nth-of-type(6) .iw-card:nth-child(6) .iw-media{background-image:url("assets/intro/traditional.jpg") !important} /* Scrollbar gutter showed as a white line down the right edge of the phone (and laptop) once the iframes were made scrollable. The embedded site is cross- origin so its scrollbar cannot be styled — widen the iframe past the screen opening instead and let the screen's own overflow clip the bar away. */ .phone-screen,.laptop-screen,.mobile-phone-screen{overflow:hidden !important} .phone-screen.after-screen iframe{width:408px !important} /* 8/27 BUG FIX, per Dave: this used to be width:calc(100% + 18px), which REPLACED the template's own native 1464px iframe width — that 1464 is the site's real render width (1432) plus a deliberate 32px so the desktop scrollbar gutter lands past the screen mask. Overriding it with a percentage made the rendered page far narrower than the scaled screen, so the site sat against the left edge with a black band on the right. Native width/scale restored; the mask still clips the scrollbar. */ .laptop-screen.after-screen iframe{width:1464px !important;transform:scale(.7583) !important} /* [FIX] 2026-09-03, Dave: "the hero video in the iPhone is skewed off and not filling the iPhone screen." My own rule did that. The template's JS sets the iframe inline to width:390px + scale(0.716226) - a real phone viewport scaled to exactly fill the 279px mockup. The width:calc(100% + 18px) that used to sit here overrode that inline width with !important, giving 297px x 0.716 = 213px of page in a 279px screen: hence the black band down the right. Scrollbars are hidden by the template's own rules now, so the +18px overhang it was buying is not needed. Let the inline width stand. */ /* ============================================================================ 8/27 — included lead-in, tunnel headline echo, nav Start Project button ========================================================================= */ /* Dave: the four included-benefit tiles had no lead-in. Eyebrow + header + one sentence, same .value-intro pattern the rest of the page uses, and the "What's Included" nav item now stops here instead of at #scopeIntro ("what improves" is a different idea). scroll-margin clears the topbar. */ #includedIntro{ scroll-margin-top:110px; margin:clamp(46px,4.6vw,72px) auto clamp(18px,1.8vw,26px); } /* .value-intro is written for the DARK sections (near-white type); this one sits inside the light .investment-section, so the type has to be re-colored to the same greys that section's own header/paragraph already use, and the header sized a step under it so the section still reads as one header. */ /* Dave 8/27: size/line-height overrides removed — this is a .value-intro like every other section header, so it now takes the template's own standard (clamp(56px,4.35vw,78px)/.96) instead of the smaller one I had set, which is what made the headers read as all over the map. Only the colour stays, since this block sits on the light section. */ #includedIntro h2{ color:#6A6B6D !important; font-weight:400 !important; } /* the Project Investment header is not a .value-intro, so it needs the same values written out to line up with the rest */ @media (min-width:1100px){ .investment-copy h2{ font-size:clamp(52px,4.65vw,82px) !important; line-height:.96 !important; max-width:18.5ch !important; letter-spacing:-.045em !important; font-weight:400 !important; text-wrap:balance} } @media (min-width:1280px){ .investment-copy h2{ font-size:clamp(56px,4.35vw,78px) !important; max-width:19.75ch !important} } #includedIntro p{ color:rgba(32,36,42,.66) !important; font-size:18px !important; line-height:1.55 !important; max-width:64ch !important; } /* Dave: inside Start Project the first headline should read as the style the visitor picked ("Boutique style"), a bit smaller so it fits the band. Text swap is in foundations.js via the window.webyayStyleHeadline hook. */ .tunnel-top__headline h2.is-style-headline{ font-size:clamp(22px,3.05vw,44px) !important; } /* Dave: nav Start Project button — solid gold fill, white type, fading to a solid black fill on hover (was an outline pill). Written at the same over-qualified strength the template's own last-word rules use (html body header.wg-topbar x3 nav.wg-nav > button#navStartBtn), plus the .account-flow-open class, so this actually outranks them. */ html body header.wg-topbar.wg-topbar.wg-topbar nav.wg-nav > button#navStartBtn.account-flow-open, html body header.wg-topbar.wg-topbar.wg-topbar nav.wg-nav > button#navStartBtn, html body header.wg-topbar.wg-topbar.wg-topbar #navStartBtn.account-flow-open, html body header.wg-topbar .mobile-menu-start, .mobile-menu-start{ background:#EFAA15 !important; border-color:#EFAA15 !important; color:#fff !important; transition:background .28s ease, border-color .28s ease, color .28s ease !important; } html body header.wg-topbar.wg-topbar.wg-topbar nav.wg-nav > button#navStartBtn.account-flow-open:hover, html body header.wg-topbar.wg-topbar.wg-topbar nav.wg-nav > button#navStartBtn.account-flow-open:focus-visible, html body header.wg-topbar.wg-topbar.wg-topbar nav.wg-nav > button#navStartBtn:hover, html body header.wg-topbar.wg-topbar.wg-topbar nav.wg-nav > button#navStartBtn:focus-visible, html body header.wg-topbar.wg-topbar.wg-topbar #navStartBtn.account-flow-open:hover, html body header.wg-topbar.wg-topbar.wg-topbar #navStartBtn.account-flow-open:focus-visible, html body header.wg-topbar .mobile-menu-start:hover, .mobile-menu-start:hover, .mobile-menu-start:focus-visible{ background:#111 !important; border-color:#111 !important; color:#fff !important; } /* ── 8/27 round: investment block alignment, tighter grid gap, tunnel pill ──── */ /* Dave: "Project Investment" text and content must sit on the same left edge as the "Design Style" content above it. The section's own 75px inset put it 59px to the left of that edge — pad the section instead of moving each child, so the copy, the entry card and the payment column all shift together and the right-hand inset is untouched. */ .investment-section{padding-left:134px !important} @media (max-width:900px){.investment-section{padding-left:24px !important}} /* Dave: the space between the intro copy and the row of monitors was too big — halved. (was clamp(34px,3.8vw,58px)) */ .fdn-grid{margin-top:clamp(17px,1.9vw,29px) !important} /* Dave: kill the gold "View Your New Site" pill that floats inside the tunnel's monitor on this page — a shotgun visitor has no site of their own to view yet. Page-local only; the 35 client pages keep theirs. */ .tunnel-view-newsite-pill{display:none !important} /* Dave 8/27: no "Send Me PDF" on the shotgun page — that pill mails a marked-up PDF of a redesign the visitor hasn't had done yet, so it has nothing to send. Its caption line goes with it. Page-local: the 35 client pages keep theirs. The centered OK below stays — it advances the card like Next does. */ #webyayTunnel .tunnel-pdf-caption, #webyayTunnel [data-pdf-caption], #webyayTunnel .tunnel-3tile--pdf, #webyayTunnel [data-pdf-tile]{display:none !important} /* Dave 8/27: Transition Questions hovered to a light gray while the six pills beside it go solid gold with white type. Same treatment now — background, border and text all match .tunnel-foundation-pill:hover exactly; its gray RESTING fill is the intentional difference and is untouched. */ #webyayTunnel .tunnel-transition-faq-btn:hover, #webyayTunnel .tunnel-transition-faq-btn:focus-visible{ background:#EFAA15 !important; border-color:#EFAA15 !important; color:#ffffff !important; } /* Dave 8/27: Social Media is no longer its own tile — foundations.js moves its whole block to the bottom of the Design + Content panel. */ #webyayTunnel [data-3tile="social"]{display:none !important} /* the moved block keeps the tunnel's own spacing; only the intro line needs room under it now that it sits inside a 3row control column */ #webyayTunnel .fdn-social-row .tunnel-3tile-panel__intro{margin:0 0 10px} /* Dave 8/27: "Your Web Address" under the Transition Questions button on the foundation card. .tunnel-info-card is a flex column and the transition button carries order:10, so this needs a higher order to land beneath it. Width matches the pills' 330px grid so the row lines up with everything above it. */ #webyayTunnel .fdn-weburl{ order:11; display:flex;align-items:center;gap:10px; width:100%;max-width:330px;margin-top:12px} #webyayTunnel .fdn-weburl__label{ flex:0 0 auto; font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif; font-size:9.4px;font-weight:500;line-height:1.25;letter-spacing:.02em; color:#1c242a;white-space:nowrap} #webyayTunnel .fdn-weburl__input{ flex:1 1 auto;min-width:0; height:27.34px;padding:0 12px; border:1px solid #e2e4e6;border-radius:999px;background:#fff; font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif; font-size:9.4px;line-height:1.25;color:#1c242a; transition:border-color .2s ease} #webyayTunnel .fdn-weburl__input::placeholder{color:rgba(28,36,42,.42)} #webyayTunnel .fdn-weburl__input:focus{outline:none;border-color:#EFAA15} @media (max-width:640px){ #webyayTunnel .fdn-weburl{max-width:none} #webyayTunnel .fdn-weburl__label,#webyayTunnel .fdn-weburl__input{font-size:11px} #webyayTunnel .fdn-weburl__input{height:25px} } /* Dave 8/27: "Use Content from your current site" — first row of Design + Content: their URL (carried over from the foundation card) plus a switch. ON means we lift the copy/logo/images from that site as-is, so everything below is ghosted out. */ #webyayTunnel .fdn-usecurrent{order:-1} #webyayTunnel .fdn-usecurrent__control{display:flex;align-items:center;gap:12px} #webyayTunnel .fdn-usecurrent__input{ flex:1 1 auto;min-width:0;height:32px;padding:0 12px; border:1px solid #e2e4e6;border-radius:8px;background:#fff; font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif; font-size:12px;line-height:1.25;color:#1c242a;transition:border-color .2s ease} #webyayTunnel .fdn-usecurrent__input::placeholder{color:rgba(28,36,42,.42)} #webyayTunnel .fdn-usecurrent__input:focus{outline:none;border-color:#EFAA15} /* the switch is the same component as the eight style toggles, re-skinned for a light ground — the dark-page OFF state (white at 9%) is invisible here */ #webyayTunnel .fdn-toggle--light{ margin-right:0;justify-self:auto; background:#dcdde1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} #webyayTunnel .fdn-toggle--light .fdn-toggle__knob{ background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22)} #webyayTunnel .fdn-toggle--light[aria-pressed="true"]{background:#EFAA15;box-shadow:none} /* everything below, once the switch is on */ #webyayTunnel .tunnel-3tile-panel.is-content-locked .tunnel-3row:not(.fdn-usecurrent){ opacity:.38;pointer-events:none;filter:saturate(.35)} #webyayTunnel .tunnel-3tile-panel.is-content-locked .tunnel-3row:not(.fdn-usecurrent) *{ cursor:default !important} /* Dave 8/27: with a two-line focus header ("Choose your / Design + Content") the shared flex row centred the back arrow against the WHOLE block, leaving it floating in space to the right of the gap between the lines. Letting the header lay out as normal inline text puts the arrow immediately after the last word of the second line, 25px to its right, on that line. */ /* BUG FIX 2026-08-27: these must NOT apply to the Custom Logo and Smart Forms panels. Those two carry their own header inside the panel, so the tunnel collapses this focus header for them (.is-tile-focus-logo sets height:0 and hides the text). My rules below have the same specificity and load later, so without the :not() they un-hid that text and it rendered ON TOP of the panel's own header — the doubled, overlapping headings Dave saw. */ /* BUG FIX 2026-09-03, Dave: "two competing headers... two competing reverse buttons." The tunnel ALREADY hides this shared header once you drill into "Additional Page N of X" - it sets style.display='none' on it inline, so the per-page header flows up into this slot and one back arrow is left. But an !important declaration in a stylesheet outranks a plain inline style, so the display:block !important below was overriding that and forcing the outer header (and its arrow) back on screen. The :not([style*=...]) pair below stands down whenever the tunnel has hidden it inline, which is exactly the drilled-in case - and leaves every other case untouched. */ #webyayTunnel .tunnel-detail__heading--subquestion[data-3tile-subquestion].is-tile-focus:not(.is-tile-focus-logo):not([style*="display: none"]):not([style*="display:none"]){ display:block !important} #webyayTunnel .tunnel-detail__heading--subquestion.is-tile-focus:not(.is-tile-focus-logo):not([style*="display: none"]):not([style*="display:none"]) [data-3tile-subquestion-text]{ display:inline !important} #webyayTunnel .tunnel-detail__heading--subquestion.is-tile-focus:not(.is-tile-focus-logo):not([style*="display: none"]):not([style*="display:none"]) .tunnel-3tile-focus-stepback{ display:inline-flex !important; /* 19px, not 25: the whitespace text node between the header span and this button renders as ~6px, so 19 measures as the 25 Dave asked for. */ margin-left:19px !important; vertical-align:middle; position:relative;top:-4px; transform:none !important} /* Dave 8/27: "Don't include social media links" was wrapping to two lines in the narrower Design + Content column. One line, sized to its own text. */ #webyayTunnel .fdn-social-row [data-tunnel-social-status]{ display:flex;flex-wrap:wrap;gap:8px} #webyayTunnel .fdn-social-row .tunnel-social-status-btn{ width:auto;max-width:none;white-space:nowrap;flex:0 0 auto} /* Dave 8/27: the social rows were reserving a whole second line for a URL field nobody had asked for yet — the template lays chip+field side by side, which cannot fit in this narrower column, so every inactive row wrapped and sat 72px tall. Stack them instead: tight rows now, and the field appears UNDER its chip only once that chip is on, pushing everything below down. */ #webyayTunnel .fdn-social-row .tunnel-social-row{display:block} #webyayTunnel .fdn-social-row .tunnel-social-chip{width:100%} #webyayTunnel .fdn-social-row .tunnel-social-url{display:none} #webyayTunnel .fdn-social-row .tunnel-social-row.is-active .tunnel-social-url{ display:block;width:100%;min-width:0;margin-top:6px} /* Dave 8/27: the scrollbar sat with the content pressed right against it. The card's 465px width comes from a template rule I'd have to override in the shared CSS to push the bar out to the window edge, so for now the bar is thinned and the content keeps clear of it. */ #webyayTunnel .tunnel-card{scrollbar-width:thin;scrollbar-color:rgba(28,36,42,.28) transparent} #webyayTunnel .tunnel-card::-webkit-scrollbar{width:7px} #webyayTunnel .tunnel-card::-webkit-scrollbar-track{background:transparent} #webyayTunnel .tunnel-card::-webkit-scrollbar-thumb{ background:rgba(28,36,42,.24);border-radius:99px} #webyayTunnel .tunnel-card::-webkit-scrollbar-thumb:hover{background:rgba(28,36,42,.38)} /* Dave 8/27: with the switch OFF the carried-over address is ghosted and dead; ON, it goes solid and editable. */ #webyayTunnel .fdn-usecurrent__input:disabled{ opacity:.42;background:#f4f5f6;color:#1c242a;cursor:default} /* label sits 5px higher than the field it names */ #webyayTunnel .fdn-usecurrent .tunnel-3row__label{position:relative;top:-5px} /* Dave 8/27: Custom Logo — inline back arrow beside the checkmark (the shared top-right one is hidden for both panels that carry their own header, logo and Smart Forms). Size comes from the shared .tunnel-stepback-btn rule so every arrow in the tunnel still matches; only the gap and baseline move, and both need !important because that rule sets margin-left with one. */ #webyayTunnel .tunnel-detail__heading--subquestion.is-tile-focus-logo .tunnel-3tile-focus-stepback{ display:none !important} #webyayTunnel .fdn-logohead-stepback{ margin:0 0 0 25px !important;vertical-align:middle;position:relative;top:1px} /* same gotcha the Smart Forms panel hit: something upstream flattens back to 400 inside these panels, so the bolded price has to be asserted */ #webyayTunnel .tunnel-3tile-panel[data-3tile-panel="logo"] strong{font-weight:700 !important} /* Dave 8/27: style picker under the tunnel monitor — a pill pull-down so they can switch design style on the fly without leaving Start Project. */ #webyayTunnel .fdn-stylepick{ position:absolute;z-index:8;margin:0; /* percentages so it stays put against the monitor artwork at any size: just below the screen bezel, left of the stand. Dave 8/27: up 25px and right 40px from where it first landed. */ top:84.9%;left:8.9%} #webyayTunnel .fdn-stylepick__select{ appearance:none;-webkit-appearance:none; height:34px;padding:0 34px 0 16px;border-radius:999px; border:1px solid rgba(28,36,42,.18);background:#fff; font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif; font-size:12px;font-weight:500;letter-spacing:.01em;color:#1c242a;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 14px center;background-size:11px; box-shadow:0 1px 3px rgba(0,0,0,.06); transition:border-color .2s ease,box-shadow .2s ease} #webyayTunnel .fdn-stylepick__select:hover{border-color:rgba(28,36,42,.34)} #webyayTunnel .fdn-stylepick__select:focus{outline:none;border-color:#EFAA15;box-shadow:0 0 0 3px rgba(239,170,21,.22)} /* Dave's standing rule, restated 8/27: nothing heavier than 400 anywhere in the tunnel — modal titles, section heads, buttons, the lot. Two deliberate exceptions, both of which he asked for by name: the bold "$9 per form." and "$149." prices. The before/after compare labels are also left alone because that panel is spec-matched to SNIPER pixel for pixel. */ /* The :not(#_) carries an ID's weight without matching anything, lifting these to (2,0,0) — needed because several of the price rules are written as #webyayTunnel .class .class with !important and would otherwise win. */ #webyayTunnel *:not(#_):not(.forms-compare__label), #planModal *:not(#_), .tunnel-pdf-modal *:not(#_):not(.forms-compare__label), .tunnel-faq-modal *:not(#_), #tunnelFormsCompareModal *:not(#_):not(.forms-compare__label){ font-weight:400 !important} #webyayTunnel .tunnel-3tile-panel[data-3tile-panel="forms"] strong:not(#_), #webyayTunnel .tunnel-3tile-panel[data-3tile-panel="logo"] strong:not(#_), #webyayTunnel [data-logo-price]:not(#_){font-weight:700 !important} /* Dave 8/27: "Let's figure out later" sits to the right of the tile grid's OK and moves them on to Maintenance. Outline pill so OK stays the primary action — same height, radius and type size as OK. */ #webyayTunnel .tunnel-3tile-ok-row--pdf{align-items:center;gap:12px} #webyayTunnel .fdn-later-btn{ height:35px;padding:0 18px;border-radius:999px; border:1px solid rgba(28,36,42,.22);background:transparent;color:#3a3f42; font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif; font-size:12px;line-height:1;cursor:pointer;white-space:nowrap; transition:background .2s ease,border-color .2s ease,color .2s ease} #webyayTunnel .fdn-later-btn:hover, #webyayTunnel .fdn-later-btn:focus-visible{ background:#EFAA15;border-color:#EFAA15;color:#fff;outline:none} /* Dave 8/27: the card logos were sitting right under "Payments secured by Stripe" with nothing between them. */ #webyayTunnel .tunnel-summary__payment-icons-img{margin-top:10px} @media (max-width:900px){ #webyayTunnel .tunnel-summary__payment-icons-img{margin-top:8px} } /* Dave 8/27: the About header ran into the website images on the right at wide windows, and the copy block sat too low in its box. This is the one header that shares its row with artwork, so it steps down a size from the section standard and its measure is capped so it can never reach the images. */ .credentials-intro__copy h2{ font-size:clamp(34px,2.9vw,50px) !important; line-height:1.06 !important; max-width:17ch !important} .credentials-intro__copy{margin-top:-30px} /* Dave 8/27: the line under the Design + Content header. */ /* Dave 8/27: half the gap between the header and this line — the header's own 22px bottom margin is collapsed to 5px when the note follows it, so the two read as one block (22 + 6 = 28 before, 14 now). */ #webyayTunnel .tunnel-detail__heading--subquestion:has(+ .fdn-focus-note){ margin-bottom:5px !important} #webyayTunnel .fdn-focus-note{ margin:0 0 14px; font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif; font-size:13px;line-height:1.5;color:var(--muted,rgba(28,36,42,.62))} /* Dave 8/27: the running total in the bottom bar was spread out so far it ran into the step nav on the left. Item spacing halved (32px gap + 13px inset → 16 + 8), and where the gold divider appears between the subscription items and the one-off items, the space either side of it is now equal (16/16) so it sits dead centre between the two batches instead of favouring one side. */ #webyayTunnel .tunnel-total__amount .estimate-part{ margin-right:16px !important;padding-left:8px !important} /* the row is a flex container with an 18px column-gap, so the item before the divider needs NO extra margin — the gap alone sits on the left of the line, and the bordered item's 18px padding matches it on the right. Equal both sides = the divider lands dead centre between the two batches. */ #webyayTunnel .tunnel-total__amount .estimate-breakdown:has(.estimate-part--care) .estimate-part--care, #webyayTunnel .tunnel-total__amount .estimate-breakdown:has(.estimate-part--email) .estimate-part--email{ margin-right:0 !important} #webyayTunnel .tunnel-total__amount .estimate-breakdown:has(.estimate-part--care) .estimate-part--website, #webyayTunnel .tunnel-total__amount .estimate-breakdown:has(.estimate-part--email) .estimate-part--website{ padding-left:18px !important;margin-left:0 !important} /* ---- Design + Content: gentle "we need your web address" nudge ---------- Dave 8/29: "I want as few roadblocks as possible, so I wanna make it gentle." Soft line under the row, gold outline on the field, both gone the moment they start typing. */ #webyayTunnel .fdn-usecurrent{position:relative} #webyayTunnel .fdn-usecurrent__nudge{ margin:8px 0 0 !important; padding:0 !important; grid-column:2 / -1; font-size:13px !important; line-height:1.45 !important; font-weight:400 !important; color:#8a6a12 !important; letter-spacing:.01em; } #webyayTunnel .fdn-usecurrent.is-nudging .fdn-usecurrent__input{ box-shadow:0 0 0 2px rgba(212,160,23,.55) !important; border-color:rgba(212,160,23,.85) !important; } /* ---- the three lightbox pills ----------------------------------------- Dave 8/31: "all three different sizes... no fill at all, glassy blurry background... smaller and closer together." One size for all three, real frosted glass rather than a solid fill, 8px apart. The glass is tinted dark rather than light because most of the eight style sites are pale - white-on-white was the first version's mistake. Gold survives as a hairline and the check icon on Choose, so the hierarchy is still readable without anything being filled in. */ .fdn-lightbox__device, .fdn-lightbox__choose, #webyayShotgun .fdn-lightbox__close, .fdn-lightbox__close{ /* Dave 8/31: "solid black with white type, regular, bright gold on hover and on selected, 20% smaller." No glass, no blur, no hairline, nothing translucent. */ position:fixed !important; right:50px !important; z-index:10000 !important; box-sizing:border-box !important; width:136px !important; min-width:136px !important; height:28px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding:0 11px !important; border:0 !important; border-radius:999px !important; background:#55585e !important; /* Dave 8/31: black read too heavy */ color:#fff !important; font:300 11px/1 'Plus Jakarta Sans',system-ui,sans-serif !important; letter-spacing:.02em !important; text-shadow:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; cursor:pointer !important; animation:none !important; transition:background .16s ease,transform .16s ease,opacity .2s ease !important; } /* 6px apart */ .fdn-lightbox__device{ top:auto !important; bottom:149px !important; } .fdn-lightbox__choose{ top:auto !important; bottom:115px !important; } #webyayShotgun .fdn-lightbox__close, .fdn-lightbox__close{ top:auto !important; bottom:81px !important; } .fdn-lightbox__device:hover, .fdn-lightbox__choose:hover, .fdn-lightbox__close:hover{ background:#d4a017 !important; color:#fff !important; transform:scale(1.04) !important; } .fdn-lightbox__device:focus-visible, .fdn-lightbox__choose:focus-visible, .fdn-lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:2px} /* the tick: a ghost until it is theirs, then white on gold */ .fdn-lightbox__choose-check{ display:inline-flex;line-height:0; color:rgba(255,255,255,.22); transition:color .16s ease; } .fdn-lightbox__choose:hover .fdn-lightbox__choose-check{ color:#fff; } /* selected: always gold */ .fdn-lightbox__choose.is-chosen{ background:#d4a017 !important; color:#fff !important; } .fdn-lightbox__choose.is-chosen .fdn-lightbox__choose-check{ color:#fff; } .fdn-lightbox__choose.is-chosen:hover{ background:#b8880f !important; } .fdn-lightbox__device{opacity:0;visibility:hidden} .fdn-lightbox__choose{opacity:0;visibility:hidden} .fdn-lightbox__device.is-on, .fdn-lightbox__choose.is-on{opacity:1;visibility:visible} .fdn-lightbox__back-arrow{font-size:12px;line-height:1;position:relative;top:-1px} @media (max-width:760px){ .fdn-lightbox__device, .fdn-lightbox__choose, #webyayShotgun .fdn-lightbox__close, .fdn-lightbox__close{ right:16px !important; width:126px !important; min-width:126px !important; font-size:10.5px !important; } .fdn-lightbox__device{ bottom:132px !important; } .fdn-lightbox__choose{ bottom:98px !important; } #webyayShotgun .fdn-lightbox__close, .fdn-lightbox__close{ bottom:64px !important; } } .fdn-lightbox__device-icon{display:inline-flex;line-height:0} .fdn-lightbox__back-arrow{font-size:15px;line-height:1;position:relative;top:-1px} @media (max-width:760px){ .fdn-lightbox__device, .fdn-lightbox__choose, #webyayShotgun .fdn-lightbox__close, .fdn-lightbox__close{ right:16px !important; width:156px !important; min-width:156px !important; font-size:12px !important; } .fdn-lightbox__device{ top:auto !important; bottom:166px !important; } .fdn-lightbox__choose{ top:auto !important; bottom:128px !important; } #webyayShotgun .fdn-lightbox__close, .fdn-lightbox__close{ top:auto !important; bottom:90px !important; } } /* ---- the phone stage --------------------------------------------------- Dave 8/31: the photo fills the whole window now, with a black veil round the edges of the browser rather than a hard black frame. It stays LAID OUT the whole time (hidden with opacity, not display:none) so the site inside loads and settles while they are still on desktop view - that is what was causing the sideways slide when the phone appeared. */ /* Dave 8/31 (revised): the scene runs the FULL height of the window, starting at the very top, and the style site's own nav bar is painted on top of it. Pushing the scene down below the bar dropped the phone too low and cut its base off. So instead the lightbox gets clipped to just its nav strip and lifted above the scene - see .fdn-lightbox.is-navstrip below. */ .fdn-phone{ position:fixed; inset:0; z-index:9998; display:grid;place-items:center; background:#000; overflow:hidden; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .22s ease; } .fdn-phone.is-on{opacity:1;visibility:visible;pointer-events:auto} /* cover the viewport while keeping the photo's exact aspect, so the screen percentages below stay true. Capped so the phone never outgrows the window on very wide monitors - any gap left over is black, which is the veil. */ .fdn-phone__stage{ position:relative; aspect-ratio:1400/933; height:clamp(100vh, calc(100vw * 933 / 1400), 132vh); } .fdn-phone__hand{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;pointer-events:none;user-select:none;z-index:2; } /* the veil: darkens the outer edges of the window, no hard border */ .fdn-phone::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background:radial-gradient(ellipse 66% 70% at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,.30) 58%, rgba(0,0,0,.66) 80%, rgba(0,0,0,.92) 100%); } /* measured off the alpha channel of phone-hand.webp - do not nudge by eye. Dave 8/31: the site used to be handed the hole's width as its viewport, so at ~285px it laid out bigger than a real phone would - type oversized, the header running to the edge. It now renders at a true 390px phone viewport and is SCALED to fit, exactly the way the laptop hero does it. The clip box is the hole to the pixel and hides the overflow, so no white sliver either. */ .fdn-phone__screen{ position:absolute; left:40.429%; top:17.792%; width:19.357%; height:61.093%; z-index:1; overflow:hidden; background:#fff; border-radius:3px; } .fdn-phone__frame{ position:absolute;top:0;left:0; width:390px; /* a real iPhone's CSS viewport */ border:0; transform-origin:0 0; /* scale set from JS to match the hole */ } @media (max-width:760px){ .fdn-phone__stage{height:clamp(100vh, calc(100vw * 933 / 1400), 128vh)} } /* Dave 8/31: "I hate shadows. Don't use shadows." No text-shadow, no box-shadow, no drop-shadow on any of the three lightbox pills, in any state, including their icons. */ .fdn-lightbox__device, .fdn-lightbox__choose, #webyayShotgun .fdn-lightbox__close, .fdn-lightbox__close, .fdn-lightbox__device *, .fdn-lightbox__choose *, .fdn-lightbox__close *, .fdn-lightbox__device:hover, .fdn-lightbox__choose:hover, .fdn-lightbox__close:hover, .fdn-lightbox__device:focus, .fdn-lightbox__choose:focus, .fdn-lightbox__close:focus{ text-shadow:none !important; box-shadow:none !important; filter:none !important; -webkit-filter:none !important; } /* ---- phone mode: keep only the site's nav bar, painted over the scene ---- The lightbox is clipped to the measured header height and raised above the phone overlay. Its iframe is still the full page underneath, so nothing reloads and switching back is instant. overflow:hidden also takes the frame's scrollbar out of the strip, which was the wacky bar Dave saw. */ .fdn-lightbox.is-navstrip{ height:var(--fdn-navh,88px) !important; bottom:auto !important; overflow:hidden !important; z-index:9999 !important; background:transparent !important; } .fdn-lightbox.is-navstrip .fdn-lightbox__frame{ pointer-events:none; /* the strip is scenery, not a live nav */ } /* ---- corner scrim ------------------------------------------------------- Dave 8/31: "a gradated darkening behind those buttons and behind the chat bubble... 45 degrees starting at the lower right at 15%, fading to zero about midway." Sits above the site, below the pills, and never takes a click. Only while the lightbox is up. */ /* Dave 8/31: the gradation existed only so clear-glass pills could be read. The pills are solid now, so it is dead weight - off entirely. */ .fdn-scrim,.fdn-scrim.is-on{ display:none !important; } /* ---- font roles: header / body / everything ----------------------------- Dave 8/31: "sometimes you want a serif for the header and a sans for the body." Tapping a font asks what it is for instead of assuming everything. */ #webyayTunnel .fdn-roleask{ position:absolute;z-index:40; display:flex;gap:6px; padding:6px; border-radius:12px; background:#2b2d31; border:1px solid rgba(255,255,255,.10); opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .15s ease,transform .15s ease; } #webyayTunnel .fdn-roleask.is-open{opacity:1;visibility:visible;transform:translateY(0)} #webyayTunnel .fdn-roleask__btn{ border:0;border-radius:999px; padding:0 13px;height:28px; background:rgba(255,255,255,.09); color:#fff; font:300 11px/1 'Plus Jakarta Sans',system-ui,sans-serif !important; letter-spacing:.02em; white-space:nowrap; cursor:pointer; transition:background .15s ease; } #webyayTunnel .fdn-roleask__btn:hover{background:#EFAA15} #webyayTunnel .fdn-roleask__btn.is-current{background:#EFAA15} /* the role each font is doing, sat under its name */ #webyayTunnel .fdn-fontrole{ display:inline-block; margin-left:9px; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.16); font-size:9.5px !important; letter-spacing:.07em; text-transform:uppercase; vertical-align:middle; opacity:.9; } #webyayTunnel .tunnel-font-pill:not(.is-selected) .fdn-fontrole{display:none} @media (max-width:760px){ #webyayTunnel .fdn-roleask{flex-wrap:wrap;max-width:230px} } /* Dave 8/31: no per-font hover tooltips - they covered the role panel. The magnifier still opens the real site in that font, which is the preview that actually matters. */ #webyayTunnel .fdn-roleask.is-open ~ .tunnel-hover-tooltip, body:has(#webyayTunnel .fdn-roleask.is-open) .tunnel-hover-tooltip{ display:none !important; } /* ---- font tiles: ~18% smaller, and the role chip stays inside ------------ Dave 8/31: "the buttons are quite tall compared to the font image inside, and when they're selected it pushes the magnifying glass out of the way." The pill now flexes and clips; the chip and the magnifier never move. */ #webyayTunnel .tunnel-font-list{ gap:8px 13px !important; } #webyayTunnel .tunnel-font-row__controls{ gap:6px !important; } #webyayTunnel .tunnel-font-pill{ height:31px !important; min-height:31px !important; padding:0 11px !important; gap:6px !important; flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; } #webyayTunnel .tunnel-font-pill__name{ font-size:12.5px !important; line-height:1 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #webyayTunnel .fdn-fontrole{ flex:0 0 auto !important; margin-left:6px !important; padding:1px 6px !important; font-size:8px !important; letter-spacing:.06em; } #webyayTunnel .tunnel-font-pill__check{ flex:0 0 auto !important; } #webyayTunnel .tunnel-font-preview-btn{ flex:0 0 auto !important; width:23px !important; height:23px !important; } #webyayTunnel .tunnel-font-preview-btn svg{ width:11px !important; height:11px !important; } /* the magnifier of whatever is currently painted on the monitor */ #webyayTunnel .tunnel-font-preview-btn.is-previewing{ background:#EFAA15 !important; border-color:#EFAA15 !important; color:#fff !important; } /* Dave 8/31: the magnifiers are gone - clicking a font previews it on the monitor, and picking a role commits it. The pill takes the full row. */ #webyayTunnel .tunnel-font-preview-btn{ display:none !important; } #webyayTunnel .tunnel-font-row__controls{ gap:0 !important; } #webyayTunnel .tunnel-font-pill{ width:100% !important; } /* Dave 8/31: the three tiles were almost touching "What do you need?" - 15px of air, and "Let's figure out later" goes light grey so it reads as the quiet option next to the real choices. */ #webyayTunnel .tunnel-3tile-row, #webyayTunnel .tunnel-3tiles, #webyayTunnel [class*="3tile"][class*="row"]{ margin-top:15px !important; } #webyayTunnel .tunnel-detail__heading + *, #webyayTunnel .tunnel-card__question + *{ margin-top:15px !important; } #webyayTunnel .fdn-later-btn, #webyayTunnel [data-fdn-later]{ background:#f1f3f6 !important; border-color:#e5e8ec !important; color:#767d86 !important; } #webyayTunnel .fdn-later-btn:hover, #webyayTunnel [data-fdn-later]:hover{ background:#e7eaee !important; border-color:#d8dce1 !important; color:#4e545c !important; } /* ---- "Website style" nav item (Dave 8/31) -------------------------------- Third time this bites: whichever link sits first in .wg-nav inherits the old pill treatment, so its resting state looks permanently hovered. "Website style" is first now - give it the same three fixes Included/About already carry, so all five read identically until you actually hover. */ #navStyleLink:not(:hover):not(:focus-visible){ background:transparent !important; border-color:transparent !important; box-shadow:none !important; } html body .wg-topbar .wg-nav a#navStyleLink:hover, html body .wg-topbar .wg-nav a#navStyleLink:focus-visible{ color:#3a3f42 !important; background:rgba(0,0,0,.06) !important; border-color:transparent !important;border:0 !important; outline:none !important;box-shadow:none !important; } html body .wg-topbar .wg-nav a#navStyleLink{ letter-spacing:.22px !important; } /* and the jump landed with the eyebrow and headline tucked under the sticky bar - reserve the bar's height plus air, same as the other anchors. */ #foundationsIntro{ scroll-margin-top:90px; } /* ---- "Reset colors" (Dave 8/31) ----------------------------------------- Sits under the two colour fields, aligned with them. Quiet at rest so it never competes with the fields; gold on hover, with the note explaining what it puts back. */ #webyayTunnel .fdn-color-reset{ display:inline-flex !important; align-items:center !important; gap:5px !important; margin:9px 0 0 auto !important; padding:0 10px !important; height:24px !important; border:1px solid #e3e6ea !important; border-radius:999px !important; background:#f7f8fa !important; color:#8a9199 !important; font:300 10.5px/1 'Plus Jakarta Sans',system-ui,sans-serif !important; letter-spacing:.01em !important; cursor:pointer !important; box-shadow:none !important; transition:background .16s ease,color .16s ease,border-color .16s ease !important; } #webyayTunnel .fdn-color-reset__icon{ display:inline-flex; align-items:center; } #webyayTunnel .fdn-color-reset:hover, #webyayTunnel .fdn-color-reset:focus-visible{ background:#d4a017 !important; border-color:#d4a017 !important; color:#fff !important; outline:none !important; box-shadow:none !important; } /* the note, on hover only */ #webyayTunnel .fdn-color-reset::after{ content:"Reset to the original colors for this style"; position:absolute; transform:translate(-50%,-34px); left:50%; padding:5px 9px; border-radius:6px; background:#3a3f42; color:#fff; font:300 10.5px/1.25 'Plus Jakarta Sans',system-ui,sans-serif; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .16s ease; box-shadow:none; } #webyayTunnel .fdn-color-reset{ position:relative !important; } #webyayTunnel .fdn-color-reset:hover::after, #webyayTunnel .fdn-color-reset:focus-visible::after{ opacity:1; } /* the two fields stack in a column - let the button sit at their right edge */ #webyayTunnel .tunnel-color-stack{ display:flex !important; flex-direction:column !important; } /* Payment plan pills read too heavy at 400 (Dave 8/31) - thin them to 300. The 300 weight is already pulled in for Plus Jakarta Sans. */ html body .payment-list__link, html body .payment-list__link *, html body .payment-options .payment-list__link{ font-weight:300 !important; } /* the reset pill was still landing on 400 - the shorthand lost to a later weight rule, so set it on its own. */ #webyayTunnel .fdn-color-reset, #webyayTunnel .fdn-color-reset span{ font-weight:300 !important; } /* ---- investment headline (Dave 8/31) ------------------------------------ Two lines, and neither is allowed to break mid-sentence: "Everything you need in a website." on top, "Nothing you're overpaying for." under it. A
alone doesn't do that - the first line still wrapped once the column got narrow. So each sentence is its own nowrap block, and the type SHRINKS with the column instead of wrapping. Sized in cqw off the copy column, so it tracks the real available width, not the viewport. */ .investment-copy{ container-type:inline-size; } html body .investment-copy h2.investment-h2{ font-weight:400 !important; line-height:1.12 !important; text-wrap:nowrap !important; } html body .investment-copy h2.investment-h2 .investment-h2__line{ display:block !important; white-space:nowrap !important; font-size:min(46px, 5.55cqw) !important; } @supports not (width: 1cqw){ /* older engines: fall back to the viewport, same intent */ html body .investment-copy h2.investment-h2 .investment-h2__line{ font-size:clamp(19px, 3.1vw, 46px) !important; } } /* ---- the three pills go slightly translucent (Dave 8/31) ---------------- 80% opaque, so a little of the scene reads through without costing any legibility. Gold states stay solid - selection should not be ambiguous. */ .fdn-lightbox__device, .fdn-lightbox__choose, #webyayShotgun .fdn-lightbox__close, .fdn-lightbox__close{ background:rgba(85,88,94,.8) !important; } /* ---- X close, phone view only (Dave 8/31) ------------------------------- Far upper right. Hidden on desktop, where it would land on the site's own nav bar. The Back pill stays either way. */ .fdn-phone__close{ position:fixed !important; top:26px !important; right:30px !important; z-index:10001 !important; display:none !important; align-items:center !important; justify-content:center !important; width:34px !important; height:34px !important; padding:0 !important; border:0 !important; border-radius:999px !important; background:rgba(85,88,94,.8) !important; color:#fff !important; cursor:pointer !important; text-shadow:none !important; box-shadow:none !important; backdrop-filter:none !important; transition:background .16s ease !important; } .fdn-phone__close.is-on{ display:inline-flex !important; } .fdn-phone__close:hover, .fdn-phone__close:focus-visible{ background:#d4a017 !important; outline:none !important; box-shadow:none !important; } /* ---- web address moves up onto the pill row (Dave 8/31) ------------------ Two cells, same grid as the pills above it: "Transition Questions?" on the left, the address field on the right, identical size. No label - the placeholder does that job. */ #webyayTunnel .fdn-weburl-row{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; align-items:stretch !important; margin:8px 0 0 !important; width:100% !important; } #webyayTunnel .fdn-weburl-row > .tunnel-transition-faq-btn{ width:100% !important; margin:0 !important; } #webyayTunnel .fdn-weburl__input{ /* match .tunnel-foundation-pill exactly */ display:block !important; width:100% !important; margin:0 !important; padding:0 14px !important; border:1px solid #dfe2e6; border-radius:999px !important; background:#fff; color:#3a3f42 !important; font:300 12.5px/1 'Plus Jakarta Sans',system-ui,sans-serif !important; letter-spacing:.01em !important; outline:none !important; /* NB: this !important was overriding the pulse keyframe - the ring is the effect Dave asked for, so it stays off only when not pulsing. */ box-shadow:none; text-shadow:none !important; } #webyayTunnel .fdn-weburl__input::placeholder{ color:#9aa1a9 !important; opacity:1 !important; } #webyayTunnel .fdn-weburl__input:focus{ border-color:#d4a017 !important; } /* the throb: border and fill only - no shadows anywhere near it */ @keyframes fdnWeburlPulse{ 0%,100%{ border-color:#dfe2e6; background:#fff; } 50% { border-color:#d4a017; background:#fdf6e6; } } #webyayTunnel .fdn-weburl__input.is-pulsing{ animation:fdnWeburlPulse 1.6s ease-in-out infinite !important; } @media (prefers-reduced-motion: reduce){ #webyayTunnel .fdn-weburl__input.is-pulsing{ animation:none !important; border-color:#d4a017 !important; } } /* the old stacked label/row is gone */ #webyayTunnel .fdn-weburl__label{ display:none !important; } /* ---- "A Couple Quick Questions" panel (Dave 8/31) ------------------------ Two problems: the whole block sat far too low in the window, and the gap between the heading and "Let's figure this out later" was enormous - which is also what pushed the content tall enough to need a scrollbar. Lift the block, and cap that gap at 15px. */ #webyayTunnel .tunnel-care-access__flow{ padding-top:0 !important; margin-top:-25px !important; } #webyayTunnel .tunnel-care-access__head{ margin-top:0 !important; margin-bottom:15px !important; padding-top:0 !important; } /* Dave 9/3 - THE BUG, finally: padding-top:0 was set here on 8/31 to close the gap ABOVE this pill. But padding on a button is INSIDE it, so it did not touch the gap at all - it crushed the pill from 29px to 22px and jammed the label against the top edge. Every "centre the text" attempt since has been stacked on top of that instead of removing it. margin-top:0 is what actually closes the external gap; the pill keeps its own 7px/16px padding and its normal 29px shape, and the label sits centred with no nudging at all. */ #webyayTunnel .tunnel-care-access__skip{ margin-top:0 !important; padding:7px 16px !important; box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:13px !important; } /* whatever sits between them must not reintroduce the gap */ #webyayTunnel .tunnel-care-access__head + *{ margin-top:0 !important; } /* ---- reset pill + its note (Dave 8/31) ---------------------------------- It was drifting toward the Social block instead of sitting with Colour. Pull it up tight under the Accent row; the right edge is aligned to the colour chips at runtime (alignResetColors). And the note was falling off the right edge of the panel - anchor it to the button's right edge instead of centring it, so it opens inward. */ #webyayTunnel .fdn-color-reset{ margin-top:4px !important; margin-bottom:0 !important; } #webyayTunnel .fdn-color-reset::after{ left:auto !important; right:0 !important; transform:translateY(-32px) !important; max-width:min(260px, 76vw) !important; white-space:normal !important; text-align:right !important; } /* ---- fixes for the round of 8/31 ---------------------------------------- */ /* 1. THE PULSE WAS NEVER VISIBLE. The base rule set background and border with !important, and an !important declaration beats a keyframe - so the animation ran the whole time and repainted nothing. Those two properties drop their !important here so the throb can actually take. */ #webyayTunnel .fdn-weburl__input{ background:#fff; border:1px solid #dfe2e6; } @keyframes fdnWeburlPulse{ 0%,100%{ border-color:#e6c98a; background:#fffdf6; } 50% { border-color:#d4a017; background:#fdf0d2; } } /* 2. NO HORIZONTAL SCROLL. The culprit was the logo marquee: its track is 4383px wide and nothing was clipping it, so the whole panel scrolled sideways. Clip it at every level that can leak. */ #webyayTunnel .tunnel-logo-marquee, #webyayTunnel [class*="logo-marquee"]:not([class*="track"]):not([class*="img"]){ overflow:hidden !important; max-width:100% !important; } #webyayTunnel .tunnel-mid, #webyayTunnel .tunnel-mid__content, #webyayTunnel .tunnel-detail, #webyayTunnel .tunnel-card{ overflow-x:hidden !important; max-width:100% !important; } /* 3. reset pill up another 6px */ #webyayTunnel .fdn-color-reset{ margin-top:-2px !important; } /* 4. the note: left-justified, clear of the button, two lines not three */ #webyayTunnel .fdn-color-reset::after{ transform:translateY(-42px) !important; width:max-content !important; max-width:210px !important; text-align:left !important; line-height:1.35 !important; padding:6px 10px !important; } /* nav items read heavy at 400 - thin them (Dave 8/31) */ html body .wg-topbar .wg-nav a.nav-btn, html body .wg-topbar .wg-nav a.nav-contact, html body .wg-topbar .wg-nav a.nav-btn:link, html body .wg-topbar .wg-nav a.nav-btn:visited{ font-weight:300 !important; } /* FAQ and Contact carry their own weight rule elsewhere - match them too */ html body .wg-topbar .wg-nav a#navFaqLink, html body .wg-topbar .wg-nav a#navContactLink, html body .wg-topbar .wg-nav a.nav-faq, html body header.wg-topbar nav.wg-nav a{ font-weight:300 !important; } /* FAQ/Contact carry a triple-class + id rule at 400 - match its specificity */ html body .wg-topbar.wg-topbar.wg-topbar #navFaqLink, html body .wg-topbar.wg-topbar.wg-topbar #navContactLink, html body .wg-topbar.wg-topbar.wg-topbar #navStyleLink, html body .wg-topbar.wg-topbar.wg-topbar #navIncludedLink, html body .wg-topbar.wg-topbar.wg-topbar #navAboutLink{ font-weight:300 !important; } /* the lead block sat too far under the laptop - lift it 25px (Dave 8/31) */ html body .lead.lead--below-compare.fdn-lead{ margin-top:-90px !important; } /* ---- the throb, redone (Dave 8/31) -------------------------------------- Not a fill wash - the fill stays white. It is the OUTLINE that breathes, the way the Start button does: the ring thickens and warms, then settles. Border-width alone would reflow the row, so the growth rides on an inset ring drawn with outline, which costs no layout. No shadows. */ /* Dave 8/31: far too subtle next to the Start button. Same ring idea, much stronger - the ring starts thick and opaque then expands and fades, which is what reads as a throb. Still outline, not a shadow. */ /* Dave 8/31, third go: outline gives a hard edge that snaps - it physically cannot do the soft ring the Start button has. That button uses an expanding box-shadow (see tunnelNextPulse in the shared sheet): 0 0 0 0 rgba(94,115,135,.55) -> 0 0 0 6px rgba(94,115,135,0) i.e. a ring that grows outward from nothing and fades to clear. Same technique here, in gold and thicker. This is a glow ring, not a drop shadow - it is the effect Dave pointed at as the reference. */ @keyframes fdnWeburlPulse{ 0% { box-shadow:0 0 0 0 rgba(212,160,23,.48); border-color:#d4a017; } 70% { box-shadow:0 0 0 5.5px rgba(212,160,23,0); border-color:#e3c37a; } 100% { box-shadow:0 0 0 0 rgba(212,160,23,0); border-color:#d4a017; } } #webyayTunnel .fdn-weburl__input, #webyayTunnel .fdn-weburl__input.is-pulsing{ background:#fff !important; /* fill never changes */ outline:none !important; } #webyayTunnel .fdn-weburl__input.is-pulsing{ animation:fdnWeburlPulse 1.9s cubic-bezier(.22,.61,.36,1) infinite !important; border-width:1.5px !important; } /* the ring bleeds outside the field, so nothing on the way up may clip it */ #webyayTunnel .fdn-weburl-row, #webyayTunnel .fdn-weburl-row--full, #webyayTunnel .tunnel-info-card{ overflow:visible !important; } #webyayTunnel .fdn-weburl__input:focus{ outline:none !important; border-color:#d4a017 !important; } /* the colour swatches need a real, unobstructed hit target */ #webyayTunnel input[type="color"].tunnel-color-picker{ pointer-events:auto !important; position:relative !important; z-index:5 !important; cursor:pointer !important; } #webyayTunnel .tunnel-color-field__inputs, #webyayTunnel .tunnel-color-field{ pointer-events:auto !important; } /* The style headline was rendering all-lowercase (Dave 8/31). The TEXT was right all along - "Friendly style" - so my earlier check passed: textContent ignores text-transform. The band applies lowercase in CSS. Turn it off and the initial cap comes back, matching every other header. */ html body .tunnel-top__headline h2.is-style-headline, html body .tunnel-top__headline h2.is-style-headline *, html body [data-tunnel-headline].is-style-headline{ text-transform:none !important; } /* ---- email options: matched type + a tick on the selected one (8/31) ----- Both pills carry their label in , so they share size and weight. The selected one gets white type and a checkmark on the right, the same cue the style pills use. */ #webyayTunnel .tunnel-email-choice{ position:relative !important; padding-right:42px !important; } #webyayTunnel .tunnel-email-choice strong{ font-weight:400 !important; font-size:15px !important; letter-spacing:.01em !important; } #webyayTunnel .tunnel-email-choice.is-selected strong, #webyayTunnel .tunnel-email-choice.is-active strong, #webyayTunnel .tunnel-email-choice[aria-pressed="true"] strong, #webyayTunnel .tunnel-email-choice.is-selected, #webyayTunnel .tunnel-email-choice.is-active, #webyayTunnel .tunnel-email-choice[aria-pressed="true"]{ color:#fff !important; } /* the tick, right side, only when chosen */ #webyayTunnel .tunnel-email-choice::after{ content:""; position:absolute; top:50%; right:18px; /* Dave 8/31: was far too big - matched to the payment-plan tick */ width:10px; height:5.5px; margin-top:-4px; border-left:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(-45deg); opacity:0; transition:opacity .16s ease; } #webyayTunnel .tunnel-email-choice.is-selected::after, #webyayTunnel .tunnel-email-choice.is-active::after, #webyayTunnel .tunnel-email-choice[aria-pressed="true"]::after{ opacity:1; } /* ---- pin panel content to the top (Dave 8/31) --------------------------- The mid column was centring its content, so on a tall panel the header sat ~300px below the grey bar and the rest was pushed past the fold into a scrollbar. Start at the top with a modest, consistent gap instead. */ /* NB: an earlier attempt added padding here and made the gap WORSE - the space is not from centring, it is the card's own top padding plus the detail block's margin. Halve those instead. */ #webyayTunnel .tunnel-card{ padding-top:7px !important; } #webyayTunnel .tunnel-detail{ margin-top:7px !important; } #webyayTunnel .tunnel-card__eyebrow{ margin-top:8px !important; margin-bottom:5px !important; } #webyayTunnel .tunnel-card__question{ margin-bottom:10px !important; } #webyayTunnel .tunnel-card__stepnum{ margin-top:4px !important; margin-bottom:10px !important; } /* the forms textarea was taller than it needs to be - 15% off */ #webyayTunnel [data-3tile-panel="forms"] textarea, #webyayTunnel .tunnel-forms-flow textarea{ height:var(--fdn-ta-h, auto) !important; } /* ---- the OK pill was clipped on the left (Dave 8/31) -------------------- It animates larger than its resting size and the row had no room on that edge, so the throb got cut off. Give the row left padding and stop it clipping; the pill keeps its place, the growth has somewhere to go. */ #webyayTunnel .tunnel-3tile-ok-row{ overflow:visible !important; /* [Dave 9/9] the 14px I put here to give the throb room pushed the OK out of line with the six tiles above it. Zero - the ring has room outside the row because the row's own overflow is open. */ padding-left:0 !important; } #webyayTunnel .tunnel-3tile-ok{ overflow:visible !important; transform-origin:center center !important; } /* (panel overflow left alone - opening it reintroduced sideways scroll) */ /* NB: opening .tunnel-detail's overflow brought horizontal scrolling back, which is worse. Keep it clipped and give the pill its room INSIDE the row instead (padding-left above), so the throb never reaches the edge. */ /* "Your foundation" eyebrow was jammed against the grey bar - 15px of air. */ #webyayTunnel .tunnel-card__eyebrow{ margin-top:23px !important; } /* the Fast / Affordable / Gorgeous / Functional strip (Dave 8/31): words 10% darker, gold dividers dropped 2px to sit on the type's centre. */ #webyayTunnel .tunnel-mid__tagline-word{ color:#8b8f93 !important; } #webyayTunnel .tunnel-mid__tagline-sep{ position:relative !important; top:2px !important; } /* chat launcher: white glyph on the gold circle (Dave 8/31). The icon is stroke="currentColor", so setting color is all it takes. */ #wgChatBubble{ color:#fff !important; } #wgChatBubble svg{ stroke:#fff !important; color:#fff !important; } /* the gold tab marker over the current step: 3px taller, growing downward so its top edge stays on the divider and the labels do not move (Dave 8/31). */ /* It is .tunnel-active-indicator - a 2px absolutely-positioned bar pinned at top:0. Growing it downward leaves its top edge on the divider and never moves the labels. */ #webyayTunnel .tunnel-active-indicator{ height:4px !important; top:0 !important; bottom:auto !important; } /* Send button in the chat widget: white type on the gold (Dave 8/31) */ #wgChatSend, #wgChatSend *{ color:#fff !important; } /* ---- the topbar is invisible until you scroll (Dave 8/31) --------------- Nothing but the laptop and the price on first paint. The bar and its background fade in together once the page moves. Kept clickable only when visible, so an invisible bar can never eat a click on the hero. */ /* opacity is driven per-frame from the scroll position in foundations.js, so no CSS transition here - a transition would fight the scroll and make it lag. The gradual feel comes from the scroll mapping itself. */ html body .wg-topbar.fdn-topbar-auto{ opacity:0 !important; pointer-events:none !important; transition:none !important; /* NB: will-change:opacity was here and it silently killed the backdrop blur - it promotes the bar to its own compositing layer, so there is nothing behind it left to sample. */ } /* and the hero comes up 40px now that nothing sits above it. The template sets this at triple-class strength (html body section.hero.hero.hero), so match it or the rule never lands - the last value there is calc(170px + clamp(6px,2.4vw,42px)); take 40 off the fixed part. */ html body section.hero.hero.hero{ padding-top:calc(113px + clamp(6px, 2.4vw, 42px)) !important; } /* "Your next clinic website starts here." 15% larger (Dave 8/31). Nothing else. */ html body .fdn-lead .fdn-lead__in{ font-size:clamp(39px, 2.93vw, 47px) !important; } /* the lead-in above the hero price (Dave 8/31) */ #compare .comparison-price-tag .comparison-price-lead, .comparison-price-tag .comparison-price-lead{ display:block !important; margin:0 0 6px !important; font:300 clamp(13px, 1.05vw, 16px)/1.32 'Plus Jakarta Sans',system-ui,sans-serif !important; letter-spacing:.005em !important; color:#5b6169 !important; text-shadow:none !important; } /* ---- hero price block + laptop screen (Dave 8/31) ----------------------- 1. The whole price tag rides up 25px - the new lead-in pushed the block down into the phone below it. margin-top works here even though the element is absolutely positioned: it offsets from its `top`. */ #compare .comparison-price-tag, .comparison-price-tag{ margin-top:-25px !important; } /* 2. lead-in a step larger */ #compare .comparison-price-tag .comparison-price-lead, .comparison-price-tag .comparison-price-lead{ font-size:clamp(17px, 1.44vw, 22px) !important; margin-bottom:7px !important; } /* 3. NB: the white strip was in the scene artwork itself, not the iframe - pulling the frame up did nothing. Dave supplied a corrected scene image instead; this override is reverted. */ .screen.laptop-screen.after-screen{ overflow:hidden !important; } /* tighten the gap between the intro copy and the eight style cards (Dave 8/31) - it was reading as a hole in the section. */ html body #foundations.fdn-grid{ margin-top:10px !important; } /* the grid's own margin was not the driver - the intro block's bottom margin is. Trim it. */ html body #foundationsIntro.value-intro{ margin-bottom:28px !important; padding-bottom:0 !important; } /* ---- phone scene fits the window, always centred (Dave 8/31) ------------- The stage was sized to COVER (height clamped to at least 100vh), so on a short browser the bottom of the scene - and the phone with it - fell off the screen. Size it to CONTAIN instead: whichever of width or height runs out first decides, and the leftover is the black veil. The screen percentages are relative to the stage, so the phone stays registered. */ /* CORRECTION (Dave 8/31): I read this as "fit inside" and letterboxed it - wrong. It must COVER the window edge to edge, with whatever spills over cropped EQUALLY off the top and bottom, so the phone never drifts toward an edge and never falls off. max() on both axes = cover; centring the oversized stage inside an overflow:hidden parent = symmetric crop. */ html body .fdn-phone__stage{ /* cover, but never so large that the phone itself gets cut: the screen is screen sits from 17.79% to 78.89% of the scene height, so the binding constraint is its TOP edge: a scene taller than ~155vh pushes the phone past the edges. In ordinary window shapes the cover value wins and the scene runs edge to edge; only in an extreme short-and-wide window does the cap bite, leaving a thin margin rather than a cropped phone. */ width:min(max(100vw, calc(100vh * 1400 / 933)), calc(152vh * 1400 / 933)) !important; height:min(max(100vh, calc(100vw * 933 / 1400)), 152vh) !important; max-width:none !important; max-height:none !important; min-width:0 !important; min-height:0 !important; aspect-ratio:auto !important; margin:auto !important; flex:none !important; } html body .fdn-phone{ display:grid !important; place-items:center !important; place-content:center !important; overflow:hidden !important; } /* ---- narrow windows: stop the hero text colliding with the laptop ------- (Dave 8/31) At full width the lead block rides up 105px under the laptop and the price tag sits beside it. Once the column narrows, both land ON the laptop, and the enlarged headline runs off the right edge. Below 1100px the lift is given back progressively and the headline is allowed to shrink to a size that actually fits the column. */ @media (max-width: 1100px){ html body .lead.lead--below-compare.fdn-lead{ margin-top:-40px !important; } html body .fdn-lead .fdn-lead__in{ font-size:clamp(26px, 4.2vw, 39px) !important; } #compare .comparison-price-tag, .comparison-price-tag{ margin-top:0 !important; } } @media (max-width: 900px){ html body .lead.lead--below-compare.fdn-lead{ margin-top:8px !important; } html body .fdn-lead .fdn-lead__in{ font-size:clamp(23px, 4.6vw, 32px) !important; } #compare .comparison-price-tag, .comparison-price-tag{ margin-top:6px !important; } #compare .comparison-price-tag .comparison-price-lead, .comparison-price-tag .comparison-price-lead{ font-size:clamp(12px, 1.7vw, 15px) !important; } } /* and the headline may never overflow its column at any width */ html body .fdn-lead .fdn-lead__in{ max-width:100% !important; overflow-wrap:break-word !important; text-wrap:balance; } /* the lead block had a fixed width that outgrew narrow viewports and pushed the whole page into sideways scroll - cap it. */ html body .lead.lead--below-compare.fdn-lead{ box-sizing:border-box !important; max-width:min(100%, calc(100vw - 48px)) !important; } /* and on a genuinely narrow window the price tag stops floating over the laptop and simply sits under the devices, centred. */ /* NB: an earlier attempt made this static below 950px. That dropped it into the flow and it landed on top of "Your next clinic website starts here." It stays absolutely positioned at every width; it just gets smaller. */ @media (max-width: 1000px){ #compare .comparison-price-tag .comparison-price-lead, .comparison-price-tag .comparison-price-lead{ font-size:clamp(11px, 1.5vw, 15px) !important; margin-bottom:4px !important; } #compare .comparison-price-tag strong, .comparison-price-tag strong{ font-size:clamp(22px, 3.4vw, 34px) !important; } #compare .comparison-price-tag em, .comparison-price-tag em{ font-size:clamp(9px, 1.1vw, 12px) !important; } } /* the lead block is offset inside .compare-layout, so capping it against the viewport still let it run past the right edge - cap the parent too, and clip the section so nothing can force sideways scroll. */ html body .compare-layout{ max-width:100% !important; box-sizing:border-box !important; } html body section.hero{ overflow-x:clip !important; } /* ---- rebuilt INCLUDED block (Dave 8/31) --------------------------------- */ /* the badge and the transition link share one row */ #webyayTunnel .fdn-included-row{ display:flex !important; align-items:center !important; gap:14px !important; flex-wrap:wrap !important; margin:0 0 10px !important; } #webyayTunnel .fdn-included-row .tunnel-info-card__badge{ margin:0 !important; } /* Transition Questions: no pill, just the words and a tucked-in plus */ #webyayTunnel .tunnel-transition-faq-btn.fdn-faq-plain{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin:0 !important; width:auto !important; min-width:0 !important; height:auto !important; color:#5b6169 !important; font-weight:300 !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; gap:3px !important; cursor:pointer !important; } #webyayTunnel .tunnel-transition-faq-btn.fdn-faq-plain .tunnel-foundation-pill__plus{ margin-left:1px !important; transform:translateX(-1px) !important; opacity:.85 !important; } #webyayTunnel .tunnel-transition-faq-btn.fdn-faq-plain:hover{ background:transparent !important; color:#d4a017 !important; } /* the two new white pills sit in the grid like the other six */ #webyayTunnel .fdn-feature-pill{ text-align:center !important; justify-content:center !important; } /* the address field is now the full-width row under the grid */ #webyayTunnel .fdn-weburl-row--full{ display:block !important; width:100% !important; } #webyayTunnel .fdn-weburl-row--full .fdn-weburl__input{ width:100% !important; grid-column:auto !important; } /* the feature modal reuses the FAQ shell, so it needs no new styling beyond making sure it sits above the tunnel */ .fdn-feature-modal{ z-index:100000 !important; } /* at narrow widths the hero's clamp shrinks and the laptop rode up into the browser edge - give it a floor. */ @media (max-width: 1050px){ html body section.hero.hero.hero{ padding-top:calc(135px + clamp(6px, 2.4vw, 42px)) !important; } } /* below 950 the column is tight enough that the tag clipped the laptop - shrink it a touch more and lift it clear. */ @media (max-width: 950px){ #compare .comparison-price-tag, .comparison-price-tag{ margin-top:-38px !important; } #compare .comparison-price-tag .comparison-price-lead, .comparison-price-tag .comparison-price-lead{ font-size:12px !important; } #compare .comparison-price-tag strong, .comparison-price-tag strong{ font-size:24px !important; } } /* under ~880 the devices fill the width and there is genuinely nowhere beside them for the tag - hide it there rather than let it sit on the laptop. The same price is stated in full a few hundred pixels further down the page. */ @media (max-width: 880px){ #compare .comparison-price-tag, .comparison-price-tag{ display:none !important; } } /* ---- the pill grid stays 2 columns (Dave 8/31) -------------------------- Adding the two longer labels let the auto-flow grid reflow into three columns and wrap the text onto three lines. Pin it: two columns, four rows, column-first order (that is how the original six were laid out), single-line labels at the original pill height. */ #webyayTunnel .tunnel-foundation-pills{ grid-template-columns:1fr 1fr !important; grid-template-rows:repeat(4, auto) !important; grid-auto-flow:column !important; grid-auto-columns:0 !important; } #webyayTunnel .tunnel-foundation-pill{ white-space:nowrap !important; min-height:0 !important; padding-left:12px !important; padding-right:10px !important; } #webyayTunnel .tunnel-foundation-pill.fdn-feature-pill{ letter-spacing:-.01em !important; } /* the topbar reads as clear glass over the hero - give it a real frosted blur so the laptop behind it goes soft (Dave 8/31). */ html body .wg-topbar.fdn-topbar-auto{ background:rgba(255,255,255,.72) !important; -webkit-backdrop-filter:blur(16px) saturate(1.25) !important; backdrop-filter:blur(16px) saturate(1.25) !important; } /* the price block drifted down toward the phone - lift it 28px (Dave 8/31) */ #compare .comparison-price-tag, .comparison-price-tag{ margin-top:-53px !important; } @media (max-width: 950px){ #compare .comparison-price-tag, .comparison-price-tag{ margin-top:-66px !important; } } /* the drift is transform-driven; keep it smooth and never let it clip */ #foundations .fdn-card{ will-change:opacity; transition:opacity .18s linear; } #foundations .fdn-card__monitor{ will-change:transform; } /* the imagery popup's media column: a real looping clip on top, two stills beneath it (Dave 8/31 - play badges on a static jpeg were dishonest). */ #fdnExtraFeatureModal .tunnel-feature-modal__media.fdn-xf-media{ background-image:none !important; background:#101112 !important; display:flex !important; flex-direction:column !important; gap:4px !important; padding:0 !important; overflow:hidden !important; } #fdnExtraFeatureModal .fdn-xf-video{ width:100% !important; flex:1 1 62% !important; min-height:0 !important; object-fit:cover !important; display:block !important; background:#101112 !important; } #fdnExtraFeatureModal .fdn-xf-stills{ flex:0 0 38% !important; display:grid !important; grid-template-rows:1fr 1fr !important; gap:4px !important; min-height:0 !important; } #fdnExtraFeatureModal .fdn-xf-stills img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; } /* nudge the Transition Questions link: down 4, right 15 (Dave 8/31) */ #webyayTunnel .tunnel-transition-faq-btn.fdn-faq-plain{ position:relative !important; top:4px !important; margin-left:15px !important; } /* the pill grid drifted away from the INCLUDED row - pull it back up 15px (the badge row's own bottom margin was doing it). */ /* was 17px, my fix took it to 2px - too far. Split it. */ #webyayTunnel .fdn-included-row{ margin-bottom:2px !important; } #webyayTunnel .tunnel-foundation-pills{ margin-top:0 !important; } /* the address field does not need to span both columns - two thirds, left aligned, deliberately staggered against the grid above (Dave 8/31) */ #webyayTunnel .fdn-weburl-row--full{ display:block !important; width:100% !important; } #webyayTunnel .fdn-weburl-row--full .fdn-weburl__input{ width:66% !important; margin-right:auto !important; } /* the whole INCLUDED block was crowding the price above it - drop it 25px (Dave 9/1) */ #webyayTunnel .fdn-included-row{ margin-top:15px !important; /* Dave 9/2: 10px tighter to the price above */ } /* Dave 9/1: the ring was three times fatter than the Start button's and the left + bottom of it were being clipped. .tunnel-detail is a scroll column (overflow-x:hidden / overflow-y:auto) whose box sits exactly on the field's left and bottom edges, so the ring had nowhere to paint. Give it 7px of paint room on those two sides and cancel the shift with a negative margin, so the content column lands in exactly the same place at every breakpoint. */ #webyayTunnel .tunnel-detail{ width:auto !important; margin-left:-7px !important; padding-left:7px !important; padding-bottom:7px !important; } /* Dave 9/1: going from panel 1 to panel 2 the top gray band grew ~10px, which pushed the monitor down and shrank it - a visible jerk. Cause: panel 1's headline is PLAIN TEXT at the smaller style-name size (clamp .. 44px); every later panel's headline is an inline SVG at the template size (clamp .. 48px) whose box is 1.4em tall. Different box, different band height, everything below moves. Reserve the taller box on the headline at all times so the band is the same height on every panel. Text position is unchanged - the h2 only stops collapsing. */ #webyayTunnel .tunnel-top__headline h2{ min-height:calc(1.4 * clamp(26px, 3.4vw, 48px)) !important; } @media (max-width: 767px){ #webyayTunnel .tunnel-top__headline h2{ min-height:calc(1.4 * clamp(31px, 8.3vw, 38px)) !important; } } /* Dave 9/1: the "Choose a look" lead was breaking to three lines with a two-word widow on the last one, which pushed the whole grid down. The block had room to spare (the column is ~1350px and the text was capped at 850px), so widen the measure rather than shrink the type - it fits on two lines from 1024px up. text-wrap:pretty keeps a lone word off the last line at the narrow widths where two lines are not possible. */ #foundationsIntro p{ text-wrap:pretty; } @media (min-width:1150px){ #foundationsIntro p{ width:min(1000px, 100%) !important; max-width:min(1000px, 100%) !important; } } @media (min-width:1024px) and (max-width:1149px){ #foundationsIntro p{ width:min(1000px, 100%) !important; max-width:min(1000px, 100%) !important; font-size:14px !important; line-height:1.55 !important; } } /* Dave 9/1: the chosen style card gets a small gold pill under its description - "Let's build it! ->" - that opens Start Project. Hidden on every card that is not the chosen one, so unselecting removes it. */ #foundations .fdn-card .fdn-build-btn{ display:none; } #foundations .fdn-card.is-chosen .fdn-build-btn{ display:inline-flex; align-items:center; gap:6px; grid-column:1 / -1; justify-self:center; /* the label has 10px of left padding and 2px of right, so a plain centre lands 4px right of the card's true middle - cancel it. */ margin:11px 8px 2px 0; padding:6px 14px 7px; border:0; border-radius:999px; background:#EFAA15; color:#fff; font-family:"Plus Jakarta Sans",Arial,sans-serif; font-size:11.5px; font-weight:400; letter-spacing:.005em; line-height:1; cursor:pointer; transition:background .2s ease, transform .2s ease; } #foundations .fdn-card.is-chosen .fdn-build-btn:hover{ background:#d4930c; transform:translateY(-1px); } #foundations .fdn-card.is-chosen .fdn-build-btn__arrow{ font-size:12.5px; line-height:1; position:relative; top:-.5px; transition:transform .2s ease; } #foundations .fdn-card.is-chosen .fdn-build-btn:hover .fdn-build-btn__arrow{ transform:translateX(2px); } /* Dave 9/1: give the build pill the same breathing ring as the address field in the tunnel - same box-shadow technique as the Start button. */ /* gold-on-charcoal reads far weaker than gold-on-white did in the tunnel, so this ring is opened up and brightened to actually be visible here. */ /* Dave 9/1 (round 2): good, but dial it back - ring 25% smaller and 25% more transparent so it reads as a hint rather than a flare. */ @keyframes fdnBuildPulse{ 0% { box-shadow:0 0 0 0 rgba(239,170,21,.68); } 45% { box-shadow:0 0 0 4.5px rgba(239,170,21,.38); } 80% { box-shadow:0 0 0 9px rgba(239,170,21,0); } 100% { box-shadow:0 0 0 0 rgba(239,170,21,0); } } /* Dave 9/1: it should not pop in - fade it up over 1.5s when the style is switched on, then let the ring start breathing once it has arrived. */ @keyframes fdnBuildIn{ from { opacity:0; } to { opacity:1; } } #foundations .fdn-card.is-chosen .fdn-build-btn{ animation:fdnBuildIn 1.5s cubic-bezier(.33,.0,.2,1) both, fdnBuildPulse 1.9s cubic-bezier(.22,.61,.36,1) 1.5s infinite; } /* the ring needs room to paint */ #foundations .fdn-card, #foundations .fdn-card__label{ overflow:visible !important; } /* ---- Design + Content: "That was easy! Next ->" ------------------------ Dave 9/1: switching "pull from current site" on answers the whole panel, so confirm it under the field and move them along instead of leaving them parked on a screen with nothing left to do. */ /* Dave 9/1 (round 2): it must NEVER be on screen unless the toggle is on - visibility is driven by the row's own class, not just the hidden attribute, so a stale one can't survive a Back. It also sat 32px under the field (the row's 14px grid gap plus its own margin); pull it up tight underneath. And it takes the same ink as the field labels, not gold. */ #webyayTunnel .fdn-usecurrent__done{ display:none !important; } #webyayTunnel .fdn-usecurrent.is-done .fdn-usecurrent__done{ /* Dave 9/1 (round 3): in 25px from the field's left edge, a touch smaller, thinner and softer so it reads as a quiet confirmation. */ margin:-10px 0 0 25px !important; /* Dave 9/1: down 5px, it was crowding the field above */ padding:0 !important; grid-column:2 / -1; display:inline-flex !important; align-items:center; gap:7px; font-size:12.5px !important; line-height:1.4 !important; font-weight:300 !important; letter-spacing:.01em; color:rgba(28,36,42,.62) !important; animation:fdnDoneIn .5s cubic-bezier(.33,0,.2,1) both; } @keyframes fdnDoneIn{ from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } } #webyayTunnel .fdn-usecurrent.is-done .fdn-usecurrent__done-arrow{ font-size:14px; line-height:1; position:relative; /* the arrow glyph sits low in its em box - lift it 5px (Dave 9/1) */ top:-3.5px; animation:fdnDoneArrow 1.05s ease-in-out infinite; } @keyframes fdnDoneArrow{ 0%,100% { transform:translateX(0); } 50% { transform:translateX(4px); } } #webyayTunnel .fdn-usecurrent.is-done .fdn-usecurrent__input{ border-color:rgba(212,160,23,.85) !important; } /* the OK -> Next handoff, hidden behind a short fade of the right column */ #webyayTunnel .tunnel-track{ transition:opacity .2s ease; } #webyayTunnel.is-fdn-handoff .tunnel-track{ opacity:0 !important; } /* Dave 9/1: the review page's first line - the website itself - was showing only a sliver. The shared sheet pulls .tunnel-summary up 20px ("keep the review above the fold", from the sniper template), which on this page puts the first row 20px ABOVE .tunnel-detail's top edge - and that column clips. Zero it here. Measured after: the row sits fully inside, the checkout block still clears the bottom by 50px, and nothing has to scroll. */ #webyayTunnel .tunnel-summary{ margin-top:0 !important; } /* ---- Design + Content: collapsible categories (Dave 9/1) --------------- Collapsed by default: only the label and its on/off switch show. The row is a 2-column grid, so the switch lands in column 2 row 1 and the control flows to column 2 row 2 - no change to where anything sits when open. */ #webyayTunnel .tunnel-3row.fdn-collapse{ align-items:center !important; } #webyayTunnel .fdn-collapse .fdn-collapse__toggle{ justify-self:start !important; align-self:center !important; } #webyayTunnel .fdn-collapse > .tunnel-3row__control{ display:none !important; } #webyayTunnel .fdn-collapse.is-open > .tunnel-3row__control{ display:block !important; /* Dave 9/1 (round 3): flush left with its own section header, not indented into the old label/control column. The label is the heading now, so the content sits directly under it and uses the whole width. */ grid-column:1 / -1 !important; width:100% !important; min-width:0 !important; animation:fdnSectionIn .28s cubic-bezier(.33,0,.2,1) both; } @keyframes fdnSectionIn{ from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } /* the label reads as the section heading now */ #webyayTunnel .fdn-collapse > .tunnel-3row__label{ /* [Dave 9/5] tapping the title opens the row now, so it reads as tappable */ cursor:pointer; } /* each open section's own OK - small, quiet, folds the section back up */ #webyayTunnel .fdn-collapse__ok{ display:none; } #webyayTunnel .fdn-collapse.is-open .fdn-collapse__ok{ display:inline-flex !important; align-items:center; justify-content:center; margin:12px 0 2px !important; padding:6px 20px 7px !important; border:1px solid rgba(28,36,42,.18) !important; border-radius:999px !important; background:#fff !important; color:#1c242a !important; font-family:"Plus Jakarta Sans",Arial,sans-serif !important; font-size:12px !important; font-weight:400 !important; letter-spacing:.02em; line-height:1 !important; cursor:pointer; transition:background .18s ease, border-color .18s ease; } #webyayTunnel .fdn-collapse.is-open .fdn-collapse__ok:hover{ background:#EFAA15 !important; border-color:#EFAA15 !important; color:#fff !important; } /* the reset pill was wrapping to two lines once the section folded/unfolded */ #webyayTunnel .fdn-color-reset{ white-space:nowrap !important; } /* Dave 9/1: the tile OK pill carries a slate-gray attention ring (tunnelNewSitePulse, rgba(94,115,135,...)) that reads as a smudge behind the gold pill. Re-cut the same ring in the page's own gold so it matches the Start button and the build pill instead of fighting them. */ @keyframes fdnTileOkPulse{ 0%,100% { box-shadow:0 0 0 0 rgba(239,170,21,.42); } 50% { box-shadow:0 0 0 7px rgba(239,170,21,0); } } #webyayTunnel .tunnel-3tile-ok.is-pulsing, #webyayTunnel .tunnel-3tile-ok{ animation-name:fdnTileOkPulse !important; } /* ---- Design + Content: switches in one left column (Dave 9/1) ---------- All five rows - the "pull from current site" shortcut and the four folded categories - put their switch in column 1 and their heading in column 2, so the switches line up and the headings share one indent. Column 2 takes the rest of the row, which is wider than the old fixed 316px content column, so every heading now holds a single line. */ #webyayTunnel .tunnel-3row.fdn-collapse{ grid-template-columns:auto minmax(0,1fr) !important; align-items:center !important; column-gap:14px !important; } /* Dave 9/1: the shortcut row keeps its field ALONGSIDE the heading, all on one line - the heading may wrap to two lines to make room. Three columns: switch, heading, field. */ #webyayTunnel .tunnel-3row.fdn-usecurrent{ grid-template-columns:auto auto minmax(0,1fr) !important; align-items:center !important; /* same gap as the folded rows so all five headings share one left edge */ column-gap:14px !important; } #webyayTunnel .fdn-collapse > .tunnel-3row__label{ grid-column:2 !important; grid-row:1 !important; white-space:nowrap !important; max-width:none !important; } #webyayTunnel .fdn-usecurrent > .tunnel-3row__label{ grid-column:2 !important; grid-row:1 !important; white-space:normal !important; max-width:none !important; } #webyayTunnel .fdn-collapse > .fdn-collapse__toggle, #webyayTunnel .fdn-usecurrent > .fdn-usecurrent__toggle{ grid-column:1 !important; grid-row:1 !important; justify-self:start !important; align-self:center !important; margin:0 !important; } /* the open section's content sits under its heading, flush with it */ #webyayTunnel .fdn-collapse.is-open > .tunnel-3row__control{ grid-column:2 / -1 !important; grid-row:2 !important; } /* the address field and its messages line up under the heading too */ #webyayTunnel .fdn-usecurrent > .fdn-usecurrent__control{ grid-column:3 !important; grid-row:1 !important; display:block !important; margin:0 !important; } #webyayTunnel .fdn-usecurrent > .fdn-usecurrent__nudge, #webyayTunnel .fdn-usecurrent > .fdn-usecurrent__done{ grid-column:3 / -1 !important; grid-row:2 !important; } #webyayTunnel .fdn-usecurrent .fdn-usecurrent__input{ width:100% !important; } /* the social intro reads better on a narrower measure (Dave 9/1) */ #webyayTunnel [data-3tile-panel="overall"] .tunnel-3tile-panel__intro{ max-width:min(390px, 100%) !important; } /* Dave 9/1: nudge the style pill up 2px and right 10px. A transform rather than touching the percentages, so it stays anchored to the monitor art at every size and the offset is exact. */ #webyayTunnel .fdn-stylepick{ transform:translate(10px, -2px) !important; } /* ---- "View