1472 lines
51 KiB
CSS
1472 lines
51 KiB
CSS
:root {
|
|
--ink: #dfe2ee;
|
|
--muted: #b9cacb;
|
|
--bg: #0f131c;
|
|
--panel: #181c24;
|
|
--line: #262a33;
|
|
--blue: #00dce6;
|
|
--green: #60ff98;
|
|
|
|
/* Stitch Tokens */
|
|
--surface: #0f131c;
|
|
--surface-container-lowest: #0a0e16;
|
|
--surface-container-low: #181c24;
|
|
--surface-container: #1c2028;
|
|
--surface-container-high: #262a33;
|
|
--surface-container-highest: #31353e;
|
|
--surface-bright: #353942;
|
|
--on-surface: #dfe2ee;
|
|
--on-surface-variant: #b9cacb;
|
|
--outline: #849495;
|
|
--outline-variant: #3a494b;
|
|
--primary-container: #00f2fe;
|
|
--primary-fixed: #6ff6ff;
|
|
--primary-fixed-dim: #00dce6;
|
|
--on-primary-container: #006a70;
|
|
--secondary-fixed: #60ff98;
|
|
--secondary-fixed-dim: #00e478;
|
|
--secondary-container: #34ff8c;
|
|
--tertiary-fixed-dim: #7bd0ff;
|
|
--tertiary-container: #b2e1ff;
|
|
--error: #ffb4ab;
|
|
--error-container: #93000a;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html { background: var(--surface); color: var(--on-surface); }
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--surface);
|
|
color: var(--on-surface);
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
min-height: 100vh;
|
|
}
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
/* Stitch Account Portal Telemetry Styles */
|
|
.telemetry-grid-bg {
|
|
background-image:
|
|
linear-gradient(to right, rgba(31, 42, 63, 0.35) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(31, 42, 63, 0.35) 1px, transparent 1px);
|
|
background-size: 32px 32px;
|
|
}
|
|
|
|
.glass-card {
|
|
background: linear-gradient(135deg, rgba(15, 20, 32, 0.85) 0%, rgba(10, 14, 23, 0.95) 100%);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.glow-border-cyan:hover {
|
|
box-shadow: 0 0 20px -3px rgba(0, 242, 254, 0.25);
|
|
border-color: rgba(0, 242, 254, 0.5);
|
|
}
|
|
|
|
/* Top Bar / Site Header (Stitch Specification) */
|
|
.site-header {
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 50;
|
|
background: rgba(10, 14, 22, 0.88);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(58, 73, 75, 0.35);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.site-header-inner {
|
|
max-width: 1340px;
|
|
height: 76px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.site-header-inner {
|
|
padding: 0 1rem;
|
|
height: 70px;
|
|
}
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
.brand-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.brand-icon-box {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 0.75rem;
|
|
background: linear-gradient(135deg, #00f2fe 0%, #00dce6 50%, #b2e1ff 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 18px rgba(0, 242, 254, 0.45);
|
|
}
|
|
|
|
.brand-icon-box .brand-icon {
|
|
color: #00373a;
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.brand-text-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.brand-title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: #dfe2ee;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.brand-subtitle {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
color: #00f2fe;
|
|
}
|
|
|
|
.header-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.header-nav {
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1040px) {
|
|
.header-nav {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.nav-link {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #b9cacb;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
padding: 4px 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: #dfe2ee;
|
|
}
|
|
|
|
.nav-link.active {
|
|
color: #00f2fe;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-link.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -6px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: #00f2fe;
|
|
border-radius: 9999px;
|
|
box-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.1rem;
|
|
}
|
|
|
|
.telemetry-grid-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0.95rem;
|
|
border-radius: 9999px;
|
|
background: #181c24;
|
|
border: 1px solid rgba(58, 73, 75, 0.45);
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.telemetry-grid-pill {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.grid-dot-pulse {
|
|
position: relative;
|
|
display: flex;
|
|
height: 8px;
|
|
width: 8px;
|
|
}
|
|
|
|
.grid-dot-pulse .ping {
|
|
animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
position: absolute;
|
|
display: inline-flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
background-color: #60ff98;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.grid-dot-pulse .core {
|
|
position: relative;
|
|
display: inline-flex;
|
|
border-radius: 50%;
|
|
height: 8px;
|
|
width: 8px;
|
|
background-color: #00e478;
|
|
}
|
|
|
|
.header-auth-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.btn-signin {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.55rem 1.15rem;
|
|
border-radius: 0.65rem;
|
|
background: #181c24;
|
|
border: 1px solid rgba(58, 73, 75, 0.45);
|
|
color: #dfe2ee;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-signin:hover {
|
|
background: #262a33;
|
|
color: #00f2fe;
|
|
border-color: rgba(0, 242, 254, 0.35);
|
|
}
|
|
|
|
.btn-getstarted {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.6rem 1.35rem;
|
|
border-radius: 0.65rem;
|
|
background: linear-gradient(90deg, #00f2fe 0%, #6ff6ff 100%);
|
|
color: #00373a;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
box-shadow: 0 2px 14px rgba(0, 242, 254, 0.35);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-getstarted:hover {
|
|
box-shadow: 0 0 24px rgba(0, 242, 254, 0.55);
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
.btn-avatar-circle {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: #262a33;
|
|
color: #b9cacb;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
border: 1px solid rgba(58, 73, 75, 0.4);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-avatar-circle:hover {
|
|
border-color: #00f2fe;
|
|
color: #00f2fe;
|
|
}
|
|
|
|
.btn-account-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
background: #262a33;
|
|
border: 1px solid rgba(0, 242, 254, 0.4);
|
|
color: #00f2fe;
|
|
text-decoration: none;
|
|
box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
|
|
}
|
|
|
|
.site-header nav { flex-wrap: nowrap; }
|
|
.button { background: var(--blue); border: 0; border-radius: 6px; color: white; cursor: pointer; display: inline-flex; font-size: 15px; font-weight: 700; justify-content: center; padding: 13px 18px; }
|
|
.button:hover { filter: brightness(1.12); }
|
|
.button:disabled { cursor: wait; opacity: .6; }
|
|
.button-small { font-size: 13px; padding: 9px 13px; }
|
|
main { margin: 0 auto; max-width: 1240px; padding: 72px 28px 100px; }
|
|
main:has(.flagship-landing), main:has(.flagship-page) { max-width: 100%; padding: 0; }
|
|
.hero { max-width: 780px; }
|
|
.flagship-hero { align-items: center; background: linear-gradient(90deg, rgba(10,15,20,.96) 0%, rgba(10,15,20,.78) 48%, rgba(10,15,20,.28)), url('/images/motorsignal-hero.jpg') center/cover; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 48px; grid-template-columns: 1.05fr .95fr; min-height: 560px; overflow: hidden; padding: 72px; }
|
|
.hero-copy { max-width: 720px; }
|
|
.hero-copy h1 { font-size: clamp(50px, 7vw, 92px); }
|
|
.cockpit-card { align-self: end; background: rgba(9,18,28,.8); border: 1px solid #2e697c; box-shadow: 0 0 40px rgba(0,196,255,.12); padding: 28px; }
|
|
.cockpit-label, .cockpit-footer { color: #7dd3fc; font: 12px ui-monospace, SFMono-Regular, monospace; letter-spacing: .12em; }
|
|
.cockpit-speed { color: #effcff; font-size: clamp(86px, 11vw, 150px); font-weight: 800; line-height: .9; margin: 34px 0; }
|
|
.cockpit-speed span { color: #67e8f9; font-size: 16px; margin-left: 10px; }
|
|
.cockpit-line, .cockpit-footer { display: flex; gap: 14px; justify-content: space-between; }
|
|
.cockpit-line { border-bottom: 1px solid #274454; border-top: 1px solid #274454; color: var(--muted); font-size: 12px; padding: 16px 0; }
|
|
.cockpit-line strong { color: #f0fdf4; font-size: 24px; }
|
|
.telemetry-bars { align-items: end; display: flex; gap: 8px; height: 90px; padding: 18px 0; }
|
|
.telemetry-bars i { background: #22d3ee; display: block; flex: 1; height: 35%; opacity: .8; }
|
|
.telemetry-bars i:nth-child(2n) { height: 75%; background: #34d399; }.telemetry-bars i:nth-child(3n) { height: 55%; }
|
|
.cockpit-footer { padding-top: 12px; }.signal-live { color: #4ade80; }
|
|
.metric-ribbon { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px 0 90px; padding: 22px 0; }
|
|
.metric-ribbon div { border-left: 1px solid var(--line); padding-left: 24px; }.metric-ribbon div:first-child { border-left: 0; }.metric-ribbon strong, .metric-ribbon span { display: block; }.metric-ribbon strong { font-size: 30px; }.metric-ribbon span { color: var(--muted); font-size: 12px; margin-top: 5px; text-transform: uppercase; }
|
|
.section-heading, .public-intro { max-width: 760px; }.section-heading h2 { font-size: 48px; margin: 14px 0 10px; }.section-heading p, .public-intro p { font-size: 18px; }
|
|
.feature-grid, .club-pillars, .architecture-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 36px; }.feature-panel, .club-pillars article, .architecture-grid article, .side-panel { background: #111a22; border: 1px solid var(--line); border-radius: 8px; padding: 28px; }.feature-panel span, .club-pillars span, .architecture-grid article > span { color: #67e8f9; font: 12px ui-monospace, monospace; }.feature-panel h3 { font-size: 24px; line-height: 1.15; margin: 50px 0 8px; }.feature-panel p, .club-pillars p, .architecture-grid p { color: var(--muted); }.feature-green { border-top: 3px solid #34d399; }.feature-blue { border-top: 3px solid #60a5fa; }.conversion-band { align-items: center; background: #0c2534; border: 1px solid #155e75; display: flex; justify-content: space-between; margin-top: 90px; padding: 30px; }.conversion-band h2 { margin: 10px 0 0; }
|
|
.public-page { max-width: 1180px; margin: auto; }.public-intro h1 { font-size: clamp(48px, 7vw, 78px); margin: 18px 0 12px; }.architecture-grid { grid-template-columns: repeat(2, 1fr); margin-top: 54px; }.architecture-grid article { min-height: 300px; }.architecture-grid h2, .club-pillars h2 { font-size: 25px; margin: 50px 0 10px; }.mini-readout, .status-line { border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; margin-top: 30px; padding-top: 16px; }.mini-readout strong { color: #e0f2fe; font-size: 34px; }.mini-readout span, .status-line { font: 11px ui-monospace, monospace; }.status-line b { color: #4ade80; }.trace-lines { border-bottom: 2px solid #155e75; display: flex; gap: 8px; height: 70px; margin-top: 30px; transform: skewY(-12deg); }.trace-lines i { background: #22d3ee; flex: 1; height: 60%; }.trace-lines i:nth-child(2) { height: 90%; background: #34d399; }.trace-lines i:nth-child(3) { height: 35%; }
|
|
.ride-hero-panel { align-items: center; background: #0d1a25; border: 1px solid #1e4d64; display: grid; gap: 70px; grid-template-columns: 1fr 1fr; margin: 54px 0; padding: 46px; }.ride-hero-panel h2 { font-size: 38px; margin: 14px 0; }.radar { aspect-ratio: 1; background: radial-gradient(circle, rgba(34,211,238,.18), transparent 62%), repeating-radial-gradient(circle, transparent 0 35px, #214556 36px 37px); border: 1px solid #28748a; border-radius: 50%; max-width: 370px; position: relative; }.radar-ring { border: 1px solid #28748a; border-radius: 50%; inset: 25%; position: absolute; }.r2 { inset: 42%; }.radar-center { color: #67e8f9; left: 42%; position: absolute; top: 46%; }.rider-dot { background: #4ade80; border: 4px solid #0d1a25; border-radius: 50%; height: 16px; position: absolute; width: 16px; }.one { left: 22%; top: 28%; }.two { right: 24%; top: 20%; background: #facc15; }.three { bottom: 22%; left: 30%; }.four { bottom: 28%; right: 20%; }.alert-strip { background: #3a2c0a; border: 1px solid #854d0e; color: #fde68a; font: 12px ui-monospace, monospace; margin-top: 24px; padding: 12px; }.public-split { display: grid; gap: 24px; grid-template-columns: 1.5fr .8fr; margin-top: 54px; }.public-split > div > h2 { font-size: 30px; }.side-panel { align-self: start; }.side-panel h2 { font-size: 28px; margin: 18px 0 8px; }
|
|
.eyebrow { color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
|
|
h1 { font-size: clamp(42px, 7vw, 82px); line-height: .98; margin: 18px 0; max-width: 850px; }
|
|
h2 { font-size: 32px; margin: 0 0 14px; }
|
|
p { color: var(--muted); line-height: 1.65; }
|
|
.hero p { font-size: 18px; max-width: 650px; }
|
|
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
|
.button-secondary { background: transparent; border: 1px solid var(--line); }
|
|
.section-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 92px; }
|
|
.section-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; }
|
|
.panel { background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
|
|
.panel h3 { margin: 0 0 8px; }
|
|
.panel h2 { font-size: 24px; }
|
|
.panel p { font-size: 14px; margin: 0; }
|
|
.panel .button { margin-top: 20px; }
|
|
.content-page { max-width: 900px; margin: auto; }
|
|
.content-page > p { font-size: 18px; max-width: 700px; }
|
|
.account-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; }
|
|
.companion-list { display: grid; gap: 16px; margin-top: 36px; }
|
|
.legal-page { max-width: 760px; }
|
|
.legal-page h2 { font-size: 22px; margin-top: 36px; }
|
|
.site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 24px 28px 40px; font-size: 13px; }
|
|
.auth-page { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); margin: auto; max-width: 980px; align-items: center; }
|
|
.auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 28px; }
|
|
.auth-form { display: grid; gap: 16px; margin-top: 24px; }
|
|
label { color: var(--muted); display: grid; font-size: 13px; gap: 7px; }
|
|
input { background: #0c131a; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font: inherit; padding: 12px; }
|
|
input:focus { border-color: var(--blue); outline: 2px solid color-mix(in srgb, var(--blue) 35%, transparent); }
|
|
.form-error { color: #ff8e8e; font-size: 13px; margin: 0; }
|
|
.muted-link { color: var(--blue); font-size: 14px; }
|
|
.recovery-stack { display: grid; gap: 8px; }
|
|
.form-divider { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; margin-top: 12px; padding-top: 20px; }
|
|
.form-message { color: var(--green); font-size: 13px; }
|
|
.audit-list { display: grid; gap: 10px; margin-top: 32px; }
|
|
.audit-row { align-items: center; display: flex; gap: 20px; justify-content: space-between; padding: 18px 20px; }
|
|
.audit-row p { font-size: 13px; margin: 5px 0 0; }
|
|
.audit-row time { color: var(--muted); font-size: 12px; white-space: nowrap; }
|
|
.admin-page { max-width: 1440px; margin: auto; }
|
|
.admin-title-row { align-items: end; border-bottom: 1px solid var(--line); display: flex; gap: 24px; justify-content: space-between; padding-bottom: 28px; }
|
|
.admin-title-row h1 { font-size: clamp(48px, 7vw, 76px); margin: 16px 0 10px; }
|
|
.admin-title-row h1 span { color: #22d3ee; }
|
|
.admin-title-row p { margin: 0; }
|
|
.admin-environment { align-items: center; color: var(--muted); display: flex; font: 11px ui-monospace, SFMono-Regular, monospace; gap: 14px; text-transform: uppercase; }
|
|
.admin-environment strong { background: #082f49; border: 1px solid #155e75; color: #67e8f9; padding: 5px 8px; }
|
|
.admin-kpis { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin: 24px 0; }
|
|
.admin-kpis article { background: #111a26; border: 1px solid #26364a; border-radius: 8px; display: grid; gap: 8px; padding: 18px; }
|
|
.admin-kpis span, .admin-kpis small { color: var(--muted); font-size: 12px; }
|
|
.admin-kpis strong { font-size: 30px; }
|
|
.health-good { color: var(--green); }
|
|
.admin-console { margin-top: 24px; padding: 0; }
|
|
.admin-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 8px 12px 0; }
|
|
.admin-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
|
|
.admin-tab { align-items: center; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; display: flex; font: inherit; gap: 8px; padding: 14px 16px; text-transform: capitalize; }
|
|
.admin-tab small { background: #1e293b; border-radius: 10px; color: #67e8f9; font-size: 11px; padding: 2px 6px; }
|
|
.admin-tab.active { border-bottom-color: var(--blue); color: var(--ink); }
|
|
.admin-create-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 20px 8px; }
|
|
.admin-create-heading span { color: var(--muted); font-size: 12px; }
|
|
.admin-create-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 20px 20px; }
|
|
.admin-create-form input, .admin-create-form select { flex: 1 1 150px; min-width: 130px; }
|
|
.admin-table-wrap { padding: 0 12px 12px; }
|
|
.admin-table-wrap { overflow-x: auto; }
|
|
.admin-table { border-collapse: collapse; min-width: 700px; width: 100%; }
|
|
.admin-table th, .admin-table td { border-bottom: 1px solid var(--line); padding: 14px 10px; text-align: left; }
|
|
.admin-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
|
|
.admin-table td { font-size: 13px; }
|
|
.admin-table td code, .audit-event code { color: var(--muted); display: block; font: 11px ui-monospace, SFMono-Regular, monospace; margin-top: 5px; }
|
|
.status-badge { border: 1px solid; border-radius: 10px; display: inline-block; font-size: 11px; padding: 3px 8px; text-transform: capitalize; }
|
|
.status-badge.active { background: #052e23; border-color: #166534; color: #4ade80; }
|
|
.status-badge.inactive { background: #3f1d25; border-color: #7f1d1d; color: #fda4af; }
|
|
.danger { color: #fb7185; }
|
|
.admin-section-heading { align-items: end; display: flex; justify-content: space-between; margin-top: 54px; }
|
|
.admin-section-heading h2 { margin: 0; }
|
|
.admin-section-heading p { margin: 4px 0 0; }
|
|
.admin-section-heading > span { color: var(--muted); font-size: 12px; }
|
|
.text-button { background: transparent; border: 0; color: var(--blue); cursor: pointer; padding: 4px 0; }
|
|
.empty-state { color: var(--muted); }
|
|
.audit-row { align-items: center; background: #111a26; border: 1px solid #26364a; border-radius: 6px; display: flex; gap: 14px; padding: 14px 16px; }
|
|
.audit-icon { align-items: center; background: #0e7490; border-radius: 50%; color: white; display: flex; font: 11px ui-monospace, monospace; height: 26px; justify-content: center; width: 26px; }
|
|
.audit-event { flex: 1; }
|
|
.audit-row time { color: var(--muted); font-size: 11px; white-space: nowrap; }
|
|
.account-sessions { margin-top: 16px; }
|
|
.session-heading { align-items: center; display: flex; justify-content: space-between; }
|
|
.session-heading h2 { margin: 0; }
|
|
.session-row { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; }
|
|
.session-row p { font-size: 13px; margin: 5px 0 0; }
|
|
@media (max-width: 760px) { .site-header { flex-wrap: wrap; padding: 16px 18px; } nav { order: 3; width: 100%; } main { padding: 48px 18px 72px; } .section-grid, .section-grid-two, .account-grid, .auth-page, .admin-kpis { grid-template-columns: 1fr; margin-top: 56px; } .admin-title-row { align-items: flex-start; flex-direction: column; } .admin-toolbar { align-items: flex-start; flex-direction: column; } .admin-tabs { width: 100%; } .admin-tab { flex: 1; justify-content: center; } h1 { font-size: 48px; } .site-footer { padding-left: 18px; padding-right: 18px; } }
|
|
@media (max-width: 760px) { .flagship-hero, .ride-hero-panel, .public-split { grid-template-columns: 1fr; padding: 28px; }.flagship-hero { min-height: 0; padding: 36px 24px; }.metric-ribbon { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 56px; }.metric-ribbon div:nth-child(3) { border-left: 0; }.feature-grid, .club-pillars, .architecture-grid { grid-template-columns: 1fr; }.conversion-band { align-items: flex-start; flex-direction: column; gap: 20px; }.radar { max-width: 270px; }.public-intro h1 { font-size: 48px; } }
|
|
.flagship-section-heading { margin-top: 90px; }
|
|
.flagship-feature-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.feature-purple { border-top: 3px solid #c084fc; }
|
|
.feature-stat { align-items: baseline; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 26px; padding-top: 16px; }
|
|
.feature-stat strong { color: #e0f2fe; font-size: 23px; }
|
|
.feature-stat span { color: var(--muted); font: 10px ui-monospace, monospace; margin-right: 12px; }
|
|
.lap-section { background: #0e1821; border: 1px solid #24475a; display: grid; gap: 48px; grid-template-columns: .8fr 1.2fr; margin-top: 90px; padding: 42px; }
|
|
.lap-section h2, .proof-section h2 { font-size: 42px; margin: 16px 0 12px; }
|
|
.lap-facts { display: grid; gap: 14px; margin-top: 34px; }
|
|
.lap-facts span { color: var(--muted); font: 11px ui-monospace, monospace; }
|
|
.lap-facts strong { color: #67e8f9; font-size: 20px; margin-right: 8px; }
|
|
.lap-chart { background: #09131b; border: 1px solid #1e4d64; min-height: 280px; overflow: hidden; padding: 24px; position: relative; }
|
|
.chart-grid { background: repeating-linear-gradient(0deg, transparent 0 54px, #173545 55px), repeating-linear-gradient(90deg, transparent 0 78px, #173545 79px); inset: 24px; position: absolute; }
|
|
.lap-chart svg { height: 220px; position: relative; width: 100%; }
|
|
.lap-chart path { fill: none; stroke: #22d3ee; stroke-width: 4; }
|
|
.lap-chart .trace-secondary { stroke: #4ade80; stroke-dasharray: 8 6; }
|
|
.chart-label { bottom: 18px; color: var(--muted); font: 10px ui-monospace, monospace; position: absolute; }
|
|
.label-a { color: #22d3ee; left: 24px; }.label-b { color: #4ade80; right: 24px; }
|
|
.proof-section { margin-top: 90px; }.quote-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
|
|
.quote-grid blockquote { background: #111a22; border-left: 2px solid #22d3ee; margin: 0; padding: 24px; }
|
|
.quote-grid cite { color: var(--muted); display: block; font-size: 12px; font-style: normal; margin-top: 22px; }
|
|
@media (max-width: 760px) { .lap-section { grid-template-columns: 1fr; padding: 28px; }.flagship-feature-grid, .quote-grid { grid-template-columns: 1fr; }.lap-section h2, .proof-section h2 { font-size: 34px; } }
|
|
.feature-detail-band, .club-radar-band { align-items: center; background: #0d1a25; border: 1px solid #24475a; display: grid; gap: 50px; grid-template-columns: 1fr 1fr; margin-top: 54px; padding: 38px; }.feature-detail-band h2, .club-radar-band h2 { font-size: 34px; margin: 14px 0 10px; }.detail-list { display: grid; gap: 14px; }.detail-list span { border-bottom: 1px solid var(--line); color: var(--muted); padding-bottom: 14px; }.detail-list b { color: #22d3ee; font: 12px ui-monospace, monospace; margin-right: 14px; }.ride-facts { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 26px; }.ride-facts span, .club-metrics span { color: var(--muted); font: 10px ui-monospace, monospace; }.ride-facts b { color: #e0f2fe; display: block; font-size: 20px; margin-bottom: 4px; }.pillars-strip { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 28px; }.pillars-strip article { border-top: 2px solid #1e7490; padding: 22px 10px; }.pillars-strip span { color: #67e8f9; font: 11px ui-monospace, monospace; }.pillars-strip h3 { margin: 18px 0 8px; }.pillars-strip p { font-size: 14px; margin: 0; }.section-inline-heading { align-items: end; display: flex; justify-content: space-between; }.section-inline-heading h2 { margin: 12px 0 0; }.section-inline-heading > span { color: var(--muted); font-size: 12px; }.directory-list { border-top: 1px solid var(--line); margin-top: 20px; }.directory-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 1fr auto auto; padding: 18px 0; }.directory-row h3 { margin: 0 0 4px; }.directory-row p { font-size: 13px; margin: 0; }.account-list-heading { font-size: 22px; margin-top: 46px; }.club-radar-band { grid-template-columns: 1fr 1fr; margin-top: 54px; }.club-metrics { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }.club-metrics div { border-left: 1px solid var(--line); padding-left: 14px; }.club-metrics strong, .club-metrics span { display: block; }.club-metrics strong { color: #4ade80; font-size: 25px; margin-bottom: 8px; }
|
|
.pricing-intro { margin-bottom: 50px; }.pricing-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }.price-card { background: #111a22; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; padding: 30px; }.price-card.pro { border-color: #0e7490; box-shadow: 0 0 28px rgba(34,211,238,.1); }.price-card.team { border-color: #166534; }.price { align-items: baseline; border-bottom: 1px solid var(--line); display: flex; gap: 10px; margin: 22px 0; padding-bottom: 20px; }.price strong { font-size: 52px; }.price span { color: var(--muted); font-size: 12px; }.price-card ul { display: grid; gap: 14px; list-style: none; margin: 0 0 30px; padding: 0; }.price-card li { color: #d5e1e8; font-size: 14px; }.price-card .button { margin-top: auto; }.comparison-section, .faq-section { margin-top: 90px; }.comparison-section h2, .faq-section h2 { font-size: 40px; margin: 14px 0 28px; }.comparison-table { border: 1px solid var(--line); overflow-x: auto; }.comparison-row { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); min-width: 700px; }.comparison-row span { border-bottom: 1px solid var(--line); color: var(--muted); padding: 16px; text-align: center; }.comparison-row:last-child span { border-bottom: 0; }.comparison-row .comparison-label { color: var(--ink); text-align: left; }.hardware-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 54px; }.hardware-card { background: #0d1a25; border: 1px solid #24475a; padding: 30px; }.hardware-card h2 { font-size: 32px; margin: 38px 0 10px; }.hardware-card strong { color: #4ade80; display: block; font-size: 13px; margin: 26px 0 16px; }.faq-section details { border-bottom: 1px solid var(--line); padding: 20px 0; }.faq-section summary { cursor: pointer; font-size: 18px; }.faq-section details p { margin-bottom: 0; }
|
|
@media (max-width: 760px) { .feature-detail-band, .club-radar-band, .hardware-grid { grid-template-columns: 1fr; padding: 28px; }.pillars-strip, .pricing-grid { grid-template-columns: 1fr; }.ride-facts, .club-metrics { grid-template-columns: 1fr; }.directory-row { grid-template-columns: 1fr auto; }.directory-row .text-button { grid-column: 1 / -1; text-align: left; }.price strong { font-size: 44px; } }
|
|
|
|
/* ==========================================================================
|
|
MotorSignal Flagship Landing (Stitch Design Specification)
|
|
========================================================================== */
|
|
|
|
.flagship-landing {
|
|
background-color: #0f131c;
|
|
color: #dfe2ee;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.flagship-container {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.flagship-container {
|
|
padding: 0 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.flagship-container {
|
|
padding: 0 2rem;
|
|
}
|
|
}
|
|
|
|
/* Typography styles */
|
|
.font-display-hero {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: clamp(30px, 5.2vw, 56px);
|
|
line-height: 1.1;
|
|
letter-spacing: -0.03em;
|
|
font-weight: 700;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.font-headline-xl {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: clamp(23px, 3.5vw, 40px);
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
font-weight: 700;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.font-headline-lg {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: clamp(20px, 2.5vw, 26px);
|
|
line-height: 1.28;
|
|
letter-spacing: -0.015em;
|
|
font-weight: 600;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.font-headline-md {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 22px;
|
|
line-height: 30px;
|
|
letter-spacing: -0.01em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.font-headline-sm {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 17px;
|
|
line-height: 24px;
|
|
letter-spacing: -0.005em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.font-code-mono {
|
|
font-family: 'Space Grotesk', monospace;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
letter-spacing: 0.04em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.font-label-caps {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 11px;
|
|
line-height: 14px;
|
|
letter-spacing: 0.12em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.font-label-md {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
letter-spacing: 0.01em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.font-body-lg {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 18px;
|
|
line-height: 28px;
|
|
color: #b9cacb;
|
|
}
|
|
|
|
.font-body-md {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 15px;
|
|
line-height: 24px;
|
|
color: #b9cacb;
|
|
}
|
|
|
|
.font-body-sm {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
color: #849495;
|
|
}
|
|
|
|
.font-telemetry-metric-xl {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 46px;
|
|
line-height: 48px;
|
|
letter-spacing: -0.04em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.font-telemetry-metric-md {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 32px;
|
|
line-height: 36px;
|
|
letter-spacing: -0.03em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Colors and Gradients */
|
|
.text-cyan-accent {
|
|
color: #00f2fe;
|
|
}
|
|
|
|
.text-green-accent {
|
|
color: #60ff98;
|
|
}
|
|
|
|
.text-dim-cyan {
|
|
color: #6ff6ff;
|
|
}
|
|
|
|
.text-dim-green {
|
|
color: #00e478;
|
|
}
|
|
|
|
.text-blue-accent {
|
|
color: #7bd0ff;
|
|
}
|
|
|
|
.text-danger-accent {
|
|
color: #ffb4ab;
|
|
}
|
|
|
|
.gradient-title-text {
|
|
background: linear-gradient(90deg, #00f2fe 0%, #e0fdff 50%, #34ff8c 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 4rem 0 2rem;
|
|
}
|
|
|
|
.hero-glow-1 {
|
|
position: absolute;
|
|
top: 2rem;
|
|
left: 20%;
|
|
transform: translateX(-50%);
|
|
width: min(600px, 90vw);
|
|
height: min(600px, 90vw);
|
|
background: rgba(0, 242, 254, 0.08);
|
|
border-radius: 50%;
|
|
filter: blur(140px);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-glow-2 {
|
|
position: absolute;
|
|
top: 8rem;
|
|
right: 5%;
|
|
width: min(500px, 80vw);
|
|
height: min(500px, 80vw);
|
|
background: rgba(52, 255, 140, 0.07);
|
|
border-radius: 50%;
|
|
filter: blur(150px);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 0.95fr;
|
|
gap: 3.5rem;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.hero-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
}
|
|
}
|
|
|
|
.hero-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.35rem 0.85rem;
|
|
border-radius: 9999px;
|
|
background: rgba(38, 42, 51, 0.8);
|
|
border: 1px solid rgba(58, 73, 75, 0.45);
|
|
backdrop-filter: blur(12px);
|
|
width: fit-content;
|
|
}
|
|
|
|
.pulse-dot-green {
|
|
position: relative;
|
|
display: flex;
|
|
height: 9px;
|
|
width: 9px;
|
|
}
|
|
|
|
.pulse-dot-green .ping {
|
|
animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
position: absolute;
|
|
display: inline-flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
background-color: #60ff98;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.pulse-dot-green .core {
|
|
position: relative;
|
|
display: inline-flex;
|
|
border-radius: 50%;
|
|
height: 9px;
|
|
width: 9px;
|
|
background-color: #00e478;
|
|
}
|
|
|
|
@keyframes ping {
|
|
75%, 100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Button variants */
|
|
.btn-primary-gradient {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.85rem 1.8rem;
|
|
border-radius: 0.75rem;
|
|
background: linear-gradient(90deg, #00f2fe 0%, #00dce6 50%, #6ff6ff 100%);
|
|
color: #002022;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35);
|
|
transition: all 0.25s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary-gradient:hover {
|
|
box-shadow: 0 0 30px rgba(0, 242, 254, 0.55);
|
|
filter: brightness(1.06);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-secondary-surface {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.85rem 1.5rem;
|
|
border-radius: 0.75rem;
|
|
background: rgba(38, 42, 51, 0.9);
|
|
color: #dfe2ee;
|
|
border: 1px solid rgba(58, 73, 75, 0.45);
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
transition: all 0.25s ease;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-secondary-surface:hover {
|
|
background: #353942;
|
|
color: #ffffff;
|
|
border-color: rgba(0, 242, 254, 0.4);
|
|
}
|
|
|
|
.btn-ghost-surface {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.85rem 1.25rem;
|
|
border-radius: 0.75rem;
|
|
background: #181c24;
|
|
color: #b9cacb;
|
|
border: 1px solid rgba(58, 73, 75, 0.4);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
transition: all 0.25s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-ghost-surface:hover {
|
|
background: #1c2028;
|
|
color: #00f2fe;
|
|
}
|
|
|
|
/* Hero Cockpit Frame */
|
|
.cockpit-frame-wrapper {
|
|
position: relative;
|
|
border-radius: 1.25rem;
|
|
background: rgba(10, 14, 22, 0.9);
|
|
padding: 0.35rem;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
|
|
border: 1px solid rgba(58, 73, 75, 0.35);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cockpit-viewport {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 520px;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.cockpit-viewport {
|
|
height: 440px;
|
|
}
|
|
}
|
|
|
|
.cockpit-viewport img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.cockpit-frame-wrapper:hover .cockpit-viewport img {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
.cockpit-vignette-bottom {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to top, #0a0e16 0%, rgba(10, 14, 22, 0.35) 45%, transparent 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cockpit-vignette-side {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to right, rgba(10, 14, 22, 0.5) 0%, transparent 50%, rgba(10, 14, 22, 0.35) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Floating HUD elements */
|
|
.hud-apex-badge {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: 0.5rem;
|
|
background: rgba(10, 14, 22, 0.88);
|
|
backdrop-filter: blur(14px);
|
|
border: 1px solid rgba(58, 73, 75, 0.5);
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.hud-lean-card {
|
|
position: absolute;
|
|
top: 4.8rem;
|
|
left: 1rem;
|
|
width: 210px;
|
|
border-radius: 0.85rem;
|
|
background: rgba(24, 28, 36, 0.92);
|
|
backdrop-filter: blur(16px);
|
|
padding: 1rem;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
|
border: 1px solid rgba(58, 73, 75, 0.4);
|
|
}
|
|
|
|
.hud-speed-card {
|
|
position: absolute;
|
|
top: 14rem;
|
|
left: 1rem;
|
|
width: 210px;
|
|
border-radius: 0.85rem;
|
|
background: rgba(24, 28, 36, 0.92);
|
|
backdrop-filter: blur(16px);
|
|
padding: 1rem;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
|
border: 1px solid rgba(58, 73, 75, 0.4);
|
|
}
|
|
|
|
.hud-gps-card {
|
|
position: absolute;
|
|
bottom: 1.25rem;
|
|
right: 1.25rem;
|
|
width: 230px;
|
|
border-radius: 0.85rem;
|
|
background: rgba(10, 14, 22, 0.92);
|
|
backdrop-filter: blur(16px);
|
|
padding: 1rem;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
|
border: 1px solid rgba(58, 73, 75, 0.45);
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hud-lean-card {
|
|
width: 140px;
|
|
top: 3.5rem;
|
|
left: 0.75rem;
|
|
padding: 0.65rem;
|
|
}
|
|
.hud-speed-card {
|
|
width: 140px;
|
|
top: 10.5rem;
|
|
left: 0.75rem;
|
|
padding: 0.65rem;
|
|
}
|
|
.hud-gps-card {
|
|
width: 155px;
|
|
padding: 0.65rem;
|
|
bottom: 0.75rem;
|
|
right: 0.75rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.hud-gps-card {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Metric Strip */
|
|
.telemetry-strip {
|
|
width: 100%;
|
|
background: #0a0e16;
|
|
border-top: 1px solid rgba(58, 73, 75, 0.4);
|
|
border-bottom: 1px solid rgba(58, 73, 75, 0.4);
|
|
padding: 2rem 0;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.metric-strip-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.metric-strip-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 540px) {
|
|
.metric-strip-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.metric-box {
|
|
padding: 1.5rem;
|
|
border-radius: 0.85rem;
|
|
background: #181c24;
|
|
border: 1px solid rgba(58, 73, 75, 0.25);
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.metric-box:hover {
|
|
background: #1c2028;
|
|
border-color: rgba(0, 242, 254, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Core Pillars Bento Grid */
|
|
.pillars-section {
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.pillars-section {
|
|
padding: 3.5rem 0;
|
|
}
|
|
}
|
|
|
|
.bento-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.25rem;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.bento-grid {
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
}
|
|
|
|
.bento-card {
|
|
width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
padding: 1.5rem;
|
|
border-radius: 1.25rem;
|
|
background: #181c24;
|
|
border: 1px solid rgba(58, 73, 75, 0.3);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
gap: 1.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.bento-card:hover {
|
|
border-color: rgba(58, 73, 75, 0.6);
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.bento-card {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.bento-card {
|
|
padding: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.bento-card.col-span-12 {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.bento-card.col-span-7,
|
|
.bento-grid > .col-span-7 {
|
|
grid-column: span 7 / span 7;
|
|
}
|
|
|
|
.bento-card.col-span-5,
|
|
.bento-grid > .col-span-5 {
|
|
grid-column: span 5 / span 5;
|
|
}
|
|
}
|
|
|
|
.icon-box {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 0.75rem;
|
|
background: #262a33;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Interactive Lap Breakdown */
|
|
.lap-section-wrapper {
|
|
background: rgba(10, 14, 22, 0.85);
|
|
padding: 4rem 0;
|
|
border-top: 1px solid rgba(58, 73, 75, 0.25);
|
|
border-bottom: 1px solid rgba(58, 73, 75, 0.25);
|
|
}
|
|
|
|
.lap-grid {
|
|
display: grid;
|
|
grid-template-columns: 5fr 7fr;
|
|
gap: 3rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.lap-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.lap-tabs {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
padding: 0.35rem;
|
|
border-radius: 0.75rem;
|
|
background: #181c24;
|
|
border: 1px solid rgba(58, 73, 75, 0.3);
|
|
margin: 1.25rem 0;
|
|
}
|
|
|
|
.lap-tab-btn {
|
|
flex: 1;
|
|
padding: 0.6rem 0.75rem;
|
|
border-radius: 0.5rem;
|
|
background: transparent;
|
|
color: #b9cacb;
|
|
border: none;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.lap-tab-btn.active {
|
|
background: #262a33;
|
|
color: #00f2fe;
|
|
}
|
|
|
|
.lap-tab-btn:hover:not(.active) {
|
|
color: #dfe2ee;
|
|
}
|
|
|
|
.sector-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.25rem;
|
|
border-radius: 0.85rem;
|
|
background: #181c24;
|
|
border: 1px solid rgba(58, 73, 75, 0.25);
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
.graph-card {
|
|
border-radius: 1.25rem;
|
|
background: #181c24;
|
|
padding: 1.75rem;
|
|
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
|
|
border: 1px solid rgba(58, 73, 75, 0.35);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
/* Testimonials */
|
|
.testimonials-section {
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
.testimonial-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.testimonial-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.testimonial-card {
|
|
padding: 2rem;
|
|
border-radius: 1.25rem;
|
|
background: #181c24;
|
|
border: 1px solid rgba(58, 73, 75, 0.3);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 1.75rem;
|
|
}
|
|
|
|
/* Bottom CTA Banner */
|
|
.bottom-cta-section {
|
|
padding: 2rem 0 6rem;
|
|
}
|
|
|
|
.cta-banner-box {
|
|
position: relative;
|
|
border-radius: 1.75rem;
|
|
background: linear-gradient(135deg, #262a33 0%, #1c2028 50%, #181c24 100%);
|
|
padding: 4rem 2rem;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
|
|
border: 1px solid rgba(58, 73, 75, 0.4);
|
|
overflow: hidden;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.cta-banner-box {
|
|
padding: 2.5rem 1.25rem;
|
|
border-radius: 1.25rem;
|
|
}
|
|
}
|
|
|
|
.cta-banner-glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, rgba(0, 242, 254, 0.08) 0%, rgba(52, 255, 140, 0.08) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.guarantee-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
padding-top: 1rem;
|
|
color: #b9cacb;
|
|
font-size: 13px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.guarantee-badges {
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
.badge-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Flagship Footer (Stitch Match)
|
|
========================================================================== */
|
|
|
|
.flagship-footer {
|
|
width: 100%;
|
|
background-color: #0a0e16;
|
|
border-top: 1px solid rgba(58, 73, 75, 0.35);
|
|
padding: 4.5rem 0 2.5rem;
|
|
color: #b9cacb;
|
|
}
|
|
|
|
.footer-columns-grid {
|
|
display: grid;
|
|
grid-template-columns: 2.2fr repeat(4, 1fr);
|
|
gap: 2.5rem;
|
|
padding-bottom: 3.5rem;
|
|
border-bottom: 1px solid rgba(58, 73, 75, 0.25);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.footer-columns-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.footer-brand-col {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.footer-columns-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.footer-brand-col {
|
|
grid-column: span 1;
|
|
}
|
|
}
|
|
|
|
.footer-brand-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.footer-desc {
|
|
color: #849495;
|
|
font-size: 13.5px;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.footer-status-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.35rem 0.85rem;
|
|
border-radius: 9999px;
|
|
background: #181c24;
|
|
border: 1px solid rgba(58, 73, 75, 0.3);
|
|
width: fit-content;
|
|
}
|
|
|
|
.footer-status-pill .status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #00e478;
|
|
}
|
|
|
|
.footer-link-group h4 {
|
|
color: #dfe2ee;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
margin: 0 0 1.25rem;
|
|
}
|
|
|
|
.footer-link-group ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.footer-link-group li a {
|
|
color: #849495;
|
|
font-size: 13.5px;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.footer-link-group li a:hover {
|
|
color: #00f2fe;
|
|
}
|
|
|
|
.footer-bottom-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding-top: 2rem;
|
|
font-size: 13px;
|
|
color: #849495;
|
|
}
|
|
|
|
.footer-bottom-bar p {
|
|
margin: 0;
|
|
}
|
|
|
|
.footer-sys-info {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
color: #849495;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Flagship Layout Refactor (Extracted from Inline Styles)
|
|
========================================================================== */
|
|
.hero-content-col { display: flex; flex-direction: column; gap: 1.5rem; }
|
|
.hero-title { margin: 0; color: #dfe2ee; }
|
|
.hero-desc { margin: 0; max-width: 580px; }
|
|
.hero-actions-row { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 0.5rem; }
|
|
.hero-trust-row { display: flex; alignItems: center; gap: 1rem; padding-top: 0.75rem; }
|
|
.hero-trust-avatars { display: flex; margin-left: -0.25rem; }
|
|
.trust-avatar {
|
|
width: 36px; height: 36px; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.4); margin-right: -10px;
|
|
border: 2px solid #0f131c;
|
|
}
|
|
.avatar-blue { background: #31353e; color: #00f2fe; }
|
|
.avatar-green { background: #262a33; color: #00e478; }
|
|
.avatar-cyan { background: #353942; color: #7bd0ff; }
|
|
.avatar-count { background: #00f2fe; color: #00373a; font-family: 'Space Grotesk'; font-size: 11px; font-weight: bold; }
|
|
.hero-trust-text { display: flex; flex-direction: column; }
|
|
.status-dot-green { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #00e478; }
|
|
.hud-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
|
|
.hud-value-row { display: flex; align-items: baseline; gap: 6px; }
|
|
.hud-progress-bg { width: 100%; height: 7px; background: #31353e; border-radius: 9999px; overflow: hidden; margin-top: 6px; }
|
|
.hud-progress-bar { height: 100%; border-radius: 9999px; }
|
|
.lean-progress { width: 88%; background: linear-gradient(90deg, #00f2fe, #00dce6, #34ff8c); }
|
|
.hud-footer { display: flex; justify-content: space-between; margin-top: 4px; }
|
|
.hud-lateral-box { display: flex; justify-content: space-between; align-items: center; background: rgba(10, 14, 22, 0.5); border-radius: 6px; padding: 4px 8px; margin-top: 8px; }
|
|
.hud-header-title { display: flex; align-items: center; gap: 5px; }
|
|
.hud-detail-row { display: flex; justify-content: space-between; margin-top: 6px; }
|
|
|
|
.metric-box-header { display: flex; justify-content: space-between; align-items: center; }
|
|
.metric-box-content { margin-top: 0.75rem; }
|
|
.metric-box-desc { margin: 4px 0 0; }
|
|
|
|
.pillars-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 3rem; }
|
|
.pill-label { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; margin-bottom: 10px; }
|
|
.pillars-desc { margin: 0; max-width: 440px; }
|
|
.bento-icon { font-size: 26px; }
|
|
.bento-title { margin: 6px 0 12px; color: #dfe2ee; }
|
|
.bento-desc { margin: 0 0 2rem; max-width: 580px; }
|
|
.bento-desc-short { margin: 0 0 2rem; }
|
|
.bento-inner-card { border-radius: 0.75rem; background: #0a0e16; padding: 1rem 1.25rem; border: 1px solid rgba(58, 73, 75, 0.3); box-sizing: border-box; }
|
|
.bento-inner-inset { box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); }
|
|
.bento-inner-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(58, 73, 75, 0.25); gap: 0.5rem; }
|
|
.bento-stats-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding-top: 0.75rem; }
|
|
.bento-stats-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.65rem; box-sizing: border-box; }
|
|
.bento-stat-box { background: #1c2028; padding: 0.5rem 0.25rem; border-radius: 0.5rem; }
|
|
.bento-flex-between { display: flex; justify-content: space-between; }
|
|
.bento-flex-row { display: flex; flex-direction: row; }
|
|
.bento-progress-bar-container { display: flex; gap: 4px; height: 10px; border-radius: 9999px; overflow: hidden; background: #31353e; }
|
|
.bento-progress-bar-fill { border-radius: 9999px; }
|
|
.bento-icon-box { width: 40px; height: 40px; border-radius: 0.5rem; background: #262a33; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.bento-text-col { display: flex; flex-direction: column; min-width: 0; }
|
|
|
|
.lap-left-col { display: flex; flex-direction: column; gap: 1.25rem; }
|
|
.sector-list { display: flex; flex-direction: column; }
|
|
.sector-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(58, 73, 75, 0.25); }
|
|
.sector-row:last-child { border-bottom: none; }
|
|
.sector-info { display: flex; align-items: center; gap: 12px; }
|
|
.sector-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
|
|
.sector-dot-small { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
|
|
.graph-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(58, 73, 75, 0.3); padding-bottom: 0.75rem; }
|
|
.graph-header-left { display: flex; align-items: center; gap: 10px; }
|
|
.graph-badge { padding: 2px 8px; border-radius: 4px; }
|
|
.graph-svg-container { border-radius: 0.75rem; padding: 1.25rem; position: relative; overflow: hidden; border: 1px solid rgba(58, 73, 75, 0.25); }
|
|
.graph-svg-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
|
|
.graph-svg-footer { display: flex; justify-content: space-between; margin-top: 8px; gap: 4px; overflow: hidden; }
|
|
|
|
.testimonial-card { background: #0a0e16; border: 1px solid rgba(58, 73, 75, 0.3); border-radius: 0.75rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
|
|
.testimonial-content { display: flex; flex-direction: column; gap: 0.75rem; }
|
|
.testimonial-stars { display: flex; }
|
|
.testimonial-author-row { padding-top: 1rem; border-top: 1px solid rgba(58, 73, 75, 0.25); display: flex; align-items: center; gap: 12px; }
|
|
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; font-family: 'Space Grotesk'; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
|
|
.testimonial-author-info { display: flex; flex-direction: column; }
|
|
|
|
.cta-banner-label { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; background: #0a0e16; position: relative; z-index: 2; }
|
|
.cta-banner-title { max-width: 640px; position: relative; z-index: 2; }
|
|
.cta-banner-desc { max-width: 580px; position: relative; z-index: 2; }
|
|
.cta-actions-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; padding-top: 0.75rem; position: relative; z-index: 2; }
|
|
|
|
/* Utility classes mapped from style objects */
|
|
.text-ink { color: #dfe2ee; }
|
|
.text-muted { color: #849495; }
|
|
.text-muted-blue { color: #b9cacb; }
|
|
.bg-surface-lowest { background: #0a0e16; }
|
|
.bg-surface-container { background: #1c2028; }
|
|
.bg-surface-highest { background: #31353e; }
|
|
.bg-surface-bright { background: #353942; }
|
|
.bg-green-accent { background: #60ff98; }
|
|
.bg-cyan-accent { background: #00f2fe; }
|
|
.bg-blue-accent { background: #7bd0ff; }
|
|
.m-0 { margin: 0; }
|
|
.max-w-md { max-width: 440px; }
|
|
.w-fit { width: fit-content; }
|
|
.w-35 { width: 35%; }
|
|
.w-30 { width: 30%; }
|
|
.items-center { align-items: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.flex { display: flex; }
|
|
.gap-1rem { gap: 1rem; }
|
|
.gap-6px { gap: 6px; }
|
|
.mt-2px { margin-top: 2px; }
|
|
.mt-10px { margin-top: 10px; }
|
|
.mb-8px { margin-bottom: 8px; }
|
|
.mb-10px { margin-bottom: 10px; }
|
|
.whitespace-nowrap { white-space: nowrap; }
|
|
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.shrink-0 { flex-shrink: 0; }
|
|
.block { display: block; }
|
|
.icon-md { font-size: 20px; }
|
|
.icon-sm { font-size: 16px; }
|
|
.icon-bold { font-size: 20px; font-weight: bold; }
|
|
.italic { font-style: italic; }
|
|
|