/* =====================================================================
Roberto Viana — Portfolio
Starter design baseline. A refined, editorial minimalism.
Ink on warm paper, big type, generous space, one sharp accent.
Swap the variables below to make it yours. Everything keys off them.
===================================================================== */
/* Fonts. Using @import here for a quick start.
For better performance later, move these to a tag in the
of each HTML page and delete this @import. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');
/* ---------- Design tokens ---------- */
:root {
/* Color. Warm paper, near-black ink, one accent.
The accent is used sparingly: the rotating hero word, link hovers.
Let your project images carry the rest of the color. */
--paper: #f6f3ec;
--paper-2: #efebe1; /* slightly deeper, for card backgrounds */
--ink: #1a1816;
--ink-soft: #6b665e; /* secondary text, meta labels */
--line: #d9d3c7; /* hairline borders */
--accent: #d6451f; /* burnt vermilion. confident, not cliche */
/* Type */
--font-display: 'Futura', 'Jost', system-ui, sans-serif;
--font-body: 'Futura', 'Jost', system-ui, sans-serif;
--font-mono: 'Spline Sans Mono', ui-monospace, monospace;
/* Fluid type scale. Grows with the viewport. */
--step-hero: clamp(2.75rem, 1.2rem + 7vw, 7rem);
--step-h2: clamp(1.75rem, 1rem + 3vw, 3rem);
--step-h3: clamp(1.25rem, 1rem + 1vw, 1.6rem);
--step-body: 1rem;
--step-meta: 0.8rem;
/* Space */
--gap: clamp(1rem, 0.5rem + 2vw, 2rem);
--section: clamp(4rem, 2rem + 8vw, 6.25rem);
--maxw: 1200px;
--radius: 4px;
}
/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--step-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--paper); }
/* Visible focus for keyboard users. Accessibility, not optional. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ---------- Layout helpers ---------- */
.wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: clamp(1.25rem, 5vw, 4rem);
}
.section { padding-block: var(--section); }
/* Consecutive sections shouldn't double their padding into a huge gap;
collapse the top so the rhythm matches the media-interleaved pages. */
main.case .section + .section { padding-top: 0; }
/* ---------- Type ---------- */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.02;
letter-spacing: -0.02em;
}
.meta {
font-family: var(--font-mono);
font-size: var(--step-meta);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* ---------- Header / nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--maxw);
width: 100%;
margin-inline: auto;
padding: 1.1rem clamp(1.25rem, 5vw, 4rem);
}
.site-header::before {
content: '';
position: absolute;
inset: 0;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter: blur(8px);
z-index: -1;
}
.site-header .brand {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
letter-spacing: -0.01em;
}
.nav { display: flex; gap: 1.5rem; }
.nav a {
font-family: var(--font-mono);
font-size: var(--step-meta);
letter-spacing: 0.04em;
text-transform: uppercase;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.nav a:hover { border-color: var(--ink); }
/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 2rem + 6vw, 7rem) var(--section); }
.hero h1 {
font-size: var(--step-hero);
max-width: 16ch;
}
/* Headline and portrait side by side. */
.hero-top {
display: flex;
align-items: center;
gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hero-top h1 {
flex: 1;
font-size: clamp(2.5rem, 1rem + 5.2vw, 5.5rem);
max-width: none;
margin: 0;
}
.hero-top .hero-photo { width: clamp(92px, 11vw, 140px); border-radius: 50%; }
.hero-top .hero-photo img { filter: none; }
@media (max-width: 640px) {
.hero-top { flex-direction: column; align-items: flex-start; }
.hero-top .hero-photo { width: clamp(110px, 32vw, 150px); }
}
/* The rotating word. Swap the inner text with JS, the accent stays. */
.hero .rotating { color: var(--accent); }
.hero .intro {
margin-top: 1.75rem;
max-width: 48ch;
color: var(--ink-soft);
font-size: var(--step-h3);
line-height: 1.45;
}
/* ---------- Project grid ---------- */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
}
@media (min-width: 720px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
.card {
display: flex;
flex-direction: column;
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -24px rgba(26, 24, 22, 0.5);
}
.card .thumb {
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, var(--line), var(--paper-2));
overflow: hidden;
}
.card .thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card:hover .thumb img { transform: scale(1.04); }
.card .body {
padding: 1.25rem 1.4rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card .tags { display: flex; justify-content: space-between; }
.card h3 {
font-size: var(--step-h3);
font-weight: 500;
transition: color 0.2s ease;
}
.card:hover h3 { color: var(--accent); }
/* ---------- Case study page ---------- */
.case-hero { padding-block: clamp(2rem, 1rem + 4vw, 5rem) 2rem; }
.case-hero h1 { font-size: var(--step-hero); max-width: 14ch; }
.case-hero .subtitle {
margin-top: 1rem;
font-size: var(--step-h3);
color: var(--ink-soft);
}
.prose { max-width: none; }
.prose h2 { font-size: var(--step-h2); margin-block: 2.5rem 1rem; }
.prose h3 { font-size: var(--step-h3); font-weight: 700; margin-block: 1.75rem 0.75rem; }
.prose p { margin-bottom: 1.1rem; }
.prose ul { margin: 0 0 1.1rem 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
/* Scroll-fill: words start gray and fill to ink as the block scrolls in.
Applied to a few key statements; words are wrapped by main.js. */
/* Marker highlight: solid block fill behind a phrase, sweeps left to right
when the phrase scrolls into view. Wrap phrase in . */
.mark {
background-image: linear-gradient(#ffd5ca, #ffd5ca);
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition: background-size 0.7s ease;
padding: 0.04em 0.1em;
margin: 0 -0.1em;
border-radius: 2px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.mark.lit { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
.mark { background-size: 100% 100%; transition: none; }
}
.scroll-fill .w { transition: color 0.3s ease; }
.scroll-fill .w.on { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
.scroll-fill .w { color: var(--ink); }
}
/* A simple result callout for Insight / Solution / Result blocks */
.result {
border-left: 3px solid var(--accent);
padding: 0.25rem 0 0.25rem 1.1rem;
margin: 1.25rem 0;
font-family: var(--font-display);
font-size: var(--step-h3);
}
/* ---------- Footer ---------- */
.site-footer {
border-top: 1px solid var(--line);
padding-block: 3rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
align-items: center;
color: var(--ink-soft);
}
.site-footer .built {
font-family: var(--font-mono);
font-size: var(--step-meta);
}
.site-footer .built a { color: var(--ink); border-bottom: 1px solid var(--accent); }
/* ---------- Page load reveal. One orchestrated entrance. ---------- */
@keyframes rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.reveal:nth-child(1) { animation-delay: 0.05s; }
.reveal:nth-child(2) { animation-delay: 0.15s; }
.reveal:nth-child(3) { animation-delay: 0.25s; }
.reveal:nth-child(4) { animation-delay: 0.35s; }
/* Scroll-triggered reveal. Elements rise in as they enter the viewport.
JS adds .is-visible via IntersectionObserver. */
.reveal-up {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
/* Stagger children within a row */
.reveal-up[data-delay="1"] { transition-delay: 0.08s; }
.reveal-up[data-delay="2"] { transition-delay: 0.16s; }
.reveal-up[data-delay="3"] { transition-delay: 0.24s; }
/* Respect people who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
.reveal { opacity: 1; }
.reveal-up { opacity: 1; transform: none; }
}
/* =====================================================================
Phase 2 additions — real imagery, richer layout, motion.
===================================================================== */
/* Display headings: tighten tracking now that the face is a grotesk. */
h1 { letter-spacing: -0.035em; }
h2, h3 { letter-spacing: -0.02em; }
/* ---------- Hero, image-led ---------- */
.hero h1 { max-width: 18ch; }
.hero .rotating { position: relative; white-space: nowrap; }
/* A subtle marker under the rotating word */
.hero .rotating::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0.06em;
height: 0.5em; z-index: -1;
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.hero .ai-note {
margin-top: 1.5rem;
font-family: var(--font-mono);
font-size: var(--step-meta);
color: var(--ink-soft);
display: inline-flex; align-items: center; gap: 0.5rem;
}
.hero .ai-note::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
70% { box-shadow: 0 0 0 8px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* ---------- Featured project (first card, full width, image beside text) ---------- */
.card.featured { grid-column: 1 / -1; }
@media (min-width: 720px) {
.card.featured { flex-direction: row; align-items: stretch; }
.card.featured .thumb { flex: 1 1 60%; aspect-ratio: auto; min-height: 340px; }
.card.featured .body { flex: 1 1 40%; justify-content: center; padding: 2rem 2.2rem; }
.card.featured h3 { font-size: var(--step-h2); }
}
/* Real images sit on a neutral mat so light UI screenshots read on paper. */
.card .thumb { background: #fff; display: grid; place-items: center; }
.card .thumb img { object-fit: cover; }
.card.featured .thumb img { object-fit: cover; }
/* ---------- Case study media ---------- */
.case-banner {
margin-block: 2rem;
border-radius: var(--radius);
overflow: hidden;
background: #fff;
border: 1px solid var(--line);
}
.case-banner img {
width: 100%;
display: block;
aspect-ratio: 2000 / 691;
object-fit: cover;
object-position: center;
}
figure.media {
margin: 2.5rem 0;
border-radius: var(--radius);
overflow: hidden;
background: #fff;
border: 1px solid var(--line);
}
/* No card chrome — image sits directly on the page. */
figure.media.bare {
background: none;
border: 0;
border-radius: 0;
}
figure.media.bare figcaption {
border-top: 0;
padding: 24px 0 0;
}
/* Let inline case figures breathe wider than the 68ch text column,
without causing horizontal scroll (capped under 100vw). */
.prose figure.media {
width: min(92vw, 1040px);
max-width: none;
}
/* Full-width media placed directly in a .wrap section (not inside .prose).
Fills the content column up to --maxw. Used for diagrams, blueprints, rows. */
.wrap > figure.media { width: 100%; margin-block: 0; }
/* Grid of figures/images — research photos, before/after, screen sets. */
.fig-grid { display: grid; gap: var(--gap); margin: 0; align-items: start; }
.fig-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.fig-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
.fig-grid.stack-mobile { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
.fig-grid.stack-1024 { grid-template-columns: 1fr; }
}
/* Narrower media, left-aligned on desktop; full-width on mobile. */
.media-70 { max-width: 70%; margin-inline: 0; }
.media-80 { max-width: 80%; margin-inline: 0; }
@media (max-width: 640px) { .media-70, .media-80 { max-width: 100%; } }
.fig-grid > figure.media { margin: 0; width: 100%; }
.fig-grid > img {
width: 100%; display: block;
border-radius: var(--radius);
border: 1px solid var(--line);
background: #fff;
}
/* Phone mockup row — portrait screens side by side, no chrome. */
.phone-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--gap);
margin: 0;
align-items: start;
justify-items: center;
}
.phone-row img { width: 100%; max-width: 320px; display: block; }
/* A small kicker label above a media block. */
.media-label { margin-bottom: 1rem; }
/* Text left, drifting wireframes right. */
.wireframe-split {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
}
.wireframe-split .prose { max-width: none; }
/* Two wireframes that drift in opposite directions as you scroll. */
.wireframe-parallax {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
align-items: start;
}
.wireframe-parallax figure { margin: 0; width: 96%; }
.wireframe-parallax img {
width: 100%;
height: auto;
display: block;
}
.wireframe-parallax .pcol-1 { justify-self: end; margin-right: -16%; }
.wireframe-parallax .pcol-2 { justify-self: start; margin-left: -16%; margin-top: -14%; }
[data-parallax] { will-change: transform; }
@media (max-width: 760px) {
.wireframe-split { grid-template-columns: 1fr; }
}
/* Three interaction gifs. On wide screens they fill the row with a gap that
grows with the viewport; below a phone breakpoint they get wider and slide
over each other, layered and staggered, like the reference. */
.gif-section { padding-top: 20px; padding-bottom: 64px; }
.gif-row {
display: flex;
justify-content: center;
align-items: flex-start;
}
.gif-row figure {
flex: 0 0 auto;
width: 46%;
margin: 0;
position: relative;
}
.gif-row img { width: 100%; height: auto; display: block; }
.gif-row figure:nth-child(1) { z-index: 1; }
.gif-row figure:nth-child(2) { z-index: 2; margin-left: -19%; }
.gif-row figure:nth-child(3) { z-index: 3; margin-left: -19%; }
/* Phones: same line on desktop; below the phone breakpoint they get wider,
overlap more, and shift up to a stagger like the reference. */
@media (max-width: 767px) {
.gif-row figure { width: 70%; }
.gif-row figure:nth-child(2),
.gif-row figure:nth-child(3) { margin-left: -55%; }
.gif-row figure:nth-child(1) { margin-top: 14%; }
.gif-row figure:nth-child(2) { margin-top: 7%; }
.gif-row figure:nth-child(3) { margin-top: 0; }
}
/* ---------- Homepage: tighter vertical rhythm ---------- */
.home .hero {
padding-block: clamp(3.5rem, 2rem + 5vw, 7rem) clamp(2rem, 1rem + 3vw, 4rem);
}
.home .section {
padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
/* Homepage cards: all uniform, horizontal (image beside text), 350px tall.
Higher-specificity selectors (.home .grid .card) override the .featured rules. */
.home .grid { grid-template-columns: 1fr; }
@media (min-width: 720px) {
.home .grid .card {
flex-direction: row;
align-items: stretch;
height: 350px;
overflow: hidden;
}
.home .grid .card .thumb {
display: block;
flex: 1 1 58%;
aspect-ratio: auto;
height: auto;
min-height: 0;
}
.home .grid .card .body {
flex: 1 1 42%;
justify-content: center;
padding: 2rem 2.2rem;
}
.home .grid .card h3 { font-size: var(--step-h2); }
}
.home .grid .card .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.home .grid .card .thumb img[src*="cadi-card"] { object-position: center center; }
/* Hero lower: intro + contact on the left, square B&W photo on the right. */
.hero-lower {
display: flex;
align-items: center;
gap: clamp(1.5rem, 4vw, 3rem);
margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.hero-text { max-width: 46ch; }
.hero-text .intro { margin-top: 0; }
.hero .contact {
margin-top: 1.5rem;
font-family: var(--font-mono);
font-size: var(--step-meta);
letter-spacing: 0.02em;
color: var(--ink-soft);
}
.hero .contact a {
color: var(--ink);
border-bottom: 1px solid var(--accent);
padding-bottom: 1px;
transition: color 0.2s ease;
}
.hero .contact a:hover { color: var(--accent); }
/* Square portrait, desaturated, with a subtle film grain. */
.hero-photo {
position: relative;
flex: 0 0 auto;
width: clamp(190px, 26vw, 300px);
aspect-ratio: 1;
border-radius: var(--radius);
overflow: hidden;
margin: 0;
}
.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.04) brightness(1.02);
}
/* Animated film grain — a tiled noise image drifting in X/Y, like the Framer build. */
.hero-photo::after {
content: "";
position: absolute;
inset: -50%;
width: 200%;
height: 200%;
background: url("../img/grain-noise.png") repeat;
background-size: 200px 200px;
opacity: 0.16;
mix-blend-mode: overlay;
pointer-events: none;
will-change: transform;
animation: grain 3.2s steps(6) infinite;
}
@keyframes grain {
0% { transform: translate(0, 0); }
10% { transform: translate(-4%, -3%); }
20% { transform: translate(3%, 4%); }
30% { transform: translate(-3%, 2%); }
40% { transform: translate(4%, -4%); }
50% { transform: translate(-2%, 3%); }
60% { transform: translate(3%, -2%); }
70% { transform: translate(-4%, 4%); }
80% { transform: translate(2%, -3%); }
90% { transform: translate(-3%, -2%); }
100% { transform: translate(0, 0); }
}
@media (max-width: 600px) {
.hero-lower { flex-direction: column-reverse; align-items: flex-start; }
.hero-photo { width: clamp(160px, 46vw, 240px); }
}
figure.media img, figure.media video { width: 100%; display: block; }
figure.media figcaption {
font-family: var(--font-mono);
font-size: var(--step-meta);
color: var(--ink-soft);
padding: 0.7rem 1rem;
border-top: 1px solid var(--line);
}
/* Process steps: a transparent, chevron-linked row of phases. */
.process-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.process-step {
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.6rem;
}
.process-step h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.2rem;
letter-spacing: -0.01em;
margin: 0 0 0.75rem;
}
.process-step ul { list-style: none; margin: 0; padding: 0; }
.process-step li {
font-size: 1rem;
color: var(--ink-soft);
padding-left: 1rem;
position: relative;
margin-bottom: 0.45rem;
line-height: 1.4;
}
.process-step li::before {
content: "\2022"; /* • */
position: absolute;
left: 0;
color: var(--ink-soft);
opacity: 0.6;
}
@media (max-width: 560px) {
.process-steps { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.process-step { padding: 1.25rem; }
}
/* On phones, zoom the UI gif so it's taller; clip the horizontal overflow
within the wrap, keeping the center in focus. */
@media (max-width: 560px) {
figure.media.ui-gif { overflow: hidden; }
figure.media.ui-gif img {
height: 500px;
width: auto;
max-width: none;
margin-left: 50%;
transform: translateX(-50%);
}
}
/* Challenge cards: a grid of bordered cards. */
.challenge-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.challenge-card {
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.6rem;
}
.challenge-card h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.2rem;
letter-spacing: -0.01em;
margin: 0 0 0.55rem;
}
.challenge-card p {
margin: 0;
color: var(--ink-soft);
font-size: 1rem;
line-height: 1.5;
}
@media (max-width: 820px) { .challenge-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .challenge-cards { grid-template-columns: 1fr; } }
/* Ask-me-anything panel: conversational, programmed replies. */
.ask {
margin: clamp(2rem, 5vw, 3.5rem) auto 0;
background: none;
border: 0;
box-shadow: none;
padding: 0;
}
.ask-head { display: flex; align-items: center; justify-content: flex-start; gap: 0.55rem; }
.ask-head p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; }
.ask-status {
width: 9px; height: 9px; border-radius: 50%; margin-top: 0.35rem;
background: #36b37e; flex: 0 0 auto;
box-shadow: 0 0 0 0 rgba(54, 179, 126, 0.5);
animation: askPulse 2.4s ease-out infinite;
}
@keyframes askPulse {
0% { box-shadow: 0 0 0 0 rgba(54, 179, 126, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(54, 179, 126, 0); }
100% { box-shadow: 0 0 0 0 rgba(54, 179, 126, 0); }
}
.ask-log { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.1rem 0 0; }
.ask-log:empty { margin: 0; }
.ask-bubble {
max-width: 88%;
padding: 0.7rem 0.95rem;
border-radius: 14px;
font-size: 0.95rem;
line-height: 1.5;
animation: askIn 0.28s ease both;
}
.ask-bubble.user {
align-self: flex-end;
background: var(--accent);
color: #fff;
border-bottom-right-radius: 5px;
}
.ask-bubble.bot {
align-self: flex-start;
background: var(--paper-2);
color: var(--ink);
border-bottom-left-radius: 5px;
}
.ask-bubble.bot a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.ask-bubble.typing { color: var(--ink-soft); letter-spacing: 0.15em; }
@keyframes askIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ask-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; margin-top: 1.1rem; }
.ask-chips button {
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.01em;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.5rem 0.85rem;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ask-chips button:hover { border-color: var(--accent); transform: translateY(-1px); }
.ask-form { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.ask-form input {
flex: 1;
font-family: var(--font-body);
font-size: 1.05rem;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 1.05rem 1.4rem;
outline: none;
transition: border-color 0.18s ease;
}
.ask-form input:focus { border-color: var(--accent); }
.ask-form button {
flex: 0 0 auto;
width: 56px;
border: 0;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 1.25rem;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.ask-form button:hover { transform: scale(1.06); }
.ask-footer {
margin: 0.85rem 0 0;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.04em;
color: var(--ink-soft);
opacity: 0.8;
}
/* Ideation: generous space between the four steps. */
.ideation-step { margin-top: clamp(3rem, 7vw, 5.5rem); }
.ideation-step:first-of-type { margin-top: var(--gap); }
.ideation-step > h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--step-h3);
letter-spacing: -0.01em;
margin: 0 0 1.25rem;
}
/* Insights: quotes beside a set of CSS stat rings. */
.insights-split {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
}
.insights-split .prose { max-width: none; }
@media (max-width: 760px) { .insights-split { grid-template-columns: 1fr; } }
.stat-circles {
position: relative;
width: 100%;
max-width: clamp(280px, 34vw, 360px);
margin-inline: auto;
min-height: clamp(250px, 32vw, 320px);
}
.stat-circle {
position: absolute;
width: var(--d);
aspect-ratio: 1;
border-radius: 50%;
border: 8px solid #cdbcf7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.stat-circle.lg { --d: clamp(150px, 21vw, 210px); top: 8%; left: 0; }
.stat-circle.md { --d: clamp(112px, 15vw, 156px); border-color: #e2b6ee; top: 0; right: 0; }
.stat-circle.sm { --d: clamp(104px, 14vw, 142px); border-color: #f4b6d3; bottom: 0; left: 48%; }
.stat-circle .num {
font-family: var(--font-display);
font-weight: 700;
font-size: calc(var(--d) * 0.3);
line-height: 1;
}
.stat-circle .label {
font-family: var(--font-mono);
font-size: calc(var(--d) * 0.085);
letter-spacing: 0.03em;
color: var(--ink-soft);
margin-top: 0.35rem;
}
/* Forecast persona cards: white, soft shadow, no border, side by side. */
.fc-persona {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(26, 24, 22, 0.09);
padding: 2rem 2.25rem 2.25rem;
}
.fc-persona-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.5rem;
}
.fc-persona-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
order: 1;
}
.fc-persona h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4rem;
margin: 0.15rem 0 0;
}
.fc-persona p { margin: 0.85rem 0 0; }
.fc-persona ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.fc-persona li { margin-bottom: 0.4rem; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.fc-persona-quote { color: var(--ink); font-style: italic; margin-top: 1.1rem; }
/* User-story cards: two white cards, then a full-width gradient feature card. */
.story-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
@media (max-width: 760px) { .story-cards { grid-template-columns: 1fr; } }
.story-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(26, 24, 22, 0.09);
padding: 1.85rem 2rem;
}
.story-card--feature {
margin-top: 1.25rem;
background: linear-gradient(135deg, #ece1ff 0%, #f5e0f1 52%, #ffe2ec 100%);
box-shadow: 0 14px 34px rgba(176, 122, 200, 0.2);
padding: 2.25rem 2.5rem;
}
.story-card--feature h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
margin: 0 0 1rem;
}
.story-card--feature p { margin: 0 0 0.85rem; }
.story-card--feature p:last-child { margin-bottom: 0; }
/* "See another project" cards at the foot of each case page. */
.next-head { margin-bottom: var(--gap); }
.next-projects {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
}
@media (max-width: 640px) { .next-projects { grid-template-columns: 1fr; } }
/* Persona card: round avatar beside the bio. */
.persona-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.persona {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 2rem 2.25rem 2.25rem;
box-shadow: 0 1px 3px rgba(26, 24, 22, 0.04);
}
.persona-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.25rem;
}
.persona-id h3 { margin: 0; font-size: 1.45rem; }
.persona-meta { margin: 0.5rem 0 0; }
.persona-avatar { width: 88px; height: 88px; border-radius: 50%; display: block; flex: 0 0 auto; }
.persona-rule { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0; }
.persona-body h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
margin: 0 0 0.75rem;
}
.persona-body h4 + ul { margin-bottom: 1.75rem; }
.persona-body ul { list-style: none; margin: 0; padding: 0; }
.persona-body ul:last-child { margin-bottom: 0; }
.persona-body li {
position: relative;
padding-left: 1.05rem;
color: var(--ink-soft);
margin-bottom: 0.5rem;
line-height: 1.5;
}
.persona-body li:last-child { margin-bottom: 0; }
.persona-body li::before {
content: "\2022";
position: absolute;
left: 0;
opacity: 0.55;
}
@media (max-width: 820px) { .persona-cards { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
.persona { padding: 1.5rem; }
.persona-avatar { width: 68px; height: 68px; }
}
/* ---------- Logo gallery (branding) ---------- */
.logo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
}
.logo-grid .tile {
aspect-ratio: 1 / 1;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
display: grid; place-items: center;
padding: 1.5rem;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.logo-grid .tile:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -24px rgba(26, 24, 22, 0.45);
}
.logo-grid .tile img { max-height: 80%; width: auto; }
/* ---------- Video gallery (motion / 3D) ---------- */
.video-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
}
@media (min-width: 720px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
.video-card { position: relative; }
.video-grid video,
.video-grid img {
width: 100%;
border-radius: var(--radius);
border: 1px solid var(--line);
background: #000;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* Tap-for-sound overlay. Sits on the muted preview; clicking it reveals the
native player controls and unmutes the video. */
.video-sound {
position: absolute;
left: 50%;
bottom: 1rem;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
border: 0;
border-radius: 999px;
cursor: pointer;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
transition: background 0.2s ease, transform 0.2s ease;
}
.video-sound:hover { background: rgba(0, 0, 0, 0.82); transform: translateX(-50%) scale(1.04); }
.video-sound .vs-icon { font-size: 0.85rem; line-height: 1; }
.video-sound.is-hidden { display: none; }
/* ---------- Process strip (how I work / AI) ---------- */
.process {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
margin-top: 1.5rem;
}
@media (min-width: 720px) { .process { grid-template-columns: repeat(3, 1fr); } }
.process .step {
border-top: 2px solid var(--accent);
padding-top: 1rem;
}
.process .step h3 { font-size: var(--step-h3); margin-bottom: 0.35rem; }
.process .step p { color: var(--ink-soft); margin: 0; }
/* ---------- Footer: built with Claude Code ---------- */
.site-footer { font-family: var(--font-mono); font-size: var(--step-meta); }
.site-footer .built a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.site-footer .built a:hover { color: var(--accent); }