/* ================================================================== The Longevity Edge — /speaking (podcast-guest press kit) page styles Loaded by inc/speaking.php only, deps le-components, priority 22. Token rule: SHORT token names only (--navy-900, --s-6, --gold-text). inc/enqueue-cleanup.php dequeues `global-styles` on block-free pages, so every WordPress preset variable is UNDEFINED here. Do not use one. Scoping rule: everything is either .speaking-* or a component class nested under a .speaking-* ancestor. about.css is NOT loaded on this page (inc/about.php enqueues it on page-about.php only), so the handful of .about-* rules this page reuses are copied in below — scoped, and deliberately WITHOUT .about-why-card's container rule (it carries position:sticky; top:100px, which must not apply here). ================================================================== */ /* ------------------------------------------------------------------ 0. Kadence page chrome reset Guarded on three body selectors on purpose. WordPress will auto-match page-speaking.php to a page slugged "speaking" WITHOUT writing _wp_page_template, in which case the body class is page-template-default, not page-template-page-speaking. inc/speaking.php also adds a `speaking-page` body class via the body_class filter, which is the reliable hook; the other two are belt-and-braces. This sheet only ever loads on the speaking page, so the bare page-template-default selector cannot leak to other pages. ------------------------------------------------------------------ */ body.speaking-page .entry-header, body.page-template-page-speaking .entry-header, body.page-template-default .entry-header, body.speaking-page .page-title, body.page-template-page-speaking .page-title, body.page-template-default .page-title, body.speaking-page .entry-title, body.page-template-page-speaking .entry-title, body.page-template-default .entry-title { display: none !important; } body.speaking-page .content-area, body.page-template-page-speaking .content-area, body.page-template-default .content-area { margin-top: 0 !important; padding: 0 !important; } body.speaking-page .entry-content-wrap, body.page-template-page-speaking .entry-content-wrap, body.page-template-default .entry-content-wrap { padding: 0 !important; } body.speaking-page main#main, body.page-template-page-speaking main#main, body.page-template-default main#main { padding: 0 !important; } body.speaking-page .primary-sidebar, body.page-template-page-speaking .primary-sidebar, body.page-template-default .primary-sidebar { display: none !important; } /* The 100vw full-bleed technique below can produce a hairline horizontal scroll when a desktop scrollbar is visible. Same fix pdp.css / shop.css / article.css already ship. Safe here: this sheet is page-scoped. */ html, body { overflow-x: clip; } /* ------------------------------------------------------------------ 1. Full-bleed bands + inner container In the mockup the sections were body children, so they were full width for free. In the theme they sit inside Kadence's content wrapper, so they need about.css's 100vw technique (about.css line 21). ------------------------------------------------------------------ */ .speaking-hero, .speaking-section, .speaking-pullquote { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .speaking-hero .container, .speaking-section .container, .speaking-pullquote .container { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-5); } /* ------------------------------------------------------------------ 2. Reused about.css rules — copied in, scoped ------------------------------------------------------------------ */ .speaking-section .about-section-head { margin: 0 0 var(--s-7); max-width: 760px; } .speaking-section .about-section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); color: var(--navy-900); margin: 0 0 var(--s-3); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); } .speaking-section .about-section-sub { font-size: var(--fs-base); color: var(--ink-700); margin: 0; line-height: var(--lh-relaxed); } /* Portrait treatment (about.css) — container rule included, it carries no sticky. */ .speaking-hero .about-hero-portrait { position: relative; } .speaking-hero .about-hero-portrait-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 48px rgba(14, 26, 43, 0.18); transform: rotate(-1deg); transition: transform 400ms var(--ease-out); } .speaking-hero .about-hero-portrait-frame:hover { transform: rotate(0deg); } .speaking-hero .about-hero-portrait-frame::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--gold-300); border-radius: var(--r-lg); pointer-events: none; z-index: 2; } .speaking-hero .about-hero-portrait-frame img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4/5; } .speaking-hero .about-hero-portrait-sig { position: absolute; bottom: -16px; right: -8px; background: var(--navy-900); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); padding: 8px 16px; border-radius: var(--r-pill); letter-spacing: var(--ls-tight); box-shadow: 0 8px 16px rgba(14,26,43,0.22); } /* Pull-quote band (about.css) — the strongest quote treatment in the theme. Markup keeps about.css's