/* /Features/Home/Index.cshtml.rz.scp.css */
/* =============================================================================
Marketing landing (LANDING_SPEC §4) — SCOPED to Home/Index.
This stylesheet is the deliberate width exception (LANDING_SPEC §4 / DESIGN §5):
the app caps content at 720px, the landing centres at a ~1080px marketing width
inside full-bleed colour bands. Scoping (the b- attribute the build adds to
this view's elements) keeps every rule here from leaking into the 720px app shell.
Built on the v2.0 tokens from site.css (ivory canvas, deep blue, warm green
positive accent, rounder corners, one subtle shadow). Inter is already loaded in
the page . Flat surfaces, no gradients.
============================================================================= */
.ae-mkt[b-x5icerv611] {
background: var(--ae-bg);
}
/* ---- Full-bleed band + centred inner (LANDING_SPEC §2 background rhythm) ---- */
.ae-mkt-band[b-x5icerv611] {
width: 100%;
}
.ae-mkt-band__inner[b-x5icerv611] {
max-width: 1080px;
margin-inline: auto;
padding-inline: 1.25rem;
}
.ae-mkt-band--ivory[b-x5icerv611] {
background: var(--ae-bg);
}
.ae-mkt-band--white[b-x5icerv611] {
background: var(--ae-surface);
border-block: 1px solid var(--ae-border);
}
.ae-mkt-band--soft[b-x5icerv611] {
background: #EEF3FC;
}
.ae-mkt-band--accent[b-x5icerv611] {
background: var(--ae-primary-dark);
color: #fff;
}
.ae-mkt-band--ink[b-x5icerv611] {
background: var(--ae-ink);
color: #fff;
}
/* Vertical rhythm for content bands. */
.ae-mkt-section[b-x5icerv611] {
padding-block: 4.5rem;
}
@media (max-width: 768px) {
.ae-mkt-section[b-x5icerv611] {
padding-block: 3rem;
}
}
/* =============================================================================
1. Nav — ivory, brand left, language + auth actions right.
============================================================================= */
.ae-mkt-nav[b-x5icerv611] {
background: var(--ae-bg);
border-bottom: 1px solid var(--ae-border);
}
.ae-mkt-nav__inner[b-x5icerv611] {
max-width: 1080px;
margin-inline: auto;
padding: 0.85rem 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem 1rem;
flex-wrap: wrap;
}
.ae-mkt-nav__brand[b-x5icerv611] {
margin-right: auto;
font-weight: 700;
font-size: 1.35rem;
line-height: 1;
color: var(--ae-ink);
text-decoration: none;
}
/* The header's right-side actions now use the shared, global .ae-nav-actions
cluster + the _LanguagePicker / _AccountMenu partials (DESIGN §5), so the old
.ae-mkt-nav__actions / __login rules were removed. The .ae-mkt-lang styles below
stay — the FOOTER still uses the simple inline language toggle. */
/* Language toggle (LANDING_SPEC §6) — link-style buttons reusing /set-culture. */
.ae-mkt-lang[b-x5icerv611] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.ae-mkt-lang form[b-x5icerv611] {
display: inline;
margin: 0;
}
.ae-mkt-lang__btn[b-x5icerv611] {
padding: 0.15rem 0.1rem;
border: 0;
background: none;
font: inherit;
font-size: 0.9rem;
color: var(--ae-text-muted);
cursor: pointer;
}
.ae-mkt-lang__btn:hover[b-x5icerv611] {
color: var(--ae-primary);
}
.ae-mkt-lang__btn.is-active[b-x5icerv611] {
font-weight: 700;
color: var(--ae-ink);
cursor: default;
}
.ae-mkt-lang__sep[b-x5icerv611] {
color: var(--ae-border);
}
/* =============================================================================
2. Hero — copy left, decorative product card right.
============================================================================= */
.ae-mkt-hero__grid[b-x5icerv611] {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 900px) {
.ae-mkt-hero__grid[b-x5icerv611] {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
.ae-mkt-eyebrow[b-x5icerv611] {
display: inline-block;
padding: 0.3rem 0.75rem;
border-radius: 999px;
background: var(--ae-primary-soft);
color: var(--ae-primary-dark);
font-size: 0.8125rem;
font-weight: 600;
}
.ae-mkt-hero__title[b-x5icerv611] {
margin: 1rem 0 0;
font-size: clamp(2.25rem, 5vw, 3.25rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ae-ink);
}
.ae-mkt-hero__accent[b-x5icerv611] {
color: var(--ae-primary);
}
.ae-mkt-hero__subtitle[b-x5icerv611] {
margin: 1.1rem 0 0;
max-width: 34rem;
font-size: 1.15rem;
line-height: 1.5;
color: var(--ae-text-muted);
}
.ae-mkt-cta-row[b-x5icerv611] {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
.ae-mkt-hero__trust[b-x5icerv611] {
margin-top: 1.1rem;
margin-bottom: 0;
}
/* Decorative product mock — a static garage card, tilted slightly for depth. */
.ae-mkt-hero__device[b-x5icerv611] {
position: relative;
justify-self: center;
width: 100%;
max-width: 24rem;
}
.ae-mkt-device-card[b-x5icerv611] {
transform: rotate(-1.5deg);
}
.ae-mkt-device-card__head[b-x5icerv611] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.ae-mkt-device-card__title[b-x5icerv611] {
font-weight: 600;
color: var(--ae-ink);
}
.ae-mkt-device-card__rows[b-x5icerv611] {
list-style: none;
margin: 1rem 0 0;
padding: 0;
border-top: 1px solid var(--ae-border);
}
.ae-mkt-device-card__rows li[b-x5icerv611] {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--ae-border);
font-size: 0.9rem;
color: var(--ae-text);
}
.ae-mkt-device-card__rows li:last-child[b-x5icerv611] {
border-bottom: 0;
}
.ae-mkt-device-card__when[b-x5icerv611] {
margin-left: auto;
}
/* Floating positive-accent tag. Uses the AA-safe darker green fill (#157346, the
site.css "green control" token) so the white label clears AA even though it sits
in decorative context. */
.ae-mkt-value-tag[b-x5icerv611] {
position: absolute;
right: -0.5rem;
bottom: 1.5rem;
padding: 0.45rem 0.85rem;
border-radius: 999px;
background: var(--ae-badge-success-text);
color: #fff;
font-size: 0.875rem;
font-weight: 600;
box-shadow: var(--ae-shadow);
transform: rotate(-1.5deg);
}
/* =============================================================================
3. Trust strip — three inline items on the white band.
============================================================================= */
.ae-mkt-trust__row[b-x5icerv611] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem 2.5rem;
margin: 0;
padding-block: 1.25rem;
list-style: none;
}
.ae-mkt-trust__item[b-x5icerv611] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
color: var(--ae-text);
}
.ae-mkt-trust__icon[b-x5icerv611] {
width: 1.4rem;
height: 1.4rem;
flex: none;
color: var(--ae-primary);
}
/* =============================================================================
Section headings — marketing scale (overrides the 1.125rem app h2).
============================================================================= */
.ae-mkt-kicker[b-x5icerv611] {
margin: 0 0 0.5rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--ae-primary);
}
.ae-mkt-heading[b-x5icerv611] {
margin: 0;
font-size: clamp(1.75rem, 3.5vw, 2.4rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ae-ink);
}
.ae-mkt-heading--invert[b-x5icerv611] {
color: #fff;
}
.ae-mkt-lead[b-x5icerv611] {
margin: 0.9rem 0 0;
max-width: 44rem;
font-size: 1.1rem;
line-height: 1.55;
color: var(--ae-text-muted);
}
/* =============================================================================
Card grids — problem (3), benefits (4).
============================================================================= */
.ae-mkt-grid[b-x5icerv611] {
display: grid;
gap: 1.25rem;
margin-top: 2.25rem;
}
.ae-mkt-grid--3[b-x5icerv611] {
grid-template-columns: repeat(3, 1fr);
}
.ae-mkt-grid--4[b-x5icerv611] {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
.ae-mkt-grid--3[b-x5icerv611],
.ae-mkt-grid--4[b-x5icerv611] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.ae-mkt-grid--3[b-x5icerv611],
.ae-mkt-grid--4[b-x5icerv611] {
grid-template-columns: 1fr;
}
}
.ae-mkt-card[b-x5icerv611] {
height: 100%;
}
.ae-mkt-card__icon[b-x5icerv611] {
margin-bottom: 0.9rem;
}
.ae-mkt-card__title[b-x5icerv611] {
margin: 0 0 0.4rem;
font-size: 1.0625rem;
font-weight: 600;
color: var(--ae-ink);
}
.ae-mkt-card__body[b-x5icerv611] {
margin: 0;
color: var(--ae-text-muted);
line-height: 1.5;
}
/* =============================================================================
5. How it works — numbered steps.
============================================================================= */
.ae-mkt-steps[b-x5icerv611] {
list-style: none;
padding: 0;
counter-reset: none;
}
.ae-mkt-step[b-x5icerv611] {
position: relative;
padding: 0.25rem 0.5rem;
}
.ae-mkt-step__num[b-x5icerv611] {
display: block;
font-size: 1rem;
font-weight: 700;
color: var(--ae-primary);
letter-spacing: 0.08em;
}
.ae-mkt-step__icon[b-x5icerv611] {
margin: 0.75rem 0 0.9rem;
}
.ae-mkt-step__title[b-x5icerv611] {
margin: 0 0 0.4rem;
font-size: 1.0625rem;
font-weight: 600;
color: var(--ae-ink);
}
.ae-mkt-step__body[b-x5icerv611] {
margin: 0;
color: var(--ae-text-muted);
line-height: 1.5;
}
/* =============================================================================
7. The difference — large plate beside the headline.
============================================================================= */
.ae-mkt-diff[b-x5icerv611] {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 2.5rem;
}
@media (max-width: 768px) {
.ae-mkt-diff[b-x5icerv611] {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.ae-mkt-diff__plate[b-x5icerv611] {
font-size: 1.35rem;
}
/* =============================================================================
8. Final CTA — deep-blue band, white button.
============================================================================= */
.ae-mkt-finalcta[b-x5icerv611] {
text-align: center;
}
.ae-mkt-finalcta__subtitle[b-x5icerv611] {
margin: 0.9rem 0 1.9rem;
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.85);
}
/* White CTA button on the deep-blue band (LANDING_SPEC §2). */
.ae-mkt-btn-light[b-x5icerv611] {
--bs-btn-bg: #fff;
--bs-btn-border-color: #fff;
--bs-btn-color: var(--ae-primary-dark);
--bs-btn-hover-bg: var(--ae-primary-soft);
--bs-btn-hover-border-color: var(--ae-primary-soft);
--bs-btn-hover-color: var(--ae-primary-dark);
--bs-btn-active-bg: var(--ae-primary-soft);
--bs-btn-active-border-color: var(--ae-primary-soft);
--bs-btn-active-color: var(--ae-primary-dark);
font-weight: 600;
}
/* Keep the focus ring visible against the dark band. */
.ae-mkt-finalcta .ae-mkt-btn-light:focus-visible[b-x5icerv611] {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* =============================================================================
9. Footer — ink band.
============================================================================= */
.ae-mkt-footer[b-x5icerv611] {
padding-block: 2.25rem;
}
.ae-mkt-footer__inner[b-x5icerv611] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
}
.ae-mkt-footer__brand[b-x5icerv611] {
font-weight: 700;
font-size: 1.15rem;
color: #fff;
}
.ae-mkt-footer__brand .ae-brand-accent[b-x5icerv611] {
color: #8FB0F2;
}
.ae-mkt-footer__links[b-x5icerv611] {
display: inline-flex;
flex-wrap: wrap;
gap: 1rem 1.25rem;
}
.ae-mkt-footer__links a[b-x5icerv611] {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
.ae-mkt-footer__links a:hover[b-x5icerv611] {
color: #fff;
text-decoration: underline;
}
.ae-mkt-footer__lang[b-x5icerv611] {
margin-left: auto;
}
.ae-mkt-footer__lang .ae-mkt-lang__btn[b-x5icerv611] {
color: rgba(255, 255, 255, 0.7);
}
.ae-mkt-footer__lang .ae-mkt-lang__btn:hover[b-x5icerv611] {
color: #fff;
}
.ae-mkt-footer__lang .ae-mkt-lang__btn.is-active[b-x5icerv611] {
color: #fff;
}
.ae-mkt-footer__lang .ae-mkt-lang__sep[b-x5icerv611] {
color: rgba(255, 255, 255, 0.3);
}
.ae-mkt-footer__copy[b-x5icerv611] {
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
}
@media (max-width: 560px) {
.ae-mkt-footer__lang[b-x5icerv611] {
margin-left: 0;
}
}
/* /Features/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
a.navbar-brand[b-opoa4aa138] {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Warm neutral border (v2.0) so the navbar/footer edges sit on the ivory canvas,
not the old cool #e5e5e5 gray. */
.border-top[b-opoa4aa138] {
border-top: 1px solid var(--ae-border);
}
.border-bottom[b-opoa4aa138] {
border-bottom: 1px solid var(--ae-border);
}
/* The single subtle elevation level (DESIGN §2), tinted on the ink palette. */
.box-shadow[b-opoa4aa138] {
box-shadow: var(--ae-shadow);
}
button.accept-policy[b-opoa4aa138] {
font-size: 1rem;
line-height: inherit;
}
/* Footer flows in normal document order and is held at the viewport bottom by the
sticky-footer flex scaffolding in site.css. The old .footer{position:absolute}
template leftover (plus the off-palette .btn-primary #1b6ec2 / a #0077cc rules)
was removed — it overlapped content on any page taller than the viewport (X-1). */
.footer[b-opoa4aa138] {
white-space: nowrap;
}