/* ========================================================================== PCP — The Founder chapter A documentary chapter, deliberately NOT portrait-left / biography-right. Movements run down the page: opening, philosophy, origin, why PCP, principles, milestones, WHY PHOENIX, and what PCP is intended to build. Deeper than the rest of the site: near-black ground, dramatic negative space, warm edge light rather than gold fills. Gold appears only as a hairline or a single word. Everything is scoped to .page-founder. Every element's default state is VISIBLE — GSAP animates from a hidden state at runtime — so with no JS, no GSAP or reduced motion the chapter still reads as a finished spread. ========================================================================== */ .page-founder { --fdr-ground: #260000; /* Deep Burgundy — the chapter's page ground */ --fdr-raise: #05060a; --fdr-rule: rgba(212, 175, 55, 0.16); --fdr-gold: rgba(212, 175, 55, 0.9); /* Warm edge light. The only "lighting" in the chapter. */ --fdr-edge: rgba(232, 106, 36, 0.10); /* Tightened in step with --section-y (assets/css/site.css) and .section-y (assets/css/typography.css) so the whole site keeps one rhythm. Was clamp(6rem, 16vh, 13rem): 144px a side on a 900px laptop, so 288px of blank between two movements. Only padding changes here. */ --fdr-air: clamp(1.75rem, 3.4vw, 3rem); /* matched to --section-y: 28px mobile -> 48px desktop, so two movements meeting add up to about an inch */ background-color: var(--fdr-ground); } /* The shared `.bg-page` ground is a fixed navy gradient. This chapter needs to sit deeper than the rest of the site, so the navy is replaced with near-black and a warm edge light — the only colour in the ground. The utility's `position`/`isolation` are left intact. */ .page-founder.bg-page { background-color: var(--fdr-ground); background-image: radial-gradient(1100px 720px at -8% 12%, rgba(232, 106, 36, 0.055), transparent 62%), radial-gradient(900px 620px at 108% 84%, rgba(212, 175, 55, 0.038), transparent 66%); /* The near-black linear layer that used to sit under the two edge lights is gone: it painted #030304 -> #04050b across the whole page and would have covered the burgundy ground completely, so changing the colour alone would have shown nothing. The two warm radials are kept — they are the chapter's only lighting and the brief keeps the gold accents. */ } /* Solid black, always — the same treatment Home uses. The alpha used to be scrubbed by --hdr (assets/js/header.js) so the bar could start transparent over the opening. That was fine while the ground behind it was a flat gradient, but this chapter now carries the Golden Phoenix poster on a fixed layer behind the whole page, so "transparent" meant the poster showed through the bar itself — behind the logo, the nav and the Reserve CTA. A flat #000000 puts them back on a plain bar. .is-scrolled is named too: site.css sets the tint on .site-header.is-scrolled at a specificity a bare .page-founder .site-header matches but does not beat, and relying on load order alone for that one is fragile. --hdr still drives the hairline below, so the border keeps its original fade-in. */ .page-founder .site-header, .page-founder .site-header.is-scrolled { background-color: #000000; border-bottom-color: rgba(212, 175, 55, calc(0.12 * var(--hdr, 1))); } /* Nothing shows through an opaque bar, so the glass blur is only a backdrop snapshot nobody sees. Off, including the .is-glass state site.js toggles. */ .page-founder .site-header, .page-founder .site-header.is-glass { -webkit-backdrop-filter: none; backdrop-filter: none; } /* Keep the shared ambient glows from lifting the ground back up. */ .page-founder .pcp-ambient-glow { opacity: 0.045; } /* A single raking light down the left of the whole chapter. */ [data-founder] { position: relative; isolation: isolate; } [data-founder]::before { content: ""; position: absolute; inset-block: 0; left: -14vw; width: 46vw; z-index: -1; pointer-events: none; background: radial-gradient(60% 42% at 22% 24%, var(--fdr-edge) 0%, transparent 68%), radial-gradient(50% 38% at 8% 72%, rgba(212, 175, 55, 0.055) 0%, transparent 70%); } [data-founder] .fdr-movement { position: relative; padding-block: var(--fdr-air); } /* --- Shared type ------------------------------------------------------- */ [data-founder] .fdr-eyebrow { margin: 0; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.58); } [data-founder] .fdr-body { margin: 0; font-size: clamp(1rem, 1.05vw, 1.09rem); line-height: 1.85; color: rgba(255, 255, 255, 0.62); max-width: 34em; } [data-founder] .fdr-body + .fdr-body { margin-top: 1.35rem; } /* --- Movement 1: the chapter opening ---------------------------------- */ /* Enormous type, almost nothing else. The portrait slot is a narrow vertical plate offset to one side — never a photo box beside a column of bio. */ [data-founder] .fdr-open { min-height: min(92vh, 60rem); display: grid; align-content: center; /* Matched to --fdr-air. The hero keeps its min-height, so this is only the floor around the content, not the height of the chapter. */ padding-block: var(--fdr-air); } [data-founder] .fdr-open-title { margin: 1.75rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(3.25rem, 12vw, 10rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.05em; color: #fff; text-wrap: balance; } [data-founder] .fdr-open-title em { font-style: italic; font-weight: 500; color: rgba(255, 255, 255, 0.42); } [data-founder] .fdr-open-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: end; margin-top: clamp(2.5rem, 7vh, 5rem); } [data-founder] .fdr-name { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; color: #fff; } [data-founder] .fdr-role { margin: 0.5rem 0 0; font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.42); } /* --- Media frames ------------------------------------------------------ */ /* The reserved cinematic areas. `clip-path` is animated by founder.js, so the frame opens from its edge instead of fading up. */ [data-founder] .fdr-frame { position: relative; } [data-founder] .fdr-stage { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 18% 0%, rgba(232, 106, 36, 0.09) 0%, transparent 58%), linear-gradient(168deg, #070910 0%, #020203 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 50px 90px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(212, 175, 55, 0.09); } [data-founder] .fdr-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1.1s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)); will-change: transform; } [data-founder] .fdr-media.is-showing { opacity: 1; } /* Warm edge light along one side of every frame, so an empty plate still reads as a lit surface rather than a grey box. */ [data-founder] .fdr-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(232, 106, 36, 0.07) 0%, transparent 34%, transparent 74%, rgba(0, 0, 0, 0.55) 100%); } /* A single gold hairline where the light lands. The whole gold budget for a frame is this one line. */ [data-founder] [data-founder-empty] .fdr-stage::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 18%; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, var(--fdr-rule) 40%, transparent); } [data-founder] .fdr-portrait .fdr-stage { aspect-ratio: 3 / 4; border-radius: var(--radius-edit, 4px); } [data-founder] .fdr-vertical .fdr-stage { aspect-ratio: 2 / 3; border-radius: var(--radius-edit, 4px); } [data-founder] .fdr-film .fdr-stage { aspect-ratio: 16 / 9; border-radius: var(--radius-edit, 4px); } /* Dev-only slot label, so it is obvious where a file belongs. */ [data-founder] .fdr-slot-label { position: absolute; z-index: 3; left: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.5rem; border-radius: 3px; background: rgba(2, 2, 3, 0.82); border: 1px solid var(--fdr-rule); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.62rem; letter-spacing: 0.02em; color: rgba(212, 175, 55, 0.78); } /* --- Movement 2: philosophy ------------------------------------------- */ /* One oversized statement in the middle of a lot of nothing. */ [data-founder] .fdr-philosophy { text-align: center; } [data-founder] .fdr-statement { margin: 2rem auto 0; max-width: 44rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.9rem, 4.4vw, 3.5rem); font-weight: 500; font-style: italic; line-height: 1.22; letter-spacing: -0.025em; color: rgba(255, 255, 255, 0.9); text-wrap: balance; } [data-founder] .fdr-statement-cite { margin: 2rem 0 0; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.36); } /* --- Movement 3: origin ----------------------------------------------- */ /* Asymmetric: a tall plate bleeding off the left edge, text offset right. The opposite of a centred two-column split. */ [data-founder] .fdr-origin-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); } /* --- Movement 4: why PCP was created ---------------------------------- */ [data-founder] .fdr-lead { margin: 2rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.86); max-width: 30em; text-wrap: balance; } /* Three short beats, rule-separated. Not cards. */ [data-founder] .fdr-beats { display: grid; gap: 0; margin: clamp(3rem, 8vh, 5rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--fdr-rule); } [data-founder] .fdr-beat { padding-block: clamp(1.5rem, 3.5vh, 2.25rem); border-bottom: 1px solid var(--fdr-rule); font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.7; color: rgba(255, 255, 255, 0.6); } [data-founder] .fdr-beat strong { display: block; margin-bottom: 0.4rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35em; font-weight: 600; letter-spacing: -0.02em; color: #fff; } /* --- Movement 5: leadership principles -------------------------------- */ /* Numbered movements, alternating indent, hairline separated. No card grid. */ [data-founder] .fdr-principles { margin: clamp(3rem, 8vh, 5rem) 0 0; padding: 0; list-style: none; } [data-founder] .fdr-principle { position: relative; padding-block: clamp(2.25rem, 6vh, 3.5rem); border-top: 1px solid var(--fdr-rule); } [data-founder] .fdr-principle:last-child { border-bottom: 1px solid var(--fdr-rule); } [data-founder] .fdr-principle-num { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.13); } [data-founder] .fdr-principle-name { margin: 0.5rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.8rem, 3.4vw, 2.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: #fff; } [data-founder] .fdr-principle-body { margin: 1rem 0 0; font-size: clamp(0.98rem, 1.05vw, 1.06rem); line-height: 1.8; color: rgba(255, 255, 255, 0.56); max-width: 32em; } /* --- Movement 6: milestones ------------------------------------------- */ [data-founder] .fdr-milestones { margin: clamp(3rem, 8vh, 5rem) 0 0; padding: 0; list-style: none; } [data-founder] .fdr-milestone { display: grid; gap: 0.5rem clamp(1.5rem, 4vw, 3rem); padding-block: clamp(1.5rem, 4vh, 2.25rem); border-top: 1px solid var(--fdr-rule); } [data-founder] .fdr-milestone:last-child { border-bottom: 1px solid var(--fdr-rule); } [data-founder] .fdr-milestone-year { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--fdr-gold); } [data-founder] .fdr-milestone-title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; color: #fff; } [data-founder] .fdr-milestone-detail { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.75; color: rgba(255, 255, 255, 0.54); max-width: 34em; } /* --- Movement 7: WHY PHOENIX ------------------------------------------ */ /* Full-bleed band. The fullWidthImage slot sits behind the type. */ [data-founder] .fdr-phoenix { position: relative; overflow: hidden; /* Was 126px a side. This band is designed to carry a full-width image behind the type (the fullWidthImage slot below), and while that slot is empty the padding is not a band at all — it is 126px of black above and below a heading. Held to the page's rhythm until there is a picture in it; raise it again when there is. */ padding-block: var(--fdr-air); } [data-founder] .fdr-phoenix-bg { position: absolute; inset: 0; z-index: 0; } [data-founder] .fdr-phoenix-bg .fdr-stage { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; } /* Full bleed and empty: paint nothing. The plate's own ground would otherwise differ from the page ground and leave a visible seam across the band edge, and its centring hairline would float in open space. */ [data-founder] .fdr-phoenix-bg[data-founder-empty] .fdr-stage { background: none; } [data-founder] .fdr-phoenix-bg[data-founder-empty] .fdr-stage::before, [data-founder] .fdr-phoenix-bg[data-founder-empty] .fdr-stage::after { content: none; } /* The type must always win over whatever lands behind it. These veils are what the visitor actually sees as the page's background — the body underneath is already #260000, but this layer sat on top of it at 0.9 alpha in near-black, so the chapter rendered rgb(6,6,7). Recolouring the veil is therefore the only way to change the background; the alphas, stops and geometry are all exactly as they were, so the poster behind still shows through by the same amount and the copy keeps its cover. */ [data-founder] .fdr-phoenix-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(75% 60% at 50% 50%, rgba(38, 0, 0, 0.62) 0%, rgba(38, 0, 0, 0.9) 72%), linear-gradient(180deg, var(--fdr-ground) 0%, transparent 22%, transparent 78%, var(--fdr-ground) 100%); } [data-founder] .fdr-phoenix-inner { position: relative; z-index: 2; text-align: center; } [data-founder] .fdr-phoenix-title { margin: 1.75rem auto 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.75rem, 9vw, 7rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.045em; color: #fff; } [data-founder] .fdr-phoenix-title em { font-style: italic; font-weight: 500; /* The one place gold is allowed to carry a whole word. */ background: linear-gradient(150deg, #F1D27A 0%, #D4AF37 46%, #B8891B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-founder] .fdr-phoenix-body { margin: clamp(2rem, 5vh, 3rem) auto 0; max-width: 40rem; font-size: clamp(1.02rem, 1.15vw, 1.15rem); line-height: 1.85; color: rgba(255, 255, 255, 0.66); } /* --- Movement 8: letter and close ------------------------------------- */ [data-founder] .fdr-letter { max-width: 42rem; margin-inline: auto; padding-block: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--fdr-rule); border-bottom: 1px solid var(--fdr-rule); } [data-founder] .fdr-letter-line { margin: 0; font-size: clamp(1rem, 1.08vw, 1.1rem); line-height: 1.9; color: rgba(255, 255, 255, 0.68); } [data-founder] .fdr-letter-line + .fdr-letter-line { margin-top: 1.35rem; } [data-founder] .fdr-letter-signature { margin: 2.5rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; color: var(--fdr-gold); } [data-founder] .fdr-close { text-align: center; } [data-founder] .fdr-close-title { margin: 1.75rem auto 0; max-width: 36rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: #fff; text-wrap: balance; } [data-founder] .fdr-close-body { margin: 1.75rem auto 0; max-width: 34rem; font-size: clamp(1rem, 1.08vw, 1.09rem); line-height: 1.8; color: rgba(255, 255, 255, 0.58); } [data-founder] .fdr-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-top: clamp(2.5rem, 6vh, 3.5rem); } /* --- Desktop composition ---------------------------------------------- */ @media (min-width: 1024px) { /* Opening: title spans wide, the portrait plate is a narrow offset column. */ [data-founder] .fdr-open-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } [data-founder] .fdr-open-id { grid-column: 1 / span 5; } [data-founder] .fdr-open-portrait { grid-column: 9 / span 4; } /* Origin: plate on the left, bleeding past the container edge; text offset right and deliberately narrow. */ [data-founder] .fdr-origin-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } [data-founder] .fdr-origin-plate { grid-column: 1 / span 5; margin-left: calc(-1 * clamp(2rem, 8vw, 9rem)); } [data-founder] .fdr-origin-text { grid-column: 7 / span 5; } /* Why PCP: heading left, beats offset right. */ [data-founder] .fdr-why-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 5rem); } [data-founder] .fdr-why-head { grid-column: 1 / span 5; } [data-founder] .fdr-why-body { grid-column: 7 / span 6; } [data-founder] .fdr-beats { margin-top: 0; } /* Principles: number in its own narrow column, alternating indent. */ [data-founder] .fdr-principle { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } [data-founder] .fdr-principle:nth-child(even) { padding-left: clamp(3rem, 8vw, 7rem); } /* Milestones: year in a fixed column beside the entry. */ [data-founder] .fdr-milestone { grid-template-columns: 8rem minmax(0, 1fr); align-items: baseline; } /* The film sits full width, inset from the container. */ [data-founder] .fdr-film { max-width: 64rem; margin-inline: auto; } } /* --- Mobile ----------------------------------------------------------- */ @media (max-width: 1023px) { [data-founder] .fdr-open { min-height: auto; } [data-founder] .fdr-open-portrait { max-width: 20rem; } [data-founder] .fdr-origin-plate { max-width: 17rem; } [data-founder] .fdr-principle-num { font-size: 2.25rem; } } /* --- Reduced motion --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-founder] .fdr-media { opacity: 1; transition: none; will-change: auto; transform: none; } [data-founder] .fdr-stage { clip-path: none !important; } } @media (max-width: 767px) { [data-founder] .fdr-stage { box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset, 0 30px 60px -40px rgba(0,0,0,0.95); } } /* ========================================================================== Movement 1 — the founder spotlight -------------------------------------------------------------------------- Two columns: a large portrait against her own image reused as the section ground. Both media areas carry data-founder-media="portrait", so one file fills both and there is never a version that is out of date with the other. Everything here is additive and scoped to .fdr-spot. The old .fdr-open-* rules are untouched — .fdr-open still supplies the vertical rhythm. ========================================================================== */ [data-founder] .fdr-spot { position: relative; isolation: isolate; /* clip, NOT hidden: overflow:hidden establishes a scroll container and would silently break the sticky portrait below. clip trims the same bleed without becoming one. */ overflow: clip; min-height: min(96vh, 62rem); align-content: center; } /* ---- recognition layer: her portrait as the ground ---------------------- */ [data-founder] .fdr-spot-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; } [data-founder] .fdr-spot-bg .fdr-stage { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; /* overrides the plate's fixed ratios */ border-radius: 0; box-shadow: none; background: none; } [data-founder] .fdr-spot-bg .fdr-media { width: 100%; height: 100%; object-fit: cover; /* !important because founder.js writes `focus` as an INLINE object-position on every image it mounts, and this layer shares the portrait's key. The frame wants the full-length crop (focus 80%); this ground layer wants her face, so it has to beat that inline value. */ object-position: 50% 24% !important; opacity: 0.16; filter: grayscale(0.35) contrast(1.05) blur(2px); transform: scale(1.06); /* hides the blur's soft edge */ } /* With no portrait set this layer renders NOTHING — no plate, no silhouette. Same treatment the phoenix band already uses for an empty ground. */ [data-founder] .fdr-spot-bg[data-founder-empty] { display: none; } /* Keeps the type legible over the ground without flattening it to black. */ [data-founder] .fdr-spot-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(38, 0, 0, 0.94) 0%, rgba(38, 0, 0, 0.80) 42%, rgba(38, 0, 0, 0.52) 72%, rgba(38, 0, 0, 0.86) 100%), linear-gradient(180deg, rgba(38, 0, 0, 0.88) 0%, transparent 22%, transparent 74%, rgba(38, 0, 0, 0.92) 100%); } [data-founder] .fdr-spot-inner { position: relative; z-index: 1; width: 100%; } [data-founder] .fdr-spot-grid { display: grid; gap: clamp(2.75rem, 6vw, 5.5rem); /* start, not center: the biography column runs far taller than the portrait, and centring left a dead half-column of empty ground above it. */ align-items: start; } /* ---- the portrait ------------------------------------------------------ */ /* A hero portrait, not a thumbnail: it drives the height of the whole movement rather than sitting inside a fixed card. */ /* Portrait + the empty video plate, as one column. The wrapper carries the width, the grid placement and the sticky behaviour, so the plate is always exactly as wide as the portrait and the two stack together on a phone. */ [data-founder] .fdr-spot-media { position: relative; width: 100%; /* Was 34rem on the portrait itself: a touch larger now, as asked. */ max-width: 36rem; margin-inline: auto; display: grid; /* Same rhythm as the rest of the page: enough air to read as two frames, close enough to read as one column. */ gap: clamp(1rem, 1.9vw, 1.6rem); } [data-founder] .fdr-spot-portrait { position: relative; width: 100%; margin-inline: auto; } /* The empty plate. 16/9 like the film frame further down the page, and the same corner radius as the portrait above it. Nothing is placed inside: the dark ground, the gold hairline and the edge light all come from .fdr-stage, which is what every unfilled frame on this page already looks like. */ [data-founder] .fdr-spot-videobox { position: relative; width: 100%; } [data-founder] .fdr-spot-videobox .fdr-stage { aspect-ratio: 16 / 9; border-radius: var(--radius-edit, 4px); /* Nothing is laid over this plate or over the footage that goes into it. .fdr-stage normally paints a deep ground and the page's warm edge light, which is right for a photograph sitting back in the design but wrong for a video the viewer is meant to watch. Both are dropped here: background the radial + linear near-black ground ::after the edge light, whose last stop is rgba(0,0,0,0.55) ::before the gold hairline drawn across an empty plate What is left is the border and the rounded corners, and nothing else. */ background: none; /* The border, and only the border. Carried on box-shadow like the rest of the page's frames, so it adds no size and cannot shift the layout. */ box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.38); } [data-founder] .fdr-spot-videobox .fdr-stage::before, [data-founder] .fdr-spot-videobox .fdr-stage::after { content: none; } /* When footage is added to this plate it is shown whole and unveiled: full opacity rather than the 0-then-fade every other frame uses, no filter, and cover so it reaches all four edges. The plate is 16/9, so 16:9 footage — which is nearly everything — fills it with nothing cropped at all. */ [data-founder] .fdr-spot-videobox .fdr-media, [data-founder] .fdr-spot-videobox video { opacity: 1; filter: none; object-fit: cover; } /* ---- the two founder videos -------------------------------------------- */ /* Both fill their frame and nothing is laid over either of them. The frames keep the border and the rounded corners they already had; .fdr-stage's overflow: hidden is what makes the footage follow those corners. */ [data-founder] .fdr-portrait-video, [data-founder] .fdr-intro-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* Held at full opacity rather than the 0-then-fade .fdr-media uses, so the picture is never dimmed on the way in. */ opacity: 1; filter: none; object-fit: cover; } /* The portrait plate carries footage now, so its decorative layers come off: the deep ground, the warm edge light whose last stop is rgba(0,0,0,0.55), and the hairline drawn across an empty plate. Border and corners stay. */ [data-founder] .fdr-spot-portrait .fdr-stage { background: none; box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.38); } [data-founder] .fdr-spot-portrait .fdr-stage::before, [data-founder] .fdr-spot-portrait .fdr-stage::after { content: none; } /* The glow behind the portrait frame sits OUTSIDE it and is part of the page's lighting, not something on the picture — left as it is. */ /* The portrait video is 704x1248 (0.564) in a 4/5 frame (0.8): cover fills the frame with nothing letterboxed. The landscape video is 1920x1080 in a 16/9 box, an exact match, so nothing is cropped there at all. */ [data-founder] .fdr-spot-portrait .fdr-stage { aspect-ratio: 4 / 5; border-radius: var(--radius-edit, 4px); } /* Soft gold bloom behind the portrait, so it sits in light rather than on a flat ground. Sized off the frame, never a fixed pixel box. */ [data-founder] .fdr-spot-glow { position: absolute; z-index: -1; inset: -12% -14% -16%; pointer-events: none; background: radial-gradient(52% 46% at 50% 38%, rgba(212, 175, 55, 0.16), transparent 72%), radial-gradient(64% 58% at 50% 70%, rgba(11, 31, 58, 0.66), transparent 76%); filter: blur(6px); } /* ---- type -------------------------------------------------------------- */ [data-founder] .fdr-spot-name { margin: 1.5rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.9rem, 6.4vw, 5.6rem); font-weight: 600; line-height: 0.96; letter-spacing: -0.035em; color: #fff; text-wrap: balance; } [data-founder] .fdr-spot-quote { margin: clamp(1.5rem, 2.6vh, 2.1rem) 0 0; padding: 0 0 0 clamp(1rem, 1.6vw, 1.5rem); border-left: 1px solid rgba(212, 175, 55, 0.42); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.45; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.90); max-width: 24em; } [data-founder] .fdr-spot-role { margin: clamp(1.1rem, 2vh, 1.6rem) 0 0; font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--pcp-gold, #D4AF37); opacity: 0.82; } [data-founder] .fdr-spot-rule { width: 4rem; height: 1px; margin: clamp(2rem, 4vh, 2.75rem) 0 clamp(1.75rem, 3.5vh, 2.25rem); background: linear-gradient(90deg, rgba(212, 175, 55, 0.7), transparent); } [data-founder] .fdr-spot-p { margin: 0; font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.85; color: rgba(255, 255, 255, 0.66); max-width: 36em; } [data-founder] .fdr-spot-p + .fdr-spot-p { margin-top: 1.3rem; } /* The closing couplet: its two lines are one paragraph, set a touch brighter so the chapter lands on them. */ [data-founder] .fdr-spot-p:last-child { margin-top: clamp(1.75rem, 3vh, 2.25rem); color: rgba(255, 255, 255, 0.84); } [data-founder] .fdr-spot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(2.25rem, 4.5vh, 3rem); } /* ---- composition ------------------------------------------------------- */ @media (min-width: 1024px) { [data-founder] .fdr-spot-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* Portrait takes five of twelve — large enough to read as a hero shot, and roughly the scale of the reference, without crowding the biography. */ [data-founder] .fdr-spot-media { /* Six of twelve rather than five: slightly larger, and it takes the empty gutter column that sat between the portrait and the biography. The biography still holds columns 7-12, so nothing of it is given up. */ grid-column: 1 / span 6; max-width: none; /* Holds the portrait in view while the biography scrolls past it, so the reader keeps her face the whole way through the story. Offset clears the fixed header. Applied to the pair, so the plate travels with her. */ position: sticky; top: clamp(6.5rem, 12vh, 9rem); } [data-founder] .fdr-spot-text { grid-column: 7 / span 6; } } @media (max-width: 1023px) { /* Stacked, and still large — the portrait leads the page on a phone. */ [data-founder] .fdr-spot { min-height: 0; } [data-founder] .fdr-spot-media { max-width: 32rem; } [data-founder] .fdr-spot-text { text-align: left; } /* The ground reads stronger on a narrow column, so veil it harder. */ [data-founder] .fdr-spot-bg .fdr-media { opacity: 0.11; } [data-founder] .fdr-spot-veil { background: linear-gradient(180deg, rgba(38, 0, 0, 0.90) 0%, rgba(38, 0, 0, 0.76) 30%, rgba(38, 0, 0, 0.76) 70%, rgba(38, 0, 0, 0.92) 100%); } } @media (prefers-reduced-motion: reduce) { [data-founder] .fdr-spot-bg .fdr-media { transform: none; } } /* ========================================================================== FOUNDER — the Golden Phoenix poster as the page's fixed ground -------------------------------------------------------------------------- .pcp-cinematic-bg is the shared layer every page already has: position fixed, inset 0, z-index -1. Fixed is what makes the picture hold still while the page scrolls over it, and it needs no extra rule — the layer was built that way. z-index -1 is also why the body's near-black ground does not hide it: an element's own background paints BELOW its negative-z-index children. The only opaque surface on this page is that body ground, so nothing else is in the way. THE VEIL is heavier than a page photograph usually needs, and the reason is not contrast. The poster carries its own large typography — "NEWEST SPORTS CAR CLUB" across the middle — and at a lighter veil it read as page content competing with the founder's name and the philosophy statement, even though the measured contrast was already fine. These alphas were picked by sweeping them and measuring both the text contrast and how much tonal variation the photograph still carries: at 0.85 through the middle the poster reads as texture rather than as words, and the page's own text sits at 15.3:1. The file name carries spaces and capitals, unlike every other asset here. It is URL-encoded rather than renamed, so the file the project was given is the file it still points at. ========================================================================== */ .page-founder .pcp-cinematic-bg { background-image: linear-gradient(180deg, rgba(2, 2, 3, 0.93) 0%, rgba(2, 2, 3, 0.85) 18%, rgba(2, 2, 3, 0.86) 82%, rgba(2, 2, 3, 0.94) 100%), url('../media/backgrounds/Golden%20Phoenix%20Sports%20Car%20Club%20Poster.png'); background-size: auto, cover; background-position: 50% 50%; background-repeat: no-repeat, no-repeat; } /* ========================================================================== PAUWERFUL TALKS — a rail of empty portrait slots -------------------------------------------------------------------------- Self-contained. The home page's rails (.ach-carousel / .ach-track / .ach-item) are all scoped to .page-home in assets/css/home.css, and the Founder page does not load that stylesheet, so none of it is available here. Only the BEHAVIOUR is shared: assets/js/achievements.js drives any [data-ach-carousel], and the markup carries those data hooks while keeping its own class names. The cards are sized by HEIGHT, not width, and the width follows from the 9:16 portrait ratio. That is what keeps a portrait rail honest: cap the height against the viewport and a tall card can never run past the fold on a short laptop, however wide the screen gets. ========================================================================== */ /* Matches the "Members doing the business." heading exactly: the same clamp, line-height, tracking and uppercase as .page-home h2 in assets/css/home.css — 56px at 1440, 38.4px at 390. */ [data-founder] .fdr-talks-title { margin: 0; font-size: clamp(2.4rem, 4.4vw, 3.5rem); line-height: 1.02; letter-spacing: 0.005em; text-transform: uppercase; color: #fff; } /* Full-bleed outside the content column so the rail can run past it, with the first card lined up under the heading. Same idea as the home rails' --ach-gutter, computed here rather than inherited. */ [data-founder] .fdr-rail { --fdr-gutter: max(1.25rem, calc((100vw - 76rem) / 2 + 1.25rem)); position: relative; margin-top: clamp(2rem, 4vw, 3.25rem); } @media (min-width: 640px) { [data-founder] .fdr-rail { --fdr-gutter: max(2rem, calc((100vw - 76rem) / 2 + 2rem)); } } [data-founder] .fdr-talks-track { display: flex; gap: clamp(0.85rem, 1.4vw, 1.25rem); margin: 0; padding: 0.5rem var(--fdr-gutter); list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; /* Without this the rail opens already scrolled. The track is padded by the gutter, so the first card's start edge sits --fdr-gutter in; mandatory snapping then jumps straight to it to satisfy scroll-snap-align: start, eating the gutter and leaving "previous" live at rest. Padding the SNAP PORT by the same amount makes scrollLeft 0 the valid resting place. */ scroll-padding-inline: var(--fdr-gutter); scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* Keeps a card's shadow from being clipped by the scroll container. */ overscroll-behavior-x: contain; } [data-founder] .fdr-talks-track::-webkit-scrollbar { display: none; } [data-founder] .fdr-talks-track:focus-visible { outline: 2px solid var(--pcp-gold); outline-offset: 4px; } [data-founder] .fdr-talks-item { flex: 0 0 auto; /* Centre, not start — the subject card sits in the middle of the rail, the same as .biz-rail on Home. The track's padding below is what lets the first and last card reach the middle at all. */ scroll-snap-align: center; } /* --- The card ------------------------------------------------------------ Portrait, 9:16 — the shape a phone shoots video in, which is what these slots are for. --talk-h is the single sizing knob, and it is declared on the RAIL, not on the card: the track reads it too, to work out how much room the first and last card need beside them to reach the middle. One number, one place. min() against svh is what keeps a tall card on screen: 64svh on a 640px-high laptop is 410px, so the card is 230px wide and several still fit across. svh rather than vh so a mobile address bar appearing cannot push the rail taller than the screen. Raised about 10% from 30rem/58svh on request — bigger, with the portrait shape and the even gaps untouched, since both follow from this one value. */ [data-founder] .fdr-rail { --talk-h: min(33rem, 64svh); } [data-founder] .fdr-talks-card { width: calc(var(--talk-h) * 9 / 16); margin: 0; } [data-founder] .fdr-talks-card .fdr-stage { aspect-ratio: 9 / 16; width: 100%; border-radius: 14px; /* The same gold edge the business rail uses: 2px at 0.55, up from the 1px at 0.22 these plates started with. Thicker and clearly present, still a light edge rather than an outline. Drawn with box-shadow, never border, which is why nothing moves: a shadow paints outside the box and takes no part in layout, so the card keeps its exact 9:16 size and the rail's widths, gaps and snap points are untouched. */ box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.55), 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 50px 90px -50px rgba(0, 0, 0, 0.95), 0 24px 70px -46px rgba(212, 175, 55, 0.3); } /* Phones: two-and-a-bit cards across, sized from the viewport width instead of its height, so the rail stays swipeable rather than filling the screen. */ @media (max-width: 767px) { [data-founder] .fdr-rail { --talk-h: min(28.5rem, 57svh); } } /* Small phones: the width is what matters, so it is set first and --talk-h is worked back from it. Expressed as a height rather than as a width because everything else — the card, the track's centring padding — reads --talk-h, and a token that goes missing here would take the rail's gutter with it. 1.75 cards across, up from 1.9: slightly wider cards, the next one still peeking so it is clear the rail moves. */ @media (max-width: 420px) { [data-founder] .fdr-rail { --talk-h: calc(((100vw - 2 * var(--fdr-gutter) - 0.85rem) / 1.75) * 16 / 9); } } /* --- Arrows -------------------------------------------------------------- Fine pointers only. On touch the swipe IS the control, and a floating button over a card would only be in the way. */ [data-founder] .fdr-rail-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.28); background: rgba(5, 6, 10, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(255, 255, 255, 0.85); transform: translateY(-50%); transition: transform 260ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)), opacity 220ms ease, border-color 220ms ease; } [data-founder] .fdr-rail-nav-prev { left: max(0.5rem, calc(var(--fdr-gutter) - 1.5rem)); } [data-founder] .fdr-rail-nav-next { right: max(0.5rem, calc(var(--fdr-gutter) - 1.5rem)); } [data-founder] .fdr-rail-nav:hover { transform: translateY(-50%) scale(1.06); border-color: rgba(212, 175, 55, 0.55); } [data-founder] .fdr-rail-nav:active { transform: translateY(-50%) scale(0.98); } [data-founder] .fdr-rail-nav:focus-visible { outline: 2px solid var(--pcp-gold); outline-offset: 3px; } [data-founder] .fdr-rail-nav[disabled] { opacity: 0.22; pointer-events: none; } @media (max-width: 767px), (hover: none) { [data-founder] .fdr-rail-nav { display: none; } } /* While a drag is in progress the rail must track the cursor 1:1, so snap and smooth are both off and the cards stop swallowing the pointer. See the long note in assets/js/achievements.js: the class goes on at pointermove, never at pointerdown, or the click never reaches the card. */ [data-founder] .fdr-talks-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; } [data-founder] .fdr-talks-track.is-dragging .fdr-talks-item { pointer-events: none; } @media (prefers-reduced-motion: reduce) { [data-founder] .fdr-talks-track { scroll-behavior: auto; } [data-founder] .fdr-rail-nav { transition: none; } [data-founder] .fdr-rail-nav:hover { transform: translateY(-50%); } } /* ========================================================================== PAUWERFUL TALKS — the rail as a player -------------------------------------------------------------------------- Everything below exists so a talk behaves exactly like a card in "PCP in motion — Members doing the business" on Home. The behaviour there is split across three files, and this is the Founder-side half of each: assets/js/achievements.js centre stage + click a side card to centre it (asked for with [data-rail-focus] on the rail) assets/js/site.js the play gate — controls held back until play, a centred play mark while paused. It already understands .fdr-stage, so it needed nothing. assets/js/video.js mounting, lazy loading, posters. The entries live in pcpVideos.pauwerfulTalks. What is NOT copied: fitFramesToFootage(), which republishes each card's shape from its own file. The business rail does that because its footage is several shapes; these boxes are portrait by instruction and stay 9:16. ========================================================================== */ /* --- Centre stage -------------------------------------------------------- The middle card is the subject; the ones beside it are visibly next in line. The scale is on the FIGURE, never on the scroller: scaling a child leaves the layout box alone, so the widths, the gaps, the snap points and the scroll width never move — only the picture grows and shrinks. A uniform scale cannot crop or stretch anything, and the gold edge and the 14px corners scale with it. Only transform and opacity, both on a spring, so this stays on the compositor. */ [data-founder] .fdr-talks-item > .fdr-talks-card { transform: scale(0.84); opacity: 0.62; transition: transform 620ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)), opacity 620ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)); will-change: transform; } [data-founder] .fdr-talks-item.is-center > .fdr-talks-card { transform: scale(1); opacity: 1; } /* The first and last card can only reach the middle if there is room beside them: half a card's width on each side. The card's WIDTH is derived here rather than read from a token, because var()s inside a custom property resolve on the element that declares it — a --talk-w declared beside --talk-h would be frozen at the rail's own --talk-h and would ignore the phone overrides. --talk-h itself is safe to read: it is inherited, and the arithmetic happens here. Never below the gutter, so on a narrow screen the rail still starts where the heading does. */ [data-founder] .fdr-rail .fdr-talks-track { padding-inline: max(var(--fdr-gutter), calc((100% - var(--talk-h) * 9 / 16) / 2)); scroll-padding-inline: 0; } /* A card off to the side is a target, not a player: one press brings it to the middle (assets/js/achievements.js), so it should read as pressable. */ @media (hover: hover) and (pointer: fine) { [data-founder] .fdr-talks-item:not(.is-center) { cursor: pointer; } [data-founder] .fdr-talks-item:not(.is-center):hover > .fdr-talks-card { opacity: 0.8; } } /* --- A card holding footage --------------------------------------------- The empty plate's furniture yields to the film, exactly as the Community frames do on Home. Nothing is laid over the picture: no gradient, no veil, no tint — the gold edge and the rounded corners are the only things that remain, and they are drawn outside the box. */ [data-founder] .fdr-talks-card:has(.media-mount video) .fdr-stage { /* Plain black underneath, so none of the plate's own gradient can show at any edge. The video covers it completely. */ background: #000000; } [data-founder] .fdr-talks-card:has(.media-mount video) .fdr-stage::before, [data-founder] .fdr-talks-card:has(.media-mount video) .fdr-stage::after { content: none; } [data-founder] .fdr-talks-card .media-mount, [data-founder] .fdr-talks-card .media-mount video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } [data-founder] .fdr-talks-card .media-mount video { /* Fills the plate edge to edge — no letterbox band, no gap, no fade. The files are portrait, so cover has nothing to take. */ object-fit: cover; border-radius: inherit; /* The mount fades footage in via .is-showing, set from loadeddata. A player with controls is never auto-started, so that class cannot be relied on; held at 1 so the picture is never dimmed. */ opacity: 1; filter: none; } [data-founder] .fdr-talks-card .fdr-stage { border-radius: 14px; } /* While a card is off to the side its video is not the one being watched, so the pointer belongs to the rail: a press centres the card instead of landing on the player underneath. achievements.js takes the click on the capture phase; this stops the native control bar from catching it first. */ [data-founder] .fdr-talks-item:not(.is-center) .media-mount { pointer-events: none; } /* ========================================================================== PAUWERFUL TALKS — the Facebook embed (card 1) -------------------------------------------------------------------------- Facebook's own player, in an iframe, so playback is served and counted by Facebook. Everything here is about the BOX around it: the card keeps its 9:16 portrait shape, its gold edge and its place in the carousel, and the player simply fills it. Nothing is laid over the picture. The player is cross-origin, so it could not be styled from here even if that were wanted — the gold edge and the corners are drawn by the card, outside and around it. ========================================================================== */ /* No empty-plate furniture under a player that fills the frame. The card carries no [data-founder-empty], so the gold hairline never appears; the ground is black so nothing of the plate's gradient can show at an edge while the embed is still loading. */ [data-founder] .fdr-talks-embed .fdr-stage { background: #000000; } [data-founder] .fdr-talks-embed .fdr-stage::after { content: none; } /* Every player is given ITS OWN FILM'S SHAPE, not the box's. Handed a viewport that does not match its source, Facebook's player fills it and the picture comes out stretched. The