/* Mosai — OASIS Intelligence landing page * module.css * * Type, colour and the component classes (.h2, .p, .btn, .container …) come * from the theme's compiled Tailwind build, template_tailwind.min.css. * * IMPORTANT: that build is generated from the theme's own content globs, so it * only ships the utilities the rest of the site already uses. It is NOT a full * Tailwind build, and we don't control when it is regenerated. Every utility * this page needs that isn't in it is therefore declared below, by hand, with * exactly the values Tailwind would emit. Checked against the live build on * 2026-10-23 (hub_generated/.../1789657388611/template_tailwind.min.css). * * If you add a class to module.html, check it against the live build first. * Everything is scoped under `.mosai-lp`, so none of it leaks into other * modules — and if the theme is ever rebuilt to include this page, these * declarations become harmless duplicates rather than conflicts. */ /* ===================================================================== 0. BUILD GAP — utilities used in module.html that the live theme stylesheet does not currently ship. ===================================================================== */ .mosai-lp.mosai-lp .align-super { vertical-align:super; } .mosai-lp.mosai-lp .font-bold { font-weight:700; } .mosai-lp.mosai-lp .font-semibold { font-weight:600; } .mosai-lp.mosai-lp .whitespace-nowrap { white-space:nowrap; } .mosai-lp.mosai-lp .pointer-events-none { pointer-events:none; } .mosai-lp.mosai-lp .list-none { list-style-type:none; } .mosai-lp.mosai-lp .shrink-0 { flex-shrink:0; } .mosai-lp.mosai-lp .self-center { align-self:center; } .mosai-lp.mosai-lp .p-0 { padding:0; } .mosai-lp.mosai-lp .pt-10 { padding-top:2.5rem; } .mosai-lp.mosai-lp .pt-\[76px\] { padding-top:76px; } .mosai-lp.mosai-lp .mt-4 { margin-top:1rem; } .mosai-lp.mosai-lp .mt-6 { margin-top:1.5rem; } .mosai-lp.mosai-lp .mt-\[14px\] { margin-top:14px; } .mosai-lp.mosai-lp .gap-3\.5 { gap:0.875rem; } .mosai-lp.mosai-lp .gap-x-12 { column-gap:3rem; } .mosai-lp.mosai-lp .h-1 { height:0.25rem; } .mosai-lp.mosai-lp .h-24 { height:6rem; } .mosai-lp.mosai-lp .w-24 { width:6rem; } .mosai-lp.mosai-lp .h-\[165px\] { height:165px; } .mosai-lp.mosai-lp .w-\[165px\] { width:165px; } .mosai-lp.mosai-lp .max-w-\[240px\] { max-width:240px; } .mosai-lp.mosai-lp .max-w-full { max-width:100%; } .mosai-lp.mosai-lp .max-w-\[302px\] { max-width:302px; } .mosai-lp.mosai-lp .max-w-\[520px\] { max-width:520px; } .mosai-lp.mosai-lp .max-w-\[565px\] { max-width:565px; } .mosai-lp.mosai-lp .max-w-\[756px\] { max-width:756px; } .mosai-lp.mosai-lp .max-w-\[824px\] { max-width:824px; } .mosai-lp.mosai-lp .max-w-\[852px\] { max-width:852px; } .mosai-lp.mosai-lp .max-w-\[880px\] { max-width:880px; } .mosai-lp.mosai-lp .max-w-\[1060px\] { max-width:1060px; } .mosai-lp.mosai-lp .max-w-\[1265px\] { max-width:1265px; } .mosai-lp.mosai-lp .text-\[0\.65em\] { font-size:0.65em; } .mosai-lp.mosai-lp .text-\[1\.7rem\] { font-size:1.7rem; } .mosai-lp.mosai-lp .text-light { color:#FFFFFF; } .mosai-lp.mosai-lp .text-dark-10 { color:#E5ECF1; } .mosai-lp.mosai-lp .text-secondary { color:#166886; } .mosai-lp.mosai-lp .bg-secondary-20 { background-color:#CCE2E5; } .mosai-lp.mosai-lp .shadow-\[0_2px_20px_0_rgba\(0\,0\,0\,0\.10\)\] { box-shadow:0 2px 20px 0 rgba(0,0,0,0.10); } @media (min-width: 768px) { .mosai-lp.mosai-lp .md\:gap-10 { gap:2.5rem; } .mosai-lp.mosai-lp .md\:grid-cols-\[auto_1fr\] { grid-template-columns:auto 1fr; } .mosai-lp.mosai-lp .md\:mt-5 { margin-top:1.25rem; } .mosai-lp.mosai-lp .md\:mt-6 { margin-top:1.5rem; } .mosai-lp.mosai-lp .md\:mt-8 { margin-top:2rem; } .mosai-lp.mosai-lp .md\:mt-10 { margin-top:2.5rem; } .mosai-lp.mosai-lp .md\:mt-14 { margin-top:3.5rem; } .mosai-lp.mosai-lp .md\:mt-16 { margin-top:4rem; } } @media (min-width: 1024px) { .mosai-lp.mosai-lp .lg\:gap-8 { gap:2rem; } .mosai-lp.mosai-lp .lg\:gap-\[22px\] { gap:22px; } .mosai-lp.mosai-lp .lg\:gap-\[30px\] { gap:30px; } .mosai-lp.mosai-lp .lg\:gap-\[77px\] { gap:77px; } .mosai-lp.mosai-lp .lg\:gap-x-\[100px\] { column-gap:100px; } .mosai-lp.mosai-lp .lg\:mt-0 { margin-top:0; } .mosai-lp.mosai-lp .lg\:mt-10 { margin-top:2.5rem; } .mosai-lp.mosai-lp .lg\:mt-20 { margin-top:5rem; } .mosai-lp.mosai-lp .lg\:mt-\[108px\] { margin-top:108px; } .mosai-lp.mosai-lp .lg\:p-14 { padding:3.5rem; } .mosai-lp.mosai-lp .lg\:pb-24 { padding-bottom:6rem; } .mosai-lp.mosai-lp .lg\:pb-\[43px\] { padding-bottom:43px; } .mosai-lp.mosai-lp .lg\:pt-\[52px\] { padding-top:52px; } .mosai-lp.mosai-lp .lg\:px-\[52px\] { padding-left:52px; padding-right:52px; } .mosai-lp.mosai-lp .lg\:min-h-\[390px\] { min-height:390px; } .mosai-lp.mosai-lp .lg\:min-h-\[511px\] { min-height:511px; } .mosai-lp.mosai-lp .lg\:self-end { align-self:flex-end; } .mosai-lp.mosai-lp .lg\:text-\[1\.71rem\] { font-size:1.71rem; } } /* ===================================================================== 1. TYPE ===================================================================== Margin reset first, at ZERO specificity. Writing `margin: 0` inside each type class gives it 0,2,0 — which silently beats the theme's own `.mt-8` (0,1,0), so margin utilities on these elements did nothing at all. Wrapping both halves in :where() drops this to 0,0,0, below everything. The page uses the design system's type classes (.h2, .h3, .h4, .p, .p-small, .h6) wherever the comp matches them. These four sizes are the exceptions — deliberately oversized moments the scale doesn't carry. They are built on the system's own font and weight tokens so they stay in family, and they shrink with the viewport because the comp is desktop-only. */ .mosai-lp .lp-display { font-family: "Pathway Extreme", sans-serif; font-weight: 700; font-size: clamp(2.125rem, 1.1rem + 4.55vw, 3.8125rem); /* 34 → 61px */ line-height: 1.12; letter-spacing: -0.03em; } .mosai-lp .lp-stat { font-family: "Pathway Extreme", sans-serif; font-weight: 700; font-size: clamp(2.625rem, 2rem + 2.8vw, 3.325rem); /* 42 → 53.2px */ line-height: 0.95; letter-spacing: -0.03em; } .mosai-lp .lp-card-title { font-family: "Pathway Extreme", sans-serif; font-weight: 700; font-size: clamp(1.9375rem, 1.3rem + 2.9vw, 2.4375rem); /* 31 → 39px */ line-height: 1.18; letter-spacing: -0.03em; } .mosai-lp .lp-footnote { font-family: "Pathway Extreme", sans-serif; font-weight: 500; font-size: 0.625rem; /* 10px */ line-height: 1.5; } :where(.mosai-lp) :where(.lp-display, .lp-stat, .lp-card-title, .lp-footnote, .lp-eyebrow) { margin: 0; } /* Stats footnotes: when the two columns sit side by side (md and up), the columns share rows via subgrid (stat / body copy / footnote), so the two footnotes start on the same line even when their lengths differ. Each footnote is top-aligned within the shared row. The flex-grow rule is the fallback for older browsers without subgrid (bottom-aligned there). Stacked (<768px) is unaffected. */ @media (min-width: 768px) { .mosai-lp .lp-stat-body { flex-grow: 1; } } @supports (grid-template-rows: subgrid) { @media (min-width: 768px) { .mosai-lp .lp-stat-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.875rem; } .mosai-lp .lp-stat-col .lp-footnote { align-self: start; } } } /* The hero eyebrow. Not .h6 — that is DM Sans 15px uppercase with +1.5px tracking, and the comp wants Pathway Extreme SemiBold 16px in sentence case. Undoing three of .h6's properties to get there was worse than saying it once. Colour is the comp's #80CDD0, which is close to but not the system's accent-lightteal (#82CBCA). */ .mosai-lp.mosai-lp .lp-eyebrow { font-family: "Pathway Extreme", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1; /* comp: a 15px box on a 16px face */ letter-spacing: -0.0156em; /* -0.25px at 16px */ /* Doubled root for 0,3,0. The theme paints every p/h1-h6/li inside `.dark` #fff at that specificity, which was overriding this to white. */ color: #80CDD0; } /* The Two Ways add-on label. Same family as the hero eyebrow but the comp (node 14:408) sets it in Pathway Extreme Medium 16.46px in dark-100, typed uppercase with no extra tracking — not .h6, which is DM Sans 15px with +1.5px of it. */ .mosai-lp.mosai-lp .lp-eyebrow--addon { font-weight: 500; font-size: 1.029rem; /* 16.46px */ letter-spacing: normal; text-transform: uppercase; color: #0E4174; } /* Buttons nudge their arrow on hover. The glyph is wrapped so only it moves — animating the whole label would shift the text. */ .mosai-lp .lp-arrow { display: inline-block; transition: transform 320ms cubic-bezier(0.34, 1.45, 0.64, 1); } .mosai-lp .btn a:hover .lp-arrow, .mosai-lp .btn a:focus-visible .lp-arrow { transform: translateX(0.55em); } @media (prefers-reduced-motion: reduce) { .mosai-lp .lp-arrow { transition: none; } } /* The comp sets the two-column card copy and the AI lede in the display face rather than the body face. */ /* ===================================================================== 2. MARKER HIGHLIGHT ===================================================================== Positioning only — the strokes themselves are built in module.js, which measures each line of text and stretches one marker shape to it. The resting state is a fully drawn stroke. `data-phase="wait"` (clipped to nothing) only ever exists between init and the reveal; if the reveal never fires, module.js forces the resting state after 2s. A clip must never be what the user is left looking at. */ .mosai-lp .lp-hl { position: relative; display: inline-block; /* Measured off the comp rather than taken from the design system's 0.35em default: the gold stroke on "claimed." runs 9.5px past the text at 61px, which is 0.16em. At 0.35em the stroke reached back over the preceding word. */ --lp-hl-bleed-x: 0.16em; /* Stroke height is derived from the font size in module.js (STROKE_EM), not from the line box, so it holds under any leading. This is a nudge on top of that — raise it if a stroke needs to sit taller behind its text. KEEP THE UNIT. module.js reads these into calc(); `0` unitless makes `calc(62px + 0 * 2)` invalid, which silently drops height and top to auto and scatters the strokes. */ --lp-hl-bleed-y: 0px; } .mosai-lp .lp-hl__layer { position: absolute; inset: 0; pointer-events: none; } .mosai-lp .lp-hl__text { position: relative; } .mosai-lp .lp-hl svg { position: absolute; overflow: visible; /* On light ground, multiply is what gives the marker its character: where two strokes overlap the ink doubles, the way a real highlighter behaves. */ mix-blend-mode: multiply; animation-duration: 860ms; /* approved draw speed */ animation-timing-function: ease-out; animation-fill-mode: both; } /* Multiply against a dark ground would erase the stroke, so the hero and the CTA band paint theirs normally. */ .mosai-lp .dark .lp-hl svg { mix-blend-mode: normal; } .mosai-lp .lp-hl svg[data-phase="wait"] { clip-path: inset(0 100% 0 0); } .mosai-lp .lp-hl svg[data-phase="draw"][data-from="left"] { animation-name: mosai-hl-left; } .mosai-lp .lp-hl svg[data-phase="draw"][data-from="right"] { animation-name: mosai-hl-right; } /* The card titles and the add-on tag carry a taller stroke than the default — their leading has room for it, and at these sizes a stroke sized purely from the font reads mean against the text. */ /* The comp's hero strokes run 1.12em and 0.94em of the 61px font. STROKE_EM alone gives 1.06em — between the two, but tight against display type — so the hero carries a little bleed as well. At 1.22em the two lines' strokes overlap by ~6px on a 68.3px pitch, which is fine: the second colour draws over the first, exactly as the comp's hand-placed pair do. */ .mosai-lp .lp-display .lp-hl { --lp-hl-bleed-y: 0.08em; } /* The comp's card strokes run 1.76em and 1.37em of the 39px font — hand-placed, averaging 1.56em. STROKE_EM gives 1.06em, so the bleed carries the rest. The bleed is added in CSS on top of the font-derived height, which is why it can exceed the line pitch: in the comp the two lines' strokes overlap, and that overlap is the treatment. */ .mosai-lp .lp-card-title .lp-hl { --lp-hl-bleed-y: 0.22em; } .mosai-lp .lp-hl[data-hl="magenta"] { --lp-hl-bleed-y: 0.16em; } /* The comp's magenta samples #B86294, which is the brand #991E66 at 70% over white — the ratio holds to three decimals on all three channels, so it is a deliberate opacity rather than a different colour. */ .mosai-lp .lp-hl[data-hl="magenta"] svg { opacity: 0.7; } @keyframes mosai-hl-left { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes mosai-hl-right { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: reduce) { .mosai-lp .lp-hl svg { clip-path: none !important; animation: none !important; } } /* ===================================================================== 2b. TEXT REVEAL ===================================================================== Small on purpose: a 14px lift over 620ms reads as the page settling, not as an effect. module.js writes the per-element delay and owns both states. The armed state floors opacity at 0.25 rather than 0: a below-the-fold heading is then still legible before its trigger line is reached, so the page never reads as half-empty on first paint or to a crawler's screenshot. As everywhere else here, the armed state is only ever set by script and is removed once the run ends — the resting state is the visible one. */ .mosai-lp [data-reveal-state="wait"] { opacity: 0.25; transform: translateY(14px); } .mosai-lp [data-reveal-state="in"] { animation: lp-reveal 620ms cubic-bezier(0.22, 0.7, 0.3, 1) both; } @keyframes lp-reveal { from { opacity: 0.25; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Opacity-only variant. Inside a fixed-height graphic a 14px lift reads as the picture settling rather than as the item arriving, so these fade in place. Specificity (0,3,1) beats the shorthand above, which sets animation-name. */ .mosai-lp .lp-reveal--fade[data-reveal-state="wait"] { transform: none; } .mosai-lp .lp-reveal--fade[data-reveal-state="in"] { animation-name: lp-reveal-fade; } @keyframes lp-reveal-fade { from { opacity: 0.25; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mosai-lp [data-reveal-state] { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ===================================================================== 3. PAINTED BACKGROUNDS ===================================================================== */ /* The hero ground is a mesh gradient in the comp. Its sixteen control points resolve to four colours over a #0E4174 field: a deep navy in the top-left, a brand-teal bloom at left-of-centre, and plum in the bottom-right corner. Reproduced here as stacked radial gradients — the mesh is static, so this is the same picture at no transfer cost. */ .mosai-lp .lp-hero { background-color: #0E4174; background-image: radial-gradient(95% 90% at 100% 100%, #461B53 0%, rgba(70, 27, 83, 0) 62%), radial-gradient(75% 75% at 33% 67%, #166886 0%, rgba(22, 104, 134, 0) 58%), radial-gradient(62% 62% at 33% 33%, #024B72 0%, rgba(2, 75, 114, 0) 56%), radial-gradient(58% 58% at 0% 0%, #033252 0%, rgba(3, 50, 82, 0) 60%); /* The comp specifies 0 34px 24px -10px rgba(0,0,0,.25). Two changes: the negative spread insets the shadow from the viewport edges, so it ended in two visible corners and read as a floating card rather than a section edge — spread is now 0, which pushes the horizontal falloff off screen. And pure black at .25 over the pale stats ground came out as a muddy grey stripe, so it is brand dark at .10 over a shorter drop. */ box-shadow: 0 14px 20px rgba(0, 34, 56, 0.10); } /* Keeps the decor inside the band now that the band itself no longer clips — it can't, because the CTA figure has to break out of it. */ .mosai-lp .lp-decor-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* The square-mosaic artwork across the foot of the hero and the CTA band. Soft-light is what keeps it a texture rather than a graphic; the 0.6 is the opacity the Figma export carried on its own . Both copies are inline so each square can be revealed on its own delay. */ .mosai-lp .lp-decor { position: absolute; left: 50%; bottom: -4%; width: 132%; min-width: 1894px; height: auto; transform: translateX(-50%); mix-blend-mode: soft-light; pointer-events: none; user-select: none; } /* Squares fade and pop in on a seeded random stagger (module.js writes the delays). Scaling about each square's own centre needs fill-box — the default transform-origin for an SVG shape is the viewBox origin, which would fling every square toward the top-left instead. */ /* The 0.6 lives on the group, matching the opacity the Figma exports carry on their own . */ .mosai-lp .lp-decor__squares { opacity: 0.6; } .mosai-lp .lp-decor__squares path { transform-box: fill-box; transform-origin: center; } /* Armed only once module.js says so, and the attribute is removed again when the run finishes. A page with no JS — or with JS that threw — therefore shows every square, rather than a permanently empty band. */ .mosai-lp .lp-decor[data-decor="wait"] path { opacity: 0; } .mosai-lp .lp-decor[data-decor="draw"] path { animation: lp-decor-in 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both; } @keyframes lp-decor-in { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .mosai-lp .lp-decor path { opacity: 1 !important; animation: none !important; transform: none !important; } } .mosai-lp .lp-cta-band { background-color: #0E4174; background-image: url("data:image/webp;base64,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"); background-size: cover; background-position: center; } /* ---- CTA figure ------------------------------------------------------ She is a transparent cutout and the comp has her breaking out of the dark band: 17px above its top edge, and 53px past its foot. The section clips the foot — the comp's frame does the same — which is why `overflow-hidden` lives on the section and not on the band. Geometry straight from the comp (frame 36:279, band 36:274, figure 36:526): band y=23 h=371, figure y=5.79 h=441.47. Her three vertical numbers add up to the band height (441 - 17 - 53 = 371), so she sets it and the copy sits inside. */ .mosai-lp .lp-cta-figure { width: 260px; height: auto; } @media (min-width: 1024px) { .mosai-lp .lp-cta { padding-top: 23px; } /* the white she breaks up into */ .mosai-lp .lp-cta-band { min-height: 371px; } .mosai-lp .lp-cta-figure { width: 390px; height: 441px; /* `top`, not `margin-top`: she is aligned to the foot of the flex row, and on a flex-end item a negative top margin only shrinks its cross-size contribution — it does not lift the box. A relative offset moves what you actually see without touching the layout. */ top: -17px; margin-bottom: -53px; /* The comp sets her at x=192 of 1440 — inset from the band edge, not flush against the container. But the inset eats the copy's width, and the headline needs ~630px to stay on the comp's single line, so a flat percentage wraps it on anything narrower than the comp. This grows the inset only above 1272px, reaching the comp's 116px at 1440 and holding there: full fidelity at the design width, no squeeze below it. */ margin-left: clamp(0px, calc((100vw - 1272px) * 0.7), 116px); } } /* The AI band washes from a very pale cyan to white, and closes on a hairline the next section starts from. Sampled off the comp rather than taken from its gradient stops: Figma encodes this with the from-stop at 81.86% and the to-stop at 52.199%, which does not mean what it looks like — what actually renders is #EBFEFE at the top, reaching white by halfway. Reading #CFFFFE off the stop made the wash far too strong. */ .mosai-lp .lp-ai { background-image: linear-gradient(180deg, #EBFEFE 0%, #FFFFFF 50%); border-bottom: 1px solid #166886; } /* Two Ways cards: a white hotspot in the outer top corner falling to pale blue, so the pair mirrors across the gap. */ .mosai-lp .lp-way { border: 1px solid #166886; border-radius: 17px; background-image: radial-gradient(130% 130% at 6% 1%, #FFFFFF 0%, #D1E8FF 100%); } .mosai-lp .lp-way--right { background-image: radial-gradient(135% 135% at 105% -21%, #FFFFFF 0%, #D1E8FF 100%); } /* ---- Review model cards ---------------------------------------------- Three cards whose stacked rows light up progressively: the first model covers one step of the pipeline, the second three, the add-on all four. The uncovered rows stay pale, so what separates the models is the picture rather than the copy — which is why the stack is not decoration and the fill colours below are not interchangeable. */ .mosai-lp .lp-model { position: relative; border: 1px solid #166886; border-radius: 17px; background-image: radial-gradient(130% 130% at 6% 1%, #FFFFFF 0%, #D1E8FF 100%); } /* The add-on card is the odd one out by design: a dashed magenta edge over a pink ground says "bolt-on" before the tag is read. */ .mosai-lp .lp-model--addon { border: 2px dashed #991E66; background-image: radial-gradient(130% 130% at 6% 1%, #FFFFFF 0%, #F6DDEC 100%); } .mosai-lp .lp-model__tag { position: absolute; top: 27px; left: 50%; transform: translateX(-50%); padding: 6px 11px; background-color: #991E66; color: #fff; font-family: "Pathway Extreme", sans-serif; font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: -0.05em; /* the comp's -0.65px at 13px */ text-transform: uppercase; white-space: nowrap; } .mosai-lp .lp-model__stack { display: flex; flex-direction: column; gap: 4px; width: 188px; max-width: 100%; } .mosai-lp .lp-model__row { display: flex; align-items: center; height: 36px; padding-left: 10px; border-radius: 9.768px; background-color: #D4E2ED; /* the resting, not-covered state */ } .mosai-lp .lp-model__row[data-fill="teal"] { background-color: #82CBCA; } .mosai-lp .lp-model__row[data-fill="blue"] { background-color: #256BA2; } .mosai-lp .lp-model__row[data-fill="navy"] { background-color: #0E4174; } .mosai-lp .lp-model__row[data-fill="magenta"] { background-color: #991E66; } /* The comp places each glyph by hand, but all four centres land within 1.6px of x=27, so one slot carries them at their natural size. */ .mosai-lp .lp-model__icon { flex: none; width: 34px; display: flex; align-items: center; justify-content: center; } .mosai-lp .lp-model__icon img { display: block; } .mosai-lp .lp-model__bars { display: flex; flex-direction: column; gap: 4.14px; margin-left: 5.55px; /* lands the bars on the comp's x=49.55 */ } .mosai-lp .lp-model__bars span { display: block; height: 8.581px; border-radius: 44.399px; background-color: #fff; } .mosai-lp .lp-model__bars span:first-child { width: 126.174px; } .mosai-lp .lp-model__bars span:last-child { width: 84.116px; opacity: 0.6; } /* The benefit icons sit on brand-green tiles. */ .mosai-lp .lp-icon-tile { background-color: #A9C23F; border-radius: 8.5px; } /* ===================================================================== 4. REVENUE CALCULATOR ===================================================================== From the existing `revenue-calculator` module. Delete this block if you place that module on the page instead of using the markup in module.html. (Its own marker highlights now run through .lp-hl above, so the module's `.mrl-hl` rules are no longer needed here.) */ /* The dark panel's gradient. In the markup this was a `bg-[url(...)]` arbitrary utility, which the live theme build does not ship — so on the current site that panel falls back to flat `bg-dark`. Named here instead: a URL is painful to escape into a Tailwind selector, and this is easier to repoint at the HubSpot file manager later. */ .mosai-lp .lp-calc-ground { background-image: url("https://1877912.fs1.hubspotusercontent-na1.net/hubfs/1877912/website-2025/typography/darker-gradient-1.png"); } .mosai-lp .revenue-calculator .mrl-tag { font-size: 12px; line-height: 140%; letter-spacing: 1px; } /* Slider thumb (pseudo-elements, not expressible as utilities). */ .mosai-lp .mrl-range { -webkit-appearance: none; appearance: none; margin: 0; } .mosai-lp .mrl-range:focus { outline: none; } .mosai-lp .mrl-range::-webkit-slider-runnable-track { height: 32px; background: transparent; border: 0; } .mosai-lp .mrl-range::-moz-range-track { height: 32px; background: transparent; border: 0; } .mosai-lp .mrl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: #991E66; border: 4px solid #fff; box-shadow: 0 0 0 1px #991E66, 0 2px 20px rgba(0,0,0,0.1); transition: background-color 300ms ease-in-out; } .mosai-lp .mrl-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #991E66; border: 4px solid #fff; box-shadow: 0 0 0 1px #991E66, 0 2px 20px rgba(0,0,0,0.1); box-sizing: border-box; } .mosai-lp .mrl-range:hover::-webkit-slider-thumb { background: #740244; } .mosai-lp .mrl-range:hover::-moz-range-thumb { background: #740244; } .mosai-lp .mrl-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px #991E66, 0 0 0 6px rgba(0,0,0,0.15); } .mosai-lp .mrl-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px #991E66, 0 0 0 6px rgba(0,0,0,0.15); }