landmark is focused programmatically when the skip link is followed; it is not an interactive control, so it must not draw a focus ring of its own. */ main:focus { outline: none; } /* Offsets anchor-scroll targets so the sticky header never covers the heading. */ #features, #live-demo, #why, #works-with, #pricing, #compare, #faq, #story { scroll-margin-top: 88px; } /* ---------- Header ---------- */ .marketing-appbar.mud-appbar { position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--mud-palette-lines-default); height: 68px; } .marketing-nav { display: flex; align-items: center; gap: 2rem; margin: 0 1.5rem; } .marketing-nav a { position: relative; font-size: 0.9rem; font-weight: 500; color: var(--mud-palette-text-secondary); text-decoration: none; padding: 0.25rem 0; transition: color 120ms ease; } .marketing-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; border-radius: 2px; background: var(--mud-palette-primary); transition: right 160ms ease; } .marketing-nav a:hover, .marketing-nav a:focus-visible { color: var(--mud-palette-text-primary); } .marketing-nav a:hover::after, .marketing-nav a:focus-visible::after { right: 0; } .marketing-nav-mobile { display: flex; flex-direction: column; gap: 0.25rem; } .marketing-nav-mobile a { display: block; padding: 0.7rem 0.6rem; border-radius: 10px; font-size: 1rem; font-weight: 500; color: var(--mud-palette-text-primary); text-decoration: none; } .marketing-nav-mobile a:hover, .marketing-nav-mobile a:focus-visible { background: var(--mud-palette-grey-light); } /* ---------- Section rhythm ---------- */ .landing-section { padding: 6rem 1.25rem; } .landing-section-tight { padding: 3.5rem 1.25rem; } /* The alternating band uses the app's own grey background against the layout's white, so the page reads as distinct chapters without introducing any new colour. */ .landing-section-alt { background: var(--mud-palette-background); border-top: 1px solid var(--mud-palette-lines-default); border-bottom: 1px solid var(--mud-palette-lines-default); } @media (max-width: 599px) { .landing-section { padding: 3.75rem 1rem; } .landing-section-tight { padding: 2.5rem 1rem; } } /* ---------- Shared marketing typography ---------- */ .section-head { max-width: 44rem; margin: 0 auto 3.5rem; text-align: center; } .section-eyebrow { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mud-palette-primary); margin-bottom: 0.75rem; } .section-title { font-size: clamp(1.65rem, 3.2vw, 2.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; color: var(--mud-palette-text-primary); } .section-lede { margin: 0.9rem auto 0; max-width: 36rem; font-size: 1.03rem; line-height: 1.65; color: var(--mud-palette-text-secondary); } /* ---------- Hero ---------- */ .hero-section { position: relative; /* Bottom padding is deliberately small: LiveDemoSection follows with almost none of its own, so the dashboard panel starts inside the first viewport instead of a screen below it. */ padding: 3.25rem 1.25rem 1.75rem; text-align: center; overflow: hidden; } /* A single, very soft brand-tinted wash behind the fold - enough to lift the hero off plain white without turning the page into a gradient-heavy template. */ .hero-section::before { content: ""; position: absolute; inset: -40% 0 auto; height: 70rem; background: radial-gradient(60% 42% at 50% 42%, rgba(79, 70, 229, 0.09), rgba(79, 70, 229, 0) 70%); pointer-events: none; } .hero-section > * { position: relative; } @media (max-width: 599px) { .hero-section { padding: 2.25rem 1rem 1.25rem; } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem 0.35rem 0.6rem; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; background: var(--mud-palette-surface); font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-text-secondary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .hero-title { margin: 1.15rem auto 0; max-width: 20ch; font-size: clamp(2.35rem, 5.6vw, 4.15rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; color: var(--mud-palette-text-primary); } .hero-subtitle { margin: 1.1rem auto 0; max-width: 34rem; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; color: var(--mud-palette-text-secondary); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.85rem; margin-top: 1.75rem; } .hero-note { margin-top: 0.9rem; font-size: 0.83rem; color: var(--mud-palette-text-secondary); } /* Phone type scale. At the shared clamp floor the headline ran to three lines; this step down lands it on two, breaking at the sentence, and lifts the dashboard panel ~62px so its chrome, site header and range control clear the fold on a 390x844 screen. The metric numbers still sit below it there - closing that last gap would mean shrinking the subtitle and lede too, which is a copy decision rather than a spacing one. 6.8vw keeps the two-line wrap as the viewport grows (the measure scales with it); the 2.1rem cap holds it just under the width where the wrap would break back to three. Widening to 26ch stops the base 20ch cap from doing the same. Must stay below the base hero rules: a media query adds no specificity, so source order alone decides this - sitting above them, these declarations were silently dead. */ @media (max-width: 599px) { .hero-title { margin-top: 0.9rem; max-width: 26ch; font-size: clamp(1.5rem, 6.8vw, 2.1rem); } .hero-subtitle { margin-top: 0.85rem; } .hero-note { margin-top: 0.7rem; } } @media (max-width: 480px) { .hero-actions { flex-direction: column; align-items: stretch; margin-top: 1.35rem; } .hero-actions .mud-button-root { width: 100%; } } /* ---------- Motion ---------- */ .fade-in-up { animation: marketing-fade-in-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both; } .fade-in-up-delayed { animation: marketing-fade-in-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both; } @keyframes marketing-fade-in-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 599px) { .hide-xs { display: none; } } /* ---------- Product screenshot frame ---------- */ .dashboard-preview-frame { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 18px; box-shadow: 0 30px 70px -28px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.04); overflow: hidden; } .dashboard-preview-chrome { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-grey-lighter); } .chrome-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .chrome-url { margin: 0 auto; font-size: 0.72rem; color: var(--mud-palette-text-secondary); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; padding: 0.15rem 0.9rem; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-preview-card { border-radius: 16px; } .marketing-copy-btn { border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); border-radius: 8px; font-family: inherit; font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.8rem; cursor: pointer; color: var(--mud-palette-text-primary); transition: border-color 120ms ease, background-color 120ms ease; } .marketing-copy-btn:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); } /* ---------- Trust / value strip ---------- */ .trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--mud-palette-lines-default); border-bottom: 1px solid var(--mud-palette-lines-default); } .trust-item { display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--mud-palette-text-primary); } @media (max-width: 780px) { .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-item { justify-content: flex-start; font-size: 0.85rem; } } /* ---------- Feature cards ---------- */ .feature-card { height: 100%; padding: 1.75rem; border-radius: 16px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; } .feature-card:hover { transform: translateY(-3px); border-color: rgba(79, 70, 229, 0.35); box-shadow: 0 14px 32px -18px rgba(15, 23, 42, 0.28); } .feature-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary); margin-bottom: 1.1rem; } .feature-card h3 { margin: 0 0 0.45rem; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; color: var(--mud-palette-text-primary); } .feature-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--mud-palette-text-secondary); } /* ---------- Benefits ---------- */ .benefit-item { height: 100%; padding-left: 1.25rem; border-left: 2px solid var(--mud-palette-primary); } .benefit-item h3 { margin: 0 0 0.5rem; font-size: 1.08rem; font-weight: 650; letter-spacing: -0.01em; color: var(--mud-palette-text-primary); } .benefit-item p { margin: 0; font-size: 0.94rem; line-height: 1.65; color: var(--mud-palette-text-secondary); } /* ---------- Pricing ---------- */ .pricing-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 2rem 1.75rem; border-radius: 18px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; } .pricing-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.3); } /* Growth is emphasised with the brand border and a lift rather than an inverted background, so the paid plan stands out without making the trial card look disabled beside it. */ .pricing-card-featured { border: 2px solid var(--mud-palette-primary); box-shadow: 0 24px 50px -26px rgba(79, 70, 229, 0.55); } @media (min-width: 960px) { .pricing-card-featured { transform: translateY(-10px); } .pricing-card-featured:hover { transform: translateY(-13px); } } .pricing-badge { position: absolute; top: -0.75rem; left: 1.75rem; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); } .pricing-badge-muted { background: var(--mud-palette-text-primary); color: #fff; } .pricing-plan-name { margin: 0; font-size: 0.98rem; font-weight: 650; color: var(--mud-palette-text-primary); } .pricing-amount { display: flex; align-items: baseline; gap: 0.4rem; margin: 1rem 0 0.35rem; } .pricing-amount .amount { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--mud-palette-text-primary); } .pricing-amount .period { font-size: 0.92rem; font-weight: 500; color: var(--mud-palette-text-secondary); } .pricing-description { margin: 0; min-height: 2.6rem; font-size: 0.89rem; line-height: 1.5; color: var(--mud-palette-text-secondary); } .pricing-features { list-style: none; margin: 1.35rem 0 0; padding: 1.35rem 0 0; border-top: 1px solid var(--mud-palette-lines-default); display: flex; flex-direction: column; gap: 0.7rem; } .pricing-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.885rem; line-height: 1.45; color: var(--mud-palette-text-primary); } .pricing-features .mud-icon-root { flex-shrink: 0; margin-top: 0.05rem; } /* Compact pre-purchase disclosure. Deliberately small and muted: it has to be visible before someone picks a plan, but it must never compete with the plans themselves. The full terms live on the legal pages. */ .pricing-microcopy { max-width: 44rem; margin: 2.5rem auto 0; text-align: center; font-size: 0.78rem; line-height: 1.7; color: var(--mud-palette-text-secondary); } .pricing-microcopy .dot-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.9rem; margin-bottom: 0.5rem; } .pricing-microcopy .dot-list span { position: relative; } .pricing-microcopy .dot-list span + span::before { content: "\00b7"; position: absolute; left: -0.55rem; color: var(--mud-palette-lines-inputs); } .pricing-microcopy a { color: var(--mud-palette-text-secondary); text-decoration: underline; text-underline-offset: 2px; } .pricing-microcopy a:hover { color: var(--mud-palette-primary); } /* ---------- Plan comparison ---------- */ .plan-compare { max-width: 56rem; margin: 0 auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; background: var(--mud-palette-surface); overflow: hidden; } .plan-compare table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .plan-compare th, .plan-compare td { padding: 0.85rem 1rem; text-align: center; border-bottom: 1px solid var(--mud-palette-lines-default); } .plan-compare tbody tr:last-child th, .plan-compare tbody tr:last-child td { border-bottom: none; } .plan-compare thead th { background: var(--mud-palette-grey-lighter); font-weight: 650; color: var(--mud-palette-text-primary); white-space: nowrap; } .plan-compare th[scope="row"] { text-align: left; font-weight: 500; color: var(--mud-palette-text-secondary); } .plan-compare .col-feature { text-align: left; width: 34%; } /* Marks the recommended column top to bottom with one tinted stripe - identifiable without adding a second colour or an extra border to every cell. The column also carries a text label, so the emphasis never depends on colour alone. */ .plan-compare .col-recommended { background: rgba(79, 70, 229, 0.05); color: var(--mud-palette-text-primary); font-weight: 600; } .plan-compare thead .col-recommended { background: rgba(79, 70, 229, 0.11); color: var(--mud-palette-primary); } .plan-compare-hint { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mud-palette-primary); } /* Stacked cards replace the grid below the width where four columns stop being readable. Both markups always exist and CSS picks one, so the section needs no interactive circuit. */ .plan-compare-stack { display: none; max-width: 34rem; margin: 0 auto; } @media (max-width: 899px) { .plan-compare { display: none; } .plan-compare-stack { display: grid; gap: 1rem; } } .plan-compare-card { border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; background: var(--mud-palette-surface); padding: 1.25rem 1.4rem; } .plan-compare-card.recommended { border-color: var(--mud-palette-primary); box-shadow: 0 12px 28px -20px rgba(79, 70, 229, 0.5); } .plan-compare-card h3 { margin: 0; font-size: 1.02rem; font-weight: 650; color: var(--mud-palette-text-primary); } .plan-compare-card dl { margin: 1rem 0 0; display: grid; gap: 0.55rem; } .plan-compare-card .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; } .plan-compare-card dt { color: var(--mud-palette-text-secondary); } .plan-compare-card dd { margin: 0; display: flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--mud-palette-text-primary); text-align: right; } /* ---------- Trial steps ---------- */ .trial-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } @media (max-width: 780px) { .trial-steps { grid-template-columns: 1fr; gap: 1.75rem; max-width: 28rem; margin: 0 auto; } } .trial-step h3 { margin: 1rem 0 0.4rem; font-size: 1.02rem; font-weight: 650; color: var(--mud-palette-text-primary); } .trial-step p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--mud-palette-text-secondary); } .trial-step-badge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary); font-weight: 700; font-size: 0.95rem; } /* ---------- FAQ ---------- */ /* Native

