/* Anna Moran — site styles. Built from the Anna Moran Design System: six colours, Zilla Slab + Inter + Cormorant italic, the hand-drawn shape kit, flat editorial surfaces. Page rhythm: full-bleed colour-blocked sections, each one a different ground. */ @import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@600;700&family=Inter:wght@400;500;600&family=Cormorant:ital,wght@1,500;1,600&family=Caveat:wght@600&display=swap"); :root { /* Palette: six colours, and only six */ --am-terracotta: #d75f36; --am-forest: #2f4f3e; --am-ink: #2a2520; --am-bone: #f8f4ee; --am-cream: #efe7da; --am-putty: #d4c4ac; /* Tints, all from the one warm dark or from bone */ --am-ink-soft: rgba(42, 37, 32, 0.74); --am-hair: rgba(42, 37, 32, 0.16); --am-bone-soft: rgba(248, 244, 238, 0.84); --am-bone-faint: rgba(248, 244, 238, 0.64); --am-bone-hair: rgba(248, 244, 238, 0.2); /* Small terracotta text on light grounds: a deeper step of the same hue so 12–16px text passes 4.5:1. Big type, buttons and shapes use the true colour. */ --am-terracotta-text: #b44a24; --am-font-display: "Zilla Slab", Georgia, serif; --am-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --am-font-accent: "Cormorant", Georgia, serif; --am-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --am-duration: 220ms; --gutter: clamp(20px, 5vw, 72px); --content-max: 1200px; --section-y: clamp(80px, 11vw, 144px); } /* ── Base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--am-bone); color: var(--am-ink); font-family: var(--am-font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } h1, h2, h3 { margin: 0; font-family: var(--am-font-display); font-weight: 700; } :focus-visible { outline: 2px solid var(--am-terracotta); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--am-bone); color: var(--am-ink); padding: 10px 16px; border-radius: 4px; font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ── Grounds (full-bleed colour blocks) ───────────────── */ .wrap { width: 100%; max-width: calc(var(--content-max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .band { position: relative; padding: var(--section-y) 0; overflow: hidden; } .band > .wrap { position: relative; } .band--bone { background: var(--am-bone); } .band--cream { background: var(--am-cream); } .band--putty { background: var(--am-putty); } .band--forest { background: var(--am-forest); color: var(--am-bone); } .band--ink { background: var(--am-ink); color: var(--am-bone); } .grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("../img/grain.png"); opacity: 0.06; mix-blend-mode: multiply; } .band--forest.grain::before, .band--ink.grain::before { opacity: 0.1; } /* Dark grounds flip the text colours */ .on-dark { color: var(--am-bone); } .band--forest h1, .band--forest h2, .band--forest h3, .band--ink h1, .band--ink h2, .band--ink h3 { color: var(--am-bone); } .band--forest p, .band--ink p { color: var(--am-bone-soft); } /* ── Type ─────────────────────────────────────────────── */ .eyebrow { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4; color: var(--am-terracotta-text); margin: 0 0 28px; } .eyebrow::before { content: ""; width: 32px; height: 1.5px; background: currentColor; flex: 0 0 auto; } .band--forest .eyebrow, .band--ink .eyebrow { color: var(--am-putty); } .band--forest .eyebrow::before, .band--ink .eyebrow::before { background: var(--am-terracotta); } .display { font-size: clamp(48px, 8.4vw, 118px); line-height: 0.95; letter-spacing: -0.032em; color: inherit; } .h2 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.028em; } .h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -0.018em; } /* The accent: a Cormorant italic word or line in terracotta, set into the slab */ .acc { font-family: var(--am-font-accent); font-style: italic; font-weight: 600; color: var(--am-terracotta); letter-spacing: -0.01em; font-size: 1.1em; line-height: 0.9; } .band--forest .acc, .band--ink .acc { color: #e27a53; } /* lifts the accent on dark grounds */ .stop { color: var(--am-terracotta); } .lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--am-ink-soft); } .band--forest .lead, .band--ink .lead { color: var(--am-bone-soft); } .muted { color: var(--am-ink-soft); } .italic-line { font-family: var(--am-font-accent); font-style: italic; font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; color: var(--am-forest); } .micro { font-size: 14px; color: var(--am-ink-soft); margin-top: 18px; } .band--forest .micro, .band--ink .micro { color: var(--am-bone-faint); } /* ── Buttons & links ──────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--am-font-body); font-weight: 600; font-size: 16px; line-height: 1; padding: 18px 26px; border-radius: 4px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background var(--am-duration) var(--am-ease), color var(--am-duration) var(--am-ease), border-color var(--am-duration) var(--am-ease); } .btn--primary { background: var(--am-terracotta); color: var(--am-bone); } .btn--primary:hover { background: #c1512b; } .btn--ghost { color: var(--am-bone); border-color: var(--am-bone-hair); } .btn--ghost:hover { border-color: var(--am-bone); } .btn--small { padding: 12px 18px; font-size: 14.5px; } .btn .arr { transition: transform var(--am-duration) var(--am-ease); } .btn:hover .arr { transform: translateX(3px); } /* Tracked caps link: "READ THE FULL STORY →" */ .more { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--am-ink); text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid var(--am-terracotta); transition: color var(--am-duration) var(--am-ease), gap var(--am-duration) var(--am-ease); } .more:hover { color: var(--am-terracotta-text); gap: 14px; } .band--forest .more, .band--ink .more { color: var(--am-bone); } .band--forest .more:hover, .band--ink .more:hover { color: var(--am-putty); } .link { font-weight: 600; color: var(--am-terracotta-text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .link:hover { color: var(--am-ink); } .band--forest .link, .band--ink .link { color: var(--am-bone); text-decoration-color: var(--am-terracotta); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 44px; } /* ── Placeholders (photos) ────────────────────────────── */ .ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 24px; text-align: center; background: var(--am-cream); border: 1.5px dashed rgba(42, 37, 32, 0.28); color: var(--am-ink-soft); font-size: 14px; line-height: 1.45; } .ph__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-terracotta-text); } .ph__note { max-width: 24em; } .ph--portrait { aspect-ratio: 4 / 5; } .ph--land { aspect-ratio: 3 / 2; } .ph--cinema { aspect-ratio: 21 / 9; } .ph--arch { aspect-ratio: 4 / 5.2; border-radius: 999px 999px 4px 4px; } .ph--avatar { width: 72px; height: 72px; padding: 0; border-radius: 50%; flex: 0 0 auto; } .ph--avatar .ph__tag { font-size: 9px; letter-spacing: 0.1em; } .band--cream .ph, .band--putty .ph { background: var(--am-bone); } .band--forest .ph, .band--ink .ph { background: rgba(248, 244, 238, 0.07); border-color: rgba(248, 244, 238, 0.34); color: var(--am-bone-soft); } .band--forest .ph__tag, .band--ink .ph__tag { color: var(--am-putty); } /* Real photos: same frames as the placeholders */ .photo { display: block; width: 100%; height: auto; object-fit: cover; object-position: 50% 30%; background: var(--am-cream); } .photo--portrait { aspect-ratio: 4 / 5; } .photo--land { aspect-ratio: 3 / 2; object-position: 50% 26%; } .photo--cinema { aspect-ratio: 21 / 9; object-position: 50% 24%; } .photo--arch { aspect-ratio: 4 / 5.2; border-radius: 999px 999px 4px 4px; } .card .photo { margin-bottom: 26px; } /* ── Header ───────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--am-forest); color: var(--am-bone); border-bottom: 1px solid var(--am-bone-hair); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; } .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .logo svg { width: 34px; height: 34px; color: var(--am-terracotta); } .logo span { font-family: var(--am-font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; } .nav { display: flex; align-items: center; gap: 34px; } .nav a:not(.btn) { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-bone-soft); text-decoration: none; padding: 6px 0; position: relative; transition: color var(--am-duration) var(--am-ease); } .nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--am-bone); } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--am-terracotta); } .nav-toggle { display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--am-bone); } .nav-toggle svg { width: 26px; height: 26px; } @media (max-width: 880px) { .nav-toggle { display: block; } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--am-forest); border-bottom: 1px solid var(--am-bone-hair); padding: 8px var(--gutter) 28px; } .nav.is-open { display: flex; } .nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--am-bone-hair); font-size: 13px; } .nav a[aria-current="page"]::after { display: none; } .nav .btn { margin-top: 24px; } } /* ── Two-column heads (headline left, words right) ───── */ .head2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px clamp(40px, 7vw, 120px); align-items: end; margin-bottom: clamp(56px, 7vw, 96px); } .head2 .lead { max-width: 30em; } @media (max-width: 880px) { .head2 { grid-template-columns: 1fr; align-items: start; } } /* ── Hero (home) ──────────────────────────────────────── */ .hero { padding: clamp(64px, 9vw, 120px) 0 clamp(80px, 10vw, 136px); } .hero__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(48px, 7vw, 110px); align-items: center; } .hero .lead { margin-top: 36px; max-width: 32em; } .hero__media { position: relative; padding: 8% 8% 0 0; } .hero__media .orbit { position: absolute; left: -16%; top: -1%; width: 132%; max-width: none; height: 110%; color: var(--am-terracotta); pointer-events: none; } .hero__media .ph { position: relative; } .sat-dot { position: absolute; border-radius: 50%; background: var(--am-terracotta); } .hero .watermark { position: absolute; right: -2vw; bottom: -0.16em; font-family: var(--am-font-display); font-weight: 700; font-size: clamp(260px, 36vw, 560px); line-height: 0.7; letter-spacing: -0.04em; color: #000; opacity: 0.1; pointer-events: none; user-select: none; } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { max-width: 380px; } } /* Claude Certified Associate badge */ .badge-sticker { position: absolute; z-index: 3; width: clamp(96px, 11vw, 150px); height: auto; aspect-ratio: 1 / 1; left: -10%; bottom: 4%; transform: rotate(-8deg); filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18)); } .cred { display: flex; align-items: center; gap: 16px; margin: 28px 0 0; } .cred img { width: 64px; height: 64px; flex: 0 0 auto; } .cred span { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--am-ink-soft); line-height: 1.5; } .cred strong { display: block; color: var(--am-ink); letter-spacing: 0.12em; } .cred--dark span { color: var(--am-bone-faint); } .cred--dark strong { color: var(--am-bone); } .foot-cred { display: inline-flex; align-items: center; gap: 10px; } .foot-cred img { width: 30px; height: 30px; } @media (max-width: 900px) { .badge-sticker { left: -4%; } } /* ── Problem ──────────────────────────────────────────── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(48px, 8vw, 128px); align-items: start; } .split__body { padding-top: 12px; } .split__body p { color: var(--am-ink-soft); } .split__pull { margin-top: 48px; padding-left: 28px; border-left: 3px solid var(--am-terracotta); } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } } /* ── Numbered columns (ways, trust) ───────────────────── */ .cols { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 48px clamp(32px, 4vw, 64px); } .col { padding-top: 28px; border-top: 1.5px solid var(--am-ink); display: flex; flex-direction: column; } .band--forest .col, .band--ink .col { border-top-color: var(--am-bone-hair); } .col__n { font-family: var(--am-font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--am-terracotta-text); margin-bottom: 22px; } .band--forest .col__n { color: var(--am-putty); } .band--ink .col__n { color: #e27a53; } .col h3 { margin-bottom: 18px; } .col__for { font-weight: 600; color: var(--am-ink); margin-bottom: 14px; } .col p { color: var(--am-ink-soft); font-size: 16.5px; } .col .more { margin-top: auto; align-self: flex-start; } .band--forest .col p, .band--ink .col p { color: var(--am-bone-soft); } .band--forest .col__for, .band--ink .col__for { color: var(--am-bone); } .col__foot { margin-top: 32px; } .col--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 0.9fr 1.3fr auto; gap: 20px 48px; align-items: start; border-top-width: 1px; border-top-color: var(--am-hair); } .col--wide .col__n { margin: 0; } @media (max-width: 880px) { .cols { grid-template-columns: 1fr; } .col--wide { grid-template-columns: 1fr; } } /* ── Stories ──────────────────────────────────────────── */ .story { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 40px clamp(40px, 6vw, 96px); align-items: center; } .story + .story { margin-top: clamp(80px, 10vw, 128px); } .story--flip .story__media { order: 2; } .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-ink-soft); margin-bottom: 22px; } .meta b { color: var(--am-terracotta-text); font-weight: 600; } .meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; } .band--forest .meta, .band--ink .meta { color: var(--am-bone-faint); } .band--forest .meta b { color: var(--am-putty); } .band--ink .meta b { color: #e27a53; } .story__quote { margin: 0; font-family: var(--am-font-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.12; letter-spacing: -0.02em; color: var(--am-ink); } .story__quote::before { content: "\201C"; } .story__quote::after { content: "\201D"; } .story__sum { margin-top: 26px; color: var(--am-ink-soft); max-width: 34em; } .story__who { margin-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--am-ink); } .story__who::before { content: ""; display: inline-block; width: 20px; height: 1.5px; background: var(--am-terracotta); vertical-align: middle; margin-right: 12px; } .story .more { margin-top: 30px; } .story-links { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; margin-top: clamp(64px, 8vw, 96px); padding-top: 28px; border-top: 1px solid var(--am-hair); } @media (max-width: 880px) { .story { grid-template-columns: 1fr; } .story--flip .story__media { order: 0; } .story__media { max-width: 460px; } } /* ── In their own words (big quote band) ──────────────── */ .words__mark { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(120px, 14vw, 200px); line-height: 0.5; color: var(--am-terracotta); opacity: 0.9; height: 0.42em; margin-bottom: 12px; } .words__quote { margin: 0; font-family: var(--am-font-display); font-weight: 700; font-size: clamp(34px, 5vw, 66px); line-height: 1.04; letter-spacing: -0.025em; max-width: 17em; } .words__foot { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px 64px; margin-top: 48px; align-items: start; } .words__more { font-family: var(--am-font-accent); font-style: italic; font-weight: 500; font-size: clamp(21px, 2vw, 26px); line-height: 1.35; color: var(--am-bone-soft); margin: 0; } .words__name { font-family: var(--am-font-accent); font-style: italic; font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--am-bone); } .words__biz { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-putty); margin-top: 8px; } @media (max-width: 760px) { .words__foot { grid-template-columns: 1fr; } } /* ── About short ──────────────────────────────────────── */ .about-short { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 48px clamp(48px, 7vw, 112px); align-items: center; } .about-short .muted { margin-top: 30px; max-width: 36em; } .about-short .more { margin-top: 32px; } .photo-frame { position: relative; } .photo-frame .blob { position: absolute; width: 70%; left: -18%; bottom: -12%; color: var(--am-terracotta); } .photo-frame .ph { position: relative; } .photo-frame .blob { z-index: 0; } .photo-frame .photo { position: relative; z-index: 1; } @media (max-width: 880px) { .about-short { grid-template-columns: 1fr; } .photo-frame { max-width: 380px; margin-left: 10%; } } /* ── Close / CTA band ─────────────────────────────────── */ .cta { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px clamp(48px, 7vw, 112px); align-items: end; } .cta .actions { margin-top: 32px; } .cta__side .lead { margin: 0; } @media (max-width: 880px) { .cta { grid-template-columns: 1fr; align-items: start; } } /* ── Case study page ──────────────────────────────────── */ .cs-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(120px, 16vw, 220px); } .cs-hero__inner { max-width: 880px; margin: 0 auto; } .back { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-bone-faint); text-decoration: none; margin-bottom: 44px; } .back:hover { color: var(--am-bone); } .cs-hero .display { font-size: clamp(46px, 7vw, 96px); } .cs-hero .lead { margin-top: 32px; max-width: 36em; } .cs-photo { margin-top: calc(clamp(120px, 16vw, 220px) * -1 + 24px); position: relative; z-index: 2; } .cs-photo .wrap { max-width: calc(1040px + var(--gutter) * 2); } .cs-photo .ph { background: var(--am-cream); } .article { max-width: 680px; margin: 0 auto; } .article h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -0.022em; margin: clamp(56px, 7vw, 88px) 0 22px; } .article h2:first-child { margin-top: 0; } .article p { color: var(--am-ink-soft); font-size: 18px; } .article p.eyebrow { font-size: 12px; color: var(--am-terracotta-text); } .band--forest .article p.eyebrow { color: var(--am-putty); } .article .said { margin: 36px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--am-terracotta); font-family: var(--am-font-accent); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.5vw, 31px); line-height: 1.28; color: var(--am-forest); } .article .said::before { content: "\201C"; } .article .said::after { content: "\201D"; } .facts { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 0; border-top: 1px solid var(--am-hair); border-bottom: 1px solid var(--am-hair); margin: 0 0 clamp(56px, 7vw, 88px); } .fact { padding: 22px 20px 22px 0; } .fact + .fact { padding-left: 20px; border-left: 1px solid var(--am-hair); } .fact dt { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-ink-soft); margin-bottom: 6px; } .fact dd { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.4; } @media (max-width: 640px) { .facts { grid-template-columns: 1fr; } .fact + .fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--am-hair); } } /* Legal pages */ .legal .legal__label { font-family: var(--am-font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--am-terracotta-text); margin: 44px 0 12px; } .legal .legal__label:first-child, .legal .legal__intro + .legal__label { margin-top: 0; } .legal p { font-size: 16.5px; line-height: 1.75; } .legal .legal__sub { color: var(--am-ink); font-weight: 600; margin-bottom: 6px; } .legal .legal__intro { background: var(--am-cream); padding: 18px 22px; font-style: italic; font-size: 14.5px; margin-bottom: 48px; } /* Story cards (more results) */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px clamp(28px, 4vw, 56px); } .card { display: flex; flex-direction: column; } .card .ph { margin-bottom: 26px; } .card .meta { margin-bottom: 14px; } .card__quote { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.16; letter-spacing: -0.015em; margin: 0; } .card__quote::before { content: "\201C"; } .card__quote::after { content: "\201D"; } .card .story__who { margin-top: 16px; } .card .more { margin-top: 22px; align-self: flex-start; } @media (max-width: 760px) { .cards { grid-template-columns: 1fr; } } /* ── About page ───────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; } .stat { padding: 8px clamp(16px, 3vw, 40px); } .stat:first-child { padding-left: 0; } .stat + .stat { border-left: 1px solid var(--am-hair); } .stat dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-ink-soft); margin-bottom: 10px; } .stat dd { margin: 0; font-family: var(--am-font-display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.02em; } @media (max-width: 760px) { .stats { grid-template-columns: 1fr; } .stat { padding: 18px 0; } .stat + .stat { border-left: 0; border-top: 1px solid var(--am-hair); } } .big-line { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px) !important; line-height: 1.08; letter-spacing: -0.022em; color: var(--am-ink) !important; margin: 48px 0 !important; } .said-plain { padding-left: 28px; border-left: 3px solid var(--am-terracotta); color: var(--am-ink) !important; font-weight: 500; } .about-photo { max-width: 1040px; margin: clamp(64px, 8vw, 104px) auto 0; } .band--forest .italic-line { color: var(--am-cream); } .signature { font-family: "Caveat", cursive; font-weight: 600; font-size: 44px; line-height: 1; color: var(--am-bone) !important; margin: 28px 0 0; } /* ── Offer pages (consultation, Her Business OS) ─────── */ .cons-h1 { font-size: clamp(44px, 6.2vw, 88px); } .session-card { position: relative; background: var(--am-bone); color: var(--am-ink); padding: clamp(28px, 3vw, 40px); border-top: 4px solid var(--am-terracotta); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22); } .session-card__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-terracotta-text) !important; margin: 0 0 14px; } .session-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--am-hair); } .session-card__facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-ink-soft); } .session-card__facts dd { margin: 4px 0 0; font-weight: 600; font-size: 15.5px; line-height: 1.35; } .session-card__price { margin: 0 0 24px; padding-bottom: 22px; border-bottom: 1px solid var(--am-hair); color: var(--am-ink-soft) !important; font-size: 15px; line-height: 1.4; } .session-card__amt { display: block; font-family: var(--am-font-display); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -0.03em; color: var(--am-ink); margin-bottom: 6px; } .session-card__list { list-style: none; margin: 0; padding: 0; } .session-card__list li { position: relative; padding: 7px 0 7px 22px; font-size: 15.5px; line-height: 1.45; } .session-card__list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--am-terracotta); } .session-card__badge { position: absolute; right: -28px; top: -40px; width: 104px; height: auto; transform: rotate(10deg); filter: drop-shadow(0 6px 14px rgba(0,0,0,0.2)); } @media (max-width: 900px) { .session-card { max-width: 520px; } .session-card__badge { right: -8px; } } .fit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .fit__card { padding: clamp(28px, 3.4vw, 48px); } .fit__card--yes { background: var(--am-bone); } .fit__card--no { background: var(--am-ink); color: var(--am-bone); } .fit__head { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.015em; margin: 0 0 22px; } .fit__card ul { list-style: none; margin: 0; padding: 0; } .fit__card li { position: relative; padding: 16px 0 16px 34px; border-top: 1px solid var(--am-hair); font-size: 16.5px; line-height: 1.6; color: var(--am-ink-soft); } .fit__card li strong { color: var(--am-ink); font-weight: 600; } .fit__card--no li { border-top-color: var(--am-bone-hair); color: var(--am-bone-soft); } .fit__card--no li strong { color: var(--am-bone); } .fit__card li::before { position: absolute; left: 0; top: 15px; font-weight: 700; font-size: 17px; } .fit__card--yes li::before { content: "\2713"; color: var(--am-forest); } .fit__card--no li::before { content: "\00D7"; color: #e27a53; font-size: 22px; top: 11px; } .fit__card--no .link { color: var(--am-bone); text-decoration-color: var(--am-terracotta); } @media (max-width: 860px) { .fit { grid-template-columns: 1fr; } } .timeline { border-top: 1.5px solid var(--am-ink); } .step { border-bottom: 1px solid var(--am-hair); } .step summary { display: grid; grid-template-columns: 160px 1fr 32px; align-items: baseline; gap: 16px; padding: 26px 0; cursor: pointer; list-style: none; } .step summary::-webkit-details-marker { display: none; } .step__time { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--am-terracotta-text); } .step__name { font-family: var(--am-font-accent); font-style: italic; font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; color: var(--am-ink); } .step__icon { position: relative; width: 18px; height: 18px; justify-self: end; align-self: center; } .step__icon::before, .step__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--am-ink); transition: transform var(--am-duration) var(--am-ease); } .step__icon::after { transform: rotate(90deg); } .step[open] .step__icon::after { transform: rotate(0deg); } .step p { margin: -8px 0 0; padding: 0 0 28px 176px; max-width: 760px; color: var(--am-ink-soft); font-size: 17px; } .step summary:hover .step__name { color: var(--am-terracotta-text); } .timeline__cta { margin-top: 40px; } @media (max-width: 700px) { .step summary { grid-template-columns: 1fr 24px; } .step__time { grid-column: 1 / -1; } .step p { padding-left: 0; } } .price { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 32px clamp(48px, 7vw, 112px); align-items: start; } .price__amt { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(88px, 12vw, 168px); line-height: 0.85; letter-spacing: -0.04em; margin: 0; color: var(--am-ink); } .price__then { font-family: var(--am-font-accent); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; color: var(--am-forest); margin-top: 18px; max-width: 14em; } .price .lead + .lead { margin-top: 16px; } @media (max-width: 860px) { .price { grid-template-columns: 1fr; } } .ph-quote { margin: clamp(56px, 7vw, 88px) 0 0; padding: 32px; border: 1.5px dashed rgba(42, 37, 32, 0.28); text-align: center; } .ph-quote blockquote { margin: 10px 0 8px; font-family: var(--am-font-display); font-weight: 700; font-size: 24px; color: var(--am-ink-soft); } .ph-quote figcaption { font-size: 14px; color: var(--am-ink-soft); } .testimonial-row { display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: center; margin: clamp(56px, 7vw, 88px) 0 0; padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--am-hair); } .testimonial-row__photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: 50% 48%; } @media (max-width: 700px) { .testimonial-row { grid-template-columns: 1fr; } .testimonial-row__photo { width: 120px; height: 120px; } } .faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px clamp(48px, 7vw, 112px); align-items: start; } .faq { border-top: 1.5px solid var(--am-ink); } .faq details { border-bottom: 1px solid var(--am-hair); } .faq summary { position: relative; padding: 22px 44px 22px 0; cursor: pointer; list-style: none; font-family: var(--am-font-display); font-weight: 700; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; letter-spacing: -0.01em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-family: var(--am-font-body); font-weight: 400; font-size: 26px; color: var(--am-terracotta-text); } .faq details[open] summary::after { content: "\2212"; } .faq summary:hover { color: var(--am-terracotta-text); } .faq details p { margin: -6px 0 0; padding: 0 0 24px; color: var(--am-ink-soft); max-width: 40em; } @media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } } .brief { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(48px, 7vw, 112px); align-items: center; } .brief__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .brief__list li { padding: 16px 18px; background: rgba(248, 244, 238, 0.08); border-left: 3px solid var(--am-terracotta); font-weight: 600; color: var(--am-bone); font-size: 15.5px; } @media (max-width: 860px) { .brief { grid-template-columns: 1fr; } } .roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--am-ink); } .role { padding: 28px 28px 32px; border-bottom: 1px solid var(--am-hair); border-left: 1px solid var(--am-hair); } .role:nth-child(3n+2) { padding-left: 0; border-left: 0; } .role--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 80px 0.6fr 1fr; gap: 16px 32px; align-items: baseline; padding: 32px 0; border-left: 0; } .role__n { font-family: var(--am-font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--am-terracotta-text); display: block; margin-bottom: 14px; } .role h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 10px; } .role--lead h3 { font-size: clamp(28px, 2.8vw, 36px); margin: 0; } .role p { color: var(--am-ink-soft); font-size: 16px; margin: 0; } .role--lead p { font-size: 18px; color: var(--am-ink); } @media (max-width: 860px) { .roles { grid-template-columns: 1fr; } .role, .role:nth-child(3n+2) { padding-left: 0; padding-right: 0; border-left: 0; } .role--lead { grid-template-columns: 1fr; } } .two-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(48px, 7vw, 112px); } .notes__h { margin-bottom: 18px; } .two-notes .muted { font-size: 17px; } @media (max-width: 860px) { .two-notes { grid-template-columns: 1fr; } } .todo { display: inline-block; padding: 0 6px; background: rgba(215, 95, 54, 0.12); color: var(--am-terracotta-text); font-size: 0.85em; font-weight: 600; } .scheduler iframe { display: block; width: 100%; min-height: 760px; border: 0; background: var(--am-bone); } /* In-person pages */ .session-card__amt--long { font-size: 40px; } .price__amt--long { font-size: clamp(64px, 8.5vw, 124px); } .cs-photo--flat { margin-top: 0; padding-top: clamp(40px, 5vw, 64px); background: var(--am-bone); } .deliver { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); border-top: 1px solid var(--am-bone-hair); } .deliver li { position: relative; padding: 20px 0 20px 30px; border-bottom: 1px solid var(--am-bone-hair); color: var(--am-bone-soft); font-size: 16.5px; line-height: 1.6; } .deliver li::before { content: ""; position: absolute; left: 0; top: 29px; width: 9px; height: 9px; border-radius: 50%; background: var(--am-terracotta); } .deliver li strong { color: var(--am-bone); font-weight: 600; } @media (max-width: 760px) { .deliver { grid-template-columns: 1fr; } } /* Combined in-person page */ .offer-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .offer-card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; background: var(--am-bone); color: var(--am-ink); padding: clamp(28px, 3vw, 40px); border-top: 4px solid var(--am-terracotta); transition: transform var(--am-duration) var(--am-ease), box-shadow var(--am-duration) var(--am-ease); } .offer-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); } .offer-card__n { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-terracotta-text); } .offer-card__name { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(28px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.02em; } .offer-card__line { color: var(--am-ink-soft); font-size: 16.5px; line-height: 1.55; } .offer-card__price { font-family: var(--am-font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; padding-top: 14px; border-top: 1px solid var(--am-hair); margin-top: auto; } .offer-card__price small { display: block; font-family: var(--am-font-body); font-weight: 500; font-size: 13.5px; letter-spacing: 0; color: var(--am-ink-soft); margin-top: 4px; } .offer-card__go { font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; align-self: flex-start; padding-bottom: 4px; border-bottom: 1.5px solid var(--am-terracotta); } @media (max-width: 860px) { .offer-pick { grid-template-columns: 1fr; } } .subnav { position: sticky; top: 78px; z-index: 40; background: var(--am-bone); border-bottom: 1px solid var(--am-hair); } .subnav .wrap { display: flex; align-items: center; gap: 8px 32px; min-height: 60px; flex-wrap: wrap; } .subnav a:not(.btn) { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-ink-soft); text-decoration: none; padding: 6px 0; } .subnav a:not(.btn):hover, .subnav a.is-active { color: var(--am-ink); box-shadow: inset 0 -2px 0 var(--am-terracotta); } .subnav__cta { margin-left: auto; } @media (max-width: 700px) { .subnav__cta { display: none; } .subnav .wrap { gap: 4px 20px; padding-top: 6px; padding-bottom: 6px; } } .offer-head { padding: clamp(80px, 10vw, 128px) 0; scroll-margin-top: 130px; } .offer-head__n { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(64px, 8vw, 110px); line-height: 0.8; color: var(--am-terracotta); margin: 0 0 24px; opacity: 0.9; } .offer-head .lead { max-width: 38em; margin-top: 28px; } /* ── Three ways in (home) ─────────────────────────────── */ .ways2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; } .way2 { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 3.4vw, 48px); overflow: hidden; transition: transform var(--am-duration) var(--am-ease), box-shadow var(--am-duration) var(--am-ease); } .way2:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(42, 37, 32, 0.16); } .way2__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .way2__n { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(56px, 6vw, 84px); line-height: 0.8; letter-spacing: -0.04em; } .way2__tag { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; } .way2__title { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -0.02em; margin-top: 6px; } .way2__for { font-family: var(--am-font-accent); font-style: italic; font-weight: 600; font-size: clamp(21px, 1.9vw, 25px); line-height: 1.25; margin: 0; } .way2__body { font-size: 16.5px; margin: 0; } .way2__meta { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 4px 0 8px; line-height: 1.7; } .way2 .btn { align-self: flex-start; margin-top: auto; } .btn--dark { background: var(--am-ink); color: var(--am-bone); } .btn--dark:hover { background: var(--am-forest); } .btn--light { background: var(--am-bone); color: var(--am-ink); } .btn--light:hover { background: var(--am-cream); } .way2--plan { background: var(--am-bone); } .way2--plan .way2__n { color: var(--am-terracotta); } .way2--plan .way2__tag { background: var(--am-cream); color: var(--am-ink); } .way2--plan .way2__for { color: var(--am-forest); } .way2--plan .way2__body, .way2--plan .way2__meta { color: var(--am-ink-soft); } .way2--os { background: var(--am-forest); color: var(--am-bone); } .way2--os .way2__title { color: var(--am-bone); } .way2--os .way2__n { color: #e27a53; } .way2--os .way2__tag { background: var(--am-terracotta); color: var(--am-bone); } .way2--os .way2__for { color: var(--am-putty); } .way2--os .way2__body { color: var(--am-bone-soft); } .way2--os .way2__meta { color: var(--am-bone-faint); } .way2--custom { grid-column: 1 / -1; background: var(--am-ink); color: var(--am-bone); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px clamp(28px, 4vw, 56px); } .way2--custom .way2__n { color: var(--am-putty); font-size: clamp(44px, 4.4vw, 60px); } .way2--custom .way2__title { color: var(--am-bone); margin: 0 0 8px; } .way2--custom .way2__for { color: var(--am-putty); margin-bottom: 8px; } .way2--custom .way2__body { color: var(--am-bone-soft); } .way2--custom .btn { margin: 0; } .way2__quote { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0 0; padding: 18px; background: var(--am-cream); } .way2__quote img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .way2__quote blockquote { margin: 0; font-family: var(--am-font-display); font-weight: 600; font-size: 16.5px; line-height: 1.35; color: var(--am-ink); } .way2__quote blockquote::before { content: "“"; } .way2__quote blockquote::after { content: "”"; } .way2__quote figcaption { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-ink-soft); } .way2--custom .way2__top { align-self: center; } /* The 30 / 60 / 90 line */ .plan-line { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0 6px; padding-top: 22px; } .plan-line::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: linear-gradient(90deg, var(--am-terracotta), var(--am-putty)); } .plan-line__stop { position: relative; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--am-ink-soft); } .plan-line__stop::before { content: ""; position: absolute; left: 0; top: -22px; width: 14px; height: 14px; border-radius: 50%; background: var(--am-bone); border: 2px solid var(--am-putty); } .plan-line__stop--now { color: var(--am-ink); } .plan-line__stop--now::before { background: var(--am-terracotta); border-color: var(--am-terracotta); } .plan-line__stop:last-child { text-align: right; } .plan-line__stop:last-child::before { left: auto; right: 0; background: var(--am-forest); border-color: var(--am-forest); } /* The orbit of seven roles */ .orb { width: 100%; height: auto; max-width: 460px; margin: 4px auto 6px; display: block; overflow: visible; } .orb__ring { fill: none; stroke: rgba(248, 244, 238, 0.28); stroke-width: 1.2; stroke-dasharray: 3 5; } .orb__spoke { stroke: rgba(248, 244, 238, 0.14); stroke-width: 1; } .orb__node { fill: var(--am-putty); } .orb__node--lead { fill: #e27a53; } .orb__you { fill: var(--am-terracotta); } .orb__you-label { fill: var(--am-bone); font-family: var(--am-font-display); font-weight: 700; font-size: 15px; } .orb__you-label--sm { font-size: 12.5px; } .orb__label { fill: var(--am-bone-soft); font-family: var(--am-font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; } .orb__label--lead { fill: var(--am-bone); } @media (max-width: 900px) { .ways2 { grid-template-columns: 1fr; } .way2--custom { grid-template-columns: 1fr; } } /* Her Content System card on the home page */ .way2--content { grid-column: 1 / -1; background: var(--am-bone); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px clamp(32px, 5vw, 72px); align-items: center; } .way2--content__text { display: flex; flex-direction: column; gap: 16px; } .way2--content .way2__n { color: var(--am-forest); } .way2--content .way2__tag { background: var(--am-forest); color: var(--am-bone); } .way2--content .way2__for { color: var(--am-forest); } .way2--content .way2__body, .way2--content .way2__meta { color: var(--am-ink-soft); } .week { background: var(--am-cream); padding: clamp(20px, 2.4vw, 32px); } .week__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--am-ink-soft); margin: 0 0 16px; } .week__days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .week__days li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 2px; background: var(--am-bone); text-align: center; } .week__days span { font-family: var(--am-font-display); font-weight: 700; font-size: 15px; color: var(--am-ink); } .week__days b { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--am-bone); background: var(--am-terracotta); padding: 4px 5px; border-radius: 999px; white-space: nowrap; } .week__days li:first-child b { background: var(--am-forest); } .week__note { margin: 16px 0 0; font-family: var(--am-font-accent); font-style: italic; font-weight: 600; font-size: 19px; color: var(--am-forest); } @media (max-width: 900px) { .way2--content { grid-template-columns: 1fr; } } @media (max-width: 480px) { .week__days b { font-size: 8px; padding: 3px 3px; } .week__days span { font-size: 13px; } } /* Offer pages, 4 October */ .location-line { margin-top: 14px !important; font-weight: 600; color: var(--am-bone) !important; } .team-line { margin: 18px 0 28px; padding: 14px 18px; background: var(--am-cream); font-size: 15px; color: var(--am-ink-soft); } .band--cream .team-line { background: var(--am-bone); } .remote-line { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--am-hair); font-size: 15px; color: var(--am-ink-soft); } .roles__extra { margin: 28px 0 0; font-size: 17px; color: var(--am-ink-soft); } .roles__extra strong { color: var(--am-ink); } .about-local { margin-top: 14px !important; font-weight: 600; color: var(--am-bone) !important; } .col__n:not(:empty) { line-height: 1.4; } .btn--soon, .btn--soon:hover { background: var(--am-putty); color: var(--am-ink); cursor: default; } /* ── Footer ───────────────────────────────────────────── */ .site-footer { background: var(--am-ink); color: var(--am-bone); padding: clamp(64px, 8vw, 96px) 0 40px; font-size: 15px; position: relative; overflow: hidden; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; position: relative; } .footer__tagline { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin-top: 28px; max-width: 14em; } .footer__tagline .acc { color: #e27a53; } .footer__head { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-putty); margin: 0 0 18px; } .footer__list { list-style: none; margin: 0; padding: 0; } .footer__list li { margin: 0 0 10px; } .footer__list a { text-decoration: none; color: var(--am-bone-soft); } .footer__list a:hover { color: var(--am-bone); text-decoration: underline; text-decoration-color: var(--am-terracotta); text-underline-offset: 4px; } .footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--am-bone-hair); color: var(--am-bone-faint); font-size: 13.5px; position: relative; } .footer__base a { color: var(--am-bone-faint); } .footer__base a:hover { color: var(--am-bone); } .footer__base .spacer { flex: 1; } .sat { display: inline-flex; align-items: center; gap: 8px; } .sat i { display: block; border-radius: 50%; } @media (max-width: 820px) { .footer__top { grid-template-columns: 1fr; } } /* Links still waiting for a real URL (see assets/js/site.js) */ a[data-todo] { cursor: pointer; } /* Deliverables list on a light band */ .deliver--light { border-top-color: var(--am-hair); } .deliver--light li { color: var(--am-ink-soft); border-bottom-color: var(--am-hair); } .deliver--light li strong { color: var(--am-ink); } /* ---------- The flow (Her Content System) ---------- */ .flow { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; position: relative; } .flow::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1.5px; background: var(--am-hair); } .flow__step { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px clamp(32px, 5vw, 72px); align-items: center; padding: 0 0 clamp(48px, 6vw, 80px) 56px; } .flow__step:last-child { padding-bottom: 0; } .flow__n { position: absolute; left: 0; top: 2px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--am-terracotta); color: var(--am-bone); font-family: var(--am-font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; } .flow__text h3 { margin-bottom: 10px; } .flow__text p { color: var(--am-ink-soft); font-size: 16.5px; margin: 0; } .flow__visual { min-width: 0; } .flow__note { margin-top: clamp(32px, 4vw, 48px); } @media (max-width: 860px) { .flow__step { grid-template-columns: 1fr; padding-left: 56px; } } /* Mock-ups: small, honest illustrations of the system in the site's own palette */ .mock { background: var(--am-bone); border: 1px solid var(--am-hair); padding: 18px 20px 20px; font-size: 14px; color: var(--am-ink); box-shadow: 0 10px 30px rgba(42, 37, 32, 0.06); } .mock__bar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--am-ink-soft); margin-bottom: 14px; } .mock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--am-terracotta); } .mock__wave { display: flex; align-items: center; gap: 4px; height: 44px; margin-bottom: 14px; } .mock__wave i { flex: 1; background: var(--am-forest); border-radius: 2px; opacity: 0.85; } .mock__quote { margin: 0 0 14px; font-family: var(--am-font-accent); font-style: italic; font-size: 18px; line-height: 1.35; } .mock__tags { display: flex; flex-wrap: wrap; gap: 8px; } .mock__tags span { font-size: 12px; font-weight: 600; padding: 5px 10px; background: var(--am-cream); color: var(--am-ink-soft); } .mock__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; } .mock__swatches i { display: block; aspect-ratio: 1; } .mock__type-display { font-family: var(--am-font-display); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 8px; } .mock__type-accent { font-family: var(--am-font-accent); font-style: italic; font-size: 20px; line-height: 1.2; color: var(--am-forest); margin: 0 0 8px; } .mock__type-body { font-size: 14px; color: var(--am-ink-soft); margin: 0 0 16px; } .mock__marks { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--am-hair); font-size: 12px; color: var(--am-ink-soft); } .mock__marks svg { width: 32px; height: 32px; color: var(--am-terracotta); flex: 0 0 auto; } .mock__table { width: 100%; border-collapse: collapse; font-size: 13px; } .mock__table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--am-ink-soft); padding: 0 8px 8px 0; border-bottom: 1px solid var(--am-hair); } .mock__table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--am-hair); vertical-align: top; } .mock__table td:first-child { font-weight: 600; white-space: nowrap; } .mock__table tr:last-child td { border-bottom: 0; } .pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 8px; white-space: nowrap; } .pill--idea { background: var(--am-cream); color: var(--am-ink-soft); } .pill--draft { background: var(--am-putty); color: var(--am-ink); } .pill--appr { background: var(--am-forest); color: var(--am-bone); } .pill--sched { background: var(--am-terracotta); color: var(--am-bone); } .mock__posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .post { aspect-ratio: 4 / 5; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 30px rgba(42, 37, 32, 0.08); } .post--cover { background: var(--am-forest); color: var(--am-bone); } .post--quote { background: var(--am-cream); color: var(--am-ink); } .post--frame { background: var(--am-ink); color: var(--am-bone); justify-content: flex-end; } .post__eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; } .post__title { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(14px, 1.5vw, 20px); line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .post__quote { font-family: var(--am-font-accent); font-style: italic; font-size: clamp(15px, 1.6vw, 21px); line-height: 1.2; margin: 0; } .post__cap { display: inline-block; align-self: flex-start; background: var(--am-bone); color: var(--am-ink); font-weight: 700; font-size: clamp(10px, 1vw, 13px); line-height: 1.25; padding: 6px 8px; margin-bottom: 10px; } .post__foot { font-size: 10.5px; font-weight: 600; opacity: 0.85; } .post--cover .stop { color: var(--am-terracotta); } .ph--reel { aspect-ratio: 9 / 16; max-width: 260px; margin: 0 auto; } .mock__week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .mock__week li { text-align: center; padding: 10px 4px; background: var(--am-cream); } .mock__week li span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--am-ink-soft); margin-bottom: 6px; } .mock__week li b { display: block; font-size: 12px; font-weight: 600; color: var(--am-forest); } .mock__week li.is-next { background: var(--am-terracotta); } .mock__week li.is-next span, .mock__week li.is-next b { color: var(--am-bone); } @media (max-width: 600px) { .mock__week { grid-template-columns: repeat(4, 1fr); } .mock__posts { gap: 8px; } .post { padding: 10px; } } .mock__label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--am-terracotta-text); margin: 0 0 8px; } .mock__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .mock__chips:last-child { margin-bottom: 0; } .mock__chips span { font-size: 12.5px; padding: 6px 10px; background: var(--am-cream); color: var(--am-ink-soft); border: 1px solid transparent; } .mock__chips span.is-on { background: var(--am-forest); color: var(--am-bone); } .mock__via { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.04em; text-transform: none; font-weight: 500; } .mock__via-logo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .mock__via b { font-weight: 700; color: var(--am-ink); } /* Carousel looks: four styles from one design system, each shown as a strip of slides */ .flow__step--wide { grid-template-columns: 1fr; } .flow__step--wide .flow__text { max-width: 40em; } .cx { padding-top: 6px; } .cx__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .cx__tab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; font: 600 14px/1 var(--am-font-body); color: var(--am-ink); background: transparent; border: 1px solid var(--am-hair); border-radius: 999px; cursor: pointer; transition: background var(--am-duration) var(--am-ease), color var(--am-duration) var(--am-ease), border-color var(--am-duration) var(--am-ease); } .cx__tab i { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; } .cx__tab:hover { border-color: var(--am-ink); } .cx__tab[aria-selected="true"] { background: var(--am-ink); color: var(--am-bone); border-color: var(--am-ink); } .cx__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); } .cx__panel:not([hidden]) .cs { animation: cs-in 520ms var(--am-ease) both; } .cx__panel:not([hidden]) .cs:nth-child(2) { animation-delay: 60ms; } .cx__panel:not([hidden]) .cs:nth-child(3) { animation-delay: 120ms; } .cx__panel:not([hidden]) .cs:nth-child(4) { animation-delay: 180ms; } @keyframes cs-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .cx__note { margin: 18px 0 0; font-size: 14px; color: var(--am-ink-soft); max-width: 46em; } /* One slide. All sizes in cqw so a slide scales as one piece. */ .cs { container-type: inline-size; min-width: 0; } .cs__in { position: relative; aspect-ratio: 4 / 5; overflow: hidden; padding: 8cqw; display: flex; flex-direction: column; box-shadow: 0 16px 36px rgba(42, 37, 32, 0.13); } .cs .stop { color: var(--am-terracotta); } .cs svg { display: block; } .cs__top { display: flex; justify-content: space-between; align-items: baseline; } .cs__eyebrow { font-size: 4cqw; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-terracotta-text); } .cs__meta { font-family: var(--am-font-display); font-weight: 700; font-size: 4.6cqw; opacity: 0.55; } .cs__bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .cs__brand { position: relative; z-index: 1; font-family: var(--am-font-display); font-weight: 700; font-size: 5cqw; margin-top: auto; } .cs__bottom .cs__brand { margin: 0; } .cs__swipe { display: inline-flex; align-items: center; gap: 2cqw; font-size: 3.6cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; } .cs__swipe svg { width: 9cqw; height: 3cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cs__page { position: absolute; right: 8cqw; bottom: 7cqw; font-size: 3.6cqw; font-weight: 600; letter-spacing: 0.14em; opacity: 0.55; } .cs__handle { position: relative; margin-top: auto; font-size: 4cqw; font-weight: 600; letter-spacing: 0.06em; opacity: 0.85; } .cs__sign { position: relative; z-index: 1; display: inline-block; align-self: flex-start; font-family: "Caveat", cursive; font-weight: 600; font-size: 11cqw; line-height: 1; margin-top: auto; } .cs__sign svg { width: 100%; height: 3cqw; margin-top: 1cqw; overflow: visible; } .cs__sign path { fill: none; stroke: var(--am-terracotta); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; } /* Marked word: hand-drawn underline */ .mk { position: relative; display: inline-block; } .mk svg { position: absolute; left: -2%; bottom: -0.1em; width: 104%; height: 0.3em; overflow: visible; } .mk path { fill: none; stroke: var(--am-forest); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; } .mk--terra path { stroke: var(--am-terracotta); } /* Look 1: Field notes */ .fn { background: var(--am-cream); color: var(--am-ink); } .fn--cover .cs__top { position: relative; z-index: 1; } .fn__numeral { position: absolute; right: 7cqw; top: 1cqw; font-family: var(--am-font-display); font-weight: 700; font-size: 46cqw; line-height: 0.78; letter-spacing: -0.06em; color: var(--am-terracotta); } .fn__title { position: relative; z-index: 1; font-family: var(--am-font-display); font-weight: 700; font-size: 11.5cqw; line-height: 1.02; letter-spacing: -0.025em; margin: auto 0 7cqw; } .fn__dot { position: absolute; border-radius: 50%; } .fn__dot--a { width: 5cqw; height: 5cqw; left: 10cqw; top: 34cqw; background: var(--am-forest); } .fn__dot--b { width: 3cqw; height: 3cqw; left: 19cqw; top: 44cqw; background: var(--am-putty); } .fn--item { background: var(--am-bone); } .fn__badge { display: grid; place-items: center; width: 15cqw; height: 15cqw; border-radius: 50%; background: var(--am-terracotta); color: var(--am-bone); font-family: var(--am-font-display); font-weight: 700; font-size: 5.6cqw; } .fn__h { font-family: var(--am-font-display); font-weight: 700; font-size: 9.6cqw; line-height: 1.05; letter-spacing: -0.02em; margin: 9cqw 0 5cqw; } .fn__h q { quotes: "\2018" "\2019"; } .fn__body { font-size: 4.6cqw; line-height: 1.5; color: var(--am-ink-soft); margin: 0; } .fn__aside { margin: auto 0 0; padding-left: 4cqw; border-left: 1cqw solid var(--am-terracotta); font-family: var(--am-font-accent); font-style: italic; font-weight: 600; font-size: 6.6cqw; line-height: 1.1; color: var(--am-forest); max-width: 75%; } .fn--forest { background: var(--am-forest); color: var(--am-bone); } .fn--forest .fn__badge { background: transparent; border: 0.6cqw solid var(--am-bone); } .fn--forest .fn__body { color: var(--am-bone-soft); } .fn__orbit { position: absolute; right: -22cqw; bottom: -24cqw; width: 70cqw; } .fn__orbit path { fill: none; stroke: var(--am-terracotta); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .fn--cta { background: var(--am-terracotta); color: var(--am-bone); } .fn--cta .stop { color: var(--am-ink); } .fn__ask { position: relative; z-index: 1; font-family: var(--am-font-display); font-weight: 700; font-size: 12.5cqw; line-height: 1.02; letter-spacing: -0.025em; margin: 6cqw 0 5cqw; } .fn__small { position: relative; z-index: 1; font-size: 4.6cqw; margin: 0; opacity: 0.9; } .fn--cta .cs__sign path { stroke: var(--am-ink); } .fn__blob { position: absolute; width: 62cqw; right: -18cqw; bottom: -16cqw; fill: var(--am-ink); opacity: 0.16; } /* Look 2: Portrait */ .pt { background: var(--am-forest); color: var(--am-bone); } .pt--cover { padding: 0; justify-content: flex-end; } .pt--cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } .pt--cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31, 52, 41, 0.96) 0%, rgba(47, 79, 62, 0.75) 32%, rgba(47, 79, 62, 0) 62%); } .pt__mark { position: absolute; z-index: 1; left: 8cqw; top: 8cqw; width: 12cqw; color: var(--am-bone); } .pt__title { position: relative; z-index: 1; margin: 0; padding: 0 8cqw 9cqw; font-family: var(--am-font-display); font-weight: 700; font-size: 9.6cqw; line-height: 1.04; letter-spacing: -0.02em; } .pt__title em { display: block; margin-top: 1.5cqw; font-family: var(--am-font-accent); font-weight: 600; font-size: 1.12em; letter-spacing: 0; color: #e27a53; } .pt__qm { font-family: var(--am-font-accent); font-weight: 600; font-size: 46cqw; line-height: 0.7; color: var(--am-terracotta); margin-top: 4cqw; } .pt__q { font-family: var(--am-font-accent); font-style: italic; font-weight: 600; font-size: 12cqw; line-height: 1.02; margin: auto 0 5cqw; } .pt__q2 { font-family: var(--am-font-display); font-weight: 700; font-size: 7cqw; margin: 0 0 6cqw; color: var(--am-putty); } .pt--split { background: var(--am-bone); color: var(--am-ink); } .pt__arch { width: 58%; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--am-putty); margin-bottom: 6cqw; } .pt__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .pt__sat { position: absolute; left: 62%; top: 20cqw; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--am-terracotta); } .pt__h { font-family: var(--am-font-display); font-weight: 700; font-size: 7.8cqw; line-height: 1.08; letter-spacing: -0.015em; margin: 2.5cqw 0 0; padding-right: 10cqw; } .pt--cta { align-items: center; justify-content: center; text-align: center; } .pt__ring { position: relative; width: 52cqw; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 8cqw; } .pt__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; } .pt__ring path { fill: none; stroke: var(--am-terracotta); stroke-width: 1.8; vector-effect: non-scaling-stroke; } .pt__ring span { width: 30cqw; height: 30cqw; border-radius: 50%; background: var(--am-bone); color: var(--am-forest); display: grid; place-items: center; font-family: var(--am-font-display); font-weight: 700; font-size: 12cqw; letter-spacing: -0.03em; } .pt__ask { font-family: var(--am-font-display); font-weight: 700; font-size: 8.6cqw; line-height: 1.06; margin: 0 0 6cqw; } .pt--cta .cs__handle { margin-top: 0; } /* Look 3: Notebook */ .nb { background-color: var(--am-bone); color: var(--am-ink); background-image: linear-gradient(to right, transparent 0 calc(13cqw - 1px), rgba(215, 95, 54, 0.45) calc(13cqw - 1px) 13cqw, transparent 13cqw), repeating-linear-gradient(to bottom, transparent 0 calc(8cqw - 1px), rgba(47, 79, 62, 0.14) calc(8cqw - 1px) 8cqw); padding-left: 18cqw; } .nb__hand { font-family: "Caveat", cursive; font-weight: 600; font-size: 8cqw; line-height: 1; color: var(--am-terracotta-text); } .nb__hand--top { transform: rotate(-4deg); transform-origin: left; display: inline-block; margin-top: 2cqw; } .nb__hand--forest { color: var(--am-forest); } .nb__title { position: relative; font-family: var(--am-font-display); font-weight: 700; font-size: 11cqw; line-height: 1.04; letter-spacing: -0.02em; margin: 9cqw 0 0; } .hl { background: linear-gradient(to top, rgba(215, 95, 54, 0.38) 0 42%, transparent 42%); padding: 0 0.06em; } .nb__sticky { position: absolute; right: 7cqw; bottom: 9cqw; width: 42cqw; padding: 5cqw 4cqw; background: #f1d9a8; font-family: "Caveat", cursive; font-weight: 600; font-size: 6.6cqw; line-height: 1.05; color: var(--am-ink); transform: rotate(4deg); box-shadow: 0 6px 14px rgba(42, 37, 32, 0.16); } .nb__arrow { position: absolute; left: 20cqw; bottom: 12cqw; width: 22cqw; fill: none; stroke: var(--am-terracotta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-12deg); } .nb__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; margin-top: 4cqw; } .nb__list { list-style: none; margin: 3cqw 0 0; padding: 0; font-family: var(--am-font-display); font-weight: 700; font-size: 5.4cqw; line-height: 1.15; } .nb__list li { padding: 2.2cqw 0; } .nb__list--x li { position: relative; color: var(--am-ink-soft); } .nb__list--x li::after { content: ""; position: absolute; left: -1cqw; right: 2cqw; top: 50%; height: 0.8cqw; background: var(--am-terracotta); border-radius: 1cqw; transform: rotate(-3deg); opacity: 0.85; } .nb__list q { quotes: "\2018" "\2019"; } .nb__h { font-family: var(--am-font-display); font-weight: 700; font-size: 9cqw; line-height: 1.06; letter-spacing: -0.015em; margin: 3cqw 0 5cqw; } .nb__check { list-style: none; margin: 0; padding: 0; counter-reset: nb; font-size: 5.6cqw; font-weight: 600; } .nb__check li { counter-increment: nb; display: flex; align-items: center; gap: 3.5cqw; padding: 2.6cqw 0; } .nb__check li::before { content: counter(nb); display: grid; place-items: center; width: 8cqw; height: 8cqw; border: 0.6cqw solid var(--am-forest); border-radius: 50% 45% 52% 48%; font-family: "Caveat", cursive; font-size: 6cqw; color: var(--am-forest); flex: 0 0 auto; } .nb__hand--note { margin-top: 4cqw; transform: rotate(-3deg); display: inline-block; font-size: 6.6cqw; } .nb--cta .nb__hand--big { font-size: 15cqw; transform: rotate(-4deg); display: inline-block; margin-top: 2cqw; } .nb__lines { display: grid; gap: 7cqw; margin: 2cqw 0 0; } .nb__lines i { display: block; height: 0.5cqw; background: var(--am-ink); opacity: 0.4; border-radius: 1cqw; } /* Look 4: Statement */ .st { justify-content: flex-end; } .st--terra { background: var(--am-terracotta); color: var(--am-bone); justify-content: space-between; } .st--terra .stop { color: var(--am-ink); } .st__huge { font-family: var(--am-font-display); font-weight: 700; font-size: 38cqw; line-height: 0.82; letter-spacing: -0.05em; margin: 2cqw 0 0 -1.5cqw; } .st__rest { font-family: var(--am-font-display); font-weight: 700; font-size: 11cqw; line-height: 1; letter-spacing: -0.02em; color: var(--am-ink); margin: 0 0 auto; } .st--terra .cs__brand { margin-top: 0; } .st--ink { background: var(--am-ink); color: var(--am-bone); } .st__big { font-family: var(--am-font-display); font-weight: 700; font-size: 13cqw; line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 5cqw; } .st__soft { font-family: var(--am-font-accent); font-style: italic; font-weight: 600; font-size: 8cqw; line-height: 1.08; color: var(--am-putty); margin: 0 0 8cqw; } .st--bone { background: var(--am-bone); color: var(--am-ink); justify-content: center; } .st__big--sub { font-size: 10cqw; margin-bottom: 0; color: var(--am-ink-soft); } .st--forest { background: var(--am-forest); color: var(--am-bone); justify-content: space-between; } .st__mark { width: 16cqw; color: var(--am-terracotta); } .st--forest .st__big { font-size: 11cqw; margin: auto 0 6cqw; } .st--forest .cs__handle { margin-top: 0; } @media (max-width: 900px) { .cx__strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 4px 26px; margin: 0 -4px; scrollbar-width: thin; } .cx__strip .cs { flex: 0 0 72%; scroll-snap-align: start; } } @media (min-width: 600px) and (max-width: 900px) { .cx__strip .cs { flex-basis: 44%; } } @media (prefers-reduced-motion: reduce) { .cx__panel .cs { animation: none !important; } } /* Your part: what the client does once, then each month */ .yp { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); align-items: start; } .yp__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-putty); margin: 0 0 14px; } .yp__h { font-family: var(--am-font-display); font-weight: 700; font-size: 21px; line-height: 1.15; margin: 0 0 14px; } .yp__once { border: 1px solid var(--am-bone-hair); padding: clamp(22px, 2.6vw, 30px); } .yp__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; font-size: 15px; color: var(--am-bone-soft); } .yp__list li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--am-bone-hair); } .yp__list li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--am-terracotta); } .yp__note { margin: 16px 0 0; font-family: var(--am-font-accent); font-style: italic; font-size: 20px; color: var(--am-bone); } .yp__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .yp__step { position: relative; background: var(--am-bone); color: var(--am-ink); padding: 20px 18px 18px; display: flex; flex-direction: column; } .yp__step--key { box-shadow: inset 0 4px 0 var(--am-terracotta); } .yp__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--am-forest); color: var(--am-bone); font-family: var(--am-font-display); font-weight: 700; font-size: 14px; margin-bottom: 14px; } .yp__step .yp__h { font-size: 19px; margin-bottom: 12px; } .yp__you, .yp__it { font-size: 14px; line-height: 1.5; margin: 0; } .yp__you { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--am-hair); } .yp__it { color: var(--am-ink-soft); } .yp__you { min-height: 7.6em; } @media (max-width: 480px) { .yp__you { min-height: 0; } } .yp__you b, .yp__it b { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; } .yp__you b { color: var(--am-terracotta-text); } .yp__it b { color: var(--am-forest); } .yp__you q { font-weight: 600; color: var(--am-ink); quotes: "\201C" "\201D"; } .yp__bg { margin-top: 12px; border: 1px solid var(--am-bone-hair); padding: 18px 20px; } .yp__bg .yp__label { margin-bottom: 10px; } .yp__bg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; } .yp__bg li { font-size: 14px; color: var(--am-bone-soft); padding: 6px 12px; border-radius: 999px; background: rgba(248, 244, 238, 0.08); } .yp__foot { margin-top: 24px; } @media (max-width: 1080px) { .yp__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yp__list { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .yp__steps { grid-template-columns: 1fr 1fr; } .yp__list { grid-template-columns: 1fr; } } @media (max-width: 480px) { .yp__steps { grid-template-columns: 1fr; } } .band--forest .yp__step h3 { color: var(--am-ink); } .band--forest .yp__step .yp__you { color: var(--am-ink); } .band--forest .yp__step .yp__it { color: var(--am-ink-soft); } .band--forest .yp__label { color: var(--am-putty); } .band--forest .yp__note { color: var(--am-bone); } .band--forest .yp__once h3 { color: var(--am-bone); } /* What you get, grouped: four category cards and a support strip */ .get { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .get__card { position: relative; background: var(--am-cream); padding: 26px 22px 24px; display: flex; flex-direction: column; } .get__n { position: absolute; right: 18px; top: 14px; font-family: var(--am-font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--am-terracotta); opacity: 0.22; } .get__cat { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-terracotta-text); margin: 0 0 8px; } .get__h { font-family: var(--am-font-display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 18px; padding-right: 36px; } .get__list { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--am-ink-soft); } .get__list li { position: relative; padding: 12px 0 12px 18px; border-top: 1px solid var(--am-hair); } .get__list li::before { content: ""; position: absolute; left: 0; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--am-forest); } .get__list strong { color: var(--am-ink); font-weight: 600; } .get__support { margin-top: 14px; background: var(--am-forest); color: var(--am-bone); padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: 20px 32px; align-items: center; } .get__support .get__cat { color: var(--am-putty); } .get__support .get__h { color: var(--am-bone); margin: 0; padding: 0; } .get__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .get__facts li { border-left: 2px solid var(--am-terracotta); padding: 2px 0 2px 14px; font-size: 14.5px; line-height: 1.45; color: var(--am-bone-soft); } .get__facts b { display: block; font-weight: 600; color: var(--am-bone); } @media (max-width: 1080px) { .get { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .get__support { grid-template-columns: 1fr; } .get__facts { grid-template-columns: 1fr; } } @media (max-width: 600px) { .get { grid-template-columns: 1fr; } } /* Step 07: analytics dashboard feeding next month's plan */ .dash__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; } .dash__kpis div { background: var(--am-cream); padding: 12px 12px 10px; } .dash__kpis span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--am-ink-soft); } .dash__kpis b { display: block; font-family: var(--am-font-display); font-weight: 700; font-size: 26px; line-height: 1.1; margin: 4px 0 2px; color: var(--am-ink); } .dash__kpis i { font-style: normal; font-size: 12px; font-weight: 600; } .dash__kpis .up { color: var(--am-forest); } .dash__bars { display: grid; gap: 7px; margin-bottom: 18px; } .dash__bars div { display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 12.5px; } .dash__bars span { color: var(--am-ink-soft); } .dash__bars i { display: block; height: 12px; background: var(--am-cream); position: relative; } .dash__bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--am-terracotta); } .dash__bars div:first-child i::after { background: var(--am-forest); } .dash__bars b { font-weight: 600; text-align: right; } .dash__wins { list-style: none; margin: 0; padding: 0; font-size: 13.5px; } .dash__wins li { position: relative; padding: 6px 0 6px 18px; border-top: 1px solid var(--am-hair); } .dash__wins li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--am-forest); font-weight: 700; } .dash__feed { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--am-terracotta-text); } .dash__feed svg { width: 16px; height: 28px; fill: none; stroke: var(--am-terracotta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mock--next { padding-bottom: 16px; } .mock--next .mock__chips { margin-bottom: 0; } @media (max-width: 480px) { .dash__kpis { gap: 6px; } .dash__kpis div { padding: 9px 8px 8px; min-width: 0; } .dash__kpis span { font-size: 9px; letter-spacing: 0.03em; overflow-wrap: anywhere; } .dash__kpis b { font-size: 19px; } .dash__bars div { grid-template-columns: 76px minmax(0, 1fr) 36px; } } /* Home "Hi, I'm Anna" without a photo (until a second photo exists) */ .about-short--solo { grid-template-columns: minmax(0, 1fr); max-width: 52em; } /* Home "Hi, I'm Anna" without a photo (until a second photo exists) */ .about-short--solo { grid-template-columns: minmax(0, 1fr); max-width: 52em; } /* Her Business OS: dashboards block under the seven areas */ .dashes { margin-top: 28px; background: var(--am-forest); color: var(--am-bone); padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: 24px clamp(24px, 4vw, 56px); align-items: start; } .dashes__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-putty); margin: 0 0 10px; } .dashes__h { font-family: var(--am-font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--am-bone); } .dashes__p { margin: 0; font-size: 15.5px; color: var(--am-bone-soft); } .dashes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .dashes__list li { background: rgba(248, 244, 238, 0.07); border-top: 3px solid var(--am-terracotta); padding: 14px 14px 16px; font-size: 14px; line-height: 1.45; color: var(--am-bone-soft); } .dashes__list b { display: block; font-family: var(--am-font-display); font-weight: 700; font-size: 17px; color: var(--am-bone); margin-bottom: 4px; } @media (max-width: 960px) { .dashes { grid-template-columns: 1fr; } } @media (max-width: 640px) { .dashes__list { grid-template-columns: 1fr 1fr; } } @media (max-width: 420px) { .dashes__list { grid-template-columns: 1fr; } } /* Monthly steps: Claude leads (terracotta), You underneath */ .band--forest .yp__step .yp__it { color: var(--am-ink); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--am-hair); min-height: 8.2em; } .band--forest .yp__step .yp__you { color: var(--am-ink-soft); padding-bottom: 0; margin-bottom: 0; border-bottom: 0; min-height: 0; margin-top: auto; } .yp__it b { color: var(--am-terracotta-text); font-size: 12px; } .yp__you b { color: var(--am-forest); } @media (max-width: 480px) { .band--forest .yp__step .yp__it { min-height: 0; } } /* About: energy practices list */ .energy { list-style: none; margin: 18px 0 0; padding: 0; } .energy li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--am-hair); font-size: 16.5px; color: var(--am-ink-soft); } .energy li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--am-terracotta); } .energy strong { color: var(--am-ink); font-weight: 600; } /* Step 05: edited reel mock-up (swap for a real