c16ee37096
Pushed the cosmos theme further: - Cursor aurora — 600px soft cyan/violet/magenta halo follows the pointer with lag (mix-blend-mode: screen, blur 8px). Fades in on first move, fades out on pointerleave. - Card 3D tilt — every cosmos card rotates up to ~6deg toward the cursor on hover via custom-property-driven rotateX/rotateY, with a cursor-tracking radial shimmer painted inside via mix-blend-mode: screen. RAF-throttled. Skipped for testimonial + client tiles since they have no chrome. - Hero parallax — name, tagline, and drift-orb all shift relative to cursor position via --cm-x / --cm-y custom properties set globally from the pointer move handler. - Shader: doubled the gravity-well strength (0.03 -> 0.06) and added a click-driven ripple — pointerdown sets u_ripple_pos/u_ripple_age uniforms; the shader propagates a cyan/magenta luminous ring of displacement that decays over ~2s. - Comets — 3 CSS-only streaks crossing the page on staggered 14/22/ 19s loops with cyan/violet drop-shadow trails. - Turtle — new .cosmos-turtle img auto-loads if assets/img/turtle.png resolves (or theme.turtle URL is set). Floats in from the left, arcs across, fades out off the right; pulses its aurora glow on a 4s bob. Reduced-motion users see it positioned statically. - All new chrome respects prefers-reduced-motion: halo/comets hidden, card tilt + parallax disabled, turtle pinned static. Also adds section.headless = true (per user request): renders the section body with no header/kicker chrome and a tighter top margin so the contents read as nested under the prior section. Example JSON now uses this to slide the testimonials carousel under the clients wall.
699 lines
23 KiB
CSS
699 lines
23 KiB
CSS
/* dlstack — bolder
|
|
Editorial poster aesthetic. Massive Fraunces, vermilion that owns the page.
|
|
*/
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
* { margin: 0; }
|
|
html, body { height: 100%; }
|
|
img, svg { display: block; max-width: 100%; }
|
|
a { color: inherit; text-decoration: none; }
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
|
|
|
|
:root {
|
|
--paper: oklch(0.972 0.012 78);
|
|
--paper-2: oklch(0.945 0.014 78);
|
|
--ink: oklch(0.190 0.020 268);
|
|
--ink-2: oklch(0.305 0.020 268);
|
|
--muted: oklch(0.520 0.014 268);
|
|
--rule: oklch(0.860 0.010 78);
|
|
--accent: #E8482C;
|
|
--on-accent: oklch(0.980 0.014 78);
|
|
|
|
--display: "Fraunces", ui-serif, Georgia, serif;
|
|
--body: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
--mono: "Geist Mono", ui-monospace, Menlo, monospace;
|
|
|
|
--fs-mini: clamp(0.72rem, 0.70rem + 0.10vw, 0.82rem);
|
|
--fs-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
|
|
--fs-md: clamp(1rem, 0.96rem + 0.20vw, 1.10rem);
|
|
--fs-lg: clamp(1.30rem, 1.18rem + 0.50vw, 1.65rem);
|
|
--fs-xl: clamp(1.60rem, 1.30rem + 1.20vw, 2.40rem);
|
|
--fs-tag: clamp(1.50rem, 1.10rem + 1.80vw, 2.80rem);
|
|
--fs-hero: clamp(4rem, 1.50rem + 13vw, 13rem);
|
|
--fs-num: clamp(2.50rem, 1.80rem + 3.00vw, 4.50rem);
|
|
|
|
--gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
|
|
--max: 78rem;
|
|
--radius: 14px;
|
|
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-strong: cubic-bezier(0.16, 1, 0.30, 1);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root[data-theme="auto"] {
|
|
--paper: oklch(0.155 0.018 268);
|
|
--paper-2: oklch(0.205 0.020 268);
|
|
--ink: oklch(0.97 0.012 78);
|
|
--ink-2: oklch(0.85 0.014 78);
|
|
--muted: oklch(0.62 0.018 268);
|
|
--rule: oklch(0.30 0.020 268);
|
|
}
|
|
}
|
|
:root[data-theme="dark"] {
|
|
--paper: oklch(0.155 0.018 268);
|
|
--paper-2: oklch(0.205 0.020 268);
|
|
--ink: oklch(0.97 0.012 78);
|
|
--ink-2: oklch(0.85 0.014 78);
|
|
--muted: oklch(0.62 0.018 268);
|
|
--rule: oklch(0.30 0.020 268);
|
|
}
|
|
|
|
html { font-family: var(--body); color: var(--ink); background: var(--paper); }
|
|
body {
|
|
font-size: var(--fs-md);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
/* paper grain — very subtle */
|
|
body::before {
|
|
content: ""; position: fixed; inset: 0;
|
|
pointer-events: none; z-index: 0;
|
|
background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
|
|
opacity: 0.6; mix-blend-mode: multiply;
|
|
}
|
|
::selection { background: var(--accent); color: var(--on-accent); }
|
|
|
|
.shell {
|
|
position: relative; z-index: 1;
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: 0 var(--gutter) 6rem;
|
|
}
|
|
|
|
/* ───── marker bar ───── */
|
|
.marker {
|
|
display: flex; align-items: center; gap: 1rem;
|
|
padding: 1.25rem 0;
|
|
border-bottom: 1px solid var(--rule);
|
|
font: 500 var(--fs-mini)/1 var(--mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
color: var(--muted);
|
|
}
|
|
.marker__brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--accent); margin-right: auto; }
|
|
.marker__brand .star { font-size: 1.1em; line-height: 0; transform: translateY(1px); }
|
|
.marker__year { font-variant-numeric: tabular-nums; }
|
|
|
|
/* theme pill — sits in the marker bar */
|
|
.theme {
|
|
padding: 5px 12px;
|
|
background: transparent;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 999px;
|
|
font: 500 var(--fs-mini)/1.4 var(--mono);
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
cursor: pointer;
|
|
transition: border-color 220ms var(--ease), color 220ms var(--ease), background 220ms var(--ease);
|
|
}
|
|
.theme:hover { border-color: var(--ink); color: var(--ink); background: color-mix(in oklch, var(--ink) 4%, transparent); }
|
|
|
|
/* ───── hero ───── */
|
|
.hero {
|
|
position: relative;
|
|
padding: clamp(3rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
|
|
}
|
|
.hero__name {
|
|
font-family: var(--display);
|
|
font-weight: 320;
|
|
font-variation-settings: "opsz" 144, "SOFT" 30;
|
|
font-size: var(--fs-hero);
|
|
line-height: 0.86;
|
|
letter-spacing: -0.045em;
|
|
color: var(--ink);
|
|
}
|
|
.hero__name .hero__name-first {
|
|
font-family: "DM Serif Display", var(--display);
|
|
font-weight: 400;
|
|
font-variation-settings: normal;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.hero__name em {
|
|
font-style: italic;
|
|
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
|
|
color: var(--accent);
|
|
}
|
|
.hero__asterism {
|
|
position: absolute;
|
|
top: clamp(2rem, 7vw, 5rem);
|
|
right: clamp(0.5rem, 3vw, 2rem);
|
|
font-family: var(--display);
|
|
font-size: clamp(3rem, 8vw, 6rem);
|
|
color: var(--accent);
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
transform: rotate(-8deg);
|
|
opacity: 0.95;
|
|
}
|
|
.hero__tagline {
|
|
margin-top: clamp(1.5rem, 3vw, 2.25rem);
|
|
font-family: var(--display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-variation-settings: "opsz" 60, "SOFT" 100;
|
|
font-size: var(--fs-tag);
|
|
line-height: 1.1;
|
|
color: var(--ink-2);
|
|
letter-spacing: -0.015em;
|
|
max-width: 24ch;
|
|
}
|
|
.hero__tagline span { color: var(--accent); padding: 0 0.2em; }
|
|
.hero__bio {
|
|
margin-top: 1.5rem;
|
|
max-width: 48ch;
|
|
color: var(--muted);
|
|
font-size: var(--fs-md);
|
|
}
|
|
|
|
/* ───── social rail ───── */
|
|
.social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
|
|
.social a {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 9px 16px;
|
|
border: 1px solid var(--ink);
|
|
border-radius: 999px;
|
|
font-size: var(--fs-sm);
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
background: transparent;
|
|
transition: background 220ms var(--ease-strong), color 220ms var(--ease-strong), transform 220ms var(--ease);
|
|
}
|
|
.social a:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
|
|
.social svg { width: 16px; height: 16px; }
|
|
|
|
/* ───── sections ───── */
|
|
.section { margin-top: clamp(4rem, 7vw, 6rem); }
|
|
.section--headless {
|
|
/* nest visually under the previous section instead of starting a new one */
|
|
margin-top: clamp(1.25rem, 2.5vw, 2rem);
|
|
}
|
|
.section__head {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: clamp(1rem, 2.5vw, 2rem);
|
|
align-items: end;
|
|
padding-bottom: 1rem;
|
|
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
|
|
border-bottom: 2px solid var(--ink);
|
|
}
|
|
.section__numwrap { display: flex; flex-direction: column; gap: 0.2rem; align-self: end; }
|
|
.section__numwrap small {
|
|
font-family: var(--display);
|
|
font-size: var(--fs-md);
|
|
font-style: italic;
|
|
font-variation-settings: "opsz" 36, "SOFT" 100;
|
|
letter-spacing: 0;
|
|
color: var(--accent);
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
}
|
|
.section__num {
|
|
font-family: var(--display);
|
|
font-weight: 350;
|
|
font-variation-settings: "opsz" 144;
|
|
font-size: var(--fs-num);
|
|
line-height: 0.85;
|
|
color: var(--ink);
|
|
font-feature-settings: "lnum" on, "tnum" on;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.section__titlewrap {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
|
|
gap: 0.75rem 1.5rem;
|
|
}
|
|
.section__title {
|
|
font-family: var(--display);
|
|
font-weight: 350;
|
|
font-variation-settings: "opsz" 144, "SOFT" 30;
|
|
font-size: var(--fs-xl);
|
|
line-height: 0.95;
|
|
letter-spacing: -0.025em;
|
|
color: var(--ink);
|
|
}
|
|
.section__kicker {
|
|
font-family: var(--display);
|
|
font-style: italic;
|
|
color: var(--muted);
|
|
font-size: var(--fs-md);
|
|
font-variation-settings: "opsz" 24;
|
|
}
|
|
|
|
/* ───── bento grid ───── */
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
.grid > * { grid-column: span 12; }
|
|
@media (min-width: 600px) {
|
|
.grid > .card--link { grid-column: span 6; }
|
|
.grid > .card--project { grid-column: span 6; }
|
|
.grid > .card--youtube { grid-column: span 6; }
|
|
}
|
|
@media (min-width: 960px) {
|
|
.grid > .card--link { grid-column: span 4; }
|
|
.grid > .card--project { grid-column: span 6; }
|
|
.grid > .card--youtube { grid-column: span 6; }
|
|
.grid > .card--featured{ grid-column: span 8; }
|
|
}
|
|
|
|
/* portfolio item — always full row */
|
|
.grid > .card--portfolio { grid-column: span 12; }
|
|
|
|
/* clients grid — auto-flowing square tiles */
|
|
.grid--clients {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
|
|
gap: clamp(0.75rem, 1.4vw, 1.25rem);
|
|
}
|
|
@media (min-width: 1100px) {
|
|
.grid--clients { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
|
|
}
|
|
|
|
/* ───── cards (base) ───── */
|
|
.card {
|
|
position: relative;
|
|
padding: 1.1rem 1.15rem;
|
|
border: 1px solid var(--rule);
|
|
border-radius: var(--radius);
|
|
background: var(--paper);
|
|
transition: transform 320ms var(--ease-strong), border-color 220ms var(--ease), box-shadow 320ms var(--ease);
|
|
display: flex; flex-direction: column; gap: 0.5rem;
|
|
isolation: isolate;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-3px);
|
|
border-color: var(--ink-2);
|
|
box-shadow: 0 1px 0 rgba(20,18,34,0.04), 0 18px 36px -22px rgba(20,18,34,0.30);
|
|
}
|
|
.card::after {
|
|
content: "→";
|
|
position: absolute; top: 14px; right: 16px;
|
|
font-family: var(--mono); font-size: 14px;
|
|
color: var(--muted);
|
|
transition: transform 320ms var(--ease-strong), color 220ms var(--ease);
|
|
}
|
|
.card:hover::after { transform: translate(3px, -3px); color: var(--accent); }
|
|
|
|
/* link card */
|
|
.card--link { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: start; padding: 1.15rem; padding-right: 2.5rem; }
|
|
.card--link .favicon {
|
|
width: 64px; height: 64px; border-radius: 12px;
|
|
background: var(--paper-2);
|
|
display: grid; place-items: center;
|
|
border: 1px solid var(--rule);
|
|
overflow: hidden;
|
|
}
|
|
.card--link .favicon img { width: 100%; height: 100%; object-fit: cover; }
|
|
.card--link .favicon img.is-favicon { width: 44px; height: 44px; object-fit: contain; }
|
|
.card--link .favicon[data-fallback] { font-family: var(--display); font-weight: 500; font-size: 1.7rem; color: var(--ink); }
|
|
.card__title { font-weight: 540; letter-spacing: -0.005em; line-height: 1.25; }
|
|
.card__desc { color: var(--muted); font-size: var(--fs-sm); }
|
|
.card__host { font-family: var(--mono); font-size: var(--fs-mini); color: var(--muted); text-transform: lowercase; }
|
|
.card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; margin-top: 0.2rem; }
|
|
.card__date { font-family: var(--mono); font-size: var(--fs-mini); color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; }
|
|
.card__meta .card__date::before { content: "·"; margin-right: 0.5rem; color: var(--accent); }
|
|
.card__meta .card__date:only-child::before { content: none; }
|
|
.tags .card__date { padding: 3px 0; margin-left: auto; }
|
|
.portfolio__caption .card__date { margin-top: 0.25rem; }
|
|
|
|
/* project card */
|
|
.card--project { padding: 1.5rem; gap: 0.75rem; }
|
|
.card--project .card__title {
|
|
font-family: var(--display);
|
|
font-weight: 380;
|
|
font-variation-settings: "opsz" 60;
|
|
font-size: var(--fs-lg);
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
/* FEATURED — accent-filled hero card */
|
|
.card--featured {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--on-accent);
|
|
padding: 2rem 2rem 1.75rem;
|
|
min-height: clamp(220px, 28vw, 320px);
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
}
|
|
.card--featured::before {
|
|
content: "★ Featured";
|
|
position: absolute; top: 1.25rem; left: 2rem;
|
|
font-family: var(--mono); font-size: var(--fs-mini);
|
|
text-transform: uppercase; letter-spacing: 0.2em;
|
|
color: color-mix(in oklch, var(--on-accent) 75%, transparent);
|
|
}
|
|
.card--featured::after { color: color-mix(in oklch, var(--on-accent) 60%, transparent); }
|
|
.card--featured:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 1px 0 rgba(20,18,34,0.04), 0 24px 44px -22px color-mix(in oklch, var(--accent) 70%, transparent); }
|
|
.card--featured:hover::after { color: var(--on-accent); }
|
|
.card--featured .card__title {
|
|
font-size: clamp(1.85rem, 1.30rem + 1.6vw, 2.6rem);
|
|
font-weight: 380;
|
|
font-variation-settings: "opsz" 144, "SOFT" 30;
|
|
letter-spacing: -0.025em;
|
|
color: var(--on-accent);
|
|
margin-top: 2rem;
|
|
line-height: 1;
|
|
}
|
|
.card--featured .card__desc { color: color-mix(in oklch, var(--on-accent) 80%, transparent); font-size: var(--fs-md); max-width: 38ch; }
|
|
.card--featured .tag {
|
|
background: color-mix(in oklch, var(--on-accent) 12%, transparent);
|
|
border-color: color-mix(in oklch, var(--on-accent) 22%, transparent);
|
|
color: var(--on-accent);
|
|
}
|
|
|
|
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.5rem; }
|
|
.tag {
|
|
font-family: var(--mono); font-size: var(--fs-mini);
|
|
padding: 3px 9px; border-radius: 5px;
|
|
background: var(--paper-2);
|
|
color: var(--ink-2);
|
|
border: 1px solid var(--rule);
|
|
}
|
|
|
|
/* portfolio — wide landscape with image + caption below */
|
|
.card--portfolio { padding: 0; overflow: hidden; gap: 0; }
|
|
.card--portfolio::after {
|
|
top: auto; bottom: 14px; right: 16px;
|
|
color: var(--paper);
|
|
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
|
|
z-index: 2;
|
|
}
|
|
.portfolio__media {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: var(--portfolio-ratio, 5 / 2);
|
|
background: var(--paper-2);
|
|
overflow: hidden;
|
|
}
|
|
.portfolio__media img {
|
|
width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 700ms var(--ease-strong);
|
|
}
|
|
.card--portfolio:hover .portfolio__media img { transform: scale(1.025); }
|
|
.portfolio__caption {
|
|
padding: 1rem 1.25rem 1.1rem;
|
|
display: flex; flex-direction: column;
|
|
gap: 0.25rem;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
.portfolio__caption .card__title {
|
|
font-family: var(--display);
|
|
font-weight: 380;
|
|
font-variation-settings: "opsz" 60;
|
|
font-size: var(--fs-lg);
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
text-transform: none;
|
|
}
|
|
.portfolio__caption .card__desc { font-size: var(--fs-sm); }
|
|
|
|
/* client tile — square logo, caption below, no card chrome */
|
|
.card--client {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
display: flex; flex-direction: column;
|
|
gap: 0.55rem;
|
|
align-items: stretch;
|
|
text-align: center;
|
|
min-width: 0;
|
|
}
|
|
.card--client::after { display: none; }
|
|
.card--client:hover { transform: none; box-shadow: none; }
|
|
.client__logo {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
width: 100%;
|
|
border-radius: 14px;
|
|
background: var(--paper-2);
|
|
border: 1px solid var(--rule);
|
|
overflow: hidden;
|
|
display: grid; place-items: center;
|
|
transition: transform 320ms var(--ease-strong), border-color 220ms var(--ease), box-shadow 320ms var(--ease);
|
|
}
|
|
.card--client:hover .client__logo {
|
|
transform: translateY(-3px);
|
|
border-color: var(--ink-2);
|
|
box-shadow: 0 1px 0 rgba(20,18,34,0.04), 0 14px 28px -18px rgba(20,18,34,0.28);
|
|
}
|
|
.client__logo img.is-favicon { width: 60%; height: 60%; object-fit: contain; }
|
|
.client__logo img:not(.is-favicon) { width: 86%; height: 86%; object-fit: contain; }
|
|
.client__logo[data-fallback] { font-family: var(--display); font-weight: 500; font-size: 2.2rem; color: var(--ink); }
|
|
.client__title {
|
|
font-size: var(--fs-sm);
|
|
color: var(--ink-2);
|
|
line-height: 1.25;
|
|
letter-spacing: -0.005em;
|
|
/* width is naturally constrained by the grid track (= image width) */
|
|
word-break: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* youtube */
|
|
.card--youtube { padding: 0; overflow: hidden; }
|
|
.yt { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; cursor: pointer; display: block; }
|
|
.yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.65) 100%); pointer-events: none; }
|
|
.yt.yt--playing { cursor: default; background: #000; }
|
|
.yt.yt--playing::after,
|
|
.yt.yt--playing .yt__play,
|
|
.yt.yt--playing .yt__title { display: none; }
|
|
.yt__play {
|
|
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
|
width: 72px; height: 72px; border-radius: 50%;
|
|
background: rgba(0,0,0,0.55); border: 1.5px solid rgba(255,255,255,0.85);
|
|
display: grid; place-items: center;
|
|
transition: transform 320ms var(--ease-strong), background 220ms var(--ease), border-color 220ms var(--ease);
|
|
}
|
|
.yt:hover .yt__play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); border-color: var(--accent); }
|
|
.yt__play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
|
|
.yt__title {
|
|
position: absolute; left: 16px; right: 16px; bottom: 14px;
|
|
color: #fff; font-family: var(--display); font-weight: 400;
|
|
font-size: var(--fs-md); line-height: 1.2;
|
|
z-index: 1; text-shadow: 0 1px 12px rgba(0,0,0,0.6);
|
|
}
|
|
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
|
|
|
|
/* ───── carousel (testimonials) ───── */
|
|
.carousel { position: relative; }
|
|
.carousel--inline {
|
|
display: flex; align-items: center;
|
|
gap: clamp(0.5rem, 2vw, 1.5rem);
|
|
padding: 0 clamp(0.5rem, 3vw, 2rem);
|
|
}
|
|
.carousel--inline .carousel__viewport { flex: 1 1 0; min-width: 0; }
|
|
.carousel__viewport {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: var(--radius);
|
|
}
|
|
.carousel__track {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-areas: "stack";
|
|
}
|
|
.carousel__track > * {
|
|
grid-area: stack;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 1100ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 1100ms;
|
|
pointer-events: none;
|
|
will-change: opacity;
|
|
}
|
|
.carousel__track > .is-active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
transition: opacity 1100ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
|
|
}
|
|
.carousel--stacked .carousel__track {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
.carousel--stacked .carousel__track > * {
|
|
opacity: 1; visibility: visible; transform: none; pointer-events: auto;
|
|
}
|
|
.carousel--stacked .carousel__controls { display: none; }
|
|
|
|
.carousel__controls {
|
|
margin-top: 1.25rem;
|
|
display: flex; align-items: center; justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
.carousel__nav {
|
|
width: 38px; height: 38px;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 50%;
|
|
background: var(--paper);
|
|
color: var(--ink-2);
|
|
font: 500 1.2rem/1 var(--display);
|
|
cursor: pointer;
|
|
display: grid; place-items: center;
|
|
transition: border-color 200ms var(--ease), color 200ms var(--ease), background 200ms var(--ease);
|
|
}
|
|
.carousel__nav:hover { border-color: var(--ink); color: var(--ink); background: color-mix(in oklch, var(--ink) 4%, transparent); }
|
|
.carousel__dots { display: flex; gap: 0.5rem; align-items: center; }
|
|
.carousel__dot {
|
|
width: 8px; height: 8px;
|
|
border: 0; padding: 0;
|
|
border-radius: 50%;
|
|
background: var(--rule);
|
|
cursor: pointer;
|
|
transition: background 220ms var(--ease), transform 220ms var(--ease);
|
|
}
|
|
.carousel__dot:hover { background: var(--ink-2); }
|
|
.carousel__dot.is-active { background: var(--accent); transform: scale(1.35); }
|
|
|
|
/* ───── testimonial — "of the page", no chrome ───── */
|
|
.card--testimonial {
|
|
padding: 0.5rem 0;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
display: flex; flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: 0.85rem;
|
|
min-height: 0;
|
|
isolation: auto;
|
|
}
|
|
.card--testimonial:hover {
|
|
transform: none;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
.card--testimonial::after,
|
|
.card--testimonial::before { display: none; }
|
|
.testimonial__mark {
|
|
font-family: var(--display);
|
|
font-size: clamp(2.5rem, 3.5vw, 3.5rem);
|
|
line-height: 0.55;
|
|
color: var(--accent);
|
|
font-style: italic;
|
|
font-variation-settings: "opsz" 144, "SOFT" 100;
|
|
font-weight: 400;
|
|
user-select: none;
|
|
opacity: 0.85;
|
|
}
|
|
.testimonial__quote {
|
|
font-family: var(--display);
|
|
font-size: var(--quote-fs, clamp(1.2rem, 0.95rem + 0.85vw, 1.55rem));
|
|
line-height: var(--quote-lh, 1.45);
|
|
font-weight: 400;
|
|
font-variation-settings: "opsz" 60, "SOFT" 100;
|
|
color: var(--ink);
|
|
margin: 0;
|
|
letter-spacing: -0.005em;
|
|
max-width: 64ch;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* length-driven scale: shorter quotes get the spotlight, longer ones tighten */
|
|
.card--testimonial.is-xshort {
|
|
--quote-fs: clamp(1.85rem, 1.2rem + 2.4vw, 3rem);
|
|
--quote-lh: 1.20;
|
|
}
|
|
.card--testimonial.is-short {
|
|
--quote-fs: clamp(1.5rem, 1.05rem + 1.7vw, 2.25rem);
|
|
--quote-lh: 1.30;
|
|
}
|
|
.card--testimonial.is-medium {
|
|
--quote-fs: clamp(1.2rem, 0.95rem + 0.85vw, 1.55rem);
|
|
--quote-lh: 1.45;
|
|
}
|
|
.card--testimonial.is-long {
|
|
--quote-fs: clamp(1.05rem, 0.95rem + 0.35vw, 1.20rem);
|
|
--quote-lh: 1.55;
|
|
}
|
|
.card--testimonial.is-xlong {
|
|
--quote-fs: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
|
|
--quote-lh: 1.6;
|
|
}
|
|
|
|
.testimonial__by {
|
|
display: flex; align-items: center; justify-content: center; gap: 0.7rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
width: auto;
|
|
}
|
|
.testimonial__avatar {
|
|
flex: 0 0 auto;
|
|
width: 32px; height: 32px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: var(--paper-2);
|
|
display: grid; place-items: center;
|
|
border: 1px solid var(--rule);
|
|
}
|
|
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.testimonial__avatar img.is-favicon { width: 60%; height: 60%; object-fit: contain; }
|
|
.testimonial__attr { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.3; min-width: 0; text-align: left; }
|
|
.testimonial__name {
|
|
font-family: var(--body);
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
font-size: var(--fs-sm);
|
|
letter-spacing: -0.005em;
|
|
}
|
|
.testimonial__meta {
|
|
font-family: var(--mono);
|
|
font-size: var(--fs-mini);
|
|
color: var(--muted);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.testimonial__by .card__date {
|
|
font-size: var(--fs-mini);
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
/* footer */
|
|
.foot {
|
|
margin-top: clamp(4rem, 8vw, 7rem);
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--rule);
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
color: var(--muted);
|
|
font-family: var(--mono); font-size: var(--fs-mini);
|
|
text-transform: uppercase; letter-spacing: 0.18em;
|
|
}
|
|
.foot__mark {
|
|
font-family: var(--display); font-style: italic; font-size: 1.4rem;
|
|
color: var(--accent); text-transform: none; letter-spacing: 0;
|
|
line-height: 1;
|
|
}
|
|
.foot__right { text-align: right; }
|
|
|
|
/* reveal */
|
|
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-strong), transform 700ms var(--ease-strong); }
|
|
.reveal.in { opacity: 1; transform: none; }
|
|
|
|
/* hero entrance */
|
|
.hero__name { animation: rise 1100ms var(--ease-strong) both; }
|
|
.hero__asterism { animation: spin-in 1400ms 200ms var(--ease-strong) both; }
|
|
.hero__tagline { animation: rise 1100ms 150ms var(--ease-strong) both; }
|
|
.hero__bio { animation: rise 1100ms 250ms var(--ease-strong) both; }
|
|
.social { animation: rise 1100ms 350ms var(--ease-strong) both; }
|
|
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
|
|
@keyframes spin-in { from { opacity: 0; transform: rotate(-60deg) scale(0.5); } to { opacity: 0.95; transform: rotate(-8deg) scale(1); } }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
|
.reveal { opacity: 1; transform: none; }
|
|
}
|
|
|
|
.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; }
|