/* Dealer Software Solutions - Unified Styles ========================================= Theme Usage: - Default (blue): No class needed - used for DealerOS - Violet theme: Add class="theme-violet" to - used for LoyaltyLink - Red theme: Add class="theme-red" to - used for Bridge - Gold theme: Add class="theme-gold" to - used for MST Example: */ :root { /* Tailwind Slate Scale */ --slate-950: #020617; --slate-900: #0f172a; --slate-800: #1e293b; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b; --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0; --slate-100: #f1f5f9; --slate-50: #f8fafc; /* Tailwind Violet Scale */ --violet-950: #2e1065; --violet-900: #4c1d95; --violet-800: #5b21b6; --violet-700: #6d28d9; --violet-600: #7c3aed; --violet-500: #8b5cf6; --violet-400: #a78bfa; --violet-300: #c4b5fd; /* Tailwind Red Scale */ --red-950: #450a0a; --red-900: #7f1d1d; --red-800: #991b1b; --red-700: #b91c1c; --red-600: #dc2626; --red-500: #ef4444; --red-400: #f87171; --red-300: #fca5a5; /* Toyota Red (custom) */ --toyota-red: #eb0a1e; --toyota-red-light: #ff2d3b; --toyota-red-dark: #c7081a; /* Tailwind Blue Scale */ --blue-950: #172554; --blue-900: #1e3a8a; --blue-800: #1e40af; --blue-700: #1d4ed8; --blue-600: #2563eb; --blue-500: #3b82f6; --blue-400: #60a5fa; --blue-300: #93c5fd; /* Tailwind Amber/Gold Scale */ --amber-950: #78350f; --amber-700: #d97706; --amber-500: #f59e0b; --amber-400: #fbbf24; /* Semantic Colors */ --emerald-500: #10b981; --emerald-400: #34d399; /* === Base Colors (shared across all themes) === */ --color-bg: var(--slate-950); --color-bg-elevated: var(--slate-900); --color-bg-card: var(--slate-800); --color-bg-muted: var(--slate-700); --color-border: var(--slate-700); --color-border-muted: var(--slate-800); --color-text: var(--slate-200); --color-text-muted: var(--slate-400); --color-text-dim: var(--slate-500); /* === Default Theme (Blue - DealerOS) === */ --color-accent: var(--blue-500); --color-accent-hover: var(--blue-400); --color-accent-muted: var(--blue-600); --color-accent-subtle: var(--blue-950); --color-ring: var(--blue-500); --color-glow: var(--blue-500); --accent-rgb: 59, 130, 246; /* Status colors */ --color-success: var(--emerald-500); --color-error: var(--red-500); --color-info: var(--blue-500); --color-warning: var(--amber-500); /* Typography */ --font-sans: "Inter", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Space Mono", "Fira Code", monospace; /* Shadows - Tailwind-inspired */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-glow: 0 0 40px -10px var(--color-glow); /* Border Radius - Tailwind scale */ --radius-sm: 0.125rem; --radius: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* === Red Theme (Bridge) === */ .theme-red { --color-accent: var(--toyota-red); --color-accent-hover: var(--toyota-red-light); --color-accent-muted: var(--toyota-red-dark); --color-accent-subtle: var(--red-950); --color-ring: var(--toyota-red); --color-glow: var(--toyota-red); --accent-rgb: 235, 10, 30; } /* === Violet Theme (LoyaltyLink) === */ .theme-violet { --color-accent: var(--violet-500); --color-accent-hover: var(--violet-400); --color-accent-muted: var(--violet-600); --color-accent-subtle: var(--violet-900); --color-ring: var(--violet-500); --color-glow: var(--violet-500); --accent-rgb: 139, 92, 246; } /* === Gold Theme (MST) === */ .theme-gold { --color-accent: var(--amber-500); --color-accent-hover: var(--amber-400); --color-accent-muted: var(--amber-700); --color-accent-subtle: var(--amber-950); --color-ring: var(--amber-500); --color-glow: var(--amber-500); --accent-rgb: 245, 158, 11; } .theme-gold .btn-primary { color: var(--slate-950); } .theme-gold .nav-cta { color: var(--slate-950); } .theme-gold .spinner { border-color: rgb(0 0 0 / 0.3); border-top-color: var(--slate-950); } /* Reset & Base ========================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.6; overflow-x: hidden; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; } /* Subtle noise texture */ body::before { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.02; pointer-events: none; z-index: 1000; } main { flex: 1; } img { max-width: 100%; height: auto; display: block; } /* Selection */ ::selection { background: var(--color-accent); color: white; } /* Container ========================================= */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; } .container-wide { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 1.5rem; } .container-narrow { width: 100%; max-width: 768px; margin-inline: auto; padding-inline: 1.5rem; } @media (max-width: 640px) { .container, .container-wide, .container-narrow { padding-inline: 1rem; } } /* Navigation ========================================= */ nav { position: fixed; inset-inline: 0; top: 0; z-index: 100; padding-block: 1rem; background: linear-gradient(to bottom, var(--color-bg), transparent); transition: background var(--transition), padding var(--transition), border-color var(--transition); } nav.scrolled { background: rgb(2 6 23 / 0.9); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-bottom: 1px solid var(--color-border-muted); padding-block: 0.75rem; } .nav-menu { display: contents; } .nav-inner { display: flex; align-items: center; gap: 1rem; } .logo { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--color-text); flex-shrink: 0; } .logo-mark { width: 2.5rem; height: 2.5rem; background: var(--color-bg-card); border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--radius-xl); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-sm); } .logo-mark svg { width: 1.25rem; height: 1.25rem; color: var(--color-accent-hover); } .logo-text { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.025em; } .nav-links { flex: 1; display: flex; justify-content: center; gap: 1.5rem; list-style: none; } .nav-links a { color: var(--color-text-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color var(--transition-fast); white-space: nowrap; position: relative; } .nav-links a::after { content: ""; position: absolute; inset-inline: 0; bottom: -4px; height: 2px; background: var(--color-accent); border-radius: var(--radius-full); transform: scaleX(0); transition: transform var(--transition); } .nav-links a:hover { color: var(--color-text); } .nav-links a:hover::after { transform: scaleX(1); } .nav-cta { background: var(--color-accent); color: white; padding: 0.625rem 1.25rem; border-radius: var(--radius-lg); text-decoration: none; font-size: 0.875rem; font-weight: 600; transition: all var(--transition); white-space: nowrap; flex-shrink: 0; box-shadow: var(--shadow); } .nav-cta:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md), var(--shadow-glow); } .mobile-menu-btn { display: none; background: transparent; border: none; color: var(--color-text); cursor: pointer; padding: 0.5rem; margin: -0.5rem; margin-left: auto; border-radius: var(--radius-lg); transition: background var(--transition-fast); } .mobile-menu-btn:hover { background: var(--color-bg-card); } /* Hero ========================================= */ .hero { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: 7.5rem 0 5rem; position: relative; overflow: hidden; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient( rgb(var(--accent-rgb) / 0.03) 1px, transparent 1px ), linear-gradient(90deg, rgb(var(--accent-rgb) / 0.03) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: radial-gradient(ellipse 80% 60% at center, black, transparent); -webkit-mask-image: radial-gradient( ellipse 80% 60% at center, black, transparent ); } .hero-glow { position: absolute; top: 10%; left: 50%; translate: -50% 0; width: 50rem; height: 40rem; background: radial-gradient( ellipse, rgb(var(--accent-rgb) / 0.12), transparent 60% ); pointer-events: none; filter: blur(40px); } .hero-content { position: relative; text-align: center; max-width: 56rem; margin-inline: auto; padding-inline: 1rem; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-bg-card); border: 1px solid var(--color-border); padding: 0.5rem 1rem; border-radius: var(--radius-full); font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: 1.5rem; animation: fade-in-up 0.6s ease both; } .hero-badge-dot { width: 0.5rem; height: 0.5rem; background: var(--color-success); border-radius: var(--radius-full); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; } .hero h1 { font-size: clamp(2.25rem, 7vw, 4.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 1.25rem; animation: fade-in-up 0.6s ease 0.1s both; text-wrap: balance; } .hero h1 span { background: linear-gradient( 135deg, var(--color-accent-hover), var(--color-accent), var(--color-accent-hover) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.375rem); color: var(--color-text-muted); max-width: 38rem; margin-inline: auto; margin-bottom: 2rem; animation: fade-in-up 0.6s ease 0.2s both; text-wrap: balance; } .hero-cta-group { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; animation: fade-in-up 0.6s ease 0.3s both; } /* Animations ========================================= */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.95); } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } } @keyframes rotate { from { rotate: 0deg; } to { rotate: 360deg; } } @keyframes spin { to { rotate: 360deg; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Buttons ========================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; border-radius: var(--radius-xl); font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: all var(--transition); cursor: pointer; border: none; font-family: inherit; line-height: 1; } .btn svg { flex-shrink: 0; width: 1.125rem; height: 1.125rem; } .btn-primary { background: var(--color-accent); color: white; box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / 0.1); } .btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--shadow-glow); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { background: var(--color-text-dim); cursor: not-allowed; transform: none; box-shadow: none; opacity: 0.6; } .btn-secondary { background: var(--color-bg-card); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .btn-secondary:hover { background: var(--color-bg-muted); border-color: var(--color-text-dim); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--color-text-muted); padding: 0.625rem 1rem; } .btn-ghost:hover { background: var(--color-bg-card); color: var(--color-text); } /* Compliance/Certification Badges ========================================= */ .compliance-badges, .certification-badges { display: flex; justify-content: center; gap: 1rem; margin-top: 2.5rem; animation: fade-in-up 0.6s ease 0.4s both; flex-wrap: wrap; } .compliance-badge, .certification-badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-text-dim); } .compliance-badge svg, .certification-badge svg { width: 1rem; height: 1rem; color: var(--color-success); flex-shrink: 0; } /* Sections ========================================= */ .section { padding-block: 6.25rem; position: relative; } .section-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 1rem; font-weight: 500; } .section-title { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 1rem; text-wrap: balance; } .section-subtitle { font-size: 1rem; color: var(--color-text-muted); max-width: 38rem; margin-bottom: 3rem; line-height: 1.7; } /* How It Works ========================================= */ .how-it-works-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .step-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: 1.75rem 1.25rem; position: relative; transition: all var(--transition-slow); } .step-card:hover { border-color: var(--color-text-dim); transform: translateY(-4px); box-shadow: var(--shadow-xl); } .step-number { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700; color: var(--color-accent); opacity: 0.2; position: absolute; top: 0.75rem; right: 1rem; line-height: 1; } .step-icon { width: 3rem; height: 3rem; background: var(--color-bg-elevated); border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--radius-xl); display: grid; place-items: center; margin-bottom: 1rem; font-size: 1.5rem; } .step-card h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.625rem; } .step-card p { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.6; } /* Use Cases / Product Cards ========================================= */ .use-cases-grid, .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .products-grid-4 { grid-template-columns: repeat(4, 1fr); } .use-case-card, .product-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: 1.75rem; transition: all var(--transition-slow); position: relative; overflow: hidden; } a.product-card { text-decoration: none; color: inherit; display: block; } .use-case-card::before, .product-card::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: linear-gradient( 90deg, var(--card-accent, var(--color-accent)), transparent ); opacity: 0; transition: opacity var(--transition); } .use-case-card:hover, .product-card:hover { border-color: var(--color-text-dim); transform: translateY(-4px); box-shadow: var(--shadow-xl); } .use-case-card:hover::before, .product-card:hover::before { opacity: 1; } .use-case-icon, .product-icon { width: 3rem; height: 3rem; background: var(--color-bg-elevated); border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--radius-xl); display: grid; place-items: center; margin-bottom: 1rem; font-size: 1.5rem; } .product-icon svg { width: 1.5rem; height: 1.5rem; color: var(--card-accent, var(--color-accent)); } .use-case-card h3, .product-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.625rem; } .use-case-card p, .product-card p { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.6; margin-bottom: 1rem; } .product-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.375rem 0.75rem; background: var(--color-bg); border-radius: var(--radius-md); color: var(--color-text-dim); } /* Benefits Grid ========================================= */ .benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .benefit-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: 1.75rem; transition: all var(--transition-slow); } .benefit-card:hover { border-color: var(--color-text-dim); transform: translateY(-4px); box-shadow: var(--shadow-xl); } .benefit-icon { width: 3rem; height: 3rem; background: var(--color-bg-elevated); border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--radius-xl); display: grid; place-items: center; margin-bottom: 1rem; font-size: 1.5rem; } .benefit-icon svg { width: 1.5rem; height: 1.5rem; color: var(--color-accent); } .benefit-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.625rem; } .benefit-card p { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.6; } /* Features Section ========================================= */ .features-section { background: var(--color-bg-elevated); border-block: 1px solid var(--color-border); } .features-header { text-align: center; margin-bottom: 3.75rem; } .features-header .section-subtitle { margin-inline: auto; margin-bottom: 0; } .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .feature-item { display: flex; gap: 1rem; } .feature-number { font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-accent); flex-shrink: 0; padding-top: 0.125rem; font-weight: 500; } .feature-content h4 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.5rem; } .feature-content p { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.6; } /* Compliance Section ========================================= */ .compliance-section { text-align: center; } .compliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; } .compliance-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: 1.75rem; text-align: left; } .compliance-card h4 { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.875rem; } .compliance-card h4 svg { width: 1.375rem; height: 1.375rem; color: var(--color-success); flex-shrink: 0; } .compliance-card ul { list-style: none; color: var(--color-text-muted); font-size: 0.8125rem; } .compliance-card li { padding-block: 0.5rem; border-bottom: 1px solid var(--color-border-muted); } .compliance-card li:last-child { border-bottom: none; padding-bottom: 0; } /* Integration Section ========================================= */ .integration-section { text-align: center; } .integration-badges { display: flex; justify-content: center; gap: 1.25rem; margin-bottom: 2rem; flex-wrap: wrap; } .integration-badge { display: inline-flex; align-items: center; gap: 0.875rem; background: var(--color-bg-card); border: 1px solid var(--color-border); padding: 1rem 1.5rem; border-radius: var(--radius-2xl); } .integration-icon { width: 3rem; height: 3rem; background: linear-gradient(135deg, #1e3a5f, #2d5a87); border-radius: var(--radius-xl); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.875rem; color: white; flex-shrink: 0; } .integration-divider { width: 1px; height: 2.25rem; background: var(--color-border); } .integration-text { font-size: 0.8125rem; color: var(--color-text-muted); text-align: left; } .integration-text strong { display: block; color: var(--color-text); font-weight: 600; font-size: 0.875rem; } .integration-arrow { color: var(--color-text-dim); font-size: 1.25rem; } /* Services Grid (MST) ========================================= */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .service-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: 2rem; transition: all var(--transition-slow); } .service-card:hover { border-color: var(--color-text-dim); transform: translateY(-4px); box-shadow: var(--shadow-xl); } .service-icon { width: 3.5rem; height: 3.5rem; background: var(--color-accent-subtle); border: 1px solid rgb(var(--accent-rgb) / 0.2); border-radius: var(--radius-xl); display: grid; place-items: center; margin-bottom: 1.25rem; } .service-icon svg { width: 1.75rem; height: 1.75rem; color: var(--color-accent); } .service-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; } .service-card > p { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.25rem; } .service-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .service-features li { position: relative; padding-left: 1.25rem; color: var(--color-text-muted); font-size: 0.875rem; } .service-features li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 0.375rem; height: 0.375rem; background: var(--color-accent); border-radius: var(--radius-full); } /* Security Section (MST) ========================================= */ .security-section { background: var(--color-bg); } .security-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .security-text p { color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; margin-bottom: 1.25rem; } .security-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .stat { text-align: center; } .stat-number { display: block; font-size: 2rem; font-weight: 700; color: var(--color-accent); line-height: 1; margin-bottom: 0.5rem; } .stat-label { font-size: 0.75rem; color: var(--color-text-dim); line-height: 1.4; } .security-features { display: flex; flex-direction: column; gap: 1.25rem; } .security-feature { display: flex; gap: 1rem; padding: 1.25rem; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); transition: all var(--transition); } .security-feature:hover { border-color: var(--color-text-dim); background: var(--color-bg-elevated); } .security-feature-icon { width: 3rem; height: 3rem; background: var(--color-accent-subtle); border: 1px solid rgb(var(--accent-rgb) / 0.2); border-radius: var(--radius-lg); display: grid; place-items: center; flex-shrink: 0; } .security-feature-icon svg { width: 1.25rem; height: 1.25rem; color: var(--color-accent); } .security-feature h4 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.25rem; } .security-feature p { color: var(--color-text-muted); font-size: 0.8125rem; line-height: 1.5; margin: 0; } /* Products Tie-In Section ========================================= */ .products-tie-in { background: var(--color-bg-elevated); border-block: 1px solid var(--color-border); } /* CTA Section ========================================= */ .cta-section { text-align: center; padding-block: 7.5rem; } .cta-box { background: linear-gradient( 135deg, var(--color-bg-card), var(--color-bg-elevated) ); border: 1px solid var(--color-border); border-radius: var(--radius-3xl); padding: 3.75rem 2rem; position: relative; overflow: hidden; } .cta-box::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( circle at center, rgb(var(--accent-rgb) / 0.06), transparent 50% ); animation: rotate 20s linear infinite; } .cta-content { position: relative; } .cta-box h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; margin-bottom: 0.875rem; letter-spacing: -0.025em; } .cta-box p { color: var(--color-text-muted); font-size: 1rem; margin-bottom: 1.75rem; max-width: 32rem; margin-inline: auto; } /* Footer ========================================= */ footer { border-top: 1px solid var(--color-border); padding-block: 2.5rem; margin-top: auto; } .footer-inner { display: flex; flex-direction: column; gap: 2rem; } .footer-top { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } .footer-brand { display: flex; align-items: center; gap: 0.75rem; } .footer-brand .logo-mark { width: 2.25rem; height: 2.25rem; box-shadow: none; } .footer-brand .logo-mark svg { width: 1.125rem; height: 1.125rem; } .footer-brand strong { font-size: 0.9375rem; } .footer-tagline { font-size: 0.8125rem; color: var(--color-text-dim); margin-top: 0.125rem; } .footer-contact a { color: var(--color-text); text-decoration: none; font-size: 0.875rem; transition: color var(--transition-fast); } .footer-contact a:hover { color: var(--color-accent-hover); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-muted); } .footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer-links a { color: var(--color-text-muted); text-decoration: none; font-size: 0.8125rem; transition: color var(--transition-fast); white-space: nowrap; } .footer-links a:hover { color: var(--color-text); } .footer-legal { color: var(--color-text-dim); font-size: 0.8125rem; white-space: nowrap; } /* Contact Page Styles ========================================= */ .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3.75rem; align-items: start; } .contact-info { position: sticky; top: 7.5rem; } .contact-info h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 1rem; } .contact-info > p { font-size: 1.0625rem; color: var(--color-text-muted); margin-bottom: 2.25rem; line-height: 1.7; } .contact-methods { display: flex; flex-direction: column; gap: 1.25rem; } .contact-method { display: flex; align-items: flex-start; gap: 0.875rem; } .contact-method-icon { width: 3rem; height: 3rem; background: var(--color-bg-card); border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--radius-xl); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-sm); } .contact-method-icon svg { width: 1.25rem; height: 1.25rem; color: var(--color-accent-hover); } .contact-method-content h3 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.25rem; } .contact-method-content p { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 0; } .contact-method-content a { color: var(--color-text); text-decoration: none; transition: color var(--transition-fast); } .contact-method-content a:hover { color: var(--color-accent-hover); } /* Form Styles ========================================= */ .contact-form-wrapper { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: 2.25rem; } .form-header { margin-bottom: 1.75rem; } .form-header h2 { font-size: 1.375rem; font-weight: 600; margin-bottom: 0.375rem; } .form-header p { font-size: 0.875rem; color: var(--color-text-muted); } .form-group { margin-bottom: 1.25rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--color-text); } label .required { color: var(--color-error); } input, select, textarea { width: 100%; padding: 0.875rem 1rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); color: var(--color-text); font-family: var(--font-sans); font-size: 0.9375rem; transition: all var(--transition-fast); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.15); } input::placeholder, textarea::placeholder { color: var(--color-text-dim); } select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.75rem; } select option { background: var(--color-bg-card); color: var(--color-text); } textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; } /* Form Messages ========================================= */ .form-message { padding: 0.875rem 1.125rem; border-radius: var(--radius-xl); margin-bottom: 1.25rem; display: none; font-size: 0.875rem; font-weight: 500; } .form-message.success { background: rgb(16 185 129 / 0.1); border: 1px solid var(--color-success); color: var(--emerald-400); display: flex; align-items: center; gap: 0.5rem; } .form-message.error { background: rgb(239 68 68 / 0.1); border: 1px solid var(--color-error); color: var(--red-400); display: flex; align-items: center; gap: 0.5rem; } /* Loading Spinner ========================================= */ .spinner { width: 1.25rem; height: 1.25rem; border: 2px solid rgb(255 255 255 / 0.3); border-radius: var(--radius-full); border-top-color: white; animation: spin 0.8s ease infinite; } /* Legal Pages ========================================= */ .page-header { margin-bottom: 2.5rem; } .page-header h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.875rem; } .page-header .last-updated { font-size: 0.875rem; color: var(--color-text-dim); } .legal-content { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: 2.5rem; } .legal-content h2 { font-size: 1.375rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 1.125rem; color: var(--color-text); } .legal-content h2:first-child { margin-top: 0; } .legal-content h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.875rem; color: var(--color-text); } .legal-content p { color: var(--color-text-muted); margin-bottom: 0.875rem; line-height: 1.7; } .legal-content ul, .legal-content ol { color: var(--color-text-muted); margin-bottom: 0.875rem; padding-left: 1.5rem; } .legal-content li { margin-bottom: 0.5rem; line-height: 1.6; } .legal-content a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } .legal-content a:hover { color: var(--color-accent-hover); text-decoration: underline; } .legal-content strong { color: var(--color-text); font-weight: 600; } .highlight-box { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.125rem 1.375rem; margin-block: 1.25rem; } .highlight-box p:last-child { margin-bottom: 0; } /* Problems Grid ========================================= */ .problems-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .problem-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: 1.75rem 1.5rem; transition: all var(--transition-slow); } .problem-card:hover { border-color: var(--color-text-dim); transform: translateY(-4px); box-shadow: var(--shadow-xl); } .problem-icon { width: 3rem; height: 3rem; background: var(--color-bg-elevated); border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--radius-xl); display: grid; place-items: center; margin-bottom: 1rem; } .problem-icon svg { width: 1.5rem; height: 1.5rem; color: var(--color-accent); } .problem-card h4 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.5rem; } .problem-card p { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.6; } /* Product Problem Label ========================================= */ .product-problem { font-size: 0.8125rem; color: var(--color-text-dim); margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border-muted); } .product-problem strong { color: var(--color-accent); font-weight: 600; } /* Custom Development Section ========================================= */ .custom-section { background: var(--color-bg-elevated); border-block: 1px solid var(--color-border); } .custom-content { max-width: 48rem; } .custom-intro { font-size: 1.125rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 2.5rem; } .custom-examples { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: 1.75rem; margin-bottom: 2.5rem; } .custom-examples h4 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-text); } .custom-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .custom-list li { position: relative; padding-left: 1.5rem; color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.5; } .custom-list li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 0.5rem; height: 0.5rem; background: var(--color-accent); border-radius: var(--radius-full); opacity: 0.6; } .custom-process h4 { font-size: 1rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--color-text); } .process-steps { display: flex; flex-direction: column; gap: 1.25rem; } .process-step { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; margin: -1rem; border-radius: var(--radius-xl); transition: background var(--transition-fast); } .process-step:hover { background: var(--color-bg-card); } .process-step .step-number { width: 2.5rem; height: 2.5rem; background: var(--color-accent); color: white; border-radius: var(--radius-full); display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; flex-shrink: 0; position: static; opacity: 1; } .process-step strong { display: block; font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--color-text); } .process-step p { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.5; margin: 0; } /* Accessible focus outlines ========================================= */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; } /* Mobile Responsiveness ========================================= */ /* Large Tablet */ @media (max-width: 1024px) { .nav-links { gap: 1.25rem; } .how-it-works-grid { grid-template-columns: repeat(2, 1fr); } .problems-grid { grid-template-columns: repeat(2, 1fr); } .security-content { grid-template-columns: 1fr; gap: 2.5rem; } .products-grid-4 { grid-template-columns: repeat(2, 1fr); } } /* Tablet */ @media (max-width: 900px) { .how-it-works-grid { grid-template-columns: repeat(2, 1fr); } .use-cases-grid, .products-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } .contact-info { position: static; } .services-grid { grid-template-columns: 1fr; } } /* Mobile */ @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } .mobile-menu-btn { display: block; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); padding: 1rem 1.5rem 1.5rem; flex-direction: column; gap: 0.5rem; } .nav-menu.open { display: flex; } .nav-menu .nav-links { display: flex; flex-direction: column; gap: 0; width: 100%; } .nav-menu .nav-links a { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-muted); font-size: 1rem; } .nav-menu .nav-links a::after { display: none; } .nav-menu .nav-cta { display: flex; margin-top: 0.75rem; text-align: center; justify-content: center; } .mobile-menu-btn.open svg path { stroke: var(--color-accent); } nav { background: rgb(2 6 23 / 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body::before { display: none; } .hero { padding: 6.25rem 0 3.75rem; min-height: auto; } .hero-content { padding: 0; } .section { padding-block: 3.75rem; } .section-subtitle { margin-bottom: 2.25rem; } .how-it-works-grid { grid-template-columns: 1fr; gap: 1rem; } .step-card { padding: 1.5rem 1.25rem; } .step-number { font-size: 2rem; } .features-grid { grid-template-columns: 1fr; gap: 1.5rem; } .compliance-grid { grid-template-columns: 1fr; } .benefits-grid { grid-template-columns: 1fr; } .security-stats { grid-template-columns: 1fr; gap: 1rem; } .stat { padding: 1rem; background: var(--color-bg-card); border-radius: var(--radius-xl); } .products-grid-4 { grid-template-columns: 1fr; } .cta-section { padding-block: 3.75rem; } .cta-box { padding: 2.5rem 1.25rem; border-radius: var(--radius-2xl); } .cta-box p { font-size: 0.9375rem; } .footer-top { flex-direction: column; text-align: center; } .footer-brand { flex-direction: column; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; gap: 1rem; } .footer-links { justify-content: center; } .contact-form-wrapper { padding: 1.5rem; } .form-row { grid-template-columns: 1fr; } .legal-content { padding: 1.5rem; } .integration-badges { flex-direction: column; align-items: center; } .integration-arrow { rotate: 90deg; } .btn { padding: 0.75rem 1.5rem; font-size: 0.875rem; width: 100%; } .hero-cta-group { flex-direction: column; align-items: center; } .hero-cta-group .btn { width: 100%; max-width: 17.5rem; } .problems-grid { grid-template-columns: 1fr; } .custom-intro { font-size: 1rem; } .custom-examples { padding: 1.5rem; } } /* Small Mobile */ @media (max-width: 480px) { .hero h1 { font-size: 2rem; } .hero-badge { font-size: 0.75rem; padding: 0.375rem 0.75rem; } .section-title { font-size: 1.625rem; } .logo-text { font-size: 1rem; } .logo-mark { width: 2.25rem; height: 2.25rem; } .logo-mark svg { width: 1.25rem; height: 1.25rem; } .compliance-badges, .certification-badges { gap: 0.75rem; } .compliance-badge, .certification-badge { font-size: 0.75rem; } .section { padding-block: 3rem; } .hero { padding: 5.625rem 0 3.125rem; } .hero h1, .section-title { line-height: 1.15; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }