init
This commit is contained in:
commit
95a2de8058
3 changed files with 955 additions and 0 deletions
244
index.html
Normal file
244
index.html
Normal file
|
|
@ -0,0 +1,244 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Dataduck | Business Intelligence for Ambitious Small Teams</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Dataduck gives small businesses executive-grade BI dashboards, reporting, and forecasting without the cost and complexity of a full enterprise data team."
|
||||||
|
/>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Manrope:wght@500;700;800&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="site-shell">
|
||||||
|
<header class="topbar reveal">
|
||||||
|
<a class="brand" href="#hero" aria-label="Dataduck home">
|
||||||
|
<span class="brand-mark">D</span>
|
||||||
|
<span class="brand-text">dataduck</span>
|
||||||
|
</a>
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="#platform">Platform</a>
|
||||||
|
<a href="#services">Services</a>
|
||||||
|
<a href="#results">Results</a>
|
||||||
|
<a href="#contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
<a class="button button-ghost" href="#contact">Book a Strategy Call</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero" id="hero">
|
||||||
|
<div class="hero-copy reveal">
|
||||||
|
<p class="eyebrow">Luxury-grade BI for lean operators</p>
|
||||||
|
<h1>Enterprise intelligence, tailored for the businesses still moving fast.</h1>
|
||||||
|
<p class="hero-text">
|
||||||
|
Dataduck turns scattered spreadsheets, e-commerce feeds, POS data,
|
||||||
|
and finance systems into a decision cockpit built for owners,
|
||||||
|
operators, and revenue teams.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a class="button button-primary" href="#contact">See Dataduck Live</a>
|
||||||
|
<a class="button button-secondary" href="#results">Explore Outcomes</a>
|
||||||
|
</div>
|
||||||
|
<div class="hero-proof">
|
||||||
|
<div>
|
||||||
|
<span class="proof-label">Launch time</span>
|
||||||
|
<strong>14 days</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="proof-label">Typical reporting cut</span>
|
||||||
|
<strong>18 hrs / week</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="proof-label">Designed for</span>
|
||||||
|
<strong>5-150 person teams</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-visual reveal">
|
||||||
|
<div class="visual-glow visual-glow-a"></div>
|
||||||
|
<div class="visual-glow visual-glow-b"></div>
|
||||||
|
<div class="dashboard-card">
|
||||||
|
<div class="dashboard-topline">
|
||||||
|
<div>
|
||||||
|
<p class="mini-label">Executive pulse</p>
|
||||||
|
<h2>Revenue Intelligence Suite</h2>
|
||||||
|
</div>
|
||||||
|
<span class="status-pill">Live</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dashboard-grid">
|
||||||
|
<article class="data-panel data-panel-large">
|
||||||
|
<p class="mini-label">Gross revenue</p>
|
||||||
|
<strong class="metric-value" data-target="284">284%</strong>
|
||||||
|
<span>Quarter-over-quarter visibility lift</span>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="data-panel">
|
||||||
|
<p class="mini-label">Margin watch</p>
|
||||||
|
<strong>$412k</strong>
|
||||||
|
<span>Tracked across all channels</span>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="data-panel">
|
||||||
|
<p class="mini-label">Forecast confidence</p>
|
||||||
|
<strong>97.4%</strong>
|
||||||
|
<span>Weekly planning accuracy</span>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-panel">
|
||||||
|
<div class="chart-header">
|
||||||
|
<p class="mini-label">Performance pulse</p>
|
||||||
|
<span>Daily synced</span>
|
||||||
|
</div>
|
||||||
|
<div class="chart-bars" aria-hidden="true">
|
||||||
|
<span style="--bar-size: 52%"></span>
|
||||||
|
<span style="--bar-size: 68%"></span>
|
||||||
|
<span style="--bar-size: 60%"></span>
|
||||||
|
<span style="--bar-size: 82%"></span>
|
||||||
|
<span style="--bar-size: 73%"></span>
|
||||||
|
<span style="--bar-size: 95%"></span>
|
||||||
|
<span style="--bar-size: 88%"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="trust-band reveal">
|
||||||
|
<p>Built for retailers, hospitality groups, agencies, clinics, and modern service businesses.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="metrics" id="results">
|
||||||
|
<article class="metric-card reveal">
|
||||||
|
<p class="mini-label">Reporting hours reclaimed</p>
|
||||||
|
<strong class="counter" data-target="72">0</strong>
|
||||||
|
<span>Average monthly manual work removed</span>
|
||||||
|
</article>
|
||||||
|
<article class="metric-card reveal">
|
||||||
|
<p class="mini-label">Data sources unified</p>
|
||||||
|
<strong class="counter" data-target="11">0</strong>
|
||||||
|
<span>Finance, CRM, commerce, ads, ops, and payroll</span>
|
||||||
|
</article>
|
||||||
|
<article class="metric-card reveal">
|
||||||
|
<p class="mini-label">Faster decision cycles</p>
|
||||||
|
<strong class="counter" data-target="3">0</strong>
|
||||||
|
<span>Days instead of weeks to answer critical questions</span>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="platform section-grid" id="platform">
|
||||||
|
<div class="section-copy reveal">
|
||||||
|
<p class="eyebrow">The platform</p>
|
||||||
|
<h2>One command center for revenue, margins, labor, cash flow, and demand.</h2>
|
||||||
|
<p>
|
||||||
|
Dataduck combines data plumbing, executive dashboards, and guided
|
||||||
|
analysis into one operating layer. You get the clarity of an
|
||||||
|
enterprise BI stack without hiring a data team to maintain it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-stack">
|
||||||
|
<article class="feature-card reveal">
|
||||||
|
<h3>Boardroom dashboards</h3>
|
||||||
|
<p>
|
||||||
|
Polished KPI views for owners and leadership, designed to answer
|
||||||
|
what changed, why it changed, and what to do next.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card reveal">
|
||||||
|
<h3>Managed integrations</h3>
|
||||||
|
<p>
|
||||||
|
We connect the systems small businesses actually use and keep the
|
||||||
|
numbers reconciled as operations evolve.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card reveal">
|
||||||
|
<h3>Forecasting that stays practical</h3>
|
||||||
|
<p>
|
||||||
|
Demand, staffing, and cash projections tuned for real planning,
|
||||||
|
not academic models nobody trusts.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="services" id="services">
|
||||||
|
<div class="section-copy reveal">
|
||||||
|
<p class="eyebrow">White-glove delivery</p>
|
||||||
|
<h2>We handle the heavy lift so your team can work from signal, not noise.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-grid">
|
||||||
|
<article class="service-card reveal">
|
||||||
|
<span>01</span>
|
||||||
|
<h3>Audit and map</h3>
|
||||||
|
<p>We inspect your data flow, identify blind spots, and define the metrics that actually run the business.</p>
|
||||||
|
</article>
|
||||||
|
<article class="service-card reveal">
|
||||||
|
<span>02</span>
|
||||||
|
<h3>Build and unify</h3>
|
||||||
|
<p>We connect sources, model the business, and ship dashboards with premium presentation quality.</p>
|
||||||
|
</article>
|
||||||
|
<article class="service-card reveal">
|
||||||
|
<span>03</span>
|
||||||
|
<h3>Guide and refine</h3>
|
||||||
|
<p>We stay close after launch, tighten assumptions, and expand the system as your operation matures.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="quote-strip reveal">
|
||||||
|
<p>
|
||||||
|
"Dataduck gave us the discipline of a larger company without slowing
|
||||||
|
down the way we operate."
|
||||||
|
</p>
|
||||||
|
<span>COO, regional retail group</span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="contact reveal" id="contact">
|
||||||
|
<div class="contact-card">
|
||||||
|
<div class="section-copy">
|
||||||
|
<p class="eyebrow">Start here</p>
|
||||||
|
<h2>Make your next operating review feel sharper than your last board deck.</h2>
|
||||||
|
<p>
|
||||||
|
If your business has outgrown spreadsheet firefighting, Dataduck
|
||||||
|
can put a premium BI layer in place quickly.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="contact-form">
|
||||||
|
<label>
|
||||||
|
Name
|
||||||
|
<input type="text" placeholder="Alex Morgan" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Work email
|
||||||
|
<input type="email" placeholder="alex@dataduck.co" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Company
|
||||||
|
<input type="text" placeholder="Northline Foods" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
What do you need visibility on?
|
||||||
|
<textarea placeholder="Revenue mix, margin, labor, forecasting, or executive reporting."></textarea>
|
||||||
|
</label>
|
||||||
|
<button class="button button-primary" type="submit">Request a Private Demo</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
66
script.js
Normal file
66
script.js
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
document.documentElement.classList.add("js-ready");
|
||||||
|
|
||||||
|
const revealItems = document.querySelectorAll(".reveal");
|
||||||
|
|
||||||
|
const revealObserver = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add("is-visible");
|
||||||
|
revealObserver.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
threshold: 0.18,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
revealItems.forEach((item) => revealObserver.observe(item));
|
||||||
|
|
||||||
|
const counters = document.querySelectorAll(".counter");
|
||||||
|
|
||||||
|
const animateCounter = (element) => {
|
||||||
|
const target = Number(element.dataset.target);
|
||||||
|
const duration = 1400;
|
||||||
|
const startTime = performance.now();
|
||||||
|
|
||||||
|
const tick = (now) => {
|
||||||
|
const progress = Math.min((now - startTime) / duration, 1);
|
||||||
|
const eased = 1 - Math.pow(1 - progress, 3);
|
||||||
|
element.textContent = Math.round(target * eased);
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
|
||||||
|
const counterObserver = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
animateCounter(entry.target);
|
||||||
|
counterObserver.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
threshold: 0.4,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
counters.forEach((counter) => counterObserver.observe(counter));
|
||||||
|
|
||||||
|
const contactForm = document.querySelector(".contact-form");
|
||||||
|
|
||||||
|
contactForm?.addEventListener("submit", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const button = contactForm.querySelector("button");
|
||||||
|
if (button) {
|
||||||
|
button.textContent = "Request Received";
|
||||||
|
button.disabled = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
645
styles.css
Normal file
645
styles.css
Normal file
|
|
@ -0,0 +1,645 @@
|
||||||
|
:root {
|
||||||
|
--bg: #f4ede0;
|
||||||
|
--bg-alt: #efe5d4;
|
||||||
|
--panel: rgba(10, 26, 36, 0.9);
|
||||||
|
--panel-soft: rgba(255, 255, 255, 0.64);
|
||||||
|
--ink: #11202b;
|
||||||
|
--ink-muted: rgba(17, 32, 43, 0.68);
|
||||||
|
--line: rgba(17, 32, 43, 0.12);
|
||||||
|
--gold: #bf8a38;
|
||||||
|
--gold-bright: #efca79;
|
||||||
|
--navy: #0f2232;
|
||||||
|
--navy-soft: #19374d;
|
||||||
|
--white: #ffffff;
|
||||||
|
--shadow: 0 24px 80px rgba(15, 34, 50, 0.18);
|
||||||
|
--radius-lg: 32px;
|
||||||
|
--radius-md: 20px;
|
||||||
|
--radius-sm: 14px;
|
||||||
|
--max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: "Instrument Sans", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(239, 202, 121, 0.45), transparent 26%),
|
||||||
|
radial-gradient(circle at 80% 10%, rgba(45, 91, 122, 0.2), transparent 22%),
|
||||||
|
linear-gradient(180deg, #fbf5eb 0%, var(--bg) 48%, var(--bg-alt) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
|
||||||
|
repeating-linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(17, 32, 43, 0.015) 0,
|
||||||
|
rgba(17, 32, 43, 0.015) 1px,
|
||||||
|
transparent 1px,
|
||||||
|
transparent 120px
|
||||||
|
);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-shell {
|
||||||
|
width: min(calc(100% - 32px), var(--max-width));
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-bottom: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
position: sticky;
|
||||||
|
top: 20px;
|
||||||
|
z-index: 20;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 24px;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 18px 22px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(251, 245, 235, 0.78);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
box-shadow: 0 12px 44px rgba(17, 32, 43, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
color: var(--white);
|
||||||
|
background: linear-gradient(135deg, var(--navy), var(--gold));
|
||||||
|
box-shadow: 0 10px 24px rgba(15, 34, 50, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
color: var(--ink-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover,
|
||||||
|
.nav a:focus-visible {
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 14px 22px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition:
|
||||||
|
transform 180ms ease,
|
||||||
|
box-shadow 180ms ease,
|
||||||
|
background-color 180ms ease,
|
||||||
|
border-color 180ms ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover,
|
||||||
|
.button:focus-visible {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-primary {
|
||||||
|
color: var(--white);
|
||||||
|
background: linear-gradient(135deg, #1b384d 0%, #19374d 42%, #bf8a38 100%);
|
||||||
|
box-shadow: 0 18px 36px rgba(25, 55, 77, 0.26);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary,
|
||||||
|
.button-ghost {
|
||||||
|
border-color: rgba(17, 32, 43, 0.14);
|
||||||
|
background: rgba(255, 255, 255, 0.56);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.05fr 0.95fr;
|
||||||
|
gap: 48px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 88px 0 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow,
|
||||||
|
.mini-label,
|
||||||
|
.proof-label {
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
color: var(--gold);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1,
|
||||||
|
.section-copy h2 {
|
||||||
|
margin: 18px 0;
|
||||||
|
font-family: "Manrope", sans-serif;
|
||||||
|
line-height: 0.98;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: clamp(3.6rem, 7vw, 6.7rem);
|
||||||
|
max-width: 10ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-copy h2 {
|
||||||
|
font-size: clamp(2.3rem, 4vw, 4.1rem);
|
||||||
|
max-width: 12ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text,
|
||||||
|
.section-copy p:not(.eyebrow),
|
||||||
|
.feature-card p,
|
||||||
|
.service-card p,
|
||||||
|
.metric-card span,
|
||||||
|
.quote-strip span {
|
||||||
|
color: var(--ink-muted);
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
max-width: 54ch;
|
||||||
|
font-size: 1.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
margin: 34px 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-proof {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-proof div {
|
||||||
|
padding: 18px 20px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: rgba(255, 255, 255, 0.46);
|
||||||
|
}
|
||||||
|
|
||||||
|
.proof-label,
|
||||||
|
.mini-label {
|
||||||
|
color: rgba(17, 32, 43, 0.54);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-proof strong,
|
||||||
|
.data-panel strong,
|
||||||
|
.metric-card strong {
|
||||||
|
display: block;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-family: "Manrope", sans-serif;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
position: relative;
|
||||||
|
min-height: 640px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-glow {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 999px;
|
||||||
|
filter: blur(40px);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-glow-a {
|
||||||
|
width: 260px;
|
||||||
|
height: 260px;
|
||||||
|
top: 20px;
|
||||||
|
right: 80px;
|
||||||
|
background: rgba(239, 202, 121, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-glow-b {
|
||||||
|
width: 320px;
|
||||||
|
height: 320px;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 40px;
|
||||||
|
background: rgba(36, 86, 116, 0.34);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card {
|
||||||
|
position: relative;
|
||||||
|
width: min(100%, 520px);
|
||||||
|
padding: 28px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
color: var(--white);
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%),
|
||||||
|
linear-gradient(145deg, rgba(22, 45, 60, 0.97), rgba(10, 22, 31, 0.96));
|
||||||
|
box-shadow: 0 36px 80px rgba(15, 34, 50, 0.32);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 10% 15%, rgba(239, 202, 121, 0.16), transparent 28%),
|
||||||
|
linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-topline,
|
||||||
|
.chart-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-topline h2 {
|
||||||
|
margin: 6px 0 0;
|
||||||
|
font-family: "Manrope", sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pill {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: 999px;
|
||||||
|
color: var(--gold-bright);
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-panel,
|
||||||
|
.chart-panel,
|
||||||
|
.metric-card,
|
||||||
|
.feature-card,
|
||||||
|
.service-card,
|
||||||
|
.quote-strip,
|
||||||
|
.contact-card {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-panel {
|
||||||
|
padding: 22px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 22px;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-panel-large {
|
||||||
|
grid-column: span 2;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(239, 202, 121, 0.18), rgba(255, 255, 255, 0.06)),
|
||||||
|
rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-panel strong {
|
||||||
|
margin: 12px 0 6px;
|
||||||
|
font-size: clamp(2.2rem, 5vw, 3.4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-panel span,
|
||||||
|
.chart-header span {
|
||||||
|
color: rgba(255, 255, 255, 0.68);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-panel {
|
||||||
|
padding: 22px;
|
||||||
|
border-radius: 22px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-bars {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||||
|
align-items: end;
|
||||||
|
gap: 12px;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-bars span {
|
||||||
|
display: block;
|
||||||
|
height: var(--bar-size);
|
||||||
|
border-radius: 999px 999px 16px 16px;
|
||||||
|
background: linear-gradient(180deg, var(--gold-bright), rgba(191, 138, 56, 0.3));
|
||||||
|
box-shadow: 0 10px 24px rgba(239, 202, 121, 0.14);
|
||||||
|
animation: rise 900ms ease both;
|
||||||
|
animation-delay: calc(var(--bar-size) * 8ms);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-band {
|
||||||
|
margin: 8px 0 24px;
|
||||||
|
padding: 18px 24px;
|
||||||
|
border: 1px solid rgba(17, 32, 43, 0.08);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.44);
|
||||||
|
text-align: center;
|
||||||
|
color: var(--ink-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin: 44px 0 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card,
|
||||||
|
.feature-card,
|
||||||
|
.service-card,
|
||||||
|
.quote-strip,
|
||||||
|
.contact-card {
|
||||||
|
padding: 28px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: rgba(255, 255, 255, 0.58);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card strong {
|
||||||
|
font-size: clamp(2.3rem, 5vw, 4rem);
|
||||||
|
margin: 14px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-grid,
|
||||||
|
.services,
|
||||||
|
.contact {
|
||||||
|
padding: 28px 0 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 0.92fr 1.08fr;
|
||||||
|
gap: 28px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-stack,
|
||||||
|
.service-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card h3,
|
||||||
|
.service-card h3 {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
font-family: "Manrope", sans-serif;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card span {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
color: var(--gold);
|
||||||
|
font-family: "Manrope", sans-serif;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-strip {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 0 0 96px;
|
||||||
|
padding: 28px 32px;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(17, 32, 43, 0.92), rgba(32, 62, 80, 0.92)),
|
||||||
|
rgba(255, 255, 255, 0.08);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-strip p {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 28ch;
|
||||||
|
font-family: "Manrope", sans-serif;
|
||||||
|
font-size: clamp(1.4rem, 2.4vw, 2rem);
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-strip span {
|
||||||
|
color: rgba(255, 255, 255, 0.68);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 0.95fr 1.05fr;
|
||||||
|
gap: 28px;
|
||||||
|
padding: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form {
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form label {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
color: var(--ink-muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form input,
|
||||||
|
.contact-form textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 18px;
|
||||||
|
border: 1px solid rgba(17, 32, 43, 0.12);
|
||||||
|
border-radius: 18px;
|
||||||
|
background: rgba(255, 255, 255, 0.72);
|
||||||
|
color: var(--ink);
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 180ms ease, box-shadow 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form input:focus,
|
||||||
|
.contact-form textarea:focus {
|
||||||
|
border-color: rgba(191, 138, 56, 0.9);
|
||||||
|
box-shadow: 0 0 0 4px rgba(191, 138, 56, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form textarea {
|
||||||
|
min-height: 138px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-ready .reveal {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(24px);
|
||||||
|
transition:
|
||||||
|
opacity 700ms ease,
|
||||||
|
transform 700ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-ready .reveal.is-visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:disabled {
|
||||||
|
cursor: default;
|
||||||
|
opacity: 0.76;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rise {
|
||||||
|
from {
|
||||||
|
transform: scaleY(0.2);
|
||||||
|
transform-origin: bottom;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: scaleY(1);
|
||||||
|
transform-origin: bottom;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
.hero,
|
||||||
|
.platform,
|
||||||
|
.contact-card {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
max-width: 12ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-grid,
|
||||||
|
.metrics {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.site-shell {
|
||||||
|
width: min(calc(100% - 20px), var(--max-width));
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border-radius: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
order: 3;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 14px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding-top: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: clamp(2.9rem, 16vw, 4.6rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-proof,
|
||||||
|
.dashboard-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-panel-large {
|
||||||
|
grid-column: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-strip {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-ready .reveal {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue