@@ -311,7 +311,7 @@ export default function LandingPage() {
Is the user on VPN?
- Engineer:
+ Engineer:
Yes, Cisco AnyConnect
diff --git a/frontend/src/styles/landing.css b/frontend/src/styles/landing.css
index 1d95cb5c..203334c7 100644
--- a/frontend/src/styles/landing.css
+++ b/frontend/src/styles/landing.css
@@ -1,13 +1,13 @@
/* ============================================
- RESOLUTIONFLOW LANDING PAGE
+ RESOLUTIONFLOW LANDING PAGE — Design System v4
All classes prefixed with landing- to avoid
collisions with the main app styles.
============================================ */
.landing-page {
font-family: 'IBM Plex Sans', sans-serif;
- background: hsl(228, 12%, 7%);
- color: #f0f0f5;
+ background: #0c0d10;
+ color: #e2e5eb;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
@@ -15,49 +15,19 @@
}
/* ---- AMBIENT BACKGROUND ---- */
+/* Subtle top glow only — no animated pulses or blur */
.landing-ambient-glow {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
+ background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.12) 0%, transparent 60%);
}
-.landing-ambient-glow::before {
- content: '';
- position: absolute;
- top: -30%;
- left: 50%;
- transform: translateX(-50%);
- width: 900px;
- height: 900px;
- background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
- animation: landingAmbientPulse 12s ease-in-out infinite;
-}
-
+.landing-ambient-glow::before,
.landing-ambient-glow::after {
- content: '';
- position: absolute;
- bottom: -20%;
- right: -10%;
- width: 600px;
- height: 600px;
- background: radial-gradient(circle, rgba(34, 211, 238, 0.04) 0%, transparent 70%);
- animation: landingAmbientPulse 16s ease-in-out infinite reverse;
-}
-
-@keyframes landingAmbientPulse {
-
- 0%,
- 100% {
- opacity: 0.6;
- transform: translateX(-50%) scale(1);
- }
-
- 50% {
- opacity: 1;
- transform: translateX(-50%) scale(1.15);
- }
+ display: none;
}
/* ---- GRID PATTERN ---- */
@@ -86,13 +56,12 @@
right: 0;
z-index: 100;
padding: 0 2rem;
- transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
+ transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.landing-nav.scrolled {
- background: rgba(14, 15, 24, 0.85);
- backdrop-filter: blur(20px) saturate(1.2);
- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+ background: rgba(12, 13, 16, 0.95);
+ border-bottom: 1px solid #1e2130;
}
.landing-nav-inner {
@@ -114,12 +83,11 @@
.landing-nav-logo-icon {
width: 36px;
height: 36px;
- background: linear-gradient(135deg, #06b6d4, #22d3ee);
+ background: #22d3ee;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
- box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
}
.landing-nav-logo-icon svg {
@@ -131,15 +99,12 @@
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.25rem;
font-weight: 700;
- color: #f0f0f5;
+ color: #e2e5eb;
letter-spacing: -0.02em;
}
.landing-nav-wordmark span {
- background: linear-gradient(135deg, #22d3ee, #67e8f9);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+ color: #67e8f9;
}
.landing-nav-links {
@@ -154,7 +119,7 @@
.landing-nav-links a {
font-size: 0.875rem;
font-weight: 500;
- color: #a0a0b0;
+ color: #848b9b;
text-decoration: none;
transition: color 0.2s;
letter-spacing: 0.01em;
@@ -162,7 +127,7 @@
}
.landing-nav-links a:hover {
- color: #f0f0f5;
+ color: #e2e5eb;
}
.landing-nav-cta {
@@ -174,7 +139,7 @@
.landing-btn-ghost {
font-size: 0.875rem;
font-weight: 500;
- color: #a0a0b0;
+ color: #848b9b;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 8px;
@@ -182,27 +147,26 @@
}
.landing-btn-ghost:hover {
- color: #f0f0f5;
+ color: #e2e5eb;
background: rgba(255, 255, 255, 0.06);
}
.landing-btn-primary {
font-size: 0.875rem;
font-weight: 600;
- color: #000;
+ color: #fff;
text-decoration: none;
padding: 0.55rem 1.25rem;
border-radius: 8px;
- background: linear-gradient(135deg, #06b6d4, #22d3ee);
- box-shadow: 0 0 20px rgba(6, 182, 212, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
- transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
+ background: #22d3ee;
+ transition: opacity 0.25s, transform 0.25s;
letter-spacing: -0.01em;
border: none;
cursor: pointer;
}
.landing-btn-primary:hover {
- box-shadow: 0 0 30px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+ opacity: 0.9;
transform: translateY(-1px);
}
@@ -220,12 +184,12 @@
gap: 8px;
padding: 6px 16px;
border-radius: 100px;
- background: rgba(255, 255, 255, 0.03);
- border: 1px solid rgba(255, 255, 255, 0.06);
- font-family: 'JetBrains Mono', monospace;
+ background: #14161d;
+ border: 1px solid #1e2130;
+ font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.75rem;
font-weight: 500;
- color: #22d3ee;
+ color: #67e8f9;
margin-bottom: 2rem;
letter-spacing: 0.03em;
animation: landingFadeInDown 0.8s ease-out;
@@ -249,7 +213,6 @@
50% {
opacity: 1;
- box-shadow: 0 0 8px #22d3ee;
}
}
@@ -264,16 +227,13 @@
}
.landing-gradient-text {
- background: linear-gradient(135deg, #22d3ee, #67e8f9);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+ color: #67e8f9;
}
.landing-hero-sub {
font-size: 1.2rem;
font-weight: 400;
- color: #a0a0b0;
+ color: #848b9b;
line-height: 1.7;
max-width: 600px;
margin: 0 auto 2.5rem;
@@ -291,20 +251,19 @@
.landing-btn-hero-primary {
font-size: 1rem;
font-weight: 600;
- color: #000;
+ color: #fff;
text-decoration: none;
padding: 0.85rem 2rem;
border-radius: 10px;
- background: linear-gradient(135deg, #06b6d4, #22d3ee);
- box-shadow: 0 4px 30px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
- transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+ background: #22d3ee;
+ transition: opacity 0.3s, transform 0.3s;
letter-spacing: -0.01em;
border: none;
cursor: pointer;
}
.landing-btn-hero-primary:hover {
- box-shadow: 0 4px 40px rgba(6, 182, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+ opacity: 0.9;
transform: translateY(-2px);
}
@@ -317,19 +276,19 @@
.landing-btn-hero-secondary {
font-size: 1rem;
font-weight: 500;
- color: #a0a0b0;
+ color: #848b9b;
text-decoration: none;
padding: 0.85rem 2rem;
border-radius: 10px;
- background: rgba(255, 255, 255, 0.03);
- border: 1px solid rgba(255, 255, 255, 0.06);
- transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+ background: #14161d;
+ border: 1px solid #1e2130;
+ transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.landing-btn-hero-secondary:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.1);
- color: #f0f0f5;
+ color: #e2e5eb;
}
/* ---- SOCIAL PROOF BAR ---- */
@@ -340,9 +299,9 @@
}
.landing-social-proof-bar>p {
- font-family: 'JetBrains Mono', monospace;
+ font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.75rem;
- color: #5a5a6e;
+ color: #5a6170;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1.5rem;
@@ -363,15 +322,12 @@
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.75rem;
font-weight: 700;
- background: linear-gradient(135deg, #22d3ee, #67e8f9);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+ color: #67e8f9;
}
.landing-proof-stat .label {
font-size: 0.8rem;
- color: #5a5a6e;
+ color: #5a6170;
margin-top: 0.25rem;
}
@@ -385,10 +341,10 @@
.landing-preview-window {
border-radius: 12px;
- border: 1px solid hsl(228, 8%, 16%);
- background: hsl(228, 10%, 10%);
+ border: 1px solid #1e2130;
+ background: #14161d;
overflow: hidden;
- box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4), 0 0 60px rgba(6, 182, 212, 0.05);
+ box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
}
.landing-preview-titlebar {
@@ -397,7 +353,7 @@
padding: 0 0 0 14px;
height: 40px;
background: rgba(255, 255, 255, 0.02);
- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+ border-bottom: 1px solid #1e2130;
}
.landing-preview-tab {
@@ -406,10 +362,10 @@
gap: 8px;
padding: 0 14px;
height: 100%;
- font-family: 'JetBrains Mono', monospace;
+ font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.7rem;
- color: #a0a0b0;
- border-right: 1px solid rgba(255, 255, 255, 0.06);
+ color: #848b9b;
+ border-right: 1px solid #1e2130;
background: rgba(255, 255, 255, 0.02);
position: relative;
}
@@ -421,20 +377,20 @@
left: 0;
right: 0;
height: 2px;
- background: linear-gradient(135deg, #06b6d4, #22d3ee);
+ background: #22d3ee;
}
.landing-tab-icon {
width: 14px;
height: 14px;
border-radius: 3px;
- background: linear-gradient(135deg, #06b6d4, #22d3ee);
+ background: #22d3ee;
flex-shrink: 0;
}
.landing-tab-close {
font-size: 0.65rem;
- color: #5a5a6e;
+ color: #5a6170;
margin-left: 4px;
}
@@ -453,10 +409,10 @@
padding: 4px 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
- border: 1px solid rgba(255, 255, 255, 0.06);
- font-family: 'JetBrains Mono', monospace;
+ border: 1px solid #1e2130;
+ font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.65rem;
- color: #5a5a6e;
+ color: #5a6170;
}
.landing-lock-icon {
@@ -477,7 +433,7 @@
display: flex;
align-items: center;
justify-content: center;
- color: #5a5a6e;
+ color: #5a6170;
font-size: 0.7rem;
transition: background 0.15s;
}
@@ -518,15 +474,15 @@
padding: 8px 12px;
border-radius: 8px;
font-size: 0.8rem;
- color: #a0a0b0;
+ color: #848b9b;
display: flex;
align-items: center;
gap: 8px;
}
.landing-preview-sidebar-item.active {
- background: rgba(6, 182, 212, 0.08);
- color: #22d3ee;
+ background: rgba(34, 211, 238, 0.08);
+ color: #67e8f9;
border-left: 3px solid #22d3ee;
}
@@ -540,7 +496,7 @@
flex: 1;
background: rgba(255, 255, 255, 0.01);
border-radius: 12px;
- border: 1px dashed rgba(255, 255, 255, 0.06);
+ border: 1px dashed #1e2130;
display: flex;
align-items: center;
justify-content: center;
@@ -564,22 +520,21 @@
}
.landing-tree-node.root {
- background: linear-gradient(135deg, #06b6d4, #22d3ee);
- color: #000;
- box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
+ background: #22d3ee;
+ color: #fff;
}
.landing-tree-node.decision {
- background: hsl(228, 10%, 10%);
- border: 1px solid hsl(228, 8%, 16%);
- color: #f0f0f5;
+ background: #14161d;
+ border: 1px solid #1e2130;
+ color: #e2e5eb;
font-size: 0.7rem;
}
.landing-tree-connector {
width: 2px;
height: 24px;
- background: rgba(6, 182, 212, 0.2);
+ background: rgba(34, 211, 238, 0.2);
}
.landing-tree-branch {
@@ -596,7 +551,7 @@
width: calc(100% - 100px);
transform: translateX(-50%);
height: 2px;
- background: rgba(6, 182, 212, 0.15);
+ background: rgba(34, 211, 238, 0.15);
}
.landing-tree-branch-arm {
@@ -610,9 +565,9 @@
}
.landing-tree-label {
- font-family: 'JetBrains Mono', monospace;
+ font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.6rem;
- color: #22d3ee;
+ color: #67e8f9;
margin-bottom: 4px;
opacity: 0.7;
}
@@ -628,10 +583,10 @@
}
.landing-section-label {
- font-family: 'JetBrains Mono', monospace;
- font-size: 0.7rem;
+ font-family: 'IBM Plex Sans', sans-serif;
+ font-size: 0.75rem;
font-weight: 600;
- color: #22d3ee;
+ color: #67e8f9;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 1rem;
@@ -640,7 +595,7 @@
.landing-section-title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(2rem, 4vw, 2.75rem);
- font-weight: 700;
+ font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
margin-top: 0;
@@ -649,7 +604,7 @@
.landing-section-desc {
font-size: 1.1rem;
- color: #a0a0b0;
+ color: #848b9b;
line-height: 1.7;
max-width: 580px;
}
@@ -659,7 +614,7 @@
max-width: 1100px;
margin: 0 auto;
height: 1px;
- background: rgba(255, 255, 255, 0.06);
+ background: #1e2130;
}
/* ---- PROBLEM SECTION ---- */
@@ -674,14 +629,13 @@
.landing-problem-card {
padding: 2rem;
border-radius: 16px;
- background: rgba(255, 255, 255, 0.03);
- border: 1px solid rgba(255, 255, 255, 0.06);
- transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+ background: #14161d;
+ border: 1px solid #1e2130;
+ transition: border-color 0.3s, transform 0.3s;
}
.landing-problem-card:hover {
- background: rgba(255, 255, 255, 0.06);
- border-color: rgba(255, 255, 255, 0.08);
+ border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
}
@@ -726,7 +680,7 @@
.landing-problem-card p {
font-size: 0.9rem;
- color: #a0a0b0;
+ color: #848b9b;
line-height: 1.65;
}
@@ -737,16 +691,9 @@
position: relative;
}
+/* Removed radial gradient pseudo-element */
.landing-equation-section::before {
- content: '';
- position: absolute;
- top: 0;
- left: 50%;
- transform: translateX(-50%);
- width: 500px;
- height: 100%;
- background: radial-gradient(ellipse, rgba(6, 182, 212, 0.04) 0%, transparent 70%);
- pointer-events: none;
+ display: none;
}
.landing-brand-equation {
@@ -765,26 +712,24 @@
.landing-eq-item {
padding: 0.5rem 1.25rem;
border-radius: 12px;
- background: rgba(255, 255, 255, 0.03);
- border: 1px solid rgba(255, 255, 255, 0.06);
+ background: #14161d;
+ border: 1px solid #1e2130;
}
.landing-eq-operator {
- color: #22d3ee;
+ color: #67e8f9;
font-size: 2rem;
}
.landing-eq-result {
- background: linear-gradient(135deg, #06b6d4, #22d3ee);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+ color: #67e8f9;
padding: 0;
}
+/* ---- EQUATION DESC ---- */
.landing-equation-desc {
font-size: 1.1rem;
- color: #a0a0b0;
+ color: #848b9b;
max-width: 550px;
margin: 0 auto;
line-height: 1.7;
@@ -802,24 +747,23 @@
.landing-step-card {
padding: 2rem;
border-radius: 16px;
- background: rgba(255, 255, 255, 0.03);
- border: 1px solid rgba(255, 255, 255, 0.06);
+ background: #14161d;
+ border: 1px solid #1e2130;
position: relative;
counter-increment: landing-step;
- transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+ transition: border-color 0.3s, transform 0.3s;
}
.landing-step-card:hover {
- background: rgba(255, 255, 255, 0.06);
- border-color: rgba(6, 182, 212, 0.15);
+ border-color: rgba(34, 211, 238, 0.2);
}
.landing-step-card::before {
content: counter(landing-step, decimal-leading-zero);
- font-family: 'JetBrains Mono', monospace;
+ font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.7rem;
font-weight: 600;
- color: #22d3ee;
+ color: #67e8f9;
opacity: 0.6;
letter-spacing: 0.05em;
}
@@ -834,7 +778,7 @@
.landing-step-card p {
font-size: 0.9rem;
- color: #a0a0b0;
+ color: #848b9b;
line-height: 1.65;
}
@@ -843,8 +787,8 @@
height: 120px;
border-radius: 10px;
margin-top: 1.25rem;
- background: hsl(228, 10%, 10%);
- border: 1px solid hsl(228, 8%, 16%);
+ background: #0c0d10;
+ border: 1px solid #1e2130;
display: flex;
align-items: center;
justify-content: center;
@@ -864,20 +808,20 @@
padding: 6px 10px;
border-radius: 6px;
font-size: 0.6rem;
- font-family: 'JetBrains Mono', monospace;
+ font-family: 'IBM Plex Sans', sans-serif;
white-space: nowrap;
}
.landing-mock-node.start {
- background: rgba(6, 182, 212, 0.15);
- color: #22d3ee;
- border: 1px solid rgba(6, 182, 212, 0.2);
+ background: rgba(34, 211, 238, 0.15);
+ color: #67e8f9;
+ border: 1px solid rgba(34, 211, 238, 0.2);
}
.landing-mock-node.step {
background: rgba(255, 255, 255, 0.03);
- color: #a0a0b0;
- border: 1px solid rgba(255, 255, 255, 0.06);
+ color: #848b9b;
+ border: 1px solid #1e2130;
}
.landing-mock-connector {
@@ -885,7 +829,7 @@
display: flex;
align-items: center;
justify-content: center;
- color: #5a5a6e;
+ color: #5a6170;
font-size: 0.7rem;
}
@@ -903,17 +847,17 @@
align-items: center;
gap: 6px;
font-size: 0.6rem;
- font-family: 'JetBrains Mono', monospace;
+ font-family: 'IBM Plex Sans', sans-serif;
}
.landing-mock-chat-line .label {
- color: #22d3ee;
+ color: #67e8f9;
font-weight: 600;
min-width: 55px;
}
.landing-mock-chat-line .text {
- color: #a0a0b0;
+ color: #848b9b;
}
.landing-mock-chat-line.doc .label {
@@ -930,25 +874,25 @@
}
.landing-mock-ticket-header {
- font-family: 'JetBrains Mono', monospace;
+ font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.6rem;
- color: #22d3ee;
+ color: #67e8f9;
font-weight: 600;
padding-bottom: 0.35rem;
- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+ border-bottom: 1px solid #1e2130;
margin-bottom: 0.15rem;
}
.landing-mock-ticket-line {
font-size: 0.55rem;
- font-family: 'JetBrains Mono', monospace;
- color: #a0a0b0;
+ font-family: 'IBM Plex Sans', sans-serif;
+ color: #848b9b;
display: flex;
gap: 6px;
}
.landing-mock-ticket-line .time {
- color: #5a5a6e;
+ color: #5a6170;
min-width: 35px;
}
@@ -967,14 +911,13 @@
.landing-feature-card {
padding: 2rem;
border-radius: 16px;
- background: rgba(255, 255, 255, 0.03);
- border: 1px solid rgba(255, 255, 255, 0.06);
- transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
+ background: #14161d;
+ border: 1px solid #1e2130;
+ transition: border-color 0.3s ease, transform 0.3s ease;
}
.landing-feature-card:hover {
- background: rgba(255, 255, 255, 0.06);
- border-color: rgba(6, 182, 212, 0.15);
+ border-color: rgba(34, 211, 238, 0.2);
transform: translateY(-3px);
}
@@ -982,12 +925,12 @@
width: 40px;
height: 40px;
border-radius: 10px;
- background: rgba(6, 182, 212, 0.08);
+ background: rgba(34, 211, 238, 0.08);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
- color: #22d3ee;
+ color: #67e8f9;
}
.landing-feature-card h3 {
@@ -1000,13 +943,13 @@
.landing-feature-card p {
font-size: 0.875rem;
- color: #a0a0b0;
+ color: #848b9b;
line-height: 1.6;
}
.landing-feature-card.highlight {
- border-color: rgba(6, 182, 212, 0.15);
- background: rgba(6, 182, 212, 0.03);
+ border-color: rgba(34, 211, 238, 0.15);
+ background: #14161d;
grid-column: span 2;
}
@@ -1022,20 +965,19 @@
.landing-pricing-card {
padding: 2.5rem 2rem;
border-radius: 16px;
- background: rgba(255, 255, 255, 0.03);
- border: 1px solid rgba(255, 255, 255, 0.06);
- transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+ background: #14161d;
+ border: 1px solid #1e2130;
+ transition: border-color 0.3s, transform 0.3s;
}
.landing-pricing-card:hover {
- border-color: rgba(255, 255, 255, 0.08);
+ border-color: rgba(255, 255, 255, 0.12);
}
.landing-pricing-card.featured {
- border-color: rgba(6, 182, 212, 0.2);
- background: rgba(6, 182, 212, 0.03);
+ border-color: #22d3ee;
+ background: #14161d;
position: relative;
- box-shadow: 0 0 40px rgba(6, 182, 212, 0.06);
}
.landing-pricing-card.featured::before {
@@ -1046,11 +988,11 @@
transform: translateX(-50%);
padding: 4px 14px;
border-radius: 100px;
- background: linear-gradient(135deg, #06b6d4, #22d3ee);
- font-family: 'JetBrains Mono', monospace;
+ background: #22d3ee;
+ font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.65rem;
font-weight: 600;
- color: #000;
+ color: #fff;
letter-spacing: 0.05em;
text-transform: uppercase;
}
@@ -1065,7 +1007,7 @@
.landing-pricing-target {
font-size: 0.8rem;
- color: #5a5a6e;
+ color: #5a6170;
margin-bottom: 1.5rem;
}
@@ -1084,20 +1026,17 @@
}
.landing-pricing-card.featured .landing-pricing-price .amount {
- background: linear-gradient(135deg, #22d3ee, #67e8f9);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+ color: #67e8f9;
}
.landing-pricing-price .period {
font-size: 0.85rem;
- color: #5a5a6e;
+ color: #5a6170;
}
.landing-pricing-note {
font-size: 0.8rem;
- color: #5a5a6e;
+ color: #5a6170;
margin-bottom: 2rem;
}
@@ -1112,7 +1051,7 @@
.landing-pricing-features li {
font-size: 0.875rem;
- color: #a0a0b0;
+ color: #848b9b;
display: flex;
align-items: flex-start;
gap: 0.6rem;
@@ -1135,13 +1074,13 @@
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
- transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+ transition: opacity 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
width: 100%;
}
.landing-pricing-btn.outline {
- color: #f0f0f5;
- border: 1px solid hsl(228, 8%, 16%);
+ color: #e2e5eb;
+ border: 1px solid #1e2130;
background: transparent;
}
@@ -1151,14 +1090,13 @@
}
.landing-pricing-btn.filled {
- color: #000;
- background: linear-gradient(135deg, #06b6d4, #22d3ee);
- box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
+ color: #fff;
+ background: #22d3ee;
border: none;
}
.landing-pricing-btn.filled:hover {
- box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
+ opacity: 0.9;
transform: translateY(-1px);
}
@@ -1166,11 +1104,11 @@
text-align: center;
margin-top: 2rem;
font-size: 0.85rem;
- color: #5a5a6e;
+ color: #5a6170;
}
.landing-pricing-enterprise a {
- color: #22d3ee;
+ color: #67e8f9;
text-decoration: none;
}
@@ -1192,7 +1130,7 @@
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.01em;
- color: #f0f0f5;
+ color: #e2e5eb;
font-style: italic;
margin-bottom: 1.5rem;
position: relative;
@@ -1205,7 +1143,7 @@
opacity: 0.3;
vertical-align: super;
margin-right: 1rem;
- top: -2.5rem;
+ top: -2.5rem;
font-family: 'Bricolage Grotesque', sans-serif;
line-height: 1;
}
@@ -1225,11 +1163,11 @@
.landing-testimonial-author {
font-size: 0.9rem;
- color: #5a5a6e;
+ color: #5a6170;
}
.landing-testimonial-author strong {
- color: #a0a0b0;
+ color: #848b9b;
font-weight: 600;
}
@@ -1240,29 +1178,22 @@
position: relative;
}
+/* Removed radial gradient pseudo-element */
.landing-cta-section::before {
- content: '';
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- width: 700px;
- height: 400px;
- background: radial-gradient(ellipse, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
- pointer-events: none;
+ display: none;
}
.landing-cta-section h2 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(2rem, 4vw, 2.75rem);
- font-weight: 700;
+ font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 1rem;
}
.landing-cta-section>p {
font-size: 1.1rem;
- color: #a0a0b0;
+ color: #848b9b;
max-width: 500px;
margin: 0 auto 2rem;
line-height: 1.7;
@@ -1279,9 +1210,9 @@
flex: 1;
padding: 0.85rem 1.25rem;
border-radius: 10px;
- border: 1px solid hsl(228, 8%, 16%);
- background: hsl(228, 10%, 10%);
- color: #f0f0f5;
+ border: 1px solid #1e2130;
+ background: #14161d;
+ color: #e2e5eb;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.9rem;
outline: none;
@@ -1289,17 +1220,17 @@
}
.landing-cta-email-input::placeholder {
- color: #5a5a6e;
+ color: #5a6170;
}
.landing-cta-email-input:focus {
- border-color: #06b6d4;
- box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
+ border-color: #22d3ee;
+ box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}
.landing-cta-fine-print {
font-size: 0.75rem;
- color: #5a5a6e;
+ color: #5a6170;
margin-top: 1rem;
}
@@ -1317,7 +1248,7 @@
/* ---- FOOTER ---- */
.landing-footer {
- border-top: 1px solid rgba(255, 255, 255, 0.06);
+ border-top: 1px solid #1e2130;
padding: 3rem 2rem;
}
@@ -1339,7 +1270,7 @@
.landing-footer-copy {
font-size: 0.8rem;
- color: #5a5a6e;
+ color: #5a6170;
}
.landing-footer-links {
@@ -1352,13 +1283,13 @@
.landing-footer-links a {
font-size: 0.8rem;
- color: #5a5a6e;
+ color: #5a6170;
text-decoration: none;
transition: color 0.2s;
}
.landing-footer-links a:hover {
- color: #a0a0b0;
+ color: #848b9b;
}
/* ---- ANIMATIONS ---- */
@@ -1417,13 +1348,13 @@
display: block;
width: 22px;
height: 2px;
- background: #a0a0b0;
+ background: #848b9b;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.landing-hamburger:hover span {
- background: #f0f0f5;
+ background: #e2e5eb;
}
.landing-hamburger.open span:nth-child(1) {
@@ -1444,9 +1375,8 @@
flex-direction: column;
gap: 0;
padding: 0.5rem 1.5rem 1.5rem;
- background: rgba(14, 15, 24, 0.95);
- backdrop-filter: blur(20px) saturate(1.2);
- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+ background: rgba(12, 13, 16, 0.98);
+ border-bottom: 1px solid #1e2130;
}
.landing-mobile-menu a {
@@ -1454,14 +1384,14 @@
padding: 0.875rem 0;
font-size: 1rem;
font-weight: 500;
- color: #a0a0b0;
+ color: #848b9b;
text-decoration: none;
transition: color 0.2s;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.landing-mobile-menu a:hover {
- color: #f0f0f5;
+ color: #e2e5eb;
}
.landing-mobile-menu a:last-child {