/* ========================================================================= * rp-home.css — Resume Place homepage section treatments * * A faithful CSS port of the platform's canonical RPHomeBody * (src/components/system/screens/RPHomeScreen.tsx), the single source of * truth for the RP marketing homepage. Authored as semantic classes so the * FSE `velocity/page-homepage` pattern renders the same editorial composition * the System Viewer ships: light hero, navy books band, night ethos, the * services system on paper, and the darkest-ground CTA + footer. * * Design law (locked): tangelo whispers (accent only, never a surface); * navy is the ground; bright book-cover blue #2F62C4 is the signal; serif * folios lead each section header. See project_rp_design_system_northstar. * * Colors reuse the brand-sync `--rp-*` vars where they exist so the homepage * stays in token parity; the signal blues (bright/lifted/night) are not yet * projected by the brand-sync plugin, so they default to the canonical hex. * ========================================================================= */ /* Tokens live on :root so the chrome (utility bar, sticky header, night * footer) — which renders outside the `.rph` homepage wrapper — resolves them * too. The `.rph` rule below only sets the page-body defaults. */ :root { /* signal + ground */ --rph-tangelo: var(--rp-tangelo, #f94d00); --rph-spiced: var(--rp-spiced-tea, #b35c44); --rph-deep: var(--rp-deep-blue, #1c3664); --rph-evening: var(--rp-evening-blue, #0f264c); --rph-night: var(--rp-night-blue, #0b1d3a); --rph-blue: var(--rp-bright-blue, #2f62c4); --rph-blue-lift: var(--rp-lifted-blue, #5b8ae0); /* the study's literal tints */ --rph-ink: #16243a; --rph-ink2: #48515a; --rph-ink3: #727a82; --rph-line: #e7e6e0; --rph-line2: #d9d8d1; --rph-surface: #ffffff; --rph-surface2: #fbfaf7; --rph-bg: #f4f3ef; --rph-blue50: #eef1f7; --rph-blue200: #b7c6e5; --rph-blue800: #13294c; --rph-tangelo50: #fff3ed; --rph-tangelo100: #ffe3d5; --rph-tangelo700: #c04000; --rph-spiced50: #f7efeb; --rph-dfg2: #9fb1cc; --rph-dfg3: #6f84a6; --rph-dline: rgba(143, 167, 205, 0.18); /* families — reuse the theme's Messina preset slugs */ --rph-serif: var(--wp--preset--font-family--mencken, "Messina Serif", Georgia, serif); --rph-sans: var(--wp--preset--font-family--inter, "Messina Sans", system-ui, sans-serif); --rph-mono: var(--wp--preset--font-family--space-mono, "Messina Sans Mono", monospace); --rph-cond: var(--wp--preset--font-family--condensed, "Messina Sans Condensed", sans-serif); } /* The Site Editor's global styles resolve the `inter` preset to plain Inter, which drops Messina Sans from the body font sitewide. The preset feeds the derived family tokens (--font-sans / --rph-sans / --rp-sans), and those are computed at :root before any body-level override, so it is not enough to repoint the preset alone — we restate the derived tokens too. All are set on (which contains every rendered element), so the brand sans — shipped as a theme @font-face — wins for the whole page; Inter and the system stack remain as fallbacks only. */ body { --rp-messina-sans-stack: "Messina Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wp--preset--font-family--inter: var(--rp-messina-sans-stack); --font-sans: var(--rp-messina-sans-stack); --rph-sans: var(--rp-messina-sans-stack); --rp-sans: var(--rp-messina-sans-stack); } .rph { background: var(--rph-bg); color: var(--rph-ink); font-family: var(--rph-sans); font-size: 16px; line-height: 1.55; } /* Blockified sections: core flow-layout gap must not add spacing — rph-* classes own all margins. Mirrors the .rp-ds neutralizer in rp-ds.css. */ .rph :where(.is-layout-flow) > *, :where(.is-layout-flow) > .rph, .rph:where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; } /* the page-content wrapper should not impose its own padding/measure */ .rph, .rph * { box-sizing: border-box; } .rph a { text-decoration: none; color: inherit; } .rph img { max-width: 100%; } /* :where() keeps the reset at class specificity (0,1,0) so component classes further down can set their designed margins on p/h elements. */ .rph :where(h1, h2, h3, h4, h5, p) { margin: 0; } /* ---- layout atoms ------------------------------------------------------- */ .rph-wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 32px; } .rph-wrap--wide { max-width: 1280px; } .rph-section { padding-block: 112px; } .rph-section--96 { padding-block: 96px; } /* ---- type atoms --------------------------------------------------------- */ .rph-kicker { font-family: var(--rph-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rph-ink3); } .rph-kicker--ondark { color: var(--rph-dfg3); } .rph-kicker--signal { color: var(--rph-blue-lift); } .rph-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rph-blue); vertical-align: middle; margin-right: 8px; } .rph-filed { font-family: var(--rph-cond); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rph-ink3); white-space: nowrap; } .rph-filed--ondark { color: var(--rph-dfg3); } /* ---- section header (drop-figure folio) --------------------------------- */ .rph-sechead { display: grid; grid-template-columns: auto 1fr auto; column-gap: 24px; row-gap: 12px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--rph-line); } .rph-sechead--ondark { border-bottom-color: var(--rph-dline); } .rph-sechead__folio { grid-column: 1; grid-row: 1 / 3; align-self: end; font-family: var(--rph-serif); font-weight: 200; font-size: 64px; line-height: 0.74; letter-spacing: -0.02em; color: var(--rph-blue); } .rph-sechead--ondark .rph-sechead__folio { color: var(--rph-blue-lift); } .rph-sechead__kicker { grid-column: 2; grid-row: 1; align-self: end; } .rph-sechead__filed { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: end; } .rph-sechead__title { grid-column: 2; grid-row: 2; font-family: var(--rph-serif); font-weight: 400; font-size: 34px; line-height: 1.06; letter-spacing: -0.016em; color: var(--rph-ink); } .rph-sechead--ondark .rph-sechead__title { color: #fff; } /* Narrow viewports: shrink the editorial header so it stops eating the fold and pushing the section content down. */ @media (max-width: 720px) { .rph-sechead { grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; margin-bottom: 28px; padding-bottom: 16px; } .rph-sechead__folio { font-size: 38px; } .rph-sechead__filed { display: none; } .rph-sechead__title { font-size: 23px; line-height: 1.1; } } /* ---- buttons ------------------------------------------------------------ */ .rph-btn { font-family: var(--rph-sans); font-weight: 600; font-size: 14px; line-height: 1; padding: 0.86em 1.3em; border-radius: 9px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; cursor: pointer; transition: filter 150ms ease, background 150ms ease; } .rph-btn:hover { filter: brightness(1.06); text-decoration: none; } .rph-btn--sm { font-size: 11px; padding: 0.66em 1em; } .rph-btn--primary { background: var(--rph-tangelo); color: #fff; box-shadow: 0 1px 2px rgba(192, 64, 0, 0.3); } .rph-btn--navy { background: var(--rph-deep); color: #fff; } .rph-btn--bright { background: var(--rph-blue); color: #fff; } .rph-btn--quiet { background: var(--rph-surface); color: var(--rph-ink); border-color: var(--rph-line2); } .rph-btn--ondark { background: rgba(234, 240, 248, 0.08); color: #fff; border-color: rgba(159, 177, 204, 0.3); } /* Buttons are links inside .rph, where `.rph a { color: inherit }` (0,1,1) outranks the variant color (0,1,0) and drags the label to the dark ink color. Re-assert each variant's text color at higher specificity. */ .rph a.rph-btn--primary, .rph a.rph-btn--navy, .rph a.rph-btn--bright, .rph a.rph-btn--ondark { color: #fff; } .rph a.rph-btn--quiet { color: var(--rph-ink); } .rph-arrow::after { content: "→"; } /* ---- pills -------------------------------------------------------------- */ .rph-pill { display: inline-flex; align-items: center; font-family: var(--rph-cond); font-weight: 600; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35em 0.7em; border-radius: 6px; line-height: 1.1; } .rph-pill--blue { background: var(--rph-blue50); color: var(--rph-blue800); } .rph-pill--tangelo { background: var(--rph-tangelo50); color: var(--rph-tangelo700); } .rph-pill--spiced { background: var(--rph-spiced50); color: #8a4631; } /* ---- chrome: utility bar + header -------------------------------------- */ /* Solid paper backdrop for the shared sticky header, so page content does not * bleed through it on scroll. Applied to the header template-part group. */ .rph-sticky-paper { background: rgba(250, 246, 240, 0.86); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); } .rph-utilbar { background: var(--rph-night); color: var(--rph-dfg2); } .rph-utilbar a { color: inherit; text-decoration: none; } .rph-utilbar a:hover { color: #fff; } .rph-utilbar .rph-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 8px; font-family: var(--rph-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } .rph-utilbar__links { display: flex; gap: 20px; } .rph-header { background: rgba(244, 243, 239, 0.86); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--rph-line); position: sticky; top: 0; z-index: 30; } .rph-header .rph-wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; } .rph-header__logo { height: 20px; width: auto; display: block; } .rph-nav { display: flex; align-items: center; gap: 24px; } .rph-nav a { font-family: var(--rph-sans); font-size: 14px; font-weight: 500; color: var(--rph-ink2); } .rph-nav a:hover { color: var(--rph-tangelo); } .rph-header__cta { display: flex; align-items: center; gap: 12px; } /* ---- 01 · hero ---------------------------------------------------------- */ .rph-hero { padding-block: 88px 80px; position: relative; overflow: hidden; } .rph-hero__glow { position: absolute; top: -25%; right: -12%; width: 62%; height: 130%; background: radial-gradient(58% 50% at 70% 42%, var(--rph-blue50), transparent 70%); pointer-events: none; } .rph-hero__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 48px; align-items: center; position: relative; } .rph-hero__title { font-family: var(--rph-serif); font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--rph-ink); } .rph-hero__lede { font-size: 19px; line-height: 1.62; color: var(--rph-ink2); max-width: 40ch; margin: 0 0 32px; } .rph-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .rph-hero__stats { margin-top: 48px; display: flex; gap: 32px; align-items: flex-start; } .rph-statdiv { width: 1px; height: 54px; background: var(--rph-line2); margin-top: 4px; } .rph-stat__n { font-family: var(--rph-serif); font-weight: 200; font-size: 44px; letter-spacing: -0.02em; line-height: 0.9; color: var(--rph-blue); } .rph-stat__n sub, .rph-stat__sub { font-size: 0.6em; vertical-align: baseline; } .rph-stat__l { display: block; font-family: var(--rph-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-ink3); margin-top: 10px; } /* hero eyebrow — kicker + rule + filed (mirrors the app ConsultHero) */ .rph-hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .rph-hero__rule { flex: 1; height: 1px; background: var(--rph-line2); } .rph-hero__accent { font-style: italic; color: var(--rph-blue); } /* consultation hero passes its accent as (tangelo) vs the homepage's blue span */ .rph-hero__title em { font-style: italic; color: var(--rph-tangelo); } /* hero fact row — mono small-caps, blue values, hairline rule on top */ .rph-hero__facts { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rph-line); } .rph-fact { font-family: var(--rph-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-ink3); white-space: nowrap; } .rph-fact b { color: var(--rph-blue); font-weight: 600; } /* hero proof rail — founder portrait + heritage clipping + price sticker */ .rph-hero__proof { position: relative; justify-self: center; width: 100%; max-width: 420px; } .rph-proof__frame { position: absolute; inset: 18px -16px -16px 22px; background: var(--rph-blue); border-radius: 18px; opacity: 0.1; } .rph-proof__fig { position: relative; margin: 0; background: var(--rph-surface); border: 1px solid var(--rph-line); border-radius: 18px; overflow: hidden; box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42), 0 10px 22px -14px rgba(11, 29, 58, 0.22); } .rph-proof__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; } .rph-proof__cap { padding: 16px 18px 18px; background: var(--rph-deep); color: #fff; } .rph-proof__name { font-family: var(--rph-serif); font-weight: 400; font-size: 19px; letter-spacing: -0.01em; } .rph-proof__role { font-family: var(--rph-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rph-dfg2); margin-top: 6px; } /* price sticker — tilted navy card with full-bleed orange band */ .rph-pricetag { position: absolute; left: -28px; bottom: 150px; z-index: 2; display: inline-block; transform: scale(0.5) rotate(-4deg); transform-origin: center; background: var(--rph-deep); border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 6px #e4e3dd, 0 18px 30px -12px rgba(11, 29, 58, 0.45); } /* Real $210 price-tag graphic (self-contained PNG) — keep the wrapper's position/rotation, drop the CSS-sticker background, ring, and clipping. */ .rph-pricetag--img { background: none; border-radius: 0; overflow: visible; box-shadow: none; transform: scale(1) rotate(-4deg); } .rph-pricetag__img { display: block; width: 188px; height: auto; filter: drop-shadow(0 18px 30px rgba(11, 29, 58, 0.35)); } .rph-pricetag__fig { padding: 20px 26px 16px; text-align: center; } .rph-pricetag__price { font-family: var(--rph-cond); font-weight: 900; font-size: 82px; line-height: 0.84; letter-spacing: -0.03em; color: #fff; } .rph-pricetag__unit { font-family: var(--rph-cond); font-weight: 700; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); margin-top: 8px; padding-left: 0.32em; } .rph-pricetag__band { background: var(--rph-tangelo); padding: 11px 16px 13px; text-align: center; font-family: var(--rph-cond); font-weight: 700; font-size: 13.5px; line-height: 1.18; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; } /* hero form card — the intake form occupying the hero's right column on the consultation page (rp_render_hero aside). Matches the proof frame's surface + shadow so it reads as the same design language. */ .rph-hero__aside { justify-self: stretch; width: 100%; } /* When the hero's right column is the intake form (taller than the copy), top-align both columns so the headline doesn't float mid-height, and widen the container so the two-column form fields have room to breathe. */ .rph-hero--form .rph-wrap--wide { max-width: 1520px; } .rph-hero--form .rph-hero__grid { align-items: start; /* Form column is wider than the copy so the 5-step pill row fits on one line. */ grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 64px; } .rph-hero--form .rph-hero__title { font-size: 46px; } /* Collapse the form-variant hero to one column on tablet/phone. This override out-specifies the base @media rule, so it needs its own breakpoint or the form card overflows off-screen. */ @media (max-width: 980px) { .rph-hero--form .rph-hero__grid { grid-template-columns: 1fr; gap: 32px; } .rph-hero--form .rph-hero__title { font-size: 40px; } } .rph-formcard { position: relative; background: var(--rph-surface); border: 1px solid var(--rph-line); border-radius: 18px; box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42), 0 10px 22px -14px rgba(11, 29, 58, 0.22); padding: 26px 26px 28px; } .rph-formcard__head { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rph-line); } .rph-formcard__title { font-family: var(--rph-serif); font-weight: 300; font-size: 30px; line-height: 1.02; letter-spacing: -0.02em; color: var(--rph-ink); margin: 10px 0 0; } .rph-formcard__note { font-size: 14.5px; line-height: 1.55; color: var(--rph-ink2); margin: 10px 0 0; } /* founder strip — the founder credential + price, relocated under the hero now that the form (not the portrait) owns the hero's right column. */ .rp-founder-strip { display: flex; align-items: center; gap: 18px; max-width: var(--rp-c-max, 1180px); margin: 0 auto; padding: 20px 1.5rem; border-bottom: 1px solid var(--rph-line); } .rp-founder-strip__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; border: 1px solid var(--rph-line); } .rp-founder-strip__text { display: flex; flex-direction: column; gap: 2px; margin-right: auto; } .rp-founder-strip__name { font-family: var(--rph-serif); font-weight: 400; font-size: 18px; letter-spacing: -0.01em; color: var(--rph-ink); } .rp-founder-strip__role { font-family: var(--rph-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rph-ink2); } .rp-founder-strip__price { display: flex; align-items: baseline; gap: 0.4rem; } .rp-founder-strip__price .from { font-family: var(--rph-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-ink2); } .rp-founder-strip__price .num { font-family: var(--rph-serif); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--rph-blue, #2f62c4); letter-spacing: -0.02em; } .rp-founder-strip__price .unit { font-size: 13px; color: var(--rph-ink2); } @media (max-width: 560px) { .rp-founder-strip { flex-wrap: wrap; gap: 12px; } .rp-founder-strip__price { width: 100%; } } /* trust band — four authority cells, serif lead + mono caption, hairline-divided */ .rph-trust { background: var(--rph-bg); border-top: 1px solid var(--rph-line); border-bottom: 1px solid var(--rph-line); } .rph-trust__wrap { padding-inline: 0; } .rph-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rph-line); } .rph-trust__cell { background: var(--rph-bg); display: flex; flex-direction: column; gap: 7px; padding: 26px 32px; } .rph-trust__lead { font-family: var(--rph-serif); font-weight: 400; font-size: 23px; line-height: 1; letter-spacing: -0.015em; color: var(--rph-ink); } .rph-trust__sub { font-family: var(--rph-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; color: var(--rph-ink3); } .rph-trust__rule { width: 22px; height: 2px; background: var(--rph-blue); margin-top: 4px; } /* preview card */ .rph-preview { background: var(--rph-surface); border: 1px solid var(--rph-line); border-radius: 18px; box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42), 0 10px 22px -14px rgba(11, 29, 58, 0.22); overflow: hidden; } .rph-preview__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--rph-line); background: var(--rph-surface2); } .rph-preview__filed { font-family: var(--rph-cond); font-weight: 600; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-ink3); } .rph-preview__body { padding: 24px 24px 32px; } .rph-preview__meta { font-family: var(--rph-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rph-ink3); margin-bottom: 8px; } .rph-preview__name { font-family: var(--rph-serif); font-size: 29px; font-weight: 400; line-height: 1.06; color: var(--rph-ink); } .rph-preview__role { color: var(--rph-ink3); font-size: 14px; margin-top: 6px; } .rph-preview__bars { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .rph-bar { height: 7px; border-radius: 4px; background: var(--rph-blue50); } .rph-bar--hot { background: var(--rph-tangelo100); } .rph-preview__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rph-line); } .rph-preview__score { font-size: 14px; color: var(--rph-ink2); } .rph-preview__score b { font-family: var(--rph-serif); font-weight: 300; color: var(--rph-blue); font-size: 22px; } .rph-preview__mark { width: 24px; height: 24px; display: block; } /* ---- 02 · books (navy ground) ------------------------------------------ */ .rph-books { background: var(--rph-evening); color: #fff; } .rph-books__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; } .rph-books__title { font-family: var(--rph-serif); font-weight: 300; font-size: 46px; line-height: 1.04; letter-spacing: -0.015em; color: #fff; margin-top: 16px; } .rph-books__lede { font-size: 19px; line-height: 1.62; color: var(--rph-dfg2); margin-top: 20px; max-width: 46ch; } .rph-books__shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rph-spine { aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--rph-blue), #1e47a0); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; position: relative; box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42); overflow: hidden; } .rph-spine::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(255, 255, 255, 0.16); } .rph-spine__ed { align-self: flex-start; font-family: var(--rph-cond); font-weight: 700; font-size: 9.9px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--rph-night); padding: 0.25em 0.5em; border-radius: 3px; } .rph-spine__title { font-family: var(--rph-serif); font-weight: 400; font-size: 17px; line-height: 1.16; color: #fff; } .rph-spine__sub { font-family: var(--rph-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-top: 6px; } /* ---- 06 · the shelf — real covers (warm ground) ------------------------ */ .rph-books__covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 48px; } .rph-book { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; } .rph-book__frame { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 22px 48px -26px rgba(11, 29, 58, 0.34); transition: transform 0.3s ease, box-shadow 0.3s ease; } .rph-book__frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .rph-book:hover .rph-book__frame, .rph-book:focus-visible .rph-book__frame { transform: translateY(-5px); box-shadow: 0 30px 60px -24px rgba(11, 29, 58, 0.44); } .rph-book__title { font-family: var(--rph-serif); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--rph-evening); } .rph-book__price { font-family: var(--rph-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--rph-blue); } .rph-books__cta { margin-top: 44px; } /* ---- ethos (night interstitial) ---------------------------------------- */ .rph-ethos { background: var(--rph-night); color: #fff; text-align: center; position: relative; overflow: hidden; } .rph-ethos__glow { position: absolute; inset: 0; background: radial-gradient(40% 60% at 50% 0, rgba(47, 98, 196, 0.22), transparent 70%); } .rph-ethos__inner { position: relative; max-width: 980px; margin-inline: auto; padding-inline: 32px; } .rph-ethos__label { font-family: var(--rph-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rph-blue-lift); margin-bottom: 32px; } .rph-ethos__quote { margin: 0; font-family: var(--rph-serif); font-weight: 200; font-size: 52px; line-height: 1.08; letter-spacing: -0.018em; } .rph-ethos__cite { margin-top: 32px; font-family: var(--rph-cond); font-weight: 600; font-size: 12.8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rph-dfg3); } /* ---- media + text ------------------------------------------------------- */ .rph-media__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .rph-media__fig { margin: 0; position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42); } .rph-media__fig img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .rph-media__cap { position: absolute; left: 16px; bottom: 16px; font-family: var(--rph-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(11, 29, 58, 0.55); backdrop-filter: blur(6px); padding: 0.4em 0.7em; border-radius: 4px; } .rph-media__title { font-family: var(--rph-serif); font-weight: 400; font-size: 36px; line-height: 1.06; letter-spacing: -0.016em; margin: 16px 0 0; color: var(--rph-ink); } .rph-media__body { font-size: 19px; line-height: 1.62; color: var(--rph-ink2); margin: 20px 0 28px; max-width: 46ch; } /* ---- pillars ------------------------------------------------------------ */ .rph-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rph-pillar { background: var(--rph-surface); border: 1px solid var(--rph-line); border-radius: 14px; padding: 32px 24px 24px; box-shadow: 0 1px 2px rgba(16, 36, 44, 0.05); position: relative; overflow: hidden; } .rph-pillar__rule { position: absolute; left: 0; right: 0; top: 0; height: 3px; } .rph-pillar__n { font-family: var(--rph-serif); font-weight: 200; font-size: 38px; line-height: 1; letter-spacing: -0.02em; } .rph-pillar__title { font-family: var(--rph-serif); font-weight: 600; font-size: 23px; margin: 16px 0 8px; color: var(--rph-ink); } .rph-pillar__role { font-family: var(--rph-cond); font-weight: 600; font-size: 11.8px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; } .rph-pillar__body { color: var(--rph-ink2); margin: 0 0 24px; font-size: 14px; line-height: 1.6; } .rph-link { color: var(--rph-blue); font-weight: 600; font-size: 14px; font-family: var(--rph-sans); display: inline-flex; gap: 0.4em; align-items: center; } /* ---- photo band (full-bleed) ------------------------------------------- */ .rph-band { position: relative; padding-block: 128px; background-size: cover; background-position: center; color: #fff; } .rph-band__title { font-family: var(--rph-serif); font-weight: 300; font-size: 46px; line-height: 1.06; letter-spacing: -0.016em; margin: 16px 0 0; color: #fff; } .rph-band__stats { display: grid; grid-template-columns: repeat(3, auto); gap: 56px; margin-top: 40px; justify-content: start; } .rph-bandstat__n { display: block; font-family: var(--rph-serif); font-weight: 200; font-size: 44px; line-height: 0.9; letter-spacing: -0.02em; color: #fff; } .rph-bandstat__l { display: block; font-family: var(--rph-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-dfg2); margin-top: 10px; max-width: 22ch; } /* ---- services (paper, 4-up) -------------------------------------------- */ .rph-services { background: var(--rph-surface2); border-block: 1px solid var(--rph-line); } .rph-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .rph-svc { padding: 24px; background: var(--rph-surface); border: 1px solid var(--rph-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 36, 44, 0.05); } .rph-svc__icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .rph-svc__title { font-family: var(--rph-serif); font-weight: 600; font-size: 18px; margin: 0 0 8px; color: var(--rph-ink); } .rph-svc__body { color: var(--rph-ink2); font-size: 14px; margin: 0; line-height: 1.55; } /* ---- news --------------------------------------------------------------- */ /* Two lead stories large, then a compact grid of the rest. */ .rph-news-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .rph-news-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; } .rph-news-foot { display: flex; justify-content: flex-end; margin-top: 22px; } @media (max-width: 900px) { .rph-news-feature { grid-template-columns: 1fr; } .rph-news-more { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rph-news-more { grid-template-columns: 1fr; } } .rph-newscard { background: var(--rph-surface); border: 1px solid var(--rph-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(16, 36, 44, 0.05); } .rph-newscard__cover { aspect-ratio: 16 / 10; display: flex; align-items: flex-start; padding: 16px; background-size: cover; background-position: center; } .rph-newscard--banner .rph-newscard__cover { aspect-ratio: 16 / 9; } .rph-newscard__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .rph-newscard__meta { font-family: var(--rph-sans); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rph-ink3); } .rph-newscard__title { font-family: var(--rph-sans); font-weight: 600; line-height: 1.2; font-size: 18.9px; margin: 0; color: var(--rph-ink); } /* Homepage post cards: sans throughout — no mono, no serif, no condensed. */ .rph-newscard .rph-pill { font-family: var(--rph-sans); letter-spacing: 0.06em; } .rph-newscard--banner .rph-newscard__body { padding: 24px 26px 26px; gap: 14px; } .rph-newscard--banner .rph-newscard__title { font-size: 27px; line-height: 1.1; } .rph-newscard--banner .rph-newscard__cover { padding: 20px; } .rph-newscard__excerpt { color: var(--rph-ink2); font-size: 14px; margin: 0; line-height: 1.55; } .rph-newscard__link { margin-top: auto; } /* ---- events (dark, serif numerals) ------------------------------------- */ .rph-events { background: var(--rph-evening); color: var(--rph-dfg2); } .rph-eventrow { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding: 24px 0; border-top: 1px solid var(--rph-dline); } .rph-eventrow--first { border-top: none; } .rph-eventrow__date { text-align: center; width: 84px; } .rph-eventrow__dy { font-family: var(--rph-serif); font-weight: 200; font-size: 51px; line-height: 0.85; color: var(--rph-blue-lift); letter-spacing: -0.02em; } .rph-eventrow__mo { font-family: var(--rph-cond); font-weight: 600; font-size: 11.8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rph-dfg3); margin-top: 6px; } .rph-eventrow__title { font-family: var(--rph-serif); font-weight: 600; font-size: 18.9px; color: #fff; margin: 0; } .rph-eventrow__detail { font-family: var(--rph-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rph-dfg3); margin-top: 6px; } /* ---- CTA (darkest ground, dual glow) ----------------------------------- */ .rph-cta__panel { background: linear-gradient(135deg, var(--rph-night), var(--rph-evening)); border-radius: 18px; padding: 64px 48px; position: relative; overflow: hidden; box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42); } .rph-cta__glow-a { position: absolute; top: -40%; right: -8%; width: 48%; height: 170%; background: radial-gradient(50% 50% at 60% 50%, rgba(249, 77, 0, 0.2), transparent 70%); } .rph-cta__glow-b { position: absolute; bottom: -50%; left: -6%; width: 42%; height: 160%; background: radial-gradient(50% 50% at 40% 50%, rgba(47, 98, 196, 0.26), transparent 70%); } .rph-cta__grid { position: relative; display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 40px; align-items: center; } .rph-cta__title { font-family: var(--rph-serif); font-weight: 300; font-size: 46px; line-height: 1.06; letter-spacing: -0.016em; color: #fff; margin: 16px 0; } .rph-cta__lede { font-size: 19px; line-height: 1.62; color: var(--rph-dfg2); max-width: 46ch; margin: 0; } .rph-cta__actions { display: flex; flex-direction: column; gap: 12px; } /* ---- footer (night) ----------------------------------------------------- */ .rph-footer { background: var(--rph-night); color: var(--rph-dfg2); padding-block: 80px 32px; } .rph-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; } .rph-footer__logo { height: 24px; width: auto; display: block; } .rph-footer__line { font-family: var(--rph-serif); font-weight: 200; font-size: 38px; line-height: 1.05; color: #fff; letter-spacing: -0.015em; margin: 20px 0 0; } .rph-footcol__h { color: #fff; font-family: var(--rph-cond); font-weight: 600; font-size: 12.8px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 16px; } .rph-footcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .rph-footcol li { font-size: 14px; color: var(--rph-dfg2); } .rph-footcol a { color: var(--rph-dfg2); font-family: var(--rph-sans); text-decoration: none; transition: color 0.16s; } .rph-footcol a:hover { color: #fff; } .rph-footer__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rph-dline); font-family: var(--rph-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rph-dfg3); } /* ---- responsive --------------------------------------------------------- */ @media (max-width: 980px) { .rph-hero__grid, .rph-books__grid, .rph-media__grid, .rph-cta__grid { grid-template-columns: 1fr; } .rph-pillars, .rph-svc-grid, .rph-news-grid, .rph-books__covers, .rph-footer__grid { grid-template-columns: 1fr 1fr; } .rph-hero__title { font-size: 44px; } .rph-hero__proof { margin-top: 44px; } .rph-trust__grid { grid-template-columns: 1fr 1fr; } .rph-ethos__quote { font-size: 38px; } .rph-nav, .rph-header__cta { display: none; } } @media (max-width: 640px) { .rph-section, .rph-band { padding-block: 72px; } .rph-pillars, .rph-svc-grid, .rph-news-grid, .rph-footer__grid, .rph-books__shelf, .rph-band__stats { grid-template-columns: 1fr; } .rph-hero__stats { flex-wrap: wrap; gap: 20px; } .rph-trust__grid { grid-template-columns: 1fr; } .rph-utilbar .rph-wrap { flex-direction: column; gap: 4px; text-align: center; } } /* =========================================================================== Free builders (CCAR, cover letter, resume). Client-side Alpine tools rendered by inc/child-pages.php velocity_render_builder(). Uses the same --rph-* brand tokens as the homepage system. ======================================================================== */ .rpb { font-family: var(--rph-sans, var(--rp-messina-sans-stack)); margin-top: 0.5rem; } .rpb-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 900px) { .rpb-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } } .rpb-note { font-size: 0.9rem; color: var(--rph-ink3, #727a82); margin: 0 0 1.25rem; line-height: 1.5; } .rpb-field { margin-bottom: 1rem; } .rpb-label { display: block; font-family: var(--rph-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rph-ink2, #48515a); margin-bottom: 0.4rem; } .rpb-control { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; color: var(--rph-ink, #16243a); background: var(--rph-surface, #fff); border: 1px solid var(--rph-line2, #d9d8d1); border-radius: 6px; padding: 0.6rem 0.7rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .rpb-control:focus { outline: none; border-color: var(--rph-blue, #2f62c4); box-shadow: 0 0 0 3px rgba(47, 98, 196, 0.15); } textarea.rpb-control { resize: vertical; min-height: 3.5rem; line-height: 1.5; } .rpb-output { position: sticky; top: 1.5rem; border: 1px solid var(--rph-line, #e7e6e0); border-radius: 8px; background: var(--rph-surface2, #fbfaf7); padding: 1.25rem; } .rpb-output-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .rpb-output-title { font-family: var(--rph-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--rph-ink2, #37414b); } .rpb-actions { display: flex; gap: 0.5rem; } .rpb-btn { font: inherit; font-size: 0.82rem; cursor: pointer; border: 1px solid var(--rph-line2, #d9d8d1); background: var(--rph-surface, #fff); color: var(--rph-ink, #16243a); border-radius: 6px; padding: 0.35rem 0.8rem; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .rpb-btn:hover { border-color: var(--rph-ink3, #727a82); } .rpb-btn-primary { background: var(--rph-tangelo, #f94d00); border-color: var(--rph-tangelo, #f94d00); color: #fff; } .rpb-btn-primary:hover { background: #dd4400; border-color: #dd4400; } .rpb-pre { font-family: var(--rph-mono); font-size: 1rem; line-height: 1.65; font-weight: 500; color: var(--rph-ink, #16243a); white-space: pre-wrap; word-break: break-word; margin: 0; } .rpb-empty { font-size: 0.9rem; color: var(--rph-ink3, #727a82); margin: 0; font-style: italic; } /* -- Opt-in "email me this draft" lead capture ---------------------------- */ .rpb-capture { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rph-line2, #d9d8d1); } .rpb-capture-lead { font-size: 0.9rem; line-height: 1.5; color: var(--rph-ink2, #3a4759); margin: 0 0 0.7rem; } .rpb-capture-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.6rem; } @media (max-width: 560px) { .rpb-capture-row { grid-template-columns: 1fr; } } .rpb-capture-btn { width: 100%; padding: 0.55rem 1rem; } .rpb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .rpb-capture-err { font-size: 0.85rem; color: #b3261e; margin: 0.5rem 0 0; } .rpb-capture-done { font-size: 0.9rem; color: var(--rph-ink, #16243a); margin: 0; font-weight: 600; } [x-cloak] { display: none !important; } /* =========================================================================== Homepage v4 — the 13-section RPHomeBody port (editorial hero, audiences, new rules, method, photo band, agency, certification, newsletter). Reuses the shared rph- vocabulary (wrap, sechead, btn, kicker, filed, stat, dot). Faithful to src/components/system/screens/rp/sections/*. ======================================================================== */ /* -- Editorial hero (contact CTA replaces the app's upload dropzone) ------- */ .rph-xhero { position: relative; overflow: hidden; background: var(--rph-surface2, #fbfaf7); border-bottom: 1px solid var(--rph-line, #e7e6e0); padding-block: 72px 60px; } .rph-xhero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(56% 48% at 72% 38%, rgba(47, 98, 196, 0.1), transparent 70%); } .rph-xhero__grid { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center; } .rph-xhero__head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .rph-xhero__head-rule { flex: 1; height: 1px; background: var(--rph-line2, #d9d8d1); } .rph-xhero__title { font-family: var(--rph-serif); font-weight: 300; font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1; letter-spacing: -0.022em; margin: 0; color: var(--rph-ink); max-width: 15ch; } .rph-xhero__lede { font-size: 1.1875rem; font-weight: 600; /* Messina Sans ships 400/600 only; 500 falls back to 400 */ line-height: 1.5; color: var(--rph-ink); max-width: 46ch; margin: 28px 0 0; } .rph-xhero__stats { margin-top: 40px; display: flex; gap: 30px; align-items: flex-start; } .rph-xhero__statdiv { width: 1px; height: 54px; background: var(--rph-line2, #d9d8d1); margin-top: 4px; } /* Contact CTA card — the app's dropzone footprint, as a solid action card. */ .rph-xhero__cta { background: var(--rph-surface, #fff); border: 1px solid var(--rph-line2, #d9d8d1); border-radius: 16px; box-shadow: var(--rph-shadow-soft, 0 1px 2px rgba(16, 36, 44, 0.05)); padding: 40px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 208px; justify-content: center; } .rph-xhero__cta-eyebrow { font-family: var(--rph-cond); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rph-tangelo); } .rph-xhero__cta-title { font-family: var(--rph-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.18; color: var(--rph-ink); letter-spacing: -0.015em; max-width: 22ch; margin: 0; } .rph-xhero__cta-meta { font-family: var(--rph-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--rph-ink3); } .rph-xhero__cta .rph-btn { margin-top: 6px; } .rph-xhero__skip { display: flex; align-items: center; gap: 12px; padding-top: 2px; color: var(--rph-ink3); font-family: var(--rph-sans); font-size: 0.82rem; } .rph-xhero__skip-rule { flex: 1; height: 1px; background: var(--rph-line2, #d9d8d1); } .rph-xhero__skip a { color: var(--rph-blue); font-weight: 600; text-decoration: none; } .rph-xhero__skip a:hover { text-decoration: underline; } /* -- Section lede (shared under a sechead) --------------------------------- */ .rph-lede { font-size: 1.1875rem; line-height: 1.62; color: var(--rph-ink2); max-width: 62ch; margin: 0 0 40px; } .rph-lede--ondark { color: var(--rph-dfg2, #9fb1cc); } /* -- Card grids (audiences, rules) ----------------------------------------- */ .rph-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Seven-card composition: a row of three service tracks, then a row of four audience cards. 12-col grid so both rows divide evenly. */ .rph-cardgrid--34 { grid-template-columns: repeat(12, 1fr); } .rph-cardgrid--34 > .rph-scard { grid-column: span 4; } .rph-cardgrid--34 > .rph-scard:nth-child(n + 4) { grid-column: span 3; } .rph-scard { background: var(--rph-surface, #fff); border: 1px solid var(--rph-line, #e7e6e0); border-radius: 14px; padding: 30px 26px 26px; box-shadow: var(--rph-shadow-soft, 0 1px 2px rgba(16, 36, 44, 0.05)); display: flex; flex-direction: column; gap: 14px; } .rph-scard__tag { font-family: var(--rph-cond); font-weight: 600; font-size: 0.7375rem; letter-spacing: 0.14em; text-transform: uppercase; } .rph-scard__title { font-family: var(--rph-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.015em; margin: 0; color: var(--rph-ink); } .rph-scard--rule .rph-scard__title { font-size: 1.4375rem; } .rph-scard__body { font-size: 0.90625rem; line-height: 1.6; color: var(--rph-ink2); margin: 0; } .rph-scard__more { margin-top: auto; padding-top: 4px; color: var(--rph-blue); font-weight: 600; font-size: 0.875rem; font-family: var(--rph-sans); display: inline-flex; gap: 0.4em; align-items: center; text-decoration: none; } .rph-scard__head { display: flex; align-items: baseline; justify-content: space-between; } .rph-scard__stamp { font-family: var(--rph-mono); font-size: 0.625rem; letter-spacing: 0.14em; color: var(--rph-ink3); } .rph-rules { background: var(--rph-surface2, #fbfaf7); border-top: 1px solid var(--rph-line, #e7e6e0); } /* -- Method (dark, framed media + numbered steps) -------------------------- */ .rph-method { background: var(--rph-evening, #0f264c); color: #fff; } .rph-method__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 52px; align-items: stretch; } .rph-method__fig { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--rph-dline, rgba(143, 167, 205, 0.18)); min-height: 420px; background: linear-gradient(180deg, rgba(15, 38, 76, 0.2), rgba(11, 29, 58, 0.9)), var(--rph-night, #0b1d3a); background-size: cover; background-position: center; } .rph-method__cap { position: absolute; left: 22px; bottom: 20px; font-family: var(--rph-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rph-dfg2, #9fb1cc); } .rph-method__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 34px; } .rph-method__step { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; } .rph-method__n { font-family: var(--rph-serif); font-weight: 300; font-size: 1.875rem; line-height: 1; color: var(--rph-blue-lift, #5b8ae0); padding-top: 2px; min-width: 44px; } .rph-method__tag { font-family: var(--rph-cond); font-weight: 600; font-size: 0.71875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rph-tangelo); } .rph-method__stitle { font-family: var(--rph-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.14; letter-spacing: -0.015em; margin: 6px 0 0; color: #fff; } .rph-method__sbody { font-size: 0.90625rem; line-height: 1.6; color: var(--rph-dfg2, #9fb1cc); margin: 6px 0 0; max-width: 42ch; } .rph-method__cta { margin-top: 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .rph-method__cta-meta { font-family: var(--rph-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-dfg3, #6f84a6); } /* -- Washington photo band ------------------------------------------------- */ .rph-pband { position: relative; overflow: hidden; padding-block: 112px; background-color: var(--rph-night, #0b1d3a); background-image: linear-gradient(180deg, rgba(11, 29, 58, 0.88), rgba(11, 29, 58, 0.94)); color: #fff; } .rph-pband__title { font-family: var(--rph-serif); font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.875rem); line-height: 1.06; letter-spacing: -0.016em; margin: 16px 0 0; color: #fff; max-width: 20ch; } .rph-pband__lede { font-family: var(--rph-serif); font-weight: 300; font-size: 1.0625rem; line-height: 1.55; color: var(--rph-dfg2, #9fb1cc); margin: 18px 0 0; max-width: 46ch; } .rph-pband__people { margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .rph-pband__fig { margin: 0; } .rph-pband__ph { aspect-ratio: 4 / 5; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); overflow: hidden; } .rph-pband__ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .rph-pband__cap { font-family: var(--rph-mono); font-size: 0.59375rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-dfg2, #9fb1cc); margin-top: 12px; display: block; } .rph-pband__stats { margin: 46px 0 0; display: flex; gap: 44px; flex-wrap: wrap; } .rph-pband__stat-n { display: block; font-family: var(--rph-serif); font-weight: 200; font-size: 2.75rem; line-height: 0.9; letter-spacing: -0.02em; color: #fff; } .rph-pband__stat-l { display: block; font-family: var(--rph-mono); font-size: 0.59375rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-dfg2, #9fb1cc); margin-top: 10px; max-width: 22ch; } /* -- Agency training (night, roster) --------------------------------------- */ .rph-agency { background: var(--rph-paper, #f6f3ec); border-top: 1px solid var(--rph-line, #e7e6e0); position: relative; overflow: hidden; } .rph-agency__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } .rph-agency__fig { margin: 0; position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; box-shadow: 0 26px 64px -34px rgba(11, 29, 58, 0.45); } .rph-agency__fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } .rph-agency__figcap { position: absolute; left: 16px; bottom: 13px; font-family: var(--rph-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(11, 29, 58, 0.7); } .rph-agency__body { display: flex; flex-direction: column; gap: 22px; } .rph-agency__p { font-size: 1.1875rem; line-height: 1.62; color: var(--rph-ink-2, #48515a); margin: 0; max-width: 46ch; } .rph-agency__formats { display: flex; flex-wrap: wrap; gap: 10px; } .rph-agency__chip { font-family: var(--rph-cond); font-weight: 600; font-size: 0.78125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rph-ink, #1c2733); border: 1px solid var(--rph-line-2, #d9d5cb); border-radius: 8px; padding: 0.5em 0.85em; } .rph-agency__reg { font-family: var(--rph-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rph-ink-3, #727a82); } .rph-agency__proof { margin-top: 54px; padding-top: 28px; border-top: 1px solid var(--rph-line, #e7e6e0); } .rph-agency__roster-label { display: block; font-family: var(--rph-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rph-ink-3, #727a82); margin-bottom: 18px; } .rph-logobar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 18px; } @media (min-width: 700px) { .rph-logobar { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1020px) { .rph-logobar { grid-template-columns: repeat(7, 1fr); } } .rph-logobar li { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .rph-logobar img { height: 74px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.68; transition: filter 0.18s ease, opacity 0.18s ease; } .rph-logobar li:hover img { filter: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .rph-logobar img { transition: none; } } .rph-logobar li span { font-family: var(--rph-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rph-ink-3, #727a82); line-height: 1.4; max-width: 15ch; } .rph-logobar-note { margin: 28px 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--rph-ink-3, #727a82); max-width: 62ch; } /* -- Certification (paper, credential cards) ------------------------------- */ .rph-cert { border-top: 1px solid var(--rph-line, #e7e6e0); } .rph-cert__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .rph-cert__body { display: flex; flex-direction: column; gap: 20px; } .rph-cert__p { font-size: 1.1875rem; line-height: 1.62; color: var(--rph-ink2); margin: 0; max-width: 46ch; } .rph-cert__meta { font-family: var(--rph-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rph-ink3); } .rph-cert__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rph-cert__card { background: var(--rph-surface, #fff); border: 1px solid var(--rph-line, #e7e6e0); border-radius: 14px; padding: 24px 22px; box-shadow: var(--rph-shadow-soft, 0 1px 2px rgba(16, 36, 44, 0.05)); } .rph-cert__ribbon { display: block; width: min(100%, 234px); height: auto; margin: 0 0 14px; } .rph-cert__badge-note { grid-column: 1 / -1; font-family: var(--rph-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-ink3, #586069); margin: 4px 0 0; text-align: center; } .rph-cert__abbr { font-family: var(--rph-serif); font-weight: 400; font-size: 1.5rem; color: var(--rph-tangelo700, #c04000); } .rph-cert__name { font-family: var(--rph-sans); font-weight: 600; font-size: 0.9375rem; color: var(--rph-ink); margin: 10px 0 0; } .rph-cert__who { font-size: 0.84rem; line-height: 1.55; color: var(--rph-ink2); margin: 8px 0 0; } /* -- Newsletter signup (deep-blue capture) --------------------------------- */ .rph-nsignup { background: var(--rph-deep, #1c3664); color: #fff; padding-block: 88px; } .rph-nsignup__grid { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 48px; align-items: center; } .rph-nsignup__kicker { font-family: var(--rph-cond); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: #f7b79c; } .rph-nsignup__title { font-family: var(--rph-serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; margin: 16px 0 0; color: #fff; max-width: 520px; } .rph-nsignup__lede { font-family: var(--rph-sans); font-size: 0.96875rem; line-height: 1.6; color: #c6d2e6; margin: 16px 0 0; max-width: 460px; } .rph-nsignup__form { background: var(--rph-surface, #fff); border-radius: 14px; padding: 20px; box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.5); } .rph-nsignup__label { display: block; font-family: var(--rph-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-ink3); } .rph-nsignup__input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; color: var(--rph-ink); background: var(--rph-surface2, #fbfaf7); border: 1px solid var(--rph-line2, #d9d8d1); border-radius: 8px; padding: 0.7rem 0.75rem; margin: 8px 0 12px; } .rph-nsignup__input:focus { outline: none; border-color: var(--rph-blue); box-shadow: 0 0 0 3px rgba(47, 98, 196, 0.15); } .rph-nsignup__reassure { font-family: var(--rph-sans); font-size: 0.78rem; color: var(--rph-ink3); margin: 12px 0 0; } /* -- Homepage testimonials (featured quote + 3-up) ------------------------- */ .rph-testi__hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; margin-bottom: 44px; } .rph-testi__featured { border-left: 3px solid var(--rph-tangelo); padding-left: 28px; max-width: 60ch; } .rph-testi__portrait { margin: 0; justify-self: center; } .rph-testi__portrait img { display: block; max-width: 320px; width: 100%; height: auto; } .rph-testi__portrait-cap { display: block; margin-top: 14px; font-family: var(--rph-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rph-ink3, #6b7686); text-align: center; } .rph-testi__outcome { font-family: var(--rph-cond); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rph-tangelo700, #c04000); } .rph-testi__quote { font-family: var(--rph-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.4; color: var(--rph-ink); margin: 14px 0 0; } .rph-testi__featured .rph-testi__quote { font-size: 1.75rem; } .rph-testi__cite { font-family: var(--rph-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rph-ink3); margin: 14px 0 0; display: block; } .rph-testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .rph-testi__card { border-top: 2px solid var(--rph-line, #e7e6e0); padding-top: 22px; } .rph-testi__card .rph-testi__quote { font-size: 1.0625rem; line-height: 1.55; color: var(--rph-ink2); } /* -- Responsive collapses -------------------------------------------------- */ @media (max-width: 980px) { .rph-xhero__grid, .rph-method__grid, .rph-cert__grid, .rph-nsignup__grid { grid-template-columns: 1fr; gap: 40px; } .rph-agency__grid { grid-template-columns: 1fr; } .rph-logobar { grid-template-columns: repeat(3, 1fr); } .rph-cardgrid, .rph-testi__grid { grid-template-columns: 1fr 1fr; } .rph-cardgrid--34 > .rph-scard, .rph-cardgrid--34 > .rph-scard:nth-child(n + 4) { grid-column: auto; } .rph-cardgrid--34 > .rph-scard:last-child { grid-column: 1 / -1; } .rph-testi__hero { grid-template-columns: 1fr; gap: 32px; } .rph-pband__people { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .rph-cardgrid, .rph-testi__grid, .rph-cert__cards, .rph-pband__people { grid-template-columns: 1fr; } .rph-xhero__stats { flex-wrap: wrap; gap: 20px; } } /* =========================================================================== Homepage media — bundled RP photography + DC video loops (hero backdrop, method frame, CTA close). Videos sit far back and quiet under scrims. ======================================================================== */ .rph-xhero { position: relative; } .rph-xhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.14; z-index: 0; pointer-events: none; } .rph-xhero__glow { z-index: 1; } .rph-xhero .rph-wrap { position: relative; z-index: 2; } .rph-method__fig { position: relative; } .rph-method__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .rph-method__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 38, 76, 0.1) 0%, rgba(15, 38, 76, 0.3) 55%, rgba(15, 38, 76, 0.86) 100%); } .rph-method__cap { z-index: 2; } .rph-cta__panel { position: relative; overflow: hidden; } .rph-cta__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.26; z-index: 0; pointer-events: none; } .rph-cta__glow-a, .rph-cta__glow-b { z-index: 1; } .rph-cta__grid { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .rph-xhero__video, .rph-method__video, .rph-cta__video { display: none; } } /* =========================================================================== Newsroom / blog archive cards (home.html query loop, scope .rph-news) Contained cards: full-bleed banner on top (no crop, no radius), post meta in a padded body. Equal-height across a row so the grid reads as one system. ======================================================================== */ .rph-news .rph-news-grid.wp-block-post-template { gap: 2rem 1.75rem; } .rph-news .rph-news-card { background: var(--card, #ffffff); border: 1px solid var(--border, #e7e6e0); overflow: hidden; /* clip the banner to the card edges */ height: 100%; /* fill the grid cell → equal-height cards */ } /* Banner: show the featured image in full, flush to the card's top edge. */ .rph-news .rph-news-card .wp-block-post-featured-image { margin: 0; line-height: 0; /* kill descender gap under the */ } .rph-news .rph-news-card .wp-block-post-featured-image a, .rph-news .rph-news-card .wp-block-post-featured-image img, .rph-news .rph-news-card .rph-thumb-fallback { display: block; width: 100%; height: auto; border-radius: 0 !important; } /* Body: the contained meta column. flex:1 pushes the date to a stable baseline and lets the card stretch cleanly to the row height. */ .rph-news .rph-news-card__body { flex: 1 1 auto; padding: 1.15rem 1.35rem 1.4rem; } /* Pagination — bordered mono page chips, navy current, tangelo hover. */ .rph-news-pagination { gap: 0.4rem; flex-wrap: wrap; } .rph-news-pagination .wp-block-query-pagination-numbers { display: flex; align-items: center; gap: 0.4rem; } .rph-news-pagination .page-numbers, .rph-news-pagination .wp-block-query-pagination-previous, .rph-news-pagination .wp-block-query-pagination-next { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.7rem; border: 1px solid var(--border, #e7e6e0); font-family: var(--rph-mono, var(--font-mono), ui-monospace, monospace); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--foreground, #16243a); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .rph-news-pagination .wp-block-query-pagination-previous, .rph-news-pagination .wp-block-query-pagination-next { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; } .rph-news-pagination .page-numbers.current { background: var(--rph-deep, #1c3664); border-color: var(--rph-deep, #1c3664); color: #ffffff; } .rph-news-pagination a.page-numbers:hover, .rph-news-pagination a.wp-block-query-pagination-previous:hover, .rph-news-pagination a.wp-block-query-pagination-next:hover { border-color: var(--rph-tangelo, #f94d00); color: var(--rph-tangelo, #f94d00); } /* The ellipsis between number ranges is not a control — no chrome. */ .rph-news-pagination .page-numbers.dots { border: 0; min-width: 1rem; padding: 0 0.25rem; color: var(--muted-foreground, #727a82); } /* --- 2026-07-12 KT homepage review: hero flag + note, compact newsletter --- */ .rph-flag { display: inline-flex; vertical-align: -1px; margin-right: 9px; width: 20px; height: 13px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(11, 29, 58, 0.12); overflow: hidden; } .rph-flag svg { display: block; } .rph-xhero__note { font-size: 1rem; line-height: 1.6; color: var(--rph-ink-2, #48515a); max-width: 52ch; margin: 18px 0 0; } .rph-nsignup--compact { padding-block: 56px; } .rph-nsignup--compact .rph-nsignup__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); } .rph-nsignup__logo { display: block; width: 120px; height: auto; margin: 0 0 18px; } /* --- 2026-07-12 KT review round 2: hero book plate + certification badge --- */ /* The book itself, under the hero CTA — cover, title, order link, one object. */ .rph-xhero__book { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 16px 20px; background: var(--rph-surface, #fff); border: 1px solid var(--rph-line2, #d9d8d1); border-radius: 12px; text-decoration: none; box-shadow: var(--rph-shadow-soft, 0 1px 2px rgba(16, 36, 44, 0.05)); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .rph-xhero__book:hover { border-color: var(--rph-blue, #2f62c4); box-shadow: 0 10px 28px -18px rgba(11, 29, 58, 0.35); } .rph-xhero__book-cover { width: 72px; height: auto; border-radius: 3px; box-shadow: 0 6px 16px -6px rgba(11, 29, 58, 0.45); transform: rotate(-2deg); } .rph-xhero__book-text { display: flex; flex-direction: column; gap: 3px; text-align: left; } .rph-xhero__book-eyebrow { font-family: var(--rph-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rph-tangelo700, #c04000); } .rph-xhero__book-title { font-family: var(--rph-serif); font-size: 1.05rem; line-height: 1.25; color: var(--rph-ink); } .rph-xhero__book-link { font-family: var(--rph-sans); font-weight: 600; font-size: 0.82rem; color: var(--rph-blue, #2f62c4); } .rph-xhero__book:hover .rph-xhero__book-link { text-decoration: underline; } /* Credential badge beside the CFJST card. */ .rph-cert__badge { margin: 0; align-self: center; justify-self: center; text-align: center; padding: 8px 6px; } .rph-cert__badge img { width: 224px; height: auto; background: #fff; border: 1px solid var(--rph-line, #e7e6e0); border-radius: 14px; padding: 18px 20px; box-shadow: var(--rph-shadow-soft, 0 1px 2px rgba(16, 36, 44, 0.05)); } .rph-cert__badge figcaption { margin-top: 12px; font-family: var(--rph-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rph-ink3, #727a82); max-width: 24ch; margin-inline: auto; }