Initial commit: CaseWare developer portfolio site.
Static landing page with experience, services, Cal.com booking, and contact CTAs. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
commit
b5570aaac5
367
index.html
Normal file
367
index.html
Normal file
@ -0,0 +1,367 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Ilia Dobkin — CaseWare & CaseView Development | 15+ Years</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Senior CaseWare/CaseView developer with 15+ years building audit and financial reporting solutions for CaseWare International, MNP, Jazz, and accounting firms. JavaScript-first automation, client templates, release pipelines."
|
||||||
|
/>
|
||||||
|
<meta property="og:title" content="Ilia Dobkin — CaseWare & CaseView Development" />
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="15+ years of CaseWare/CaseView development, client templates, and release automation."
|
||||||
|
/>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230d2840'/%3E%3Cpath d='M9 11h14M9 16h14M9 21h9' stroke='%23c9a861' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E" />
|
||||||
|
<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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a href="#main" class="skip-link">Skip to content</a>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container header-inner">
|
||||||
|
<a href="#top" class="brand" aria-label="Ilia Dobkin — Home">
|
||||||
|
<svg class="brand-mark" width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true">
|
||||||
|
<rect x="1" y="1" width="34" height="34" rx="7" stroke="currentColor" stroke-width="1.5" />
|
||||||
|
<path d="M10 12h16M10 18h16M10 24h10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||||
|
</svg>
|
||||||
|
<span class="brand-text">
|
||||||
|
<span class="brand-name">Ilia Dobkin</span>
|
||||||
|
<span class="brand-tag">CaseWare Development</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<nav aria-label="Primary">
|
||||||
|
<a href="#experience">Experience</a>
|
||||||
|
<a href="#services">What I Do</a>
|
||||||
|
<a href="#impact">Impact</a>
|
||||||
|
<a href="#contact" class="nav-cta">Get in touch</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
<!-- HERO -->
|
||||||
|
<section id="top" class="hero">
|
||||||
|
<div class="container hero-inner">
|
||||||
|
<div class="hero-eyebrow">
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span>Available for new engagements</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="hero-title">
|
||||||
|
15+ years building <em>CaseWare</em> and <em>CaseView</em> for firms that can't afford to slow down.
|
||||||
|
</h1>
|
||||||
|
<p class="hero-lede">
|
||||||
|
I build features, templates, and automation for global audit and financial reporting systems —
|
||||||
|
with a focus on cutting release cycles, eliminating manual steps, and making CaseWare deployments
|
||||||
|
boringly predictable.
|
||||||
|
</p>
|
||||||
|
<div class="hero-cta-row">
|
||||||
|
<a href="#contact" class="btn btn-primary">Discuss your CaseWare project</a>
|
||||||
|
<a href="https://cal.levkin.ca/ilia/consult" class="btn btn-ghost" target="_blank" rel="noopener">Book appointment</a>
|
||||||
|
<a href="#experience" class="btn btn-ghost">See experience →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dl class="hero-stats">
|
||||||
|
<div>
|
||||||
|
<dt>Years on CaseWare/CaseView</dt>
|
||||||
|
<dd>15+</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Release cycle reduction</dt>
|
||||||
|
<dd>8 hrs → < 2 min</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Major clients delivered for</dt>
|
||||||
|
<dd>CaseWare, MNP, JazzIt + more</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- TRUSTED BY -->
|
||||||
|
<section class="trusted" aria-label="Companies I've worked with">
|
||||||
|
<div class="container">
|
||||||
|
<p class="trusted-label">Trusted by teams at</p>
|
||||||
|
<ul class="trusted-list">
|
||||||
|
<li>CaseWare International</li>
|
||||||
|
<li>MNP</li>
|
||||||
|
<li>JazzIt</li>
|
||||||
|
<li>+ private accounting firms</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- VALUE / WHAT I DO -->
|
||||||
|
<section id="services" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="kicker">What I bring to a CaseWare team</p>
|
||||||
|
<h2>From feature work to release automation — the full lifecycle.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="value-grid">
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-num">01</div>
|
||||||
|
<h3>Feature development</h3>
|
||||||
|
<p>
|
||||||
|
CaseWare and CaseView feature work using C#, .NET, and SQL Server. Built and shipped client-facing
|
||||||
|
functionality for global audit and financial reporting systems used by tens of thousands of accountants.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-num">02</div>
|
||||||
|
<h3>Client templates & CaseView</h3>
|
||||||
|
<p>
|
||||||
|
Custom CaseView templates and client deliverables — the kind of intricate, regulation-sensitive work
|
||||||
|
that needs both engineering rigor and an understanding of how auditors actually use the product.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-num">03</div>
|
||||||
|
<h3>JavaScript automation</h3>
|
||||||
|
<p>
|
||||||
|
JavaScript-based test and workflow automation across CI/CD pipelines — Jenkins, Azure DevOps, GitHub Actions.
|
||||||
|
Faster feedback for developers, fewer regressions reaching production.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-num">04</div>
|
||||||
|
<h3>Release pipeline optimization</h3>
|
||||||
|
<p>
|
||||||
|
Build, packaging, and release scripts that turn multi-hour manual releases into a single command.
|
||||||
|
Reproducible, auditable, and survivable when the person who wrote it is on vacation.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-num">05</div>
|
||||||
|
<h3>Mentorship & code review</h3>
|
||||||
|
<p>
|
||||||
|
Mentored junior developers and QA engineers across multiple teams — including formal mentorship at
|
||||||
|
CaseWare International. Better engineers ship better CaseWare.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-num">06</div>
|
||||||
|
<h3>Modernization & cleanup</h3>
|
||||||
|
<p>
|
||||||
|
Migrating older test suites, scripts, and template build processes to modern toolchains.
|
||||||
|
Removing the duct tape so your team can move at the speed of the audit cycle, not the build server.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- IMPACT / SPOTLIGHT -->
|
||||||
|
<section id="impact" class="section section-dark">
|
||||||
|
<div class="container">
|
||||||
|
<div class="impact-grid">
|
||||||
|
<div class="impact-copy">
|
||||||
|
<p class="kicker kicker-light">Signature outcome</p>
|
||||||
|
<h2>Releases that took a workday now finish before your coffee.</h2>
|
||||||
|
<p class="section-lede">
|
||||||
|
At JazzIt, I owned CaseWare/CaseView template delivery and rebuilt the build and packaging
|
||||||
|
process from the ground up. Releases dropped from roughly <strong>8 hours of manual work</strong> to
|
||||||
|
<strong>under 2 minutes</strong> — fully scripted, repeatable, and safe to hand off.
|
||||||
|
</p>
|
||||||
|
<p class="section-lede">
|
||||||
|
That same instinct — removing the slow, manual, error-prone parts of how CaseWare teams ship — is what
|
||||||
|
I bring to every engagement.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<aside class="impact-card">
|
||||||
|
<div class="impact-stat">
|
||||||
|
<span class="impact-stat-value">~99.6%</span>
|
||||||
|
<span class="impact-stat-label">faster releases</span>
|
||||||
|
</div>
|
||||||
|
<ul class="impact-list">
|
||||||
|
<li>Scripted build & packaging</li>
|
||||||
|
<li>Versioned, reproducible artifacts</li>
|
||||||
|
<li>No more “the release person is sick”</li>
|
||||||
|
<li>Predictable deploys across clients</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- EXPERIENCE -->
|
||||||
|
<section id="experience" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="kicker">Experience</p>
|
||||||
|
<h2>Where I've delivered CaseWare work.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ol class="exp-list">
|
||||||
|
<li class="exp-item">
|
||||||
|
<header class="exp-head">
|
||||||
|
<h3>CaseWare International</h3>
|
||||||
|
<span class="exp-meta">Hybrid · Full-time · 11 years</span>
|
||||||
|
</header>
|
||||||
|
<p class="exp-desc">
|
||||||
|
Eleven years inside the company that builds CaseWare — feature development, client templates,
|
||||||
|
and test automation for global audit and financial systems. Mentored junior engineers and helped
|
||||||
|
shape how teams shipped quality CaseWare features at scale.
|
||||||
|
</p>
|
||||||
|
<ul class="exp-stack">
|
||||||
|
<li>C#</li>
|
||||||
|
<li>.NET</li>
|
||||||
|
<li>SQL Server</li>
|
||||||
|
<li>JavaScript automation</li>
|
||||||
|
<li>Agile / Scrum</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="exp-item">
|
||||||
|
<header class="exp-head">
|
||||||
|
<h3>MNP</h3>
|
||||||
|
<span class="exp-meta">Remote · Full-time</span>
|
||||||
|
</header>
|
||||||
|
<p class="exp-desc">
|
||||||
|
.NET development on CaseWare and CaseView for one of Canada's largest professional services firms.
|
||||||
|
Built and maintained JavaScript-driven automation running across Jenkins and Azure DevOps pipelines,
|
||||||
|
with a focus on shortening feedback loops and stabilizing releases.
|
||||||
|
</p>
|
||||||
|
<ul class="exp-stack">
|
||||||
|
<li>C#</li>
|
||||||
|
<li>.NET Core</li>
|
||||||
|
<li>JavaScript</li>
|
||||||
|
<li>Jenkins</li>
|
||||||
|
<li>Azure DevOps</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="exp-item">
|
||||||
|
<header class="exp-head">
|
||||||
|
<h3>JazzIt</h3>
|
||||||
|
<span class="exp-meta">Remote · Contract / consulting</span>
|
||||||
|
</header>
|
||||||
|
<p class="exp-desc">
|
||||||
|
CaseWare and CaseView consulting — template delivery, custom integrations, and process automation.
|
||||||
|
Rebuilt the build and packaging pipeline from the ground up, cutting release effort from roughly
|
||||||
|
<strong>8 hours</strong> down to <strong>under 2 minutes</strong>.
|
||||||
|
</p>
|
||||||
|
<ul class="exp-stack">
|
||||||
|
<li>CaseWare</li>
|
||||||
|
<li>CaseView</li>
|
||||||
|
<li>Build automation</li>
|
||||||
|
<li>JavaScript</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HOW I WORK -->
|
||||||
|
<section class="section section-muted">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="kicker">How I work</p>
|
||||||
|
<h2>Pragmatic, low-drama, easy to plug into your team.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="how-grid">
|
||||||
|
<div class="how-card">
|
||||||
|
<h3>Understand the business first</h3>
|
||||||
|
<p>CaseWare lives in audit and accounting. I learn how your team actually uses it before changing it.</p>
|
||||||
|
</div>
|
||||||
|
<div class="how-card">
|
||||||
|
<h3>Small, reviewable changes</h3>
|
||||||
|
<p>I prefer many tight pull requests over giant ones. Easier to review, easier to roll back.</p>
|
||||||
|
</div>
|
||||||
|
<div class="how-card">
|
||||||
|
<h3>Automate what's painful</h3>
|
||||||
|
<p>If a step is manual and repeated, it's a candidate for automation — and usually for a 10x speed-up.</p>
|
||||||
|
</div>
|
||||||
|
<div class="how-card">
|
||||||
|
<h3>Leave the codebase healthier</h3>
|
||||||
|
<p>Better tests, clearer scripts, and documentation that a future hire (or future me) can actually use.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CONTACT / CTA -->
|
||||||
|
<section id="contact" class="cta-section">
|
||||||
|
<div class="container cta-inner">
|
||||||
|
<p class="kicker kicker-light">Let's talk</p>
|
||||||
|
<h2>Need an experienced CaseWare developer on your team?</h2>
|
||||||
|
<p class="cta-lede">
|
||||||
|
Whether it's a feature backlog, a custom template, a flaky release pipeline, or a full audit of how your
|
||||||
|
team ships CaseWare — I'd be glad to take a look.
|
||||||
|
</p>
|
||||||
|
<div class="cta-row">
|
||||||
|
<a class="btn btn-primary btn-large" href="https://cal.levkin.ca/ilia/consult" target="_blank" rel="noopener">
|
||||||
|
Book appointment
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-ghost btn-large" href="mailto:idobkin@gmail.com?subject=CaseWare%20project%20enquiry">
|
||||||
|
Email idobkin@gmail.com
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-ghost btn-large" href="https://www.linkedin.com/in/idobkin/" target="_blank" rel="noopener">
|
||||||
|
Connect on LinkedIn →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container footer-inner">
|
||||||
|
<p>© <span id="year"></span> Ilia Dobkin · CaseWare & CaseView Development</p>
|
||||||
|
<p class="footer-meta">
|
||||||
|
Greater Toronto Area, Canada · <a href="mailto:idobkin@gmail.com">idobkin@gmail.com</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById("year").textContent = new Date().getFullYear();
|
||||||
|
|
||||||
|
const header = document.querySelector(".site-header");
|
||||||
|
const onScroll = () => header.classList.toggle("is-scrolled", window.scrollY > 8);
|
||||||
|
onScroll();
|
||||||
|
window.addEventListener("scroll", onScroll, { passive: true });
|
||||||
|
|
||||||
|
// Reveal on scroll — only enable when JS + IntersectionObserver are available.
|
||||||
|
// Use a class on <html> so CSS controls initial state safely.
|
||||||
|
if ("IntersectionObserver" in window) {
|
||||||
|
document.documentElement.classList.add("js-reveal");
|
||||||
|
const targets = document.querySelectorAll(
|
||||||
|
".section, .hero-inner, .impact-grid, .exp-item, .value-card, .how-card"
|
||||||
|
);
|
||||||
|
const io = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((e) => {
|
||||||
|
if (e.isIntersecting) {
|
||||||
|
e.target.classList.add("is-in");
|
||||||
|
io.unobserve(e.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ threshold: 0.08, rootMargin: "0px 0px -40px 0px" }
|
||||||
|
);
|
||||||
|
targets.forEach((el) => {
|
||||||
|
el.classList.add("reveal");
|
||||||
|
io.observe(el);
|
||||||
|
});
|
||||||
|
// Safety net: reveal anything still hidden after 1.5s (covers full-page screenshots).
|
||||||
|
setTimeout(() => {
|
||||||
|
targets.forEach((el) => el.classList.add("is-in"));
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
687
styles.css
Normal file
687
styles.css
Normal file
@ -0,0 +1,687 @@
|
|||||||
|
/* =========================================================
|
||||||
|
Ilia Dobkin — CaseWare Development
|
||||||
|
Palette: deep navy + warm gold (audit / accounting tone)
|
||||||
|
Type: Fraunces (display serif) + Inter (body) + JetBrains Mono
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--navy-950: #08182a;
|
||||||
|
--navy-900: #0d2840;
|
||||||
|
--navy-800: #143553;
|
||||||
|
--navy-700: #1d4063;
|
||||||
|
--navy-100: #e9eef4;
|
||||||
|
--paper: #fbf8f3;
|
||||||
|
--paper-2: #f3ede2;
|
||||||
|
--ink: #0e1a2b;
|
||||||
|
--ink-soft: #3b4a5e;
|
||||||
|
--ink-muted: #6b7a8e;
|
||||||
|
--gold: #b8893a;
|
||||||
|
--gold-soft: #d6b46a;
|
||||||
|
--gold-bg: #f7eed8;
|
||||||
|
--line: #e3d9c5;
|
||||||
|
--line-strong: #c9bda0;
|
||||||
|
|
||||||
|
--maxw: 1180px;
|
||||||
|
--radius: 14px;
|
||||||
|
--radius-lg: 22px;
|
||||||
|
--shadow-sm: 0 1px 2px rgba(8, 24, 42, 0.06);
|
||||||
|
--shadow-md: 0 12px 30px -12px rgba(8, 24, 42, 0.18);
|
||||||
|
|
||||||
|
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
|
||||||
|
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||||
|
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--ink);
|
||||||
|
background: var(--paper);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--navy-900);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--maxw);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 clamp(20px, 4vw, 40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-link {
|
||||||
|
position: absolute;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
.skip-link:focus {
|
||||||
|
left: 12px;
|
||||||
|
top: 12px;
|
||||||
|
background: var(--navy-900);
|
||||||
|
color: var(--paper);
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Header ---------- */
|
||||||
|
.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background: rgba(251, 248, 243, 0.85);
|
||||||
|
backdrop-filter: saturate(140%) blur(10px);
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
transition: border-color 0.25s ease, box-shadow 0.25s ease;
|
||||||
|
}
|
||||||
|
.site-header.is-scrolled {
|
||||||
|
border-bottom-color: var(--line);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
.header-inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 72px;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
color: var(--navy-900);
|
||||||
|
}
|
||||||
|
.brand:hover {
|
||||||
|
color: var(--navy-900);
|
||||||
|
}
|
||||||
|
.brand-mark {
|
||||||
|
color: var(--navy-900);
|
||||||
|
flex: 0 0 36px;
|
||||||
|
}
|
||||||
|
.brand-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
.brand-name {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.brand-tag {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--ink-muted);
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.site-header nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
.site-header nav a {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.site-header nav a:hover {
|
||||||
|
color: var(--navy-900);
|
||||||
|
}
|
||||||
|
.nav-cta {
|
||||||
|
padding: 9px 16px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--navy-900);
|
||||||
|
color: var(--paper) !important;
|
||||||
|
}
|
||||||
|
.nav-cta:hover {
|
||||||
|
background: var(--navy-800);
|
||||||
|
color: var(--paper) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.site-header nav {
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
.site-header nav a:not(.nav-cta) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.brand-tag {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Hero ---------- */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
padding: clamp(80px, 14vw, 160px) 0 clamp(60px, 10vw, 120px);
|
||||||
|
background:
|
||||||
|
radial-gradient(1200px 480px at 80% -100px, rgba(184, 137, 58, 0.12), transparent 60%),
|
||||||
|
radial-gradient(900px 500px at -10% 0%, rgba(13, 40, 64, 0.08), transparent 60%),
|
||||||
|
var(--paper);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: auto 0 0 0;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(to right, transparent, var(--line-strong), transparent);
|
||||||
|
}
|
||||||
|
.hero-inner {
|
||||||
|
max-width: 880px;
|
||||||
|
}
|
||||||
|
.hero-eyebrow {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 7px 14px;
|
||||||
|
background: var(--gold-bg);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #6c4f1c;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.hero-eyebrow .dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #2e7d4f;
|
||||||
|
box-shadow: 0 0 0 4px rgba(46, 125, 79, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: clamp(36px, 6.2vw, 68px);
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
color: var(--navy-950);
|
||||||
|
}
|
||||||
|
.hero-title em {
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-lede {
|
||||||
|
font-size: clamp(17px, 1.6vw, 20px);
|
||||||
|
line-height: 1.55;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
max-width: 64ch;
|
||||||
|
margin: 0 0 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 32px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.hero-stats div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.hero-stats dt {
|
||||||
|
order: 2;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ink-muted);
|
||||||
|
margin: 4px 0 0;
|
||||||
|
}
|
||||||
|
.hero-stats dd {
|
||||||
|
order: 1;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: clamp(22px, 2.6vw, 30px);
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--navy-900);
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.hero-stats {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Buttons ---------- */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 13px 22px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1;
|
||||||
|
transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-large {
|
||||||
|
padding: 16px 28px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--navy-900);
|
||||||
|
color: var(--paper) !important;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: var(--navy-800);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
.btn-ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--navy-900) !important;
|
||||||
|
border-color: var(--line-strong);
|
||||||
|
}
|
||||||
|
.btn-ghost:hover {
|
||||||
|
background: var(--paper-2);
|
||||||
|
color: var(--navy-900) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Trusted strip ---------- */
|
||||||
|
.trusted {
|
||||||
|
padding: 40px 0;
|
||||||
|
background: var(--paper-2);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.trusted-label {
|
||||||
|
margin: 0 0 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--ink-muted);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.trusted-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: clamp(20px, 4vw, 56px);
|
||||||
|
}
|
||||||
|
.trusted-list li {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: clamp(16px, 1.6vw, 19px);
|
||||||
|
color: var(--navy-800);
|
||||||
|
letter-spacing: -0.005em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Sections ---------- */
|
||||||
|
.section {
|
||||||
|
padding: clamp(72px, 10vw, 120px) 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.section-muted {
|
||||||
|
background: var(--paper-2);
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.section-dark {
|
||||||
|
background: var(--navy-950);
|
||||||
|
color: #d8dee9;
|
||||||
|
}
|
||||||
|
.section-dark h2,
|
||||||
|
.section-dark h3 {
|
||||||
|
color: var(--paper);
|
||||||
|
}
|
||||||
|
.section-head {
|
||||||
|
max-width: 760px;
|
||||||
|
margin: 0 0 56px;
|
||||||
|
}
|
||||||
|
.kicker {
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--gold);
|
||||||
|
margin: 0 0 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.kicker-light {
|
||||||
|
color: var(--gold-soft);
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: clamp(28px, 3.6vw, 44px);
|
||||||
|
line-height: 1.12;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--navy-950);
|
||||||
|
}
|
||||||
|
.section-lede {
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
margin: 18px 0 0;
|
||||||
|
max-width: 62ch;
|
||||||
|
}
|
||||||
|
.section-dark .section-lede {
|
||||||
|
color: #b8c2d0;
|
||||||
|
}
|
||||||
|
.section-dark .section-lede strong {
|
||||||
|
color: var(--gold-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Value grid ---------- */
|
||||||
|
.value-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 1px;
|
||||||
|
background: var(--line);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.value-card {
|
||||||
|
background: var(--paper);
|
||||||
|
padding: 32px 28px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
.value-card:hover {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.value-num {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--gold);
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
.value-card h3 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 21px;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--navy-900);
|
||||||
|
}
|
||||||
|
.value-card p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Impact / Spotlight ---------- */
|
||||||
|
.impact-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.4fr 1fr;
|
||||||
|
gap: clamp(28px, 5vw, 64px);
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
@media (max-width: 880px) {
|
||||||
|
.impact-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.impact-card {
|
||||||
|
background: linear-gradient(180deg, rgba(214, 180, 106, 0.08), rgba(214, 180, 106, 0));
|
||||||
|
border: 1px solid rgba(214, 180, 106, 0.25);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
.impact-stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-bottom: 1px solid rgba(214, 180, 106, 0.25);
|
||||||
|
padding-bottom: 22px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
.impact-stat-value {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: clamp(36px, 4.8vw, 56px);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gold-soft);
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.impact-stat-label {
|
||||||
|
font-size: 13px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: #b8c2d0;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.impact-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #c8d2df;
|
||||||
|
}
|
||||||
|
.impact-list li {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 22px;
|
||||||
|
}
|
||||||
|
.impact-list li::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0.6em;
|
||||||
|
width: 10px;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--gold-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Experience ---------- */
|
||||||
|
.exp-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
.exp-item {
|
||||||
|
background: var(--paper);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 32px clamp(24px, 3vw, 40px);
|
||||||
|
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
.exp-item:hover {
|
||||||
|
border-color: var(--line-strong);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.exp-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px 18px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.exp-head h3 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--navy-900);
|
||||||
|
}
|
||||||
|
.exp-meta {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--ink-muted);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
.exp-desc {
|
||||||
|
margin: 0 0 18px;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.65;
|
||||||
|
max-width: 75ch;
|
||||||
|
}
|
||||||
|
.exp-stack {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.exp-stack li {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--gold-bg);
|
||||||
|
color: #6c4f1c;
|
||||||
|
border: 1px solid rgba(184, 137, 58, 0.18);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- How I work ---------- */
|
||||||
|
.how-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.how-card {
|
||||||
|
background: var(--paper);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 26px 24px;
|
||||||
|
}
|
||||||
|
.how-card h3 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
color: var(--navy-900);
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
.how-card p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--ink-soft);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- CTA section ---------- */
|
||||||
|
.cta-section {
|
||||||
|
padding: clamp(80px, 10vw, 130px) 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(900px 400px at 50% -10%, rgba(184, 137, 58, 0.18), transparent 60%),
|
||||||
|
var(--navy-950);
|
||||||
|
color: var(--paper);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.cta-inner {
|
||||||
|
max-width: 760px;
|
||||||
|
}
|
||||||
|
.cta-section h2 {
|
||||||
|
color: var(--paper);
|
||||||
|
}
|
||||||
|
.cta-lede {
|
||||||
|
font-size: 17px;
|
||||||
|
color: #b8c2d0;
|
||||||
|
max-width: 60ch;
|
||||||
|
margin: 18px auto 36px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.cta-row {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 14px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.cta-section .btn-ghost {
|
||||||
|
border-color: rgba(255, 255, 255, 0.25);
|
||||||
|
color: var(--paper) !important;
|
||||||
|
}
|
||||||
|
.cta-section .btn-ghost:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Footer ---------- */
|
||||||
|
.site-footer {
|
||||||
|
padding: 36px 0;
|
||||||
|
background: var(--paper-2);
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.footer-inner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--ink-muted);
|
||||||
|
}
|
||||||
|
.footer-inner p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.footer-meta a {
|
||||||
|
color: var(--ink-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Reveal animation ---------- */
|
||||||
|
.reveal {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(14px);
|
||||||
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||||
|
}
|
||||||
|
.reveal.is-in {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.reveal {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user