/* ========================================================= BeautyUni — "Split" version Light BeautyUni identity on all pages; the podcast page () shifts into the From Passion to Profit dark sub-brand zone. Header + footer stay constant. Type: Hanken Grotesk (display + body) · Space Mono (podcast codes) No animation (static build). ========================================================= */ :root { --ink: #131217; --plum: #9A145C; --plum-deep: #7d1049; --white: #ffffff; --paper: #f7f5f6; --line: #e6e2e4; --muted: #5c575d; --hair: #e6e2e4; /* podcast-zone palette (used only inside .fptp) */ --fp-ink: #0E0E0F; --fp-bone: #F4EFE6; --fp-brass: #C9A24B; --fp-brass-deep: #b98f3c; --fp-charcoal: #161619; --fp-champagne: #E6D3A3; --fp-stone: #9A9A93; --fp-hair: #26262b; --maxw: 1140px; --pad: clamp(20px, 5vw, 56px); --radius: 4px; --f-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --f-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --f-serif: "Fraunces", Georgia, "Times New Roman", serif; --f-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem); --step-1: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.15rem); --step-3: clamp(1.95rem, 1.55rem + 1.9vw, 3rem); --step-4: clamp(2.4rem, 1.8rem + 3vw, 4.15rem); } /* form-control tokens (consumed by /form inline styles) — LIGHT */ :root { --fld-bg: #ffffff; --fld-border: #c8c3c7; --fld-text: #131217; --fld-focus: #9A145C; --fld-invalid: #c0392b; --fld-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239A145C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); --fld-panel-bg: #f7f5f6; --fld-panel-border: #e6e2e4; --fld-label: #131217; --fld-muted: #5c575d; --fld-err-text: #b3201f; --fld-alert-bg: #fdeceb; --fld-alert-border: #f2b8b5; --fld-alert-text: #7a1a18; --fld-accent: #9A145C; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--f-body); font-size: var(--step-0); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; height: auto; } a { color: var(--plum); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--plum-deep); } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.5em; color: var(--ink); } h1 { font-size: var(--step-4); letter-spacing: -0.03em; } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); font-weight: 700; } p { margin: 0 0 1.1em; max-width: 68ch; } em { font-style: italic; } :focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 18px; z-index: 1000; font-weight: 700; } .skip-link:focus { left: 8px; top: 8px; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(56px, 9vw, 118px); } .section--tight { padding-block: clamp(40px, 6vw, 72px); } .section--paper { background: var(--paper); } .section--ink { background: var(--ink); color: #ebe9ec; } .section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; } .kicker { display: inline-block; font-family: var(--f-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--plum); margin-bottom: 16px; } .section--ink .kicker { color: #e58bb6; } .label { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--step--1); color: var(--plum); } .lede { font-size: var(--step-1); line-height: 1.5; color: #35313a; max-width: 40ch; font-weight: 500; } .measure { max-width: 65ch; } .muted { color: var(--muted); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-family: var(--f-body); font-weight: 700; font-size: var(--step-0); border-radius: var(--radius); border: 1.5px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn:hover { background: #000; color: #fff; } .btn--plum, .btn--brass { background: var(--plum); border-color: var(--plum); color: #fff; } .btn--plum:hover, .btn--brass:hover { background: var(--plum-deep); border-color: var(--plum-deep); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: #fff; } .section--ink .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); } .section--ink .btn--ghost:hover { background: #fff; color: var(--ink); } .arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--ink); } .arrow-link:hover { color: var(--plum); } .section--ink .arrow-link { color: #fff; } .section--ink .arrow-link:hover { color: #e58bb6; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--pad); max-width: var(--maxw); margin-inline: auto; } .site-header__logo img { width: 146px; } .site-nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; align-items: center; } .site-nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; } .site-nav a[aria-current="page"] { color: var(--plum); } .site-nav a:hover { color: var(--plum); } .nav-cta { display: inline-flex; } .nav-toggle { display: none; border: 0; background: transparent; padding: 6px; cursor: pointer; color: var(--ink); } @media (max-width: 880px) { .nav-toggle { display: inline-flex; } .site-nav { position: fixed; inset: 61px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .2s ease; max-height: calc(100dvh - 61px); overflow-y: auto; } .site-nav[data-open="true"] { transform: none; } .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--pad) 24px; } .site-nav li { border-bottom: 1px solid var(--line); } .site-nav a { display: block; padding: 16px 0; font-size: var(--step-0); } .nav-cta { margin-top: 16px; } .nav-cta a { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .site-nav { transition: none; } } /* ---------- hero ---------- */ .hero { padding-block: clamp(56px, 10vw, 116px); } .hero h1 { max-width: 18ch; } .hero .lede { margin-top: 22px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } /* ---------- grids ---------- */ .grid { display: grid; gap: clamp(20px, 4vw, 40px); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 6vw, 80px); align-items: start; } @media (max-width: 820px) { .grid--2, .grid--3, .split { grid-template-columns: 1fr; } } /* ---------- feature blocks ---------- */ .feature { border-top: 2px solid var(--ink); padding-top: 20px; } .feature h3 { margin-bottom: 8px; } .feature p { margin: 0; color: var(--muted); font-size: var(--step--1); } .section--ink .feature { border-color: var(--plum); } .section--ink .feature p { color: #bdbac0; } /* ---------- numbered ---------- */ .numbered { display: grid; gap: 0; } .numbered__row { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); } .numbered__row:first-child { border-top: 1px solid var(--line); } .numbered__n { font-weight: 800; color: var(--plum); font-size: var(--step-1); } .numbered__row h3 { margin: 0 0 4px; } .numbered__row p { margin: 0; color: var(--muted); font-size: var(--step--1); } /* ---------- people ---------- */ .person { display: grid; gap: 14px; } .person__portrait { aspect-ratio: 4 / 5; background: #ece8ea; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: #9a949b; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; } .person__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .person h3 { margin: 0; } .person__role { font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--plum); font-weight: 700; } /* ---------- callout ---------- */ .callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 5vw, 48px); background: var(--ink); color: #fff; border-radius: var(--radius); } .callout h2 { margin: 0; max-width: 20ch; color: #fff; } /* ---------- programme ---------- */ .programme { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; } .programme__body { padding: clamp(24px, 4vw, 40px); } .programme__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0 24px; font-size: var(--step--1); color: var(--muted); } .programme__meta b { color: var(--ink); font-weight: 700; } .tag { display: inline-block; padding: 5px 12px; border: 1px solid var(--ink); font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } blockquote { margin: 24px 0; } /* ---------- footer (dark, constant across both versions) ---------- */ .site-footer { background: var(--ink); color: #c9c6cd; padding-block: clamp(48px, 7vw, 84px); } .site-footer a { color: #fff; text-decoration: none; } .site-footer a:hover { color: #e58bb6; } .site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .site-footer__brand img { width: 150px; margin-bottom: 16px; } .site-footer h4 { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: #8a868f; margin: 0 0 14px; font-weight: 700; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .site-footer__bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; font-size: var(--step--1); color: #8a868f; } @media (max-width: 820px) { .site-footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .site-footer__top { grid-template-columns: 1fr; } } /* ---------- prose ---------- */ .prose h2 { margin-top: 1.6em; font-size: var(--step-2); } .prose h3 { margin-top: 1.4em; } .prose ul { padding-left: 1.2em; } .prose li { margin-bottom: .4em; } /* ========================================================= PODCAST SUB-BRAND ZONE — only on ========================================================= */ .fptp { background: var(--fp-ink); } .fptp main { background: var(--fp-ink); color: var(--fp-bone); } .fptp main ::selection { background: var(--fp-brass); color: var(--fp-ink); } .fptp main h1, .fptp main h2, .fptp main h3 { font-family: var(--f-serif); font-weight: 600; color: var(--fp-bone); letter-spacing: -0.01em; } .fptp main h1 { font-size: clamp(2.3rem, 1.7rem + 3vw, 4rem); } .fptp main p { color: var(--fp-bone); } .fptp main .muted, .fptp main .fptp-ep__notes, .fptp main .fptp-ep__guest { color: var(--fp-stone); } .fptp main a { color: var(--fp-champagne); } .fptp main a:hover { color: var(--fp-brass); } .fptp main .kicker, .fptp main .label { font-family: var(--f-mono); color: var(--fp-brass); text-transform: uppercase; letter-spacing: .16em; font-weight: 400; } .fptp-hero { display: grid; grid-template-columns: 168px 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; padding-block: clamp(44px, 8vw, 96px); } .fptp-hero__badge { width: 100%; max-width: 168px; } .fptp-hero p { max-width: 52ch; color: var(--fp-stone); } @media (max-width: 620px) { .fptp-hero { grid-template-columns: 1fr; } .fptp-hero__badge { width: 116px; } } .fptp-episodes { display: grid; gap: 2px; } .fptp-ep { background: var(--fp-charcoal); border: 1px solid var(--fp-hair); padding: clamp(20px, 4vw, 38px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 42px); align-items: center; } .fptp-ep:nth-child(even) { grid-template-columns: 1fr 1.1fr; } .fptp-ep:nth-child(even) .fptp-ep__media { order: 2; } @media (max-width: 780px) { .fptp-ep, .fptp-ep:nth-child(even) { grid-template-columns: 1fr; } .fptp-ep:nth-child(even) .fptp-ep__media { order: 0; } } .fptp-ep__media { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--fp-hair); overflow: hidden; } .fptp-ep__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .fptp-ep__code { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .14em; font-size: var(--step--1); color: var(--fp-champagne); } .fptp-ep h3 { margin: 10px 0; } .fptp-ep__guest { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: 14px; } .fptp-ep__notes { margin-bottom: 18px; } .fptp-rule { height: 1px; background: var(--fp-hair); border: 0; margin: 0; } .fptp-cta { padding-block: clamp(44px, 7vw, 88px); } .fptp main .btn { border-radius: 2px; background: var(--fp-brass); border-color: var(--fp-brass); color: var(--fp-ink); } .fptp main .btn:hover { background: var(--fp-brass-deep); border-color: var(--fp-brass-deep); color: var(--fp-ink); } .fptp main .btn--ghost { background: transparent; color: var(--fp-bone); border-color: #3b3b42; } .fptp main .btn--ghost:hover { background: var(--fp-bone); color: var(--fp-ink); border-color: var(--fp-bone); } .fptp main .arrow-link { color: var(--fp-brass); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; font-size: var(--step--1); font-weight: 400; } .fptp main .arrow-link:hover { color: var(--fp-champagne); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }