G360Pmk/dylanmazzei-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Dylan's DM logo, switch accent to brand blue, add dark mode

Browse Source 
Recreate the DM monogram and wordmark as SVG and type so they stay sharp in
both themes, move the accent from violet to the logo's blue, and add a small
theme toggle in the nav that follows the system until the visitor picks one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-01 11:25:52 -04:00
parent f73968c0dc
commit 2d37e3fcce
8 changed files with 216 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout.mjs
+14 -6
View File
@@ -45,6 +45,8 @@ const ICONS = {
pin: '<path d="M12 21s7-6.2 7-11.5a7 7 0 0 0-14 0C5 14.8 12 21 12 21z"/><circle cx="12" cy="9.5" r="2.5"/>',
book: '<path d="M4 4.5A1.5 1.5 0 0 1 5.5 3H19v15H5.5A1.5 1.5 0 0 0 4 19.5z"/><path d="M4 19.5A1.5 1.5 0 0 0 5.5 21H19v-3"/>',
pen: '<path d="M4 20l1-4.5L15.5 5a2.1 2.1 0 0 1 3 3L8 18.5z"/><path d="m13.5 7 3 3"/>',
moon: '<path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z"/>',
sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4"/>',
spark: '<path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/>',
};
@@ -56,7 +58,10 @@ export function icon(name, cls = '') {
return `<svg class="${cls}" viewBox="${vb}" fill="none" stroke="currentColor"${sw} stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICONS[name]}</svg>`;
}
export const mark = (cls = 'brand-mark') => `<svg class="${cls}" viewBox="0 0 34 34" aria-hidden="true"><rect width="34" height="34" rx="10" fill="#594ff4"/><path d="M8 9h7.2c4.4 0 7.3 3.1 7.3 7.6 0 1.5-.3 2.8-.9 4L16.9 25H8l1.8-3.2h5.6c2.6 0 4.1-2 4.1-4.9 0-2.6-1.5-4.6-4.3-4.6h-5.3z" fill="#fff"/><path d="M27 8.5 18.3 25.5h4.2L27 16.8z" fill="#fff" opacity=".55"/></svg>`;
// Dylan Mazzei monogram: italic "D" (inherits text color) and the sky-blue blade.
export const mark = (cls = 'logo-mark') => `<svg class="${cls}" viewBox="0 0 104 60" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M9 4h55c10 0 13 7 9 14L58 46c-3 6-8 8-15 8.5L3 57zM21.5 15.5 18.3 45.8 40 44.5c4-.3 6-1.5 7.5-4.3l12-21.4c1.2-2.2.3-3.3-2-3.3z"/><path fill="#33b9ff" d="M24 59 102 1 91 52 72 54.5 79 33z"/><path fill="#8fdcff" d="M24 59 102 1 79 33z"/></svg>`;
export const logo = () => `${mark()}<span class="brand-word">Dylan <b>Mazzei</b></span>`;
export const eyebrow = (t) => `<span class="eyebrow">${t}</span>`;
@@ -117,9 +122,10 @@ function nav(path) {
return `<a class="skip" href="#main">Skip to content</a>
<header class="nav" id="nav">
<div class="wrap nav-inner">
<a class="brand" href="/" aria-label="Dylan Mazzei, home">${mark()}<span class="brand-word">Dylan Mazzei</span></a>
<a class="brand" href="/" aria-label="Dylan Mazzei, home">${logo()}</a>
<nav aria-label="Primary"><ul class="nav-links">${desktop}</ul></nav>
<div class="nav-cta">
<button class="theme-btn" id="theme-btn" type="button" aria-label="Switch to dark mode">${icon('moon', 'moon')}${icon('sun', 'sun')}</button>
<a class="btn btn-primary btn-sm" href="/contact/">START A CONVERSATION</a>
<button class="menu-btn" id="menu-btn" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="Open menu">${icon('menu')}</button>
</div>
@@ -136,7 +142,7 @@ function footer() {
<div class="wrap">
<div class="foot-top">
<div class="foot-intro">
<a class="brand" href="/" aria-label="Dylan Mazzei, home">${mark()}<span class="brand-word">Dylan Mazzei</span></a>
<a class="brand" href="/" aria-label="Dylan Mazzei, home">${logo()}</a>
<p>DYLAN MAZZEI | FOUNDER &amp; OPERATOR</p>
</div>
<div class="foot-col">
@@ -200,7 +206,9 @@ export function page({ path, title, description, body, schema = [] }) {
<title>${title}</title>
<meta name="description" content="${description}">
<link rel="canonical" href="${canonical}">
<meta name="theme-color" content="#ffffff">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0d" media="(prefers-color-scheme: dark)">
<meta name="color-scheme" content="light dark">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Dylan Mazzei">
<meta property="og:title" content="${title}">
@@ -214,9 +222,9 @@ export function page({ path, title, description, body, schema = [] }) {
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&family=JetBrains+Mono:wght@500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&family=JetBrains+Mono:wght@500&family=Unbounded:wght@700&display=swap">
<link rel="stylesheet" href="/assets/styles.css">
<script>document.documentElement.classList.add('js');setTimeout(function(){if(!window.__site)document.documentElement.classList.remove('js')},2500)</script>
<script>(function(){var r=document.documentElement;try{var t=localStorage.getItem('theme');if(t==='dark'||t==='light')r.setAttribute('data-theme',t)}catch(e){}if(!r.hasAttribute('data-theme')&&window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)r.setAttribute('data-theme','dark')})();document.documentElement.classList.add('js');setTimeout(function(){if(!window.__site)document.documentElement.classList.remove('js')},2500)</script>
${ld}
</head>
<body>
src/pages/about.mjs
+1 -1
View File
@@ -235,7 +235,7 @@ export default {
<div class="prose">
<p>Eight years ago, I couldn’t have mapped the route that brought me here. I’m glad I didn’t.</p>
<p>There are still people I haven’t met, problems I haven’t seen, and ideas that will probably ruin a perfectly good night’s sleep.</p>
<p style="color:var(--porcelain)">If the next eight years surprise me too, I’ll take it.</p>
<p style="color:var(--on-dark)">If the next eight years surprise me too, I’ll take it.</p>
</div>
<div class="btn-row">${btn('START A CONVERSATION', '/contact/')}</div>
</div>
src/pages/business-setup.mjs
+2 -2
View File
@@ -53,7 +53,7 @@ export default {
<div class="panel anim" aria-hidden="true">
<div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><strong>SETTING THE FIRST LAYER</strong></div>
<div style="padding:20px;display:grid;gap:8px">
${layers.map((l, i) => `<div class="row" style="border:1px solid var(--mist);border-radius:12px;padding:14px 16px;margin-left:${i * 14}px;${i === 0 ? 'background:var(--violet);color:var(--porcelain);border-color:var(--violet)' : ''}"><span class="index" style="${i === 0 ? 'color:var(--porcelain)' : ''}">0${i + 1}</span><span class="name" style="font-weight:700;font-size:16px">${l}</span></div>`).join('')}
${layers.map((l, i) => `<div class="row" style="border:1px solid var(--mist);border-radius:12px;padding:14px 16px;margin-left:${i * 14}px;${i === 0 ? 'background:var(--accent);color:var(--on-accent);border-color:var(--accent)' : ''}"><span class="index" style="${i === 0 ? 'color:var(--on-accent)' : ''}">0${i + 1}</span><span class="name" style="font-weight:700;font-size:16px">${l}</span></div>`).join('')}
</div>
</div>
</div>
@@ -88,7 +88,7 @@ export default {
<div class="stack-sm">${eyebrow('HOW DELIVERY WORKS')}<h2 id="order" class="h-display">Make the Decisions in the Right Order.</h2></div>
<div class="prose">
<p>You don’t need eight disconnected recommendations.</p>
<p style="color:var(--porcelain)">You need to understand which decision affects the next one.</p>
<p style="color:var(--on-dark)">You need to understand which decision affects the next one.</p>
<p>That’s why this service follows the same diagnostic-first approach as my broader consulting work.</p>
</div>
</div>
src/pages/consulting.mjs
+2 -2
View File
@@ -113,7 +113,7 @@ export default {
<h2 id="frac" class="h-display">When the Business Needs an Owner, Not Another Recommendation.</h2>
<div class="prose">
<p>Some problems don’t need another project.</p>
<p style="color:var(--porcelain)">They need someone accountable for the function.</p>
<p style="color:var(--on-dark)">They need someone accountable for the function.</p>
<p>I can step into the business as a fractional CMO, COO, CISO, or Chief AI Officer, bringing the same operator mindset that shapes my current ventures into a defined leadership role.</p>
</div>
<p class="statement">Strategy gets more useful when someone owns what happens next.</p>
@@ -212,7 +212,7 @@ export default {
<div class="prose">
<p>You don’t need to know exactly what is wrong before we talk.</p>
<p>Bring me the bottleneck, the stalled growth, the messy operation, or simply the feeling that the business should be working better than it is.</p>
<p style="color:var(--porcelain)">We’ll figure out what deserves your attention before you spend more time or money trying to fix it.</p>
<p style="color:var(--on-dark)">We’ll figure out what deserves your attention before you spend more time or money trying to fix it.</p>
</div>
<div class="btn-row">${btn('BOOK YOUR DIAGNOSTIC', '/contact/')}</div>
</div>
src/pages/marketing.mjs
+2 -2
View File
@@ -53,7 +53,7 @@ export default {
<div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><strong>Visibility Is Bigger Than Google Rankings Now.</strong></div>
<div style="padding:20px;display:grid;gap:10px">
${surfaces.map((s, i) => `<div class="row" style="border:1px solid var(--mist);border-radius:12px;padding:12px 14px"><span class="ico">${icon(['search', 'spark', 'target', 'users', 'pin'][i])}</span><span class="name">${s}</span><span class="status"><span class="dot"></span></span></div>`).join('')}
<div class="row" style="border-radius:12px;padding:12px 14px;background:var(--violet);color:var(--porcelain);border:0"><span class="name">your website</span>${icon('arrow', 'check')}</div>
<div class="row" style="border-radius:12px;padding:12px 14px;background:var(--accent);color:var(--on-accent);border:0"><span class="name">your website</span>${icon('arrow', 'check')}</div>
</div>
</div>
</div>
@@ -90,7 +90,7 @@ export default {
<div class="sec-head reveal">
<div class="stack-sm">${eyebrow('HOW DELIVERY WORKS')}<h2 id="delivery" class="h-display">We Don’t Start With a Channel. We Start With the Business.</h2></div>
<div class="prose">
<p style="color:var(--porcelain)">Marketing problems have a habit of disguising themselves.</p>
<p style="color:var(--on-dark)">Marketing problems have a habit of disguising themselves.</p>
<p>Weak conversion can look like a traffic problem. Poor attribution can make a good channel look bad. A visibility problem can begin somewhere entirely different from SEO.</p>
<p>That’s why every engagement follows the same diagnostic-first approach behind my consulting work.</p>
</div>
static/assets/site.js
+25
View File
@@ -3,6 +3,31 @@
var root = document.documentElement;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Theme toggle: remembers the visitor's choice; otherwise follows the system.
var themeBtn = document.getElementById('theme-btn');
var mq = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
var current = function () { return root.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'; };
var paint = function () {
if (!themeBtn) return;
var dark = current() === 'dark';
themeBtn.setAttribute('aria-label', dark ? 'Switch to light mode' : 'Switch to dark mode');
themeBtn.setAttribute('aria-pressed', String(dark));
};
var apply = function (t, save) {
root.setAttribute('data-theme', t);
if (save) { try { localStorage.setItem('theme', t); } catch (e) {} }
paint();
};
paint();
if (themeBtn) themeBtn.addEventListener('click', function () { apply(current() === 'dark' ? 'light' : 'dark', true); });
if (mq && mq.addEventListener) {
mq.addEventListener('change', function (e) {
var saved = null;
try { saved = localStorage.getItem('theme'); } catch (err) {}
if (!saved) apply(e.matches ? 'dark' : 'light', false);
});
}
// Nav border on scroll
var nav = document.getElementById('nav');
var onScroll = function () { nav && nav.classList.toggle('is-scrolled', window.scrollY > 8); };
static/assets/styles.css
+169 -97
View File
@@ -1,12 +1,15 @@
/* Dylan Mazzei — "Ivory Terminal"
White canvas, charcoal type, one violet for every deliberate action.
White canvas, charcoal type, one brand blue for every deliberate action.
Layered product-style mockups carry the visuals; dark Inkstone bands mark the
moments where Dylan talks about how he operates. */
:root {
--violet: #594ff4;
--violet-press: #4a40e6;
--violet-soft: #eeedfe;
--violet-glow: rgba(89, 79, 244, 0.35);
--accent: #0870c4;
--accent-press: #065ea6;
--accent-soft: #e7f3fc;
--accent-glow: rgba(8, 112, 196, 0.35);
--accent-bright: #33b9ff;
--on-accent: #ffffff;
--logo-blue: #1a9cf0;
--ink: #1f1f1f;
--graphite: #333333;
--slate: #5d5d5d;
@@ -16,6 +19,12 @@
--cloud: #f6f6f6;
--porcelain: #ffffff;
--obsidian: #000000;
--surface-dark: #1f1f1f;
--surface-dark-2: #151515;
--on-dark: #ffffff;
--on-dark-muted: #b0b0b0;
--ink-fixed: #1f1f1f;
--nav-bg: rgba(255, 255, 255, 0.86);
--signal-green: #1aab8b;
--dark-line: #2e2e2e;
--dark-muted: #9a9a9a;
@@ -23,6 +32,7 @@
--code-str: #6fd6bd;
--code-num: #ffb38a;
--code-dim: #8a8a8a;
--shadow-color: rgba(0, 0, 0, 0.12);
--font-sans: "Inter", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
@@ -41,7 +51,7 @@
--radius-card: 36px;
--radius-panel: 16px;
--radius-img: 10px;
--shadow-float: rgba(0, 0, 0, 0.12) 0px 0px 60px -13px;
--shadow-float: var(--shadow-color) 0px 0px 60px -13px;
--page-max: 1200px;
--gutter: 24px;
@@ -52,6 +62,54 @@
color-scheme: light;
}
/* Dark theme: follows the system unless the visitor picks one with the toggle. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent: #33b9ff;
--accent-press: #66cbff;
--accent-soft: rgba(51, 185, 255, 0.14);
--accent-glow: rgba(51, 185, 255, 0.35);
--on-accent: #04121c;
--logo-blue: #33b9ff;
--ink: #f2f2f3;
--graphite: #d6d6d9;
--slate: #a4a4aa;
--smoke: #85858c;
--ash: #9a9aa1;
--mist: #26262b;
--cloud: #141417;
--porcelain: #0b0b0d;
--surface-dark: #18181c;
--surface-dark-2: #101013;
--dark-line: #2c2c32;
--nav-bg: rgba(11, 11, 13, 0.82);
--shadow-color: rgba(0, 0, 0, 0.6);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--accent: #33b9ff;
--accent-press: #66cbff;
--accent-soft: rgba(51, 185, 255, 0.14);
--accent-glow: rgba(51, 185, 255, 0.35);
--on-accent: #04121c;
--logo-blue: #33b9ff;
--ink: #f2f2f3;
--graphite: #d6d6d9;
--slate: #a4a4aa;
--smoke: #85858c;
--ash: #9a9aa1;
--mist: #26262b;
--cloud: #141417;
--porcelain: #0b0b0d;
--surface-dark: #18181c;
--surface-dark-2: #101013;
--dark-line: #2c2c32;
--nav-bg: rgba(11, 11, 13, 0.82);
--shadow-color: rgba(0, 0, 0, 0.6);
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; }
body {
@@ -73,9 +131,9 @@ h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; text-wrap: balance; color: var(--ink); }
p { text-wrap: pretty; }
::selection { background: var(--violet); color: var(--porcelain); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--violet); color: var(--porcelain); padding: 10px 18px; border-radius: var(--radius-pill); }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: var(--radius-pill); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@@ -91,7 +149,7 @@ p { text-wrap: pretty; }
font-size: 13px; font-weight: 500; letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase; color: var(--smoke); line-height: 1.4;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--violet); flex: none; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); flex: none; }
.h-display-lg { font-size: var(--text-display-lg); line-height: 1.03; letter-spacing: -0.04em; }
.h-display { font-size: var(--text-display); line-height: 1.07; letter-spacing: -0.032em; }
.h-lg { font-size: var(--text-heading-lg); line-height: 1.15; letter-spacing: -0.022em; }
@@ -121,20 +179,20 @@ p { text-wrap: pretty; }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--violet); color: var(--porcelain); }
.btn-primary:hover { background: var(--violet-press); box-shadow: 0 10px 30px -10px var(--violet-glow); }
.btn-ghost { background: transparent; color: var(--violet); border-color: var(--violet); }
.btn-ghost:hover { background: var(--violet-soft); }
.btn-light { background: var(--porcelain); color: var(--ink); }
.btn-light:hover { background: var(--mist); }
.btn-ghost-light { background: transparent; color: var(--porcelain); border-color: rgba(255, 255, 255, .35); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .08); border-color: var(--porcelain); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-press); box-shadow: 0 10px 30px -10px var(--accent-glow); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-light { background: var(--on-dark); color: var(--ink-fixed); }
.btn-light:hover { background: #e7e7e7; }
.btn-ghost-light { background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, .35); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .08); border-color: var(--on-dark); }
.btn-sm { min-height: 42px; padding: 11px 20px; font-size: 12px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--violet); font: 700 13px/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font: 700 13px/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.text-link svg { width: 16px; height: 16px; transition: transform .18s ease; }
.text-link:hover svg { transform: translateX(3px); }
@@ -147,24 +205,35 @@ p { text-wrap: pretty; }
}
.tag-white { background: var(--porcelain); }
.tag-line { background: transparent; border: 1px solid var(--mist); }
.tag-violet { background: var(--violet); color: var(--porcelain); }
.tag-accent { background: var(--accent); color: var(--on-accent); }
.tag-upper { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 12px; }
.tag-dark { background: #2a2a2a; color: var(--porcelain); }
.tag-dark { background: #2a2a2a; color: var(--on-dark); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-green); flex: none; box-shadow: 0 0 0 3px rgba(26, 171, 139, .15); }
/* ---------- Navigation ---------- */
.nav {
position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
background: rgba(255, 255, 255, 0.86);
background: var(--nav-bg);
backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.nav.is-scrolled { border-bottom-color: var(--mist); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-word { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.brand { color: var(--ink); }
.logo-mark { width: 46px; height: auto; aspect-ratio: 104 / 60; flex: none; }
.brand-word { display: inline-block; font-family: "Unbounded", var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; transform: skewX(-12deg); white-space: nowrap; }
.brand-word b { color: var(--logo-blue); font-weight: 700; }
.theme-btn {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mist); background: transparent; color: var(--slate);
display: inline-grid; place-items: center; cursor: pointer; flex: none; transition: color .15s ease, border-color .15s ease;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ash); }
.theme-btn svg { width: 17px; height: 17px; grid-area: 1 / 1; transition: opacity .2s ease, transform .3s ease; }
.theme-btn .sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-btn .moon { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .theme-btn .sun { opacity: 1; transform: none; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links button {
@@ -173,7 +242,7 @@ p { text-wrap: pretty; }
transition: background-color .15s ease, color .15s ease;
}
.nav-links a:hover, .nav-links button:hover, .nav-links li:focus-within > button { background: var(--cloud); color: var(--ink); }
.nav-links a[aria-current="page"], .nav-links .is-active > button { color: var(--violet); }
.nav-links a[aria-current="page"], .nav-links .is-active > button { color: var(--accent); }
.nav-links .chev { width: 12px; height: 12px; transition: transform .2s ease; }
.dropdown {
position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; min-width: 300px;
@@ -186,7 +255,7 @@ p { text-wrap: pretty; }
.has-drop:hover .chev, .has-drop:focus-within .chev { transform: rotate(180deg); }
.dropdown a { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; }
.dropdown a:hover { background: var(--cloud); }
.dropdown .di { width: 36px; height: 36px; border-radius: 10px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; }
.dropdown .di { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.dropdown .di svg { width: 18px; height: 18px; }
.dropdown strong { display: block; font-size: 14px; color: var(--ink); }
.dropdown small { display: block; font-size: 12.5px; color: var(--smoke); line-height: 1.35; }
@@ -215,7 +284,7 @@ p { text-wrap: pretty; }
.page-hero-grid > * { min-width: 0; }
.page-hero .stack { gap: 28px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--smoke); }
.crumbs a:hover { color: var(--violet); }
.crumbs a:hover { color: var(--accent); }
.crumbs svg { width: 12px; height: 12px; }
/* ---------- Floating panels / mockups ---------- */
@@ -231,19 +300,19 @@ p { text-wrap: pretty; }
.lights { display: flex; gap: 6px; }
.lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--mist); }
.panel-url { margin-left: auto; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--cloud); font-size: 12px; color: var(--smoke); }
.panel-dark { background: var(--ink); border-color: var(--ink); color: var(--porcelain); }
.panel-dark { background: var(--surface-dark); border-color: var(--surface-dark); color: var(--on-dark); }
.panel-dark .panel-bar { border-bottom-color: var(--dark-line); color: var(--ash); }
.panel-dark .lights i { background: #3a3a3a; }
.file { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--porcelain); }
.file { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--on-dark); }
.file svg { width: 14px; height: 14px; color: var(--code-key); }
.code-pre {
margin: 0; padding: 18px 20px 22px; font: 500 12.5px/1.75 var(--font-mono); color: var(--porcelain);
margin: 0; padding: 18px 20px 22px; font: 500 12.5px/1.75 var(--font-mono); color: var(--on-dark);
counter-reset: ln; white-space: pre; overflow-x: auto;
}
.code-pre .ln { display: block; }
.code-pre .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 24px; color: #4d4d4d; }
.k { color: var(--code-key); } .s { color: var(--code-str); } .n { color: var(--code-num); } .p { color: var(--code-dim); }
.cursor { display: inline-block; width: 7px; height: 15px; background: var(--violet); vertical-align: -3px; margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
.cursor { display: inline-block; width: 7px; height: 15px; background: var(--accent); vertical-align: -3px; margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* ---------- Home hero ---------- */
@@ -275,11 +344,11 @@ p { text-wrap: pretty; }
.list-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 11.5px; color: var(--smoke); background: var(--cloud); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13.5px; border-top: 1px solid var(--mist); }
.list-head + .row { border-top: 0; }
.row .ico { width: 26px; height: 26px; border-radius: 8px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; flex: none; }
.row .ico { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.row .ico svg { width: 15px; height: 15px; }
.row .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--slate); }
.check { color: var(--violet); width: 16px; height: 16px; flex: none; }
.check { color: var(--accent); width: 16px; height: 16px; flex: none; }
.profile { left: 0; top: 170px; width: 252px; z-index: 3; padding: 14px; border-radius: 24px; }
.profile img { border-radius: var(--radius-img); aspect-ratio: 1; object-fit: cover; object-position: center 20%; width: 100%; }
.profile-meta { padding: 14px 4px 4px; display: grid; gap: 10px; }
@@ -299,9 +368,9 @@ p { text-wrap: pretty; }
/* ---------- Feature grid ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.feature { display: flex; flex-direction: column; gap: 16px; padding-block: 32px 40px; border-top: 1px solid var(--mist); position: relative; }
.feature::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--violet); transition: width .5s ease; }
.feature::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width .5s ease; }
.feature:hover::before { width: 100%; }
.ic { width: 48px; height: 48px; border-radius: 14px; background: var(--cloud); color: var(--violet); display: grid; place-items: center; flex: none; }
.ic { width: 48px; height: 48px; border-radius: 14px; background: var(--cloud); color: var(--accent); display: grid; place-items: center; flex: none; }
.ic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 14px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.feature p { font-size: var(--text-heading-sm); line-height: 1.4; letter-spacing: -0.01em; color: var(--graphite); }
@@ -320,8 +389,8 @@ p { text-wrap: pretty; }
.card .card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card .ic { background: var(--porcelain); border-radius: 50%; }
.card-white { background: var(--porcelain); border: 1px solid var(--mist); }
.card-dark { background: var(--ink); color: var(--porcelain); }
.card-dark h2, .card-dark h3, .card-dark h4 { color: var(--porcelain); }
.card-dark { background: var(--surface-dark); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--dark-line); }
.card-dark h2, .card-dark h3, .card-dark h4 { color: var(--on-dark); }
.card-dark p, .card-dark .body { color: var(--ash); }
.card-dark .eyebrow { color: var(--ash); }
.card-lg { padding: 48px; gap: 24px; }
@@ -339,7 +408,7 @@ p { text-wrap: pretty; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--mist); }
.stat span { font-size: 13px; color: var(--smoke); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.stat b { font-size: clamp(56px, 6.5vw, 88px); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat b sup { font-size: .5em; vertical-align: .7em; color: var(--violet); margin-left: 2px; }
.stat b sup { font-size: .5em; vertical-align: .7em; color: var(--accent); margin-left: 2px; }
.stat-note { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.stat-note p { color: var(--slate); }
@@ -347,7 +416,7 @@ p { text-wrap: pretty; }
.showcase { background: var(--cloud); border-radius: var(--radius-card); padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.showcase > * { min-width: 0; }
.showcase .stack { max-width: 540px; }
.quote-line { font-size: var(--text-heading-sm); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); padding-left: 20px; border-left: 2px solid var(--violet); }
.quote-line { font-size: var(--text-heading-sm); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); padding-left: 20px; border-left: 2px solid var(--accent); }
.portrait { position: relative; padding-bottom: 48px; }
.portrait img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: center 22%; border-radius: 24px; }
.flow {
@@ -358,7 +427,7 @@ p { text-wrap: pretty; }
.flow small { font-size: 12px; color: var(--smoke); }
.flow ol { display: grid; gap: 10px; counter-reset: f; }
.flow li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; counter-increment: f; }
.flow li::before { content: counter(f); width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; background: var(--violet-soft); color: var(--violet); }
.flow li::before { content: counter(f); width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; background: var(--accent-soft); color: var(--accent); }
/* Steps panel (process) */
.steps-panel { border-radius: 24px; }
@@ -366,14 +435,14 @@ p { text-wrap: pretty; }
.sp-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 20px 24px; }
.sp-step + .sp-step { border-top: 1px solid var(--mist); }
.sp-step .num { width: 44px; height: 44px; border-radius: 12px; background: var(--cloud); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--slate); }
.sp-step:first-child .num { background: var(--violet); color: var(--porcelain); }
.sp-step:first-child .num { background: var(--accent); color: var(--on-accent); }
.sp-step h4 { font-size: 16px; margin-top: 11px; }
/* Book */
.book-stage { display: grid; place-items: center; padding-block: 16px; perspective: 1200px; }
.book {
position: relative; width: min(300px, 80%); aspect-ratio: 3 / 4.1;
background: var(--ink); color: var(--porcelain); border-radius: 6px 16px 16px 6px;
background: var(--surface-dark); color: var(--on-dark); outline: 1px solid var(--dark-line); border-radius: 6px 16px 16px 6px;
box-shadow: var(--shadow-float), rgba(0, 0, 0, 0.22) 24px 30px 50px -24px;
padding: 32px 28px 28px 38px; display: flex; flex-direction: column;
transform: rotateY(-14deg) rotateX(4deg); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
@@ -381,22 +450,22 @@ p { text-wrap: pretty; }
}
.book-stage:hover .book { transform: rotateY(-4deg) rotateX(2deg); }
.book::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .12); }
.book::after { content: ""; position: absolute; right: -10px; top: 10px; bottom: 10px; width: 10px; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(180deg, var(--porcelain) 0 2px, var(--mist) 2px 3px); }
.book .brand-mark { width: 30px; height: 30px; }
.book h3 { color: var(--porcelain); font-size: clamp(26px, 3vw, 34px); line-height: 1.05; letter-spacing: -0.03em; margin-top: auto; }
.book::after { content: ""; position: absolute; right: -10px; top: 10px; bottom: 10px; width: 10px; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(180deg, #ffffff 0 2px, #e7e7e7 2px 3px); }
.book .logo-mark { width: 56px; color: var(--on-dark); }
.book h3 { color: var(--on-dark); font-size: clamp(26px, 3vw, 34px); line-height: 1.05; letter-spacing: -0.03em; margin-top: auto; }
.book .by { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 12px; color: var(--ash); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.beats { display: grid; }
.beats li { display: flex; gap: 14px; align-items: baseline; padding-block: 12px; border-top: 1px solid var(--mist); color: var(--ink); }
.beats li:last-child { border-bottom: 1px solid var(--mist); }
.beats li svg { width: 16px; height: 16px; color: var(--violet); flex: none; transform: translateY(2px); }
.beats li svg { width: 16px; height: 16px; color: var(--accent); flex: none; transform: translateY(2px); }
/* Duo (press + poetry) */
.duo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.poem { font-size: var(--text-heading); line-height: 1.35; letter-spacing: -0.015em; display: grid; gap: 4px; color: var(--porcelain); }
.poem { font-size: var(--text-heading); line-height: 1.35; letter-spacing: -0.015em; display: grid; gap: 4px; color: var(--on-dark); }
.poem span:last-child { color: var(--ash); }
/* ---------- Dark band ---------- */
.band { background: var(--ink); color: var(--porcelain); position: relative; overflow: hidden; }
.band { background: var(--surface-dark); color: var(--on-dark); position: relative; overflow: hidden; border-block: 1px solid var(--dark-line); }
.band::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
@@ -405,11 +474,11 @@ p { text-wrap: pretty; }
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 85% 10%, #000, transparent 70%);
}
.band > * { position: relative; }
.band h2, .band h3, .band h4 { color: var(--porcelain); }
.band h2, .band h3, .band h4 { color: var(--on-dark); }
.band .eyebrow { color: var(--ash); }
.band .body, .band .prose p, .band .lead { color: var(--ash); }
.band .statement, .band .prose p.statement { color: var(--porcelain); }
.inline-link { color: var(--violet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.band .statement, .band .prose p.statement { color: var(--on-dark); }
.inline-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.inline-link:hover { text-decoration-thickness: 2px; }
.band + .section:not(.band) { padding-top: var(--section-y); }
@@ -417,13 +486,13 @@ p { text-wrap: pretty; }
.rules { border-top: 1px solid var(--dark-line); }
.rule { display: grid; grid-template-columns: 120px 1fr 1.2fr; gap: 32px; padding-block: 36px; border-bottom: 1px solid var(--dark-line); align-items: start; }
.rule > * { min-width: 0; }
.rule .index { color: var(--violet); font-size: 13px; padding-top: 8px; filter: brightness(1.35); }
.rule .index { color: var(--accent-bright); font-size: 13px; padding-top: 8px; }
.rule h3 { font-size: var(--text-heading-lg); line-height: 1.1; letter-spacing: -0.025em; }
.rule .prose p { color: var(--ash); }
.rule .prose p.ink { color: var(--porcelain); }
.rule .prose p.ink { color: var(--on-dark); }
.qlist { display: grid; gap: 6px; }
.qlist p { font-family: var(--font-mono); font-size: 14.5px; color: var(--porcelain) !important; }
.qlist p::before { content: "> "; color: var(--violet); filter: brightness(1.35); }
.qlist p { font-family: var(--font-mono); font-size: 14.5px; color: var(--on-dark) !important; }
.qlist p::before { content: "> "; color: var(--accent-bright); }
/* Line list (short beats) */
.lines { display: grid; gap: 4px; }
@@ -439,7 +508,7 @@ p { text-wrap: pretty; }
.signal:nth-child(2) { font-size: 16px; opacity: .85; }
.signal:nth-child(3) { font-size: 17px; }
.signal .dot { background: var(--ash); box-shadow: none; }
.signal:nth-child(3) .dot { background: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.signal:nth-child(3) .dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.shouts { display: grid; gap: 0; }
.shout { padding-block: 22px; border-top: 1px solid var(--mist); display: grid; gap: 6px; }
.shout:last-child { border-bottom: 1px solid var(--mist); }
@@ -456,7 +525,7 @@ p { text-wrap: pretty; }
width: 52px; height: 52px; border-radius: 16px; background: var(--porcelain); border: 1px solid var(--mist);
display: grid; place-items: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.process-step:first-child .num { background: var(--violet); border-color: var(--violet); color: var(--porcelain); }
.process-step:first-child .num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.process-step:not(:last-child)::after {
content: ""; position: absolute; top: 58px; right: -16px; width: 16px; height: 1px; background: var(--ash);
}
@@ -466,20 +535,20 @@ p { text-wrap: pretty; }
/* ---------- Pricing / engagement ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { border-radius: var(--radius-card); padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; background: var(--cloud); min-width: 0; }
.plan-featured { background: var(--ink); color: var(--porcelain); box-shadow: 0 30px 60px -30px rgba(31, 31, 31, .5); }
.plan-featured h3, .plan-featured h4 { color: var(--porcelain); }
.plan-featured { background: var(--surface-dark); color: var(--on-dark); box-shadow: 0 30px 60px -30px rgba(31, 31, 31, .5); outline: 1px solid var(--dark-line); }
.plan-featured h3, .plan-featured h4 { color: var(--on-dark); }
.plan.plan-featured p { color: var(--ash); }
.plan .plan-name { font-size: 13px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--smoke); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-featured .plan-name { color: var(--ash); }
.plan h3 { font-size: var(--text-heading); line-height: 1.15; letter-spacing: -0.02em; }
.plan p { color: var(--slate); }
.plan .fee { padding-block: 14px; border-block: 1px solid var(--mist); font-weight: 700; color: var(--ink); font-size: 15px; }
.plan-featured .fee { border-color: var(--dark-line); color: var(--porcelain); }
.plan-featured .fee { border-color: var(--dark-line); color: var(--on-dark); }
.plan ul { display: grid; gap: 12px; }
.plan li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--graphite); }
.plan-featured li { color: var(--porcelain); }
.plan li svg { width: 16px; height: 16px; color: var(--violet); flex: none; margin-top: 3px; }
.plan-featured li svg { color: #8d86ff; }
.plan-featured li { color: var(--on-dark); }
.plan li svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 3px; }
.plan-featured li svg { color: var(--accent-bright); }
.plan .btn { margin-top: auto; }
/* ---------- Role chips (fractional) ---------- */
@@ -488,7 +557,7 @@ p { text-wrap: pretty; }
border: 1px solid var(--dark-line); border-radius: 24px; padding: 24px; display: grid; gap: 28px;
background: rgba(255, 255, 255, .02); transition: border-color .2s ease, background-color .2s ease;
}
.role:hover { border-color: var(--violet); background: rgba(89, 79, 244, .08); }
.role:hover { border-color: var(--accent); background: rgba(89, 79, 244, .08); }
.role .index { color: var(--dark-muted); }
.role b { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1; }
@@ -503,10 +572,10 @@ p { text-wrap: pretty; }
}
.tab-btn .ic { width: 40px; height: 40px; border-radius: 12px; }
.tab-btn .ic svg { width: 20px; height: 20px; }
.tab-btn .arr { width: 16px; height: 16px; opacity: 0; transition: opacity .15s ease, transform .15s ease; transform: translateX(-4px); color: var(--violet); }
.tab-btn .arr { width: 16px; height: 16px; opacity: 0; transition: opacity .15s ease, transform .15s ease; transform: translateX(-4px); color: var(--accent); }
.tab-btn:hover { background: var(--cloud); color: var(--ink); }
.tab-btn[aria-selected="true"] { background: var(--cloud); color: var(--ink); border-color: var(--mist); }
.tab-btn[aria-selected="true"] .ic { background: var(--violet); color: var(--porcelain); }
.tab-btn[aria-selected="true"] .ic { background: var(--accent); color: var(--on-accent); }
.tab-btn[aria-selected="true"] .arr { opacity: 1; transform: none; }
.tab-panels { display: grid; gap: 16px; }
.tab-panel { background: var(--cloud); border-radius: var(--radius-card); padding: 48px; display: flex; flex-direction: column; gap: 22px; min-height: 420px; }
@@ -533,7 +602,7 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 32px; height: 32px; border-radius: 50%; background: var(--porcelain); display: grid; place-items: center; flex: none; transition: transform .25s ease, background-color .2s ease, color .2s ease; color: var(--ink); }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--violet); color: var(--porcelain); }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); }
.faq summary .pm svg { width: 14px; height: 14px; }
.faq .answer { padding: 0 26px 24px; display: grid; gap: 12px; color: var(--slate); max-width: 72ch; }
.faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
@@ -545,11 +614,11 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
.venture { background: var(--cloud); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; overflow: hidden; transition: background-color .2s ease, transform .25s ease; }
.venture:hover { background: var(--porcelain); box-shadow: var(--shadow-float); outline: 1px solid var(--mist); transform: translateY(-3px); }
.venture-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mono { width: 52px; height: 52px; border-radius: 16px; background: var(--ink); color: var(--porcelain); display: grid; place-items: center; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; flex: none; }
.venture:nth-child(3n+2) .mono { background: var(--violet); }
.mono { width: 52px; height: 52px; border-radius: 16px; background: var(--surface-dark); color: var(--on-dark); display: grid; place-items: center; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; flex: none; }
.venture:nth-child(3n+2) .mono { background: var(--accent); }
.venture:nth-child(3n+3) .mono { background: var(--porcelain); color: var(--ink); border: 1px solid var(--mist); }
.venture h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }
.venture .vrole { font-size: 13px; color: var(--violet); letter-spacing: 0.02em; line-height: 1.4; }
.venture .vrole { font-size: 13px; color: var(--accent); letter-spacing: 0.02em; line-height: 1.4; }
.venture p { color: var(--slate); font-size: 15px; }
.venture .focus { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--mist); display: grid; gap: 10px; }
.venture .focus small { font-size: 11.5px; color: var(--smoke); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
@@ -564,8 +633,8 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
.marquee-track.rev { animation-direction: reverse; animation-duration: 58s; }
@keyframes marquee { to { transform: translateX(-50%); } }
.cap { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; border-radius: var(--radius-pill); background: var(--porcelain); border: 1px solid var(--mist); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.cap i { width: 8px; height: 8px; border-radius: 2px; background: var(--violet); }
.band .cap { background: rgba(255, 255, 255, .04); border-color: var(--dark-line); color: var(--porcelain); }
.cap i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.band .cap { background: rgba(255, 255, 255, .04); border-color: var(--dark-line); color: var(--on-dark); }
/* Industries grid */
.industries { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--mist); border-left: 1px solid var(--mist); }
@@ -573,8 +642,8 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
.industry:hover { background: var(--cloud); }
.industry .index { color: var(--ash); }
.industry b { font-size: 19px; letter-spacing: -0.015em; line-height: 1.2; }
.industry-note { background: var(--violet); color: var(--porcelain); grid-column: span 3; flex-direction: row; align-items: flex-end; }
.industry-note:hover { background: var(--violet-press); }
.industry-note { background: var(--accent); color: var(--on-accent); grid-column: span 3; flex-direction: row; align-items: flex-end; }
.industry-note:hover { background: var(--accent-press); }
.filler { background: var(--cloud); }
.filler:hover { background: var(--cloud); }
.industry-note p { font-size: 15px; line-height: 1.45; }
@@ -586,7 +655,7 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
.cover h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.25; }
.cover ul { display: grid; gap: 0; }
.cover li { display: flex; gap: 12px; align-items: flex-start; padding-block: 11px; border-top: 1px solid var(--cloud); color: var(--graphite); font-size: 15px; }
.cover li svg { width: 16px; height: 16px; color: var(--violet); flex: none; margin-top: 3px; }
.cover li svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 3px; }
/* ---------- Closing CTA ---------- */
.closing { background: var(--cloud); border-radius: var(--radius-card); padding: 88px 48px; text-align: center; position: relative; overflow: hidden; }
@@ -600,12 +669,12 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
.closing > * { position: relative; }
.closing-inner { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.closing .prose p { margin-inline: auto; }
.closing-dark { background: var(--ink); color: var(--porcelain); }
.closing-dark { background: var(--surface-dark); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--dark-line); }
.closing-dark::before { background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px); background-size: 22px 22px; }
.closing-dark h2 { color: var(--porcelain); }
.closing-dark h2 { color: var(--on-dark); }
.closing-dark .prose p { color: var(--ash); }
.closing-dark .eyebrow { color: var(--ash); }
.closing-dark .statement { color: var(--porcelain); }
.closing-dark .statement { color: var(--on-dark); }
/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: start; }
@@ -614,7 +683,7 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
.direct-row { display: grid; gap: 8px; padding-block: 22px; border-bottom: 1px solid var(--mist); }
.direct-row small { font-size: 12px; color: var(--smoke); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.direct-row .val { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.direct-row a.val:hover { color: var(--violet); }
.direct-row a.val:hover { color: var(--accent); }
.copy-btn { border: 1px solid var(--mist); background: var(--porcelain); border-radius: var(--radius-pill); padding: 6px 12px; font: 500 12px var(--font-sans); color: var(--graphite); cursor: pointer; }
.copy-btn:hover { border-color: var(--ash); }
.form-card { padding: 36px; border-radius: 28px; display: grid; gap: 24px; }
@@ -629,54 +698,55 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; background: var(--porcelain); border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; background: var(--porcelain); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.form-note { font-size: 13px; color: var(--smoke); }
.form-status { font-size: 14px; color: var(--signal-green); min-height: 1.4em; }
.cal-card { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 28px 32px; border-radius: 28px; background: var(--ink); color: var(--porcelain); transition: transform .2s ease; }
.cal-card { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 28px 32px; border-radius: 28px; background: var(--surface-dark); color: var(--on-dark); transition: transform .2s ease; }
.cal-card:hover { transform: translateY(-2px); }
.cal-card h3 { color: var(--porcelain); font-size: 22px; letter-spacing: -0.02em; }
.cal-card h3 { color: var(--on-dark); font-size: 22px; letter-spacing: -0.02em; }
.cal-card p { color: var(--ash); font-size: 15px; margin-top: 6px; }
.cal-card .go { width: 52px; height: 52px; border-radius: 50%; background: var(--violet); display: grid; place-items: center; transition: transform .2s ease; }
.cal-card .go { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; transition: transform .2s ease; }
.cal-card:hover .go { transform: rotate(-45deg); }
.cal-card .go svg { width: 18px; height: 18px; }
/* ---------- Press ---------- */
.feature-press { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-card); overflow: hidden; background: var(--ink); color: var(--porcelain); }
.feature-press { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-dark); color: var(--on-dark); }
.feature-press > * { min-width: 0; }
.fp-visual { position: relative; min-height: 380px; background: #151515; display: grid; place-items: center; padding: 40px; overflow: hidden; }
.fp-visual { position: relative; min-height: 380px; background: var(--surface-dark-2); display: grid; place-items: center; padding: 40px; overflow: hidden; }
.fp-visual::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 18px 18px; }
.magazine { position: relative; width: min(260px, 70%); aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); transform: rotate(-4deg); transition: transform .5s ease; }
.feature-press:hover .magazine { transform: rotate(-1deg) scale(1.02); }
.magazine img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(.2) contrast(1.05); }
.magazine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 30%, transparent 55%, rgba(0, 0, 0, .75) 100%); }
.magazine .mast { position: absolute; top: 14px; left: 16px; right: 16px; z-index: 1; font-weight: 700; font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--porcelain); }
.magazine .cover-line { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 1; font-size: 13px; line-height: 1.3; color: var(--porcelain); font-weight: 700; }
.magazine .mast { position: absolute; top: 14px; left: 16px; right: 16px; z-index: 1; font-weight: 700; font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark); }
.magazine .cover-line { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 1; font-size: 13px; line-height: 1.3; color: var(--on-dark); font-weight: 700; }
.fp-copy { padding: 56px; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.fp-copy h3 { color: var(--porcelain); font-size: var(--text-heading-lg); letter-spacing: -0.025em; line-height: 1.12; }
.fp-copy h3 { color: var(--on-dark); font-size: var(--text-heading-lg); letter-spacing: -0.025em; line-height: 1.12; }
.fp-copy .meta { font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ash); }
.topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.topic { border: 1px solid var(--mist); border-radius: 28px; padding: 32px; display: grid; gap: 14px; grid-template-columns: 48px 1fr; align-items: start; transition: border-color .2s ease; }
.topic:hover { border-color: var(--violet); }
.topic:hover { border-color: var(--accent); }
.topic h3 { font-size: 14px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-top: 4px; }
.topic p { color: var(--graphite); font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; grid-column: 2; }
/* ---------- Footer ---------- */
.footer { background: var(--obsidian); color: var(--porcelain); padding-block: 80px clamp(110px, 17vw, 250px); margin-top: var(--section-y); position: relative; overflow: hidden; }
.footer { background: var(--obsidian); color: var(--on-dark); padding-block: 80px clamp(110px, 17vw, 250px); margin-top: var(--section-y); position: relative; overflow: hidden; }
.foot-cta { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; padding-bottom: 64px; border-bottom: 1px solid #1f1f1f; }
.foot-cta h2 { color: var(--porcelain); max-width: 16ch; }
.foot-cta h2 { color: var(--on-dark); max-width: 16ch; }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; }
.foot-top > * { min-width: 0; }
.foot-top .brand-word { color: var(--porcelain); }
.footer .brand { color: var(--on-dark); }
.footer .brand-word b { color: var(--accent-bright); }
.foot-intro { display: grid; gap: 20px; align-content: start; }
.foot-intro p { color: var(--ash); font-size: 13px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.foot-intro p { color: var(--on-dark-muted); font-size: 13px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.foot-col h4 { font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--slate); margin-bottom: 18px; }
.foot-col ul { display: grid; gap: 12px; }
.foot-col a { color: var(--porcelain); transition: color .15s ease; overflow-wrap: anywhere; }
.foot-col a:hover { color: #8d86ff; }
.foot-col a { color: var(--on-dark); transition: color .15s ease; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--accent-bright); }
.foot-col .muted { color: var(--ash); }
.foot-big { margin-top: 72px; padding-top: 32px; border-top: 1px solid #1f1f1f; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.foot-big .places { font-size: clamp(22px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.foot-big .places i { font-style: normal; color: var(--violet); padding-inline: 12px; }
.foot-big .places i { font-style: normal; color: var(--accent); padding-inline: 12px; }
.foot-big small { color: var(--slate); font-size: 13px; }
.foot-word { position: absolute; left: 50%; bottom: -0.22em; translate: -50% 0; font-size: clamp(80px, 17vw, 250px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: #121212; white-space: nowrap; pointer-events: none; user-select: none; }
.footer .wrap { position: relative; z-index: 1; }
@@ -752,7 +822,9 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
:root { --gutter: 16px; --section-y: 64px; --nav-h: 64px; }
.brand-word { font-size: 13px; }
.brand-word { font-size: 12px; }
.logo-mark { width: 38px; }
.nav-cta { gap: 6px; }
.hero { padding-top: 56px; }
.page-hero { padding-block: 48px 56px; }
.cluster { grid-template-columns: 1fr; margin-top: 48px; }
static/favicon.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><rect width="34" height="34" rx="10" fill="#594ff4"/><path d="M8 9h7.2c4.4 0 7.3 3.1 7.3 7.6 0 1.5-.3 2.8-.9 4L16.9 25H8l1.8-3.2h5.6c2.6 0 4.1-2 4.1-4.9 0-2.6-1.5-4.6-4.3-4.6h-5.3z" fill="#fff"/><path d="M27 8.5 18.3 25.5h4.2L27 16.8z" fill="#fff" opacity=".55"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#0b0b0d"/><g transform="translate(6 15) scale(.5)"><path fill="#fff" fill-rule="evenodd" d="M9 4h55c10 0 13 7 9 14L58 46c-3 6-8 8-15 8.5L3 57zM21.5 15.5 18.3 45.8 40 44.5c4-.3 6-1.5 7.5-4.3l12-21.4c1.2-2.2.3-3.3-2-3.3z"/><path fill="#33b9ff" d="M24 59 102 1 91 52 72 54.5 79 33z"/><path fill="#8fdcff" d="M24 59 102 1 79 33z"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 330 B

After

Width:  |  Height:  |  Size: 441 B