/* ========================================================================== Tokens Dark (default) contrast on #000: text 18.76:1, amber 15.91:1, cyan 10.25:1, muted 10:1. Light contrast on #f6f4ef: text 15.1:1, muted 6.4:1, amber 6.6:1, cyan 5.5:1, error 7.1:1. ========================================================================== */ :root { --bg: #000; --text: #f2f2f2; --muted: #b3b3b3; --amber: #ffdd80; --amber-light: #ffe59c; --cyan: #00c3ff; --panel: rgb(0 142 177 / 10%); --line: rgb(0 195 255 / 22%); --text-soft: #d9d9d9; --on-accent: #000; /* text on a cyan fill */ --glow: rgb(0 142 177 / 22%); /* page background glow */ --glow-strong: rgb(0 195 255 / 28%); /* portrait circle */ --shadow-glow: rgb(0 142 177 / 35%); --shadow-glow-soft: rgb(0 142 177 / 25%); --track: rgb(242 242 242 / 18%); /* empty part of the before/after bar */ --tag-line: rgb(255 229 156 / 35%); --link-line: rgb(0 195 255 / 45%); --amber-tint: rgb(255 221 128 / 6%); --amber-tint-strong: rgb(255 221 128 / 7%); --amber-tint-tag: rgb(255 221 128 / 12%); --cyan-tint: rgb(0 195 255 / 10%); --cyan-tint-soft: rgb(0 195 255 / 6%); --cyan-tint-line: rgb(0 195 255 / 35%); --error: #ff8a80; --error-tint: rgb(255 138 128 / 7%); --field-bg: #000; --field-border: #8a8a8a; --overlay: rgb(0 0 0 / 80%); /* round buttons over images */ --lightbox-bg: #000; --font: "Afacad", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --step--1: 1.0625rem; --step-0: 1.25rem; --step-1: 1.5rem; --step-2: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); --step-3: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); --step-4: clamp(3.5rem, 2rem + 7vw, 7.5rem); --measure: 38rem; --page: 72rem; --gutter: clamp(1.25rem, 4vw, 3rem); --radius: 0.75rem; --page-top: clamp(1rem, 3vw, 2.5rem); /* space between the header and the page content */ color-scheme: dark; } /* Light theme (work in progress, OFF for visitors). Only active when has the class "light-enabled", which the inline head script adds for anyone who opened a page with ?light-preview=1 (remembered in localStorage; ?light-preview=0 turns it off). To launch it for everyone, set LIGHT_MODE_FOR_EVERYONE = true in that head script on every page. Once enabled it follows the system setting unless the visitor picked a theme with the header switch (stored as data-theme on ). */ @media (prefers-color-scheme: light) { :root.light-enabled:not([data-theme="dark"]) { --bg: #f6f4ef; --text: #1b1f22; --muted: #55595d; --amber: #7a4d00; --amber-light: #8a5a00; --cyan: #006b8a; --panel: rgb(0 142 177 / 7%); --line: rgb(0 107 138 / 22%); --text-soft: #2e3337; --on-accent: #fff; --glow: rgb(0 142 177 / 12%); --glow-strong: rgb(0 107 138 / 16%); --shadow-glow: rgb(0 90 120 / 18%); --shadow-glow-soft: rgb(0 90 120 / 14%); --track: rgb(27 31 34 / 12%); --tag-line: rgb(138 90 0 / 35%); --link-line: rgb(0 107 138 / 45%); --amber-tint: rgb(122 77 0 / 6%); --amber-tint-strong: rgb(122 77 0 / 7%); --amber-tint-tag: rgb(122 77 0 / 10%); --cyan-tint: rgb(0 107 138 / 8%); --cyan-tint-soft: rgb(0 107 138 / 5%); --cyan-tint-line: rgb(0 107 138 / 30%); --error: #a4161a; --error-tint: rgb(164 22 26 / 6%); --field-bg: #fff; --field-border: #767676; --overlay: rgb(255 255 255 / 88%); --lightbox-bg: #f6f4ef; color-scheme: light; } } :root.light-enabled[data-theme="light"] { --bg: #f6f4ef; --text: #1b1f22; --muted: #55595d; --amber: #7a4d00; --amber-light: #8a5a00; --cyan: #006b8a; --panel: rgb(0 142 177 / 7%); --line: rgb(0 107 138 / 22%); --text-soft: #2e3337; --on-accent: #fff; --glow: rgb(0 142 177 / 12%); --glow-strong: rgb(0 107 138 / 16%); --shadow-glow: rgb(0 90 120 / 18%); --shadow-glow-soft: rgb(0 90 120 / 14%); --track: rgb(27 31 34 / 12%); --tag-line: rgb(138 90 0 / 35%); --link-line: rgb(0 107 138 / 45%); --amber-tint: rgb(122 77 0 / 6%); --amber-tint-strong: rgb(122 77 0 / 7%); --amber-tint-tag: rgb(122 77 0 / 10%); --cyan-tint: rgb(0 107 138 / 8%); --cyan-tint-soft: rgb(0 107 138 / 5%); --cyan-tint-line: rgb(0 107 138 / 30%); --error: #a4161a; --error-tint: rgb(164 22 26 / 6%); --field-bg: #fff; --field-border: #767676; --overlay: rgb(255 255 255 / 88%); --lightbox-bg: #f6f4ef; color-scheme: light; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 2rem; } body { display: flex; flex-direction: column; margin: 0; min-height: 100vh; background: radial-gradient(ellipse 80% 50% at 50% -10%, var(--glow), transparent 70%), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font); font-size: var(--step-0); line-height: 1.55; } h1, h2, h3 { margin: 0; color: var(--amber); font-weight: 600; line-height: 1.1; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } img { display: block; max-width: 100%; height: auto; } [hidden] { display: none !important; } a { color: var(--cyan); text-underline-offset: 0.2em; text-decoration-thickness: 0.06em; } a:hover { text-decoration-thickness: 0.12em; } :focus-visible { outline: 0.1875rem solid var(--cyan); outline-offset: 0.1875rem; border-radius: 0.125rem; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ========================================================================== Layout ========================================================================== */ main { flex: 1; padding-bottom: clamp(4rem, 10vw, 8rem); } .wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; } .skip-link { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 10; padding: 0.5rem 1rem; background: var(--cyan); color: var(--on-accent); font-weight: 600; transform: translateY(-200%); } .skip-link:focus { transform: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Site header */ .site-header { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: baseline; justify-content: space-between; padding-block: 1.5rem; } .site-header__name { color: var(--text); font-weight: 600; font-size: var(--step-1); text-decoration: none; } .site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; } .site-nav a { color: var(--text); text-decoration: none; } .site-nav a:hover, .site-nav a[aria-current] { color: var(--cyan); text-decoration: underline; } /* Secondary nav action (Log out): quieter than the main links, still easy to reach. Muted text is 10:1 on black. */ .site-nav .site-nav__secondary { align-self: center; padding-left: 1.5rem; border-left: 1px solid var(--line); } .site-nav .site-nav__secondary a { color: var(--muted); font-size: var(--step--1); } .site-nav .site-nav__secondary a:hover { color: var(--cyan); } /* Site footer */ .site-footer { padding-block: 3rem; border-top: 1px solid var(--line); } .site-footer h2 { font-size: var(--step-2); margin-bottom: 1.25rem; } .contact-list { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 0; padding: 0; list-style: none; } /* ========================================================================== Shared pieces ========================================================================== */ .eyebrow { color: var(--muted); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .section { margin-top: clamp(4rem, 10vw, 7rem); } .section__title { font-size: var(--step-3); margin-bottom: 1.5rem; } .button { display: inline-block; padding: 0.75rem 1.5rem; border: 0.125rem solid var(--cyan); border-radius: 999px; color: var(--cyan); font-weight: 600; text-decoration: none; } .button:hover { background: var(--cyan); color: var(--on-accent); } /* ========================================================================== Case study — public page ========================================================================== */ /* Intro */ .cs-intro { display: grid; gap: 2.5rem; padding-top: var(--page-top); } .cs-intro h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.02em; line-height: 0.95; } .cs-intro__expansion { display: block; margin-top: 0.75rem; color: var(--text); font-size: var(--step-2); font-weight: 400; letter-spacing: 0; } .cs-intro__lede { max-width: var(--measure); font-size: var(--step-1); } .cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem 2rem; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); } .cs-meta dt { color: var(--muted); font-size: var(--step--1); } .cs-meta dd { margin: 0; } @media (min-width: 60rem) { .cs-intro { grid-template-columns: 1fr 1fr; grid-template-areas: "title image" "lede image" "meta meta"; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .cs-intro__title { grid-area: title; } .cs-intro__lede { grid-area: lede; } .cs-intro__image { grid-area: image; align-self: center; } .cs-meta { grid-area: meta; } } .cs-intro__image { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 2rem 4rem -1rem var(--shadow-glow); } /* Results — the headline stat */ .headline-stat { display: grid; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); } @media (min-width: 50rem) { .headline-stat { grid-template-columns: auto 1fr; align-items: center; column-gap: clamp(2rem, 5vw, 4rem); } } .headline-stat__number { color: var(--amber); font-size: var(--step-4); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; } .headline-stat__label { margin-top: 0.75rem; font-size: var(--step-1); max-width: 22rem; } /* Before / after bars. Decorative — the numbers are in the text beside them. */ .compare { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; } .compare li { display: grid; gap: 0.375rem; } .compare__label { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step--1); } .compare__label strong { font-size: var(--step-1); font-weight: 600; } .compare__bar { height: 0.75rem; border-radius: 999px; background: var(--track); } .compare__bar--after { width: calc(100% / 7); min-width: 1.5rem; background: var(--amber); } /* Results — supporting stats */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0 0; } .stat { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.5rem; padding: 1.5rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); } /* Number first in the code (dt), label second (dd): read in visual order */ .stat dt { color: var(--amber); font-size: var(--step-3); font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .stat dd { margin: 0; color: var(--text); } .stat a { color: var(--cyan); } /* Results — scale strip */ .scale { margin-top: 1rem; padding: 1.5rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); } .scale h3 { color: var(--muted); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; } .scale dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem 1.5rem; margin: 0; } .scale div { display: flex; flex-direction: column; } .scale dt { color: var(--text); font-size: var(--step-2); font-weight: 600; line-height: 1.1; } .scale dd { margin: 0; color: var(--muted); font-size: var(--step--1); } /* Context */ .cs-context { max-width: var(--measure); font-size: var(--step-1); line-height: 1.45; } /* Problem */ .problem__statement { max-width: var(--measure); font-size: var(--step-2); line-height: 1.3; margin-bottom: 2.5rem; } .problem__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; counter-reset: problem; } .problem__list > li { counter-increment: problem; padding-top: 1rem; border-top: 0.125rem solid var(--amber); } .problem__list h3 { font-size: var(--step-1); margin-bottom: 0.75rem; } .problem__list h3::before { content: "0" counter(problem) " "; color: var(--muted); font-weight: 400; } .problem__list ul { margin: 0; padding-left: 1.1em; color: var(--muted); } .problem__list ul li + li { margin-top: 0.5rem; } /* ========================================================================== Tags ========================================================================== */ .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .tags li { padding: 0.125rem 0.75rem; border: 1px solid var(--tag-line); border-radius: 999px; color: var(--amber-light); font-size: var(--step--1); } /* ========================================================================== Home ========================================================================== */ .home-work { padding-top: var(--page-top); } .work-list { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; } /* The whole card is clickable via the title link's ::after; the only link inside is the title. */ .project { position: relative; display: grid; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); } .project:has(a:hover) { box-shadow: inset 0 0 0 1px var(--cyan); } @media (min-width: 55rem) { .project { grid-template-columns: 1fr 1fr; align-items: start; column-gap: clamp(2rem, 5vw, 4rem); } } .project__body { display: grid; gap: 1.25rem; align-content: start; } .project h2 { font-size: var(--step-3); } .project h2 a { color: inherit; text-decoration: none; } .project h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .project h2 a:focus-visible { outline: none; } .project h2 a:focus-visible::after { outline: 0.1875rem solid var(--cyan); outline-offset: 0.1875rem; } .project > .tags { grid-column: 1 / -1; } .project__cta { color: var(--cyan); font-weight: 600; } .project__stats { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0; } .project__stats div { display: flex; flex-direction: column; } .project__stats dt { color: var(--amber); font-size: var(--step-2); font-weight: 700; line-height: 1.1; } .project__stats dd { margin: 0; color: var(--muted); font-size: var(--step--1); } .project__image { margin: 0; border-radius: calc(var(--radius) / 1.5); overflow: hidden; box-shadow: 0 0 0 1px var(--line); } /* ========================================================================== About ========================================================================== */ .about { display: grid; gap: 2.5rem; padding-top: var(--page-top); } @media (min-width: 55rem) { .about { grid-template-columns: 18rem 1fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; } } /* Pop-out portrait: a cut-out photo whose head breaks out of the top of a circle. The box is 1 : 1.1. The circle fills the bottom square; the image is clipped to that circle at the bottom only, so everything above the circle's widest point stays visible. */ .about__portrait { position: relative; width: min(18rem, 60vw); aspect-ratio: 1 / 1.1; margin: 0; } .about__portrait::before { content: ""; position: absolute; inset: auto 0 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--glow-strong), transparent 65%), var(--panel); box-shadow: inset 0 0 0 0.1875rem var(--amber), 0 2rem 4rem -1rem var(--shadow-glow); } .about__portrait img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: top; /* bottom corners rounded to the circle: horizontal radius 50% of the width, vertical radius half the width as a share of the 1.1 height (≈ 45.45%) */ clip-path: inset(0 round 0 0 50% 50% / 0 0 45.45% 45.45%); } .about h1 { /* 42px on desktop; the original step-3 curve scaled by 0.75 (≈35px tablet, ≈27px phone) */ font-size: clamp(1.6875rem, 1.2rem + 2.1vw, 2.625rem); line-height: 1.25; max-width: 26ch; } .about__bio { display: grid; gap: 1.25rem; max-width: var(--measure); margin-top: 2rem; } .about__bio p:first-child { font-size: var(--step-1); } /* ========================================================================== Case study — text-led sections (The Why Awards) ========================================================================== */ .prose { display: grid; gap: 1.25rem; max-width: var(--measure); } .prose h3 { margin-top: 1rem; font-size: var(--step-1); } .prose ul { margin: 0; padding-left: 1.1em; } .prose li + li { margin-top: 0.5rem; } .outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .outcomes li { padding: 1.5rem; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--step-1); line-height: 1.35; } .outcomes--quiet li { background: none; font-size: var(--step-0); } .subhead { margin: 2.5rem 0 1rem; color: var(--muted); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); } /* ========================================================================== Case study — gated details page ========================================================================== */ .details-intro { padding-top: var(--page-top); } .details-intro__back { display: inline-block; margin-bottom: 1.5rem; } .details-intro h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.02em; line-height: 0.95; } .details-intro .cs-meta { margin-top: 2.5rem; } /* At a glance — compact results strip */ .glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; margin: 2rem 0 0; } .glance div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem; padding: 1.25rem; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); } .glance dt { color: var(--muted); font-size: var(--step--1); line-height: 1.3; } .glance dd { margin: 0; color: var(--amber); font-size: var(--step-2); font-weight: 700; line-height: 1; } /* Page layout with sticky contents */ .details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; margin-top: clamp(3rem, 8vw, 5rem); } @media (min-width: 64rem) { .details { grid-template-columns: 12rem minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 4.5rem); align-items: start; } .toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 2rem); } } .toc h2 { margin-bottom: 0.75rem; color: var(--muted); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); } .toc a { display: block; padding: 0.375rem 0 0.375rem 1rem; color: var(--text); text-decoration: none; } .toc a:hover { color: var(--cyan); text-decoration: underline; } /* Chapters */ .chapter + .chapter { margin-top: clamp(5rem, 11vw, 8rem); } .chapter > h2 { font-size: var(--step-3); margin-bottom: 1.5rem; } .chapter__num { display: block; margin-bottom: 0.375rem; color: var(--muted); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; } .chapter__lede { max-width: var(--measure); font-size: var(--step-1); line-height: 1.45; } .block { margin-top: 3rem; } .block > h3 { margin-bottom: 1rem; font-size: var(--step-1); } .label { margin: 0 0 1rem; color: var(--muted); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* Process map */ .process-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: phase; } .process-map > li { counter-increment: phase; padding: 1.25rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); border-top: 0.25rem solid var(--amber); } .process-map h3 { font-size: var(--step-1); margin-bottom: 0.75rem; } .process-map h3::before { content: "0" counter(phase); display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: var(--step--1); font-weight: 500; } .process-map ul { margin: 0; padding: 0; list-style: none; } .process-map ul li + li { margin-top: 0.375rem; } .process-map a { color: var(--text); text-decoration-color: var(--link-line); } .process-map a:hover { color: var(--cyan); } /* Cards — one per activity */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; } .card { display: grid; align-content: start; gap: 0.75rem; padding: 1.5rem; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 2rem; } .card h3 { font-size: var(--step-1); } .card p { line-height: 1.6; } /* Research findings */ .findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .findings li { padding: 1.25rem 1.5rem; border-left: 0.1875rem solid var(--amber); background: var(--amber-tint); border-radius: 0 var(--radius) var(--radius) 0; } .findings--big li { display: grid; gap: 0.25rem; } .findings__num { color: var(--amber); font-size: var(--step-3); font-weight: 700; line-height: 1; } /* Pull quote */ .pull { margin: 0; padding-left: 1.5rem; border-left: 0.25rem solid var(--cyan); font-size: var(--step-2); line-height: 1.3; max-width: 40rem; } .pull + p { margin-top: 1.5rem; max-width: var(--measure); } /* Figures */ .shot { margin: 0; } .shot__frame { border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: #fff; } .shot figcaption { margin-top: 0.75rem; color: var(--muted); font-size: var(--step--1); } .shot figcaption strong { color: var(--text); font-weight: 600; } .scroll-x { overflow-x: auto; } .scroll-x img { min-width: 50rem; } .screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem 1.5rem; } .tags--plain li { border-color: var(--line); color: var(--text); } /* My role — consolidated */ .role-table { width: 100%; border-collapse: collapse; } .role-table th, .role-table td { padding: 1rem 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; } .role-table th { width: 11rem; padding-right: 1.5rem; color: var(--amber); font-weight: 600; } @media (max-width: 40rem) { .role-table th, .role-table td { display: block; width: auto; } .role-table td { padding-top: 0; border-top: 0; } } /* Full results */ .results-full { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 2rem; } .results-full h3 { margin-bottom: 0.75rem; font-size: var(--step-1); } .results-full ul { margin: 0; padding-left: 1.1em; } .results-full li + li { margin-top: 0.5rem; } .role-table .role-table__phase { width: auto; padding-top: 2rem; border-top: 0; color: var(--muted); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .findings--more { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: 1rem; } .block__text { max-width: var(--measure); margin-bottom: 1.5rem; } /* ========================================================================== Case study — short version ========================================================================== */ .short { max-width: 60rem; } .short .chapter + .chapter { margin-top: clamp(4rem, 9vw, 6rem); } .process-map--steps > li p { color: var(--text-soft); } .full-link { display: grid; gap: 1rem; justify-items: start; margin-top: clamp(4rem, 9vw, 6rem); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); } .full-link h2 { font-size: var(--step-2); } .details-intro__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1.5rem; } .cs-bar { margin: 1.5rem 0 0; } /* Pushed to the far right, away from the reading links. */ .details-intro__logout { margin-left: auto; color: var(--muted); } .check-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; max-width: var(--measure); } .check-list li { position: relative; padding-left: 1.75rem; } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--amber); } .glance__note { max-width: var(--measure); margin-top: 1rem; color: var(--muted); } /* ========================================================================== Lock screen for gated case studies (served by netlify/edge-functions/gate.ts) Error #ff8a80 on panel 8.1:1; field border #8a8a8a 6.1:1; black on cyan 10.3:1. ========================================================================== */ .lock { display: grid; gap: 1.25rem; width: min(100%, 32rem); margin: var(--page-top) auto 0; padding: clamp(1.5rem, 5vw, 2.5rem); border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 2rem 4rem -1rem var(--shadow-glow-soft); } .lock h1 { font-size: var(--step-3); } .lock__form { display: grid; gap: 0.5rem; margin-top: 0.5rem; } .lock__form label { font-weight: 600; } .lock__error { color: var(--error); font-weight: 600; } .lock__row { display: flex; flex-wrap: wrap; gap: 1rem; } /* Input with the show/hide icon button sitting inside its right edge. */ .lock__field { position: relative; flex: 1 1 14rem; } .lock__field input { width: 100%; padding: 0.625rem 3rem 0.625rem 0.875rem; border: 0.125rem solid var(--field-border); border-radius: 0.5rem; background: var(--field-bg); color: var(--text); font: inherit; } .lock__field input[aria-invalid="true"] { border-color: var(--error); } .lock__toggle { position: absolute; top: 50%; right: 0.375rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 0.375rem; background: transparent; color: var(--muted); cursor: pointer; transform: translateY(-50%); } .lock__toggle:hover { color: var(--cyan); } .lock__toggle svg { width: 1.375rem; height: 1.375rem; } .lock__submit { flex: 0 0 auto; padding: 0.625rem 1.5rem; border: 0.125rem solid var(--cyan); border-radius: 999px; background: var(--cyan); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer; } .lock__submit:hover { background: transparent; color: var(--cyan); } .lock__request { padding-top: 1.25rem; border-top: 1px solid var(--line); } .lock-back { width: min(100%, 32rem); margin: 1.5rem auto 0; } /* Core flow, journey stages and user pains (NEO case study) */ .flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: step; } .flow li { counter-increment: step; padding: 1.25rem; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-top: 0.25rem solid var(--cyan); font-weight: 600; line-height: 1.3; } .flow li::before { content: "0" counter(step); display: block; margin-bottom: 0.5rem; color: var(--muted); font-size: var(--step--1); font-weight: 500; } /* ========================================================================== AS IS journey map (NEO full case study) Desktop: stages as columns, time bands spanning the stages they cover. Narrow screens: a vertical timeline. ========================================================================== */ .jmap { --cols: 6; display: grid; gap: 1.5rem; container-type: inline-size; } .jmap__stages { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .jmap__stage { position: relative; display: grid; align-content: start; gap: 0.75rem; padding: 0 0 2rem 2rem; border-left: 0.125rem solid var(--line); } /* Timeline dot */ .jmap__stage::before { content: ""; position: absolute; top: 0.35rem; left: -0.5rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0.25rem var(--bg); } .jmap__name { margin: 0; color: var(--amber); font-size: var(--step-0); line-height: 1.3; } .jmap__num { display: block; color: var(--muted); font-size: var(--step--1); font-weight: 500; } .jmap__pains { display: grid; align-content: start; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .jmap__pains li { padding: 0.75rem 1rem; border-left: 0.1875rem solid var(--error); border-radius: 0 0.5rem 0.5rem 0; background: var(--error-tint); font-size: var(--step--1); line-height: 1.4; } .jmap__bands { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .jmap__band { padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--cyan-tint); box-shadow: inset 0 0 0 1px var(--cyan-tint-line); } .jmap__band strong { color: var(--cyan); } .jmap__range { display: block; color: var(--muted); font-size: var(--step--1); } @container (min-width: 50rem) { .jmap__stages, .jmap__bands { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 0.75rem; } /* Subgrid keeps every column's pains starting on the same line, even when a stage name wraps onto two lines. */ .jmap__stages { grid-template-rows: auto auto; } .jmap__stage { grid-row: span 2; grid-template-rows: subgrid; padding: 1.5rem 0 0; border-left: 0; border-top: 0.125rem solid var(--line); } .jmap__stage::before { top: -0.5rem; left: 0; } /* Bands start at Idea and span the stages they cover. */ .jmap__band { grid-column: 1 / span var(--span); } .jmap__range { display: inline; margin-left: 0.5rem; } } /* ========================================================================== Screenshot lightbox + carousel (js/gallery.js) ========================================================================== */ .shot__zoom { position: relative; display: block; cursor: zoom-in; } .shot__hint { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: rgb(0 0 0 / 80%); color: #f2f2f2; /* on a dark chip over the image in both themes */ font-size: var(--step--1); font-weight: 600; opacity: 0; } .shot__zoom:hover .shot__hint, .shot__zoom:focus-visible .shot__hint { opacity: 1; } @media (hover: none) { .shot__hint { opacity: 1; } } .lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem); border: 0; background: var(--lightbox-bg); color: var(--text); } .lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; } .lightbox::backdrop { background: rgb(0 0 0 / 60%); } .lightbox__bar { display: flex; justify-content: space-between; align-items: center; width: min(100%, 72rem); margin-inline: auto; } .lightbox__count { color: var(--muted); } .lightbox__close { padding: 0.5rem 1.25rem; border: 0.125rem solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; } .lightbox__close:hover { border-color: var(--cyan); } /* Image and caption stay together, centred in the space under the bar. */ .lightbox__figure { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.75rem; min-height: 0; margin: 0; /* Leave room at the sides for the arrow buttons on wide screens. */ padding-inline: clamp(0rem, 6vw, 5rem); } .lightbox__img { width: auto; max-width: 100%; height: auto; min-height: 0; max-height: 100%; flex: 0 1 auto; object-fit: contain; border-radius: 0.5rem; background: #fff; } .lightbox__caption { font-weight: 600; } .lightbox__nav { position: fixed; top: 50%; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0.125rem solid var(--line); border-radius: 50%; background: var(--overlay); color: var(--text); cursor: pointer; transform: translateY(-50%); } .lightbox__nav:hover { border-color: var(--cyan); color: var(--cyan); } .lightbox__nav svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lightbox__nav--prev { left: max(1rem, env(safe-area-inset-left, 0px)); } .lightbox__nav--next { right: max(1rem, env(safe-area-inset-right, 0px)); } /* On phones the arrows sit at the bottom, clear of the image. */ @media (max-width: 40rem) { .lightbox[open] { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem); } .lightbox__nav { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); transform: none; } } @media (prefers-reduced-motion: no-preference) { .lightbox[open] { animation: lightbox-in 150ms ease-out; } .shot__hint { transition: opacity 150ms; } } @keyframes lightbox-in { from { opacity: 0; } } .flow-shot { max-width: 44rem; margin-top: 2rem; } /* My role: intro and summary above the detailed table */ .role-intro { max-width: var(--measure); font-size: var(--step-1); line-height: 1.45; } .role-summary { margin: 1.5rem 0 2.5rem; } /* Personal working-style note inside an activity card */ .card__note { margin: 0.25rem 0 0; padding: 0.75rem 1rem; border-left: 0.1875rem solid var(--amber); border-radius: 0 0.5rem 0.5rem 0; background: var(--amber-tint-strong); font-style: italic; line-height: 1.5; } /* ========================================================================== NEO case study (concise style) — used by /neo and /neo/full ========================================================================== */ .version-tag { padding: 0.125rem 0.75rem; border-radius: 999px; background: var(--amber-tint-tag); color: var(--amber); font-size: var(--step--1); font-weight: 600; } .card__fact strong { display: block; color: var(--amber); font-size: var(--step-2); line-height: 1.1; } .card__list { display: grid; gap: 0.375rem; margin: 0; padding-left: 1.1em; } /* Problem → Idea → Proof → Outcome */ .steps-list { display: grid; gap: 0.75rem; max-width: 44rem; margin: 1.5rem 0 0; } .steps-list div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.875rem 1.25rem; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); } .steps-list dt { color: var(--amber); font-weight: 600; } .steps-list dd { margin: 0; } @media (max-width: 30rem) { .steps-list div { grid-template-columns: 1fr; gap: 0.25rem; } } /* Collapsible detail (native
) */ .more { margin-top: 1rem; } .more summary { display: inline-block; padding: 0.5rem 1.25rem; border: 0.125rem solid var(--line); border-radius: 999px; color: var(--cyan); font-weight: 600; cursor: pointer; } .more summary::-webkit-details-marker { display: none; } .more summary::before { content: "▸"; content: "▸" / ""; display: inline-block; margin-right: 0.5rem; } .more[open] summary::before { transform: rotate(90deg); } @media (prefers-reduced-motion: no-preference) { .more summary::before { transition: transform 150ms; } } .more summary:hover { border-color: var(--cyan); } .more[open] summary { margin-bottom: 1rem; } /* A lead-in sentence followed by its list needs breathing room (v2 Context) */ .cs-context + .check-list { margin-top: 1.25rem; } /* Results: outcome highlights with their "before" (NEO pages) */ .highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin-top: 1rem; } .highlights + .scale { margin-top: 1rem; } .highlight { display: grid; align-content: start; gap: 0.5rem; padding: 1.5rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); } .highlight p { color: var(--muted); } .highlight .highlight__title { color: var(--text); font-size: var(--step-1); line-height: 1.3; } .highlight__title strong { color: var(--amber); } /* Research findings: every card has a highlight title and a short description */ .findings--titled { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .findings--titled li { display: grid; align-content: start; gap: 0.25rem; } .findings__title { color: var(--amber); font-size: var(--step-2); font-weight: 700; line-height: 1.1; } /* AS IS journey: developers' own questions, shown as quotes */ .label--voices { margin-top: 2rem; } .voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .voices li { padding: 0.875rem 1.125rem; border-left: 0.1875rem solid var(--cyan); border-radius: 0 0.5rem 0.5rem 0; background: var(--cyan-tint-soft); font-style: italic; line-height: 1.4; } .about__cta { margin-top: 0.5rem; } /* Theme switch (header). Icon-only button with an accessible name set by js/theme.js. */ .site-nav .site-nav__theme { align-self: center; } .theme-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: -0.5rem 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; } .theme-toggle:hover { color: var(--cyan); } .theme-toggle svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* Show the icon of the theme you would switch TO */ .theme-toggle .icon-sun { display: none; } :root[data-theme-effective="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme-effective="dark"] .theme-toggle .icon-moon { display: none; } /* No preview flag: the switch stays hidden, so drop its empty menu slot too */ .site-nav__theme:has(.theme-toggle[hidden]) { display: none; } /* Narrow screens (below the About two-column breakpoint): centre the About portrait and the footer */ @media (max-width: 54.99rem) { .about__portrait { justify-self: center; } .site-footer { text-align: center; } .contact-list { justify-content: center; } }