/* ============================================================
EJ Jung — Portfolio
style.css
============================================================ */
/* ── FONTS ── */
@font-face {
font-family: 'Adelle';
src: url('assets/fonts/Adelle_Reg.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Adelle';
src: url('assets/fonts/Adelle_light.otf') format('opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Adelle';
src: url('assets/fonts/Adelle_Semibold.otf') format('opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Adelle';
src: url('assets/fonts/Adelle_Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Adelle';
src: url('assets/fonts/Adelle_Italic.otf') format('opentype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Adelle';
src: url('assets/fonts/Adelle_SemiBoldItalic.otf') format('opentype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
/* ── GOOGLE FONTS (DM Sans) ── */
/* Add this in :
*/
/* ── DESIGN TOKENS ── */
:root {
/* Color */
--base-bg: #F8F7F4;
--base-text: #191917;
--mid-text: #6B6B68;
--rule: #D5D4CE;
--rule-light: #E4E3DD;
--white: #FFFFFF;
--track-a: #A24A1E;
--track-b: #2B4C7E;
--track-a-pale: #F5EBE4;
--track-b-pale: #E4EAF3;
/* Typography */
--font-head: 'Adelle', serif;
--font-body: 'DM Sans', sans-serif;
/* Layout */
--max-content: 800px;
--nav-h: 56px;
--nav-w: 220px;
/* Spacing scale */
--sp-micro: 4px;
--sp-tight: 8px;
--sp-close: 12px;
--sp-inner: 16px;
--sp-compact: 24px;
--sp-component:32px;
--sp-block: 48px;
--sp-section: 64px;
--sp-page: 80px;
--sp-hero: 96px;
/* Radius */
--radius-1: 4px;
--radius-2: 8px;
--radius-3: 12px;
--radius-4: 16px;
--radius-card: 6px;
--radius-round: 50%;
/* Border */
--border-thin: 1px;
--border-thick: 2px;
/* Motion */
--motion-drawer: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
--motion-hover: 0.12s ease;
--motion-fade: 0.15s ease;
}
/* ── RESET ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
background-color: var(--base-bg);
color: var(--base-text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
/* ── TRANSITIONS ── */
a, button {
transition: color var(--motion-fade),
background-color var(--motion-fade),
border-color var(--motion-fade),
opacity var(--motion-fade),
box-shadow var(--motion-fade);
}
/* ── FOCUS-VISIBLE ──
Keyboard-only focus ring. Ink at 2px with offset; meets WCAG 2.4.7
against Paper background. The contact-link variant doubles its existing
1px underline into a 2px box-shadow rather than drawing a competing ring. */
:focus-visible {
outline: 2px solid var(--base-text);
outline-offset: 2px;
border-radius: 2px;
}
.contact-link:focus-visible {
outline: none;
box-shadow: 0 2px 0 0 var(--base-text);
border-radius: 0;
}
/* ════════════════════════════════════════
LAYOUT UTILITIES
════════════════════════════════════════ */
.content-wrap {
max-width: var(--max-content);
margin: 0 auto;
padding: 0 var(--sp-page);
}
.content-wrap--wide {
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--sp-page);
}
/* ── SECTION ── */
.ds-section {
padding: var(--sp-page) 0;
}
.ds-section:last-of-type { border-bottom: none; }
/* ── SECTION EYEBROW ── */
.section-eyebrow {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: var(--sp-compact);
}
.section-eyebrow::after {
content: '';
display: block;
height: 1px;
background: var(--rule);
flex: 1;
}
/* ════════════════════════════════════════
TYPOGRAPHY
════════════════════════════════════════ */
/* Hero headline */
.type-hero {
font-family: var(--font-head);
font-size: clamp(37px, 5.7vw, 73px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
}
/* Case study breakpoint headline */
.type-breakpoint {
font-family: var(--font-head);
font-size: clamp(30px, 4.6vw, 58px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
max-width: 680px;
}
/* Section headings */
.type-section-title {
font-family: var(--font-head);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
/* Project names */
.type-project-name {
font-family: var(--font-head);
font-size: 25px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.01em;
}
/* Ruled headline (mid-scale display) */
.type-ruled-headline {
font-family: var(--font-head);
font-size: clamp(23px, 2.9vw, 37px);
font-weight: 400;
line-height: 1.10;
letter-spacing: -0.01em;
}
/* Overlines & track labels */
.type-overline {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
}
/* Body copy */
.type-body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.75;
color: var(--mid-text);
max-width: 560px;
}
/* Nav / UI text */
.type-nav {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--mid-text);
}
.type-nav:hover { color: var(--base-text); }
/* Captions & metadata */
.type-caption {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--mid-text);
}
/* ════════════════════════════════════════
TAGS & LABELS
════════════════════════════════════════ */
.tag {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border-radius: 3px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.tag:hover { opacity: 0.75; }
.tag-a { background: var(--track-a-pale); color: var(--track-a); }
.tag-b { background: var(--track-b-pale); color: var(--track-b); }
.tag-n { background: #EEECEA; color: var(--mid-text); }
.tag-ink { background: var(--base-text); color: var(--base-bg); }
.track-label {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border-radius: 2px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.track-label-a { background: var(--track-a-pale); color: var(--track-a); }
.track-label-b { background: var(--track-b-pale); color: var(--track-b); }
/* ════════════════════════════════════════
BRIDGE RULES
════════════════════════════════════════ */
.bridge-rule {
height: 1px;
background: var(--base-text);
width: 100%;
margin: 28px 0;
}
.bridge-rule-short {
height: 1px;
background: var(--base-text);
width: 56px;
margin: 28px 0;
}
.bridge-rule-accent {
height: 1px;
background: var(--track-a);
width: 100%;
margin: var(--sp-compact) 0;
}
.rule { height: 1px; background: var(--rule); width: 100%; }
.rule-light { height: 1px; background: var(--rule-light); width: 100%; }
/* ════════════════════════════════════════
NAVIGATION
════════════════════════════════════════ */
.site-nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-h);
padding: 0 var(--sp-component);
border-bottom: 1px solid var(--rule);
background: var(--base-bg);
/* subtle backdrop blur for depth */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.site-nav-name {
display: inline-flex;
align-items: center;
color: var(--base-text);
}
.site-nav-logo {
display: block;
height: 22px;
width: auto;
}
.site-nav-links {
display: flex;
align-items: center;
gap: 28px;
}
.site-nav-link {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--mid-text);
transition: color var(--motion-hover);
}
.site-nav-link:hover { color: var(--base-text); }
.site-nav-link.active { color: var(--track-a); }
/* ════════════════════════════════════════
HERO — HOME
════════════════════════════════════════ */
.hero {
padding: var(--sp-hero) 0 var(--sp-section);
border-bottom: 1px solid var(--rule);
}
.hero-kicker {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
margin-bottom: var(--sp-compact);
}
.hero-headline {
font-family: var(--font-head);
font-size: clamp(37px, 5.7vw, 73px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: var(--sp-block);
max-width: 700px;
}
.hero-sub {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.75;
color: var(--mid-text);
max-width: 480px;
margin-bottom: var(--sp-compact);
}
.hero-meta {
display: flex;
align-items: center;
gap: var(--sp-compact);
flex-wrap: wrap;
}
/* ════════════════════════════════════════
TRACK INTRO BLOCK — two-column
════════════════════════════════════════ */
.track-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
margin-bottom: var(--sp-block);
}
.track-intro-col {
background: var(--white);
padding: var(--sp-block) var(--sp-block) var(--sp-compact);
}
.track-intro-col + .track-intro-col {
border-left: none; /* gap handles it */
}
.track-intro-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: var(--sp-inner);
}
.track-intro-label.a { color: var(--track-a); }
.track-intro-label.b { color: var(--track-b); }
.track-intro-name {
font-family: var(--font-head);
font-size: 25px;
font-weight: 400;
line-height: 1.2;
margin-bottom: var(--sp-close);
}
.track-intro-desc {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
line-height: 1.7;
}
/* ════════════════════════════════════════
PROJECT CARD
════════════════════════════════════════ */
.works-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-inner);
}
.project-card {
background: var(--white);
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
display: flex;
flex-direction: column;
}
.project-card:hover {
border-color: var(--base-text);
box-shadow: 0 4px 24px rgba(25, 25, 23, 0.06);
}
/* Thumbnail */
.project-card-thumb {
height: 160px;
background: var(--base-bg);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--rule);
position: relative;
overflow: hidden;
}
.project-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Dot-grid texture — add to a child element inside thumb */
.project-card-thumb-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--rule) 1px, transparent 1px);
background-size: 18px 18px;
opacity: 0.55;
pointer-events: none;
}
/* Amber left border accent on thumb for Track A */
.project-card--a .project-card-thumb::after {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--track-a);
}
/* Navy left border accent on thumb for Track B */
.project-card--b .project-card-thumb::after {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--track-b);
}
.project-card-body { padding: var(--sp-compact) var(--sp-component) var(--sp-component); flex: 1; display: flex; flex-direction: column; }
.project-card-track { margin-bottom: var(--sp-inner); display: flex; align-items: center; gap: var(--sp-tight); flex-wrap: wrap; }
.project-card-title {
font-family: var(--font-head);
font-size: 25px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--base-text);
margin-bottom: var(--sp-tight);
}
.project-card-role {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mid-text);
margin-bottom: var(--sp-inner);
}
.project-card-excerpt {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
line-height: 1.7;
margin-bottom: var(--sp-compact);
flex: 1;
}
.project-card-tags { display: flex; flex-wrap: wrap; gap: var(--sp-tight); }
/* Featured card — full-width horizontal layout */
.project-card--featured {
grid-column: 1 / -1;
flex-direction: row;
}
.project-card--featured .project-card-thumb {
width: 42%;
flex-shrink: 0;
height: auto;
min-height: 220px;
border-bottom: none;
border-right: 1px solid var(--rule);
}
.project-card--featured .project-card-body {
padding: var(--sp-block) var(--sp-block) var(--sp-component);
}
.project-card--featured .project-card-title {
font-size: 32px;
}
.project-card--featured .project-card-excerpt {
font-size: 15px;
line-height: 1.75;
max-width: 520px;
}
/* In-progress badge — sits in card track row alongside track label */
.badge-wip {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border-radius: 2px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: #EEECEA;
color: var(--mid-text);
}
@media (max-width: 860px) {
.project-card--featured {
flex-direction: column;
}
.project-card--featured .project-card-thumb {
width: 100%;
min-height: 160px;
border-right: none;
border-bottom: 1px solid var(--rule);
}
}
/* ════════════════════════════════════════
BREAKPOINT GRID BLOCK
════════════════════════════════════════ */
.bp-block {
container-type: inline-size;
background: var(--white);
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
min-height: 360px;
margin: var(--sp-block) 0;
}
@container (min-width: 560px) {
.bp-block { grid-template-columns: 1fr 1fr; }
.bp-block-left { border-right: 1px solid var(--rule); border-bottom: none; }
}
.bp-block-left {
padding: var(--sp-block) var(--sp-component) var(--sp-block) var(--sp-block);
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bp-block-right {
padding: var(--sp-block) var(--sp-block) var(--sp-block) var(--sp-component);
background: var(--base-bg);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--sp-tight);
}
.bp-block-eyebrow {
font-family: var(--font-body);
font-size: 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
margin-bottom: var(--sp-compact);
}
.bp-headline-ruled {
font-family: var(--font-head);
font-size: clamp(23px, 2.9vw, 37px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
padding-bottom: var(--sp-inner);
border-bottom: 1px solid var(--rule);
margin-bottom: var(--sp-compact);
}
.bp-block-body {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
line-height: 1.75;
}
.bp-role-line {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--base-text);
margin-bottom: 6px;
}
.bp-project-name {
font-family: var(--font-head);
font-size: 25px;
color: var(--base-text);
margin-bottom: var(--sp-inner);
}
/* ════════════════════════════════════════
CASE STUDY — PAGE LAYOUT
════════════════════════════════════════ */
/* ── Option A Hero (color-block split) ── */
.cs-hero-a {
border-bottom: 1px solid var(--rule);
}
.cs-hero-a-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
min-height: 320px;
}
.cs-hero-a-left {
background: #d1045f;
padding: var(--sp-section) var(--sp-page);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--sp-block);
}
.cs-hero-a-eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #f8b8d4;
margin-bottom: var(--sp-compact);
}
.cs-hero-a-title {
font-family: var(--font-head);
font-size: clamp(44px, 5.5vw, 72px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.02em;
color: #ffffff;
}
.cs-hero-a-subtitle {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
line-height: 1.65;
color: #f4d0e2;
margin-top: var(--sp-compact);
max-width: 400px;
}
.cs-hero-a-role {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #e87aac;
}
.cs-hero-a-right {
background: #faf8f4;
padding: var(--sp-section) var(--sp-page);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--sp-block);
}
.cs-hero-a-quote {
font-family: var(--font-head);
font-size: 16px;
font-weight: 400;
font-style: italic;
color: #2a2520;
line-height: 1.7;
border: none;
padding: 0;
margin: 0;
}
.cs-hero-a-cite {
display: block;
font-family: var(--font-body);
font-size: 11px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9a8f7e;
margin-top: var(--sp-inner);
}
.cs-hero-a-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: #e0d9ce;
border: 1px solid #e0d9ce;
border-radius: var(--radius-2);
overflow: hidden;
}
.cs-hero-a-meta-item {
background: #faf8f4;
padding: var(--sp-close) var(--sp-inner);
}
.cs-hero-a-meta-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #9a8f7e;
}
.cs-hero-a-meta-value {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: #2a2520;
margin-top: 4px;
}
.cs-hero-a-meta-accent {
color: #d1045f;
}
/* Fixli case theme */
.case-fixli {
--track-a: #336983;
--track-a-pale: #E8F0F3;
}
.case-fixli .cs-hero-a-left {
background: #336983;
}
.case-fixli .cs-hero-a-eyebrow {
color: #F2C9C0;
}
.case-fixli .cs-hero-a-title {
color: #F8F7F4;
}
.case-fixli .cs-hero-a-subtitle {
color: #DCE9EE;
}
.case-fixli .cs-hero-a-right,
.case-fixli .cs-hero-a-meta-item {
background: #FAF7F2;
}
.case-fixli .cs-hero-a-quote,
.case-fixli .cs-hero-a-meta-value {
color: #20343D;
}
.case-fixli .cs-hero-a-cite,
.case-fixli .cs-hero-a-meta-label {
color: #667D87;
}
.case-fixli .cs-hero-a-meta {
background: #D8E2E6;
border-color: #D8E2E6;
}
.case-fixli .cs-hero-a-meta-accent {
color: #E3917E;
}
.case-fixli .tag-a {
background: #E8F0F3;
color: #336983;
}
/* ── Option B Hero (institutional ledger) ── */
.cs-hero-b {
padding: var(--sp-section) 0;
border-bottom: 1px solid var(--rule);
background: var(--base-bg);
}
.cs-hero-b-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
gap: var(--sp-block);
align-items: stretch;
}
.cs-hero-b-main {
display: grid;
grid-template-columns: 4px minmax(0, 1fr);
column-gap: var(--sp-component);
align-content: start;
}
.cs-hero-b-rail {
background: var(--track-b);
border-radius: var(--radius-2);
}
.cs-hero-b-content {
padding-top: 2px;
}
.cs-hero-b-eyebrow {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--track-b);
margin-bottom: var(--sp-compact);
}
.cs-hero-b-title {
font-family: var(--font-head);
font-size: clamp(34px, 5vw, 62px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--base-text);
max-width: 760px;
}
.cs-hero-b-summary {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.75;
color: var(--mid-text);
max-width: 600px;
margin-top: var(--sp-compact);
}
.cs-hero-b-role {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
margin-top: var(--sp-block);
}
.cs-hero-b-ledger {
align-self: end;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--radius-3);
display: grid;
grid-template-columns: 1fr;
overflow: hidden;
}
.cs-hero-b-ledger-item {
padding: var(--sp-inner) var(--sp-compact);
border-bottom: 1px solid var(--rule);
}
.cs-hero-b-ledger-item:last-child {
border-bottom: none;
}
.cs-hero-b-ledger-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
}
.cs-hero-b-ledger-value {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: 1.45;
color: var(--base-text);
margin-top: 5px;
}
.cs-hero-b-ledger-value.accent-b {
color: var(--track-b);
}
@media (max-width: 1024px) {
.cs-hero-b-grid { grid-template-columns: 1fr; gap: var(--sp-block); }
.cs-hero-b-ledger { align-self: stretch; }
}
/* ── Case-study signature artifact band ── */
.case-signature {
padding: var(--sp-block) 0;
border-bottom: 1px solid var(--rule);
background: color-mix(in srgb, var(--base-bg) 88%, var(--white));
}
.signature-grid {
display: grid;
grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
gap: var(--sp-block);
align-items: start;
}
.signature-kicker {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mid-text);
margin-bottom: var(--sp-inner);
}
.signature-title {
font-family: var(--font-head);
font-size: clamp(24px, 3vw, 36px);
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--base-text);
max-width: 360px;
}
.signature-copy {
margin-top: var(--sp-inner);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.75;
color: var(--mid-text);
max-width: 360px;
}
.signature-artifact {
border: 1px solid var(--rule);
border-radius: var(--radius-card);
background: var(--white);
overflow: hidden;
}
.signature-artifact-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-inner);
padding: var(--sp-inner) var(--sp-compact);
border-bottom: 1px solid var(--rule);
background: var(--base-bg);
}
.signature-artifact-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
}
.signature-artifact-note {
font-family: var(--font-body);
font-size: 13px;
color: var(--mid-text);
}
.trust-flow {
display: grid;
grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
gap: 0;
padding: var(--sp-compact);
background:
linear-gradient(90deg, rgba(51,105,131,0.08), transparent 48%, rgba(201,104,81,0.08)),
#F9FBFA;
}
.trust-flow-side {
border: 1px solid rgba(51,105,131,0.2);
background: rgba(250,247,242,0.86);
padding: var(--sp-compact);
}
.trust-flow-side:last-child {
border-color: rgba(201,104,81,0.28);
}
.trust-flow-persona {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #667D87;
margin-bottom: var(--sp-inner);
}
.trust-flow-side:last-child .trust-flow-persona {
color: #A45E4F;
}
.trust-flow-question {
font-family: var(--font-head);
font-size: 21px;
font-weight: 400;
line-height: 1.22;
color: #20343D;
margin-bottom: var(--sp-inner);
}
.trust-flow-list {
display: grid;
gap: var(--sp-tight);
}
.trust-flow-list li {
display: flex;
align-items: flex-start;
gap: var(--sp-tight);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: #4B626B;
}
.trust-flow-list li::before {
content: "";
width: 6px;
height: 6px;
margin-top: 7px;
border-radius: 50%;
background: #336983;
flex: 0 0 auto;
}
.trust-flow-side:last-child .trust-flow-list li::before {
background: #C96851;
}
.trust-flow-center {
display: grid;
place-items: center;
position: relative;
}
.trust-flow-center::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: rgba(32,52,61,0.24);
}
.trust-flow-node {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 72px;
height: 72px;
padding: var(--sp-tight);
border: 1px solid rgba(32,52,61,0.2);
border-radius: 50%;
background: var(--base-bg);
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.08em;
text-align: center;
text-transform: uppercase;
color: #20343D;
}
.access-matrix {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr 0.9fr;
border-top: 1px solid var(--rule);
border-left: 1px solid var(--rule);
margin: var(--sp-compact);
}
.access-matrix > div {
min-height: 72px;
padding: var(--sp-inner);
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: #FCFBF8;
}
.access-matrix .matrix-head {
min-height: auto;
background: var(--track-b-pale);
color: var(--track-b);
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.matrix-cell-title {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
color: var(--base-text);
}
.matrix-cell-note {
display: block;
margin-top: 4px;
font-family: var(--font-body);
font-size: 12px;
line-height: 1.45;
color: var(--mid-text);
}
.system-stack {
display: grid;
gap: var(--sp-tight);
padding: var(--sp-compact);
background:
linear-gradient(#F8F7F4 1px, transparent 1px),
linear-gradient(90deg, #F8F7F4 1px, transparent 1px),
#FCFBF8;
background-size: 22px 22px;
}
.stack-layer {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) auto;
gap: var(--sp-inner);
align-items: center;
padding: var(--sp-inner);
border: 1px solid var(--rule);
background: rgba(255,255,255,0.9);
}
.stack-layer-name {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--track-b);
}
.stack-layer-desc {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: var(--mid-text);
}
.stack-chip {
padding: 4px 8px;
border-radius: 3px;
background: var(--track-b-pale);
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--track-b);
white-space: nowrap;
}
.pipeline-model {
padding: var(--sp-compact);
background: #FCFBF8;
}
.pipeline-track {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--sp-tight);
margin-bottom: var(--sp-compact);
}
.pipeline-step {
position: relative;
min-height: 118px;
padding: var(--sp-inner);
border: 1px solid var(--rule);
background: var(--white);
}
.pipeline-step:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: calc(-1 * var(--sp-tight));
width: var(--sp-tight);
border-top: 1px solid var(--rule);
}
.pipeline-index {
display: block;
margin-bottom: var(--sp-close);
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--track-b);
}
.pipeline-name {
display: block;
font-family: var(--font-head);
font-size: 18px;
line-height: 1.18;
color: var(--base-text);
}
.pipeline-status {
display: inline-flex;
margin-top: var(--sp-close);
padding: 3px 7px;
border-radius: 3px;
background: var(--track-b-pale);
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--track-b);
}
.pipeline-status--attention {
background: var(--track-a-pale);
color: var(--track-a);
}
.pipeline-table {
border: 1px solid var(--rule);
background: var(--white);
}
.pipeline-row {
display: grid;
grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, 1fr);
gap: var(--sp-inner);
padding: var(--sp-close) var(--sp-inner);
border-bottom: 1px solid var(--rule-light);
font-family: var(--font-body);
font-size: 13px;
color: var(--mid-text);
}
.pipeline-row:last-child {
border-bottom: none;
}
.pipeline-row strong {
color: var(--base-text);
font-weight: 600;
}
/* Yerbba scan anchors */
.case-yerbba .tag-n {
background: #F4E8E5;
color: #7B5146;
}
.case-yerbba .bp-role-line,
.case-yerbba .cs-body h2,
.case-yerbba .cs-accordion-summary h3 {
color: var(--track-a);
}
.case-yerbba .bridge-rule--cs-end {
background: #D9A08D;
}
.case-yerbba .signature-artifact {
background: #FFFDFC;
}
.anchor-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
margin: 0 0 var(--sp-inner);
}
.yerbba-service-model {
padding: var(--sp-compact);
background:
linear-gradient(#F7EFEC 1px, transparent 1px),
linear-gradient(90deg, #F7EFEC 1px, transparent 1px),
#FFFDFC;
background-size: 24px 24px;
}
.yerbba-service-track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-tight);
list-style: none;
padding: 0;
margin: 0;
}
.yerbba-service-track li {
position: relative;
min-height: 180px;
padding: var(--sp-inner);
border: 1px solid #E7CFC5;
background: rgba(255, 255, 255, 0.92);
}
.yerbba-service-track li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -9px;
width: 16px;
border-top: 1px solid #C77F66;
z-index: 1;
}
.service-step-index {
display: block;
margin-bottom: var(--sp-close);
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--track-a);
}
.yerbba-service-track strong {
display: block;
font-family: var(--font-head);
font-size: 21px;
font-weight: 400;
line-height: 1.15;
color: var(--base-text);
}
.yerbba-service-track span:last-child {
display: block;
margin-top: var(--sp-close);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: var(--mid-text);
}
.yerbba-translation-gap,
.decision-anchor,
.clinical-state-board {
margin: var(--sp-block) 0;
padding: var(--sp-compact);
border: 1px solid var(--rule);
border-radius: var(--radius-card);
background: var(--white);
}
.translation-gap-grid {
display: grid;
grid-template-columns: minmax(160px, 0.9fr) 56px minmax(150px, 0.95fr) 48px minmax(150px, 0.9fr);
gap: 0;
align-items: center;
}
.translation-gap-inputs {
display: grid;
gap: var(--sp-tight);
}
.translation-node {
padding: var(--sp-inner);
border: 1px solid #E7CFC5;
border-radius: var(--radius-card);
background: #FFFDFC;
}
.translation-node strong {
display: block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
color: var(--base-text);
}
.translation-node span {
display: block;
margin-top: 6px;
font-family: var(--font-body);
font-size: 12px;
line-height: 1.55;
color: var(--mid-text);
}
.translation-node--gap {
background: #FFF9F0;
border-color: #E5D9C8;
}
.translation-node--answer {
border-color: #C77F66;
background: #FDF5F2;
}
.translation-node--answer strong {
color: var(--track-a);
}
.translation-gap-arrow {
position: relative;
height: 1px;
margin: 0 var(--sp-tight);
background: rgba(199, 127, 102, 0.6);
}
.translation-gap-arrow::before,
.translation-gap-arrow::after {
content: "";
position: absolute;
right: 0;
width: 9px;
border-top: 1px solid rgba(199, 127, 102, 0.7);
transform-origin: right center;
}
.translation-gap-arrow::before {
transform: rotate(35deg);
}
.translation-gap-arrow::after {
transform: rotate(-35deg);
}
.translation-gap-arrow:not(.translation-gap-arrow--single) {
align-self: stretch;
height: auto;
margin: 0 var(--sp-inner);
background: none;
}
.translation-gap-arrow:not(.translation-gap-arrow--single)::before {
top: 26%;
left: 0;
right: auto;
width: 100%;
transform: rotate(32deg);
}
.translation-gap-arrow:not(.translation-gap-arrow--single)::after {
bottom: 26%;
left: 0;
right: auto;
width: 100%;
transform: rotate(-32deg);
}
.decision-anchor {
display: grid;
grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
gap: var(--sp-compact);
align-items: start;
background:
linear-gradient(90deg, rgba(162, 74, 30, 0.07), transparent 42%),
var(--white);
}
.decision-anchor-copy h3 {
margin: 0 0 var(--sp-inner);
font-family: var(--font-head);
font-size: clamp(24px, 3vw, 34px);
font-weight: 400;
line-height: 1.14;
color: var(--base-text);
}
.decision-anchor-copy p:last-child {
max-width: 420px;
margin-bottom: 0;
}
.decision-anchor-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid var(--rule);
background: var(--rule);
}
.decision-anchor-steps li {
min-height: 132px;
padding: var(--sp-inner);
background: #FFFDFC;
}
.decision-anchor-steps strong {
display: block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--track-a);
}
.decision-anchor-steps span {
display: block;
margin-top: var(--sp-tight);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: var(--mid-text);
}
.cs-outcome-row--compact .cs-outcome-cell {
padding: var(--sp-component) var(--sp-compact);
}
.cs-outcome-row--compact .cs-outcome-number {
font-size: 28px;
}
.clinical-state-board {
background:
linear-gradient(#F8F7F4 1px, transparent 1px),
linear-gradient(90deg, #F8F7F4 1px, transparent 1px),
#FCFBF8;
background-size: 22px 22px;
}
.clinical-state-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sp-tight);
}
.clinical-state {
min-height: 150px;
padding: var(--sp-inner);
border: 1px solid var(--rule);
background: rgba(255, 255, 255, 0.92);
}
.clinical-state strong {
display: block;
margin-bottom: var(--sp-tight);
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--track-a);
}
.clinical-state span {
display: block;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: var(--mid-text);
}
.clinical-state--stable { border-color: #D7BBAF; }
.clinical-state--partial { border-color: #D8C8A6; }
.clinical-state--missing { border-color: #D1D0CA; }
.clinical-state--delayed { border-color: #C6CED8; }
.clinical-state--updated { border-color: #D9A08D; }
.case-fixli .tag-n {
background: #F6E4DF;
color: #7A554D;
}
.case-fixli .bp-role-line,
.case-fixli .cs-body h2 {
color: #336983;
}
.case-fixli .cs-accordion-summary h3 {
color: #C96851;
}
.case-fixli .bridge-rule--cs-end {
background: #E3917E;
}
.case-fixli .img-placeholder {
background: #F4F8F9;
border-color: #B8CDD6;
color: #336983;
}
.case-fixli .trust-map {
position: relative;
min-height: 360px;
padding: clamp(24px, 4vw, 40px);
background:
linear-gradient(90deg, rgba(51, 105, 131, 0.08), transparent 42%, rgba(201, 104, 81, 0.08)),
#F9FBFA;
overflow: hidden;
}
.case-fixli .trust-map::before {
content: none;
}
.case-fixli .trust-map-kicker {
margin-bottom: 8px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #667D87;
}
.case-fixli .trust-map-head {
position: relative;
z-index: 1;
max-width: 460px;
margin-bottom: clamp(24px, 4vw, 36px);
}
.case-fixli .trust-map-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
align-items: stretch;
gap: 0;
}
.case-fixli .trust-map-side {
display: flex;
flex-direction: column;
min-height: 220px;
padding: 24px;
border: 1px solid rgba(51, 105, 131, 0.22);
background: rgba(250, 247, 242, 0.82);
}
.case-fixli .trust-map-side--homeowner {
border-radius: 8px 0 0 8px;
}
.case-fixli .trust-map-side--provider {
border-color: rgba(201, 104, 81, 0.28);
border-radius: 0 8px 8px 0;
}
.case-fixli .trust-map-card-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.case-fixli .trust-map-avatar {
flex: 0 0 auto;
width: 54px;
height: 54px;
object-fit: contain;
}
.case-fixli .trust-map-moment {
margin: 0;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #667D87;
}
.case-fixli .trust-map-side--provider .trust-map-moment {
color: #A45E4F;
}
.case-fixli .trust-map-side h3 {
margin-bottom: 18px;
font-family: var(--font-head);
font-size: 20px;
font-weight: 400;
line-height: 1.25;
color: #20343D;
}
.case-fixli .trust-map-list {
display: grid;
gap: 9px;
margin: auto 0 0;
padding: 0;
list-style: none;
}
.case-fixli .trust-map-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.45;
color: #4B626B;
}
.case-fixli .trust-map-list li::before {
content: '';
flex: 0 0 auto;
width: 6px;
height: 6px;
margin-top: 7px;
border-radius: 50%;
background: #336983;
}
.case-fixli .trust-map-side--provider .trust-map-list li::before {
background: #C96851;
}
.case-fixli .trust-map-center {
position: relative;
display: grid;
place-items: center;
}
.case-fixli .trust-map-node {
position: relative;
z-index: 2;
display: grid;
place-items: center;
width: 104px;
height: 104px;
padding: 16px;
border: 1px solid rgba(32, 52, 61, 0.22);
border-radius: 50%;
background: #F8F7F4;
box-shadow: 0 10px 28px rgba(32, 52, 61, 0.08);
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.08em;
text-align: center;
text-transform: uppercase;
color: #20343D;
}
.case-fixli .trust-map-line {
position: absolute;
top: 50%;
width: 56px;
height: 1px;
background: rgba(32, 52, 61, 0.26);
}
.case-fixli .trust-map-line--left {
right: 56px;
}
.case-fixli .trust-map-line--right {
left: 56px;
}
.case-fixli .approach-flow {
padding: clamp(24px, 4vw, 40px);
background: #F9FBFA;
}
.case-fixli .approach-flow-track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.case-fixli .approach-flow-step {
position: relative;
display: grid;
justify-items: center;
align-content: center;
gap: 18px;
min-height: 180px;
padding: 24px 16px;
border: 1px solid rgba(51, 105, 131, 0.18);
border-radius: 8px;
background: rgba(250, 247, 242, 0.72);
}
.case-fixli .approach-flow-step:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: -13px;
z-index: 2;
width: 14px;
height: 1px;
background: rgba(32, 52, 61, 0.28);
}
.case-fixli .approach-flow-icon {
position: relative;
display: block;
width: 58px;
height: 58px;
border: 1px solid rgba(51, 105, 131, 0.22);
border-radius: 50%;
background: #F8F7F4;
}
.case-fixli .approach-flow-icon::before,
.case-fixli .approach-flow-icon::after {
content: '';
position: absolute;
display: block;
}
.case-fixli .approach-flow-icon--describe::before {
inset: 16px 13px;
border: 2px solid #336983;
border-radius: 5px;
}
.case-fixli .approach-flow-icon--describe::after {
top: 20px;
left: 18px;
width: 22px;
height: 2px;
background: #E3917E;
box-shadow: 0 7px 0 rgba(51, 105, 131, 0.42);
}
.case-fixli .approach-flow-icon--clarify::before {
top: 14px;
left: 14px;
width: 30px;
height: 24px;
border: 2px solid #336983;
border-radius: 12px 12px 12px 3px;
}
.case-fixli .approach-flow-icon--clarify::after {
right: 13px;
bottom: 13px;
width: 14px;
height: 14px;
border-right: 2px solid #E3917E;
border-bottom: 2px solid #E3917E;
transform: rotate(45deg);
}
.case-fixli .approach-flow-icon--compare::before {
top: 15px;
left: 13px;
width: 13px;
height: 28px;
border-radius: 999px;
background: rgba(51, 105, 131, 0.22);
box-shadow: 19px 0 0 rgba(227, 145, 126, 0.34);
}
.case-fixli .approach-flow-icon--compare::after {
top: 25px;
left: 12px;
width: 34px;
height: 1px;
background: rgba(32, 52, 61, 0.38);
}
.case-fixli .approach-flow-icon--decide::before {
top: 15px;
left: 17px;
width: 25px;
height: 25px;
border: 2px solid #336983;
border-radius: 50%;
}
.case-fixli .approach-flow-icon--decide::after {
top: 23px;
left: 23px;
width: 15px;
height: 8px;
border-left: 2px solid #E3917E;
border-bottom: 2px solid #E3917E;
transform: rotate(-45deg);
}
.case-fixli .approach-flow-title {
max-width: 120px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
line-height: 1.28;
text-align: center;
color: #20343D;
}
.case-fixli .mobile-flow {
padding: clamp(18px, 3vw, 28px);
background: #F9FBFA;
}
.case-fixli .mobile-flow-track {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
border-radius: 8px;
overflow: visible;
}
.case-fixli .mobile-flow-step {
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
justify-items: center;
min-height: 224px;
padding: 12px 4px 10px;
background: transparent;
}
.case-fixli .mobile-flow-step:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: -6px;
z-index: 2;
width: 12px;
height: 12px;
border-top: 1px solid rgba(51, 105, 131, 0.36);
border-right: 1px solid rgba(51, 105, 131, 0.36);
background: #F9FBFA;
transform: translateY(-50%) rotate(45deg);
}
.case-fixli .mobile-flow-index {
justify-self: start;
margin-bottom: 14px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: #667D87;
}
.case-fixli .mobile-flow-device {
display: block;
width: min(76px, 100%);
aspect-ratio: 9 / 16;
padding: 7px 5px;
border: 1px solid rgba(32, 52, 61, 0.18);
border-radius: 14px;
background: #20343D;
box-shadow: 0 12px 24px rgba(32, 52, 61, 0.08);
}
.case-fixli .mobile-flow-screen {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
width: 100%;
height: 100%;
padding: 13px 7px 8px;
border-radius: 10px;
background: #F8F7F4;
}
.case-fixli .mobile-flow-label {
margin-top: 12px;
max-width: 96px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
line-height: 1.28;
text-align: center;
color: #20343D;
}
.case-fixli .mobile-flow-icon--camera {
position: relative;
width: 42px;
height: 34px;
margin-top: 10px;
border: 2px solid #336983;
border-radius: 8px;
}
.case-fixli .mobile-flow-icon--camera::before {
content: '';
position: absolute;
top: -6px;
left: 9px;
width: 14px;
height: 6px;
border-radius: 4px 4px 0 0;
background: #336983;
}
.case-fixli .mobile-flow-icon--camera::after {
content: '';
position: absolute;
top: 9px;
left: 13px;
width: 12px;
height: 12px;
border: 2px solid #E3917E;
border-radius: 50%;
}
.case-fixli .mobile-flow-line,
.case-fixli .mobile-flow-choice,
.case-fixli .mobile-flow-question,
.case-fixli .mobile-flow-answer,
.case-fixli .mobile-flow-pro {
display: block;
height: 7px;
border-radius: 999px;
background: rgba(51, 105, 131, 0.18);
}
.case-fixli .mobile-flow-line {
width: 40px;
}
.case-fixli .mobile-flow-line--wide {
width: 48px;
margin-top: auto;
}
.case-fixli .mobile-flow-choice {
width: 48px;
height: 19px;
border: 1px solid rgba(51, 105, 131, 0.2);
background: rgba(51, 105, 131, 0.08);
}
.case-fixli .mobile-flow-choice--selected {
border-color: rgba(201, 104, 81, 0.48);
background: rgba(227, 145, 126, 0.22);
}
.case-fixli .mobile-flow-question {
width: 48px;
height: 26px;
border-radius: 10px 10px 10px 2px;
background: rgba(51, 105, 131, 0.18);
}
.case-fixli .mobile-flow-answer {
align-self: flex-end;
width: 42px;
height: 19px;
border-radius: 10px 10px 2px 10px;
background: rgba(227, 145, 126, 0.28);
}
.case-fixli .mobile-flow-answer--short {
width: 30px;
}
.case-fixli .mobile-flow-quote {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-top: 8px;
border-radius: 50%;
background: rgba(227, 145, 126, 0.24);
font-family: var(--font-head);
font-size: 26px;
line-height: 1;
color: #C96851;
}
.case-fixli .mobile-flow-pro {
position: relative;
width: 48px;
height: 22px;
border-radius: 6px;
background: rgba(51, 105, 131, 0.1);
}
.case-fixli .mobile-flow-pro::before {
content: '';
position: absolute;
top: 7px;
left: 7px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #336983;
}
.case-fixli .mobile-flow-pro::after {
content: '';
position: absolute;
top: 8px;
left: 21px;
width: 19px;
height: 6px;
border-radius: 999px;
background: rgba(51, 105, 131, 0.32);
}
/* Metadata strip */
.cs-meta-strip {
display: flex;
gap: 0;
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
margin: var(--sp-block) 0;
}
.cs-meta-item {
flex: 1;
padding: var(--sp-inner) var(--sp-compact);
border-right: 1px solid var(--rule);
background: var(--white);
}
.cs-meta-item:last-child { border-right: none; }
.cs-meta-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
margin-bottom: var(--sp-tight);
}
.cs-meta-value {
font-family: var(--font-body);
font-size: 14px;
color: var(--base-text);
line-height: 1.5;
}
.cs-meta-value.accent-a { color: var(--track-a); }
.cs-meta-value.accent-b { color: var(--track-b); }
/* Case study content area */
.cs-body {
padding: var(--sp-section) 0;
}
.cs-body p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.8;
color: var(--mid-text);
max-width: 600px;
margin-bottom: var(--sp-compact);
}
.cs-body h2 {
font-family: var(--font-head);
font-size: 24px;
font-weight: 400;
line-height: 1.2;
color: var(--base-text);
margin-top: var(--sp-section);
margin-bottom: var(--sp-compact);
}
.cs-body h3 {
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mid-text);
margin-top: var(--sp-block);
margin-bottom: var(--sp-inner);
}
.cs-body ul {
list-style: disc;
padding-left: 1.25em;
max-width: 600px;
margin-bottom: var(--sp-compact);
}
.cs-body ul li {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.8;
color: var(--mid-text);
margin-bottom: 4px;
}
.cs-body blockquote {
margin: var(--sp-block) 0;
padding: 0;
font-family: var(--font-head);
font-size: 20px;
font-style: italic;
font-weight: 400;
line-height: 1.4;
color: var(--base-text);
max-width: 600px;
}
/* Image/media block inside case study */
.cs-media {
background: var(--white);
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
margin: var(--sp-block) 0;
}
.cs-media img { width: 100%; display: block; }
.cs-media--wide {
width: min(1100px, calc(100vw - (var(--sp-page) * 2)));
margin-left: 50%;
transform: translateX(-50%);
}
.cs-media-cap {
padding: var(--sp-inner) var(--sp-compact);
border-top: 1px solid var(--rule);
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
letter-spacing: 0.03em;
}
/* File Service current-state workflow visual */
.file-workflow-visual {
padding: var(--sp-component);
background:
linear-gradient(90deg, rgba(43, 76, 126, 0.04), transparent 34%, transparent 66%, rgba(25, 25, 23, 0.035)),
var(--white);
}
.workflow-lane {
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--sp-compact);
align-items: start;
}
.workflow-lane-label {
margin: 0;
max-width: none;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.4;
text-transform: uppercase;
color: var(--mid-text);
}
.workflow-lane--user .workflow-lane-label {
color: var(--track-b);
}
.workflow-steps {
list-style: none;
display: grid;
grid-template-columns: repeat(6, minmax(112px, 1fr));
gap: var(--sp-close);
margin: 0;
padding: 0;
counter-reset: workflow-step;
align-items: start;
}
.workflow-steps li {
position: relative;
min-height: 58px;
padding: 28px 14px 0 0;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
line-height: 1.35;
color: var(--base-text);
counter-increment: workflow-step;
}
.workflow-steps li::before {
content: counter(workflow-step);
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border: 1px solid var(--rule);
border-radius: 50%;
display: grid;
place-items: center;
background: var(--white);
font-size: 10px;
font-weight: 700;
color: var(--mid-text);
z-index: 1;
}
.workflow-lane--user .workflow-steps li:nth-child(3)::before,
.workflow-lane--user .workflow-steps li:nth-child(5)::before {
border-color: var(--track-b);
color: var(--track-b);
background: var(--track-b-pale);
}
.workflow-lane--system .workflow-steps li:nth-child(n+3):nth-child(-n+6)::before {
border-color: var(--rule);
background: var(--base-bg);
}
.workflow-steps li:not(:last-child)::after {
content: "";
position: absolute;
top: 10px;
left: 20px;
right: 10px;
border-top: 1px solid var(--rule);
}
.workflow-steps--aligned li::after {
display: none;
}
.workflow-step--u1 { grid-column: 1; }
.workflow-step--u2 { grid-column: 2; }
.workflow-step--u3 { grid-column: 3; }
.workflow-step--u4 { grid-column: 4; }
.workflow-step--u5 { grid-column: 5; }
.workflow-step--u6 { grid-column: 6; }
.workflow-step--s1 { grid-column: 2; }
.workflow-step--s2 { grid-column: 3; }
.workflow-step--s3,
.workflow-step--s4,
.workflow-step--s5,
.workflow-step--s6 {
grid-column: 5;
}
.workflow-step--s3 { grid-row: 1; }
.workflow-step--s4 { grid-row: 2; }
.workflow-step--s5 { grid-row: 3; }
.workflow-step--s6 { grid-row: 4; }
.workflow-step--s7 { grid-column: 6; }
.workflow-divider {
position: relative;
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--sp-compact);
margin: var(--sp-inner) 0 var(--sp-compact);
min-height: 30px;
}
.workflow-divider::before {
content: "";
grid-column: 1 / -1;
align-self: center;
border-top: 1px solid var(--rule);
}
.workflow-divider-track {
grid-column: 2;
display: grid;
grid-template-columns: repeat(6, minmax(112px, 1fr));
gap: var(--sp-close);
align-items: center;
z-index: 1;
}
.workflow-divider-note {
position: relative;
padding: 0 var(--sp-tight);
background: var(--white);
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
line-height: 1.3;
color: var(--mid-text);
}
.workflow-divider-note--upload {
grid-column: 2 / 4;
justify-self: center;
padding-left: 22px;
color: var(--track-b);
}
.workflow-divider-note--upload::before {
content: "↘";
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-54%);
font-size: 16px;
line-height: 1;
}
.workflow-divider-note--complete {
grid-column: 3;
}
.workflow-divider-note--processing {
grid-column: 5;
}
/* File Service redesigned responsibility split */
.file-system-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
gap: var(--sp-component);
align-items: stretch;
padding: var(--sp-component);
background:
linear-gradient(90deg, rgba(43, 76, 126, 0.045), transparent 42%, transparent 58%, rgba(25, 25, 23, 0.035)),
var(--white);
}
.system-zone {
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--white);
padding: var(--sp-compact);
min-height: 300px;
display: flex;
flex-direction: column;
}
.system-zone--uploader {
border-color: rgba(43, 76, 126, 0.28);
}
.system-zone-header {
padding-bottom: var(--sp-inner);
border-bottom: 1px solid var(--rule-light);
margin-bottom: var(--sp-inner);
}
.system-zone-kicker {
margin: 0 0 var(--sp-tight);
max-width: none;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.4;
text-transform: uppercase;
color: var(--mid-text);
}
.system-zone-header h4 {
margin: 0;
font-family: var(--font-head);
font-size: 26px;
font-weight: 400;
line-height: 1.15;
color: var(--base-text);
}
.system-state-list,
.browser-file-list {
display: grid;
gap: var(--sp-close);
flex: 1;
}
.system-state,
.browser-file-row {
display: grid;
gap: 3px;
padding: var(--sp-close) var(--sp-inner);
border: 1px solid var(--rule-light);
border-radius: 4px;
background: var(--base-bg);
}
.system-state--active {
border-color: rgba(43, 76, 126, 0.22);
background: var(--track-b-pale);
}
.system-state--attention {
border-color: rgba(162, 74, 30, 0.22);
background: var(--track-a-pale);
}
.system-state-name,
.browser-file-row span {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--base-text);
}
.system-state-detail,
.browser-file-row strong {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
color: var(--mid-text);
}
.browser-file-row {
grid-template-columns: 1fr auto;
align-items: center;
}
.browser-file-row strong {
color: var(--track-b);
}
.system-zone-note {
max-width: none;
margin: var(--sp-inner) 0 0;
padding-top: var(--sp-inner);
border-top: 1px solid var(--rule-light);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.55;
color: var(--mid-text);
}
.system-transfer {
position: relative;
display: grid;
place-items: center;
min-height: 300px;
}
.system-transfer::before {
content: "";
position: absolute;
left: 50%;
top: 28px;
bottom: 28px;
border-left: 1px solid var(--rule);
}
.system-transfer::after {
content: "→";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -56%);
width: 32px;
height: 32px;
border: 1px solid var(--rule);
border-radius: 50%;
display: grid;
place-items: center;
background: var(--white);
color: var(--track-b);
font-family: var(--font-body);
font-size: 18px;
font-weight: 600;
}
.system-transfer span {
position: relative;
z-index: 1;
max-width: 150px;
padding: var(--sp-tight);
background: var(--white);
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.03em;
text-align: center;
color: var(--track-b);
}
/* File Service two-axis metadata matrix */
.metadata-matrix {
display: grid;
grid-template-columns: 54px 1fr;
grid-template-rows: auto 1fr auto;
gap: var(--sp-close) var(--sp-inner);
padding: var(--sp-compact);
background: var(--white);
}
.matrix-grid {
grid-column: 2;
grid-row: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
background: var(--rule);
gap: 1px;
}
.matrix-cell {
min-height: 160px;
padding: var(--sp-inner);
background: var(--white);
display: flex;
flex-direction: column;
}
.matrix-cell--critical,
.matrix-cell--expanded {
background: linear-gradient(180deg, rgba(43, 76, 126, 0.075), var(--white) 78%);
}
.matrix-cell--hidden {
background: var(--base-bg);
}
.matrix-cell--secondary {
background: linear-gradient(180deg, rgba(25, 25, 23, 0.035), var(--white) 78%);
}
.matrix-tier {
margin: 0 0 var(--sp-close);
max-width: none;
font-family: var(--font-body);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.4;
text-transform: uppercase;
color: var(--track-b);
}
.matrix-cell h4 {
margin: 0 0 var(--sp-tight);
font-family: var(--font-head);
font-size: 20px;
font-weight: 400;
line-height: 1.15;
color: var(--base-text);
}
.matrix-cell p:last-child {
margin: 0;
max-width: 32ch;
font-family: var(--font-body);
font-size: 12px;
line-height: 1.55;
color: var(--mid-text);
}
.matrix-axis,
.matrix-axis-end {
margin: 0;
max-width: none;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.4;
text-transform: uppercase;
color: var(--mid-text);
}
.matrix-axis--y {
grid-column: 1;
grid-row: 2;
align-self: center;
justify-self: center;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.matrix-axis--x {
grid-column: 2;
grid-row: 3;
justify-self: center;
}
.matrix-axis-end--low {
grid-column: 1;
grid-row: 2;
align-self: end;
justify-self: start;
}
.matrix-axis-end--high {
grid-column: 1;
grid-row: 2;
align-self: start;
justify-self: start;
}
.matrix-axis-end--small {
grid-column: 2;
grid-row: 3;
justify-self: start;
}
.matrix-axis-end--large {
grid-column: 2;
grid-row: 3;
justify-self: end;
}
/* Outcome row */
.cs-outcome-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
margin: var(--sp-block) 0;
}
.cs-outcome-cell {
background: var(--white);
padding: var(--sp-block) var(--sp-compact);
}
.cs-outcome-number {
font-family: var(--font-head);
font-size: 40px;
font-weight: 400;
color: var(--track-a);
line-height: 1;
margin-bottom: var(--sp-tight);
}
.cs-outcome-number.b { color: var(--track-b); }
.cs-outcome-label {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
line-height: 1.5;
}
/* Sidebar layout for case study — optional */
.cs-layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--sp-section);
align-items: start;
}
.cs-sidebar {
position: sticky;
top: calc(var(--nav-h) + var(--sp-compact));
}
.cs-sidebar-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
margin-bottom: var(--sp-inner);
}
.cs-sidebar-nav { display: flex; flex-direction: column; gap: var(--sp-close); }
.cs-sidebar-link {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
transition: color var(--motion-hover);
}
.cs-sidebar-link:hover,
.cs-sidebar-link.active { color: var(--base-text); }
/* ════════════════════════════════════════
ABOUT TEASER (homepage)
════════════════════════════════════════ */
.about-teaser {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-section);
align-items: start;
}
.about-teaser-left h2 {
font-family: var(--font-head);
font-size: 28px;
font-weight: 400;
line-height: 1.2;
margin-bottom: var(--sp-compact);
}
.about-teaser-left p {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.75;
color: var(--mid-text);
margin-bottom: var(--sp-inner);
}
.about-teaser-right {
display: flex;
flex-direction: column;
gap: var(--sp-inner);
}
/* Skill row */
.skill-group-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
margin-bottom: var(--sp-tight);
padding-bottom: var(--sp-tight);
border-bottom: 1px solid var(--rule-light);
}
.skill-list {
display: flex;
flex-wrap: wrap;
gap: var(--sp-tight);
}
/* ════════════════════════════════════════
CONTACT / FOOTER
════════════════════════════════════════ */
.contact-section {
padding: var(--sp-section) 0;
}
.contact-section h2 {
font-family: var(--font-head);
font-size: clamp(28px, 4vw, 52px);
font-weight: 400;
line-height: 1.1;
max-width: 560px;
margin-bottom: var(--sp-compact);
}
.contact-section p {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
line-height: 1.75;
max-width: 440px;
margin-bottom: var(--sp-block);
}
.contact-links {
display: flex;
align-items: center;
gap: var(--sp-compact);
flex-wrap: wrap;
}
.contact-link {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--base-text);
border-bottom: 1px solid var(--base-text);
padding-bottom: 2px;
transition: opacity var(--motion-fade);
}
.contact-link:hover { opacity: 0.55; }
.contact-hero {
padding: var(--sp-section) 0 var(--sp-block);
border-bottom: 1px solid var(--rule);
}
.contact-hero h1 {
font-family: var(--font-head);
font-size: clamp(36px, 7vw, 76px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.01em;
max-width: 720px;
margin-bottom: var(--sp-compact);
}
.contact-hero p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.8;
color: var(--mid-text);
max-width: 620px;
}
.contact-form-section {
padding-top: var(--sp-block);
}
.contact-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
gap: var(--sp-section);
align-items: start;
}
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-compact);
}
.contact-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-field--full,
.contact-form-note,
.contact-actions {
grid-column: 1 / -1;
}
.contact-field--hidden {
position: absolute;
left: -100vw;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-field label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mid-text);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
width: 100%;
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--white);
color: var(--base-text);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
padding: 13px 14px;
transition: border-color var(--motion-fade), box-shadow var(--motion-fade);
}
.contact-field textarea {
resize: vertical;
min-height: 180px;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
outline: none;
border-color: var(--base-text);
box-shadow: 0 0 0 1px var(--base-text);
}
.contact-field input::placeholder {
color: var(--mid-text);
}
.contact-form-note {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.7;
color: var(--mid-text);
max-width: 620px;
}
.contact-actions {
display: flex;
align-items: center;
gap: var(--sp-compact);
flex-wrap: wrap;
}
.contact-submit {
border: 0;
border-bottom: 1px solid var(--base-text);
background: transparent;
color: var(--base-text);
padding: 0 0 2px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.03em;
}
.contact-submit:hover {
opacity: 0.55;
}
.contact-aside {
border-top: 1px solid var(--base-text);
padding-top: var(--sp-compact);
}
.contact-aside ul {
display: grid;
gap: 14px;
}
.contact-aside li {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.75;
color: var(--mid-text);
padding-bottom: 14px;
border-bottom: 1px solid var(--rule-light);
}
@media (max-width: 860px) {
.contact-form-grid {
grid-template-columns: 1fr;
gap: var(--sp-block);
}
}
@media (max-width: 560px) {
.contact-form-grid {
padding: 0 var(--sp-compact);
}
.contact-form {
grid-template-columns: 1fr;
}
.contact-hero h1 {
font-size: clamp(34px, 16vw, 58px);
}
}
.site-footer {
border-top: 1px solid var(--rule);
padding: var(--sp-compact) var(--sp-component);
display: flex;
align-items: center;
justify-content: space-between;
}
.site-footer-copy {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
letter-spacing: 0.03em;
}
.site-footer-links {
display: flex;
gap: var(--sp-compact);
}
.site-footer-link {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
transition: color var(--motion-hover);
}
.site-footer-link:hover { color: var(--base-text); }
/* ════════════════════════════════════════
ABOUT PAGE
════════════════════════════════════════ */
.about-hero {
padding: var(--sp-section) 0 var(--sp-block);
border-bottom: 1px solid var(--rule);
}
.about-hero h1 {
font-family: var(--font-head);
font-size: clamp(32px, 5vw, 60px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
max-width: 640px;
margin-bottom: var(--sp-compact);
}
.about-hero p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.8;
color: var(--mid-text);
max-width: 540px;
}
.about-hero h1 + p { margin-top: var(--sp-compact); }
.about-grid {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--sp-section);
padding: var(--sp-section) 0;
align-items: start;
}
.about-bio p {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.8;
color: var(--mid-text);
margin-bottom: var(--sp-compact);
}
.about-bio h2 {
font-family: var(--font-head);
font-size: 24px;
font-weight: 400;
margin-top: var(--sp-block);
margin-bottom: var(--sp-compact);
}
.about-sidebar { display: flex; flex-direction: column; gap: var(--sp-block); }
.about-sidebar-section {}
.about-sidebar-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
margin-bottom: var(--sp-inner);
padding-bottom: var(--sp-tight);
border-bottom: 1px solid var(--rule);
}
.about-sidebar ul { display: flex; flex-direction: column; gap: var(--sp-close); }
.about-sidebar li {
font-family: var(--font-body);
font-size: 14px;
color: var(--base-text);
line-height: 1.5;
}
.about-sidebar li span {
display: block;
font-size: 14px;
color: var(--mid-text);
margin-top: 2px;
}
/* ════════════════════════════════════════
WORKS INDEX PAGE
════════════════════════════════════════ */
.works-hero {
padding: var(--sp-section) 0 var(--sp-block);
border-bottom: 1px solid var(--rule);
}
.works-hero h1 {
font-family: var(--font-head);
font-size: clamp(32px, 5vw, 56px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: var(--sp-compact);
}
.works-hero p {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
line-height: 1.75;
max-width: 480px;
}
.works-track + .works-track {
margin-top: var(--sp-section);
}
.works-track-heading {
margin-bottom: var(--sp-block);
}
.works-track-heading .section-eyebrow {
margin-bottom: var(--sp-inner);
}
.works-track--a .section-eyebrow {
color: var(--track-a);
}
.works-track--b .section-eyebrow {
color: var(--track-b);
}
.works-track--a .section-eyebrow::after {
background: var(--track-a);
opacity: 0.32;
}
.works-track--b .section-eyebrow::after {
background: var(--track-b);
opacity: 0.32;
}
.works-track-summary {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
line-height: 1.75;
max-width: 600px;
}
.works-filter {
display: flex;
gap: var(--sp-tight);
margin-bottom: var(--sp-block);
padding-top: var(--sp-compact);
}
.works-filter-btn {
height: 28px;
padding: 0 14px;
border: 1px solid var(--rule);
border-radius: 3px;
background: transparent;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mid-text);
transition: all 0.15s ease;
}
.works-filter-btn:hover,
.works-filter-btn.active {
border-color: var(--base-text);
color: var(--base-text);
background: transparent;
}
.works-filter-btn.active { background: var(--base-text); color: var(--base-bg); }
/* ════════════════════════════════════════
IMAGE PLACEHOLDER
════════════════════════════════════════ */
.img-placeholder {
background: var(--base-bg);
border: 1px dashed var(--rule);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mid-text);
}
/* ════════════════════════════════════════
UTILITY CLASSES
════════════════════════════════════════ */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.text-a { color: var(--track-a); }
.text-b { color: var(--track-b); }
.text-mid { color: var(--mid-text); }
/* ════════════════════════════════════════
EXTRACTED MODIFIERS & UTILITY CLASSES
Promoted from inline style overrides. Each one is used 2+ times
with identical intent. See PRODUCT.md / DESIGN.md for the system
they extend.
════════════════════════════════════════ */
/* Type-nav strong variant — used on next-case nav link in case studies */
.type-nav--strong { color: var(--base-text); }
/* Project-card thumb label — sits above the dot-grid pattern */
.project-card-thumb-label { position: relative; z-index: 1; }
/* Project-card thumb logo — centered SVG logo over the dot-grid pattern */
.project-card-thumb-logo {
position: relative;
z-index: 1;
width: auto !important;
height: auto !important;
max-width: 60%;
max-height: 72px;
object-fit: contain !important;
}
/* End-of-case-study divider — slightly heavier margin than default bridge-rule */
.bridge-rule--cs-end {
margin-top: var(--sp-block);
margin-bottom: var(--sp-block);
}
/* Case-study foot: prev / next navigation row */
.cs-foot-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Case-study bottom spacer between content and footer */
.cs-foot-spacer { height: var(--sp-page); }
/* ════════════════════════════════════════
ARCHIVE PAGES
════════════════════════════════════════ */
.archive-banner {
background: #F0EFEA;
border-bottom: 1px solid var(--rule);
padding: var(--sp-inner) var(--sp-component);
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
letter-spacing: 0.03em;
display: flex;
align-items: center;
gap: 10px;
}
.archive-banner::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mid-text);
flex-shrink: 0;
}
.archive-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-inner);
}
@media (max-width: 560px) { .archive-grid { grid-template-columns: 1fr; } }
.archive-card {
background: var(--white);
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
}
.archive-card:hover {
border-color: var(--base-text);
box-shadow: 0 4px 16px rgba(25,25,23,0.05);
}
.archive-card-thumb {
height: 120px;
background: var(--base-bg);
border-bottom: 1px solid var(--rule);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.archive-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.archive-card-thumb-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--rule) 1px, transparent 1px);
background-size: 18px 18px;
opacity: 0.55;
pointer-events: none;
}
.archive-card-body {
padding: var(--sp-inner) var(--sp-compact) var(--sp-compact);
flex: 1;
display: flex;
flex-direction: column;
}
.archive-card-name {
font-family: var(--font-head);
font-size: 19px;
font-weight: 400;
line-height: 1.2;
color: var(--base-text);
margin-bottom: var(--sp-tight);
}
.archive-card-role {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
margin-bottom: var(--sp-inner);
}
.archive-card-desc {
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
line-height: 1.7;
flex: 1;
margin-bottom: var(--sp-inner);
}
.archive-section-label {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-text);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: var(--sp-block);
}
.archive-section-label::after {
content: '';
display: block;
height: 1px;
background: var(--rule);
flex: 1;
}
.archive-notice {
background: #F0EFEA;
border: 1px solid var(--rule);
border-radius: 4px;
padding: var(--sp-inner) var(--sp-compact);
font-family: var(--font-body);
font-size: 14px;
color: var(--mid-text);
margin-bottom: var(--sp-block);
display: flex;
align-items: center;
gap: 10px;
}
.archive-notice::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--mid-text);
flex-shrink: 0;
}
.img-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--rule);
}
.img-grid-2 img { width: 100%; display: block; }
.img-grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1px;
background: var(--rule);
}
.img-grid-3 img { width: 100%; display: block; }
@media (max-width: 560px) {
.img-grid-2,
.img-grid-3 { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════ */
/* Tablet (≤ 860px) */
@media (max-width: 860px) {
.content-wrap { padding: 0 var(--sp-compact); }
.content-wrap--wide { padding: 0 var(--sp-compact); }
.hero { padding: var(--sp-section) 0 var(--sp-block); }
.track-intro { grid-template-columns: 1fr; }
.works-grid { grid-template-columns: 1fr; }
.works-track + .works-track { margin-top: var(--sp-block); }
.works-track-heading { margin-bottom: var(--sp-compact); }
.about-teaser { grid-template-columns: 1fr; gap: var(--sp-block); }
.about-grid { grid-template-columns: 1fr; }
.about-sidebar { grid-row: 1; }
.cs-layout { grid-template-columns: 1fr; }
.cs-sidebar { position: static; }
.cs-meta-strip { flex-wrap: wrap; }
.cs-meta-item { flex: 0 0 50%; }
.cs-meta-item:nth-child(2) { border-right: none; }
.cs-outcome-row { grid-template-columns: 1fr; }
.cs-hero-a-grid { grid-template-columns: 1fr; }
.cs-hero-a-left { padding: var(--sp-block) var(--sp-compact); }
.cs-hero-a-right { padding: var(--sp-block) var(--sp-compact); }
.cs-media--wide {
width: 100%;
margin-left: 0;
transform: none;
}
.signature-grid {
grid-template-columns: 1fr;
gap: var(--sp-compact);
}
.signature-title,
.signature-copy {
max-width: 620px;
}
.trust-flow {
grid-template-columns: 1fr;
}
.trust-flow-center {
min-height: 80px;
}
.trust-flow-center::before {
left: 50%;
right: auto;
top: 0;
bottom: 0;
width: 1px;
height: auto;
}
.access-matrix {
grid-template-columns: 1fr;
}
.access-matrix .matrix-head {
display: none;
}
.stack-layer {
grid-template-columns: 1fr;
gap: var(--sp-tight);
}
.pipeline-track {
grid-template-columns: 1fr 1fr;
}
.pipeline-step:not(:last-child)::after {
content: none;
}
.file-workflow-visual {
padding: var(--sp-compact);
}
.workflow-lane,
.workflow-divider {
grid-template-columns: 1fr;
gap: var(--sp-inner);
}
.workflow-steps {
grid-template-columns: 1fr;
gap: var(--sp-inner);
}
.workflow-steps--aligned li {
grid-column: auto;
grid-row: auto;
}
.workflow-steps li {
min-height: 0;
padding: 0 0 0 34px;
}
.workflow-steps li::before {
top: 0;
}
.workflow-steps li:not(:last-child)::after {
top: 22px;
left: 10px;
right: auto;
bottom: calc(-1 * var(--sp-inner));
height: auto;
border-top: 0;
border-left: 1px solid var(--rule);
}
.workflow-divider {
margin: var(--sp-compact) 0;
min-height: 72px;
}
.workflow-divider::before {
align-self: stretch;
width: 1px;
margin-left: 10px;
border-top: 0;
border-left: 1px solid var(--rule);
}
.workflow-divider span {
position: static;
transform: none;
margin-left: 24px;
padding: 0;
}
.workflow-divider-track {
grid-column: 1;
grid-template-columns: 1fr;
gap: var(--sp-close);
}
.workflow-divider-note--upload,
.workflow-divider-note--complete,
.workflow-divider-note--processing {
grid-column: 1;
}
.file-system-split {
grid-template-columns: 1fr;
gap: var(--sp-compact);
padding: var(--sp-compact);
}
.system-zone {
min-height: 0;
}
.system-transfer {
min-height: 80px;
}
.system-transfer::before {
left: 50%;
top: 0;
bottom: 0;
}
.system-transfer::after {
content: "↓";
}
.system-transfer span {
max-width: 220px;
}
.browser-file-row {
grid-template-columns: 1fr;
}
.metadata-matrix {
display: block;
padding: var(--sp-compact);
background: var(--white);
}
.matrix-grid {
grid-template-columns: 1fr;
}
.matrix-cell {
min-height: 0;
}
.matrix-axis,
.matrix-axis-end {
position: static;
display: inline-block;
transform: none;
margin: 0 var(--sp-inner) var(--sp-inner) 0;
}
.matrix-axis--y::after {
content: ": low to high";
letter-spacing: 0;
text-transform: none;
font-weight: 500;
}
.matrix-axis--x::after {
content: ": small to large";
letter-spacing: 0;
text-transform: none;
font-weight: 500;
}
.matrix-axis-end {
display: none;
}
.case-fixli .trust-map-grid {
grid-template-columns: 1fr;
}
.case-fixli .trust-map-side {
min-height: 0;
}
.case-fixli .trust-map-side--homeowner {
border-radius: 8px 8px 0 0;
}
.case-fixli .trust-map-side--provider {
border-radius: 0 0 8px 8px;
}
.case-fixli .trust-map-center {
min-height: 88px;
}
.case-fixli .trust-map-line {
top: auto;
left: 50%;
width: 1px;
height: 40px;
}
.case-fixli .trust-map-line--left {
top: 0;
right: auto;
}
.case-fixli .trust-map-line--right {
bottom: 0;
}
.case-fixli .approach-flow-track {
grid-template-columns: 1fr 1fr;
}
.case-fixli .approach-flow-step:not(:last-child)::after {
content: none;
}
.case-fixli .mobile-flow-track {
grid-template-columns: 1fr;
}
.case-fixli .mobile-flow-step {
grid-template-columns: auto 92px minmax(0, 1fr);
grid-template-rows: auto;
align-items: center;
justify-items: start;
min-height: 0;
gap: 18px;
padding: 18px;
}
.case-fixli .mobile-flow-step:not(:last-child)::after {
top: auto;
right: auto;
bottom: -6px;
left: 50%;
transform: translateX(-50%) rotate(135deg);
}
.case-fixli .mobile-flow-index {
margin: 0;
}
.case-fixli .mobile-flow-label {
max-width: 220px;
margin: 0;
text-align: left;
}
.yerbba-service-track {
grid-template-columns: 1fr 1fr;
}
.yerbba-service-track li {
min-height: 0;
}
.yerbba-service-track li:not(:last-child)::after {
content: none;
}
.translation-gap-grid {
grid-template-columns: 1fr;
gap: var(--sp-inner);
}
.translation-gap-arrow,
.translation-gap-arrow:not(.translation-gap-arrow--single) {
width: 1px;
height: 32px;
justify-self: center;
align-self: auto;
margin: 0;
background: rgba(199, 127, 102, 0.6);
}
.translation-gap-arrow::before,
.translation-gap-arrow::after,
.translation-gap-arrow:not(.translation-gap-arrow--single)::before,
.translation-gap-arrow:not(.translation-gap-arrow--single)::after {
top: auto;
bottom: 0;
left: auto;
right: -4px;
width: 9px;
transform-origin: right center;
}
.translation-gap-arrow::before,
.translation-gap-arrow:not(.translation-gap-arrow--single)::before {
transform: rotate(55deg);
}
.translation-gap-arrow::after,
.translation-gap-arrow:not(.translation-gap-arrow--single)::after {
transform: rotate(125deg);
}
.decision-anchor {
grid-template-columns: 1fr;
}
.decision-anchor-steps {
grid-template-columns: 1fr 1fr;
}
.clinical-state-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Mobile (≤ 560px) */
@media (max-width: 560px) {
.content-wrap { padding: 0 var(--sp-inner); }
.content-wrap--wide { padding: 0 var(--sp-inner); }
.site-nav { padding: 0 var(--sp-inner); }
.site-nav-links { gap: var(--sp-inner); }
.cs-meta-item { flex: 0 0 100%; border-right: none; }
.cs-hero-a-left { padding: var(--sp-compact) var(--sp-inner); }
.cs-hero-a-right { padding: var(--sp-compact) var(--sp-inner); }
.cs-hero-a-meta { grid-template-columns: 1fr; }
.cs-hero-b { padding: var(--sp-block) 0; }
.cs-hero-b-main { grid-template-columns: 3px minmax(0, 1fr); column-gap: var(--sp-inner); }
.cs-hero-b-ledger-item { padding: var(--sp-inner); }
.case-signature {
padding: var(--sp-compact) 0;
}
.signature-artifact-header {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.trust-flow,
.pipeline-model,
.system-stack {
padding: var(--sp-inner);
}
.trust-flow-side {
padding: var(--sp-inner);
}
.pipeline-track {
grid-template-columns: 1fr;
}
.pipeline-row {
grid-template-columns: 1fr;
gap: 2px;
}
.case-fixli .trust-map {
padding: 20px;
}
.case-fixli .trust-map-head {
margin-bottom: 20px;
}
.case-fixli .trust-map-side {
padding: 20px;
}
.case-fixli .trust-map-side h3 {
font-size: 18px;
}
.case-fixli .trust-map-node {
width: 96px;
height: 96px;
}
.case-fixli .approach-flow {
padding: 18px;
}
.case-fixli .approach-flow-track {
grid-template-columns: 1fr;
}
.case-fixli .approach-flow-step {
grid-template-columns: 58px minmax(0, 1fr);
justify-items: start;
align-content: center;
min-height: 92px;
padding: 16px;
}
.case-fixli .approach-flow-title {
max-width: none;
text-align: left;
}
.case-fixli .mobile-flow {
padding: 18px;
}
.case-fixli .mobile-flow-step {
grid-template-columns: 32px 78px minmax(0, 1fr);
gap: 14px;
padding: 16px 14px;
}
.case-fixli .mobile-flow-device {
width: 78px;
border-radius: 14px;
}
.case-fixli .mobile-flow-screen {
gap: 5px;
padding: 13px 7px 8px;
}
.case-fixli .mobile-flow-label {
font-size: 12px;
}
.yerbba-service-model,
.yerbba-translation-gap,
.decision-anchor,
.clinical-state-board {
padding: var(--sp-inner);
}
.yerbba-service-track,
.decision-anchor-steps,
.clinical-state-grid {
grid-template-columns: 1fr;
}
.yerbba-service-track strong,
.decision-anchor-copy h3 {
font-size: 20px;
}
.translation-node,
.decision-anchor-steps li,
.clinical-state {
min-height: 0;
}
.site-footer {
flex-direction: column;
gap: var(--sp-close);
text-align: center;
}
}
/* ════════════════════════════════════════
╔══════════════════════════════════════╗
║ ATOMIC DESIGN SYSTEM ║
╚══════════════════════════════════════╝
Organized by atomic tier:
1. Atoms — tokens & single-purpose elements
2. Molecules — 2–3 atoms with one combined purpose
3. Organisms — self-contained, reusable UI regions
4. Patterns — see DESIGN.md §7 for page compositions
════════════════════════════════════════ */
/* ────────────────────────────────────────
ATOMS
──────────────────────────────────────── */
/* ── Section Eyebrow ──
Uppercase label with flex trailing rule line.
Used at the top of every content section.
Already defined above as .section-eyebrow — documented here for DS reference. */
/* ── Type Scale ──
Promote existing CSS classes as formal DS atoms.
These replace arbitrary inline font styles across pages. */
/* .type-hero — Display. Home hero headline. One per page. */
/* .type-breakpoint — Headline. Case-study hero. */
/* .type-section-title — Title. Section titles inside long-form. */
/* .type-project-name — Subtitle. Project names, track-intro names. */
/* .type-ruled-headline — Mid-scale display with ruled border treatment. */
/* .type-overline — Label. Eyebrows, track labels. Never inline in prose. */
/* .type-body — Body. Landing surface copy, max-width 560px. */
/* .type-caption — Caption. Metadata, secondary text, 14px. */
/* .type-nav — Nav/UI. Navigation links. */
/* All defined in the TYPOGRAPHY section above. */
/* ── WIP Badge ──
Inline status chip. Ash background, Ink-Mid text.
Already defined above as .badge-wip — documented here for DS reference. */
/* ── Dot-Grid Pattern ──
Radial-gradient texture for card thumb surfaces. Reads as graph paper.
Already defined inline on .project-card-thumb-pattern — formal atom class: */
.dot-grid-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--rule) 1px, transparent 1px);
background-size: 18px 18px;
opacity: 0.55;
pointer-events: none;
}
/* ── Hairline Rules ──
.rule and .rule-light already defined. Two formal variants: */
/* .rule { height: 1px; background: var(--rule); width: 100%; } */
/* .rule-light { height: 1px; background: var(--rule-light); width: 100%; } */
/* ── Image Placeholder ──
Already defined as .img-placeholder above — documented here for DS reference. */
/* ────────────────────────────────────────
MOLECULES
──────────────────────────────────────── */
/* ── Accordion ──
Native / expand/collapse.
Used in case studies for deep-dive sections.
Keyboard accessible with no JS required. */
.cs-accordion {
border-top: 1px solid var(--base-text);
border-bottom: 1px solid var(--base-text);
margin-bottom: var(--sp-compact);
}
.cs-accordion-summary {
cursor: pointer;
list-style: none;
padding: var(--sp-compact) 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--sp-compact);
}
/* Hide default browser triangle */
.cs-accordion-summary::-webkit-details-marker { display: none; }
.cs-accordion-summary::marker { display: none; }
.cs-accordion-summary h3 {
margin: 0 0 6px;
font-family: var(--font-head);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
color: var(--base-text);
}
.cs-accordion-summary p {
font-family: var(--font-body);
font-size: 15px;
color: var(--mid-text);
margin: 0;
line-height: 1.6;
max-width: none;
}
.cs-accordion-header { flex: 1; }
.cs-accordion-icon {
font-family: var(--font-body);
font-size: 20px;
color: var(--mid-text);
flex-shrink: 0;
margin-top: 2px;
transition: transform var(--motion-drawer);
line-height: 1;
}
.cs-accordion[open] .cs-accordion-icon {
transform: rotate(45deg);
}
.cs-accordion-body {
padding-bottom: var(--sp-compact);
}
/* ── Notice Strip ──
Inline contextual notice. Dot prefix + short text.
Used as .archive-notice (bordered) and .archive-banner (full-bleed).
Already defined above — documented here for DS reference. */
/* ── Media Block ──
Image or media with optional caption. Card-white surface.
Already defined above as .cs-media + .cs-media-cap. */
/* ── Meta Item ──
A label + value pair used inside a meta strip.
Already defined above as .cs-meta-item + .cs-meta-label + .cs-meta-value. */
/* ── Outcome Cell ──
A large stat number + descriptor label.
Used inside .cs-outcome-row.
Already defined above as .cs-outcome-cell + .cs-outcome-number + .cs-outcome-label. */
/* ── Skill Tag Group ──
A labeled group of skill tags.
Already defined above as .skill-group-label + .skill-list. */
/* ── Card Thumb ──
Thumbnail region: dot-grid texture + track stripe + logo.
Already defined above as .project-card-thumb, .project-card-thumb-pattern,
.project-card-thumb-logo, .project-card-thumb-label. */
/* ────────────────────────────────────────
ORGANISMS
──────────────────────────────────────── */
/* ── Site Nav ── Already defined above as .site-nav */
/* ── Site Footer ── Already defined above as .site-footer */
/* ── Project Card ── Already defined above as .project-card */
/* ── Archive Card ── Already defined above as .archive-card */
/* ── Meta Strip ── Already defined above as .cs-meta-strip */
/* ── Outcome Row ── Already defined above as .cs-outcome-row */
/* ── Breakpoint Block ── Already defined above as .bp-block */
/* ── Track Intro ── Already defined above as .track-intro */
/* ── Case Study Sidebar ── Already defined above as .cs-layout + .cs-sidebar */
/* ── Case Hero A ── Already defined above as .cs-hero-a */
/* ── Footer Nav ── Already defined above as .cs-foot-nav */
/* ── Contact Section ── Already defined above as .contact-section */
/* ── Works Filter Bar ── Already defined above as .works-filter + .works-filter-btn */
/* ── Accordion Group ──
A stack of accordion items under a shared heading.
No additional CSS needed — stack .cs-accordion items directly.
The border-bottom of each item collapses with the border-top of the next
because both are 1px solid var(--base-text), producing a single hairline. */
.cs-accordion-group {
margin: var(--sp-block) 0;
}
/* Adjacent accordions share their border — prevent double rule */
.cs-accordion-group .cs-accordion + .cs-accordion {
border-top: none;
}
/* ════════════════════════════════════════
REDUCED MOTION
Honors the OS preference. DESIGN.md §6 Do line: every transition
must collapse under prefers-reduced-motion.
════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html { scroll-behavior: auto; }
}