disclosure, styled to match the card language used by the pricing and feature sections. Keeping the platform element means focus, keyboard operation and the expanded/collapsed announcement are the browser's job rather than ours. */ .faq-list { display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); transition: border-color 150ms ease; } .faq-item:hover { border-color: var(--mud-palette-lines-inputs); } .faq-item[open] { border-color: var(--mud-palette-lines-inputs); } .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; cursor: pointer; border-radius: 14px; /* Removes the default disclosure triangle in every engine; the chevron below replaces it. */ list-style: none; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; } .faq-item > summary h3 { margin: 0; font-size: 0.97rem; font-weight: 600; line-height: 1.5; color: var(--mud-palette-text-primary); } /* A pure-CSS chevron, so the control needs no icon font or SVG to render its state. */ .faq-chevron { flex-shrink: 0; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid var(--mud-palette-text-secondary); border-bottom: 2px solid var(--mud-palette-text-secondary); transform: rotate(45deg); transform-origin: center; transition: transform 150ms ease; } .faq-item[open] .faq-chevron { transform: rotate(-135deg); } .faq-answer { padding: 0 1.25rem 1.15rem; } .faq-answer p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--mud-palette-text-secondary); } .faq-answer a { color: var(--mud-palette-primary); text-decoration: underline; text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .faq-chevron { transition: none; } } /* ---------- Final CTA ---------- */ .final-cta-panel { position: relative; background: #0f172a; border-radius: 24px; padding: 4.5rem 2rem; text-align: center; overflow: hidden; } .final-cta-panel::before { content: ""; position: absolute; inset: auto 0 -60% 0; height: 30rem; background: radial-gradient(50% 60% at 50% 100%, rgba(99, 102, 241, 0.35), rgba(15, 23, 42, 0) 70%); pointer-events: none; } .final-cta-panel > * { position: relative; } .final-cta-title { margin: 0 auto; max-width: 22ch; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; color: #fff; } .final-cta-lede { margin: 1rem auto 0; max-width: 32rem; font-size: 1.02rem; line-height: 1.6; color: #cbd5e1; } .final-cta-note { margin-top: 1.1rem; font-size: 0.83rem; color: #94a3b8; } @media (max-width: 599px) { .final-cta-panel { padding: 3rem 1.25rem; border-radius: 18px; } } /* ---------- Footer ---------- */ .marketing-footer { border-top: 1px solid var(--mud-palette-lines-default); padding: 4rem 1.25rem 2.5rem; background: var(--mud-palette-background); } .footer-heading { display: block; margin-bottom: 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mud-palette-text-secondary); } .footer-links { display: flex; flex-direction: column; gap: 0.65rem; list-style: none; margin: 0; padding: 0; } .footer-links a { font-size: 0.885rem; color: var(--mud-palette-text-secondary); text-decoration: none; transition: color 120ms ease; /* The support address is the longest unbreakable string in these columns; on a narrow phone the Support column is half the viewport, so let it wrap rather than push the footer wide. */ overflow-wrap: anywhere; } .footer-links a:hover, .footer-links a:focus-visible { color: var(--mud-palette-text-primary); } /* Byline in the footer fine print. Inherits the row's size and colour so it reads as attribution rather than a call to action; only the name itself is a link, and it picks up weight and an underline on hover instead of a brand colour. */ .footer-attribution a { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: color 140ms ease, border-color 140ms ease; } .footer-attribution a:hover, .footer-attribution a:focus-visible { color: var(--mud-palette-text-primary); border-bottom-color: currentColor; } /* ---------- Public dashboard: range-switch feedback ---------- */ /* The bar's row is always present, so showing it does not push the dashboard down a few pixels and let it spring back when the load finishes. */ .analytics-progress { height: 4px; margin-bottom: 1.25rem; } /* Dimmed rather than replaced with skeletons: the previous window's figures stay readable while the new ones load, which reads as "updating" instead of "gone". Pointer events are off so a stat cannot be clicked while it still belongs to the range the visitor just left. */ .analytics-body { transition: opacity 160ms ease; } .analytics-body.is-refreshing { opacity: 0.5; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .analytics-body { transition: none; } } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; color: var(--mud-palette-text-secondary); } @media (max-width: 599px) { .footer-bottom { justify-content: center; text-align: center; } } /* ---------- Accessibility ---------- */ /* Keyboard focus has to stay visible on the hand-rolled (non-Mud) marketing elements too. */ .marketing-nav a:focus-visible, .marketing-nav-mobile a:focus-visible, .footer-links a:focus-visible, .pricing-microcopy a:focus-visible, .marketing-copy-btn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 3px; border-radius: 4px; } .final-cta-panel a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-in-up, .fade-in-up-delayed { animation: none; } .feature-card, .feature-card:hover, .pricing-card, .pricing-card:hover, .pricing-card-featured, .pricing-card-featured:hover { transition: none; transform: none; } .marketing-nav a::after { transition: none; } } /* =================================================================== Legal pages (Components/Legal/*, Components/Pages/Legal/*) =================================================================== */ .legal-section { margin-bottom: 2.75rem; scroll-margin-top: 84px; } .legal-section:last-child { margin-bottom: 0; } .legal-list { color: var(--mud-palette-text-secondary); font-family: Inter, sans-serif; font-size: 0.95rem; line-height: 1.7; margin: 0 0 1rem; padding-left: 1.25rem; } .legal-list li { margin-bottom: 0.4rem; } .legal-list li:last-child { margin-bottom: 0; } /* Table of contents: two columns on wide screens so a 22-section document stays scannable without becoming a long ladder, collapsing to one column on mobile. */ .legal-toc { columns: 2; column-gap: 2rem; } @media (max-width: 700px) { .legal-toc { columns: 1; } } .legal-toc a { break-inside: avoid; } /* Plan/data tables inside legal copy. Scrollable rather than squashed on narrow screens. */ .legal-content .mud-table-container { overflow-x: auto; } .legal-content table { font-size: 0.92rem; } .legal-content table th { font-weight: 600; white-space: nowrap; } .legal-content table td, .legal-content table th { vertical-align: top; } .legal-content code { background: var(--mud-palette-background-grey); border-radius: 4px; font-size: 0.88em; padding: 0.1em 0.35em; } /* =================================================================== Google sign-in (Components/Account/Pages/Login.razor) =================================================================== */ .google-signin-btn { display: flex; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .google-signin-btn:hover { background: var(--mud-palette-grey-lighter); border-color: var(--mud-palette-lines-default); } .google-signin-btn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; } /* =================================================================== Authenticated app shell (AppSidebar.razor, AppHeader.razor) =================================================================== */ .app-sidebar.mud-drawer { background-color: var(--mud-palette-surface); border-right: 1px solid var(--mud-palette-lines-default); /* MudDrawer only positions itself when it sits inside a MudLayout; this shell is hand-rolled (see MainLayout), so it fell back to position:absolute and the whole navigation scrolled off the top of long analytics pages. Height="100vh" and the drawer's own internal overflow-y:auto nav region show it was always meant to be pinned - this makes it so. */ position: fixed; top: 0; } .app-sidebar .mud-nav-link { border-radius: 8px; font-weight: 500; } .app-sidebar .mud-nav-link:hover { background-color: var(--mud-palette-grey-lighter); } .app-header-user-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: 8px; cursor: pointer; transition: background-color 120ms ease; } .app-header-user-btn:hover { background-color: var(--mud-palette-grey-lighter); } /* Initials render first and always; the , if present, layers on top and falls back to the initials underneath via onerror (no JS interop needed - see AppHeader.razor/Profile.razor). */ .user-avatar { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; overflow: hidden; flex-shrink: 0; } .user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .user-avatar-large { width: 88px; height: 88px; font-size: 1.75rem; } /* =================================================================== Utilities =================================================================== */ /* Text that only assistive technology reads - used where an icon carries the meaning of a cell (the plan comparison ticks and dashes) so nothing depends on colour or glyph shape alone. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Header visibility is done with media queries rather than MudHidden on purpose. MudHidden only knows the viewport once JavaScript has measured it, so the navigation and the sign-in / trial buttons were invisible until the Blazor circuit connected - on the one page where those are the whole point. CSS gets them right on the very first paint. The 960px split matches MudBlazor's own SmAndDown / MdAndUp boundary, so the drawer button and the desktop nav never overlap. */ .marketing-desktop-only { display: none; } .marketing-mobile-only { display: inline-flex; } @media (min-width: 960px) { .marketing-desktop-only { display: flex; } .marketing-mobile-only { display: none; } } /* =================================================================== Brand logo (Components/Layout/BrandMark.razor) =================================================================== */ /* wwwroot/images/logo.png is 1774x887. Measured content box within it: full lockup x 135..1644, y 231..685 -> 1510 x 455 V mark only x 135..569, y 231..685 -> 435 x 455 Both crops below reproduce those windows exactly, so the logo is flush with the space it is given rather than swimming in the artwork's own padding. The numbers are written as literal ratios so the relationship to the measurements above stays readable; if the artwork is ever re-exported, re-measure and update these four values. */ .brand-lockup, .brand-icon { display: block; position: relative; overflow: hidden; flex-shrink: 0; } .brand-lockup img, .brand-icon img { position: absolute; height: auto; max-width: none; /* The PNG carries a solid white background instead of alpha. Multiply drops it against the white and near-white surfaces this logo sits on. */ mix-blend-mode: multiply; } .brand-lockup { aspect-ratio: 1510 / 455; } .brand-lockup img { width: calc(100% * 1774 / 1510); left: calc(-100% * 135 / 1510); top: calc(-100% * 231 / 455); } .brand-icon { aspect-ratio: 435 / 455; } .brand-icon img { width: calc(100% * 1774 / 435); left: calc(-100% * 135 / 435); top: calc(-100% * 231 / 455); } /* =================================================================== Analytics showcase (Components/Analytics/AnalyticsShowcase.razor) The explorable dashboard rendered under the hero, and reusable on any public analytics page. Everything here is layout and chrome only - the cards, charts and lists inside are the same components the signed-in dashboard renders, so the two never drift apart visually. =================================================================== */ .showcase-frame { /* Capping the frame keeps the rest of the landing page reachable while leaving the dashboard fully scrollable inside. Sized against the viewport rather than the content: the panel now opens just under the hero, so it has to leave the toolbar, the metric strip and the top of the chart visible on a laptop while still ending on a cut edge that reads as "there is more below" rather than as a clipped layout. */ max-height: min(74vh, 44rem); display: flex; flex-direction: column; } .showcase-dash { display: flex; flex-direction: column; min-height: 0; background: var(--mud-palette-background); } .showcase-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); position: sticky; top: 0; z-index: 2; } .showcase-site { display: flex; align-items: center; gap: 0.65rem; min-width: 0; } .showcase-site-mark { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--mud-palette-primary); color: #fff; font-size: 0.85rem; font-weight: 700; } .showcase-site-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .showcase-site-name { font-size: 0.9rem; font-weight: 650; color: var(--mud-palette-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .showcase-site-domain { font-size: 0.75rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .showcase-toolbar-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } .showcase-live { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; background: var(--mud-palette-surface); font-size: 0.78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; } .showcase-live b { color: var(--mud-palette-text-primary); font-weight: 650; } .showcase-live-sm { padding: 0.15rem 0.5rem; font-size: 0.72rem; } /* Segmented range control. Plain buttons rather than a select: on a marketing page the options should be visible without a click, and three of them fit everywhere. */ .seg-control { display: inline-flex; padding: 3px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-grey-lighter); } .seg-btn { appearance: none; border: 0; background: transparent; border-radius: 7px; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-text-secondary); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .seg-btn:hover:not(:disabled) { color: var(--mud-palette-text-primary); } .seg-btn:disabled { cursor: default; } .seg-btn.is-active { background: var(--mud-palette-surface); color: var(--mud-palette-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } .seg-btn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; } .showcase-body { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.15rem; overflow-y: auto; min-height: 0; transition: opacity 160ms ease; /* Fades the last few pixels of the scroll area so the frame's bottom edge announces itself as a scroll boundary rather than looking like a clipped layout. Decorative only: browsers without mask-image simply get the hard edge. */ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent 100%); } /* Range switches re-query the server; dimming beats a spinner that would shift the layout. */ .showcase-body.is-refreshing { opacity: 0.55; } .showcase-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.85rem; } /* PrimaryChart sizes its own svg with an inline style (height:17rem) because the signed-in pages want a full-height chart; !important is the only thing that outranks that, and the override is scoped to this wrapper so the dashboard's own charts are untouched. */ .showcase-chart svg { height: 11.5rem !important; } .showcase-group { margin: 0.9rem 0 -0.1rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mud-palette-text-secondary); } /* The first group label sits right under the chart, so it does not need the extra lead-in. */ .showcase-body > .showcase-group:first-of-type { margin-top: 0.35rem; } .showcase-today { display: inline-flex; align-items: baseline; gap: 0.4rem; font-size: 0.75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; } .showcase-today b { font-size: 0.85rem; font-weight: 650; color: var(--mud-palette-text-primary); } .showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.85rem; } /* Lists scroll inside their own card, so a website with a long tail of pages or countries never stretches the section. */ .showcase-scroll { max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; } .showcase-dash-loading .showcase-toolbar { justify-content: space-between; } @media (max-width: 1279px) { .showcase-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 899px) { .showcase-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 599px) { /* Phones used to get the panel at full, uncapped height, which made the landing page dashboard-tall on the smallest screens - exactly what the cap exists to prevent. They scroll internally too now, just against a shorter box. */ .showcase-frame { max-height: min(70vh, 32rem); border-radius: 14px; } .showcase-toolbar { padding: 0.75rem 0.85rem; } .showcase-body { padding: 0.85rem; } /* The metric strip becomes a swipeable row rather than a cramped grid - six cards stacked vertically would bury the chart below the fold on a phone. */ .showcase-metrics { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0.85rem; margin-inline: -0.85rem; padding-inline: 0.85rem 0.85rem; padding-bottom: 0.35rem; overscroll-behavior-x: contain; } .showcase-metrics > * { scroll-snap-align: start; } .showcase-live-label { display: none; } .showcase-scroll { max-height: 14rem; } } @media (prefers-reduced-motion: reduce) { .seg-btn, .showcase-body { transition: none; } } /* =================================================================== Landing page: live demo, product story, works-with, founder note =================================================================== */ /* ---------- Live demo (the showcase directly under the hero) ---------- */ /* No top padding at all: the hero's own short tail is the entire gap between the headline and the product, which is the point of the section. The generous bottom padding is what separates it from the trust strip, so the page still reads as chapters further down. */ .live-demo-section { padding: 0 1.25rem 4.5rem; } /* A single row rather than the tall centred .section-head: copy on the left, the page's one demo CTA on the right, baseline-aligned with the last line of copy. Roughly 6rem shorter than the centred block it replaces, all of it given back to the dashboard above the fold. */ .live-demo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; margin: 0 auto 1.15rem; } .live-demo-head-text { min-width: 0; max-width: 42rem; } .live-demo-head .section-eyebrow { margin-bottom: 0.5rem; } .live-demo-title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--mud-palette-text-primary); } .live-demo-lede { margin: 0.6rem 0 0; max-width: 38rem; font-size: 0.98rem; line-height: 1.6; color: var(--mud-palette-text-secondary); } .live-demo-head-action { flex-shrink: 0; } @media (max-width: 899px) { /* Stacked and centred once the row no longer fits, matching the rest of the page's sections. */ .live-demo-head { flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; } .live-demo-lede { margin-inline: auto; } } @media (max-width: 599px) { .live-demo-section { padding: 0 1rem 3rem; } .live-demo-head { margin-bottom: 0.9rem; gap: 1rem; } .live-demo-head .section-eyebrow { margin-bottom: 0.35rem; } .live-demo-lede { margin-top: 0.5rem; font-size: 0.92rem; } .live-demo-head-action, .live-demo-head-action .mud-button-root { width: 100%; } } .demo-frame-note { margin: 0.9rem auto 0; max-width: 40rem; text-align: center; font-size: 0.86rem; line-height: 1.6; color: var(--mud-palette-text-secondary); } /* Six date presets do not fit a phone; the control scrolls sideways within its own box rather than widening the toolbar it sits in. */ .seg-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .seg-scroll::-webkit-scrollbar { display: none; } .seg-scroll .seg-btn { white-space: nowrap; } /* ---------- Why Vistiqo (product story) ---------- */ .story-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } .story-copy .section-eyebrow { text-align: left; } .story-lede { margin: 1.1rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--mud-palette-text-secondary); } .question-list { margin: 0; padding: 1.6rem; list-style: none; border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; background: var(--mud-palette-surface); } .question-list li { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.62rem 0; font-size: 0.95rem; color: var(--mud-palette-text-primary); border-bottom: 1px solid var(--mud-palette-lines-default); } .question-list li:last-child { border-bottom: 0; padding-bottom: 0; } .question-list li:first-child { padding-top: 0; } @media (max-width: 899px) { .story-split { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } } /* ---------- Works with the web ---------- */ .tool-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .tool-card { height: 100%; padding: 1.5rem; border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; background: var(--mud-palette-surface); transition: box-shadow 160ms ease, transform 160ms ease; } .tool-card:hover { box-shadow: 0 8px 26px -14px rgba(15, 23, 42, 0.28); transform: translateY(-2px); } .tool-card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; } .tool-card-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary); } .tool-card h3 { margin: 0; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; color: var(--mud-palette-text-primary); } .tool-card p { margin: 0 0 1.1rem; font-size: 0.9rem; line-height: 1.6; color: var(--mud-palette-text-secondary); } .tool-chip-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; } .tool-chip-list li { padding: 0.32rem 0.7rem; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; background: var(--mud-palette-background); font-size: 0.8rem; font-weight: 500; color: var(--mud-palette-text-primary); } .tool-rail-note { margin: 2rem auto 0; max-width: 42rem; text-align: center; font-size: 0.84rem; line-height: 1.65; color: var(--mud-palette-text-secondary); } @media (max-width: 899px) { .tool-rail { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .tool-card, .tool-card:hover { transition: none; transform: none; } }