/* ═══════════════════════════════════════════════════════════════════════════════════════════ MOSTLY HUMAN — CANDIDATE 1 feel/her-own-page Rebuilt from the full-page screenshot of her site as it stood BEFORE the edits. The first attempt borrowed her colours and her devices but not her manners, and it read as a different site wearing her palette. What actually makes a page hers: · ONE GROUND. Yellow, edge to edge, top to bottom. No cream panel, no black band. The only things that interrupt it are the photographs and the small black buttons. · LABELS ARE SMALL SERIF. "About me", "My services", "Conditions for treatment", "Pillars of care" — set in the same serif as everything else, at reading size, lowercase. Not uppercase sans with a rule in front, which is a different design language entirely. · STATEMENTS ARE HUGE AND JUSTIFIED. Left-aligned, running the full measure, the last line dropping short. They carry the page, not the section headings. · ASYMMETRY AND AIR. A small label in a narrow left column, the content in a wider right one, and a great deal of empty yellow between sections. · BANDS ARE WIDE AND SHORT — about 4:1 — with a flat yellow circle or triangle over them. Complete and standalone: this file is everything index.html needs. ═══════════════════════════════════════════════════════════════════════════════════════════ */ :root { --yellow: #FFC700; /* sampled from her live hero */ --ink: #101010; --ink-70: rgba(16,16,16,.74); --rule: rgba(16,16,16,.2); --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --sans: "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --pad: 20px; } @media (min-width: 760px) { :root { --pad: 44px } } @media (min-width: 1240px) { :root { --pad: 64px } } * { box-sizing: border-box } html { -webkit-text-size-adjust: 100% } body { margin: 0; background: var(--yellow); color: var(--ink); font: 400 15.5px/1.72 var(--sans); letter-spacing: .1px } img { max-width: 100%; display: block } a { color: inherit } .wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-inline: var(--pad) } .skip { position: absolute; left: -9999px } .skip:focus { left: 12px; top: 12px; background: var(--ink); color: var(--yellow); padding: 10px 16px; z-index: 99 } /* ── type ─────────────────────────────────────────────────────────────────────────────────── One family for nearly everything. The H1 is the largest thing on the page and capped at 64px; the statements sit just under it, which is the proportion her page runs at. */ h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.5px } h1 { font-size: clamp(38px, 8.4vw, 64px); line-height: 1.0 } h2 { font-size: clamp(28px, 5.2vw, 60px); line-height: 1.04 } h3 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.2; letter-spacing: -.2px } p { margin: 0 0 1.1em; max-width: 62ch } /* the small serif label — her section marker, and the single most characteristic piece of the page */ .label { font-family: var(--serif); font-size: clamp(18px, 2.1vw, 23px); line-height: 1.25; letter-spacing: -.2px; margin: 0 0 18px; max-width: 14ch } /* her big statements: full measure, justified, last line short */ .say { font-family: var(--serif); font-size: clamp(28px, 5.2vw, 60px); line-height: 1.05; letter-spacing: -.6px; margin: 0; max-width: 24ch; text-align: justify; text-align-last: left } @media (max-width: 680px) { .say { text-align: left; max-width: none } } /* ── buttons ──────────────────────────────────────────────────────────────────────────────── Small, black, one solid and one outline. Hers are modest — they never compete with the type. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 26px; font: 500 14px/1 var(--sans); letter-spacing: .2px; text-decoration: none; background: var(--ink); color: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px; transition: .18s ease } .btn:hover { background: transparent; color: var(--ink) } .btn-ghost { background: transparent; color: var(--ink) } .btn-ghost:hover { background: var(--ink); color: var(--yellow) } /* ── navigation — small, light, a pill on the right ─────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 40; background: var(--yellow) } .nav .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px } .brand { font-family: var(--serif); font-size: 22px; letter-spacing: -.5px; text-decoration: none; margin-right: auto; display: flex; align-items: center; min-height: 46px } .brand em { font-style: italic } .nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: 26px } .nav-links a { text-decoration: none; font-size: 14px; display: flex; align-items: center; min-height: 44px } .nav-links a:hover, .nav-links a[aria-current] { text-decoration: underline; text-underline-offset: 5px } .nav .btn { display: none; min-height: 40px; padding: 10px 22px; font-size: 13px } .burger { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: none; border: 1.5px solid var(--ink); border-radius: 999px; cursor: pointer; padding: 0 } .burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink) } .burger span::before { top: -5px } .burger span::after { top: 5px } .drawer { display: none; padding: 6px 0 22px } .drawer.open { display: block } .drawer a { display: block; text-decoration: none; font-family: var(--serif); font-size: 22px; padding: 12px 0; border-bottom: 1px solid var(--rule) } .drawer .btn { margin-top: 20px; width: 100% } @media (min-width: 900px) { .nav-links, .nav .btn { display: flex } .burger { display: none } .drawer { display: none !important } } /* ── the rhythm: label in a narrow left column, content in a wider right one ──────────────── */ .sec { padding: clamp(46px, 7vw, 104px) 0 } .sec-tight { padding: clamp(30px, 4vw, 56px) 0 } .row { display: grid; gap: 18px } @media (min-width: 900px) { .row { grid-template-columns: 260px minmax(0, 1fr); gap: 60px } } @media (min-width: 1140px) { .row { grid-template-columns: 320px minmax(0, 1fr); gap: 80px } } .row .label { margin-bottom: 0 } .prose p { font-size: 15.5px; max-width: 58ch } .prose .btn { margin-top: 12px } /* ── photographs: wide, short, with a flat yellow shape over them ─────────────────────────── */ .band { position: relative; overflow: hidden; aspect-ratio: 4/1 } @media (max-width: 680px) { .band { aspect-ratio: 16/9 } } .band img { width: 100%; height: 100%; object-fit: cover } .shape { position: absolute; background: var(--yellow) } .shape .row2 { position: absolute; left: 50%; translate: -50% 0; display: flex; justify-content: space-between; align-items: baseline; white-space: nowrap; font: 400 clamp(8.5px, .82vw, 12px)/1 var(--sans); letter-spacing: .3px } .shape .row2 i { font-style: normal; opacity: .7 } /* the circle nearly fills the band's height, as hers does */ .shape.circle { border-radius: 50%; height: 116%; aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -50% } .shape.circle .row2 { top: 50%; width: 82%; translate: -50% -50% } .shape.tri { height: 100%; top: 0; left: 50%; translate: -50% 0; width: min(38%, 460px); clip-path: polygon(50% 0, 100% 100%, 0 100%) } .shape.tri .row2 { bottom: 9%; width: 62% } /* ── the marquee — pauses on click, never on hover, no visible control ───────────────────── */ .marquee { overflow: hidden; padding: clamp(18px,3vw,34px) 0; cursor: pointer; user-select: none } .marquee-track { display: flex; gap: 54px; width: max-content; animation: slide 48s linear infinite } .marquee.paused .marquee-track { animation-play-state: paused } .marquee span { font-family: var(--serif); font-size: clamp(30px, 6vw, 68px); line-height: 1.05; letter-spacing: -.8px; white-space: nowrap } @keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none } } /* ── conditions for treatment ───────────────────────────────────────────────────────────── */ .ico { width: clamp(34px, 4vw, 46px); height: clamp(34px, 4vw, 46px); display: block; margin-bottom: 16px; color: rgba(16,16,16,.42) } .sprite { position: absolute; width: 0; height: 0; overflow: hidden } .cond { display: grid; gap: 30px 24px; margin-top: 6px } @media (min-width: 620px) { .cond { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 980px) { .cond { grid-template-columns: repeat(4, 1fr); gap: 26px } } .cond-name { font: 500 13px/1.4 var(--sans); letter-spacing: .2px; margin: 0 0 8px } .cond-list { list-style: none; margin: 0; padding: 0 } .cond-list li { font-size: 13.5px; line-height: 1.8; color: var(--ink-70) } /* ── pillars of care — a plate on the left, three words on the right ─────────────────────── */ .plate { display: grid; gap: 24px; align-items: center } @media (min-width: 860px) { .plate { grid-template-columns: 1.05fr 1fr; gap: 60px } } .plate img { width: 100%; aspect-ratio: 3/2; object-fit: cover } .words { font-family: var(--serif); font-size: clamp(34px, 5.6vw, 62px); line-height: 1.02; letter-spacing: -.8px; margin: 8px 0 0 } .words span { display: block } .words em { font-style: italic } /* ── the FAQ — her label on the left, the questions on the right ─────────────────────────── */ .faq details { border-bottom: 1px solid var(--rule) } .faq details:first-of-type { border-top: 1px solid var(--rule) } .faq summary { list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: baseline; padding: 16px 0; font-size: 14.5px; line-height: 1.5; min-height: 44px } .faq summary::-webkit-details-marker { display: none } .faq summary::after { content: "+"; margin-left: auto; font: 300 20px/1 var(--sans); opacity: .6; transition: transform .2s } .faq details[open] summary::after { transform: rotate(45deg) } .faq .a { padding: 0 0 18px } .faq .a p { margin: 0; font-size: 14.5px; color: var(--ink-70); max-width: 62ch } /* ── footer — on the yellow, like the rest of the page ───────────────────────────────────── */ .foot { padding: clamp(50px,7vw,96px) 0 34px } .foot .top { display: grid; gap: 26px } @media (min-width: 860px) { .foot .top { grid-template-columns: 1fr 1fr; gap: 60px } } .foot h2 { font-size: clamp(26px,3.4vw,40px); line-height: 1.1 } .foot ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px } .foot li { font-size: 13.5px; line-height: 2; break-inside: avoid } .foot .bot { margin-top: clamp(40px,6vw,76px); padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: var(--ink-70) } .foot a { text-decoration: none } .foot a:hover { text-decoration: underline; text-underline-offset: 3px } /* matched against her page: the circle sits INSIDE the band rather than being clipped by it, the conditions run full width under their label, and the closing lines are left-aligned — justifying a three-word line opens gaps you could park a car in */ .shape.circle { height: 96% } .say-plain { text-align: left } .cond { margin-top: 30px } /* three corrections from looking at the render beside her page */ .shape.circle { height: 88% } /* was clipping flat against the band edge */ .shape.tri { width: min(28%, 400px) } /* hers is near-equilateral, not a squat wedge */ .marquee span { font-size: clamp(30px, 5.4vw, 60px) } /* 68px outranked the 64px H1 */ .foot .bot a { display: inline-flex; align-items: center; min-height: 44px } /* was 22px on a phone */ /* ── the footer's bottom row sits on one line ─────────────────────────────────────────────── The email had gained min-height:44px for the tap target while the states span had not, so in a stretch-aligned flex row one centred itself in a 44px box and the other sat at the top of it. Both get the same height and the row centres them against each other. */ .foot .bot { align-items: center } .foot .bot > * { display: inline-flex; align-items: center; min-height: 44px } /* ── the condition marks: bigger, and white the way hers are ───────────────────────────────── */ .ico { width: clamp(54px, 6vw, 78px); height: clamp(54px, 6vw, 78px); color: #fff; margin-bottom: 20px } /* ── brand hierarchy above semantic hierarchy ─────────────────────────────────────────────── "We Are Mostly Human…" is the dominant opening statement because that is the identity she wants back. It is a
, not a heading, so it takes no semantic weight. The document's H1 sits under it at a size that is still unmistakably a page title — visible, meaningful, and no longer forced to be the biggest thing on the screen, which was never a requirement in the first place. */ .hero-eyebrow, .eyebrow { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2vw, 22px); margin: 0 0 22px; opacity: .8 } h1 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.16; letter-spacing: -.2px; max-width: 26ch } /* with the H1 no longer capping the page, her statements go back to their own scale */ .say { font-size: clamp(30px, 6vw, 72px) } .marquee span { font-size: clamp(32px, 6.4vw, 76px) } .words { font-size: clamp(36px, 6vw, 68px) } .hero-lede, .sec-tight .lede { font-size: clamp(15.5px, 1.6vw, 17px); line-height: 1.7; max-width: 58ch; margin: 26px 0 0 } .hero-act { margin: 28px 0 0; max-width: none } /* the H1 sits at the head of the prose column now, under the band */ .prose h1 { margin-bottom: 18px } .prose .hero-act { margin-top: 26px } /* ── the brand statement ──────────────────────────────────────────────────────────────────── One line, stretched across the measure, the way her hero sets it. The size is derived, not guessed: this line renders at 7.635 x its font-size, so the size that fills the column is the column width / 7.72 (the extra 1% keeps it off the edge). It is measured from the CONTAINER, not the viewport, so it keeps filling as the side padding changes across breakpoints — a viewport coefficient fits at one width and falls to 75% on a phone. Two things that cost me a pass each: cqi silently falls back to the viewport when no ancestor actually matches the container-type selector, and once the container IS anchored, cqi is already the content box, so subtracting the padding again double-counts it. letter-spacing is in em because a fixed -2px removes 2.9% of the line at 154px and 12.5% at 45px. Measured fill: 99.1-99.3% from 390px to 1920px, no overflow at any width. */ [data-section="hero"] .wrap { container-type: inline-size } .brand-headline { font-family: var(--serif); margin: 0; line-height: 1.02; letter-spacing: -.013em; /* phone: it wraps, and is sized to the viewport rather than stretched */ font-size: clamp(38px, 11.6vw, 62px); } /* From 760 up it is one line filling about TWO THIRDS of the measure, which is the proportion her hero actually uses — stretching it to the full column made it shout. 7.635 x font-size is the rendered line, and 0.68 of the column is the target, so the divisor is 7.635 / 0.68 = 11.2. */ @media (min-width: 760px) { .brand-headline { white-space: nowrap; font-size: min(7.6vw, 108px); /* fallback: no container queries */ font-size: calc(100cqi / 11.2); } } /* ── the bands, to her proportions ────────────────────────────────────────────────────────── Measured off her page: the band is about 2.2:1, not the 4:1 I had, and the triangle spans close to half its width — roughly as wide as it is tall. Mine was 28% of the width inside a band too shallow to hold it, so it read as a tight wedge rather than a shape with room around it. */ .band { aspect-ratio: 2.2 } @media (max-width: 680px) { .band { aspect-ratio: 4/3 } } .shape.tri { width: 47% } .shape.tri .row2 { bottom: 6%; width: 78% } /* The triangle is INSET in the band, not flush with it. Measured off her page: roughly 4.5% of the band height clear at the top and the same at the bottom, so a strip of photograph runs beneath the base. Without that strip the base meets the band's bottom edge and the shape melts into the yellow section below it — the triangle stops reading as a shape laid on a photograph. */ .shape.tri { top: 4.5%; height: 91% } /* The FAQ question is the smallest interactive text on the page, and the only place a question is set smaller than the answer it opens. 17.5px brings it level with the reading copy without turning the accordion into a list of headings. */ .faq summary { font-size: 17.5px; line-height: 1.45 } /* ── her own logo in place of the wordmark ────────────────────────────────────────────────── Black on transparent, so it needs no treatment against the yellow. Height is fixed and the width follows, so the mark keeps its drawn proportions instead of being stretched to a box. */ .brand { min-height: 46px; display: flex; align-items: center; padding: 6px 0 } .brand img { height: 34px; width: auto; display: block } @media (max-width: 480px) { .brand img { height: 28px } }