Use Dylan's DM logo, switch accent to brand blue, add dark mode
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
+169
-97
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user