/* ==========================================================================
KI-Miete Liquid Glass — design tokens
Single source of truth. See DESIGN.md §4 (brand color), §5 (glass),
§6 (shape and depth), §8 (spacing), §10 (motion).
========================================================================== */
:root {
/* Brand (DESIGN.md §4) */
--findaroo-royal: #00296b;
--findaroo-marian: #003f88;
--findaroo-blue: #00509d;
--findaroo-yellow: #fdc500;
--findaroo-gold: #ffd500;
--canvas: #f8f9fa;
--surface-solid: #ffffff;
--text-primary: #212529;
--text-heading: #333333;
--text-secondary: #666666;
--text-muted: #6c757d;
--status-success: #198754;
--status-danger: #dc3545;
/* --text-muted clears AA on white surfaces (4.68:1) but not against the
canvas itself (4.45:1). Text sitting directly on the canvas — the hero —
uses this darker step instead (5.18:1). DESIGN.md §11. */
--text-muted-on-canvas: #636b73;
/* Legacy aliases — kept so existing selectors keep resolving */
--royal-blue-traditional: var(--findaroo-royal);
--marian-blue: var(--findaroo-marian);
--polynesian-blue: var(--findaroo-blue);
--mikado-yellow: var(--findaroo-yellow);
--gold: var(--findaroo-gold);
/* Functional glass layer (DESIGN.md §5) — navigation, controls, popovers */
--glass-bg: rgba(255, 255, 255, 0.30);
--glass-elevated-bg: rgba(255, 255, 255, 0.40);
--glass-border: rgba(255, 255, 255, 0.46);
--glass-blur: 48px;
--glass-saturation: 220%;
--glass-shadow:
0 28px 80px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
--glass-noise-opacity: 0.05;
--glass-edge-strength: 0.45;
--light-angle: 45deg;
--light-intensity: 0.6;
/* Content layer (DESIGN.md §3) — calmer and more opaque than controls.
Page-level section framing only; never nested inside itself. */
--content-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82));
--content-border: rgba(255, 255, 255, 0.72);
--content-blur: 20px;
--content-saturation: 140%;
--content-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.07);
/* Shape (DESIGN.md §6) */
--radius-capsule: 999px;
--radius-region: 20px;
--radius-frame: 16px;
--radius-card: 12px;
--radius-control: 8px;
/* Spacing (DESIGN.md §8) */
--section-gap: 40px;
/* Motion (DESIGN.md §10) — 160–300ms for interface state change */
--motion-fast: 160ms;
--motion-base: 220ms;
--motion-slow: 300ms;
--ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
/* Minimum comfortable hit area (DESIGN.md §9, §11) */
--hit-area: 44px;
}
/* Anchored sections clear the fixed navbar (DESIGN.md §8) */
html {
scroll-behavior: smooth;
}
#how-it-works,
#why-different,
#made-in-europe,
#pricing {
scroll-margin-top: 96px;
}
/* General Styles */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--canvas);
background-image:
linear-gradient(rgba(248, 249, 250, 0.96), rgba(248, 249, 250, 0.96)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ctext x='15' y='40' font-size='25'%3E📄%3C/text%3E%3C/svg%3E");
background-size: auto, 96px 96px;
}
/* Navigation */
.navbar {
box-shadow: none;
padding: 0.25rem;
margin-top: 0.5rem;
background: transparent;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.navbar .container {
background: white;
border-radius: 50px;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}
.navbar-brand {
font-weight: 600;
font-size: 1.25rem;
}
.navbar-nav {
margin: 0 auto;
}
.nav-link {
font-weight: 500;
color: #4a4a4a !important;
padding: 0.35rem 0.75rem !important;
font-size: 0.95rem;
position: relative;
text-decoration: none;
border-radius: 50px;
/* match CTA pill radius */
border: 1px solid transparent;
/* prevent border flash on hover */
transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #4a4a4a;
transition: width 0.3s ease-in-out;
}
.nav-link:hover::after {
width: 100%;
}
/* Disable underline effect for navbar nav-links since they use glass hover */
.navbar .nav-link::after {
display: none !important;
}
/* Give primary navbar links a gray glass hover like Login */
.navbar .nav-link:hover {
color: #0b1220 !important;
border: 1px solid var(--glass-border);
background:
radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
-webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
}
.navbar .nav-link:hover::after {
width: 0 !important;
}
.navbar .btn-link {
text-decoration: none;
padding: 0.5rem 1rem;
/* match navbar CTA padding */
font-weight: 500;
font-size: 0.95rem;
position: relative;
border: 1px solid transparent;
/* prevent border flash on hover */
transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
border-radius: 50px;
/* pill when hovered */
}
.navbar .btn-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #4a4a4a;
transition: width 0.3s ease-in-out;
}
.navbar .btn-link:hover::after {
width: 100%;
}
/* Give Login a gray glass look on hover only (same as Back to Home CTA) */
.navbar .btn-link:hover {
color: #0b1220 !important;
border: 1px solid var(--glass-border);
background:
radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
-webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 20px 48px rgba(0, 0, 0, 0.22), 0 0 48px rgba(107, 114, 128, 0.40);
}
/* Suppress underline animation when glass hover is active */
.navbar .btn-link:hover::after {
width: 0 !important;
}
.navbar .btn-dark {
background-color: #f5f5f5;
border: none;
color: #000;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.95rem;
}
.navbar .btn-dark:hover {
background-color: #eeeeee;
color: #000;
}
/* Hero Section */
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
}
/* Hero copy sits on the bare canvas, not on a white surface. */
.hero-section .text-muted,
.hero-section .reassurance-text {
color: var(--text-muted-on-canvas) !important;
}
/* Ensure hero copy elements align perfectly on the left edge */
.hero-copy {
max-width: 560px;
margin-left: 0;
}
.hero-copy h1,
.hero-copy .lead,
.hero-copy .cta-cluster,
.hero-copy .reassurance-text,
.hero-copy .stats-badge,
.hero-copy .btn {
margin-left: 0;
text-align: left;
}
/* Remove any inherited center alignment on small screens */
@media (max-width: 767.98px) {
.hero-copy {
margin-left: 0;
}
.hero-copy h1,
.hero-copy .lead,
.hero-copy .cta-cluster,
.hero-copy .reassurance-text {
text-align: left !important;
}
}
.stats-badge {
display: inline-block;
padding: 0.5rem 1rem;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 50px;
font-weight: 500;
font-size: 0.9rem;
color: var(--text-secondary);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
}
h1 {
font-weight: 800 !important;
letter-spacing: -0.02em;
}
.lead {
font-size: 1.25rem;
line-height: 1.6;
}
/* Buttons */
.btn {
padding: 0.75rem 1.5rem;
font-weight: 600;
border-radius: 8px;
transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.btn-dark {
background-color: #000;
border-color: #000;
}
.btn-dark:hover {
background-color: #000;
border-color: #000;
opacity: 0.9;
transform: translateY(-1px);
}
.btn-outline-dark {
color: #000;
border: none;
background-color: #f5f5f5;
}
.btn-outline-dark:hover {
background-color: #eeeeee;
color: #000;
opacity: 0.9;
transform: translateY(-1px);
}
.cta-buttons .btn {
padding: 0.75rem 1.5rem;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
border: none;
transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
font-size: 0.95rem;
}
.cta-buttons .btn:hover {
transform: translateY(-1px);
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.cta-buttons .btn-outline-dark {
border-width: 1px;
}
.cta-cluster {
margin-top: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.cta-cluster .stats-badge {
background-color: #F4F6FA;
padding: 0.5rem 12px;
}
.reassurance-text {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.navbar .container {
border-radius: 20px;
padding: 1rem;
}
h1 {
font-size: 2.5rem !important;
}
.lead {
font-size: 1.1rem;
}
.cta-buttons .btn {
display: block;
width: 100%;
margin: 0.5rem 0;
}
}
@media (max-width: 640px) {
.cta-cluster {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.cta-cluster .btn {
width: 100%;
}
}
/* Feature cards styling */
.features-section {
background-color: #f8f9fa;
}
.feature-card {
background: white;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.feature-icon {
color: #0d6efd;
}
/* Footer styles (copied from dashboard to match exactly) */
.footer {
margin-bottom: 0;
padding-bottom: 4rem;
/* Match Dashboard bottom spacing */
}
.footer .card {
background: white;
border-radius: 20px;
border: 2px solid transparent;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin: 0 auto;
transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.footer .card:hover {
border-color: transparent;
transform: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.footer .card-body {
padding: 1.5rem;
}
/* The footer shares the page frame with .content-section rather than living in
its own 90% container: same 1200px cap, and the same edge-to-edge behaviour
below that width. Previously the card carried its own max-width and centred
independently, so at 390px the sections ran 0..390 while the footer sat at
32..359. The card now simply fills the frame, as it does in dash.findaroo. */
.footer .container {
max-width: 1200px;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
}
.footer .card {
max-width: none;
width: 100%;
}
.footer .footer-legal-card {
margin-top: var(--section-gap);
border-radius: 16px;
}
.footer .footer-legal-card .card-body {
padding: 0.55rem 0.75rem;
}
/* Content container styles */
.content-section {
background-color: white;
border-radius: 20px;
padding: 48px 0;
/* match dashboard tighter rhythm */
margin: 0 auto var(--section-gap);
/* uniform gap between sections */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
max-width: 1200px;
}
.content-section .container {
max-width: 90%;
margin: 0 auto;
}
/* Background for content section */
.content-background {
padding-top: 60px;
padding-bottom: var(--section-gap);
/* provide consistent breathing room */
}
/* Avoid doubling spacing: last section inside content background has no bottom margin */
.content-background .content-section:last-of-type {
margin-bottom: 0;
}
/* When a content wrapper follows a vision block, keep spacing consistent with other blocks */
.vision-section+.content-background {
padding-top: 0;
}
/* Legal-page content and footer cards follow the navbar's responsive frame at
every breakpoint, preserving equal gutters throughout. */
@media (max-width: 575.98px) {
body:has(.legal-navbar) > .content-background,
body:has(.legal-navbar) .footer .container {
max-width: calc(100% - 0.5rem);
margin-inline: auto;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
body:has(.legal-navbar) > .content-background,
body:has(.legal-navbar) .footer .container {
max-width: 540px;
margin-inline: auto;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
body:has(.legal-navbar) > .content-background,
body:has(.legal-navbar) .footer .container {
max-width: 720px;
margin-inline: auto;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
body:has(.legal-navbar) > .content-background,
body:has(.legal-navbar) .footer .container {
max-width: 960px;
margin-inline: auto;
}
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
body:has(.legal-navbar) > .content-background,
body:has(.legal-navbar) .footer .container {
max-width: 1140px;
margin-inline: auto;
}
}
@media (min-width: 1400px) {
body:has(.legal-navbar) > .content-background,
body:has(.legal-navbar) .footer .container {
max-width: 1192px;
margin-inline: auto;
}
}
/* Index-page regions mirror the navbar's responsive container frame too. */
@media (max-width: 575.98px) {
body:not(:has(.legal-navbar)) > .hero-section,
body:not(:has(.legal-navbar)) > .vision-section,
body:not(:has(.legal-navbar)) > .content-background > .content-section,
body:not(:has(.legal-navbar)) > .footer .container {
max-width: calc(100% - 0.5rem);
margin-inline: auto;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
body:not(:has(.legal-navbar)) > .hero-section,
body:not(:has(.legal-navbar)) > .vision-section,
body:not(:has(.legal-navbar)) > .content-background > .content-section,
body:not(:has(.legal-navbar)) > .footer .container {
max-width: 540px;
margin-inline: auto;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
body:not(:has(.legal-navbar)) > .hero-section,
body:not(:has(.legal-navbar)) > .vision-section,
body:not(:has(.legal-navbar)) > .content-background > .content-section,
body:not(:has(.legal-navbar)) > .footer .container {
max-width: 720px;
margin-inline: auto;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
body:not(:has(.legal-navbar)) > .hero-section,
body:not(:has(.legal-navbar)) > .vision-section,
body:not(:has(.legal-navbar)) > .content-background > .content-section,
body:not(:has(.legal-navbar)) > .footer .container {
max-width: 960px;
margin-inline: auto;
}
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
body:not(:has(.legal-navbar)) > .hero-section,
body:not(:has(.legal-navbar)) > .vision-section,
body:not(:has(.legal-navbar)) > .content-background > .content-section,
body:not(:has(.legal-navbar)) > .footer .container {
max-width: 1140px;
margin-inline: auto;
}
}
@media (min-width: 1400px) {
body:not(:has(.legal-navbar)) > .hero-section,
body:not(:has(.legal-navbar)) > .vision-section,
body:not(:has(.legal-navbar)) > .content-background > .content-section,
body:not(:has(.legal-navbar)) > .footer .container {
max-width: 1192px;
margin-inline: auto;
}
}
/* Section title styles */
.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
color: var(--text-heading);
}
/* Section-specific spacing tweaks */
#how-it-works .section-title {
margin-bottom: 0.75rem;
/* bring subheadline closer to title */
}
#why-different .section-title {
margin-bottom: 0.75rem;
/* match spacing with How it Works */
}
/* How It Works precise grid */
#how-it-works .how-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
/* stacked wrapper; rows inside manage columns */
row-gap: 56px;
/* gutter between rows per spec */
}
#how-it-works .how-row {
display: grid;
grid-template-columns: 5fr 7fr;
/* 5/7 split per spec */
grid-template-areas: 'text visual';
column-gap: 40px;
/* desktop gap per spec */
align-items: center;
/* vertically center text and visual */
}
/* Z layout for step 2 on desktop */
@media (min-width: 769px) {
#how-it-works .step-2 {
grid-template-columns: 7fr 5fr;
/* swap sizes to keep 5/7 split mirrored */
grid-template-areas: 'visual text';
/* swap order */
}
}
/* Stack per step on mobile */
/* Tablet gap */
@media (max-width: 1024px) {
#how-it-works .how-row {
column-gap: 24px;
}
}
@media (max-width: 768px) {
#how-it-works .how-row {
grid-template-columns: 1fr;
height: auto;
row-gap: 16px;
grid-template-areas:
'text'
'visual';
}
#how-it-works .how-row {
column-gap: 16px;
}
}
#how-it-works .how-text {
display: flex;
align-items: flex-start;
}
#how-it-works .text-block {
padding: 0;
/* keep to grid; spacing controlled by micro rhythm */
max-width: 480px;
/* fixed width per spec */
}
#how-it-works .text-block p:first-child {
/* number badge line */
margin-bottom: 8px;
/* number → heading spacing (we use first line as heading) */
}
#how-it-works .text-block p+p {
/* body after heading */
margin-top: 0;
}
#how-it-works .meta-link {
margin-top: 12px;
/* body → meta spacing */
color: var(--findaroo-blue);
text-decoration: none;
}
#how-it-works .meta-link:hover {
text-decoration: underline;
}
#how-it-works .how-text {
grid-area: text;
}
#how-it-works .how-visual {
grid-area: visual;
display: flex;
align-items: center;
}
/* Per-step horizontal alignment of text against its animation */
@media (min-width: 769px) {
#how-it-works .step-1 .text-block {
width: 100%;
text-align: left;
margin-left: auto;
}
#how-it-works .step-2 .text-block {
width: 100%;
text-align: left;
margin-right: auto;
}
#how-it-works .step-3 .text-block {
width: 100%;
text-align: left;
margin-left: auto;
}
}
/* Visual container: 560x320 transparent box (no borders/shadows) */
#how-it-works .visual-card {
width: 100%;
max-width: 560px;
aspect-ratio: 560 / 320;
/* 7:4 aspect */
height: auto;
border: none;
border-radius: 0;
padding: 0;
background: transparent;
overflow: hidden;
/* clip overflow */
}
#how-it-works .visual-canvas {
width: 100%;
height: 100%;
display: flex;
align-items: center;
/* center animation within invisible container */
justify-content: center;
overflow: hidden;
image-rendering: auto;
/* crisp */
}
#how-it-works .visual-fit {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#how-it-works .visual-fit-right {
align-items: center;
justify-content: flex-end;
/* for right-aligned button padding behavior */
}
/* Ensure internal animations scale to fit without overflow */
#how-it-works .mac-window,
#how-it-works .excel-window,
#how-it-works .download-scene,
#how-it-works .results-scene {
max-width: 100%;
max-height: 100%;
}
/* Ensure no visible borders/shadows on internals */
#how-it-works .mac-window,
#how-it-works .excel-window,
#how-it-works .download-scene,
#how-it-works .results-scene {
box-shadow: none !important;
border: none !important;
background: transparent !important;
}
/* Respect the 8px baseline rhythm in micro spacing */
#how-it-works .download-button {
margin-right: 0;
}
/* Mobile visual card scaling */
@media (max-width: 768px) {
#how-it-works .visual-card {
width: 100%;
height: auto;
aspect-ratio: 560 / 320;
/* preserve proportion */
}
#how-it-works .visual-canvas {
align-items: center;
}
}
/* Motion handling */
.reduced-motion * {
animation: none !important;
transition: none !important;
}
/* Only suppress the demonstration loops when motion is unwanted. Freezing
them at frame 0 would hide content whose first keyframe is transparent,
so this must not become a general "paused" state. */
@media (prefers-reduced-motion: reduce) {
.visual-paused * {
animation: none !important;
transition: none !important;
}
}
/* ==========================================================================
KI-Miete landing page — focused mobile pass (390px)
========================================================================== */
body:has(.hero-centered) .section-title-icon {
display: inline-block;
margin-left: 0.18em;
color: var(--findaroo-blue);
font-size: 0.72em;
line-height: 1;
vertical-align: 0.08em;
}
body:has(.hero-centered) .nav-emoji i {
width: 1em;
font-size: 0.9em;
text-align: center;
vertical-align: 0.08em;
}
body:has(.hero-centered) .section-intro {
text-align: center;
}
body:has(.hero-centered) .fcd-sequence-detail::after {
display: none;
}
body:has(.hero-centered) .scan-progress {
display: block;
width: min(190px, 70vw);
height: 6px;
margin-top: 0.55rem;
overflow: hidden;
border-radius: 999px;
background: #dce4ed;
}
body:has(.hero-centered) .scan-progress > span {
display: block;
width: 42%;
height: 100%;
border-radius: inherit;
background: var(--findaroo-blue);
animation: scan-progress 1.35s ease-in-out infinite alternate;
}
@keyframes scan-progress {
from { transform: translateX(-30%); }
to { transform: translateX(170%); }
}
body:has(.hero-centered) #how-it-works .status-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
min-height: 28px;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-weight: 750;
}
body:has(.hero-centered) #how-it-works .status-chip-success {
color: #08643f;
background: #e2f4eb;
}
body:has(.hero-centered) #how-it-works .status-chip-review {
color: #713d00;
background: #fff0cf;
}
body:has(.hero-centered) #how-it-works .document-proof {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: min(100%, 430px);
min-height: 260px;
padding: 20px 110px 20px 20px;
}
body:has(.hero-centered) #how-it-works .document-page {
position: relative;
width: 180px;
height: 230px;
padding: 28px 20px;
border: 1px solid #cfd7e1;
border-radius: 6px;
background: #fff;
box-shadow: 0 12px 30px rgba(24, 43, 69, 0.12);
}
body:has(.hero-centered) #how-it-works .document-page-number {
position: absolute;
top: 9px;
right: 12px;
color: #5b6470;
font-size: 12px;
font-weight: 700;
}
body:has(.hero-centered) #how-it-works .document-line {
display: block;
width: 76%;
height: 5px;
margin-bottom: 10px;
border-radius: 999px;
background: #d9e0e8;
}
body:has(.hero-centered) #how-it-works .document-line.line-long { width: 100%; }
body:has(.hero-centered) #how-it-works .document-line.line-short { width: 56%; }
body:has(.hero-centered) #how-it-works .document-highlight {
margin: 13px -8px 14px;
padding: 10px 8px 1px;
border: 2px solid #c27a00;
border-radius: 6px;
background: #fff4ce;
}
body:has(.hero-centered) #how-it-works .document-callout {
position: absolute;
top: 50%;
right: 4px;
display: flex;
align-items: center;
gap: 7px;
padding: 0.65rem 0.75rem;
color: #173554;
border: 1px solid #9eb6cf;
border-radius: 9px;
background: #edf5fc;
font-size: 14px;
font-weight: 800;
transform: translateY(-50%);
}
body:has(.hero-centered) #how-it-works .document-callout::before {
position: absolute;
top: 50%;
right: 100%;
width: 30px;
height: 2px;
background: #5f84aa;
content: "";
}
body:has(.hero-centered) #how-it-works .step-status-caption {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.7rem;
color: #4b5664;
font-size: 0.82rem;
font-weight: 700;
}
body:has(.hero-centered) #how-it-works .step-status-caption i {
color: var(--findaroo-blue);
}
body:has(.hero-centered) #why-different .database-risk b {
color: #243a56;
}
body:has(.hero-centered) #control .suite-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
body:has(.hero-centered) #control .suite-product-card {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: start;
column-gap: 12px;
padding: 20px;
}
body:has(.hero-centered) #control .suite-product-icon {
display: grid;
width: 38px;
height: 38px;
color: var(--findaroo-blue);
border-radius: 12px;
background: rgba(0, 80, 157, 0.09);
place-items: center;
}
body:has(.hero-centered) #control .suite-product-card strong,
body:has(.hero-centered) #control .suite-product-card > span:last-child {
grid-column: 2;
display: block;
}
body:has(.hero-centered) #control .suite-product-card strong {
margin: 0 0 6px;
line-height: 1.3;
}
body:has(.hero-centered) #control .suite-product-card > span:last-child {
color: #4b5664;
line-height: 1.55;
}
body:has(.hero-centered) #control .suite-founder-note {
margin: 24px 0 0;
padding: 20px;
border-left: 3px solid var(--findaroo-blue);
border-radius: 8px;
background: #edf3f8;
}
body:has(.hero-centered) #control .suite-founder-note blockquote {
margin: 0 0 8px;
color: #354352;
}
body:has(.hero-centered) #control .suite-founder-note figcaption {
color: #465362;
font-size: 0.82rem;
}
body:has(.hero-centered) #pilot .pricing-card {
padding: 20px;
}
body:has(.hero-centered) #pilot .pricing-header,
body:has(.hero-centered) #pilot .pricing-features {
height: auto;
min-height: 0;
padding: 0;
}
body:has(.hero-centered) #pilot .pricing-header {
margin: 0 0 16px;
text-align: left;
}
body:has(.hero-centered) #pilot .pricing-header h3 {
margin: 0;
}
body:has(.hero-centered) #pilot .pricing-features ul,
body:has(.hero-centered) #pilot .pricing-features li:last-child {
margin-bottom: 0;
}
body:has(.hero-centered) #pilot .pricing-features {
margin: 0;
}
body:has(.hero-centered) .reassurance-text,
body:has(.hero-centered) .footer-content,
body:has(.hero-centered) .footer-legal-links {
color: #4f5966;
}
body:has(.hero-centered) .footer {
padding: 0 0 3rem;
}
body:has(.hero-centered) .footer-content {
display: grid;
gap: 5px;
padding: 24px max(20px, 5%);
border-top: 1px solid #d4dae1;
font-size: 0.875rem;
line-height: 1.5;
}
body:has(.hero-centered) .footer-content strong {
color: #212529;
font-size: 1rem;
}
body:has(.hero-centered) .footer-legal-links {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
margin-top: 7px;
}
body:has(.hero-centered) .footer-legal-links a {
padding: 0;
color: #3f4b59;
border: 0;
border-radius: 0;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 767.98px) {
body:has(.hero-centered) .hero-headline {
min-height: auto;
padding-top: 120px;
}
body:has(.hero-centered) .hero-copy {
max-width: none;
width: 100%;
}
body:has(.hero-centered) .hero-copy h1,
body:has(.hero-centered) .section-title,
body:has(.hero-centered) #contact h2 {
text-align: center !important;
}
body:has(.hero-centered) .hero-copy .lead,
body:has(.hero-centered) .section-intro,
body:has(.hero-centered) .vision-statement,
body:has(.hero-centered) .content-section p,
body:has(.hero-centered) .content-section li,
body:has(.hero-centered) .content-section figcaption,
body:has(.hero-centered) .content-section blockquote,
body:has(.hero-centered) .difference-copy-column,
body:has(.hero-centered) .difference-world-label,
body:has(.hero-centered) .footer-content,
body:has(.hero-centered) .footer-legal-links {
text-align: left !important;
}
body:has(.hero-centered) .text-muted,
body:has(.hero-centered) .reassurance-text {
color: #5b6470 !important;
}
body:has(.hero-centered) .cta-cluster,
body:has(.hero-centered) .cta-buttons {
width: 100%;
}
body:has(.hero-centered) .cta-buttons {
display: grid !important;
grid-template-columns: 1fr;
gap: 10px !important;
}
body:has(.hero-centered) .hero-section .cta-buttons .btn {
width: 100% !important;
min-height: 48px;
margin: 0;
padding: 0.75rem 1rem !important;
text-align: center !important;
}
body:has(.hero-centered) .hero-section .cta-buttons .btn-cta-animated {
color: #fff !important;
border: 1px solid #00296b !important;
background: #00296b !important;
box-shadow: none !important;
}
body:has(.hero-centered) .hero-section .cta-buttons .btn-outline-dark {
color: #173554 !important;
border: 1px solid #173554 !important;
background: transparent !important;
box-shadow: none !important;
}
body:has(.hero-centered) .hero-animation {
margin-top: 28px;
}
body:has(.hero-centered) #how-it-works .section-intro {
margin-bottom: 24px !important;
}
body:has(.hero-centered) #how-it-works .how-grid {
display: grid;
row-gap: 32px;
margin: 0;
}
body:has(.hero-centered) #how-it-works .how-grid::before,
body:has(.hero-centered) #how-it-works .how-grid::after,
body:has(.hero-centered) #how-it-works .how-row::before,
body:has(.hero-centered) #how-it-works .how-row::after {
display: none !important;
content: none !important;
}
body:has(.hero-centered) #how-it-works .how-row,
body:has(.hero-centered) #how-it-works .how-text,
body:has(.hero-centered) #how-it-works .how-visual,
body:has(.hero-centered) #how-it-works .text-block {
width: 100%;
max-width: none;
margin: 0;
text-align: left !important;
}
body:has(.hero-centered) #how-it-works .how-row {
grid-template-areas: "text" "visual";
row-gap: 16px;
align-items: start;
}
body:has(.hero-centered) #how-it-works .text-block p:first-child {
color: #173554;
font-size: 1.05rem;
font-weight: 800;
}
body:has(.hero-centered) #how-it-works .visual-card {
aspect-ratio: auto;
overflow: visible;
}
body:has(.hero-centered) #how-it-works .visual-canvas,
body:has(.hero-centered) #how-it-works .visual-fit {
min-height: 230px;
justify-content: flex-start;
}
body:has(.hero-centered) #how-it-works .step-2 .visual-canvas:has(.excel-window),
body:has(.hero-centered) #how-it-works .step-2 .visual-fit:has(.excel-window) {
min-height: auto;
}
body:has(.hero-centered) #how-it-works .excel-window {
width: 100%;
max-height: none;
}
body:has(.hero-centered) #how-it-works .excel-content,
body:has(.hero-centered) #how-it-works .excel-rows,
body:has(.hero-centered) #how-it-works .excel-rows-container {
height: auto;
max-height: none;
overflow: visible;
transform: none !important;
}
body:has(.hero-centered) #how-it-works .excel-row.header {
display: none;
}
body:has(.hero-centered) #how-it-works .excel-row {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
min-height: 0;
padding: 14px;
border-bottom: 1px solid #d8e0e8;
background: #fff;
font-size: 14px;
}
body:has(.hero-centered) #how-it-works .excel-row > span {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
align-items: center;
min-width: 0;
padding: 0;
font-size: 14px;
text-align: left;
}
body:has(.hero-centered) #how-it-works .excel-row > span::before {
color: #5b6470;
content: attr(data-label);
font-size: 14px;
font-weight: 700;
}
body:has(.hero-centered) #how-it-works .excel-row > .status-chip {
grid-template-columns: 92px auto;
width: auto;
min-height: 0;
padding: 0;
border-radius: 0;
background: transparent;
}
body:has(.hero-centered) #how-it-works .status-chip b {
width: max-content;
padding: 0.28rem 0.65rem;
border-radius: 999px;
font-size: 14px;
font-weight: 750;
}
body:has(.hero-centered) #how-it-works .status-chip-success b {
color: #08643f;
background: #e2f4eb;
}
body:has(.hero-centered) #how-it-works .status-chip-review b {
color: #713d00;
background: #fff0cf;
}
body:has(.hero-centered) #how-it-works .document-proof {
justify-content: flex-start;
width: 100%;
padding: 12px 82px 12px 2px;
}
body:has(.hero-centered) #how-it-works .document-callout {
right: 0;
max-width: 126px;
}
body:has(.hero-centered) #how-it-works .step-status-caption {
text-align: left;
}
body:has(.hero-centered) #how-it-works .mac-content:has(.step-status-caption) {
text-align: left !important;
}
body:has(.hero-centered) #why-different .difference-visual {
overflow: visible;
}
body:has(.hero-centered) #why-different .difference-versus {
position: relative;
top: auto;
left: auto;
justify-self: center;
margin: 20px 0;
transform: none;
}
body:has(.hero-centered) #why-different .difference-world-fresh {
border-top: 1px solid rgba(0, 80, 157, 0.1);
}
body:has(.hero-centered) #why-different .difference-world > p,
body:has(.hero-centered) #why-different .difference-visual-assurance {
color: #465568;
text-align: left;
}
body:has(.hero-centered) #control .suite-flow {
grid-template-columns: 1fr;
gap: 16px;
}
body:has(.hero-centered) #control .suite-product-card {
text-align: left;
}
body:has(.hero-centered) #pilot .row > [class*="col-"] {
margin-bottom: 16px !important;
}
body:has(.hero-centered) #pilot .pricing-features li {
align-items: flex-start;
text-align: left;
}
body:has(.hero-centered) .footer-legal-links {
display: flex;
}
}
@media (prefers-reduced-motion: reduce) {
body:has(.hero-centered) .scan-progress > span {
width: 100%;
animation: none;
transform: none;
}
}
/* Step 3: align animation toward the text */
#how-it-works .step-3 .visual-fit {
justify-content: flex-start;
}
#how-it-works .step-3 .results-scene {
justify-content: flex-start;
}
/* Section CTA spacing */
#how-it-works .section-cta {
margin-top: 40px;
}
#how-it-works .section-cta .reassurance-text {
margin-top: 8px;
}
/* Text block styles */
.text-block {
padding: 2rem;
margin-bottom: 1rem;
}
.text-block.text-start {
padding-right: 3rem;
}
.text-block.text-end {
padding-left: 3rem;
text-align: right;
}
.text-block h3 {
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--text-heading);
font-size: 1.5rem;
}
.text-block p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 0;
}
/* Micro comparison under Privacy block */
.micro-compare {
max-width: 520px;
margin: 0 0 0 auto;
background: #fafbfc;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
overflow: hidden;
}
.micro-compare .micro-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 12px 16px 8px;
font-weight: 700;
color: #334155;
background: #ffffff;
}
.micro-compare .micro-col {
font-size: 0.95rem;
}
.micro-compare .micro-col-left {
text-align: center;
}
.micro-compare .micro-col-right {
text-align: center;
}
.micro-compare .micro-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 8px 14px;
align-items: center;
border-top: 1px dashed rgba(0, 0, 0, 0.06);
}
.micro-compare .micro-item {
display: inline-flex;
align-items: center;
gap: 8px;
color: #475569;
font-weight: 500;
}
.micro-compare .micro-row .micro-item:last-child {
justify-content: flex-end;
}
.micro-compare .emoji {
font-size: 1rem;
width: 1.25rem;
text-align: center;
}
.micro-compare .label {
white-space: nowrap;
}
.micro-compare.micro-compact {
max-width: 420px;
border-radius: 10px;
}
.micro-compare.micro-compact .micro-header {
padding: 10px 14px 6px;
}
.micro-compare.micro-compact .micro-row {
padding: 8px 12px;
}
@media (max-width: 600px) {
.micro-compare {
margin: 0 auto 24px;
max-width: 100%;
}
.micro-compare .micro-header {
font-size: 0.95rem;
}
.micro-compare .micro-row {
padding: 10px 12px;
gap: 8px;
}
.micro-compare .label {
white-space: normal;
}
}
/* Ensure micro-compare aligns to the top of the Privacy text */
#why-different .privacy-row {
align-items: flex-start;
}
#why-different .privacy-row>[class^="col-"] {
display: flex;
}
#why-different .privacy-row .text-block {
margin-top: 0;
}
#why-different .privacy-row .col-lg-7>.text-block {
align-self: flex-start;
}
#why-different .privacy-row .col-lg-5 {
align-items: flex-start;
}
#why-different .privacy-row .micro-compare {
margin-top: 0;
}
/* Built Different two-up grid with centered micro table */
#why-different .different-grid {
position: relative;
}
#why-different .different-grid>[class^="col-"] {
display: flex;
}
#why-different .different-grid .text-block {
margin: 0;
align-self: flex-start;
}
/* Center the below-table within the container */
#why-different .different-grid .col-12 .micro-compare {
margin: 8px auto 0;
}
/* Remove absolute centered variant now that the table sits below */
@media (max-width: 991.98px) {
#why-different .different-grid>[class^="col-"] {
display: block;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.content-section {
padding: 32px 0;
}
.section-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.text-block.text-start,
.text-block.text-end {
padding: 1rem;
text-align: left;
}
.text-block h3 {
font-size: 1.25rem;
}
}
/* Footer section spacing: match other sections' gap and compact height */
.footer-section {
margin-bottom: var(--section-gap);
/* same as other sections */
}
/* Utility: max width for centered blocks moved from inline */
.max-w-800 {
max-width: 800px;
}
/* Europemaxxing suite: a compact visual workflow instead of a prose block. */
#suite .suite-intro {
margin: -1rem auto 2rem;
color: #667085;
text-align: center;
font-size: 1.05rem;
}
#suite .suite-flow {
display: grid;
grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
align-items: center;
max-width: 920px;
margin: 0 auto;
}
#suite .suite-product-card {
position: relative;
min-height: 168px;
padding: 1.5rem 1rem 1.25rem;
border: 1px solid rgba(16, 24, 40, 0.09);
border-radius: var(--radius-card);
background: var(--surface-solid);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 20px rgba(16, 24, 40, 0.06);
color: #101828;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-align: center;
text-decoration: none;
transition:
border-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
#suite .suite-product-card:hover {
border-color: rgba(0, 80, 157, 0.28);
box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 30px rgba(0, 80, 157, 0.12);
color: #101828;
transform: translateY(-4px);
}
#suite .suite-step {
position: absolute;
top: 0.8rem;
left: 0.9rem;
color: #98a2b3;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
}
#suite .suite-product-icon {
width: 52px;
height: 52px;
margin-bottom: 0.25rem;
border-radius: 16px;
background: rgba(0, 80, 157, 0.08);
color: var(--findaroo-blue);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
#suite .suite-bounceroo .suite-product-icon {
background: rgba(245, 183, 0, 0.12);
color: #9a6b00;
}
#suite .suite-inboxing .suite-product-icon {
background: rgba(20, 122, 87, 0.1);
color: #147a57;
}
#suite .suite-product-card strong {
font-size: 1.12rem;
}
#suite .suite-product-card > span:last-child {
color: #667085;
font-size: 0.9rem;
}
#suite .suite-connector {
color: #98a2b3;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
}
#suite .suite-connector::before {
content: "";
width: 16px;
height: 1px;
margin-right: 0.35rem;
background: #d0d5dd;
}
#suite .suite-account-row {
margin: -1rem 0 2rem;
display: flex;
justify-content: center;
}
#suite .suite-account-link {
min-height: 52px;
padding: 0.55rem 0.8rem 0.55rem 1rem;
border: 1px solid rgba(0, 80, 157, 0.14);
border-radius: 999px;
background: rgba(0, 80, 157, 0.05);
color: var(--royal-blue-traditional);
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
transition:
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
#suite .suite-account-link:hover {
border-color: rgba(0, 80, 157, 0.28);
background: rgba(0, 80, 157, 0.09);
color: var(--royal-blue-traditional);
transform: translateY(-2px);
}
#suite .suite-account-link > span {
display: flex;
flex-direction: column;
line-height: 1.2;
}
#suite .suite-account-link small {
margin-top: 0.15rem;
color: #667085;
}
#suite .suite-account-link > .fa-arrow-right {
width: 32px;
height: 32px;
border-radius: 50%;
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}
#suite .suite-founder-note {
max-width: 620px;
margin: 1.75rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid rgba(16, 24, 40, 0.08);
color: #667085;
text-align: left;
}
#suite .suite-founder-note blockquote {
margin: 0;
font-size: 0.95rem;
font-style: italic;
line-height: 1.65;
}
#suite .suite-founder-note figcaption {
margin-top: 0.55rem;
color: #475467;
font-size: 0.85rem;
text-align: left;
}
#suite .suite-founder-note a {
color: var(--findaroo-blue);
font-weight: 600;
text-decoration-color: rgba(0, 80, 157, 0.35);
text-underline-offset: 0.18em;
}
#suite .suite-founder-note a:hover {
color: var(--royal-blue-traditional);
text-decoration-color: currentColor;
}
@media (max-width: 767.98px) {
#suite .suite-flow {
grid-template-columns: 1fr;
max-width: 320px;
}
#suite .suite-product-card {
width: 100%;
min-height: 148px;
}
#suite .suite-connector {
height: 38px;
transform: rotate(90deg);
}
#suite .suite-account-link {
width: 100%;
max-width: 320px;
border-radius: var(--radius-card);
}
}
/* Footer small text moved from inline style */
.footer-small {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
letter-spacing: -0.2px;
}
/* Ensure footer legal links match small footer text color/size */
.footer-small a {
color: inherit;
font: inherit;
}
/* Footer legal links: spacing and hover animation to match navbar CTA hover */
.footer-legal-links {
display: inline-block;
color: var(--text-secondary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.875rem;
letter-spacing: -0.2px;
}
.footer-legal-links a {
color: inherit;
display: inline-block;
border-radius: 50px;
/* match CTA pill radius */
padding: 0.5rem 1rem;
/* match navbar link padding exactly */
border: 1px solid transparent;
/* reserve space to prevent layout shift on hover */
box-sizing: border-box;
/* ensure border doesn't change outer size */
transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* Footer legal links: show gray glass only on hover (matches Back to Home CTA) */
.footer-legal-links a:hover {
color: #0b1220;
border: 1px solid var(--glass-border);
background:
radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
-webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
}
/* Colored heart moved from inline style */
.colored-heart {
background: linear-gradient(90deg, #007BFF, #9D00FF, #FF4500);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Compact footer height similar to dashboard card height */
.footer-compact .container {
max-width: 1200px;
}
.footer-compact .text-center {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
/* Remove extra vertical padding around the footer container so the overall
footer height matches the dashboard page */
.content-section.footer-section {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
/* Ensure spacing above footer comes only from the last content-section's margin */
/* No extra margin on footer itself */
/* Animation containers */
.animation-container {
height: 100%;
min-height: 250px;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
/* Mac Window Styles */
.mac-window {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 300px;
overflow: hidden;
}
.mac-header {
background: #e5e7eb;
padding: 8px 12px;
display: flex;
align-items: center;
position: relative;
}
.mac-buttons {
display: flex;
gap: 6px;
}
.mac-buttons span {
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
background: #cbd5e1;
}
.mac-title {
position: absolute;
width: 100%;
text-align: center;
left: 0;
color: var(--text-secondary);
font-size: 13px;
}
.mac-content {
padding: 20px;
background: white;
}
/* Upload Animation */
.file-icon {
text-align: center;
margin-bottom: 20px;
animation: bounce-in 0.5s ease 0s 1;
}
.file-icon i {
font-size: 48px;
color: #334155;
margin-bottom: 10px;
}
.file-name {
display: block;
font-size: 14px;
color: var(--text-secondary);
}
.upload-container {
position: relative;
min-height: 60px;
}
.upload-progress {
height: 6px;
background: #e5e7eb;
border-radius: 3px;
margin: 20px 0;
overflow: hidden;
opacity: 0;
animation: fade-in 0.3s ease 0.5s forwards;
}
.progress-bar {
height: 100%;
background: #334155;
width: 0;
animation: progress 2.5s ease-in-out 0.8s forwards, progress-restart 3s linear 3.3s infinite;
}
.upload-complete {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 24px;
color: #16a34a;
opacity: 0;
animation: show-complete 0.5s ease-out 3.3s forwards, complete-restart 3s linear 3.8s infinite;
}
/* Excel Window Animation */
.excel-window {
background: white;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 350px;
overflow: hidden;
}
.excel-header {
background: #334155;
padding: 8px 12px;
}
.excel-rows {
font-size: 14px;
color: #111827;
position: relative;
height: 160px;
overflow: hidden;
}
.excel-row {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #e5e7eb;
}
.excel-row.header {
font-weight: bold;
color: #0f172a;
position: sticky;
top: 0;
background: white;
z-index: 2;
}
.excel-rows-container {
animation: slideAndRepeat 8s linear infinite;
}
.email-cell {
color: #334155;
}
/* Step 3 – Results to CSV animation (looping conveyor) */
.results-scene {
position: relative;
width: 280px;
height: 160px;
}
.results-scene .belt {
position: absolute;
left: 8px;
right: 76px;
/* space for download box */
bottom: 42px;
height: 12px;
background: #cbd5e1;
border-radius: 6px;
overflow: hidden;
}
.results-scene .belt::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 12px, rgba(0, 0, 0, 0.0) 12px 24px);
animation: belt-move 1.2s linear infinite;
}
.results-scene .download {
position: absolute;
right: 8px;
bottom: 24px;
width: 64px;
height: 56px;
border: 2px solid #334155;
border-radius: 8px;
background: linear-gradient(#ffffff, #f8fafc);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
.results-scene .download .label {
font-size: 12px;
font-weight: 800;
color: #334155;
letter-spacing: 1px;
}
.results-scene .sheet {
position: absolute;
left: -180px;
bottom: 36px;
width: 200px;
/* landscape */
background: #ffffff;
border: 2px solid #334155;
border-radius: 8px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
padding: 6px 10px;
/* slightly shorter */
overflow: hidden;
/* keep contents inside border */
opacity: 0;
transform: translateX(0) translateY(0) rotate(0deg);
animation: sheet-convey 2.8s ease-in-out infinite;
}
.results-scene .sheet-row {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 8px;
padding: 4px 0;
/* reduce height */
border-bottom: 1px solid #e5e7eb;
font-size: 12px;
color: #111827;
}
/* allow grid children to shrink and wrap */
.results-scene .sheet-row span {
min-width: 0;
}
.results-scene .sheet-row span:last-child {
overflow-wrap: anywhere;
word-break: normal;
white-space: normal;
}
.results-scene .sheet-row.header {
font-weight: 700;
color: #0f172a;
}
.results-scene .check {
position: absolute;
right: 2px;
bottom: 84px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #16a34a;
color: white;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.6);
animation: check-timeline 2.8s ease-out infinite;
}
.results-scene .check i {
font-size: 12px;
}
@keyframes belt-move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(24px);
}
}
@keyframes sheet-convey {
0% {
opacity: 0;
transform: translateX(0) translateY(0) rotate(-2deg);
}
5% {
opacity: 1;
}
65% {
opacity: 1;
transform: translateX(220px) translateY(0) rotate(0deg);
}
78% {
opacity: 1;
transform: translateX(220px) translateY(16px) scale(0.98);
}
88% {
opacity: 0;
transform: translateX(220px) translateY(24px) scale(0.96);
}
100% {
opacity: 0;
transform: translateX(0) translateY(0) rotate(-2deg);
}
}
@keyframes check-timeline {
0% {
opacity: 0;
transform: scale(0.6);
}
79% {
opacity: 0;
transform: scale(0.6);
}
82% {
opacity: 1;
transform: scale(1);
}
92% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.6);
}
}
/* Keyframe Animations */
@keyframes bounce-in {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes progress {
0% {
width: 0;
}
80% {
width: 100%;
}
100% {
width: 100%;
}
}
@keyframes show-complete {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
@keyframes complete-cycle {
0% {
transform: scale(0);
opacity: 0;
}
20% {
transform: scale(1.2);
opacity: 0.8;
}
40% {
transform: scale(1);
opacity: 1;
}
60% {
transform: scale(1);
opacity: 1;
}
80% {
transform: scale(1.1);
opacity: 0.5;
}
100% {
transform: scale(0);
opacity: 0;
}
}
@keyframes progress-restart {
0% {
width: 0;
}
80% {
width: 100%;
}
100% {
width: 100%;
}
}
@keyframes complete-restart {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
20% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.8;
}
40% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
60% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
80% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
}
@keyframes slideAndRepeat {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-320px);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.animation-container {
min-height: 200px;
padding: 1rem;
}
.mac-window,
.excel-window {
width: 280px;
}
.download-scene {
width: 200px;
height: 120px;
}
.results-scene {
width: 220px;
height: 140px;
}
.file-icon i {
font-size: 36px;
}
.excel-rows {
font-size: 12px;
}
}
/* Made in Europe Section */
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
margin-bottom: 1rem;
font-size: 1.1rem;
color: var(--text-heading);
}
.feature-list i {
color: var(--text-heading);
}
/* Vision Statement */
.vision-statement {
font-size: 1.5rem;
font-weight: 300;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto;
line-height: 1.4;
}
/* Updated Pricing Styles */
.pricing-card {
background: white;
border-radius: 12px;
padding: 2rem;
height: 100%;
transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
border: 2px solid transparent;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* The card itself is not a control — only its CTA is. Hover gets a subtle
lift, not a blue border, which would spend brand colour on a non-action
and imply the whole card is clickable (DESIGN.md §4, §10). */
.pricing-card:hover {
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 28px rgba(16, 24, 40, 0.10);
}
.pricing-card.featured {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.pricing-card.featured:hover {
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 28px rgba(16, 24, 40, 0.10);
}
.pricing-header {
text-align: center;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
height: 280px;
}
.pricing-header h3 {
font-size: 1.75rem;
margin-bottom: 2rem;
color: var(--findaroo-blue);
font-weight: 600;
flex-shrink: 0;
}
/* Production package cards use fixed Auth plan data rather than the legacy
validation slider, so their header can collapse to its actual content. */
#pricing .production-plan .pricing-header {
height: auto;
min-height: 132px;
margin-bottom: 0.5rem;
}
#pricing .production-plan .pricing-header h3 {
margin-bottom: 1rem;
}
#pricing .production-plan .pricing-features {
margin: 1.25rem 0 2rem;
}
.volume-display {
margin: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.volume-display label {
font-size: 0.9rem;
color: var(--findaroo-blue);
margin-bottom: 1rem;
display: block;
font-weight: 500;
}
.volume-slider {
display: flex;
flex-direction: column;
height: 76px;
/* Height of range input + amount text */
}
.volume-slider-spacer {
height: 38px;
/* Height of range input */
}
.volume-amount {
font-size: 1.1rem;
color: var(--findaroo-blue);
font-weight: 500;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
/* Volume slider (DESIGN.md §9): visible focus, adequate target size,
and a textual read-out of the current value. */
.form-range {
width: 100%;
margin-bottom: 1rem;
height: 24px;
/* generous vertical target while the track stays slim */
background: transparent;
}
.form-range::-webkit-slider-thumb {
background: var(--findaroo-blue);
width: 24px;
height: 24px;
margin-top: -9px;
border: 2px solid #ffffff;
box-shadow: 0 1px 4px rgba(0, 41, 107, 0.35);
}
.form-range::-moz-range-thumb {
background: var(--findaroo-blue);
width: 20px;
height: 20px;
border: 2px solid #ffffff;
box-shadow: 0 1px 4px rgba(0, 41, 107, 0.35);
}
.form-range::-webkit-slider-runnable-track {
background: rgba(0, 80, 157, 0.2);
height: 6px;
border-radius: var(--radius-capsule);
}
.form-range::-moz-range-track {
background: rgba(0, 80, 157, 0.2);
height: 6px;
border-radius: var(--radius-capsule);
}
.form-range:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0, 80, 157, 0.55);
}
.form-range:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0, 80, 157, 0.55);
}
/* The slider caption is descriptive text, not a label for a control. */
.volume-caption {
font-size: 0.9rem;
color: var(--findaroo-blue);
margin-bottom: 1rem;
display: block;
font-weight: 500;
}
.price {
font-size: 2.5rem;
font-weight: 700;
color: var(--findaroo-blue);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 60px;
flex-shrink: 0;
}
.price .currency {
font-size: 1.5rem;
font-weight: 500;
vertical-align: super;
color: var(--findaroo-blue);
}
.price .period {
font-size: 1rem;
color: rgba(0, 80, 157, 0.7);
font-weight: normal;
}
.pricing-features {
flex-grow: 1;
margin: 2rem 0;
display: flex;
flex-direction: column;
}
.pricing-features ul {
list-style: none;
padding: 0;
width: 100%;
max-width: 240px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.pricing-features li {
padding: 0;
color: var(--text-heading);
font-size: 1rem;
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 0.75rem;
align-items: flex-start;
min-height: 28px;
text-align: left;
}
.pricing-features i {
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin: 0;
border-radius: 50%;
color: var(--findaroo-blue);
background: rgba(0, 80, 157, 0.08);
}
.pricing-features .feature-text {
display: block;
min-width: 0;
padding-top: 0.35rem;
line-height: 1.45;
}
.pricing-features li.credit-allocation {
display: block;
width: 100%;
padding: 0.1rem 0 0.15rem 1rem;
border-left: 4px solid var(--findaroo-yellow);
}
.pricing-features .credit-allocation .feature-text {
display: block;
min-width: 0;
padding-top: 0;
}
.credit-allowance-label {
display: block;
margin-bottom: 0.35rem;
color: var(--text-secondary);
font-size: 0.64rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0.075em;
text-transform: uppercase;
}
.credit-allowance-line {
display: flex;
align-items: baseline;
gap: 0.48rem;
margin-bottom: 0.32rem;
white-space: nowrap;
}
.credit-allowance-line strong {
color: var(--findaroo-blue);
font-size: 1.65rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.045em;
}
.credit-allowance-line span {
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 700;
}
.credit-allowance-meta {
display: block;
color: var(--text-secondary);
font-size: 0.72rem;
line-height: 1.35;
}
/* Inboxing is presented as a sibling allowance rather than a loose feature
row. The shared structure makes both plan entitlements easy to scan, while
the green rail keeps product access distinct from numeric credits. */
.pricing-features li.inboxing-allocation {
display: block;
width: 100%;
padding: 0.1rem 0 0.15rem 1rem;
border-left: 4px solid #0b8f68;
}
.pricing-features .inboxing-allocation .feature-text {
display: block;
min-width: 0;
padding-top: 0;
}
.inboxing-allowance-label {
display: block;
margin-bottom: 0.35rem;
color: #087457;
font-size: 0.64rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0.075em;
text-transform: uppercase;
}
.inboxing-allowance-line {
display: flex;
align-items: baseline;
gap: 0.42rem;
margin-bottom: 0.32rem;
white-space: nowrap;
}
.inboxing-allowance-line strong {
color: var(--text-heading);
font-size: 1.12rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
}
.inboxing-allowance-line span {
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 700;
}
.inboxing-allowance-meta {
display: block;
color: var(--text-secondary);
font-size: 0.72rem;
line-height: 1.35;
}
.pricing-features .coming-soon {
font-size: 0.8rem;
color: var(--text-secondary);
font-style: italic;
}
.pricing-features .disabled-feature {
color: #999;
text-decoration: line-through;
opacity: 0.7;
}
@media (max-width: 768px) {
.pricing-card {
padding: 1.5rem;
}
.pricing-header h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.volume-display {
margin: 1.5rem 0;
}
.price {
font-size: 2rem;
margin: 1.5rem 0;
}
.pricing-features {
margin: 1.5rem 0;
}
.pricing-cta {
margin-top: 1.5rem;
}
}
/* Hero Section */
.hero-section {
padding: 120px 0;
color: var(--text-primary);
}
.hero-animation {
background-color: #ffffff;
border-radius: 1rem;
padding: 2rem;
height: 100%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
position: relative;
overflow: hidden;
}
.form-animation {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cursor {
width: 2px;
height: 1.5rem;
background-color: var(--findaroo-blue);
position: absolute;
opacity: 0;
animation: blink 0.7s infinite;
transition: top 0.5s ease-in-out, left 0.5s ease-in-out;
}
.magic-wand {
position: absolute;
font-size: 2rem;
color: var(--mikado-yellow);
opacity: 0;
transform: rotate(-45deg);
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 10;
}
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.particle {
position: absolute;
width: 5px;
height: 5px;
background-color: var(--mikado-yellow);
border-radius: 50%;
opacity: 0;
animation: particle-animation 1s ease-out forwards;
}
.email-output.magical-reveal {
animation: magical-text-reveal 1s ease-out forwards;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes magical-text-reveal {
0% {
opacity: 0;
transform: scale(0.5) rotate(-15deg);
text-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold);
}
50% {
opacity: 0.8;
transform: scale(1.1) rotate(5deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
text-shadow: none;
}
}
@keyframes particle-animation {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0) translate(var(--x), var(--y));
}
}
.input-group,
.output-group {
background-color: #f8f9fa;
border-radius: 0.5rem;
padding: 1rem;
}
.input-group label,
.output-group label {
display: block;
font-size: 0.875rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.input-group input,
.email-output {
width: 100%;
border: none;
background-color: transparent;
font-size: 1.25rem;
font-weight: 500;
color: var(--text-primary);
padding: 0;
}
.email-output {
min-height: 1.25rem;
white-space: nowrap;
overflow: hidden;
height: 2.5rem;
/* Set a fixed height */
position: relative;
}
.email-reel {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.email-item {
height: 2.5rem;
display: flex;
align-items: center;
font-size: 1.25rem;
font-weight: 500;
}
/* Status is never carried by color alone (DESIGN.md §4, §11):
rejected candidates are struck through, the accepted one is ticked. */
.email-item.invalid {
color: var(--status-danger);
text-decoration: line-through;
}
.email-item.valid {
color: var(--status-success);
font-weight: 600;
}
.email-item.valid::after {
content: "\2713";
/* check mark */
margin-left: 0.5rem;
font-weight: 700;
}
.email-item.invalid::after {
content: "\00d7";
/* multiplication sign */
margin-left: 0.5rem;
text-decoration: none;
display: inline-block;
}
.stats-badge {
background-color: #f8f9fa;
padding: 0.5rem 1rem;
border-radius: 1rem;
color: var(--text-primary);
font-weight: 500;
}
.text-muted {
color: var(--text-muted) !important;
}
/* Vision Section */
.vision-section {
background-color: white;
border-radius: 20px;
margin: -60px auto var(--section-gap);
position: relative;
z-index: 1;
max-width: 1200px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
/* Ensure subsequent vision blocks don't overlap the previous one */
.vision-section+.vision-section {
margin-top: var(--section-gap);
}
.vision-statement {
font-weight: 500;
color: var(--text-heading);
line-height: 1.6;
margin: 0;
}
/* Stats Badge */
.stats-badge {
display: inline-block;
padding: 0.5rem 1rem;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 50px;
font-weight: 500;
font-size: 0.9rem;
color: var(--text-secondary);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
}
/* GDPR pill — a secondary control: neutral glass, no blue bloom,
so it never competes with the primary CTA (DESIGN.md §9). */
.gdpr-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0.5rem 0.875rem;
border-radius: var(--radius-capsule);
border: 1px solid rgba(16, 24, 40, 0.10);
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(var(--glass-saturation));
backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(var(--glass-saturation));
color: #1f2937;
font-weight: 600;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
transition:
box-shadow var(--motion-base) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard),
background-color var(--motion-base) var(--ease-standard);
}
.gdpr-pill:hover {
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 24px rgba(16, 24, 40, 0.09);
}
.gdpr-pill:active {
transform: scale(0.985);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.gdpr-pill .fa-shield {
color: var(--findaroo-blue);
}
/* Popover carries text, so it uses the more legible regular-glass
treatment (DESIGN.md §5, §9). */
.popover.gdpr-popover {
--bs-popover-bg: transparent;
--bs-popover-border-color: var(--glass-border);
max-width: 320px;
border-radius: var(--radius-card);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.80));
border: 1px solid var(--glass-border);
box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
.popover.gdpr-popover .popover-arrow::after {
border-bottom-color: rgba(255, 255, 255, 0.88);
}
.popover.gdpr-popover .popover-header {
display: none;
}
.popover.gdpr-popover .popover-body {
color: #1f2937;
padding: 14px 16px;
font-size: 0.9rem;
line-height: 1.55;
}
.popover.gdpr-popover .popover-body p:last-child {
margin-bottom: 0;
}
.popover.gdpr-popover .popover-body a {
color: var(--findaroo-blue);
font-weight: 600;
}
/* Logo styles */
.navbar-brand {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.5px;
position: relative;
color: var(--royal-blue-traditional);
transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.navbar-brand i {
color: var(--mikado-yellow);
font-size: 1.4rem;
transition: color 0.3s ease;
}
.navbar-brand:hover {
transform: scale(1.05);
color: var(--polynesian-blue);
}
.navbar-brand:hover i {
color: var(--gold);
}
/* The animated yellow dot is a Findaroo signature (DESIGN.md §2). */
.navbar-brand .brand-dot {
color: var(--findaroo-yellow);
display: inline-block;
animation: brand-dot-bounce 1s infinite;
}
@keyframes brand-dot-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Primary CTA base. The glass recipe is applied in the functional-layer
block below; no perpetual pulse (DESIGN.md §9, §10). */
.btn-cta-animated {
background-color: var(--findaroo-blue);
color: #ffffff;
}
/* Remove the black Bootstrap border from the in-page CTAs. This deliberately
no longer requires .btn-dark: the two pricing CTAs lack that class, so they
were the only CTAs keeping a 1px edge — which made them 2px wider than the
identical button everywhere else. One border treatment for all of them.
`.btn` is carried in the selector to stay more specific than the glass
recipe below, which also sets a border with !important. */
.hero-section .btn.btn-cta-animated,
.content-section .btn.btn-cta-animated {
border: none !important;
}
.hero-section .btn.btn-cta-animated:hover,
.content-section .btn.btn-cta-animated:hover {
border: none !important;
}
/* Hero adjustments v2 */
@media (min-width: 992px) {
.hero-copy {
max-width: 720px;
}
}
.hero-copy h1.display-2 {
font-size: clamp(2rem, 4.5vw, 3rem) !important;
line-height: 1.15;
/* Without this the headline breaks before its em dash at narrow widths and
strands the dash alone on a line (DESIGN.md §7, §8). */
text-wrap: balance;
}
.hero-copy .hero-title {
position: relative;
display: inline-block;
width: fit-content;
margin-inline: auto;
}
.hero-eu-badge {
display: inline-grid;
position: absolute;
top: -1em;
right: -0.72em;
width: 1.28em;
height: 1.28em;
overflow: hidden;
border: 1px solid rgba(0, 80, 157, 0.14);
border-radius: 50%;
background: #fff;
box-shadow: 0 5px 14px rgba(0, 80, 157, 0.12);
place-items: center;
font-size: 0.76em;
line-height: 1;
}
@media (max-width: 480px) {
.hero-eu-badge {
top: -0.82em;
right: -0.45em;
font-size: 0.7em;
}
}
.hero-copy .lead {
font-size: 1.1rem;
}
.hero-section {
padding-top: 96px;
padding-bottom: 96px;
}
@media (min-width: 992px) {
.hero-animation {
max-width: 480px;
padding: 1.5rem;
}
}
.input-group input,
.email-output {
font-size: 1.1rem;
}
.email-output {
height: 2.2rem;
min-height: 1.1rem;
}
.email-item {
height: 2.2rem;
font-size: 1.1rem;
}
/* Hero adjustments v3: make animation more landscape on desktop */
@media (min-width: 992px) {
.hero-animation {
max-width: none;
width: 100%;
padding: 1.25rem;
}
.form-animation {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.form-animation .input-group:nth-child(1) {
/* Domain */
grid-column: 1 / -1;
}
.form-animation .input-group:nth-child(2) {
/* First name */
grid-column: 1;
}
.form-animation .input-group:nth-child(3) {
/* Last name */
grid-column: 2;
}
.form-animation .output-group {
/* Validated email */
grid-column: 1 / -1;
}
}
/* CTA sizing tweaks */
.hero-section .btn-cta-animated,
.content-section .btn-cta-animated {
padding: 0.6rem 1.2rem;
font-size: 0.95rem;
border-radius: 8px;
}
.hero-section .btn-cta-animated.btn-lg,
.content-section .btn-cta-animated.btn-lg {
padding: 0.7rem 1.3rem;
font-size: 1rem;
}
/* GDPR pill slightly smaller */
.gdpr-pill {
font-size: 0.85rem;
padding: 0.45rem 0.75rem;
}
/* Centered hero variant */
.hero-centered .hero-copy h1,
.hero-centered .hero-copy .lead,
.hero-centered .hero-copy .reassurance-text,
.hero-centered .hero-copy .stats-badge,
.hero-centered .hero-copy .btn {
text-align: center !important;
margin-left: auto;
margin-right: auto;
}
.hero-centered .cta-cluster {
align-items: center;
}
.hero-centered .hero-animation {
max-width: 720px;
width: 100%;
}
/* Headline block vertically centered, animation spaced below */
.hero-centered .hero-headline {
min-height: calc(100vh - 280px);
/* leave room for animation below */
padding-top: 48px;
padding-bottom: 24px;
}
.hero-centered .hero-animation {
margin-top: 48px;
/* base spacing */
}
/* Lift the animation higher on desktop while keeping headline fixed */
@media (min-width: 992px) {
.hero-centered .hero-animation {
margin-top: calc(48px - 10vh);
}
}
@media (max-width: 991.98px) {
.hero-centered .hero-headline {
min-height: calc(100vh - 320px);
padding-top: 32px;
padding-bottom: 16px;
}
.hero-centered .hero-animation {
margin-top: 32px;
}
}
/* ==========================================================================
Layer model (DESIGN.md §3)
Functional layer — navbar, CTAs, popovers: full glass recipe.
Content layer — sections, cards, copy: calmer, more opaque surfaces.
========================================================================== */
/* Navbar container: the suite bar. The paint values are auth's, findaroo's,
bounceroo's and inboxing's, copied verbatim so this bar is the same object
as theirs — more opaque and less blurred than the glass this page used to
give it, with a dark hairline instead of a white one.
The glass is painted by ::before rather than on the container itself.
backdrop-filter makes an element a containing block for fixed-position
descendants, and the responsive drawer lives inside this bar: with the
filter here the drawer was trapped in the bar's own box — measured 64px
tall instead of the viewport's 844. The apps never hit this because their
drawer sits outside the navbar, in the page's sidebar column. */
.navbar .container {
background: transparent !important;
border: 0;
border-radius: 50px;
padding: 0.5rem 1.5rem;
position: relative;
}
/* --- Content layer -------------------------------------------------------
Page-level section framing. Calmer and more opaque than the controls that
sit on top of it, so the functional layer stays visually dominant.
These surfaces carry reading-heavy content; they are not controls. */
.content-section,
.vision-section,
.footer .card {
background: var(--content-bg);
border: 1px solid var(--content-border);
border-radius: var(--radius-region);
box-shadow: var(--content-shadow) !important;
-webkit-backdrop-filter: blur(var(--content-blur)) saturate(var(--content-saturation));
backdrop-filter: blur(var(--content-blur)) saturate(var(--content-saturation));
position: relative;
}
/* Product demonstration frame (DESIGN.md §6: ~16px radius).
Near-solid so the demo reads crisply; it is content, not a control. */
.hero-animation {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88));
border: 1px solid var(--content-border);
border-radius: var(--radius-frame);
box-shadow: var(--content-shadow) !important;
-webkit-backdrop-filter: blur(var(--content-blur)) saturate(var(--content-saturation));
backdrop-filter: blur(var(--content-blur)) saturate(var(--content-saturation));
position: relative;
}
/* Cards nested inside a translucent section stay solid.
Stacking glass on glass is explicitly discouraged (DESIGN.md §9, §13). */
.pricing-card,
.feature-card {
background: var(--surface-solid);
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: var(--radius-card);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.06);
-webkit-backdrop-filter: none;
backdrop-filter: none;
position: relative;
}
/* The bar's material, painted behind its contents so the container itself can
stay free of backdrop-filter. Top-edge highlight over the suite's base fill;
no radial spotlight and no conic sweep, which on a text-bearing surface read
as a white oval and diagonal glare (DESIGN.md §6, §13). */
.navbar .container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: inherit;
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 2px 4px rgba(15, 23, 42, 0.04),
0 8px 24px rgba(15, 23, 42, 0.08);
-webkit-backdrop-filter: blur(28px) saturate(200%);
backdrop-filter: blur(28px) saturate(200%);
}
/* --- Collapsed navigation (DESIGN.md §9) ---------------------------------
Expanded, the bar is no longer a horizontal control, so it stops being a
capsule: a 999px radius on a tall box draws an ellipse that clips the
links. It becomes a content region, and the actions stack full width.
Placed after the glass rule so it wins on source order. */
/* The nav card is the apps' sidebar element (styles.css:176). Below lg the app
menu moves this exact subtree into its popover, where app-switcher.css strips
the card back to a plain list. Copied verbatim so the moved subtree is the
same object the apps hand over. */
.left-navbar-card {
border: none;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin-bottom: 2rem;
}
.left-navbar-card.nav-card {
min-height: 300px;
display: flex;
flex-direction: column;
}
@media (max-width: 991px) {
.left-navbar-card.nav-card {
min-height: auto;
}
}
.left-navbar-card.nav-card nav {
flex: 1;
display: flex;
flex-direction: column;
}
/* Menu item states, copied from the app (styles.css:268). Scoped to the card
rather than to .navbar, which matters here: the app menu moves this subtree
out of the bar, so a .navbar-scoped hover would stop matching exactly when
the items are being used. */
.left-navbar-card .nav-link {
padding: 0.5rem 1rem;
border-radius: 50px;
/* The app writes `transition: all` here. Spelled out instead, because
`all` animates outline-color too and the focus ring then fades in
rather than appearing on focus. */
transition:
color var(--motion-base) var(--ease-standard),
background-color var(--motion-base) var(--ease-standard),
border-color var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard);
border: 1px solid transparent;
box-sizing: border-box;
}
.left-navbar-card .nav-link:hover,
.left-navbar-card .nav-link.active {
color: #0b1220 !important;
border: 1px solid var(--glass-border);
background:
radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
-webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 16px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
}
/* Remove underline animation on hover to match navbar Logout behavior */
.left-navbar-card .nav-link:hover::after {
width: 0 !important;
}
/* Menu-item emoji, as the apps' sidebars use (🏠 Dashboard, ⚙️ Settings…).
A span rather than a literal in the text so it can be hidden from screen
readers and kept off the label above lg, where the bar is a plain row. */
.nav-emoji {
margin-right: 0.5rem;
}
@media (min-width: 992px) {
.navbar .nav-emoji {
display: none;
}
}
/* In the bar this is just the actions row; the app menu's bottom-slot styling
takes over once the component has moved it into the panel. Scoped to lg and
up on purpose: the panel is mounted inside .navbar too, so an unscoped rule
here also forces the bottom slot into a row and squeezes the CTA until its
label wraps. The row direction is restated because Bootstrap's .card is a
column flex container, which otherwise stacks Login above the CTA and
doubles the bar's height. */
@media (min-width: 992px) {
.navbar .left-navbar-card.credits-card {
flex-direction: row;
padding: 0;
margin: 0;
border: 0;
background: transparent;
box-shadow: none;
}
/* Legal pages keep the brand and Back to Home together on the left,
while the utility cluster follows the landing-page rhythm on the
right: app switcher -> Login -> CTA. */
.legal-navbar .container {
justify-content: flex-start;
}
.legal-navbar .suite-navigation-source {
display: flex;
align-items: center;
margin-left: auto;
}
}
/* Above lg the source must not exist as a box: `display: contents` drops the
wrapper out of layout so the links and actions become direct flex children
of the bar and lay out in one row. Without it they stack, because the
wrapper is a block and they are its children, not the bar's. */
@media (min-width: 992px) {
.suite-navigation-source {
display: contents;
}
/* The apps render this card in a sidebar column; this page has no sidebar,
so in the bar it carries no card surface and lays its links out in a row.
Below lg it is untouched and goes to the popover as the apps' card. */
.navbar .left-navbar-card {
display: contents;
}
/* !important: the element carries Bootstrap's .flex-column, which is
itself !important. It is a column in the apps' sidebar and in the
popover; in this bar it is a row.
flex is reset because the card rule gives this `flex: 1` to fill the
sidebar's height — in a horizontal bar that makes it eat all the free
space, so the auto margins resolve to 0 and the links stop centring. */
.navbar .left-navbar-card.nav-card nav {
flex: 0 0 auto;
flex-direction: row !important;
align-items: center;
margin: 0 auto;
}
}
@media (max-width: 991.98px) {
/* The brand sits next to the app menu button, which is the only other
thing in the bar at this width. */
.navbar-brand {
margin-right: auto;
}
/* Legal-page mobile bars mirror the app: brand + return action form one
compact group on the left, while the app switcher owns the far edge. */
.legal-navbar .navbar-brand {
margin-right: 0;
}
.legal-navbar #navbar-right-slot {
margin-left: auto;
}
/* Legal pages use the same compact mobile return control as the app:
keep the accessible label on the link, but show only the arrow. */
.legal-navbar .back-home-label {
display: none;
}
.legal-navbar .btn-glass-gray {
flex: 0 0 var(--hit-area);
inline-size: var(--hit-area);
block-size: var(--hit-area);
min-inline-size: var(--hit-area);
padding: 0;
border-radius: 50%;
}
.legal-navbar .btn-glass-gray .fa-arrow-left {
margin-right: 0 !important;
}
/* Below lg the links belong to the app menu. Until the menu has taken the
subtree — and if scripting never runs at all — it must not render inside
the bar, where a stacked card would break the layout. There is no
hamburger fallback any more, so with JS off the links are simply absent
here; every one of them is a same-page anchor also reachable from the
page body. */
.suite-navigation-source:not(.suite-navigation-mounted) {
display: none;
}
/* The drawer and its scrim have to sit above the fixed navbar. */
.sidebar-offcanvas {
--bs-offcanvas-width: 300px;
z-index: 1060;
}
.sidebar-offcanvas .offcanvas-header {
padding: 1.25rem 1.25rem 0.75rem;
}
.sidebar-offcanvas .offcanvas-title {
font-weight: 700;
letter-spacing: -0.3px;
}
.sidebar-offcanvas .offcanvas-body {
padding: 1rem;
display: flex;
flex-direction: column;
}
/* Frosted scrim rather than the default solid black backdrop. */
.offcanvas-backdrop {
z-index: 1055;
background-color: rgb(30, 41, 59);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.offcanvas-backdrop.show {
opacity: 0.35;
}
.suite-navigation-source .navbar-nav {
margin: 0;
width: 100%;
}
.suite-navigation-source .nav-item {
width: 100%;
}
.suite-navigation-source .nav-link {
display: flex;
align-items: center;
min-height: var(--hit-area);
width: 100%;
padding: 0.5rem 0.75rem !important;
}
/* Login and the primary CTA stack instead of crowding one line. */
.navbar-actions {
flex-direction: column;
/* !important: the slot carries Bootstrap's .align-items-center, which
is itself !important and would centre these in the column. */
align-items: flex-start !important;
gap: 8px;
width: 100%;
margin-top: 8px;
}
/* Login is a text link: align it to the drawer's left rhythm. */
/* `.btn` is in the selector to outrank the hit-area rule further down,
which centres `.navbar .btn-link` — and this link is still inside
.navbar, because the app menu mounts into the bar's right slot. */
.navbar-actions .btn.btn-link {
margin-right: 0 !important;
width: 100%;
justify-content: flex-start;
text-align: left;
padding-left: 0.75rem;
}
.navbar-actions .btn-cta-animated {
width: 100%;
}
}
/* --- One CTA size on mobile ----------------------------------------------
The five in-page CTAs carry the same label but had picked up five different
widths at 390px — 366 (hero, full-width), 205 (How it Works), 275 twice
(pricing .w-100), 272 (final, .px-5 .py-3). Give them all the How it Works
metrics and let them size to their text: identical label, identical width,
without hardcoding one.
!important is needed to beat Bootstrap's own !important utilities (.w-100,
.px-5, .py-3); the two-class selectors outrank those single-class rules.
The toggler menu's CTA is deliberately left full width — inside an open
menu it is a stacked row, not one of the page's buttons. */
@media (max-width: 767.98px) {
.hero-section .btn-cta-animated,
.content-section .btn-cta-animated,
.navbar-actions .btn-cta-animated {
width: auto !important;
padding: 0.6rem 1.2rem !important;
font-size: 0.95rem !important;
min-height: var(--hit-area);
}
/* The menu CTA keeps the glass border its navbar context gives it, which
would make it the 2px outlier the pricing pair used to be. The ID
out-specifies the glass recipe's bordered !important. */
.navbar-actions .btn.btn-cta-animated {
border: none !important;
}
/* Login is a menu row and keeps the list's left edge. The CTA is an
action, not a row: centred in the slot, and the only item in the panel
without an icon, so it reads as a button rather than one more entry. */
.navbar-actions {
align-items: flex-start !important;
}
.navbar-actions .btn-cta-animated {
align-self: center !important;
margin-top: 4px;
}
/* The hero and pricing CTAs are the ones that were stretching. Their
containers still need to centre them once they stop filling the row. */
.hero-centered .cta-cluster {
align-items: center;
}
.pricing-cta {
display: flex;
flex-direction: column;
align-items: center;
}
}
/* Blue prominent glass — the primary action (DESIGN.md §5).
Regular glass first, then a restrained blue layer on top of it. The blue
must sit ABOVE the white veil, or the tint washes out and the button stops
reading as the primary action. Label stays deep navy for contrast. */
.btn.btn-cta-animated,
.btn.btn-outline-dark {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
color: #00213d !important;
background:
radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.30) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
linear-gradient(180deg, rgba(0, 80, 157, 0.18), rgba(0, 80, 157, 0.11)),
linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.06) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
background-attachment: scroll, scroll, scroll, scroll;
-webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
0 10px 24px rgba(0, 41, 107, 0.18),
0 0 32px rgba(0, 80, 157, 0.22);
}
.btn.btn-cta-animated {
color: #00213d !important;
animation: none !important;
}
/* Material detail only: a short top-edge highlight and fine noise.
No conic sweep and no full-height white veil — a screen-blended veil
erases the blue tint and reads as glare (DESIGN.md §10, §13). */
.btn.btn-cta-animated::before,
.btn.btn-outline-dark::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 45%),
url('data:image/svg+xml;utf8,');
background-blend-mode: normal, soft-light;
background-repeat: no-repeat, repeat;
background-size: auto, 120px 120px;
border-radius: inherit;
pointer-events: none;
}
/* Interaction states (DESIGN.md §9, §10).
Hover raises elevation and luminosity; press drops elevation and
compresses slightly; focus-visible is always drawn. */
.btn.btn-cta-animated,
.btn.btn-outline-dark,
.btn.btn-glass-gray {
transition:
box-shadow var(--motion-base) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard),
background-color var(--motion-base) var(--ease-standard);
}
.btn.btn-cta-animated:hover,
.btn.btn-outline-dark:hover {
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.50),
0 18px 40px rgba(0, 41, 107, 0.20),
0 0 40px rgba(0, 80, 157, 0.28);
}
.btn.btn-cta-animated:active,
.btn.btn-outline-dark:active,
.btn.btn-glass-gray:active {
transform: translateY(0) scale(0.985);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.30),
0 4px 12px rgba(0, 41, 107, 0.16);
}
.btn.btn-cta-animated:disabled,
.btn.btn-cta-animated.disabled {
opacity: 0.55;
transform: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
cursor: not-allowed;
}
/* ==========================================================================
Focus visibility (DESIGN.md §11)
Every interactive element draws a focus ring for keyboard users.
========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.gdpr-pill:focus-visible,
.form-range:focus-visible {
outline: 3px solid var(--findaroo-blue);
outline-offset: 3px;
border-radius: var(--radius-control);
}
/* Capsule controls keep a capsule ring, and the ring colour is the brand
blue everywhere — `.nav-link` colour rules would otherwise win and
resolve the outline to currentColor. */
.navbar .nav-link:focus-visible,
.navbar .btn-link:focus-visible,
.navbar .btn-cta-animated:focus-visible,
.gdpr-pill:focus-visible,
.footer-legal-links a:focus-visible {
border-radius: var(--radius-capsule);
outline: 3px solid var(--findaroo-blue);
outline-offset: 3px;
}
/* Bootstrap removes outlines on .btn focus; restore ours. */
.btn:focus-visible {
box-shadow: none;
}
.btn.btn-cta-animated:focus-visible {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.50),
0 18px 40px rgba(0, 41, 107, 0.20);
}
/* Comfortable hit areas (DESIGN.md §9, §11) */
.btn.btn-cta-animated,
.btn.btn-glass-gray,
.navbar .btn-link,
.gdpr-pill {
min-height: var(--hit-area);
display: inline-flex;
align-items: center;
justify-content: center;
}
.navbar-toggler {
min-width: var(--hit-area);
min-height: var(--hit-area);
}
/* Gray glass button variant for policy pages' "Back to Home" CTA */
.btn.btn-glass-gray {
position: relative;
overflow: hidden;
border: 1px solid var(--glass-border) !important;
color: #111827 !important;
/* slate-900 */
background:
radial-gradient(420px 240px at var(--gloss-x, 50%) calc(var(--gloss-y, 50%) - 40%), rgba(255, 255, 255, calc(var(--gloss-alpha, 0.45) * var(--light-intensity, 0.6))), rgba(255, 255, 255, 0.0) 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
linear-gradient(180deg, rgba(107, 114, 128, 0.18), rgba(107, 114, 128, 0.06)),
/* gray accent */
repeating-linear-gradient(var(--light-angle, 45deg), rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
background-attachment: scroll, scroll, scroll, scroll;
-webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
backdrop-filter: blur(calc(var(--glass-blur) * 0.8)) saturate(var(--glass-saturation));
/* diffused glow only (no solid spread) to match blue CTA */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 32px rgba(0, 0, 0, 0.18), 0 0 36px rgba(107, 114, 128, 0.30);
will-change: background-position, background;
}
.btn.btn-glass-gray::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 45%),
url('data:image/svg+xml;utf8,');
background-blend-mode: normal, soft-light;
background-repeat: no-repeat, repeat;
background-size: auto, 120px 120px;
border-radius: inherit;
pointer-events: none;
}
.btn.btn-glass-gray:hover {
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 18px 40px rgba(16, 24, 40, 0.18), 0 0 40px rgba(107, 114, 128, 0.32);
}
/* Match navbar CTA sizing and radius */
.navbar .btn-glass-gray {
padding: 0.5rem 1rem;
font-size: 0.95rem;
border-radius: 50px;
}
/* ==========================================================================
Resilience (DESIGN.md §5 fallback, §11 accessibility)
Glass is an enhancement. Every surface stays legible without it.
========================================================================== */
/* No backdrop-filter support: fall back to an opaque surface. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.navbar .container,
.content-section,
.vision-section,
.hero-animation,
.footer .card,
.popover.gdpr-popover {
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(16, 24, 40, 0.10);
}
.btn.btn-cta-animated,
.btn.btn-outline-dark {
background: linear-gradient(180deg, rgba(0, 80, 157, 0.16), rgba(0, 80, 157, 0.10)), rgba(255, 255, 255, 0.92) !important;
border-color: rgba(0, 80, 157, 0.35) !important;
}
.btn.btn-glass-gray,
.gdpr-pill {
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(16, 24, 40, 0.14) !important;
}
.navbar .nav-link:hover,
.navbar .btn-link:hover,
.footer-legal-links a:hover {
background: rgba(16, 24, 40, 0.06) !important;
border-color: rgba(16, 24, 40, 0.12) !important;
}
}
/* Reduced transparency / increased contrast: raise surface opacity and
border contrast rather than relying on translucency for hierarchy. */
@media (prefers-reduced-transparency: reduce),
(prefers-contrast: more) {
.navbar .container,
.content-section,
.vision-section,
.hero-animation,
.footer .card,
.popover.gdpr-popover {
background: var(--surface-solid) !important;
border-color: rgba(16, 24, 40, 0.18) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.navbar .container::before {
content: none !important;
}
/* The primary action keeps its blue identity, now as a solid fill. */
.btn.btn-cta-animated {
background: var(--findaroo-blue) !important;
border-color: var(--findaroo-royal) !important;
color: #ffffff !important;
}
.btn.btn-cta-animated::before {
content: none !important;
}
.btn.btn-glass-gray,
.gdpr-pill {
background: var(--surface-solid) !important;
border-color: rgba(16, 24, 40, 0.28) !important;
color: var(--text-primary) !important;
}
.pricing-card {
border-color: rgba(16, 24, 40, 0.20);
}
.text-block p,
.text-muted {
color: #4b5563 !important;
}
}
/* Live email discovery demo — the landing-page counterpart to the product UI. */
.find-contact-demo {
--fcd-blue: #00509d;
--fcd-royal: #0a58ca;
--fcd-soft-blue: #edf4fb;
--fcd-green: #0b8f57;
width: 100%;
overflow: hidden;
text-align: left;
color: #172033;
background: #fbfcfe;
border: 1px solid #dce4ee;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(28, 51, 84, 0.14);
}
.fcd-toolbar,
.fcd-panel-label,
.fcd-candidate,
.fcd-signal,
.fcd-result {
display: flex;
align-items: center;
}
.fcd-toolbar {
justify-content: space-between;
min-height: 42px;
padding: 0 1rem;
font-size: 0.72rem;
font-weight: 800;
color: #334155;
background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
border-bottom: 1px solid #dde5ef;
}
.fcd-toolbar > span:first-child i {
margin-right: 0.42rem;
color: var(--fcd-blue);
}
.fcd-live {
gap: 0.38rem;
color: var(--fcd-green);
}
.fcd-live i {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 0 rgba(11, 143, 87, 0.32);
animation: fcd-live-pulse 2s ease-out infinite;
}
.fcd-prospect {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
overflow: hidden;
padding: 0.8rem 0.9rem;
background: #ffffff;
border-bottom: 1px solid #e6ebf2;
}
.fcd-prospect > span:not(.fcd-scan),
.fcd-result > span,
.fcd-signal > span {
position: relative;
z-index: 1;
}
.fcd-avatar {
display: grid;
place-items: center;
width: 36px;
height: 36px;
font-size: 0.72rem;
font-weight: 900;
color: var(--fcd-blue);
background: var(--fcd-soft-blue);
border: 1px solid #d7e4f2;
border-radius: 11px;
}
.fcd-prospect small,
.fcd-prospect strong,
.fcd-signal small,
.fcd-signal strong,
.fcd-result small,
.fcd-result strong {
display: block;
}
.fcd-prospect small,
.fcd-signal small,
.fcd-result small {
margin-bottom: 0.08rem;
font-size: 0.57rem;
letter-spacing: 0.03em;
color: #718096;
}
.fcd-prospect strong {
font-size: 0.73rem;
}
.fcd-company {
text-align: right;
}
.fcd-scan {
position: absolute;
inset: 0 auto 0 -35%;
width: 28%;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(10, 88, 202, 0.11), transparent);
transform: skewX(-12deg);
animation: fcd-scan 5.4s ease-in-out infinite;
}
.fcd-candidates {
padding: 0.62rem 0.85rem 0.55rem;
background: #f8fafc;
}
.fcd-panel-label {
justify-content: space-between;
margin-bottom: 0.42rem;
font-size: 0.55rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
}
.fcd-panel-label small {
font-size: inherit;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: none;
}
.fcd-candidate {
justify-content: space-between;
gap: 0.65rem;
min-width: 0;
margin-top: 0.32rem;
padding: 0.42rem 0.55rem;
font-size: 0.66rem;
background: rgba(255, 255, 255, 0.92);
border: 1px solid #e2e8f0;
border-radius: 8px;
opacity: 0.38;
transform: translateY(5px);
animation: fcd-candidate-resolve 7s ease-in-out infinite;
}
.fcd-candidate span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fcd-candidate b {
flex: 0 0 auto;
font-size: 0.58rem;
color: #9a4d55;
}
.fcd-candidate-three b {
color: var(--fcd-green);
}
.fcd-candidate-two { animation-delay: 0.55s; }
.fcd-candidate-three { animation-delay: 1.1s; }
.fcd-signals {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.42rem;
padding: 0 0.85rem 0.65rem;
background: #f8fafc;
}
.fcd-signal {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.42rem;
min-width: 0;
padding: 0.48rem;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 9px;
opacity: 0.45;
transform: translateY(5px);
animation: fcd-signal-resolve 7s ease-in-out infinite;
}
.fcd-signal > i {
display: grid;
place-items: center;
width: 23px;
height: 23px;
font-size: 0.6rem;
color: var(--fcd-blue);
background: var(--fcd-soft-blue);
border-radius: 7px;
}
.fcd-signal strong {
overflow: hidden;
font-size: 0.59rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.fcd-signal b {
font-size: 0.66rem;
color: var(--fcd-green);
opacity: 0;
transform: scale(0.45);
animation: fcd-check-pop 7s ease-in-out infinite;
}
.fcd-signal-pattern,
.fcd-signal-pattern b { animation-delay: 0.42s; }
.fcd-signal-mailbox,
.fcd-signal-mailbox b { animation-delay: 0.84s; }
.fcd-result {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.62rem;
padding: 0.7rem 0.85rem;
background: linear-gradient(90deg, rgba(11, 143, 87, 0.09), rgba(237, 244, 251, 0.9));
border-top: 1px solid #dce7e3;
animation: fcd-result-glow 7s ease-in-out infinite;
}
.fcd-result-icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
font-size: 1rem;
color: var(--fcd-green);
background: #ffffff;
border: 1px solid rgba(11, 143, 87, 0.18);
border-radius: 9px;
}
.fcd-result strong {
overflow: hidden;
font-size: 0.72rem;
color: #0a6f47;
text-overflow: ellipsis;
white-space: nowrap;
}
.fcd-fresh {
align-self: center;
padding: 0.28rem 0.45rem;
font-size: 0.55rem;
font-weight: 850;
color: #0a6f47;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(11, 143, 87, 0.15);
border-radius: 999px;
white-space: nowrap;
}
/* Simplified demo: one input context, one check, one answer. */
.fcd-simple-query {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: #ffffff;
}
.fcd-simple-query small,
.fcd-simple-query strong {
display: block;
}
.fcd-simple-query small {
margin-bottom: 0.08rem;
font-size: 0.57rem;
letter-spacing: 0.03em;
color: #718096;
}
.fcd-simple-query strong {
font-size: 0.73rem;
}
.fcd-simple-domain {
text-align: right;
}
.fcd-simple-status {
display: grid;
grid-template-columns: max-content minmax(90px, 1fr);
align-items: center;
gap: 0.75rem;
padding: 0.66rem 1rem;
font-size: 0.61rem;
font-weight: 800;
color: #526176;
background: #f6f9fc;
border-top: 1px solid #e6ebf2;
border-bottom: 1px solid #e2e8f0;
}
.fcd-simple-status > span:first-child i {
margin-right: 0.3rem;
color: var(--fcd-blue);
}
.fcd-simple-track {
position: relative;
height: 4px;
overflow: hidden;
background: #dfe7f0;
border-radius: 999px;
}
.fcd-simple-track i {
position: absolute;
inset: 0 auto 0 0;
width: 42%;
background: linear-gradient(90deg, var(--fcd-blue), #55a0e8);
border-radius: inherit;
animation: fcd-simple-progress 3.8s ease-in-out infinite;
}
.fcd-simple .fcd-result {
padding: 0.82rem 1rem;
}
@keyframes fcd-simple-progress {
0% { width: 12%; opacity: 0.55; }
55%, 78% { width: 100%; opacity: 1; }
100% { width: 12%; opacity: 0.55; }
}
/* Product workflow demo: prospect clues → effortless discovery → verified address. */
.fcd-sequence-stage {
position: relative;
display: grid;
place-items: center;
min-height: 245px;
overflow: hidden;
text-align: center;
background:
radial-gradient(circle at 50% 50%, rgba(0, 80, 157, 0.08), transparent 32%),
linear-gradient(180deg, #fbfcfe 0%, #f3f7fb 100%);
}
.fcd-sequence-detail,
.fcd-sequence-magic,
.fcd-sequence-result {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
padding: 1.5rem;
opacity: 0;
transform: translateY(10px) scale(0.98);
transition: opacity 260ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fcd-sequence-detail.is-visible,
.fcd-sequence-magic.is-visible,
.fcd-sequence-result.is-visible {
opacity: 1;
transform: none;
}
.fcd-sequence-detail small {
margin-bottom: 0.5rem;
color: #718096;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.fcd-sequence-detail strong {
max-width: 100%;
overflow: hidden;
color: #142238;
font-size: clamp(1.65rem, 5vw, 2.35rem);
line-height: 1.05;
letter-spacing: -0.045em;
text-overflow: ellipsis;
white-space: nowrap;
}
.fcd-sequence-detail strong.is-typing::after {
display: inline-block;
width: 2px;
height: 0.92em;
margin-left: 0.12em;
background: var(--fcd-blue);
content: "";
vertical-align: -0.04em;
animation: fcd-sequence-cursor 0.62s steps(1, end) infinite;
}
@keyframes fcd-sequence-cursor {
0%, 48% { opacity: 1; }
49%, 100% { opacity: 0; }
}
.fcd-sequence-detail::after {
content: "";
width: 34px;
height: 3px;
margin-top: 1rem;
background: var(--findaroo-yellow);
border-radius: 999px;
}
.fcd-sequence-magic {
gap: 0.45rem;
}
.fcd-sequence-magic strong {
color: #25354b;
font-size: 0.78rem;
}
.fcd-sequence-magic.is-active .fcd-magic-ring {
animation: fcd-magic-orbit 1.8s linear infinite;
}
.fcd-sequence-magic.is-active .fcd-magic-core {
animation: fcd-magic-breathe 1.35s ease-in-out infinite;
}
.fcd-sequence-magic.is-active .fcd-spark {
animation: fcd-magic-spark 1.4s ease-in-out infinite;
}
.fcd-sequence-magic.is-active .fcd-spark-two { animation-delay: 0.35s; }
.fcd-sequence-magic.is-active .fcd-spark-three { animation-delay: 0.7s; }
.fcd-sequence-result {
gap: 0.38rem;
background: linear-gradient(180deg, rgba(247, 252, 250, 0.8), rgba(225, 244, 237, 0.78));
}
.fcd-sequence-check {
display: grid;
place-items: center;
width: 52px;
height: 52px;
margin-bottom: 0.35rem;
color: #fff;
background: var(--fcd-green);
border-radius: 18px;
box-shadow: 0 12px 28px rgba(11, 143, 87, 0.19);
}
.fcd-sequence-result small {
color: #607367;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.fcd-sequence-result strong {
max-width: 100%;
overflow-wrap: anywhere;
color: #087649;
font-size: clamp(1rem, 3vw, 1.35rem);
letter-spacing: -0.025em;
}
.fcd-identity-scene {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(155px, 0.65fr);
min-height: 218px;
overflow: hidden;
background:
radial-gradient(circle at 28% 48%, rgba(0, 80, 157, 0.08), transparent 31%),
linear-gradient(180deg, #fbfcfe 0%, #f3f7fb 100%);
border-bottom: 1px solid #e2e8f0;
}
.fcd-identity-card {
position: relative;
display: grid;
place-items: center;
min-width: 0;
min-height: 218px;
border-right: 1px solid rgba(220, 228, 238, 0.9);
}
.fcd-identity-card::before {
content: "";
position: absolute;
width: 124px;
height: 124px;
border: 1px dashed rgba(0, 80, 157, 0.18);
border-radius: 50%;
}
.fcd-identity-avatar {
position: relative;
z-index: 2;
display: grid;
place-items: center;
width: 64px;
height: 64px;
font-size: 1rem;
font-weight: 900;
letter-spacing: -0.03em;
color: var(--fcd-blue);
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 80, 157, 0.17);
border-radius: 22px;
box-shadow: 0 12px 30px rgba(0, 80, 157, 0.12);
}
.fcd-identity-clues {
position: absolute;
inset: 0;
}
.fcd-clue {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 100px;
padding: 0.48rem 0.62rem;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 80, 157, 0.13);
border-radius: 999px;
box-shadow: 0 8px 22px rgba(28, 51, 84, 0.09);
opacity: 0;
transition: opacity 300ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fcd-clue small,
.fcd-clue strong {
display: block;
line-height: 1.05;
}
.fcd-clue small {
margin-bottom: 0.13rem;
font-size: 0.5rem;
font-weight: 750;
color: #7a8799;
}
.fcd-clue strong {
max-width: 150px;
overflow: hidden;
font-size: 0.67rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.fcd-clue > i {
display: grid;
place-items: center;
width: 24px;
height: 24px;
flex: 0 0 auto;
font-size: 0.6rem;
color: var(--fcd-blue);
background: var(--fcd-soft-blue);
border-radius: 50%;
}
.fcd-clue-first {
top: 20px;
left: 18px;
transform: translate(-18px, 8px) scale(0.92);
}
.fcd-clue-last {
top: 20px;
right: 18px;
transform: translate(18px, 8px) scale(0.92);
}
.fcd-clue-company {
bottom: 18px;
left: 50%;
min-width: 174px;
transform: translate(-50%, 18px) scale(0.92);
}
.fcd-clue.is-visible {
opacity: 1;
transform: none;
}
.fcd-clue-company.is-visible {
transform: translateX(-50%);
}
.fcd-identity-scene .fcd-magic-stage {
grid-template-columns: 1fr;
justify-items: center;
gap: 0.45rem;
min-height: 218px;
padding: 1rem;
text-align: center;
background: transparent;
border-bottom: 0;
}
.fcd-input-grid {
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(0, .8fr) minmax(0, 1.5fr);
gap: 0.5rem;
padding: 0.75rem 0.85rem;
background: #ffffff;
border-bottom: 1px solid #e6ebf2;
}
.fcd-input {
min-width: 0;
padding: 0.5rem 0.6rem;
background: #f6f8fb;
border: 1px solid #e1e7ef;
border-radius: 8px;
}
.fcd-input small,
.fcd-input strong {
display: block;
}
.fcd-input small {
margin-bottom: 0.18rem;
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #718096;
}
.fcd-input strong {
position: relative;
min-height: 1.1em;
overflow: hidden;
font-size: 0.68rem;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.fcd-input strong.is-typing::after {
content: "";
display: inline-block;
width: 1px;
height: 1em;
margin-left: 2px;
vertical-align: -0.12em;
background: var(--fcd-blue);
animation: fcd-cursor 0.64s steps(1, end) infinite;
}
.fcd-magic-stage {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
justify-content: center;
gap: 1rem;
min-height: 142px;
padding: 1rem 1.25rem;
background:
radial-gradient(circle at 24% 50%, rgba(0, 80, 157, 0.08), transparent 30%),
linear-gradient(180deg, #f8fafc, #f2f6fa);
border-bottom: 1px solid #e2e8f0;
}
.fcd-magic-visual {
position: relative;
display: grid;
place-items: center;
width: 78px;
height: 78px;
}
.fcd-magic-ring {
position: absolute;
inset: 5px;
border: 1px solid rgba(0, 80, 157, 0.18);
border-top-color: rgba(0, 80, 157, 0.60);
border-radius: 50%;
opacity: 0.42;
}
.fcd-magic-core {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 48px;
height: 48px;
color: var(--fcd-blue);
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 80, 157, 0.14);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 80, 157, 0.11);
transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.fcd-magic-core::after {
content: "✓";
position: absolute;
font-size: 1.25rem;
font-weight: 900;
opacity: 0;
transform: scale(0.55);
transition: opacity 180ms ease, transform 220ms ease;
}
.fcd-magic-copy strong,
.fcd-magic-copy small {
display: block;
}
.fcd-magic-copy strong {
margin-bottom: 0.2rem;
font-size: 0.78rem;
color: #25354b;
}
.fcd-magic-copy small {
font-size: 0.59rem;
color: #718096;
}
.fcd-spark {
position: absolute;
z-index: 2;
color: var(--findaroo-yellow);
font-size: 0.72rem;
font-style: normal;
opacity: 0;
}
.fcd-spark-one { top: 3px; right: 2px; }
.fcd-spark-two { bottom: 8px; left: 0; font-size: 0.54rem; }
.fcd-spark-three { top: 17px; left: 1px; font-size: 0.42rem; }
.fcd-magic-stage.is-active .fcd-magic-ring {
animation: fcd-magic-orbit 1.8s linear infinite;
}
.fcd-magic-stage.is-active .fcd-magic-core {
animation: fcd-magic-breathe 1.35s ease-in-out infinite;
}
.fcd-magic-stage.is-active .fcd-spark {
animation: fcd-magic-spark 1.4s ease-in-out infinite;
}
.fcd-magic-stage.is-active .fcd-spark-two { animation-delay: 0.35s; }
.fcd-magic-stage.is-active .fcd-spark-three { animation-delay: 0.7s; }
.fcd-magic-stage.is-complete .fcd-magic-ring {
border-color: rgba(11, 143, 87, 0.28);
animation: none;
}
.fcd-magic-stage.is-complete .fcd-magic-core {
color: var(--fcd-green);
background: rgba(11, 143, 87, 0.10);
border-color: rgba(11, 143, 87, 0.24);
animation: none;
transform: scale(1.04);
}
.fcd-magic-stage.is-complete .fcd-magic-core i {
opacity: 0;
}
.fcd-magic-stage.is-complete .fcd-magic-core::after {
opacity: 1;
transform: scale(1);
}
.fcd-magic-flow .fcd-result {
max-height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
opacity: 0;
transform: translateY(5px);
animation: none;
transition: max-height 260ms ease, padding 260ms ease, opacity 220ms ease, transform 220ms ease, border-width 220ms ease;
}
.fcd-magic-flow .fcd-result.is-visible {
max-height: 72px;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
border-top-width: 1px;
opacity: 1;
transform: none;
}
@keyframes fcd-cursor {
0%, 45% { opacity: 1; }
46%, 100% { opacity: 0; }
}
@keyframes fcd-magic-orbit {
to { transform: rotate(360deg); }
}
@keyframes fcd-magic-breathe {
0%, 100% { transform: scale(0.96); box-shadow: 0 8px 24px rgba(0, 80, 157, 0.09); }
50% { transform: scale(1.06); box-shadow: 0 10px 30px rgba(0, 80, 157, 0.19); }
}
@keyframes fcd-magic-spark {
0%, 100% { opacity: 0; transform: scale(0.55) rotate(0deg); }
45%, 65% { opacity: 1; transform: scale(1) rotate(20deg); }
}
@keyframes fcd-live-pulse {
70% { box-shadow: 0 0 0 6px rgba(11, 143, 87, 0); }
100% { box-shadow: 0 0 0 0 rgba(11, 143, 87, 0); }
}
@keyframes fcd-scan {
0%, 14% { left: -35%; opacity: 0; }
22% { opacity: 1; }
48%, 100% { left: 120%; opacity: 0; }
}
@keyframes fcd-candidate-resolve {
0%, 12% { opacity: 0.38; transform: translateY(5px); }
22%, 78% { opacity: 1; transform: none; }
92%, 100% { opacity: 0.38; transform: translateY(5px); }
}
@keyframes fcd-signal-resolve {
0%, 30% { opacity: 0.45; transform: translateY(5px); }
40%, 82% { opacity: 1; transform: none; }
94%, 100% { opacity: 0.45; transform: translateY(5px); }
}
@keyframes fcd-check-pop {
0%, 35% { opacity: 0; transform: scale(0.45); }
44%, 84% { opacity: 1; transform: scale(1); }
96%, 100% { opacity: 0; transform: scale(0.45); }
}
@keyframes fcd-result-glow {
0%, 46% { filter: saturate(0.65); }
56%, 84% { filter: saturate(1.12); }
100% { filter: saturate(0.65); }
}
@media (max-width: 767.98px) {
.fcd-sequence-stage {
min-height: 220px;
}
.fcd-sequence-detail,
.fcd-sequence-magic,
.fcd-sequence-result {
padding: 1.25rem;
}
.fcd-sequence-result strong {
font-size: 0.96rem;
}
.fcd-identity-scene {
grid-template-columns: 1fr;
}
.fcd-identity-card {
min-height: 188px;
border-right: 0;
border-bottom: 1px solid rgba(220, 228, 238, 0.9);
}
.fcd-clue-first {
top: 16px;
left: 12px;
}
.fcd-clue-last {
top: 16px;
right: 12px;
}
.fcd-clue-company {
bottom: 14px;
}
.fcd-identity-scene .fcd-magic-stage {
min-height: 130px;
padding: 0.75rem 1rem;
}
.fcd-identity-scene .fcd-magic-visual {
width: 62px;
height: 62px;
}
.fcd-identity-scene .fcd-magic-core {
width: 42px;
height: 42px;
border-radius: 14px;
}
.fcd-input-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fcd-input-domain {
grid-column: 1 / -1;
}
.fcd-magic-stage {
grid-template-columns: 1fr;
justify-items: center;
gap: 0.55rem;
min-height: 178px;
text-align: center;
}
.fcd-simple-query {
grid-template-columns: auto minmax(0, 1fr);
}
.fcd-simple-domain {
grid-column: 2;
text-align: left;
}
.fcd-simple-status {
grid-template-columns: 1fr;
gap: 0.45rem;
}
.fcd-prospect {
grid-template-columns: auto minmax(0, 1fr);
}
.fcd-company {
grid-column: 2;
text-align: left;
}
.fcd-signals {
grid-template-columns: 1fr;
}
.fcd-result {
grid-template-columns: 30px minmax(0, 1fr);
}
.fcd-fresh {
grid-column: 2;
justify-self: start;
}
.fcd-result strong {
overflow: visible;
font-size: 0.62rem;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
#pricing .row.justify-content-center > .col-md-6 {
flex: 0 0 100%;
width: 100%;
max-width: 560px;
}
}
/* Canonical landing-page rhythm shared across the suite. */
#made-in-europe .section-title {
margin-bottom: 2rem;
}
#made-in-europe .text-block {
padding: 0;
margin-bottom: 0;
text-align: left;
}
#made-in-europe .text-block p:last-child {
margin-bottom: 0 !important;
}
#pricing .production-plan .pricing-header {
min-height: 0;
margin-bottom: 0;
}
#pricing .production-plan .pricing-features {
margin: 0.75rem 0 2rem;
}
/* Keep the primary nav action on one line while the desktop bar tightens.
Its type and horizontal padding ease down before the app-menu breakpoint. */
@media (min-width: 992px) {
.navbar .navbar-actions .btn-cta-animated {
flex-shrink: 1;
padding-inline: clamp(0.7rem, 1.1vw, 1rem);
font-size: clamp(0.75rem, 1.15vw, 0.95rem);
line-height: 1.2;
white-space: nowrap;
}
}
/* Kings is intentionally separated from the recurring tiers: a dark,
full-width lifetime offer rather than a fourth monthly-plan card. */
#pricing .kings-plan {
width: 100%;
max-width: none;
margin: 0.5rem auto 0;
display: grid;
grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.35fr) minmax(150px, 0.75fr);
grid-template-rows: auto auto;
align-items: center;
gap: 0.65rem 1.5rem;
padding: 1.15rem 1.4rem;
color: #ffffff;
background:
radial-gradient(circle at 92% 0%, rgba(245, 196, 81, 0.16), transparent 30%),
#0b0d10;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
box-shadow: 0 18px 44px rgba(11, 13, 16, 0.22);
}
#pricing .kings-plan-main,
#pricing .kings-plan-footer {
display: contents;
}
#pricing .kings-plan-copy {
grid-column: 1;
grid-row: 1 / span 2;
min-width: 0;
}
#pricing .kings-plan-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.35rem;
color: #f5c451;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#pricing .kings-plan h3 {
margin: 0 0 0.2rem;
color: #ffffff;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
}
#pricing .kings-plan-copy p {
margin: 0;
color: rgba(255, 255, 255, 0.68);
}
#pricing .kings-plan-price {
grid-column: 3;
grid-row: 1;
flex: 0 0 auto;
text-align: center;
}
#pricing .kings-plan-price > div {
display: flex;
align-items: flex-start;
justify-content: center;
color: #ffffff;
line-height: 1;
}
#pricing .kings-plan-price .currency {
margin: 0.35rem 0.2rem 0 0;
color: #f5c451;
font-size: 1.25rem;
font-weight: 700;
}
#pricing .kings-plan-price .amount {
font-size: clamp(2.5rem, 5vw, 3.4rem);
font-weight: 750;
letter-spacing: -0.05em;
}
#pricing .kings-plan-price > span {
display: block;
margin-top: 0.35rem;
color: rgba(255, 255, 255, 0.58);
font-size: 0.82rem;
}
#pricing .kings-plan-footer {
margin: 0;
padding: 0;
border: 0;
}
#pricing .kings-plan-footer ul {
grid-column: 2;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0;
}
#pricing .kings-plan-footer li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.78);
font-size: 0.88rem;
}
#pricing .kings-plan-footer li i {
color: #f5c451;
}
#pricing .kings-plan-cta {
grid-column: 3;
grid-row: 2;
flex: 0 0 auto;
min-width: 160px;
padding: 0.65rem 1rem;
color: #0b0d10;
background: #f5c451;
border: 1px solid #f5c451;
border-radius: 14px;
font-weight: 700;
box-shadow: 0 8px 22px rgba(245, 196, 81, 0.18);
}
#pricing .kings-plan-cta:hover,
#pricing .kings-plan-cta:focus-visible {
color: #0b0d10;
background: #ffda79;
border-color: #ffda79;
transform: translateY(-1px);
}
@media (max-width: 767.98px) {
#pricing .kings-plan {
display: block;
padding: 1.5rem;
border-radius: 20px;
}
#pricing .kings-plan-main,
#pricing .kings-plan-footer {
display: flex;
align-items: stretch;
flex-direction: column;
gap: 1.25rem;
}
#pricing .kings-plan-footer {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
#pricing .kings-plan-price {
text-align: left;
}
#pricing .kings-plan-price > div {
justify-content: flex-start;
}
#pricing .kings-plan-footer ul {
flex-direction: column;
}
#pricing .kings-plan-cta {
width: 100%;
}
}
#suite .suite-flow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
@media (max-width: 767.98px) {
#suite .suite-flow {
grid-template-columns: 1fr;
max-width: 320px;
row-gap: 1rem;
}
}
/* ==========================================================================
Reduced motion (DESIGN.md §10, §11)
Decorative and looping motion stops. The final, informative state of every
product demonstration stays visible.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* Hold the demonstrations on their resolved state rather than frame 0. */
.progress-bar {
width: 100% !important;
}
.upload-progress,
.upload-complete {
opacity: 1 !important;
}
.upload-complete {
transform: translate(-50%, -50%) scale(1) !important;
}
/* Rest the sheet fully inside the scene: it starts at left:-180px, so it
needs the full 180px back to clear its own left edge without running
into the CSV box. */
.results-scene .sheet {
opacity: 1 !important;
transform: translateX(180px) !important;
}
.results-scene .check {
opacity: 1 !important;
transform: scale(1) !important;
}
.excel-rows-container {
transform: none !important;
}
.fcd-scan {
display: none;
}
.fcd-candidate,
.fcd-signal,
.fcd-signal b {
opacity: 1 !important;
transform: none !important;
}
.btn.btn-cta-animated:hover,
.btn.btn-outline-dark:hover,
.btn.btn-glass-gray:hover,
.btn.btn-cta-animated:active,
.btn.btn-outline-dark:active,
.btn.btn-glass-gray:active {
transform: none;
}
}
/* Privacy comparison: two editorial paths instead of a spreadsheet. */
#why-different .privacy-contrast {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
width: min(100%, 760px);
margin: 0.5rem auto 0;
}
#why-different .privacy-path {
position: relative;
min-width: 0;
padding: 1.35rem;
overflow: hidden;
border-radius: 18px;
}
#why-different .privacy-path-legacy {
color: #475467;
background: linear-gradient(180deg, #f8f9fb, #f1f3f6);
border: 1px solid rgba(71, 84, 103, 0.12);
}
#why-different .privacy-path-fresh {
color: #12324c;
background:
radial-gradient(circle at 100% 0%, rgba(253, 197, 0, 0.18), transparent 34%),
linear-gradient(155deg, rgba(235, 244, 253, 0.98), rgba(245, 250, 255, 0.98));
border: 1px solid rgba(0, 80, 157, 0.20);
box-shadow: 0 14px 34px rgba(0, 80, 157, 0.10);
}
#why-different .privacy-path-heading {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1rem;
}
#why-different .privacy-path-icon {
display: grid;
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 14px;
place-items: center;
}
#why-different .privacy-path-legacy .privacy-path-icon {
color: #667085;
background: #e4e7ec;
}
#why-different .privacy-path-fresh .privacy-path-icon {
color: #fff;
background: var(--findaroo-blue);
box-shadow: 0 8px 20px rgba(0, 80, 157, 0.18);
}
#why-different .privacy-path-heading small,
#why-different .privacy-path-heading h4 {
display: block;
margin: 0;
}
#why-different .privacy-path-heading small {
color: #7a8798;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#why-different .privacy-path-heading h4 {
margin-top: 0.12rem;
color: inherit;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.02em;
}
#why-different .privacy-path ul {
display: grid;
gap: 0.62rem;
margin: 0;
padding: 0;
list-style: none;
}
#why-different .privacy-path li {
display: flex;
align-items: center;
gap: 0.65rem;
min-width: 0;
padding: 0.58rem 0.68rem;
border-radius: 10px;
font-size: 0.84rem;
font-weight: 650;
}
#why-different .privacy-path-legacy li {
background: rgba(255, 255, 255, 0.55);
}
#why-different .privacy-path-fresh li {
background: rgba(255, 255, 255, 0.72);
}
#why-different .privacy-path li i {
display: grid;
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 8px;
place-items: center;
font-size: 0.68rem;
}
#why-different .privacy-path-legacy li i {
color: #667085;
background: #e4e7ec;
}
#why-different .privacy-path-fresh li i {
color: var(--findaroo-blue);
background: rgba(0, 80, 157, 0.10);
}
/* Built Different stories: compact proof points replace long-form essays. */
#why-different .difference-story {
width: 100%;
padding: 1.45rem;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 18px;
background: rgba(255, 255, 255, 0.72);
}
#why-different .difference-story-heading {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1rem;
}
#why-different .difference-story-icon {
display: grid;
flex: 0 0 auto;
width: 46px;
height: 46px;
color: #fff;
border-radius: 15px;
background: var(--findaroo-blue);
box-shadow: 0 9px 22px rgba(0, 80, 157, 0.16);
place-items: center;
}
#why-different .difference-story-heading small,
#why-different .difference-story-heading h3 {
display: block;
margin: 0;
}
#why-different .difference-story-heading small {
color: #748196;
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#why-different .difference-story-heading h3 {
margin-top: 0.12rem;
color: #203552;
font-size: 1.28rem;
font-weight: 800;
letter-spacing: -0.025em;
}
#why-different .difference-story-lead {
margin: 0 0 1rem;
color: #526071;
font-size: 0.92rem;
line-height: 1.55;
}
#why-different .difference-proof-list {
display: grid;
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}
#why-different .difference-proof-list li {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
padding: 0.72rem 0.76rem;
border-radius: 12px;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.055);
}
#why-different .difference-proof-list li > i {
display: grid;
flex: 0 0 auto;
width: 30px;
height: 30px;
color: var(--findaroo-blue);
border-radius: 10px;
background: rgba(0, 80, 157, 0.09);
place-items: center;
font-size: 0.76rem;
}
#why-different .difference-proof-list span,
#why-different .difference-proof-list strong,
#why-different .difference-proof-list small {
display: block;
min-width: 0;
}
#why-different .difference-proof-list strong {
color: #203552;
font-size: 0.84rem;
font-weight: 800;
}
#why-different .difference-proof-list small {
margin-top: 0.08rem;
color: #6b7789;
font-size: 0.73rem;
line-height: 1.35;
}
@media (max-width: 767.98px) {
#why-different .privacy-contrast {
grid-template-columns: 1fr;
max-width: 420px;
}
}
/* Built Different: an aging data warehouse versus one live result. */
#why-different .difference-copy-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(100%, 900px);
margin: 0 auto 2rem;
}
#why-different .difference-copy-column {
min-width: 0;
padding: 1.7rem 2rem 1.8rem 0.15rem;
}
#why-different .difference-copy-column + .difference-copy-column {
padding-right: 0.15rem;
padding-left: 2rem;
}
#why-different .difference-copy-column header {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1rem;
}
#why-different .difference-copy-icon {
display: grid;
flex: 0 0 auto;
width: 42px;
height: 42px;
color: var(--findaroo-blue);
border-radius: 14px;
background: rgba(0, 80, 157, 0.08);
place-items: center;
}
#why-different .difference-copy-column small,
#why-different .difference-copy-column h3 {
display: block;
margin: 0;
}
#why-different .difference-copy-column small {
color: #78869a;
font-size: 0.67rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#why-different .difference-copy-column h3 {
margin-top: 0.12rem;
color: #243a56;
font-size: 1.25rem;
font-weight: 850;
}
#why-different .difference-copy-column p {
margin: 0;
color: #53647a;
font-size: 0.91rem;
line-height: 1.7;
}
#why-different .difference-copy-column p + p {
margin-top: 0.85rem;
}
#why-different .difference-visual {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(100%, 900px);
min-height: 390px;
margin: 0 auto;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 28px;
background: rgba(235, 238, 243, 0.78);
box-shadow: 0 24px 70px rgba(24, 43, 69, 0.08);
}
#why-different .difference-world {
position: relative;
display: grid;
grid-template-rows: auto 1fr auto auto;
min-width: 0;
padding: 2rem 2.1rem 1.6rem;
}
#why-different .difference-world-fresh {
border-left: 1px solid rgba(0, 80, 157, 0.1);
background:
radial-gradient(circle at 50% 52%, rgba(0, 80, 157, 0.11), transparent 52%),
rgba(239, 247, 255, 0.86);
}
#why-different .difference-world-label span,
#why-different .difference-world-label strong {
display: block;
}
#why-different .difference-world-label span {
color: #8a94a3;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#why-different .difference-world-label strong {
margin-top: 0.2rem;
color: #526173;
font-size: 1.08rem;
font-weight: 850;
}
#why-different .difference-world-fresh .difference-world-label span,
#why-different .difference-world-fresh .difference-world-label strong {
color: var(--findaroo-blue);
}
#why-different .difference-world > p {
max-width: 290px;
margin: 0 auto;
color: #667386;
font-size: 0.78rem;
line-height: 1.45;
text-align: center;
}
#why-different .difference-versus {
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
display: grid;
width: 38px;
height: 38px;
color: #667386;
border: 1px solid rgba(16, 24, 40, 0.1);
border-radius: 50%;
background: #fff;
box-shadow: 0 9px 26px rgba(26, 42, 64, 0.12);
place-items: center;
font-size: 0.68rem;
font-weight: 900;
text-transform: uppercase;
transform: translate(-50%, -50%);
}
#why-different .database-scene,
#why-different .fresh-scene {
position: relative;
min-height: 205px;
}
#why-different .database-risk {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.62rem;
width: min(100%, 340px);
margin: -0.15rem auto 0.85rem;
padding: 0.7rem 0.78rem;
color: #6c5860;
border: 1px solid rgba(170, 83, 83, 0.15);
border-radius: 15px;
background: rgba(255, 248, 246, 0.82);
}
#why-different .database-risk-icon {
display: grid;
width: 30px;
height: 30px;
color: #b46455;
border-radius: 10px;
background: rgba(180, 100, 85, 0.1);
place-items: center;
}
#why-different .database-risk span:nth-child(2),
#why-different .database-risk strong,
#why-different .database-risk small {
display: block;
min-width: 0;
}
#why-different .database-risk strong {
color: #644b51;
font-size: 0.67rem;
font-weight: 850;
line-height: 1.25;
}
#why-different .database-risk small {
margin-top: 0.08rem;
color: #89787d;
font-size: 0.58rem;
line-height: 1.25;
}
#why-different .database-risk > i {
color: #b8a8ac;
font-size: 0.65rem;
}
#why-different .database-risk b {
color: #a14f46;
font-size: 0.64rem;
white-space: nowrap;
}
#why-different .database-stack {
position: absolute;
top: 54%;
left: 50%;
width: 142px;
height: 104px;
transform: translate(-50%, -50%);
}
#why-different .database-stack span {
position: absolute;
left: 50%;
width: 132px;
height: 54px;
border: 1px solid rgba(79, 92, 110, 0.18);
border-radius: 50%;
background: linear-gradient(180deg, #f6f7f9, #dfe4ea);
box-shadow: 0 8px 16px rgba(56, 66, 81, 0.08);
transform: translateX(-50%);
}
#why-different .database-stack span:nth-child(1) { top: 0; }
#why-different .database-stack span:nth-child(2) { top: 25px; }
#why-different .database-stack span:nth-child(3) { top: 50px; }
#why-different .database-stack i {
position: absolute;
z-index: 2;
top: 45px;
left: 50%;
color: #7e8998;
font-size: 1.4rem;
transform: translate(-50%, -50%);
}
#why-different .database-mail {
position: absolute;
z-index: 3;
padding: 0.34rem 0.54rem;
color: #828c9a;
border: 1px solid rgba(88, 101, 119, 0.1);
border-radius: 8px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 6px 18px rgba(39, 52, 72, 0.08);
font-size: 0.61rem;
}
#why-different .database-mail-one { top: 35px; left: 4%; transform: rotate(-7deg); }
#why-different .database-mail-two { top: 15px; right: 2%; transform: rotate(6deg); }
#why-different .database-mail-three { right: 1%; bottom: 28px; transform: rotate(-4deg); }
#why-different .database-clock {
position: absolute;
z-index: 4;
right: 10%;
bottom: 42px;
display: grid;
width: 42px;
height: 42px;
color: #7e8998;
border: 5px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
background: #dfe4ea;
box-shadow: 0 8px 22px rgba(43, 55, 74, 0.14);
place-items: center;
}
#why-different .fresh-input {
position: absolute;
top: 23px;
padding: 0.48rem 0.72rem;
color: #3d5879;
border: 1px solid rgba(0, 80, 157, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 8px 20px rgba(0, 80, 157, 0.08);
font-size: 0.68rem;
font-weight: 750;
}
#why-different .fresh-input-name { left: 5%; }
#why-different .fresh-input-company { right: 5%; }
#why-different .fresh-input::after {
position: absolute;
top: calc(100% + 7px);
width: 65px;
height: 1px;
background: linear-gradient(90deg, rgba(0, 80, 157, 0.2), rgba(0, 80, 157, 0.6));
content: "";
}
#why-different .fresh-input-name::after { left: 80%; transform: rotate(26deg); transform-origin: left; }
#why-different .fresh-input-company::after { right: 80%; transform: rotate(-26deg); transform-origin: right; }
#why-different .fresh-email {
position: absolute;
top: 53%;
left: 50%;
width: min(92%, 310px);
padding: 1rem 1rem 0.92rem 3.6rem;
border: 1px solid rgba(0, 80, 157, 0.14);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 16px 36px rgba(0, 80, 157, 0.13);
transform: translate(-50%, -50%);
}
#why-different .fresh-email-check {
position: absolute;
top: 50%;
left: 0.9rem;
display: grid;
width: 36px;
height: 36px;
color: #fff;
border-radius: 50%;
background: #15915f;
box-shadow: 0 0 0 8px rgba(21, 145, 95, 0.08);
place-items: center;
transform: translateY(-50%);
}
#why-different .fresh-email small,
#why-different .fresh-email strong {
display: block;
}
#why-different .fresh-email small {
color: #15915f;
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#why-different .fresh-email strong {
margin-top: 0.16rem;
overflow: hidden;
color: #18314f;
font-size: clamp(0.72rem, 1.2vw, 0.9rem);
text-overflow: ellipsis;
white-space: nowrap;
}
#why-different .fresh-delete {
position: absolute;
left: 50%;
bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #66809f;
font-size: 0.64rem;
font-weight: 750;
white-space: nowrap;
transform: translateX(-50%);
}
#why-different .fresh-delete::after {
display: inline-block;
width: 25px;
height: 8px;
margin-left: 0.45rem;
background: radial-gradient(circle, rgba(0, 80, 157, 0.35) 1.5px, transparent 2px) 0 50% / 8px 8px;
content: "";
}
#why-different .difference-visual-assurance {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin: -0.1rem 0 0.55rem;
color: var(--findaroo-blue);
font-size: 0.78rem;
font-weight: 850;
}
@media (max-width: 767.98px) {
#why-different .difference-copy-grid {
grid-template-columns: 1fr;
max-width: 480px;
}
#why-different .difference-copy-column,
#why-different .difference-copy-column + .difference-copy-column {
padding: 1.45rem 0.15rem;
border-left: 0;
}
#why-different .difference-visual {
grid-template-columns: 1fr;
border-radius: 22px;
background: rgba(235, 238, 243, 0.78);
}
#why-different .difference-world {
padding: 1.5rem 1.2rem 1.3rem;
}
#why-different .difference-world-fresh {
border-top: 1px solid rgba(0, 80, 157, 0.1);
border-left: 0;
background:
radial-gradient(circle at 50% 52%, rgba(0, 80, 157, 0.11), transparent 52%),
rgba(239, 247, 255, 0.86);
}
#why-different .difference-versus {
top: 50%;
left: 50%;
}
#why-different .database-scene,
#why-different .fresh-scene {
min-height: 205px;
}
#why-different .database-risk {
grid-template-columns: auto minmax(0, 1fr) auto;
}
#why-different .database-risk > i {
display: none;
}
}