/* ============================================================ MarketResearchly homepage with a fixed full-body background film, in the same pattern as the catnap-video homepage. Loaded only on index.php (body.home-video). The film sits behind everything and moves only when you scroll; sections are glass cards that ride over it, with clear "windows" in between where the film is the whole picture. ============================================================ */ body.home-video { /* style.css paints body white, and a body background would cover the fixed film (it sits at z-index -1), so the body goes clear here */ background: transparent; --glass: rgba(246, 240, 233, .78); /* text-dense surfaces */ --glass-soft: rgba(246, 240, 233, .5); --glass-border: rgba(255, 255, 255, .5); } html:has(body.home-video) { background: #F5EFE8; } /* ---------- the film layer ---------- Fixed behind the page, full bleed. The poster is the instant backdrop underneath, so there is never a blank frame; the canvas fades up over it once a real frame has been drawn. Nothing is laid over the footage. */ .vbg { position: fixed; inset: 0; z-index: -1; background-position: center; background-size: cover; background-repeat: no-repeat; } .vbg-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; } .vbg-canvas.is-live { opacity: 1; } .hv-main { position: relative; overflow-x: clip; } /* ---------- the nav floats over the film ---------- style.css gives .site-nav a white 86% fill and a blur so it can sit over white pages. On the homepage that hid the film behind a solid bar, so it goes clear here and the film runs right up under the logo. */ .home-video .site-nav { position: static; /* scrolls away with the page on index */ background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; } /* The nav now sits on the dark end of the gradient, so the whole bar goes light. The logo is a dark PNG lockup with no light version, so it is knocked out to solid white rather than shipping a second file. */ /* the nav sits on the brightest stretch of the film, so it keeps the dark lockup and gets a light halo rather than being knocked out to white */ .home-video .site-logo img { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 1px 5px rgba(255, 255, 255, .75)); } .home-video .site-nav-links .nav-link { color: var(--mr-ink); text-shadow: 0 0 2px rgba(255, 255, 255, .95), 0 1px 5px rgba(255, 255, 255, .75); } .home-video .site-nav-links .nav-link:hover, .home-video .site-nav-links .nav-link.current { color: #3B3470; } .home-video .site-nav .pill-outline { background: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .95); color: var(--mr-ink); } .home-video .site-nav .pill-outline:hover { background: #fff; } .home-video .nav-toggle { color: var(--mr-ink); background: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .95); } /* ============================================================ COPY ON THE FILM The footage is bright (mean luminance 209 of 255), so light copy was fighting it everywhere: white on a white document panel is unreadable no matter how dark the shadow. Dark ink is the natural fit, it only struggles where a dark chart bar passes behind, and a light halo on the glyphs covers exactly those spots. The halo hugs each letter, so there is no panel and no patch, and the footage is never blurred or covered. Measured across every frame of every section: 8.60 on headings, 6.75 on body. Light copy with a dark halo managed only 1.1 in the same test. ============================================================ */ .home-video .hm-hero > .wrap > .d-xl, .home-video .hv-window-inner .d-lg, .home-video .hm-ps-head .d-md, .home-video .hm-platform > .wrap-wide > .d-xl, .home-video .hm-tour-head .d-lg, .home-video .hm-stories-head .d-lg, .home-video .hm-cta > .wrap > .d-lg { color: var(--mr-ink); /* tight on purpose: the wide outer layers read as a white cloud around the type rather than a halo. Measured 6.79 on headings at this spread. */ text-shadow: 0 0 2px rgb(255, 255, 255), 0 0 4px rgb(255, 255, 255), 0 1px 5px rgba(255, 255, 255, .95), 0 2px 10px rgba(255, 255, 255, .85); } /* body copy keeps the site's paragraph colour (text.css enforces it), it just gets a slightly tighter halo because its strokes are thinner */ .home-video .hm-hero > .wrap > .lede, .home-video .hv-window-inner .body, .home-video .hm-ps-head .body, .home-video .hm-tour-head .body, .home-video .hm-stories-head > div > .body, .home-video .hm-cta > .wrap > .body, .home-video .hm-marquee .label, .home-video .hv-eyebrow, .home-video .hm-stories-head .link { /* the extra weight thickens the stroke, which carries more of the halo, so the glow can stay tight. Measured 5.33 on body at this spread. The colour needs !important to beat text.css, which sets every

to rgb(1 1 37 / 74%) with !important of its own. */ font-weight: 500; text-shadow: 0 0 2px rgb(255, 255, 255), 0 0 4px rgb(255, 255, 255), 0 1px 5px rgba(255, 255, 255, .95), 0 2px 9px rgba(255, 255, 255, .85); color: #161515 !important; } .home-video .hm-marquee .label { color: var(--mr-ink); font-weight: 600; } .home-video .hv-eyebrow { /* !important because the shared rule above now sets the ink that way */ color: #332B63 !important; font-weight: 600; /* the eyebrow is the smallest type on the film, so it carries a slightly wider halo than the rest of the copy: 4.47 with the shared one, 5.67 with this. It is one short line, so the extra glow does not show. */ text-shadow: 0 0 2px rgba(255, 255, 255, 1), 0 1px 4px rgba(255, 255, 255, .95), 0 2px 10px rgba(255, 255, 255, .8); } .home-video .hm-stories-head .link { color: #3B3470 !important; } /* the buttons and the showcase step rail sit on the raw footage too */ .home-video .hm-hero .pill-soft, .home-video .hm-cta .pill-soft { background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .95); color: var(--mr-ink); } .home-video .hm-hero .pill-soft:hover, .home-video .hm-cta .pill-soft:hover { background: #fff; } .home-video .sc-step { border-radius: 999px; } .home-video .sc-step:not(.active) { color: var(--mr-ink); font-weight: 600; text-shadow: 0 0 2px rgba(255, 255, 255, 1), 0 1px 4px rgba(255, 255, 255, .95), 0 2px 9px rgba(255, 255, 255, .8); } .home-video .sc-step:not(.active) .n { background: #332B63; } .home-video .sc-step.active { background: #fff; color: #161618; } .home-video .sc-tags span { color: var(--mr-ink); font-weight: 600; text-shadow: 0 0 2px rgba(255, 255, 255, 1), 0 1px 4px rgba(255, 255, 255, .95), 0 2px 9px rgba(255, 255, 255, .8); } .home-video .sc-tags span::before { background: #332B63; } .home-video .hm-stories-ctl button { background: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .95); color: var(--mr-ink); } /* ---------- hero ---------- */ .home-video .hm-hero-glow { display: none; } .home-video .hm-hero .sc-wrap { padding-top: 110px; } /* showcase.css sets these steps in a mid grey for a white page, which is almost invisible on the film. The inactive ones go light, the active one keeps its white pill with dark ink. */ .home-video .sc-step:hover { color: #332B63; background: rgba(255, 255, 255, .5); } .home-video .sc-step.active .n { background: #161618; } /* ---------- publisher marquee ---------- */ .home-video .hm-marquee .label { margin-bottom: 22px; } .home-video .hm-chip { box-shadow: 0 6px 18px rgba(60, 50, 42, .08); } /* ============================================================ STATEMENT SECTIONS One line of copy on clean background, with a wide film band underneath it. The band is where the footage gets to be big. ============================================================ */ .hv-window { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 120px 24px; text-align: center; } .hv-window-inner { max-width: 860px; margin: 0 auto; } .home-video .hv-window .d-lg { margin: 0 auto; } .home-video .hv-window .d-lg em { font-style: italic; } .home-video .hv-window .body { font-size: 18px; max-width: 640px; margin: 22px auto 0; } .home-video .hv-window .btn-row { margin-top: 30px; justify-content: center; } /* ---------- featured story ---------- */ /* The site gives this section no top padding, so the cards came up 150px under the "Working quietly" statement while the chips above sat 238px clear of it. 90px balances the statement between the two. */ .home-video .hm-story { padding-top: 90px; } .home-video .hm-story-card { background: var(--glass); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); box-shadow: 0 24px 60px rgba(60, 50, 42, .16); } .home-video .hm-story-stats { background: rgba(30, 29, 40, .86); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: 0 24px 60px rgba(30, 29, 40, .3); } /* ---------- problem / solution ---------- */ /* home.css paints this section with a solid cream band (it was built to sit on a white page). Over the film that band covered the footage completely, so it goes clear and only the comparison card keeps a surface. */ .home-video .hm-ps { background: transparent; padding: 120px 0 130px; } /* Comparison card (redesign). The site's version showed one side at a time in a flat white table cut off at the bottom (it was built to run into a cream section that no longer exists over the film). Now both sides sit next to each other in one frosted card. The Problem / Solution tabs were removed on request, so there is no toggle state: both columns are always at full strength. */ .home-video .hv-compare { max-width: 1000px; margin: 52px auto 0; text-align: left; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(24px) saturate(1.15); backdrop-filter: blur(24px) saturate(1.15); box-shadow: 0 30px 70px rgba(60, 50, 42, .16), 0 2px 0 rgba(255, 255, 255, .6) inset; overflow: hidden; position: relative; } .hv-cmp-hd, .hv-cmp-row { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; align-items: center; } .hv-cmp-hd > *, .hv-cmp-row > * { padding: 18px 26px; } .hv-cmp-hd { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mr-ink-2); border-bottom: 1px solid var(--mr-line); } .hv-cmp-hd .c-us { text-transform: none; letter-spacing: 0; padding-top: 16px; padding-bottom: 16px; } .hv-cmp-row { border-bottom: 1px solid var(--mr-line); font-size: 15px; line-height: 1.45; } .hv-cmp-row:last-child { border-bottom: 0; } .hv-cmp-row .c-dim { font-weight: 600; color: var(--mr-ink); } .hv-cmp-row .c-them, .hv-cmp-row .c-us { display: flex; gap: 12px; align-items: center; align-self: stretch; } /* the MarketResearchly column is always a tinted lane, full height */ .hv-cmp-hd .c-us, .hv-cmp-row .c-us { background: rgba(204, 72, 45, .05); align-self: stretch; display: flex; align-items: center; } .hv-cmp-row .c-us { color: var(--mr-ink); } .hv-cmp-row .c-them { color: rgba(22, 22, 24, .72); } .hv-compare .ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .hv-compare .ic svg { width: 12px; height: 12px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .hv-cmp-row .c-them .ic { background: rgba(22, 22, 24, .07); } .hv-cmp-row .c-them .ic svg { stroke: rgba(22, 22, 24, .5); } .hv-cmp-row .c-us .ic { background: var(--mr-accent); } .hv-cmp-row .c-us .ic svg { stroke: #fff; } /* ---------- platform ---------- */ .home-video .hm-platform { padding-bottom: 110px; } .home-video .hm-core { background: rgba(246, 240, 233, .6); border-color: var(--glass-border); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); box-shadow: 0 24px 60px rgba(60, 50, 42, .14); } /* ---------- engine (dark card) ---------- */ .home-video .hm-engine-card { background: rgba(30, 29, 40, .84); border: 1px solid rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); } /* ---------- product tour & stories ---------- */ .home-video .hm-tour { padding-top: 110px; } /* The tour sits over the busiest, darkest stretch of the film. The copy column becomes a frosted card that pairs with the white mock card beside it, and the tabs get a frosted rail. Both are rounded cards, not full-width bands, so the film still runs clean around them. */ .home-video .hm-tabs { border-bottom: 0; padding: 0 14px; border-radius: 20px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 16px 40px rgba(60, 50, 42, .1); } .home-video .hm-tab { color: rgba(22, 22, 24, .72); } .home-video .hm-tab.active { color: var(--mr-ink); } .home-video .hm-tour-text { padding: 38px 38px 34px; border-radius: 20px; background: rgba(246, 240, 233, .82); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); box-shadow: 0 24px 60px rgba(60, 50, 42, .14); } .home-video .hm-tour-text .body { color: rgba(22, 22, 24, .8); } .home-video .hm-callout { background: rgba(255, 255, 255, .75); } .home-video .hm-tour-chips span { background: rgba(255, 255, 255, .7); } .home-video .hm-mock { box-shadow: 0 24px 60px rgba(60, 50, 42, .14); } .home-video .hm-story-tile { box-shadow: 0 16px 40px rgba(60, 50, 42, .1); } /* Slider arrows stay where the site puts them (top right of the heading row; the user asked to keep that position). The arrow glyph's ink sits ~2px below the middle of its line box (measured), so flex centring alone leaves it low in the circle. A 4px bottom pad lifts it by 2px to the true centre. */ .home-video .hm-stories-ctl button { padding: 0 0 4px; line-height: 1; box-shadow: 0 8px 22px rgba(60, 50, 42, .1); } /* ---------- final CTA: straight on the film, like the windows ---------- */ .home-video .hm-cta { padding: 200px 0 150px; } /* The footer is a dense block of links, so it needs a surface it can be read on. The tint eases in from nothing (no hard seam) but is near-solid within 110px, and the extra top padding keeps every column below the fade. */ .home-video .site-footer { border-top: 0; padding-top: 150px; background: linear-gradient(rgb(97 88 123 / 0%), rgb(217 206 248 / 95%) 110px); } @media (prefers-reduced-motion: reduce) { .home-video .hm-hero .wrap, .hv-window-inner { transform: none !important; } }