/* ============================================================
* MapleStack Marketing v4.4.5
* Shell: pill navbar + footer
* Content: V3 Canadian redesign
* IMPORTANT: this stylesheet is fully self-contained — no theme deps.
* ============================================================ */
/* Theme isolation — block common theme styles from leaking into our pages.
We keep individual element styling but kill inherited fonts/lists/decorations. */
body.ms-marketing-body {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
font-size: 16px;
line-height: 1.6;
}
body.ms-marketing-body h1,
body.ms-marketing-body h2,
body.ms-marketing-body h3,
body.ms-marketing-body h4,
body.ms-marketing-body h5,
body.ms-marketing-body h6,
body.ms-marketing-body p,
body.ms-marketing-body a,
body.ms-marketing-body span,
body.ms-marketing-body li,
body.ms-marketing-body button,
body.ms-marketing-body input,
body.ms-marketing-body select,
body.ms-marketing-body textarea,
body.ms-marketing-body label {
font-family: inherit;
text-decoration: none;
}
body.ms-marketing-body ul, body.ms-marketing-body ol { list-style: none; padding: 0; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* V3 Canadian palette */
--red: #c0162a;
--red-dark: #96101f;
--red-light: #f7e5e7;
--white: #ffffff;
--off-white: #f5f4f1;
--gray-100: #efefec;
--gray-200: #dddbd6;
--gray-400: #8a8884;
--gray-600: #5a5856;
--gray-900: #090909;
--green: #1b4d30;
--forest: #1b4d30;
--sky: #1565c0;
--gold: #c97d10;
--navy: #0a1628;
/* Shell gradient vars (header/footer) */
--c-primary-grad: linear-gradient(135deg, #EF4444 0%, #991B1B 100%);
--c-primary-solid: #DC2626;
--c-text: #111827;
--c-text-soft: #6b7280;
--c-bg: #ffffff;
--c-bg-light: #FFF7F5;
--c-border: #e5e7eb;
--c-on-dark: #ffffff;
--c-on-dark-soft: rgba(255,255,255,.85);
--shadow-card-h: 0 8px 32px rgba(192,22,42,.15);
/* Fonts */
--font-display: 'Plus Jakarta Sans', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--font: 'Plus Jakarta Sans', sans-serif;
/* Layout */
--radius: 14px;
--radius-sm: 8px;
--radius-lg: 20px;
--maxw: 1440px;
--maxw-narrow: 720px;
}
html, body { width: 100%; min-height: 100vh; }
body.ms-marketing-body {
font-family: var(--font-body);
background: var(--off-white);
color: var(--gray-900);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* ══════════════════════════════════════════════════════════
PILL NAVBAR (shell — unchanged)
══════════════════════════════════════════════════════════ */
.ms-mh {
position: fixed;
top: 14px;
left: 0;
right: 0;
z-index: 100;
padding: 0 16px;
pointer-events: none;
}
.ms-mh-shell {
pointer-events: auto;
position: relative;
max-width: var(--maxw);
margin: 0 auto;
background: rgba(255,255,255,.97);
-webkit-backdrop-filter: saturate(220%) blur(22px);
backdrop-filter: saturate(220%) blur(22px);
border: 1px solid rgba(192,22,42,.16);
border-radius: 22px;
padding: 8px 8px 8px 22px;
display: flex;
align-items: center;
gap: 24px;
box-shadow:
0 1px 2px rgba(15,23,42,.05),
0 10px 26px rgba(15,23,42,.10),
0 26px 70px rgba(192,22,42,.24),
0 44px 110px rgba(0,0,0,.16);
overflow: hidden;
transition: background 1.1s ease, border-color 1.1s ease, box-shadow .9s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.ms-mh-shell:hover {
transform: translateY(-2px);
box-shadow:
0 3px 8px rgba(15,23,42,.07),
0 16px 34px rgba(15,23,42,.12),
0 34px 90px rgba(192,22,42,.32),
0 54px 140px rgba(0,0,0,.18);
}
/* Side maple leaves — DOM-driven (.ms-mh-leaves) for fine control */
.ms-mh-leaves {
position: absolute; top: 0; bottom: 0;
width: 26%; pointer-events: none; z-index: 0;
opacity: var(--mh-leaves-op, .48);
transition: opacity 1.1s ease;
}
.ms-mh-leaves-l { left: 0; }
.ms-mh-leaves-r { right: 0; transform: scaleX(-1); }
.ms-mh-leaves .mh-leaf {
position: absolute;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.ms-mh-leaves .leaf-1 { left: 4%; top: 18%; width: 26px; height: 26px; transform: rotate(-22deg); opacity: .95; }
.ms-mh-leaves .leaf-2 { left: 18%; top: 60%; width: 20px; height: 20px; transform: rotate(14deg); opacity: .80; }
.ms-mh-leaves .leaf-3 { left: 34%; top: 10%; width: 18px; height: 18px; transform: rotate(28deg); opacity: .65; }
.ms-mh-leaves .leaf-4 { left: 48%; top: 70%; width: 15px; height: 15px; transform: rotate(-12deg); opacity: .55; }
.ms-mh-leaves .leaf-5 { left: 64%; top: 30%; width: 13px; height: 13px; transform: rotate(22deg); opacity: .45; }
.ms-mh-leaves .leaf-6 { left: 80%; top: 72%; width: 11px; height: 11px; transform: rotate(-32deg); opacity: .35; }
.ms-mh-leaves-r .mh-leaf { /* mirrored via parent scaleX(-1) */ }
.ms-mh-over-light .ms-mh-leaves { --mh-leaves-op: .58; }
.ms-mh-over-dark .ms-mh-leaves { --mh-leaves-op: .26; }
.ms-mh-shell::before {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 54px; height: 54px;
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: var(--mh-center-op, .14);
pointer-events: none;
z-index: 0;
transition: opacity 1.1s ease;
}
.ms-mh-over-light .ms-mh-shell { --mh-center-op: .16; }
.ms-mh-over-dark .ms-mh-shell { --mh-center-op: .08; }
.ms-mh-shell > *:not(.ms-mh-leaves) { position: relative; z-index: 1; }
.ms-mh-shell::after {
content: "";
position: absolute;
left: 32px; right: 32px; bottom: -1px;
height: 1.5px;
border-radius: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(192,22,42,.55) 25%,
rgba(251,146,60,.65) 50%,
rgba(192,22,42,.55) 75%,
transparent 100%);
pointer-events: none;
}
.ms-mh-logo {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
color: var(--c-text);
letter-spacing: -.01em;
flex-shrink: 0;
z-index: 1;
}
.ms-mh-mark { width: 38px; height: 38px; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(192,22,42,.35)); }
.ms-mh-name { display: inline-block; }
.ms-mh-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; z-index: 1; }
/* Pin the navbar link typography on EVERY page — defensive against theme cascade.
The signup section sets min-height:100vh + flex on its inner; some hosts/themes
leak h1/section font scales into the surrounding chrome, which shifted the
navbar text size on /signup/ only. Locking it here keeps every page identical. */
.ms-mh .ms-mh-nav a,
body .ms-mh .ms-mh-nav a {
font-family: var(--font-display) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
color: var(--gray-600);
padding: 8px 14px;
border-radius: 9px;
transition: color .15s, background .15s;
}
.ms-mh-nav a:hover { color: var(--gray-900); background: rgba(15,23,42,.045); }
/* Shell clips its children by default (rounded leaves, accent bar). When
a dropdown opens, the menu needs to escape — let `:has()` + JS-added
class lift the clip on demand. */
.ms-mh-shell:has(.ms-mh-nav-group:hover),
.ms-mh-shell:has(.ms-mh-nav-group[data-open]),
.ms-mh-shell.ms-mh-shell--menu-open {
overflow: visible !important;
}
/* ── Navbar dropdown (Detective hub) ─────────────────────────────── */
.ms-mh-nav-group { position: relative; display: inline-flex; align-items: center; }
.ms-mh-nav-trigger {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: none; cursor: pointer;
font-family: var(--font-display);
font-size: 14px; font-weight: 500; line-height: 1.4;
color: var(--gray-600);
padding: 8px 14px;
border-radius: 9px;
transition: color .15s, background .15s;
}
.ms-mh-nav-trigger:hover,
.ms-mh-nav-group[data-open] > .ms-mh-nav-trigger {
color: var(--gray-900); background: rgba(15,23,42,.045);
}
.ms-mh-nav-chev {
display: inline-block;
font-size: 9px; line-height: 1;
margin-left: 2px;
transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.ms-mh-nav-group[data-open] > .ms-mh-nav-trigger > .ms-mh-nav-chev,
.ms-mh-nav-group:hover > .ms-mh-nav-trigger > .ms-mh-nav-chev {
transform: rotate(180deg);
}
.ms-mh-nav-menu {
position: absolute; top: calc(100% + 10px); left: 50%;
transform: translate(-50%, -6px);
min-width: 280px;
background: #fff;
border: 1px solid rgba(0,0,0,.06);
border-radius: 16px;
padding: 8px;
box-shadow:
0 22px 56px rgba(15,23,42,.14),
0 4px 14px rgba(15,23,42,.06);
opacity: 0; visibility: hidden;
transition: opacity .22s ease-out, transform .22s cubic-bezier(.22,1,.36,1), visibility .22s;
z-index: 100;
}
.ms-mh-nav-menu::before {
/* Hover bridge — keeps menu open while cursor crosses the gap */
content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.ms-mh-nav-group[data-open] > .ms-mh-nav-menu,
.ms-mh-nav-group:hover > .ms-mh-nav-menu,
.ms-mh-nav-group:focus-within > .ms-mh-nav-menu {
opacity: 1; visibility: visible;
transform: translate(-50%, 0);
}
.ms-mh-nav-menu a {
display: flex !important; flex-direction: column; gap: 2px;
padding: 12px 16px !important;
font-size: 14px !important;
font-weight: 500 !important;
border-radius: 10px;
color: var(--gray-900) !important;
text-decoration: none;
transition: background .15s;
}
.ms-mh-nav-menu a:hover { background: rgba(192,22,42,.08) !important; }
.ms-mh-mi-title { font-weight: 700; font-size: 14.5px; color: var(--gray-900); }
.ms-mh-mi-sub { font-weight: 500; font-size: 12.5px; color: var(--gray-600); letter-spacing: 0; }
.ms-mh-nav-menu a:hover .ms-mh-mi-title { color: var(--red); }
/* Mobile: dropdown expands inline inside the burger drawer */
@media (max-width: 860px) {
.ms-mh-nav-group { display: block; width: 100%; }
.ms-mh-nav-trigger {
width: 100%; justify-content: space-between;
padding: 14px 16px !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--gray-900) !important;
border-radius: 10px;
}
.ms-mh-nav-menu {
position: static; min-width: 0;
transform: none !important; opacity: 1; visibility: hidden;
box-shadow: none; border: none; padding: 4px 0 4px 14px;
max-height: 0; overflow: hidden;
transition: max-height .3s ease-out, visibility .3s, opacity .2s;
}
.ms-mh-nav-menu::before { display: none; }
.ms-mh-nav-group[data-open] > .ms-mh-nav-menu {
visibility: visible; max-height: 400px;
}
.ms-mh-nav-group:hover > .ms-mh-nav-menu { /* disable hover on mobile */
max-height: 0; visibility: hidden;
}
.ms-mh-nav-group[data-open]:hover > .ms-mh-nav-menu { max-height: 400px; visibility: visible; }
.ms-mh-nav-menu a {
padding: 12px 14px !important; border-radius: 8px;
border-left: 2px solid rgba(192,22,42,.20);
}
}
.ms-mh-cta {
display: inline-flex;
align-items: center;
gap: 5px;
color: #fff;
background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
padding: 10px 18px;
border-radius: 11px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
transition: transform .12s, box-shadow .15s, opacity .15s;
box-shadow: 0 1px 2px rgba(192,22,42,.25), 0 6px 14px rgba(192,22,42,.22);
flex-shrink: 0;
z-index: 1;
}
.ms-mh-cta:hover { opacity: .96; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(192,22,42,.3), 0 10px 22px rgba(192,22,42,.26); }
.ms-mh-cta-arrow { transition: transform .15s; display: inline-block; }
.ms-mh-cta:hover .ms-mh-cta-arrow { transform: translateX(2px); }
.ms-mh-actions { display: flex; align-items: center; gap: 8px; z-index: 1; flex-shrink: 0; }
.ms-mh-login {
font-size: 14px; font-weight: 500; color: var(--gray-600);
padding: 10px 16px; border-radius: 11px;
transition: color .15s, background .15s;
}
.ms-mh-login:hover { color: var(--gray-900); background: rgba(15,23,42,.05); }
.ms-mh-burger {
display: none;
background: none; border: none; cursor: pointer;
padding: 8px; flex-direction: column; gap: 4px; z-index: 1;
}
.ms-mh-burger span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: transform .2s; }
/* ══════════════════════════════════════════════════════════
HERO
══════════════════════════════════════════════════════════ */
.hero {
position: relative;
overflow: hidden;
background: #d4b896;
padding: 70px 40px 30px;
text-align: center;
transition: background .65s ease;
height: 100vh;
min-height: 640px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero .season-tabs {
max-width: 380px;
margin: 20px auto 0;
background: rgba(255,255,255,.82);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-color: rgba(0,0,0,.10);
margin-bottom: 0;
}
/* ── Hero seasonal photo backgrounds ── */
.hero-bg {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center center;
opacity: 0;
transition: opacity .9s ease;
}
.hero-bg.active { opacity: 1; }
#hero-bg-spring { background-image: linear-gradient(to bottom, rgba(255,180,200,.55) 0%, rgba(255,200,220,.32) 15%, rgba(255,248,252,.36) 35%, rgba(255,248,252,.36) 100%), url('hero/spring.webp'); background-position: center 60%; }
#hero-bg-summer { background-image: linear-gradient(to bottom, rgba(60,120,90,.45) 0%, rgba(120,170,140,.28) 18%, rgba(200,240,210,.30) 40%, rgba(200,240,210,.30) 100%), url('hero/summer.webp'); background-position: center center; }
#hero-bg-autumn { background-image: linear-gradient(to bottom, rgba(120,40,15,.96) 0%, rgba(150,60,25,.92) 8%, rgba(180,80,40,.85) 16%, rgba(210,105,55,.72) 24%, rgba(235,145,85,.50) 32%, rgba(250,190,125,.30) 42%, rgba(255,235,200,.32) 55%, rgba(255,235,200,.32) 100%), url('hero/autumn.webp'); background-position: center 90%; }
#hero-bg-winter { background-image: linear-gradient(to bottom, rgba(140,170,200,.42) 0%, rgba(180,210,235,.25) 18%, rgba(230,240,250,.28) 40%, rgba(230,240,250,.28) 100%), url('hero/winter.webp'); background-position: center center; }
#leafCanvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none; z-index: 1;
}
.hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.live-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(192,22,42,.22);
color: #1a1a1a; font-size: 12px; font-weight: 700;
padding: 6px 16px; border-radius: 30px;
margin-bottom: 14px; letter-spacing: .02em;
box-shadow: 0 4px 14px rgba(0,0,0,.10);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.live-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #16a34a;
animation: blinkDot 1.3s ease infinite;
}
.season-line {
display: inline-block;
font-size: 12.5px; color: #1a1a1a; font-weight: 700;
margin-bottom: 6px; letter-spacing: .04em;
font-family: var(--font-display);
background: rgba(255,255,255,.86);
padding: 4px 12px; border-radius: 999px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(38px, 5.4vw, 72px);
font-weight: 800; color: #0a0a0a;
line-height: 1.04; letter-spacing: -.04em;
margin-bottom: 12px;
text-shadow: 0 2px 18px rgba(255,255,255,.55), 0 1px 2px rgba(255,255,255,.40);
}
.hero-title .hero-title-sub {
display: block;
font-size: .32em; font-weight: 600; color: #1a1a1a; opacity: 1;
margin-top: 10px; letter-spacing: .01em;
font-family: var(--font-body);
text-shadow: 0 1px 8px rgba(255,255,255,.65);
}
.hero-sub {
font-size: 16px; color: #1a1a1a; font-weight: 600;
line-height: 1.55; margin-bottom: 22px;
max-width: 540px; margin-left: auto; margin-right: auto;
text-shadow: 0 1px 8px rgba(255,255,255,.70);
}
.hero-btns {
display: flex; gap: 12px; justify-content: center;
flex-wrap: wrap; margin-bottom: 20px;
}
.btn-primary {
background: var(--red); color: var(--white);
border: none; border-radius: var(--radius-sm);
padding: 15px 32px; font-size: 15px; font-weight: 600;
cursor: pointer; font-family: var(--font-body);
transition: transform .15s, background .15s, box-shadow .15s;
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none;
box-shadow: 0 4px 22px rgba(192,22,42,.32);
}
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(192,22,42,.42); }
.btn-outline {
background: rgba(0,0,0,.05); color: var(--gray-900);
border: 1.5px solid rgba(0,0,0,.18);
border-radius: var(--radius-sm);
padding: 15px 26px; font-size: 15px; font-weight: 500;
cursor: pointer; font-family: var(--font-body);
transition: background .15s;
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none;
}
.btn-outline:hover { background: rgba(0,0,0,.1); }
.hero-trust {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.trust-pill {
display: flex; align-items: center; gap: 6px;
font-size: 12px; color: #1a1a1a; font-weight: 600;
background: rgba(255,255,255,.88);
padding: 5px 12px; border-radius: 999px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.trust-pill svg { width: 13px; height: 13px; fill: none; stroke: var(--red); stroke-width: 2.4; }
/* ══════════════════════════════════════════════════════════
SEASON TABS
══════════════════════════════════════════════════════════ */
.season-tabs {
display: flex; gap: 0;
border: 1.5px solid var(--gray-200);
border-radius: var(--radius-sm);
overflow: hidden; margin-bottom: 0;
background: var(--white);
}
.stab {
flex: 1; padding: 13px 10px;
font-size: 13px; font-weight: 600;
background: transparent; color: var(--gray-600);
border: none; cursor: pointer;
font-family: var(--font-body);
transition: background .15s, color .15s;
letter-spacing: -.01em;
}
.stab.active { background: var(--red); color: var(--white); }
.stab:hover:not(.active) { background: var(--gray-100); color: var(--gray-900); }
/* ══════════════════════════════════════════════════════════
PAGE WRAPPER (kept for inner pages: about, contact, etc.)
══════════════════════════════════════════════════════════ */
.ms-page { width: 100%; padding: 110px clamp(20px, 5vw, 72px) 120px; }
/* ══════════════════════════════════════════════════════════
FULL-WIDTH SECTION SYSTEM
══════════════════════════════════════════════════════════ */
.ms-sec { width: 100%; position: relative; overflow: hidden; }
.ms-sec::before, .ms-sec::after {
content: '';
position: absolute;
width: 110px; height: 110px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .06;
pointer-events: none;
z-index: 0;
will-change: transform;
}
.ms-sec::before {
top: 28px; left: 3%;
animation: leafSwayA 7s ease-in-out infinite;
transform-origin: 60% 0;
}
.ms-sec::after {
bottom: 28px; right: 3%;
animation: leafSwayB 8.5s ease-in-out infinite;
transform-origin: 40% 100%;
}
@keyframes leafSwayA {
0% { transform: translate(0, 0) rotate(-20deg); }
25% { transform: translate(18px,-6px) rotate(-8deg); }
50% { transform: translate(26px,4px) rotate(2deg); }
75% { transform: translate(10px,-14px) rotate(-12deg); }
100% { transform: translate(0, 0) rotate(-20deg); }
}
@keyframes leafSwayB {
0% { transform: translate(0, 0) rotate(22deg); }
30% { transform: translate(-20px,10px) rotate(34deg); }
55% { transform: translate(-26px,-6px) rotate(14deg); }
80% { transform: translate(-8px,12px) rotate(28deg); }
100% { transform: translate(0, 0) rotate(22deg); }
}
.ms-sec--dark::before, .ms-sec--dark::after,
.ms-sec--red::before, .ms-sec--red::after {
background-image: url("data:image/svg+xml;utf8,");
opacity: .10;
}
.ms-sec-inner { position: relative; z-index: 2; }
/* Pride stage — pride image cycler. Stage sits ABOVE the section content
(z-index 10) so images appear on top, but they're placed at section edges
so they don't cover the centered card text. */
.ms-pride-stage {
position: absolute; inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 10;
}
.ms-pride-img {
position: absolute;
border-radius: 16px;
overflow: hidden;
background-color: #f5f0e6;
box-shadow:
0 20px 50px rgba(0,0,0,.28),
0 6px 16px rgba(0,0,0,.16),
0 0 0 4px rgba(255,255,255,.92);
opacity: 0;
transform: translateY(40px) scale(.55);
/* Slow, smooth rise — like a leaf drifting up */
transition:
opacity 2.2s cubic-bezier(.22,1,.36,1),
transform 2.6s cubic-bezier(.22,1,.36,1);
will-change: opacity, transform;
}
/* Inner photo layer — independent transform so we can do Ken-Burns zoom
without disturbing the parent's rotation/translation. */
.ms-pride-img .ms-pride-img-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
transform: scale(1);
transition: transform 6s ease-in-out;
filter: saturate(1.08);
}
.ms-pride-img.in-stay .ms-pride-img-bg {
animation: prideKenBurns 8s ease-in-out infinite alternate;
}
@keyframes prideKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-1%, -2%); }
}
@media (max-width: 1180px) {
/* Hide on narrow screens — not enough side margin to avoid card overlap */
.ms-pride-img { display: none; }
}
.ms-sec-inner {
max-width: 1480px;
margin: 0 auto;
padding: 100px clamp(24px, 5vw, 80px);
}
.ms-sec--white { background: #ffffff; }
.ms-sec--muted { background: #f5f4f1; }
.ms-sec--dark { background: linear-gradient(135deg, #d11d2b 0%, #c0162a 45%, #a8101f 100%); }
.ms-sec--dark .sec-eyebrow { color: rgba(255,255,255,.78); font-weight: 700; }
.ms-sec--dark .sec-head { color: #ffffff; }
.ms-sec--dark .sec-sub { color: rgba(255,255,255,.82); }
.ms-sec--dark .card { background: #ffffff; box-shadow: 0 14px 44px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.10); border: none; color: var(--gray-900); }
.ms-sec--dark .sec-label { color: var(--gray-400); }
.ms-sec--dark .sec-label svg { stroke: var(--gray-400); }
.ms-sec--dark .prov-label { color: var(--gray-700, #4a4a48); font-weight: 600; }
.ms-sec--dark .prov-track { background: #f3eded; }
.ms-sec--dark .prov-fill { background: linear-gradient(90deg, #c0162a 0%, #ee2233 100%); }
.ms-sec--dark .prov-count { color: var(--gray-900); font-weight: 700; }
.ms-sec--dark .map-stat { background: #f9f6f1; }
.ms-sec--dark .map-stat-label { color: var(--gray-400); }
.ms-sec--dark .canada-map-bg { background: #f6f0e8; }
.ms-sec--dark .stat-big-num { color: #ffffff; }
.ms-sec--dark .stat-big-label { color: rgba(255,255,255,.88); }
.ms-sec--dark::before {
content: '';
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 55% 45% at 85% 15%, rgba(255,180,180,.10) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 15% 85%, rgba(0,0,0,.18) 0%, transparent 60%);
}
.ms-sec--dark .ms-sec-inner { position: relative; z-index: 1; }
.ms-sec--dark .pin-tag { background: #0d1f3a; border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }
.ms-sec--red { background: #c0162a; }
.ms-sec--red .sec-head { color: #ffffff; }
.ms-sec--red .cta-title { color: #ffffff; }
.ms-sec--red .cta-sub { color: rgba(255,255,255,.75); }
/* ── Section headings ── */
.sec-eyebrow {
font-size: 11px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--red); margin-bottom: 14px;
}
.sec-head {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 64px);
font-weight: 800;
color: var(--gray-900);
letter-spacing: -.04em;
line-height: 1.04;
margin-bottom: 14px;
max-width: 860px;
}
.sec-sub {
font-size: 17px; color: var(--gray-600);
line-height: 1.65; margin-bottom: 44px;
max-width: 560px;
}
/* ══════════════════════════════════════════════════════════
STATS HERO (dark section)
══════════════════════════════════════════════════════════ */
.stats-hero {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin: 56px 0 64px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 20px;
overflow: hidden;
}
.stat-big {
padding: 40px 48px;
border-right: 1px solid rgba(255,255,255,.08);
}
.stat-big:last-child { border-right: none; }
.stat-big-num {
font-family: var(--font-display);
font-size: clamp(48px, 5vw, 72px);
font-weight: 800;
color: #ffffff;
letter-spacing: -.04em;
line-height: 1;
margin-bottom: 8px;
}
.stat-big-num .stat-accent { color: var(--red); }
.stat-big-label {
font-size: 12px;
color: rgba(255,255,255,.45);
letter-spacing: .12em;
text-transform: uppercase;
}
/* ══════════════════════════════════════════════════════════
STEPS GRID (dark "How it works" section)
══════════════════════════════════════════════════════════ */
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 44px;
}
.step-block {
display: flex; flex-direction: column;
align-items: center; text-align: center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
padding: 24px 18px 26px;
border-radius: 22px;
position: relative;
transition: background .35s, border-color .35s, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
overflow: visible;
}
.step-block:hover {
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.30);
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0,0,0,.20);
}
.step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: #ffffff; color: var(--red);
font-size: 16px; font-weight: 800; margin-bottom: 8px;
font-family: var(--font-display); line-height: 1;
box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.step-icon-zone {
position: relative;
width: 100%; height: 220px;
display: flex; align-items: flex-end; justify-content: center;
margin-bottom: 12px;
}
/* Soft "soil" base under icons — visual grounding for the growth theme */
.step-icon-zone::after {
content: ''; position: absolute;
bottom: -4px; left: 50%; transform: translateX(-50%);
width: 78%; height: 14px;
border-radius: 50%;
background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 70%);
pointer-events: none;
z-index: 0;
}
/* GIANT, vibrant icons — overrides any conflicting .tree-icon styles */
.step-block .step-icon-lg {
font-size: 168px !important;
display: inline-block !important;
line-height: 1 !important;
margin: 0 !important;
opacity: 1 !important;
filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
transform-origin: 50% 100%;
position: relative; z-index: 1;
animation: stepIdleSway 5s ease-in-out infinite;
}
/* Generated 3D icons replace the old emoji — span animations (sway/grow/glow)
still drive these via transform/filter on the wrapper. */
.step-icon-lg img {
width: 168px; height: 168px;
object-fit: contain; display: block;
}
/* Per-step idle sway with slightly different timing for organic feel */
.step-1 .step-icon-lg { animation-duration: 5.0s; }
.step-2 .step-icon-lg { animation-duration: 5.6s; }
.step-3 .step-icon-lg { animation-duration: 6.2s; }
.step-4 .step-icon-lg { animation-duration: 4.8s; }
@keyframes stepIdleSway {
0% { transform: rotate(-3deg) scale(1); }
50% { transform: rotate(3deg) scale(1.02); }
100% { transform: rotate(-3deg) scale(1); }
}
/* GROWTH burst — each icon plays its own "sprout out of soil" animation when Watch is clicked.
No light beam, no halo — just the icon doing its thing. */
.step-block.step-burst .step-icon-lg {
animation: stepGrow 1.4s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes stepGrow {
0% { transform: scale(0) rotate(-30deg); opacity: 0; }
40% { transform: scale(1.18) rotate(8deg); opacity: 1; }
60% { transform: scale(.94) rotate(-5deg); }
80% { transform: scale(1.04) rotate(2deg); }
100% { transform: scale(1) rotate(0deg); }
}
.step-title {
font-size: 16px;
font-weight: 800;
color: #ffffff;
margin-bottom: 6px;
font-family: var(--font-display);
}
.step-desc {
font-size: 13px;
color: rgba(255,255,255,.82);
line-height: 1.55;
}
.step-icon-lg.tree-grow {
animation: stepGlow 1.1s cubic-bezier(.22,1,.36,1) both;
opacity: 1 !important;
}
@keyframes stepGlow {
0% { transform: scale(.6) rotate(-8deg); filter: brightness(.6) drop-shadow(0 0 0 transparent); }
35% { transform: scale(1.25) rotate(4deg); filter: brightness(1.5) drop-shadow(0 0 32px rgba(255,220,140,.85)) drop-shadow(0 0 14px rgba(255,255,255,.6)); }
65% { transform: scale(1.05) rotate(-2deg); filter: brightness(1.25) drop-shadow(0 0 20px rgba(255,220,140,.55)); }
100% { transform: scale(1) rotate(0deg); filter: brightness(1) drop-shadow(0 4px 18px rgba(0,0,0,.20)); }
}
/* ── Two-column card grid ── */
.ms-col-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.ms-col-row .card { margin-bottom: 0; }
.ms-col-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 28px; }
/* ══════════════════════════════════════════════════════════
TOAST
══════════════════════════════════════════════════════════ */
.toast-wrap {
position: fixed; bottom: 28px; right: 28px;
z-index: 500; display: flex; flex-direction: column;
gap: 8px; pointer-events: none;
}
.toast {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-sm); padding: 11px 18px;
font-size: 12.5px; color: var(--gray-900);
display: flex; align-items: center; gap: 10px;
box-shadow: 0 6px 28px rgba(0,0,0,.13);
white-space: nowrap; pointer-events: auto; opacity: 0;
}
.toast.in { animation: toastSlideIn .38s cubic-bezier(.22,1,.36,1) forwards; }
.toast.out { animation: toastSlideOut .28s ease forwards; }
.toast-flag { font-size: 15px; flex-shrink: 0; }
.toast-body { flex: 1; }
/* ══════════════════════════════════════════════════════════
SECTION LABELS
══════════════════════════════════════════════════════════ */
.sec-label {
font-size: 10px; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
color: var(--gray-400); margin-bottom: 12px;
display: flex; align-items: center; gap: 6px;
}
.sec-label svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; }
/* ══════════════════════════════════════════════════════════
PIPEDA BAR (full-width, outside sections)
══════════════════════════════════════════════════════════ */
.ms-pipeda {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: 14px clamp(24px, 5vw, 80px);
}
.ms-pipeda-inner {
max-width: 1480px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--gray-600);
}
/* Legacy in-card pipeda bar (kept for any other pages) */
.pipeda-bar {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-sm); padding: 12px 16px;
margin-bottom: 20px; font-size: 12px; color: var(--gray-600);
display: flex; align-items: center; gap: 10px;
}
.pipeda-icon { color: var(--green); font-size: 16px; flex-shrink: 0; }
/* ══════════════════════════════════════════════════════════
CARD
══════════════════════════════════════════════════════════ */
.card {
background: var(--white);
border: none;
border-radius: 24px; padding: 32px 36px;
margin-bottom: 0;
box-shadow: 0 4px 28px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
}
/* ══════════════════════════════════════════════════════════
CANADA MAP
══════════════════════════════════════════════════════════ */
.canada-map-bg {
border-radius: 12px;
height: 260px;
overflow: hidden;
margin-bottom: 0;
position: relative;
background: #f6f0e8;
}
#ms-canada-map { width: 100%; height: 100%; background: #f6f0e8; }
.leaflet-tile-pane { filter: saturate(.85) contrast(1.05); }
@media (max-width: 768px) {
.canada-map-bg { height: 220px; }
}
#ms-canada-map { width: 100%; height: 100%; }
.ms-map-pin-icon { background: none !important; border: none !important; }
.ms-map-pin {
display: flex; flex-direction: column; align-items: center;
white-space: nowrap; pointer-events: none;
}
.ms-map-pin-dot {
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #ee2233 0%, #c0162a 100%);
color: #fff;
font-weight: 800;
border: 2.5px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 2px rgba(192,22,42,.20);
position: relative;
pointer-events: auto;
}
.ms-map-pin-big .ms-map-pin-dot {
box-shadow: 0 4px 14px rgba(0,0,0,.40), 0 0 0 3px rgba(192,22,42,.28);
}
.ms-map-pin-dot::after {
content: ''; position: absolute; inset: -6px; border-radius: 50%;
border: 2px solid rgba(192,22,42,.45);
animation: pingRing 2.2s ease-out infinite;
}
.ms-map-pin-label {
margin-top: 3px;
font-size: 10px; font-weight: 700;
color: #1a1a1a;
text-shadow:
-1px -1px 0 #fff, 1px -1px 0 #fff,
-1px 1px 0 #fff, 1px 1px 0 #fff,
0 -1px 0 #fff, 0 1px 0 #fff,
-1px 0 0 #fff, 1px 0 0 #fff;
letter-spacing: .02em;
pointer-events: none;
font-family: var(--font-display);
}
.ms-map-pin-big .ms-map-pin-label { font-size: 11px; }
/* legacy class kept for any other references */
.ms-map-pin-wrap {
display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--red); color: #fff;
font-size: 10px; font-weight: 700; border: 2px solid #fff;
box-shadow: 0 2px 10px rgba(192,22,42,.5); position: relative;
}
.map-watermark { font-size: 88px; opacity: .05; -webkit-user-select: none; user-select: none; line-height: 1; }
.map-pin { position: absolute; cursor: pointer; transition: transform .2s; }
.map-pin:hover { transform: scale(1.25); }
.pin-dot {
width: 11px; height: 11px; border-radius: 50%;
background: var(--red); border: 2px solid var(--white);
position: relative; z-index: 2;
}
.pin-ring {
position: absolute; width: 20px; height: 20px;
border-radius: 50%; border: 2px solid var(--red);
top: -4.5px; left: -4.5px; z-index: 1;
animation: pingRing 2.2s ease-out infinite; opacity: .5;
}
.pin-tag {
position: absolute; bottom: 16px; left: 50%;
transform: translateX(-50%);
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 4px; padding: 2px 6px;
font-size: 9px; font-weight: 500; white-space: nowrap;
color: var(--gray-900);
}
.map-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.map-stat { background: var(--gray-100); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.map-stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--red); }
.map-stat-label { font-size: 10px; color: var(--gray-400); margin-top: 2px; }
/* ══════════════════════════════════════════════════════════
HOCKEY SCOREBOARD
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
GAME DAY CARD (left) — fully redesigned hockey game-day vibe
══════════════════════════════════════════════════════════ */
.ms-gameday { padding: 28px 28px 24px; }
.gameday-board {
position: relative;
background:
/* hockey-rink-ish lines */
radial-gradient(ellipse 80% 110% at 50% 50%, rgba(192,22,42,.10) 0%, transparent 65%),
linear-gradient(180deg, #0a1018 0%, #141d2e 60%, #0d1320 100%);
border-radius: 16px;
padding: 20px 18px 22px;
border: 2px solid #c0162a;
box-shadow:
0 14px 36px rgba(0,0,0,.22),
0 0 0 1px rgba(192,22,42,.20),
inset 0 0 60px rgba(192,22,42,.08);
margin-bottom: 16px;
overflow: hidden;
}
.gameday-board::before {
/* Centre red line of a rink */
content: ''; position: absolute;
top: 0; bottom: 0; left: 50%; width: 2px;
background: linear-gradient(180deg, transparent 0%, rgba(192,22,42,.45) 50%, transparent 100%);
opacity: .35;
}
.gameday-status {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-bottom: 14px;
position: relative; z-index: 1;
}
.gameday-live {
width: 8px; height: 8px; border-radius: 50%;
background: #ee2233;
box-shadow: 0 0 8px rgba(238,34,51,.9);
animation: scoreBlink 1.4s ease infinite;
}
.gameday-status-text {
font-family: 'Courier New', monospace;
font-size: 10px; font-weight: 700;
color: rgba(255,193,7,.95);
letter-spacing: .22em;
}
.gameday-teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px; align-items: center;
position: relative; z-index: 1;
}
.gameday-team { text-align: center; }
.gameday-team-logo {
font-size: 28px; line-height: 1;
margin-bottom: 6px;
filter: drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
.gameday-team-mp .gameday-team-logo { filter: drop-shadow(0 3px 8px rgba(192,22,42,.55)); }
.gameday-team-name {
font-family: var(--font-display);
font-size: 12px; font-weight: 800;
color: #ffffff; letter-spacing: .08em;
}
.gameday-team-mp .gameday-team-name { color: #ff5050; text-shadow: 0 0 8px rgba(255,80,80,.45); }
.gameday-team-other .gameday-team-name { color: rgba(255,255,255,.55); }
.gameday-team-tag {
font-size: 9px; font-weight: 600; color: rgba(255,255,255,.50);
margin-top: 2px; letter-spacing: .08em; text-transform: uppercase;
}
.gameday-score {
display: flex; align-items: center; gap: 6px;
padding: 0 12px;
}
.gameday-score-num {
font-family: 'Courier New', monospace;
font-size: 58px; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums;
}
.gameday-score-num.maple {
color: #ff4040;
text-shadow: 0 0 12px rgba(255,64,64,.70), 0 0 30px rgba(255,64,64,.35);
}
.gameday-score-num.other {
color: rgba(255,255,255,.30);
}
.gameday-score-sep {
font-family: 'Courier New', monospace;
font-size: 38px; color: rgba(255,193,7,.7);
font-weight: 700;
}
.gameday-medals {
display: grid; gap: 8px;
}
.gameday-medal-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px; align-items: center;
padding: 12px 14px;
background: #ffffff;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.05);
transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.gameday-medal-row:hover {
transform: translateX(3px);
box-shadow: 0 6px 18px rgba(192,22,42,.10);
}
.medal-emoji {
font-size: 22px;
text-align: center;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.medal-feat {
font-size: 12.5px;
font-weight: 700;
color: var(--gray-900);
}
.medal-mp {
font-size: 12px;
font-weight: 800;
color: var(--red);
font-family: var(--font-display);
background: rgba(192,22,42,.08);
padding: 4px 12px;
border-radius: 999px;
}
/* ══════════════════════════════════════════════════════════
FEATURE FACEOFF CARD (right) — bar comparison
══════════════════════════════════════════════════════════ */
.ms-faceoff { padding: 28px 28px 24px; }
.faceoff-legend {
display: flex; gap: 16px;
justify-content: center;
padding: 10px 14px;
background: #f9f6f1;
border-radius: 10px;
margin-bottom: 18px;
font-size: 11px; font-weight: 700;
}
.faceoff-legend-mp { color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.faceoff-legend-other { color: var(--gray-400); display: inline-flex; align-items: center; gap: 6px; }
.faceoff-legend-dot {
width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}
.faceoff-legend-dot.mp { background: linear-gradient(90deg, #c0162a 0%, #ee2233 100%); }
.faceoff-legend-dot.other { background: #d1cfca; }
.faceoff-bars {
display: grid; gap: 14px;
}
.faceoff-row {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
padding: 12px 14px;
background: #fff;
border: 1px solid rgba(0,0,0,.05);
border-radius: 12px;
transition: border-color .3s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.faceoff-row:hover {
border-color: rgba(192,22,42,.20);
transform: translateX(-3px);
box-shadow: 0 6px 18px rgba(192,22,42,.08);
}
.faceoff-feat {
font-size: 12.5px; font-weight: 700; color: var(--gray-900);
margin-bottom: 4px;
}
.faceoff-bar {
height: 10px;
background: #f3eded;
border-radius: 999px;
overflow: hidden;
position: relative;
}
.faceoff-fill {
height: 100%; border-radius: 999px;
width: 0; transition: width 1.4s cubic-bezier(.22,1,.36,1);
}
.faceoff-fill.mp {
background: linear-gradient(90deg, #c0162a 0%, #ee2233 100%);
box-shadow: 0 0 8px rgba(192,22,42,.30);
}
.faceoff-fill.other { background: #d1cfca; }
.faceoff-row.is-in .faceoff-fill { width: var(--final-w, 100%); }
.faceoff-final {
display: flex; align-items: baseline; justify-content: center; gap: 10px;
margin-top: 18px;
padding: 12px 16px;
background: linear-gradient(180deg, #fff5f5 0%, #ffe8e8 100%);
border-radius: 12px;
border: 1px solid rgba(192,22,42,.18);
}
.faceoff-final-label {
font-size: 10px; font-weight: 700;
color: var(--gray-600);
letter-spacing: .12em; text-transform: uppercase;
}
.faceoff-final-mp {
font-family: var(--font-display);
font-size: 22px; font-weight: 800; color: var(--red);
}
.faceoff-final-vs {
font-size: 11px; font-weight: 700;
color: var(--gray-400);
text-transform: uppercase;
}
.faceoff-final-other {
font-family: var(--font-display);
font-size: 18px; font-weight: 700;
color: var(--gray-400);
text-decoration: line-through;
}
/* Legacy scoreboard class — keep for backwards compat but hide */
.scoreboard { display: none; }
.scoreboard-old {
background: linear-gradient(180deg, #0a1018 0%, #141d2e 100%);
border: 2px solid #c0162a;
border-radius: 14px;
padding: 22px 18px; display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px; align-items: center; margin-bottom: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(192,22,42,.20), inset 0 0 60px rgba(192,22,42,.06);
position: relative;
font-family: 'Courier New', 'Consolas', monospace;
}
.scoreboard::before {
content: 'PERIOD 1 · LIVE'; position: absolute;
top: 8px; left: 50%; transform: translateX(-50%);
font-size: 8px; letter-spacing: .25em;
color: rgba(255,193,7,.85);
font-weight: 700;
}
.scoreboard::after {
content: ''; position: absolute;
bottom: 6px; left: 50%; transform: translateX(-50%);
width: 8px; height: 8px; border-radius: 50%;
background: #ee2233;
box-shadow: 0 0 8px rgba(238,34,51,.9);
animation: scoreBlink 1.4s ease infinite;
}
@keyframes scoreBlink {
0%, 60%, 100% { opacity: 1; }
30% { opacity: .25; }
}
.score-team { text-align: center; padding-top: 12px; }
.score-name {
font-size: 10px; font-weight: 700;
color: rgba(255,255,255,.65); margin-bottom: 10px;
letter-spacing: .12em; text-transform: uppercase;
}
.score-num {
font-family: 'Courier New', 'Consolas', monospace;
font-size: 56px; font-weight: 700;
font-variant-numeric: tabular-nums; line-height: 1;
letter-spacing: -1px;
}
.score-num.maple {
color: #ff4040;
text-shadow: 0 0 10px rgba(255,64,64,.6), 0 0 22px rgba(255,64,64,.35);
}
.score-num.other {
color: rgba(255,255,255,.32);
text-shadow: 0 0 4px rgba(255,255,255,.08);
}
.score-vs {
text-align: center;
color: rgba(255,193,7,.85);
font-family: var(--font-display);
font-size: 13px; font-weight: 800;
letter-spacing: .12em;
padding: 14px 6px 0;
border-left: 1px solid rgba(255,255,255,.10);
border-right: 1px solid rgba(255,255,255,.10);
}
.score-period { font-size: 8px; margin-top: 4px; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: rgba(255,255,255,.45); }
.ms-sec--dark .scoreboard { /* inside white card still works */ }
.score-table { width: 100%; border-collapse: collapse; }
.score-table tr { border-bottom: 1px solid var(--gray-200); }
.score-table tr:last-child { border-bottom: none; }
.score-table td { padding: 7px 4px; font-size: 12px; vertical-align: middle; }
.score-table td:first-child { color: var(--red); font-weight: 500; }
.score-table td:nth-child(2) { color: var(--gray-400); font-size: 10px; text-align: center; padding: 0 10px; white-space: nowrap; }
.score-table td:last-child { color: var(--gray-400); text-align: right; }
.score-stats {
display: grid;
gap: 8px;
}
.score-stat-row {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: 10px;
align-items: center;
padding: 11px 14px;
background: #f9f6f1;
border-radius: 10px;
border-left: 3px solid var(--red);
transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s;
}
.score-stat-row:hover { transform: translateX(2px); background: #fdf6f4; }
.score-stat-label { font-size: 11px; font-weight: 700; color: var(--gray-600); letter-spacing: .04em; text-transform: uppercase; }
.score-stat-mp {
font-size: 13px; font-weight: 800; color: var(--red);
text-align: center;
font-family: var(--font-display);
}
.score-stat-other {
font-size: 12px; font-weight: 600; color: var(--gray-400);
text-align: center;
text-decoration: line-through;
text-decoration-color: rgba(138,136,132,.5);
}
/* ══════════════════════════════════════════════════════════
FEATURES
══════════════════════════════════════════════════════════ */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 0; }
.feat-card {
background: var(--white);
border: 1px solid rgba(192,22,42,.13);
border-radius: 18px; padding: 36px 26px 28px;
position: relative; overflow: hidden;
transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .45s;
cursor: default;
box-shadow: 0 2px 12px rgba(0,0,0,.07);
text-align: center;
}
.feat-card::before,
.feat-card::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 26%;
transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .45s;
pointer-events: none; z-index: 0;
opacity: 0;
}
.feat-card::before { left: 0; transform: translateX(-100%);
background: linear-gradient(90deg, rgba(192,22,42,.46) 0%, rgba(192,22,42,.05) 100%); }
.feat-card::after { right: 0; transform: translateX(100%);
background: linear-gradient(270deg, rgba(192,22,42,.46) 0%, rgba(192,22,42,.05) 100%); }
.feat-card:hover::before,
.feat-card:hover::after { opacity: 1; transform: translateX(0); }
.feat-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 44px rgba(0,0,0,.10), 0 4px 12px rgba(192,22,42,.10);
border-color: rgba(192,22,42,.18);
}
.feat-accent { display: none; }
.feat-icon {
margin: 0 auto 16px;
display: flex; align-items: center; justify-content: center;
width: 88px; height: 88px;
line-height: 1;
position: relative; z-index: 1;
transition: transform .55s cubic-bezier(.22,1,.36,1);
}
/* Maple-leaf hover glow — radiates from behind the icon on card hover (Canadian flag motif) */
.feat-icon::before {
content: '';
position: absolute;
left: 50%; top: 48%;
width: 150px; height: 150px;
transform: translate(-50%, -50%) scale(.45) rotate(-22deg);
background: linear-gradient(150deg, var(--red) 0%, var(--red-dark) 100%);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2015 -2000 4030 4030'%3E%3Cpath fill='%23000' d='m-90 2030 45-863a95 95 0 0 0-111-98l-859 151 116-320a65 65 0 0 0-20-73l-941-762 212-99a65 65 0 0 0 34-79l-186-572 542 115a65 65 0 0 0 73-38l105-247 423 454a65 65 0 0 0 111-57l-204-1052 327 189a65 65 0 0 0 91-27l332-652 332 652a65 65 0 0 0 91 27l327-189-204 1052a65 65 0 0 0 111 57l423-454 105 247a65 65 0 0 0 73 38l542-115-186 572a65 65 0 0 0 34 79l212 99-941 762a65 65 0 0 0-20 73l116 320-859-151a95 95 0 0 0-111 98l45 863z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2015 -2000 4030 4030'%3E%3Cpath fill='%23000' d='m-90 2030 45-863a95 95 0 0 0-111-98l-859 151 116-320a65 65 0 0 0-20-73l-941-762 212-99a65 65 0 0 0 34-79l-186-572 542 115a65 65 0 0 0 73-38l105-247 423 454a65 65 0 0 0 111-57l-204-1052 327 189a65 65 0 0 0 91-27l332-652 332 652a65 65 0 0 0 91 27l327-189-204 1052a65 65 0 0 0 111 57l423-454 105 247a65 65 0 0 0 73 38l542-115-186 572a65 65 0 0 0 34 79l212 99-941 762a65 65 0 0 0-20 73l116 320-859-151a95 95 0 0 0-111 98l45 863z'/%3E%3C/svg%3E") center / contain no-repeat;
opacity: 0;
filter: blur(2.5px);
transition: opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1);
pointer-events: none;
}
.feat-card:hover .feat-icon::before {
opacity: .3;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.feat-card:hover .feat-icon {
transform: scale(1.10);
}
/* Generated 3D icons — gentle idle float, staggered so cards don't bob in unison */
.feat-icon img {
position: relative; z-index: 2;
width: 58px; height: 58px;
object-fit: contain; display: block;
filter: drop-shadow(0 5px 9px rgba(0,0,0,.20));
animation: featIconFloat 3.6s ease-in-out infinite;
}
.feat-card:nth-child(2) .feat-icon img { animation-delay: -.5s; }
.feat-card:nth-child(3) .feat-icon img { animation-delay: -1.1s; }
.feat-card:nth-child(4) .feat-icon img { animation-delay: -1.7s; }
.feat-card:nth-child(5) .feat-icon img { animation-delay: -2.3s; }
.feat-card:nth-child(6) .feat-icon img { animation-delay: -.8s; }
.feat-card:nth-child(7) .feat-icon img { animation-delay: -1.4s; }
.feat-card:nth-child(8) .feat-icon img { animation-delay: -2.0s; }
.feat-card:hover .feat-icon img { animation-play-state: paused; }
@keyframes featIconFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-5px) rotate(-2.5deg); }
}
.feat-title { position: relative; z-index: 1; font-size: 14.5px; font-weight: 800; margin-bottom: 6px; color: var(--gray-900); font-family: var(--font-display); }
.feat-desc { position: relative; z-index: 1; font-size: 12.5px; color: var(--gray-600); line-height: 1.6; }
/* ══════════════════════════════════════════════════════════
VS COMPARISON TABLE (redesigned)
══════════════════════════════════════════════════════════ */
.vs-table {
display: grid;
grid-template-columns: 1fr 1.1fr 1.1fr;
gap: 0;
border: 1px solid rgba(0,0,0,.06);
border-radius: 14px; overflow: hidden;
background: #ffffff;
}
.vs-table-head {
display: contents;
}
.vs-table-h-feat, .vs-table-h-mp, .vs-table-h-other {
padding: 14px 12px;
background: #fafafa;
border-bottom: 1px solid rgba(0,0,0,.06);
font-size: 10px; font-weight: 700;
color: var(--gray-400); letter-spacing: .08em; text-transform: uppercase;
}
.vs-table-h-mp { text-align: center; background: linear-gradient(180deg, #fff5f5 0%, #ffe8e8 100%); }
.vs-table-h-other { text-align: center; }
.vs-pill {
display: inline-block; padding: 4px 12px; border-radius: 999px;
font-size: 11px; font-weight: 800; letter-spacing: .02em;
text-transform: none;
}
.vs-pill-maple { background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(192,22,42,.30); }
.vs-pill-other { background: #e7e7e6; color: #6b6b6b; }
.vs-row { display: contents; }
.vs-row > div {
padding: 13px 14px;
font-size: 12.5px;
border-bottom: 1px solid rgba(0,0,0,.05);
display: flex; align-items: center;
}
.vs-row:last-child > div { border-bottom: none; }
.vs-row-feat { font-weight: 700; color: var(--gray-900); }
.vs-row-mp { justify-content: center; background: rgba(192,22,42,.03); }
.vs-row-other { justify-content: center; }
.vs-yes, .vs-no {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700;
}
.vs-yes { color: #0e8a4b; }
.vs-yes::before {
content: '✓'; font-size: 14px; color: #0e8a4b;
background: #d6f5e3; width: 18px; height: 18px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.vs-no { color: #8a8884; }
.vs-no::before {
content: '✗'; font-size: 12px; color: #c0162a;
background: #ffeaea; width: 18px; height: 18px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
/* Legacy structures — hidden, replaced by single VS card */
.vs-grid, .vs-table, .score-stats, .ms-gameday, .ms-faceoff { display: none !important; }
/* ══════════════════════════════════════════════════════════
SINGLE VS CARD — compact unified comparison
══════════════════════════════════════════════════════════ */
#ms-vs-section .ms-sec-inner {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
min-height: 100vh; padding-top: 90px; padding-bottom: 90px;
}
.ms-vs-single {
background: #ffffff;
border-radius: 24px;
box-shadow: 0 24px 64px rgba(0,0,0,.10), 0 4px 14px rgba(0,0,0,.05);
border: 1px solid rgba(0,0,0,.04);
width: 100%;
max-width: 680px;
margin: 18px auto 0;
overflow: hidden;
}
.vs-single-board {
position: relative;
background:
radial-gradient(ellipse 80% 110% at 50% 50%, rgba(192,22,42,.10) 0%, transparent 65%),
linear-gradient(180deg, #0a1018 0%, #141d2e 100%);
padding: 22px 26px;
border-bottom: 2px solid #c0162a;
overflow: hidden;
}
.vs-single-board::before {
content: ''; position: absolute;
top: 0; bottom: 0; left: 50%; width: 2px;
background: linear-gradient(180deg, transparent 0%, rgba(192,22,42,.45) 50%, transparent 100%);
opacity: .35;
}
.vs-single-status {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-bottom: 12px;
}
.vs-single-live {
width: 8px; height: 8px; border-radius: 50%;
background: #ee2233;
box-shadow: 0 0 8px rgba(238,34,51,.9);
animation: scoreBlink 1.4s ease infinite;
}
.vs-single-tag {
font-family: 'Courier New', monospace;
font-size: 10px; font-weight: 700;
color: rgba(255,193,7,.95);
letter-spacing: .22em;
}
.vs-single-teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 14px;
position: relative; z-index: 1;
}
.vs-single-team { text-align: center; }
.vs-single-emoji {
font-size: 26px; display: block; margin-bottom: 4px; line-height: 1;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.vs-single-team.mp .vs-single-emoji { filter: drop-shadow(0 0 10px rgba(192,22,42,.55)); }
.vs-single-name {
font-family: var(--font-display);
font-size: 12px; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase;
}
.vs-single-team.mp .vs-single-name { color: #ff5050; text-shadow: 0 0 8px rgba(255,80,80,.45); }
.vs-single-team.other .vs-single-name { color: rgba(255,255,255,.55); }
.vs-single-score { display: flex; align-items: center; gap: 6px; }
.vs-single-num {
font-family: 'Courier New', monospace;
font-size: 52px; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums;
}
.vs-single-num.maple {
color: #ff4040;
text-shadow: 0 0 12px rgba(255,64,64,.70), 0 0 24px rgba(255,64,64,.35);
}
.vs-single-num.other { color: rgba(255,255,255,.30); }
.vs-single-sep {
font-family: 'Courier New', monospace;
font-size: 34px; color: rgba(255,193,7,.7);
font-weight: 700;
}
.vs-single-wins {
padding: 18px 22px 22px;
display: grid; gap: 8px;
}
.vs-single-win {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 14px;
padding: 11px 14px;
background: #f9f6f1;
border-radius: 10px;
border-left: 3px solid var(--red);
transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s;
}
.vs-single-win:hover {
transform: translateX(3px);
background: #fdf6f4;
}
.vs-single-win-icon { font-size: 22px; text-align: center; line-height: 1; }
.vs-single-win-feat {
font-size: 13px; font-weight: 800;
color: var(--red);
font-family: var(--font-display);
}
.vs-single-win-other {
font-size: 11.5px; font-weight: 600;
color: var(--gray-400);
text-decoration: line-through;
text-decoration-color: rgba(138,136,132,.5);
}
@media (max-width: 640px) {
.vs-single-num { font-size: 40px; }
.vs-single-emoji { font-size: 22px; }
.ms-vs-single { max-width: 100%; }
}
/* ══════════════════════════════════════════════════════════
AI COACH (redesigned)
══════════════════════════════════════════════════════════ */
.ai-stage {
display: grid;
grid-template-columns: 240px 1fr;
gap: 32px;
align-items: stretch;
background: linear-gradient(135deg, #ffffff 0%, #fffbfb 100%);
border: 1px solid rgba(0,0,0,.05);
border-radius: 24px;
padding: 32px;
box-shadow: 0 14px 44px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
position: relative; overflow: hidden;
}
.ai-stage::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 60% at 12% 30%, rgba(192,22,42,.05) 0%, transparent 70%),
radial-gradient(ellipse 40% 50% at 90% 80%, rgba(255,180,80,.04) 0%, transparent 70%);
pointer-events: none;
}
.ai-avatar-col {
display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 18px;
border-right: 1px solid rgba(0,0,0,.06);
padding-right: 28px;
position: relative; z-index: 1;
}
.ai-avatar-wrap {
position: relative;
width: 140px; height: 140px;
display: flex; align-items: center; justify-content: center;
}
.ai-avatar-orb {
width: 96px; height: 96px;
border-radius: 50%;
background: linear-gradient(135deg, #ee2233 0%, #c0162a 60%, #8a0e1c 100%);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 30px rgba(192,22,42,.35), inset 0 -8px 18px rgba(0,0,0,.18), inset 0 6px 14px rgba(255,255,255,.20);
position: relative; z-index: 2;
}
.ai-avatar-orb svg { width: 56px; height: 56px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.20)); }
.ai-avatar-ring {
position: absolute; inset: 8px;
border-radius: 50%;
border: 2px solid rgba(192,22,42,.18);
z-index: 1;
}
.ai-avatar-pulse {
position: absolute; inset: 0;
border-radius: 50%;
background: rgba(192,22,42,.22);
animation: aiPulse 2.6s ease-out infinite;
z-index: 0;
}
.ai-avatar-pulse-2 { animation-delay: 1.3s; }
@keyframes aiPulse {
0% { transform: scale(.65); opacity: .55; }
100% { transform: scale(1.15); opacity: 0; }
}
.ai-avatar-meta { text-align: center; }
.ai-avatar-name {
font-family: var(--font-display);
font-size: 18px; font-weight: 800; color: var(--gray-900);
display: inline-flex; align-items: center; gap: 8px;
}
.ai-status-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: #16a34a;
box-shadow: 0 0 0 3px rgba(22,163,74,.18);
animation: blinkDot 1.6s ease infinite;
}
.ai-avatar-role { font-size: 11px; color: var(--gray-400); margin-top: 4px; letter-spacing: .02em; }
.ai-conv-col { display: flex; flex-direction: column; position: relative; z-index: 1; min-width: 0; }
.ai-suggestions { margin-bottom: 18px; }
.ai-sug-label { font-size: 10px; font-weight: 700; color: var(--gray-400); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.ai-sug-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ai-sug {
display: flex; align-items: center; gap: 10px;
background: #ffffff;
border: 1px solid rgba(0,0,0,.07);
border-radius: 12px;
padding: 11px 14px;
font-size: 12.5px; font-weight: 600;
color: var(--gray-900); cursor: pointer;
font-family: var(--font-body);
text-align: left;
transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s;
}
.ai-sug:hover {
transform: translateY(-2px);
border-color: rgba(192,22,42,.35);
box-shadow: 0 8px 20px rgba(192,22,42,.10);
}
.ai-sug-emoji {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 8px;
background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
font-size: 15px;
}
.ai-chatbox {
background: #f9f6f1; border-radius: 14px;
padding: 16px 18px; margin-bottom: 14px;
min-height: 110px; max-height: 220px; overflow-y: auto;
}
.ai-msg-bot { display: flex; margin-bottom: 10px; }
.ai-bubble {
background: var(--white); border: 1px solid rgba(0,0,0,.06);
border-radius: 4px 14px 14px 14px;
padding: 11px 15px; font-size: 13px; color: var(--gray-900);
line-height: 1.6; max-width: 92%; white-space: pre-line;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.ai-msg-user { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.ai-bubble-user {
background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: var(--white);
border-radius: 14px 4px 14px 14px;
padding: 11px 15px; font-size: 13px; line-height: 1.6; max-width: 84%;
box-shadow: 0 4px 12px rgba(192,22,42,.22);
}
.ai-input-row { display: flex; gap: 10px; align-items: stretch; }
.ai-input-row input {
flex: 1; padding: 14px 18px; border-radius: 12px;
border: 1px solid rgba(0,0,0,.10); background: var(--white);
color: var(--gray-900); font-size: 13px; font-family: var(--font-body);
outline: none; transition: border-color .2s, box-shadow .2s;
}
.ai-input-row input:focus {
border-color: var(--red);
box-shadow: 0 0 0 4px rgba(192,22,42,.08);
}
.ai-send {
background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
color: var(--white);
border: none; border-radius: 12px;
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-family: var(--font-body);
transition: transform .2s, box-shadow .2s;
box-shadow: 0 6px 16px rgba(192,22,42,.25);
}
.ai-send svg { width: 18px; height: 18px; }
.ai-send:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(192,22,42,.34); }
@media (max-width: 880px) {
.ai-stage { grid-template-columns: 1fr; padding: 22px; gap: 22px; }
.ai-avatar-col { border-right: none; padding-right: 0; border-bottom: 1px solid rgba(0,0,0,.06); padding-bottom: 22px; }
.ai-sug-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════
TREE GROWTH
══════════════════════════════════════════════════════════ */
.tree-row {
display: flex; align-items: flex-end;
justify-content: space-around; padding: 10px 0 6px; gap: 4px;
}
.tree-item { text-align: center; flex: 1; }
.tree-icon {
font-size: 14px; opacity: .25;
display: block; margin-bottom: 6px; line-height: 1;
transition: opacity .4s, font-size .4s;
}
.tree-lbl { font-size: 10px; color: var(--gray-400); line-height: 1.4; }
.tree-conn {
height: 2px; background: var(--gray-200);
flex: 0.6; align-self: center; flex-shrink: 0;
transition: background .4s;
}
.tree-conn.done { background: var(--red); }
.grow-btn {
display: inline-block; margin: 14px auto 0;
background: #ffffff; color: var(--red);
border: none; border-radius: 999px;
padding: 14px 30px; font-size: 13px; font-weight: 800;
cursor: pointer; font-family: var(--font-display);
letter-spacing: .04em;
box-shadow: 0 10px 28px rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.10);
transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .2s;
}
.grow-btn:hover {
background: #fff5f5;
transform: translateY(-2px);
box-shadow: 0 16px 38px rgba(0,0,0,.30), 0 0 0 5px rgba(255,255,255,.18);
}
/* ══════════════════════════════════════════════════════════
TESTIMONIALS
══════════════════════════════════════════════════════════ */
/* Testimonial accordion */
.testi-accordion { display: flex; flex-direction: column; gap: 12px; }
.testi-acc {
position: relative;
background: var(--white);
border-radius: 18px; overflow: hidden;
border: 1px solid rgba(0,0,0,.05);
box-shadow: 0 2px 12px rgba(0,0,0,.04);
transition: box-shadow .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1), border-color .55s ease;
cursor: default;
}
.testi-acc::before {
content: '\201C';
position: absolute;
top: -22px; left: 16px;
font-size: 132px;
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700;
color: rgba(192,22,42,.10);
line-height: 1;
pointer-events: none;
z-index: 0;
transition: color .55s, transform .55s cubic-bezier(.22,1,.36,1);
}
.testi-acc { cursor: pointer; }
.testi-acc:hover {
box-shadow: 0 10px 28px rgba(192,22,42,.10);
border-color: rgba(192,22,42,.18);
}
.testi-acc.open {
box-shadow: 0 22px 56px rgba(192,22,42,.16), 0 4px 14px rgba(0,0,0,.07);
transform: translateX(10px);
border-color: rgba(192,22,42,.32);
}
.testi-acc.open::before {
color: rgba(192,22,42,.22);
transform: scale(1.10) rotate(-4deg);
}
.testi-acc-head {
display: flex; align-items: center; gap: 16px;
padding: 22px 26px 22px 56px;
position: relative; z-index: 1;
}
.testi-av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 14px rgba(192,22,42,.28); }
.testi-acc-info { flex: 1; min-width: 0; }
.testi-acc-name { font-size: 13.5px; font-weight: 700; color: var(--gray-900); }
.testi-acc-loc { font-size: 11px; color: var(--gray-400); margin-top: 1px; }
.testi-acc-preview, .testi-acc-body { display: none; } /* legacy split structure no longer used */
.testi-acc-text {
position: relative; z-index: 1;
padding: 0 26px 0 56px;
font-size: 14px; color: var(--gray-700, #4a4a48); line-height: 1.78;
font-style: italic;
/* Collapsed state — first line peeks through, rest is hidden but rendered. */
max-height: 28px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
transition:
max-height .9s cubic-bezier(.22,1,.36,1),
padding-top .9s cubic-bezier(.22,1,.36,1),
padding-bottom .9s cubic-bezier(.22,1,.36,1),
-webkit-mask-image .55s ease,
mask-image .55s ease;
}
.testi-acc.open .testi-acc-text {
max-height: 320px;
padding-top: 16px;
padding-bottom: 24px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 100%);
}
.stars { color: #f59e0b; font-size: 12px; margin-top: 2px; letter-spacing: 1px; }
/* ══════════════════════════════════════════════════════════
PROVINCE BARS
══════════════════════════════════════════════════════════ */
.prov-row {
display: grid;
grid-template-columns: 38px 1fr 50px;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.prov-row:last-child { margin-bottom: 0; }
.prov-label { font-size: 12px; font-weight: 700; color: var(--gray-900); letter-spacing: .04em; }
.prov-track { height: 10px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.prov-fill { height: 100%; background: linear-gradient(90deg, #c0162a 0%, #ee2233 100%); border-radius: 999px; width: 0; transition: width 1.5s cubic-bezier(.22,1,.36,1); box-shadow: 0 1px 4px rgba(192,22,42,.30); }
.prov-count { font-size: 13px; font-weight: 800; color: var(--gray-900); text-align: right; font-variant-numeric: tabular-nums; }
/* ══════════════════════════════════════════════════════════
PRICING (inline)
══════════════════════════════════════════════════════════ */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; align-items: stretch; }
.plan {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius); padding: 24px 20px;
display: flex; flex-direction: column;
}
.plan.featured { border: 2px solid var(--red); position: relative; }
.plan-badge {
position: absolute; top: -12px; left: 50%;
transform: translateX(-50%);
background: var(--red); color: var(--white);
font-size: 10px; font-weight: 600;
padding: 3px 14px; border-radius: 20px;
white-space: nowrap; font-family: var(--font-display);
letter-spacing: .04em;
}
.plan-name { font-size: 11px; color: var(--gray-400); margin-bottom: 8px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.plan-price { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--gray-900); }
.plan-period { font-size: 12px; color: var(--gray-400); margin-bottom: 16px; }
.plan-feat { font-size: 12px; color: var(--gray-600); margin-bottom: 6px; display: flex; align-items: flex-start; gap: 7px; }
.plan-feat .ok { color: var(--green); font-weight: 700; flex-shrink: 0; }
.plan-feat .no { color: var(--gray-200); flex-shrink: 0; }
.plan-btn {
width: 100%; margin-top: auto; padding: 13px;
border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
cursor: pointer; font-family: var(--font-body);
transition: opacity .15s, transform .2s; display: block; text-align: center;
text-decoration: none;
}
.plan-btn:hover { opacity: .9; transform: translateY(-1px); }
.plan-btn:hover { opacity: .82; }
.plan-btn-free { background: var(--gray-100); color: var(--gray-900); border: 1px solid var(--gray-200); }
.plan-btn-pro { background: var(--red); color: var(--white); border: none; }
/* ══════════════════════════════════════════════════════════
CANADIAN BADGE
══════════════════════════════════════════════════════════ */
.badge-wrap { text-align: center; padding: 4px 0 8px; }
.canadian-badge {
width: 92px; height: 92px; border-radius: 50%;
border: 3px solid var(--red);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
margin: 0 auto 16px;
background: var(--white);
animation: badgePop .7s cubic-bezier(.34,1.56,.64,1) .4s both;
}
.badge-leaf { font-size: 30px; line-height: 1; }
.badge-txt { font-size: 8px; font-weight: 700; color: var(--red); letter-spacing: .07em; margin-top: 3px; font-family: var(--font-display); }
.badge-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.badge-sub { font-size: 12px; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; max-width: 400px; margin-left: auto; margin-right: auto; }
.badge-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.badge-btn {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-sm); padding: 8px 16px;
font-size: 11px; font-weight: 500; color: var(--gray-600);
cursor: pointer; font-family: var(--font-body);
display: flex; align-items: center; gap: 5px;
transition: border-color .15s, color .15s;
}
.badge-btn:hover { border-color: var(--red); color: var(--red); }
/* ══════════════════════════════════════════════════════════
BOTTOM CTA
══════════════════════════════════════════════════════════ */
.bottom-cta {
background: var(--red); border-radius: var(--radius-lg);
padding: 64px 48px; text-align: center;
position: relative; overflow: hidden; margin-bottom: 0;
box-shadow: 0 12px 48px rgba(192,22,42,.28);
}
.cta-deco { position: absolute; font-size: 96px; opacity: .07; pointer-events: none; -webkit-user-select: none; user-select: none; }
.cta-title {
font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 800;
color: var(--white); margin-bottom: 14px; line-height: 1.15; position: relative; z-index: 2;
letter-spacing: -.02em;
}
.cta-sub { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 22px; position: relative; z-index: 2; }
.cta-main-btn {
background: var(--white); color: var(--red);
border: none; border-radius: var(--radius-sm);
padding: 15px 36px; font-size: 15px; font-weight: 600;
cursor: pointer; font-family: var(--font-display);
transition: transform .15s; position: relative; z-index: 2;
letter-spacing: -.01em; display: inline-block; text-decoration: none;
}
.cta-main-btn:hover { transform: translateY(-2px); }
/* ══════════════════════════════════════════════════════════
FOOTER (shell)
══════════════════════════════════════════════════════════ */
.ms-mf {
position: relative;
background:
radial-gradient(ellipse 800px 400px at 50% 0%, rgba(192,22,42,.12) 0%, transparent 60%),
linear-gradient(180deg, #0B0E1F 0%, #0F1023 50%, #0A0C1A 100%);
color: rgba(255,255,255,.7);
padding: 80px 24px 36px;
overflow: hidden;
isolation: isolate;
}
.ms-mf::before {
content: "";
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: min(880px, 80%); height: 1.5px;
background: linear-gradient(90deg,
transparent 0%,
rgba(192,22,42,.55) 25%,
rgba(251,146,60,.7) 50%,
rgba(192,22,42,.55) 75%,
transparent 100%);
}
.ms-mf-glow {
position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
width: 700px; height: 280px;
background: radial-gradient(ellipse at center, rgba(192,22,42,.15) 0%, rgba(251,146,60,.06) 35%, transparent 70%);
pointer-events: none; filter: blur(40px); z-index: 0;
}
.ms-mf-leaf-bg { position: absolute; right: -80px; bottom: -80px; width: 380px; height: 380px; opacity: .035; pointer-events: none; z-index: 0; }
.ms-mf-leaf-bg svg { width: 100%; height: 100%; }
.ms-mf-top {
position: relative; z-index: 1;
max-width: var(--maxw); margin: 0 auto 56px;
display: grid; grid-template-columns: 1.3fr 2fr; gap: 64px; align-items: start;
}
.ms-mf-brand .ms-mf-logo {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-weight: 700; font-size: 22px;
color: #fff; margin-bottom: 16px; letter-spacing: -.01em;
}
.ms-mf-mark { width: 30px; height: 30px; filter: drop-shadow(0 0 14px rgba(192,22,42,.55)); }
.ms-mf-tagline { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.55); max-width: 300px; margin-bottom: 26px; }
.ms-mf-socials { display: flex; gap: 8px; }
.ms-mf-socials a {
width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
color: rgba(255,255,255,.65); transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.ms-mf-socials a:hover { background: rgba(192,22,42,.15); border-color: rgba(192,22,42,.35); color: #fff; transform: translateY(-2px); }
.ms-mf-socials svg { width: 16px; height: 16px; display: block; }
.ms-mf-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ms-mf-col h4 { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .09em; }
.ms-mf-col a { display: block; font-size: 14px; color: rgba(255,255,255,.55); padding: 6px 0; transition: color .15s, transform .12s; }
.ms-mf-col a:hover { color: #fff; transform: translateX(3px); }
.ms-mf-bottom { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.07); }
.ms-mf-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(255,255,255,.42); }
.ms-mf-copy { margin: 0; }
.ms-mf-made { margin: 0; display: inline-flex; align-items: center; gap: 7px; }
.ms-mf-flag { display: inline-block; font-size: 15px; filter: drop-shadow(0 0 8px rgba(192,22,42,.45)); }
/* ══════════════════════════════════════════════════════════
INNER PAGES (about, contact, privacy, terms)
══════════════════════════════════════════════════════════ */
.ms-section { padding: 80px 24px; }
.ms-container { max-width: var(--maxw); margin: 0 auto; }
.ms-container.ms-narrow { max-width: var(--maxw-narrow); }
.ms-page-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.01em; margin-bottom: 16px; }
.ms-lead { font-size: 18px; color: var(--gray-600); margin-bottom: 24px; line-height: 1.5; }
.ms-narrow p { font-size: 16px; color: var(--gray-900); margin-bottom: 16px; }
.ms-soft-note { font-size: 14px; color: var(--gray-400); font-style: italic; }
.ms-prose p { margin-bottom: 14px; }
.ms-prose a { color: var(--red); }
.ms-prose a:hover { text-decoration: underline; }
.ms-contact-block { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 24px; margin: 24px 0; }
.ms-contact-block a { color: var(--red); font-weight: 600; }
.ms-contact-block a:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════
PRICING PAGE (direct /pricing/ URL)
══════════════════════════════════════════════════════════ */
.ms-checkout-result { max-width: 480px; margin: 80px auto; text-align: center; }
.ms-checkout-result .icon { font-size: 48px; margin-bottom: 16px; }
.ms-checkout-result h2 { font-family: var(--font-display); font-size: 28px; margin-bottom: 12px; }
.ms-checkout-result p { color: var(--gray-600); margin-bottom: 24px; }
/* ══════════════════════════════════════════════════════════
ANIMATIONS
══════════════════════════════════════════════════════════ */
@keyframes particleFall {
0% { opacity: 0; transform: translateY(-70px) rotate(0deg) translateX(0); }
7% { opacity: .92; }
50% { opacity: .70; transform: translateY(42vh) rotate(240deg) translateX(22px); }
93% { opacity: .22; }
100% { opacity: 0; transform: translateY(90vh) rotate(480deg) translateX(-14px); }
}
@keyframes blinkDot { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes pingRing {
0% { transform:scale(.5); opacity:0; }
60% { transform:scale(1.4); opacity:.6; }
100%{ transform:scale(1); opacity:0; }
}
@keyframes badgePop {
0% { transform:scale(0) rotate(-15deg); opacity:0; }
70% { transform:scale(1.12) rotate(3deg); opacity:1; }
100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
@keyframes toastSlideIn { from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastSlideOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(50px)} }
@keyframes riseIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.anim-rise { animation: riseIn .55s ease both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .35s; }
/* ── Scroll reveal (JS sets opacity:0 inline before observing, removes on reveal) ── */
.ms-reveal { animation: riseIn .55s ease both; }
/* ── Scroll reveal system ──────────────────────────────── */
.ms-ri {
opacity: 0;
transition: opacity .6s cubic-bezier(.22,1,.36,1),
transform .6s cubic-bezier(.22,1,.36,1);
}
.ms-ri-up { transform: translateY(38px); }
.ms-ri-left { transform: translateX(-46px); }
.ms-ri-right { transform: translateX(46px); }
.ms-ri-scale { transform: scale(.93) translateY(20px); }
.ms-ri.visible { opacity: 1 !important; transform: none !important; }
.ms-ri[data-delay="1"] { transition-delay: .08s; }
.ms-ri[data-delay="2"] { transition-delay: .16s; }
.ms-ri[data-delay="3"] { transition-delay: .24s; }
.ms-ri[data-delay="4"] { transition-delay: .32s; }
.ms-ri[data-delay="5"] { transition-delay: .40s; }
.ms-ri[data-delay="6"] { transition-delay: .48s; }
.ms-ri[data-delay="7"] { transition-delay: .56s; }
.ms-ri[data-delay="8"] { transition-delay: .64s; }
/* ── Sticky navbar: anchor targets need scroll offset ── */
.ms-sec, .ms-sec-inner, #ms-pricing, #ms-ai-section, #hero {
scroll-margin-top: 90px;
}
/* ── Scoreboard row entrance ── */
.score-table tr { opacity: 0; transform: translateX(-12px); transition: opacity .3s, transform .3s; }
.score-table tr.score-row-in { opacity: 1; transform: translateX(0); }
/* ── Tree grow ── */
.tree-icon.tree-grow { opacity: 1 !important; }
@keyframes treeGrowAnim { 0%{transform:scale(.6)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }
.tree-icon.tree-grow { animation: treeGrowAnim .5s ease both; will-change: transform; }
.tree-conn.conn-grow { background: var(--red) !important; transition: background .5s !important; }
/* ── AI chat dynamic bubbles ── */
.ai-bubble.user {
background: var(--red); color: var(--white);
border-radius: 10px 0 10px 10px;
padding: 9px 13px; font-size: 12px; line-height: 1.6;
max-width: 80%; align-self: flex-end;
margin-left: auto;
}
.ai-bubble.bot {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 0 10px 10px 10px;
padding: 9px 13px; font-size: 12px; color: var(--gray-900);
line-height: 1.6; max-width: 88%;
}
.ai-bubble.typing {
display: flex; align-items: center; gap: 4px;
padding: 10px 14px;
}
.ai-bubble.typing span {
width: 6px; height: 6px; border-radius: 50%;
background: var(--gray-300); display: inline-block;
animation: typingDot 1s infinite both;
will-change: transform, opacity;
}
.ai-bubble.typing span:nth-child(2) { animation-delay: .15s; }
.ai-bubble.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%,80%,100%{transform:scale(.8);opacity:.5} 40%{transform:scale(1.1);opacity:1} }
/* ── AI chatbox flex layout for dynamic bubbles ── */
.ai-chatbox { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
/* ══════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.features { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
.ms-sec-inner { padding: 72px clamp(20px, 4vw, 40px); }
.stats-hero { grid-template-columns: 1fr; }
.stat-big { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.steps-grid { grid-template-columns: repeat(2, 1fr); }
.features { grid-template-columns: repeat(2, 1fr); }
.ms-col-row { grid-template-columns: 1fr; gap: 20px; }
.ms-col-row-3 { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
.ms-mh { top: 10px; padding: 0 12px; }
.ms-mh-shell { padding: 6px 6px 6px 16px; border-radius: 14px; gap: 10px; }
.ms-mh-mark { width: 32px; height: 32px; }
.ms-mh-name { font-size: 15px; }
.ms-mh-cta { padding: 9px 13px; font-size: 12.5px; gap: 3px; }
.ms-mh-cta-arrow { display: none; }
/* Legacy mobile nav rules — fully overridden by the 860px block below */
.hero { padding: 120px 20px 70px; min-height: 480px; }
.hero .season-tabs { max-width: 100%; }
.ms-page { padding: 0 20px 64px; }
.ms-col-row { grid-template-columns: 1fr; gap: 14px; }
.ms-col-row-3 { grid-template-columns: 1fr; gap: 14px; }
.pricing-grid { grid-template-columns: 1fr; }
.features { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card { padding: 22px 20px; border-radius: 18px; }
.feat-card { padding: 20px 16px; border-radius: 16px; }
.bottom-cta { padding: 48px 24px; }
.ms-mf-top { grid-template-columns: 1fr; gap: 48px; }
.ms-mf-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
.ms-mf-bottom-inner { justify-content: center; text-align: center; }
.ms-section { padding: 56px 20px; }
.toast-wrap { bottom: 12px; right: 12px; left: 12px; max-width: 100%; align-items: center; }
.toast { font-size: 11.5px; padding: 9px 14px; max-width: 100%; white-space: normal; }
}
@media (max-width: 540px) {
.ms-sec-inner { padding: 56px 20px; }
.steps-grid { grid-template-columns: 1fr; }
.features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
.features { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════
ABOUT PAGE
══════════════════════════════════════════════════════════ */
.ab-hero .sec-head { max-width: 920px; }
.ab-story-grid {
display: grid; grid-template-columns: 1.4fr 1fr;
gap: 56px; align-items: start;
}
.ab-chapter {
font-family: var(--font-display);
font-size: 11px; font-weight: 800;
color: var(--red); letter-spacing: .18em;
text-transform: uppercase; margin-bottom: 14px;
}
.ab-story-h {
font-family: var(--font-display);
font-size: clamp(26px, 2.6vw, 38px);
font-weight: 800; line-height: 1.18;
color: var(--gray-900); letter-spacing: -.02em;
margin-bottom: 20px;
}
.ab-story-text p {
font-size: 15.5px; line-height: 1.72;
color: var(--gray-600); margin-bottom: 16px;
}
.ab-story-text p em { color: var(--red); font-style: italic; font-weight: 600; }
.ab-quote-card {
background: linear-gradient(135deg, #fff 0%, #fff7f7 100%);
border-left: 5px solid var(--red);
border-radius: 16px;
padding: 32px 28px 28px;
box-shadow: 0 12px 38px rgba(192,22,42,.10);
position: relative;
}
.ab-quote-mark {
font-family: Georgia, serif;
font-size: 96px; line-height: .8;
color: rgba(192,22,42,.18);
position: absolute; top: 10px; left: 18px;
pointer-events: none;
}
.ab-quote-text {
position: relative; z-index: 1;
font-size: 18px; font-weight: 600;
line-height: 1.55;
color: var(--gray-900);
font-style: italic;
margin-bottom: 14px; margin-top: 26px;
}
.ab-quote-cite { font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: .04em; }
.ab-team-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 28px; margin-top: 48px;
}
.ab-team-card {
background: #fff;
border: 1px solid rgba(0,0,0,.05);
border-radius: 22px; padding: 36px 32px;
box-shadow: 0 14px 38px rgba(0,0,0,.06);
transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.ab-team-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(192,22,42,.14); }
.ab-team-avatar {
width: 140px; height: 140px; border-radius: 50%;
display: block;
margin-bottom: 22px;
overflow: hidden;
position: relative;
isolation: isolate;
}
.ab-team-avatar img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 28%;
display: block;
transition: transform .65s cubic-bezier(.22,1,.36,1), filter .55s ease;
filter: saturate(1.05) contrast(1.02);
}
.ab-team-avatar svg { width: 100%; height: 100%; display: block; transition: transform .65s cubic-bezier(.22,1,.36,1); }
.ab-team-avatar::after {
/* Subtle inner ring */
content: ''; position: absolute; inset: 0;
border-radius: 50%;
box-shadow: inset 0 0 0 4px rgba(255,255,255,.55), inset 0 0 0 6px rgba(0,0,0,.06);
pointer-events: none;
z-index: 2;
}
.ab-team-avatar-mp {
box-shadow:
0 0 0 4px rgba(192,22,42,.18),
0 16px 38px rgba(192,22,42,.35),
0 4px 12px rgba(0,0,0,.10);
}
.ab-team-avatar-cto {
box-shadow:
0 0 0 4px rgba(10,22,40,.18),
0 16px 38px rgba(10,22,40,.32),
0 4px 12px rgba(0,0,0,.10);
}
.ab-team-flag {
position: absolute;
right: -2px; bottom: -2px;
width: 44px; height: 44px;
border-radius: 50%;
background: #ffffff;
border: 3px solid #fff;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
box-shadow: 0 6px 16px rgba(192,22,42,.30);
z-index: 3;
}
.ab-team-card { text-align: left; }
.ab-team-card:hover .ab-team-avatar img { transform: scale(1.08); filter: saturate(1.15) contrast(1.05); }
.ab-team-card:hover .ab-team-avatar svg { transform: scale(1.05) rotate(-2deg); }
.ab-team-role { font-size: 11px; font-weight: 800; color: var(--red); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.ab-team-name { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--gray-900); margin-bottom: 14px; letter-spacing: -.02em; }
.ab-team-bio { font-size: 14.5px; line-height: 1.7; color: var(--gray-600); margin-bottom: 20px; }
.ab-team-traits { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-trait { display: inline-block; padding: 5px 12px; background: rgba(192,22,42,.07); color: var(--red); border-radius: 999px; font-size: 11px; font-weight: 700; }
.ab-values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.ab-value { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 28px 26px; }
.ab-value-num { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: rgba(255,255,255,.30); margin-bottom: 8px; line-height: 1; }
.ab-value-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.ab-value-desc { font-size: 14px; line-height: 1.68; color: rgba(255,255,255,.78); }
.ab-numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.ab-num { background: #fff; border-radius: 18px; padding: 32px 22px; text-align: center; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.ab-num-big { font-family: var(--font-display); font-size: clamp(38px, 4.2vw, 56px); font-weight: 800; color: var(--red); line-height: 1; margin-bottom: 8px; letter-spacing: -.04em; }
.ab-num-lbl { font-size: 12px; font-weight: 700; color: var(--gray-600); letter-spacing: .06em; text-transform: uppercase; }
/* ══════════════════════════════════════════════════════════
CONTACT PAGE
══════════════════════════════════════════════════════════ */
.ct-grid { display: grid; grid-template-columns: 380px 1fr; gap: 36px; align-items: start; margin-top: 44px; }
.ct-side { display: flex; flex-direction: column; gap: 18px; }
.ct-info-card { background: #fff; border-radius: 20px; padding: 26px 24px; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 12px 34px rgba(0,0,0,.06); }
.ct-info-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.ct-info-row:last-child { border-bottom: none; }
.ct-info-ico { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.ct-info-label { font-size: 11px; font-weight: 700; color: var(--gray-400); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.ct-info-value { font-size: 14px; font-weight: 700; color: var(--gray-900); text-decoration: none; }
a.ct-info-value:hover { color: var(--red); }
.ct-pride-card { background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: #fff; border-radius: 20px; padding: 22px 24px; box-shadow: 0 14px 38px rgba(192,22,42,.30); }
.ct-pride-title { font-family: var(--font-display); font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.ct-pride-desc { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.92); }
.ct-form-wrap { background: #fff; border-radius: 22px; padding: 36px 32px; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 16px 44px rgba(0,0,0,.07); }
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-label { display: block; margin-bottom: 16px; position: relative; }
.ct-form-row .ct-label { margin-bottom: 0; }
.ct-label-text { display: block; font-size: 11px; font-weight: 700; color: var(--gray-600); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.ct-label input, .ct-label select, .ct-label textarea { width: 100%; padding: 13px 16px; border: 1px solid rgba(0,0,0,.10); border-radius: 12px; font-size: 14px; font-family: var(--font-body); color: var(--gray-900); background: #fcfaf7; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.ct-label input:focus, .ct-label select:focus, .ct-label textarea:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 4px rgba(192,22,42,.08); }
.ct-label textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.ct-check { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 18px; font-size: 12.5px; color: var(--gray-600); line-height: 1.55; }
.ct-check input { margin-top: 3px; }
.ct-form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ct-submit { background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: #fff; border: none; padding: 14px 30px; border-radius: 12px; font-size: 14px; font-weight: 700; font-family: var(--font-display); cursor: pointer; box-shadow: 0 10px 26px rgba(192,22,42,.30); transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.ct-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(192,22,42,.40); }
.ct-reply { font-size: 12px; color: var(--gray-400); }
.ct-result { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 13.5px; line-height: 1.55; display: none; }
.ct-result.is-success { display: block; background: #f0fbf4; color: #0e6536; border: 1px solid #c0e8d1; }
.ct-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.ct-faq-item { background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 14px; padding: 20px 22px; transition: border-color .3s, transform .3s cubic-bezier(.22,1,.36,1); }
.ct-faq-item:hover { border-color: rgba(192,22,42,.22); transform: translateY(-2px); }
.ct-faq-q { font-size: 14.5px; font-weight: 800; color: var(--gray-900); margin-bottom: 6px; font-family: var(--font-display); }
.ct-faq-a { font-size: 13px; line-height: 1.65; color: var(--gray-600); }
/* ══════════════════════════════════════════════════════════
MY PAGE — logged-in user dashboard
══════════════════════════════════════════════════════════ */
.my-section .ms-sec-inner { padding-top: 130px; padding-bottom: 80px; }
.my-hero {
display: flex; align-items: center; gap: 24px;
margin-bottom: 44px;
}
.my-avatar {
width: 92px; height: 92px;
border-radius: 50%;
background: linear-gradient(135deg, #ee2233 0%, #c0162a 100%);
display: flex; align-items: center; justify-content: center;
color: #fff;
font-family: var(--font-display);
font-size: 38px; font-weight: 800;
box-shadow: 0 14px 32px rgba(192,22,42,.32);
flex-shrink: 0;
position: relative;
}
.my-avatar::after {
content: ''; position: absolute;
right: 4px; bottom: 4px;
width: 18px; height: 18px;
border-radius: 50%;
background: #16a34a;
border: 3px solid #f5f4f1;
}
.my-hero-text { flex: 1; min-width: 0; }
.my-title {
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 800;
color: var(--gray-900);
letter-spacing: -.02em;
margin: 6px 0 4px;
}
.my-sub { font-size: 15px; color: var(--gray-600); line-height: 1.55; }
.my-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.my-card {
background: #ffffff;
border-radius: 20px;
padding: 28px 26px;
border: 1px solid rgba(0,0,0,.05);
box-shadow: 0 12px 34px rgba(0,0,0,.06);
transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.my-card:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,.10); }
.my-card-h {
display: flex; align-items: center; gap: 12px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.my-card-ico {
width: 38px; height: 38px; border-radius: 11px;
background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
display: flex; align-items: center; justify-content: center;
font-size: 19px;
}
.my-card-h h3 {
font-family: var(--font-display);
font-size: 17px; font-weight: 800;
color: var(--gray-900); letter-spacing: -.01em;
margin: 0;
}
.my-info-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px dashed rgba(0,0,0,.06);
font-size: 13.5px;
}
.my-info-row:last-of-type { border-bottom: none; }
.my-info-row span { color: var(--gray-600); }
.my-info-row strong { color: var(--gray-900); font-weight: 700; }
.my-link {
display: inline-block;
margin-top: 14px;
font-size: 13px; font-weight: 700;
color: var(--red); text-decoration: none;
font-family: var(--font-display);
}
.my-link:hover { text-decoration: underline; }
.my-empty {
font-size: 14px; color: var(--gray-600);
line-height: 1.6;
padding: 14px 0 18px;
}
.my-cta {
display: inline-block;
background: linear-gradient(135deg, #ee2233 0%, #c0162a 100%);
color: #fff; padding: 12px 22px;
border-radius: 12px;
font-size: 13.5px; font-weight: 700;
font-family: var(--font-display);
text-decoration: none;
box-shadow: 0 8px 22px rgba(192,22,42,.28);
transition: transform .2s, box-shadow .25s;
}
.my-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(192,22,42,.36); }
/* Wallet card — 3-tile metrics + progress bar */
.my-wallet-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 8px 0 14px;
}
.my-wallet-cell {
text-align: center;
background: rgba(192, 22, 42, .04);
border: 1px solid rgba(192, 22, 42, .12);
border-radius: 10px;
padding: 12px 6px;
}
.my-wallet-n {
font-size: 22px;
font-weight: 800;
color: #1a1410;
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
.my-wallet-l {
font-size: 10.5px;
color: var(--gray-600);
text-transform: uppercase;
letter-spacing: .06em;
margin-top: 4px;
font-weight: 600;
}
.my-wallet-bar {
height: 6px;
background: rgba(0, 0, 0, .06);
border-radius: 999px;
overflow: hidden;
margin-top: 4px;
}
.my-wallet-bar-fill {
height: 100%;
background: linear-gradient(90deg, #c0162a, #ee9933);
transition: width .4s ease-out;
}
.my-wallet-progress {
font-size: 12px;
color: var(--gray-600);
margin: 8px 0 4px;
text-align: center;
}
/* Referral card */
.my-ref-explain {
font-size: 13px;
color: var(--gray-600);
line-height: 1.55;
margin: 8px 0 12px;
}
.my-ref-url {
display: flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, .04);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 10px;
padding: 4px;
margin-bottom: 10px;
}
.my-ref-url input {
flex: 1; min-width: 0;
border: 0;
background: transparent;
padding: 6px 10px;
font-size: 12px;
font-family: ui-monospace, SFMono-Regular, monospace;
color: var(--gray-800);
}
.my-ref-url button {
background: #c0162a;
color: #fff;
border: 0;
padding: 6px 14px;
border-radius: 7px;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
}
.my-ref-url button:hover { background: #8b0f1f; }
.my-ref-stats {
display: flex;
gap: 20px;
margin: 4px 0 10px;
font-size: 13px;
color: var(--gray-700);
}
.my-ref-stats strong {
color: #1a1410;
font-size: 16px;
margin-right: 4px;
font-variant-numeric: tabular-nums;
}
.my-site-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: #f9f6f1;
border-radius: 12px;
margin-bottom: 8px;
border-left: 3px solid var(--red);
}
.my-site-name { font-size: 14px; font-weight: 800; color: var(--gray-900); font-family: var(--font-display); }
.my-site-url { font-size: 12px; color: var(--gray-600); text-decoration: none; margin-top: 2px; display: block; }
.my-site-url:hover { color: var(--red); }
.my-site-plan {
font-size: 11px; font-weight: 800;
padding: 5px 12px; border-radius: 999px;
font-family: var(--font-display);
letter-spacing: .02em;
}
.my-site-plan.pro { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #78350f; }
.my-site-plan.free { background: var(--gray-100); color: var(--gray-600); }
.my-plan-badge {
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
font-size: 13px; font-weight: 800;
font-family: var(--font-display);
margin-bottom: 14px;
letter-spacing: .02em;
}
.my-plan-badge.pro { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #78350f; box-shadow: 0 6px 16px rgba(245,158,11,.28); }
.my-plan-badge.free { background: #f9f6f1; color: var(--gray-700, #4a4a48); border: 1px solid rgba(0,0,0,.06); }
.my-plan-desc { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; }
.my-action {
display: flex; align-items: center; gap: 14px;
padding: 13px 14px;
background: #f9f6f1;
border-radius: 12px;
text-decoration: none;
margin-bottom: 8px;
transition: background .25s, transform .25s cubic-bezier(.22,1,.36,1);
border-left: 3px solid transparent;
}
.my-action:hover { background: #fdf6f4; transform: translateX(3px); border-left-color: var(--red); }
.my-action-logout:hover { border-left-color: var(--gray-400); background: #f3eded; }
.my-action-ico {
width: 36px; height: 36px;
border-radius: 10px;
background: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.my-action-t { font-size: 14px; font-weight: 800; color: var(--gray-900); font-family: var(--font-display); }
.my-action-d { font-size: 12px; color: var(--gray-600); margin-top: 1px; }
@media (max-width: 860px) {
.my-grid { grid-template-columns: 1fr; gap: 14px; }
.my-section .ms-sec-inner { padding-top: 110px !important; }
.my-hero { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
.my-avatar { width: 72px; height: 72px; font-size: 30px; }
}
/* ══════════════════════════════════════════════════════════
DETECTIVE CTA — homepage section showcasing /challenges/
══════════════════════════════════════════════════════════ */
.ms-detective-cta {
background: linear-gradient(135deg, #1a1410 0%, #2a1f17 100%);
position: relative; overflow: hidden;
}
.ms-detective-cta::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(201,169,92,.10) 0%, transparent 70%);
pointer-events: none;
}
.ms-detective-cta-inner {
display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px;
align-items: center; padding-top: 90px !important; padding-bottom: 90px !important;
position: relative; z-index: 1;
}
.ms-detective-cta-text .sec-head { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; }
.ms-detective-cta-actions { display: flex; align-items: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.ms-detective-cta-shots {
position: relative; height: 360px; display: block;
}
.ms-detective-cta-shots .dx-shot {
position: absolute; width: 280px; height: 187px; object-fit: cover;
border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(201,169,92,.18);
transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.ms-detective-cta-shots .dx-shot-1 { top: 0; right: 0; transform: rotate(4deg); }
.ms-detective-cta-shots .dx-shot-2 { top: 100px; left: 20px; transform: rotate(-6deg); z-index: 2; }
.ms-detective-cta-shots .dx-shot-3 { bottom: 0; right: 40px; transform: rotate(2deg); z-index: 1; }
.ms-detective-cta-shots:hover .dx-shot-1 { transform: rotate(2deg) translateY(-4px); }
.ms-detective-cta-shots:hover .dx-shot-2 { transform: rotate(-4deg) translateY(-4px); }
.ms-detective-cta-shots:hover .dx-shot-3 { transform: rotate(0deg) translateY(-4px); }
@media (max-width: 900px) {
.ms-detective-cta-inner { grid-template-columns: 1fr; gap: 32px; }
.ms-detective-cta-shots { height: 220px; }
.ms-detective-cta-shots .dx-shot { width: 200px; height: 134px; }
.ms-detective-cta-shots .dx-shot-1 { top: 0; right: 8px; }
.ms-detective-cta-shots .dx-shot-2 { top: 50px; left: 8px; }
.ms-detective-cta-shots .dx-shot-3 { bottom: 0; right: 60px; }
}
/* ══════════════════════════════════════════════════════════
SIGNUP PAGE
══════════════════════════════════════════════════════════ */
.su-section .ms-sec-inner { min-height: 100vh; display: flex; align-items: center; }
.su-grid { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; width: 100%; }
.su-side .sec-eyebrow { margin-bottom: 18px; }
.su-title { font-family: var(--font-display); font-size: clamp(34px, 4vw, 54px); font-weight: 800; color: var(--gray-900); letter-spacing: -.04em; line-height: 1.06; margin-bottom: 18px; }
.su-lead { font-size: 17px; color: var(--gray-600); line-height: 1.6; margin-bottom: 24px; }
.su-perks { list-style: none; padding: 0; }
.su-perks li { display: flex; gap: 14px; align-items: center; padding: 12px 0; font-size: 14px; color: var(--gray-700, #4a4a48); font-weight: 600; border-bottom: 1px solid rgba(0,0,0,.06); }
.su-perks li:last-child { border-bottom: none; }
.su-perk-ico { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.su-card { background: #fff; border-radius: 24px; padding: 32px 30px; box-shadow: 0 28px 80px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.05); }
.su-tabs { display: flex; gap: 0; background: #f9f6f1; border-radius: 12px; padding: 4px; margin-bottom: 22px; }
.su-tab { flex: 1; padding: 10px 12px; background: transparent; border: none; border-radius: 9px; font-size: 12.5px; font-weight: 700; font-family: var(--font-display); color: var(--gray-400); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.su-tab.is-active { background: #fff; color: var(--gray-900); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.su-pane { display: none; }
.su-pane.is-active { display: block; animation: suFade .35s ease-out both; }
@keyframes suFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.su-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 13px 16px; border: 1.5px solid rgba(0,0,0,.10); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; color: var(--gray-900); text-decoration: none; font-family: var(--font-display); transition: border-color .25s, box-shadow .25s, transform .2s cubic-bezier(.22,1,.36,1); }
.su-google:hover { border-color: rgba(0,0,0,.20); box-shadow: 0 8px 22px rgba(0,0,0,.08); transform: translateY(-1px); }
.su-google-icon { width: 18px; height: 18px; }
.su-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 11px; font-weight: 700; color: var(--gray-400); letter-spacing: .08em; text-transform: uppercase; }
.su-divider::before, .su-divider::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,.08); }
.su-label { display: block; margin-bottom: 14px; }
.su-label-text { display: block; font-size: 11px; font-weight: 700; color: var(--gray-600); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.su-label input { width: 100%; padding: 12px 14px; border: 1px solid rgba(0,0,0,.10); border-radius: 11px; font-size: 14px; font-family: var(--font-body); background: #fcfaf7; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.su-label input:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 4px rgba(192,22,42,.08); }
.su-check { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 16px; font-size: 12px; color: var(--gray-600); line-height: 1.55; }
.su-check a { color: var(--red); font-weight: 700; text-decoration: none; }
.su-check a:hover { text-decoration: underline; }
.su-submit { width: 100%; background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: #fff; border: none; padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 800; font-family: var(--font-display); cursor: pointer; box-shadow: 0 10px 26px rgba(192,22,42,.30); transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.su-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(192,22,42,.40); }
.su-foot { font-size: 13px; color: var(--gray-600); text-align: center; margin-top: 18px; }
.su-foot a { color: var(--red); font-weight: 700; text-decoration: none; }
.su-result { margin-top: 14px; padding: 13px 14px; border-radius: 10px; font-size: 13px; line-height: 1.55; display: none; }
.su-result.is-success { display: block; background: #f0fbf4; color: #0e6536; border: 1px solid #c0e8d1; }
.su-result.is-info { display: block; background: #fff8e1; color: #6a4d00; border: 1px solid #ffe4a1; }
/* ══════════════════════════════════════════════════════════
PERFORMANCE — respect reduced-motion + GPU hints
══════════════════════════════════════════════════════════ */
.ms-sec::before, .ms-sec::after,
.ms-pride-img, .ms-pride-img-bg,
.step-icon-lg,
.testi-acc, .testi-acc-text {
will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ══════════════════════════════════════════════════════════
LEGAL PAGES (Privacy + Terms)
══════════════════════════════════════════════════════════ */
.legal-updated {
display: inline-block;
margin-top: 18px;
padding: 6px 14px;
background: rgba(192,22,42,.08);
color: var(--red);
font-size: 12px; font-weight: 700;
letter-spacing: .04em;
border-radius: 999px;
}
.legal-body .ms-sec-inner { max-width: 880px; }
.legal-prose {
background: #ffffff;
border-radius: 22px;
padding: 44px clamp(28px, 4vw, 60px);
box-shadow: 0 14px 38px rgba(0,0,0,.06);
border: 1px solid rgba(0,0,0,.05);
}
.legal-prose h2 {
font-family: var(--font-display);
font-size: 19px;
font-weight: 800;
color: var(--gray-900);
margin: 26px 0 10px;
letter-spacing: -.01em;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p {
font-size: 14.5px;
line-height: 1.72;
color: var(--gray-700, #4a4a48);
margin-bottom: 14px;
}
.legal-prose a { color: var(--red); font-weight: 700; text-decoration: none; }
.legal-prose a:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════
RESPONSIVE — UNIFIED FIXES
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.ab-story-grid { grid-template-columns: 1fr; gap: 36px; }
.ab-team-grid { grid-template-columns: 1fr; }
.ab-values-grid { grid-template-columns: 1fr 1fr; }
.ab-numbers-grid { grid-template-columns: repeat(2, 1fr); }
.ct-grid { grid-template-columns: 1fr; gap: 26px; }
.ct-faq-grid { grid-template-columns: 1fr; }
.su-grid { grid-template-columns: 1fr; gap: 36px; max-width: 540px; margin: 0 auto; }
.ms-mh-leaves { width: 16%; }
}
/* ════════ MOBILE NAVBAR + LAYOUT (single source of truth) ════════ */
@media (max-width: 860px) {
/* Force horizontal padding on every section inner so content never hugs the edge */
body.ms-marketing-body .ms-sec-inner { padding-left: 22px !important; padding-right: 22px !important; }
body.ms-marketing-body .su-section .ms-sec-inner { padding-top: 90px !important; padding-bottom: 40px !important; }
body.ms-marketing-body .ct-grid,
body.ms-marketing-body .su-grid,
body.ms-marketing-body .ab-story-grid { padding: 0 !important; }
.ms-mh-shell {
gap: 8px !important;
padding: 8px 8px 8px 16px !important;
/* CRITICAL: remove backdrop-filter and overflow so that the fixed-positioned
mobile menu can break out of the shell. backdrop-filter creates a containing
block for position: fixed descendants — that was the reason the dropdown
never appeared on mobile. */
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
overflow: visible !important;
}
.ms-mh { overflow: visible !important; }
.ms-mh-leaves { display: none !important; }
.ms-mh-shell::before { width: 36px !important; height: 36px !important; }
/* Burger: visible square-pill button with red bars */
.ms-mh-burger {
display: flex !important;
align-items: center !important; justify-content: center !important;
width: 42px !important; height: 42px !important;
background: rgba(192,22,42,.10) !important;
border: 1px solid rgba(192,22,42,.18) !important;
border-radius: 12px !important;
flex-direction: column !important; gap: 4px !important;
padding: 0 !important;
cursor: pointer;
flex-shrink: 0;
}
.ms-mh-burger span {
background: var(--red) !important;
width: 18px !important; height: 2px !important;
border-radius: 2px;
transition: transform .25s, opacity .25s;
display: block;
}
.ms-mh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ms-mh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ms-mh-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Distribute navbar items properly — logo on left, actions on right */
.ms-mh-shell { justify-content: space-between !important; }
.ms-mh-actions { margin-left: auto !important; }
.ms-mh-burger { margin-left: 0 !important; }
/* Nav: dropdown panel below the navbar pill, aligned to the pill width */
body.ms-marketing-body #ms-mh-nav {
display: flex !important;
position: fixed !important;
top: 78px !important;
left: 16px !important; right: 16px !important;
width: auto !important;
margin: 0 !important;
background: #ffffff !important;
border: 1.5px solid rgba(192,22,42,.22) !important;
border-radius: 18px !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 2px !important;
padding: 12px !important;
box-shadow: 0 22px 56px rgba(192,22,42,.20), 0 6px 18px rgba(0,0,0,.10) !important;
opacity: 0;
transform: translateY(-12px) scale(.97);
visibility: hidden;
pointer-events: none;
transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .25s, visibility .25s;
z-index: 9999 !important;
max-width: none !important;
}
body.ms-marketing-body #ms-mh-nav.open {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Menu items centered */
body.ms-marketing-body #ms-mh-nav a {
display: block !important;
text-align: center !important;
padding: 16px 14px !important;
border-radius: 12px !important;
font-size: 15.5px !important;
font-weight: 700 !important;
color: var(--gray-900) !important;
text-decoration: none !important;
transition: background .2s, color .2s;
}
body.ms-marketing-body #ms-mh-nav a:hover,
body.ms-marketing-body #ms-mh-nav a:active {
background: rgba(192,22,42,.08) !important;
color: var(--red) !important;
}
.ms-mh-nav a {
display: block !important;
width: 100% !important;
padding: 14px 16px !important;
border-radius: 10px !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--gray-900) !important;
text-align: left;
text-decoration: none;
background: transparent !important;
}
.ms-mh-nav a:hover { background: rgba(192,22,42,.08) !important; color: var(--red) !important; }
/* Compact actions */
.ms-mh-login { padding: 6px 10px !important; font-size: 12.5px !important; }
.ms-mh-cta { padding: 8px 14px !important; font-size: 12.5px !important; }
.ms-mh-cta-arrow { display: none !important; }
}
@media (max-width: 540px) {
.ms-mh-name { display: none !important; }
.ms-mh-login { display: none !important; }
.ms-mh-shell { padding: 6px 6px 6px 14px !important; gap: 6px !important; }
}
/* ════════ MOBILE HERO — clutter cleanup ════════
On phones the hero shows only the essentials: 1 social-proof badge,
the title (with sub), the primary CTA, and the season switcher. */
@media (max-width: 760px) {
/* Hide the trust pill row on mobile — just title + button + season tabs */
.hero .hero-trust { display: none !important; }
/* Reduce visual noise from toasts on small screens */
.toast-wrap { bottom: 12px !important; max-width: calc(100% - 24px) !important; }
.toast { padding: 8px 14px !important; font-size: 11.5px !important; }
/* Tighter hero spacing */
.hero { padding: 70px 18px 24px !important; }
.hero-title { font-size: clamp(34px, 8vw, 52px) !important; margin-bottom: 16px !important; }
.hero-title-sub { font-size: 14px !important; margin-top: 10px !important; }
.hero-btns { margin-bottom: 18px !important; }
.hero .btn-primary { padding: 14px 26px !important; font-size: 14px !important; }
.live-badge { padding: 5px 12px !important; font-size: 11px !important; margin-bottom: 16px !important; }
.hero .season-tabs { margin-top: 18px !important; }
}
@media (max-width: 760px) {
.ms-mh-shell { padding: 6px 8px 6px 14px; gap: 8px; }
.ms-mh-actions { gap: 4px; }
.ms-mh-login { padding: 6px 10px; font-size: 12px; }
.ms-mh-cta { padding: 7px 14px; font-size: 12px; }
.ms-mh-leaves { display: none; }
.ms-mh-shell::before { width: 38px; height: 38px; }
.ab-values-grid { grid-template-columns: 1fr; }
.ab-numbers-grid { grid-template-columns: 1fr 1fr; }
.ab-team-card { padding: 26px 22px; }
.ab-team-avatar { width: 60px; height: 60px; font-size: 26px; }
.ab-team-name { font-size: 22px; }
.ct-form-wrap { padding: 26px 22px; }
.ct-form-row { grid-template-columns: 1fr; }
.su-card { padding: 26px 22px; }
.ms-sec-inner { padding: 64px 22px; }
.stats-hero { grid-template-columns: 1fr; }
.stat-big { border-right: none; border-bottom: 1px solid rgba(255,255,255,.10); padding: 28px 24px; }
.stat-big:last-child { border-bottom: none; }
.ms-col-row { grid-template-columns: 1fr; gap: 18px; }
.ms-vs-single { max-width: 100%; }
.features { grid-template-columns: repeat(2, 1fr); }
.pricing-grid { grid-template-columns: 1fr; }
.testi-acc-text { padding-left: 26px; }
.ms-pride-img { display: none; }
}
@media (max-width: 480px) {
.ms-mh-name { display: none; }
.ms-mh-login { display: none; }
.features { grid-template-columns: 1fr; }
.ab-numbers-grid { grid-template-columns: 1fr; }
.ab-team-card { padding: 22px 18px; }
.hero { padding: 60px 18px 18px; }
.hero-title { font-size: 34px; }
.hero-sub { font-size: 14px; }
.btn-primary, .btn-outline { padding: 12px 20px; font-size: 13px; }
.vs-single-num { font-size: 36px; }
.step-block { padding: 18px 14px 22px; }
.step-block .step-icon-lg { font-size: 110px !important; }
.step-block .step-icon-lg img { width: 110px; height: 110px; }
.step-icon-zone { height: 150px; }
.ct-form-actions { flex-direction: column; align-items: flex-start; }
.ct-submit { width: 100%; }
}
/* ────────────────────────────────────────────────────────────
* SERVICE PAGES (3-Day Custom, Automation, Custom Dev)
* shared across /done-for-you/, /automation/, /custom-dev/
* ──────────────────────────────────────────────────────────── */
/* Hero variants — each service gets its own accent colour but shares layout */
.svc-hero { padding: 88px 0 64px; }
.svc-hero .sec-head { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.02em; max-width: 900px; }
.svc-hero .sec-sub { max-width: 720px; font-size: 17px; line-height: 1.55; margin-top: 18px; }
.svc-hero--done { background: linear-gradient(135deg, #1a0b0f 0%, #2b0d14 100%); }
.svc-hero--auto { background: linear-gradient(135deg, #06262e 0%, #0a3b46 100%); }
.svc-hero--dev { background: linear-gradient(135deg, #15102e 0%, #261843 100%); }
.svc-hero-cta { display: flex; align-items: center; gap: 22px; margin-top: 32px; flex-wrap: wrap; }
.svc-hero-btn { font-size: 16px !important; padding: 16px 30px !important; }
.svc-hero-sla { color: rgba(255,255,255,.7); font-size: 13.5px; font-weight: 500; }
.svc-trust-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.svc-trust-pill {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.10); color: rgba(255,255,255,.92);
border: 1px solid rgba(255,255,255,.18);
padding: 8px 14px; border-radius: 99px;
font-size: 13px; font-weight: 600;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* Timeline (3-day delivery, 2-week automation, 3-step dev) */
.svc-timeline {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
margin-top: 36px;
}
.svc-tl-step {
background: #fff; border: 1px solid var(--gray-200);
border-radius: 16px; padding: 28px 24px;
box-shadow: 0 6px 24px rgba(0,0,0,.04);
position: relative; transition: .2s;
}
.svc-tl-step:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(192,22,42,.10); border-color: rgba(192,22,42,.20); }
.svc-tl-day {
display: inline-block;
background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
color: #fff; padding: 5px 14px; border-radius: 99px;
font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
margin-bottom: 14px;
}
.svc-tl-title { font-size: 20px; font-weight: 800; color: var(--gray-900); margin-bottom: 10px; }
.svc-tl-desc { color: var(--gray-600); font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }
.svc-tl-list { list-style: none; padding: 0; margin: 0; }
.svc-tl-list li {
padding: 6px 0 6px 22px; position: relative;
font-size: 13.5px; color: var(--gray-600);
}
.svc-tl-list li::before {
content: '✓'; position: absolute; left: 0; top: 6px;
color: var(--red); font-weight: 800; font-size: 14px;
}
/* Pricing tiers (3-Day Custom Site) */
.svc-tier-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
margin-top: 36px; align-items: start;
}
.svc-tier {
background: #fff; border: 1px solid var(--gray-200);
border-radius: 18px; padding: 32px 28px;
box-shadow: 0 6px 24px rgba(0,0,0,.04);
transition: .2s; position: relative;
}
.svc-tier:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.08); }
.svc-tier--featured {
background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
border: 2px solid var(--red); transform: scale(1.03);
box-shadow: 0 16px 44px rgba(192,22,42,.12);
}
.svc-tier-badge {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: var(--red); color: #fff;
padding: 6px 18px; border-radius: 99px;
font-size: 11px; font-weight: 800; letter-spacing: .08em;
box-shadow: 0 6px 16px rgba(192,22,42,.30);
}
.svc-tier-name { font-size: 18px; font-weight: 700; color: var(--gray-600); margin-bottom: 12px; }
.svc-tier-price { font-size: 42px; font-weight: 800; color: var(--gray-900); line-height: 1; }
.svc-tier-period { font-size: 13px; color: var(--gray-400); margin-top: 4px; margin-bottom: 22px; }
.svc-tier-feats { list-style: none; padding: 0; margin: 0 0 24px; }
.svc-tier-feats li {
padding: 8px 0; font-size: 14px; color: var(--gray-600); line-height: 1.45;
border-bottom: 1px solid #f5f4f1;
}
.svc-tier-feats li:last-child { border-bottom: none; }
.svc-tier-btn {
display: block; text-align: center;
background: #fff; color: var(--red);
border: 2px solid var(--red);
padding: 12px 18px; border-radius: 10px;
font-weight: 700; text-decoration: none;
transition: .15s;
}
.svc-tier-btn:hover { background: var(--red); color: #fff; }
.svc-tier-btn--featured {
background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
color: #fff; border-color: var(--red);
}
.svc-tier-btn--featured:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(192,22,42,.30); }
.svc-pricing-foot { text-align: center; color: var(--gray-600); margin-top: 32px; font-size: 14px; }
/* Industry grid (Automation page) */
.svc-ind-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
margin-top: 32px;
}
.svc-ind {
background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
padding: 24px 22px; transition: .15s;
}
.svc-ind:hover { border-color: rgba(34, 211, 238, .35); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.svc-ind-icon { font-size: 36px; margin-bottom: 10px; }
.svc-ind-name { font-size: 16px; font-weight: 800; color: var(--gray-900); margin-bottom: 8px; }
.svc-ind-list { font-size: 13.5px; color: var(--gray-600); line-height: 1.5; }
/* Stack pills (Custom Dev page) */
.svc-stack-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
margin-top: 32px;
}
.svc-stack-col {
background: #fff; border: 1px solid var(--gray-200);
border-radius: 14px; padding: 22px;
}
.svc-stack-cat {
font-size: 11px; font-weight: 800; color: var(--red);
letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px;
}
.svc-stack-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-pill {
background: #f5f4f1; color: var(--gray-900);
padding: 6px 12px; border-radius: 99px;
font-size: 13px; font-weight: 600;
border: 1px solid transparent; transition: .15s;
}
.svc-pill:hover { background: #fff; border-color: var(--red); color: var(--red); }
/* Inquiry form */
.svc-form-sec { padding: 64px 0; }
.svc-form-inner { max-width: 780px; }
.svc-form {
background: #fff; border-radius: 18px;
padding: 36px 36px 32px;
border: 1px solid var(--gray-200);
box-shadow: 0 10px 40px rgba(0,0,0,.06);
margin-top: 28px;
}
.svc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.svc-label { display: block; margin-bottom: 16px; }
.svc-label-text { display: block; font-size: 13px; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
.svc-req { color: var(--red); font-weight: 700; }
.svc-opt { color: var(--gray-400); font-weight: 500; font-size: 11.5px; }
.svc-form input[type="text"],
.svc-form input[type="email"],
.svc-form input[type="tel"],
.svc-form select,
.svc-form textarea {
width: 100%; padding: 12px 14px; box-sizing: border-box;
background: #fafafa; border: 1.5px solid var(--gray-200); border-radius: 10px;
font-family: inherit; font-size: 14.5px; color: var(--gray-900);
transition: .15s;
}
.svc-form input:focus, .svc-form select:focus, .svc-form textarea:focus {
outline: none; border-color: var(--red); background: #fff;
box-shadow: 0 0 0 4px rgba(192,22,42,.10);
}
.svc-form textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.svc-form-actions {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
margin-top: 22px; flex-wrap: wrap;
}
.svc-submit {
background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
color: #fff; border: none; padding: 14px 30px; border-radius: 12px;
font-size: 15px; font-weight: 700; cursor: pointer;
transition: .15s; box-shadow: 0 4px 18px rgba(192,22,42,.22);
}
.svc-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(192,22,42,.32); }
.svc-submit:disabled { opacity: .6; cursor: not-allowed; }
.svc-trust { font-size: 13px; color: var(--gray-600); }
.svc-result {
margin-top: 16px; padding: 12px 16px; border-radius: 10px;
font-size: 14px; display: none;
}
.svc-result.is-info { display: block; background: #fff7e6; color: #a85b00; border: 1px solid #f3d690; }
.svc-result.is-ok { display: block; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.svc-result.is-error { display: block; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
/* Success card replaces the form on successful submission */
.svc-success {
background: linear-gradient(180deg, #fff 0%, #ecfdf5 100%);
border: 2px solid #34d399; border-radius: 18px;
padding: 48px 36px; text-align: center;
box-shadow: 0 10px 40px rgba(52, 211, 153, .14);
animation: msSvcSuccess .4s ease-out;
}
@keyframes msSvcSuccess { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.svc-success-icon { font-size: 56px; margin-bottom: 14px; }
.svc-success-title { font-size: 26px; font-weight: 800; color: #047857; margin: 0 0 16px; }
.svc-success-text { color: var(--gray-600); font-size: 15px; line-height: 1.6; max-width: 520px; margin: 0 auto 18px; }
.svc-success-foot { color: var(--gray-400); font-size: 13px; }
.svc-success-foot a { color: var(--red); text-decoration: none; font-weight: 600; }
.svc-success-foot a:hover { text-decoration: underline; }
/* ────────────────────────────────────────────────────────────
* HOME — "Or let us do it for you" bridge section
* ──────────────────────────────────────────────────────────── */
.ms-orletus-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
margin-top: 36px;
}
.ms-orletus-card {
background: #fff; border: 1px solid var(--gray-200);
border-radius: 16px; padding: 28px 26px;
text-decoration: none; color: inherit;
transition: .2s;
position: relative; overflow: hidden;
display: block;
}
.ms-orletus-card::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(192,22,42,0) 0%, rgba(192,22,42,.06) 100%);
opacity: 0; transition: .2s;
}
.ms-orletus-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(192,22,42,.12); border-color: var(--red); }
.ms-orletus-card:hover::after { opacity: 1; }
.ms-orletus-card--mid {
background: linear-gradient(180deg, #fff 0%, #fff8f5 100%);
border-color: rgba(192,22,42,.30);
}
.ms-orletus-icon { font-size: 36px; margin-bottom: 12px; position: relative; z-index: 1; }
.ms-orletus-name { font-size: 19px; font-weight: 800; color: var(--gray-900); margin-bottom: 10px; position: relative; z-index: 1; }
.ms-orletus-desc { font-size: 14.5px; color: var(--gray-600); line-height: 1.55; margin-bottom: 18px; position: relative; z-index: 1; }
.ms-orletus-cta { font-size: 14px; font-weight: 700; color: var(--red); position: relative; z-index: 1; }
/* Mira AI handover hint (below the chat input on home) */
.ai-handover-hint {
margin-top: 14px; font-size: 12.5px; color: var(--gray-400);
text-align: center; line-height: 1.5;
}
.ai-handover-hint a { color: var(--red); text-decoration: none; font-weight: 600; }
.ai-handover-hint a:hover { text-decoration: underline; }
/* Google sign-in container — center the GSI-rendered button cleanly */
.su-google-wrap {
display: flex; justify-content: center; margin-bottom: 6px; min-height: 44px;
}
.su-google-wrap .g_id_signin { display: inline-block; }
/* ────────────────────────────────────────────────────────────
* RESPONSIVE (≤960px and ≤640px) for service pages + home bridge
* ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
.svc-timeline,
.svc-tier-grid,
.svc-ind-grid,
.svc-stack-grid,
.ms-orletus-grid { grid-template-columns: 1fr; gap: 16px; }
.svc-tier--featured { transform: none; }
.svc-form { padding: 28px 22px; }
.svc-form-row { grid-template-columns: 1fr; gap: 0; }
.svc-hero { padding: 56px 0 44px; }
.svc-hero-cta { gap: 14px; }
.svc-form-actions { flex-direction: column; align-items: stretch; }
.svc-form-actions .svc-submit { width: 100%; }
.svc-form-actions .svc-trust { text-align: center; }
}
@media (max-width: 640px) {
.svc-success { padding: 36px 22px; }
.svc-success-title { font-size: 22px; }
.svc-tier { padding: 26px 22px; }
.svc-tier-price { font-size: 36px; }
}
/* ════════════════════════════════════════════════════════════
* SPLIT HERO — left = pitch, right = intake form card
* Used on /done-for-you/, /automation/, /custom-dev/
* The hero is always 100vh on desktop (form sits above the fold).
* ════════════════════════════════════════════════════════════ */
.svc-hero--split {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
padding: 96px 0 56px;
overflow: hidden;
background: linear-gradient(135deg, #1a0b0f 0%, #2b0d14 100%);
}
.svc-hero--split.svc-hero--done { background: linear-gradient(135deg, #1a0b0f 0%, #2b0d14 100%); }
.svc-hero--split.svc-hero--auto { background: linear-gradient(135deg, #06262e 0%, #0a3b46 100%); }
.svc-hero--split.svc-hero--dev { background: linear-gradient(135deg, #15102e 0%, #261843 100%); }
/* Background image layer — wired per-page via inline style or via #svc-hero-bg-* rules */
.svc-hero-bg {
position: absolute; inset: 0;
background-position: center; background-size: cover; background-repeat: no-repeat;
opacity: .55;
z-index: 0;
}
.svc-hero--done .svc-hero-bg { background-image: url('hero/svc-done-for-you.webp'); }
.svc-hero--auto .svc-hero-bg { background-image: url('hero/svc-automation.webp'); }
.svc-hero--dev .svc-hero-bg { background-image: url('hero/svc-custom-dev.webp'); }
/* Gradient scrim — fade the bg so text on the LEFT side stays readable */
.svc-hero-scrim {
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.05) 100%),
linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%);
z-index: 1;
}
.svc-hero-grid {
position: relative; z-index: 2;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
width: 100%;
}
.svc-hero-left { color: #fff; padding: 8px 0; }
.svc-hero-left .sec-head { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; margin: 14px 0 18px; letter-spacing: -0.02em; max-width: 640px; }
.svc-hero-left .sec-sub { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; max-width: 580px; margin-bottom: 26px; }
.svc-hero-left .sec-eyebrow { display: inline-block; padding: 6px 14px; background: rgba(255,255,255,.10); border-radius: 99px; font-weight: 800; letter-spacing: .08em; font-size: 11.5px; }
.svc-hero-scroll {
display: inline-block; margin-top: 26px;
color: rgba(255,255,255,.75); text-decoration: none;
font-size: 14px; font-weight: 600;
border-bottom: 1px dashed rgba(255,255,255,.30);
padding-bottom: 2px;
transition: .15s;
}
.svc-hero-scroll:hover { color: #fff; border-color: rgba(255,255,255,.65); }
/* Form card on the right */
.svc-hero-right {
position: relative; z-index: 2;
width: 100%;
}
.svc-hero-form-card {
background: #fff;
border-radius: 18px;
padding: 26px 26px 22px;
box-shadow: 0 24px 60px rgba(0,0,0,.32), 0 6px 18px rgba(0,0,0,.18);
max-width: 520px;
margin-left: auto;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.svc-hero-form-head { margin-bottom: 14px; }
.svc-hero-form-head h2 { font-size: 22px; font-weight: 800; color: var(--gray-900); margin: 0 0 6px; line-height: 1.2; }
.svc-hero-form-head p { color: var(--gray-600); font-size: 13.5px; margin: 0; line-height: 1.45; }
/* Compact form variant for inside the hero card — smaller spacing, no outer section padding */
.svc-form--hero { background: transparent; border: none; box-shadow: none; padding: 0; margin-top: 0; }
.svc-form--hero .svc-label { margin-bottom: 11px; }
.svc-form--hero .svc-label-text { font-size: 12px; margin-bottom: 4px; }
.svc-form--hero input[type="text"],
.svc-form--hero input[type="email"],
.svc-form--hero input[type="tel"],
.svc-form--hero select,
.svc-form--hero textarea { padding: 9px 11px; font-size: 13.5px; border-radius: 8px; }
.svc-form--hero textarea { min-height: 70px; }
.svc-form--hero .svc-form-row { gap: 10px; margin-bottom: 11px; }
.svc-form--hero .svc-form-actions { margin-top: 14px; gap: 10px; }
.svc-form--hero .svc-submit { padding: 11px 22px; font-size: 14px; border-radius: 10px; }
.svc-form--hero .svc-trust { font-size: 11.5px; }
.svc-form--hero .svc-result { margin-top: 10px; padding: 9px 12px; font-size: 13px; }
/* Custom scrollbar inside the form card (avoid ugly default on hover) */
.svc-hero-form-card::-webkit-scrollbar { width: 8px; }
.svc-hero-form-card::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 99px; }
/* ════════════════════════════════════════════════════════════
* 100vh CONTACT — make /contact-us/ hero/form fit the screen
* ════════════════════════════════════════════════════════════ */
.ct-section {
min-height: 100vh;
min-height: 100svh;
display: flex; align-items: center;
}
/* ════════════════════════════════════════════════════════════
* /my/ ACCOUNT — compact layout (fits one screen)
* ════════════════════════════════════════════════════════════ */
.my-section { min-height: 0; padding: 56px 0 48px; }
.my-section .ms-sec-inner { max-width: 1180px; }
.my-hero {
display: flex; align-items: center; gap: 18px;
margin-bottom: 26px;
}
.my-avatar {
width: 64px; height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 26px; font-weight: 800;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(192,22,42,.28);
position: relative;
}
.my-avatar::after {
content: ''; position: absolute; bottom: 2px; right: 2px;
width: 12px; height: 12px; border-radius: 50%;
background: #16a34a; border: 2px solid #fff;
}
.my-avatar span { display: block; line-height: 1; }
.my-hero-text { flex: 1; min-width: 0; }
.my-hero-text .sec-eyebrow { font-size: 11px; margin: 0 0 4px; }
.my-title { font-size: 26px; font-weight: 800; margin: 0 0 4px; line-height: 1.1; color: var(--gray-900); }
.my-sub { font-size: 13.5px; color: var(--gray-600); margin: 0; }
.my-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.my-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.my-card-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #f1efea; }
.my-card-ico { font-size: 22px; }
.my-card-h h3 { font-size: 15px; font-weight: 700; color: var(--gray-900); margin: 0; }
.my-info-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13.5px; }
.my-info-row span { color: var(--gray-600); }
.my-info-row strong { color: var(--gray-900); font-weight: 600; text-align: right; }
.my-link { display: inline-block; margin-top: 10px; color: var(--red); font-weight: 700; font-size: 13px; text-decoration: none; }
.my-link:hover { text-decoration: underline; }
.my-cta {
display: inline-block; margin-top: 10px;
padding: 9px 16px; border-radius: 10px;
background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
color: #fff; font-weight: 700; font-size: 13px;
text-decoration: none;
}
.my-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(192,22,42,.28); }
.my-plan-badge { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.my-plan-badge.free { background: #f5f4f1; color: var(--gray-600); }
.my-plan-badge.pro { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; }
.my-plan-desc { font-size: 13px; color: var(--gray-600); margin: 0 0 8px; line-height: 1.5; }
.my-empty { font-size: 13px; color: var(--gray-600); margin: 0 0 10px; line-height: 1.5; }
.my-action {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 10px;
text-decoration: none; color: inherit;
transition: .12s;
margin: 0 -8px;
}
.my-action:hover { background: #f5f4f1; }
.my-action-ico { font-size: 22px; }
.my-action-t { font-weight: 700; font-size: 13.5px; color: var(--gray-900); line-height: 1.2; }
.my-action-d { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.my-action-logout .my-action-t { color: var(--red); }
.my-site-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1efea; font-size: 13px; }
.my-site-row:last-child { border-bottom: none; }
.my-site-name { font-weight: 700; color: var(--gray-900); }
.my-site-url { display: block; color: var(--gray-600); font-size: 12px; text-decoration: none; }
.my-site-url:hover { color: var(--red); }
.my-site-plan { padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.my-site-plan.free { background: #f5f4f1; color: var(--gray-600); }
.my-site-plan.pro { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; }
/* ════════════════════════════════════════════════════════════
* RESPONSIVE for split hero + /my/
* ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.svc-hero-grid { gap: 36px; }
.svc-hero-form-card { padding: 22px 22px 18px; }
}
@media (max-width: 960px) {
.svc-hero--split {
min-height: 0;
padding: 80px 0 48px;
}
.svc-hero-grid { grid-template-columns: 1fr; gap: 28px; }
.svc-hero-form-card { max-width: 100%; margin: 0; max-height: none; }
.svc-hero-left .sec-head { font-size: clamp(28px, 6vw, 40px); }
.svc-form--hero .svc-form-row { grid-template-columns: 1fr; gap: 0; }
.svc-hero-scrim { background:
linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.55) 100%);
}
.my-section { padding: 36px 0 32px; }
.my-hero { flex-wrap: wrap; gap: 14px; }
.my-avatar { width: 54px; height: 54px; font-size: 22px; }
.my-title { font-size: 22px; }
.my-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
.svc-hero--split { padding: 70px 0 36px; }
.svc-hero-form-card { padding: 18px 16px 14px; border-radius: 14px; }
.svc-hero-form-head h2 { font-size: 19px; }
.svc-form--hero .svc-trust { display: block; }
.svc-form--hero .svc-form-actions { flex-direction: column; align-items: stretch; }
.svc-form--hero .svc-submit { width: 100%; }
}
/* ============================================================
* Frontend PJAX — small floating spinner badge (top-right)
*
* The previous skeleton-wave was too intrusive; the OS "progress"
* cursor was too generic. Now the page stays still and a small
* SVG spinner appears in the top-right corner — the way a real
* inspector might check their notebook before stepping forward.
* ============================================================ */
html.ms-pjax-busy::after {
content: "";
position: fixed;
top: 18px; right: 18px;
width: 28px; height: 28px;
border-radius: 50%;
border: 2px solid rgba(245,200,120,.25);
border-top-color: #f5c878;
animation: ms-pjax-spin .85s linear infinite;
z-index: 99999;
pointer-events: none;
box-shadow: 0 4px 18px rgba(0,0,0,.45);
background: rgba(20,18,16,.55);
}
@keyframes ms-pjax-spin {
to { transform: rotate(360deg); }
}
/* ============================================================
* /my/* — user-area shared classes (extracted from inline styles)
* ============================================================ */
.my-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.my-form-grid.is-half { grid-template-columns: 1fr 1fr; }
.my-form-grid .my-col-full { grid-column: 1 / -1; }
.my-field-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-600, #6b5f54); margin-bottom: 5px; }
.my-field-input,
.my-field-textarea,
.my-field-select {
width: 100%;
padding: 9px 12px;
border: 1px solid rgba(0,0,0,.14);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.my-field-input:focus,
.my-field-textarea:focus,
.my-field-select:focus {
outline: none;
border-color: #c0162a;
box-shadow: 0 0 0 3px rgba(192,22,42,.10);
}
.my-field-textarea { padding: 11px 13px; line-height: 1.55; resize: vertical; min-height: 120px; }
.my-field-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.my-field-hint { font-size: 12px; color: var(--gray-600, #6b5f54); margin: 4px 0 0; }
.my-form-section { padding: 22px 26px; margin-bottom: 18px; }
.my-form-section h3 { margin: 0 0 12px; font-size: 13.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-700, #4d4239); }
.my-form-section p.section-intro { color: var(--gray-600, #6b5f54); font-size: 13px; margin: -6px 0 14px; }
.my-status-pill {
display: inline-flex; align-items: center;
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 5px 11px; border-radius: 999px; color: #fff;
}
.my-status-pill--draft { background: #6b5f54; }
.my-status-pill--submitted { background: #d97a1c; }
.my-status-pill--under_review { background: #2f81f7; }
.my-status-pill--approved,
.my-status-pill--open { background: #3fb950; }
.my-status-pill--rejected { background: #c0162a; }
.my-status-pill--closed { background: #6b5f54; }
.my-status-pill--judged { background: #8a4fff; }
.my-pack-card {
position: relative;
width: 100%; padding: 24px 18px; text-align: center;
border: 1px solid rgba(0,0,0,.10); border-radius: 14px;
background: #fff; cursor: pointer;
transition: transform .15s, box-shadow .2s, border-color .15s;
}
.my-pack-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.10); border-color: rgba(192,22,42,.30); }
.my-pack-card--bonus { border-color: #c0162a; }
.my-pack-card--bonus::after {
content: 'BEST VALUE';
position: absolute; top: -10px; right: 14px;
font-size: 9px; font-weight: 800; letter-spacing: .12em;
color: #fff; background: #c0162a; padding: 4px 8px; border-radius: 4px;
}
.my-pack-label { font-size: 12px; color: var(--gray-600, #6b5f54); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 6px; }
.my-pack-price { font-size: 30px; font-weight: 800; color: #1a1410; font-variant-numeric: tabular-nums; }
.my-pack-bonus { font-size: 12px; color: #c0162a; font-weight: 700; margin-top: 6px; }
.my-pack-credit { font-size: 11px; color: var(--gray-600, #6b5f54); margin-top: 8px; }
.my-balance-hero {
text-align: center; padding: 30px 24px;
background: linear-gradient(135deg, rgba(192,22,42,.04) 0%, rgba(238,153,51,.04) 100%);
border-radius: 14px;
}
.my-balance-label { font-size: 13px; color: var(--gray-600, #6b5f54); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.my-balance-value { font-size: 40px; font-weight: 800; color: #1a1410; font-variant-numeric: tabular-nums; margin-top: 6px; }
.my-cases-list { display: flex; flex-direction: column; gap: 10px; }
.my-case-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.my-case-row-main { flex: 1; min-width: 0; }
.my-case-row-title { font-size: 16px; font-weight: 700; color: #1a1410; margin-bottom: 3px; }
.my-case-row-slug { font-size: 11.5px; color: var(--gray-600, #6b5f54); font-family: ui-monospace, monospace; }
.my-case-row-diff { font-size: 11px; font-weight: 600; color: var(--gray-600, #6b5f54); text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
.my-notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; border: 1px solid; }
.my-notice--success { background: rgba(63,185,80,.10); border-color: rgba(63,185,80,.30); color: #1a4d24; }
.my-notice--error { background: rgba(192,22,42,.08); border-color: rgba(192,22,42,.20); color: #1a1410; }
.my-notice--warning { background: rgba(217,122,28,.10); border-color: rgba(217,122,28,.30); color: #5a3a14; }
.my-notice--danger { background: rgba(192,22,42,.08); border-color: rgba(192,22,42,.20); color: #1a1410; }
.my-back-link { font-size: 13px; color: var(--gray-600, #6b5f54); text-decoration: none; }
.my-back-link:hover { color: #c0162a; }
.my-rep-row {
position: relative;
border: 1px solid rgba(0,0,0,.10);
border-radius: 10px;
padding: 14px;
margin-bottom: 10px;
background: rgba(0,0,0,.02);
}
.my-rep-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.my-rep-row .my-field-input,
.my-rep-row .my-field-textarea { font-size: 13.5px; padding: 8px 12px; border-radius: 7px; }
.my-rep-row .my-field-textarea { min-height: 60px; }
.my-rep-remove {
position: absolute; top: 8px; right: 10px;
background: transparent; border: 0; color: #c0162a; cursor: pointer;
font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 5px;
transition: background .12s;
}
.my-rep-remove:hover { background: rgba(192,22,42,.10); }
.my-rep-add { background: none; border: 0; color: #c0162a; cursor: pointer; font-weight: 700; padding: 8px 0; font-size: 13.5px; }
.my-rep-add:hover { color: #8a0e1f; }
.my-form-section--danger { border: 2px solid rgba(192,22,42,.18); }
.my-form-section--danger h3 { color: #c0162a; }
.my-fee-bar {
display: flex; gap: 10px; align-items: center; justify-content: space-between;
background: rgba(0,0,0,.04); padding: 14px 18px; border-radius: 10px; margin-bottom: 18px;
font-size: 13px; color: var(--gray-700, #4d4239);
}
.my-fee-credits { color: #3fb950; font-weight: 700; }
.my-fee-topup-link { color: #c0162a; font-weight: 600; }
.my-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.my-cta--ghost { background: linear-gradient(135deg,#444 0%,#222 100%); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.my-view-status-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.my-request-row { padding: 16px 20px; margin-bottom: 10px; }
.my-request-row-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.my-request-row-head strong { font-size: 15px; color: #1a1410; }
.my-request-row-msg { color: var(--gray-600, #6b5f54); font-size: 13px; margin: 0 0 6px; line-height: 1.5; }
.my-request-row-meta { font-size: 11.5px; color: var(--gray-600, #6b5f54); }
/* Service-inquiry status pills */
.my-status-pill--new { background: #6b5f54; }
.my-status-pill--contacted { background: #d97a1c; }
.my-status-pill--quoted { background: #2f81f7; }
.my-status-pill--won { background: #3fb950; }
.my-status-pill--lost { background: #c0162a; }