TEST
This commit is contained in:
@@ -1,17 +1,17 @@
|
||||
:root {
|
||||
--brand-blue: #0051FF;
|
||||
--deep-gray: #1A1A1A;
|
||||
--silver: #C8CBD0;
|
||||
--green-check: #03C160;
|
||||
--error-red: #E63946;
|
||||
--amber-yellow: #FFDA3D;
|
||||
--light-gray: #F4F4F4;
|
||||
--very-light-gray: #FAFAFA;
|
||||
--off-white: #FFFFFF;
|
||||
--brand-blue: #3a6ff8;
|
||||
--deep-gray: #0f1f3d;
|
||||
--silver: #d9e1f2;
|
||||
--green-check: #1fce88;
|
||||
--error-red: #f46666;
|
||||
--amber-yellow: #ffb347;
|
||||
--light-gray: #edf2fb;
|
||||
--very-light-gray: #f9fbff;
|
||||
--off-white: #ffffff;
|
||||
|
||||
--radius-lg: 16px;
|
||||
--radius-pill: 999px;
|
||||
--shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.08);
|
||||
--shadow-soft: 0 18px 45px rgba(55, 101, 202, 0.15);
|
||||
}
|
||||
|
||||
*,
|
||||
@@ -28,8 +28,8 @@ html, body {
|
||||
body {
|
||||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-weight: 400;
|
||||
color: #222;
|
||||
background: var(--very-light-gray);
|
||||
color: #1f2a44;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 50%, #f1f6ff 100%);
|
||||
}
|
||||
|
||||
/* Layout helpers */
|
||||
@@ -237,7 +237,8 @@ body {
|
||||
.hero {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 4rem;
|
||||
background: radial-gradient(circle at top left, rgba(0, 81, 255, 0.08), transparent 55%);
|
||||
background: radial-gradient(circle at top left, rgba(58, 111, 248, 0.2), transparent 55%),
|
||||
radial-gradient(circle at bottom right, rgba(255, 215, 166, 0.25), transparent 60%);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
@@ -301,11 +302,11 @@ body {
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
background: #fff;
|
||||
border-radius: 24px;
|
||||
padding: 1.4rem 1.5rem;
|
||||
background: linear-gradient(160deg, #ffffff 0%, #f1f5ff 80%);
|
||||
border-radius: 28px;
|
||||
padding: 1.6rem 1.8rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
border: 1px solid rgba(200, 203, 208, 0.6);
|
||||
border: 1px solid rgba(58, 111, 248, 0.15);
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
@@ -324,31 +325,208 @@ body {
|
||||
.hero-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
gap: 0.9rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: #777;
|
||||
font-size: 0.8rem;
|
||||
color: #5f6b85;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-family: 'Montserrat', system-ui, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--deep-gray);
|
||||
}
|
||||
|
||||
.hero-small {
|
||||
font-size: 0.75rem;
|
||||
color: #777;
|
||||
font-size: 0.78rem;
|
||||
color: #6c7695;
|
||||
}
|
||||
|
||||
.hero-stick img {
|
||||
width: 200px;
|
||||
max-width: 100%;
|
||||
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 12px 28px rgba(58, 111, 248, 0.25));
|
||||
}
|
||||
|
||||
/* Quick test visual */
|
||||
|
||||
.quick-preview-card {
|
||||
position: relative;
|
||||
border-radius: 32px;
|
||||
padding: 1.8rem;
|
||||
background: linear-gradient(165deg, #ffffff 0%, #eef4ff 100%);
|
||||
border: 1px solid rgba(56, 102, 214, 0.2);
|
||||
box-shadow: var(--shadow-soft);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-preview-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 12% auto auto 60%;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
background: radial-gradient(circle, rgba(58, 111, 248, 0.12), transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.quick-preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.quick-preview-eyebrow {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: var(--brand-blue);
|
||||
}
|
||||
|
||||
.quick-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #1b4045;
|
||||
background: rgba(31, 206, 136, 0.15);
|
||||
}
|
||||
|
||||
.quick-metric-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(90, 132, 224, 0.2);
|
||||
padding: 0.8rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.quick-metric-card span:first-child {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #6c7695;
|
||||
}
|
||||
|
||||
.quick-metric-card span:last-child {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--deep-gray);
|
||||
}
|
||||
|
||||
.quick-kit {
|
||||
position: relative;
|
||||
margin-top: 1.5rem;
|
||||
border-radius: 30px;
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(120deg, #ffffff 0%, #f2f7ff 100%);
|
||||
border: 1px solid rgba(68, 121, 249, 0.18);
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.quick-kit-left h4 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-family: 'Montserrat', system-ui, sans-serif;
|
||||
color: var(--deep-gray);
|
||||
}
|
||||
|
||||
.quick-kit-left p {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 0.9rem;
|
||||
color: #5f6b85;
|
||||
}
|
||||
|
||||
.quick-kit-lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.quick-kit-line {
|
||||
position: relative;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(92, 120, 192, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-kit-line::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, rgba(58, 111, 248, 0.1), rgba(31, 206, 136, 0.5));
|
||||
}
|
||||
|
||||
.quick-kit-line.is-alert::after {
|
||||
background: linear-gradient(90deg, rgba(255, 180, 90, 0.2), rgba(255, 118, 118, 0.5));
|
||||
}
|
||||
|
||||
.quick-kit-window {
|
||||
position: relative;
|
||||
border-radius: 26px;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(145deg, #edf2ff, #ffffff);
|
||||
box-shadow: inset 0 2px 6px rgba(15, 33, 66, 0.08);
|
||||
}
|
||||
|
||||
.quick-kit-window .window-label {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #8390b3;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.quick-kit-window .window-strip {
|
||||
height: 60px;
|
||||
border-radius: 18px;
|
||||
background: #ffffff;
|
||||
border: 1px dashed rgba(89, 124, 178, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0 1.2rem;
|
||||
}
|
||||
|
||||
.window-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #e6ecff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.window-dot.is-active {
|
||||
background: #3a6ff8;
|
||||
box-shadow: 0 0 0 6px rgba(58, 111, 248, 0.18);
|
||||
}
|
||||
|
||||
.window-dot.is-pass {
|
||||
background: #1fce88;
|
||||
box-shadow: 0 0 0 6px rgba(31, 206, 136, 0.18);
|
||||
}
|
||||
|
||||
.quick-kit-footnote {
|
||||
margin-top: 0.7rem;
|
||||
font-size: 0.75rem;
|
||||
color: #7a86a8;
|
||||
}
|
||||
|
||||
/* Steps / Features / Pricing */
|
||||
|
||||
Reference in New Issue
Block a user