/* * eoa-results.css — /results/ page (promo + populated Map states). * Functional-first, same DESIGN PLACEHOLDER convention as eoa-hero.css / home-quiz.php. */ .eoa-results { display: block; width: 100%; } /* ===================================================================================== * FOCUSED-MODE HEADER for /results/ (2026-07-13). functions.php's alexdesigns_eoa_focus_preboot() * puts `is-eoa-focused` on for every /results/ load (see that function's own comment). * The hide-chrome + logo-lockup-swap rules that make the class actually DO anything live in * eoa-wave-hero.css's own "§1/§7 — FOCUSED MODE" block — but that stylesheet is homepage-only * (functions.php only enqueues it when `$is_home`), so this page needs its own copy of exactly * those selectors rather than pulling in that whole (otherwise-unrelated) homepage bundle just * for ~15 lines. Keep these two blocks in sync if the focused-mode chrome rules ever change. * ===================================================================================== */ /* Two elements need this — see eoa-wave-hero.css's matching block for why: `.ad-header` itself plus WordPress's own auto-generated `header.wp-block-template-part` wrapper, which turned out to be independently sticky and kept .ad-header pinned even after .ad-header's own position was fixed. */ html.is-eoa-focused header.wp-block-template-part, html.is-eoa-focused .ad-header { position: static !important; } html.is-eoa-focused .ad-nav-desktop, html.is-eoa-focused .ad-nav-toggle, html.is-eoa-focused .ad-search-toggle, html.is-eoa-focused .ad-cta-desktop, html.is-eoa-focused .ad-cta-mobile { display: none !important; } html.is-eoa-focused .ad-brand__mark:not( .ad-brand__mark--focused ), html.is-eoa-focused .wp-block-site-title { display: none !important; } html.is-eoa-focused .ad-brand__focused-lockup { display: inline-flex !important; align-items: center; gap: 0.4rem; font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem; color: var( --wp--preset--color--ink, #11151b ); text-decoration: none; } .ad-brand__focused-text { display: inline-flex; align-items: center; gap: 0.4rem; } .ad-brand__focused-sep { color: var( --wp--preset--color--muted, #667080 ); font-weight: 400; } /* page-results.html's
is a plain WP `layout:flow` block group, which carries the theme's default 24px top block-gap — that showed as dead space between the header's bottom border and chapter 1's 4px blue accent border-top. Scoped to exactly this page's
via :has() so no other template's spacing is touched. */ main:has( > .eoa-results ) { margin-top: 0; } /* ROOT CAUSE (2026-07-14, revised 2026-07-12): the headline carries tabindex="-1" so eoa-results.js can move focus to it once the Map populates (screen-reader announcement of new content). In real-world testing, Chrome's :focus-visible heuristic still painted a ring for this script-triggered focus — the earlier :focus-visible-gated version did NOT fully suppress it. tabindex="-1" means this is never a real Tab stop, so there's no genuine keyboard case to protect. Suppress the ring unconditionally. */ [ tabindex="-1" ]:focus { outline: none !important; } .eoa-results__promo { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 3.5rem; } /* ---- five-chapter structure (populated state) — full-bleed bands, matching the frozen prototype's docs/design/eoa/"Experience Optimization Agent - Full Map.dc.html": chapters 1-2 carry the thick 4px blue accent border + alternate white/#F6F8FC backgrounds; chapters 3-5 step down to a thin 1px border and a smaller H2, exactly as the prototype does past the opportunity + action-plan chapters. ---- */ .eoa-chapter { width: 100%; } .eoa-chapter--accent { border-top: 4px solid #2353d4; } .eoa-chapter--thin { border-top: 1px solid #e7ecf4; } .eoa-chapter--white { background: #ffffff; } .eoa-chapter--tint { background: #f6f8fc; } .eoa-results__inner { box-sizing: border-box; width: 100%; margin: 0 auto; padding: 1.5rem 2rem; } .eoa-chapter-head { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 0.4rem; } .eoa-chapter-icon { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; } .eoa-chapter-icon--blue { background: #edf3fd; } .eoa-chapter-icon--teal { background: #e4f5ef; } .eoa-chapter-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #2353d4; margin: 0.3rem 0 0.2rem; } .eoa-chapter-kicker--teal { color: #0e9c84; } .eoa-chapter-title { font-size: clamp( 1.4rem, 2.6vw, 1.75rem ); line-height: 1.2; margin: 0; color: #0b1220; } .eoa-chapter-title--sm { font-size: clamp( 1.15rem, 2vw, 1.35rem ); } .eoa-chapter-subtitle { font-size: 0.95rem; color: #667080; margin: 0 0 0.85rem; } .eoa-results__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #2353d4; margin: 0 0 0.6rem; } .eoa-results__promo-h1, .eoa-results__headline { font-size: 1.9rem; line-height: 1.3; margin: 0 0 1rem; color: #0b1220; } .eoa-results__promo-lede { font-size: 1.05rem; line-height: 1.6; color: #404a56; margin: 0 0 1.1rem; max-width: 60ch; } .eoa-results__consequence { font-size: 1rem; color: #667080; margin: 0 0 0.85rem; } .eoa-results__cta { display: inline-flex; align-items: center; gap: 6px; background: #2353d4; color: #fff; font-weight: 600; font-size: 0.95rem; padding: 0.85rem 1.4rem; border-radius: 12px; text-decoration: none; border: none; cursor: pointer; min-height: 48px; } .eoa-results__cta:hover { background: #1b3ea8; } .eoa-results__standards { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; color: #0b1220; line-height: 1.5; } .eoa-results__standards li { display: flex; gap: 0.65rem; align-items: flex-start; } .eoa-results__standards li::before { content: ''; flex: 0 0 auto; width: 19px; height: 19px; margin-top: 0.15rem; border-radius: 50%; background: rgba( 14, 156, 132, 0.12 ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath d='M2.5,6.2 L5,8.6 L9.5,3.6' fill='none' stroke='%230E9C84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; } .eoa-results__cta-bar, .eoa-closing__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.25rem; } .eoa-results__textbtn { background: none; border: none; color: #2353d4; font-size: 0.9rem; font-weight: 500; cursor: pointer; padding: 0.7rem 0.3rem; min-height: 44px; } .eoa-results__textbtn:hover { color: #1b3ea8; } .eoa-results__textbtn--quiet { color: #667080; margin-left: auto; } .eoa-results__textbtn--quiet:hover { color: #404a56; } /* ---- header-injected "Start over" (results page only) — the jump nav that used to carry this was removed; eoa-results.js now injects this link into the shared header's brand row at runtime (never edits parts/header.html itself, which stays untouched everywhere else). ---- */ body.eoa-results-page .ad-eoa-header-start-over { font-family: 'Schibsted Grotesk', sans-serif; font-size: 0.85rem; font-weight: 600; color: #667080; text-decoration: none; background: none; border: none; cursor: pointer; white-space: nowrap; } body.eoa-results-page .ad-eoa-header-start-over:hover { color: #2353d4; } /* Below ~480px the shared header's own mobile controls (Contact CTA + menu toggle) already have very little room; hiding the injected header link here avoids adding to that squeeze. "Start over" is still always reachable via the closing CTA further down the page. */ @media ( max-width: 480px ) { body.eoa-results-page .ad-eoa-header-start-over { display: none; } } /* ---- Section 4: At a Glance dark card ---- */ .eoa-band { width: 100%; } .eoa-band--white { background: #ffffff; } .eoa-band--tint { background: #f6f8fc; } .eoa-band--thin-top { border-top: 1px solid #dfe5eb; } .eoa-glance__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #667080; margin: 0 0 0.75rem; } .eoa-glance__grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ); gap: 0.75rem; } .eoa-glance-tile { padding: 1rem 1.05rem; border: 1px solid rgba( 255, 255, 255, 0.1 ); background: #0f2350; border-radius: 14px; box-shadow: 0 6px 18px -10px rgba( 15, 35, 80, 0.55 ); } .eoa-glance-tile__label { display: flex; align-items: center; gap: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; } .eoa-glance-tile__value { font-size: 0.94rem; line-height: 1.4; color: #ffffff; margin-top: 0.4rem; font-weight: 500; } .eoa-glance__note { font-size: 0.82rem; color: #667080; margin: 0.9rem 0 0; } .eoa-glance__actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 1.1rem; } .eoa-glance__link { font-size: 0.88rem; font-weight: 600; color: #2353d4; } /* ---- Section 5: journey two-column + Section 6: framework row ---- */ .eoa-journey__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #0e9c84; } .eoa-journey__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: clamp( 1.4rem, 3.2vw, 1.9rem ); letter-spacing: -0.01em; color: #0b1220; margin: 0.5rem 0 0; } .eoa-journey__lede { font-size: 1.02rem; line-height: 1.55; color: #404a56; margin: 0.6rem 0 0; } .eoa-journey__lede strong { color: #c0453d; } .eoa-journey__cols { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-top: 1rem; } .eoa-journey__flow { flex: 1 1 230px; min-width: 210px; } .eoa-journey__flow-label, .eoa-framework__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #667080; margin: 0 0 0.75rem; } .eoa-framework__eyebrow { margin-top: 1.1rem; } .eoa-journey__list { display: flex; flex-direction: column; gap: 0.5rem; } .eoa-journey__stage { display: inline-flex; align-items: center; gap: 8px; padding: 0.6rem 0.9rem; min-height: 44px; border-radius: 999px; border: 1.5px solid #dce3ef; background: #ffffff; color: #404a56; font-size: 0.92rem; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 6px rgba( 16, 24, 40, 0.08 ); } .eoa-journey__stage:hover { transform: translateY( -1px ); } .eoa-journey__stage--friction { background: linear-gradient( 160deg, #ee6a62, #e5534b ); color: #ffffff; border-color: #e5534b; } .eoa-journey__stage--down { background: #eaf6f2; color: #0b3b32; border-color: #bfe6da; } .eoa-journey__stage[ aria-pressed="true" ] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2353d4; } .eoa-journey__stage--friction[ aria-pressed="true" ] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e5534b; } .eoa-journey__stage-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: #9fb0ce; } .eoa-journey__stage--friction .eoa-journey__stage-dot { background: #ffffff; } .eoa-journey__stage--down .eoa-journey__stage-dot { background: #0e9c84; } .eoa-journey__caption { font-size: 0.9rem; line-height: 1.5; color: #0b7a66; margin: 1rem 0 0; } .eoa-journey__detail { flex: 2 1 360px; min-width: 280px; display: flex; flex-direction: column; gap: 0.75rem; background: #0e1f42; border-radius: 22px; padding: 0.75rem; box-shadow: 0 24px 48px -28px rgba( 11, 20, 45, 0.6 ); } .eoa-journey__check, .eoa-journey__tips { padding: 1.15rem 1.25rem; border: 1px solid rgba( 255, 255, 255, 0.1 ); background: rgba( 255, 255, 255, 0.05 ); border-radius: 16px; } .eoa-journey__check-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #34d6b4; margin: 0; } .eoa-journey__check-q { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; color: #ffffff; margin: 0.55rem 0 0; letter-spacing: -0.01em; } .eoa-journey__check-list { margin: 0.8rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .eoa-journey__check-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 1rem; line-height: 1.5; color: #eaf0fb; } .eoa-journey__check-list li::before { content: ''; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 0.25rem; border-radius: 50%; border: 1.5px solid #34d6b4; } .eoa-journey__tips-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #b7a6ff; margin: 0; } .eoa-journey__tips-list { margin: 0.8rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.8rem; } .eoa-journey__tips-list li { display: flex; gap: 0.7rem; align-items: flex-start; } .eoa-journey__tip-chip { flex: 0 0 auto; display: inline-flex; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; border-radius: 6px; padding: 0.25rem 0.5rem; } .eoa-journey__tip-text { font-size: 0.92rem; line-height: 1.5; color: #c7d0e4; } .eoa-framework__grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ); gap: 0.75rem; margin-top: 0.8rem; } .eoa-framework-card { padding: 1rem 1.05rem; border: 1px solid rgba( 255, 255, 255, 0.1 ); background: #0e1f42; border-radius: 14px; } .eoa-framework-card__head { display: flex; align-items: flex-start; gap: 0.75rem; } .eoa-framework-card__icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: #edf3fd; display: inline-flex; align-items: center; justify-content: center; } .eoa-framework-card__tag { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8fb4ff; } .eoa-framework-card__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; color: #ffffff; margin-top: 0.2rem; letter-spacing: -0.01em; } .eoa-framework-card__desc { font-size: 0.92rem; line-height: 1.45; color: #c7d0e4; margin-top: 0.65rem; } /* ---- Sections 7-9: perspective / quality-pattern / opportunity-why ---- */ .eoa-sections { display: flex; flex-direction: column; gap: 1.25rem; } .eoa-section__num { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #0e9c84; margin: 0 0 0.7rem; } .eoa-section__num--teal { margin-top: 0.9rem; } .eoa-section__num-icon { display: inline-flex; align-items: center; gap: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: #2353d4; margin: 0 0 0.75rem; } .eoa-section__num-icon--muted { color: #667080; } .eoa-section__num-icon--red { color: #c0453d; } .eoa-section__num-plain { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #667080; margin: 0 0 0.5rem; } .eoa-section__muted { font-size: 0.9rem; color: #667080; margin: 0 0 0.75rem; } .eoa-section__h3 { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 1.25rem; color: #0b1220; margin: 0 0 0.5rem; letter-spacing: -0.01em; } .eoa-section__lede { font-size: 1rem; line-height: 1.55; color: #404a56; margin: 0; } .eoa-perspective { display: flex; gap: 0.9rem; align-items: center; } .eoa-perspective__icon { flex: 0 0 auto; display: flex; } .eoa-perspective__text { font-size: 1rem; line-height: 1.55; color: #2a3652; } .eoa-quality-pattern { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.4rem; } .eoa-qp-box { display: flex; flex-direction: column; justify-content: center; padding: 0.65rem 0.9rem; min-height: 50px; border-radius: 12px; box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.25 ) inset; } .eoa-qp-box--stage { background: linear-gradient( 160deg, #2e63e8, #2353d4 ); box-shadow: 0 7px 16px -7px rgba( 35, 83, 212, 0.55 ), 0 1px 0 rgba( 255, 255, 255, 0.25 ) inset; max-width: 200px; } .eoa-qp-box--problem { background: linear-gradient( 160deg, #ee6a62, #e5534b ); box-shadow: 0 7px 16px -7px rgba( 229, 83, 75, 0.55 ), 0 1px 0 rgba( 255, 255, 255, 0.25 ) inset; max-width: 210px; } .eoa-qp-box--opportunity { background: linear-gradient( 160deg, #12ae94, #0e9c84 ); box-shadow: 0 9px 22px -7px rgba( 14, 156, 132, 0.6 ), 0 1px 0 rgba( 255, 255, 255, 0.28 ) inset; padding: 0.7rem 1.05rem; } .eoa-qp-box__kicker { font-family: 'IBM Plex Mono', monospace; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba( 255, 255, 255, 0.75 ); } .eoa-qp-box__value { font-size: 0.82rem; font-weight: 600; color: #ffffff; margin-top: 0.15rem; } .eoa-qp-box--opportunity .eoa-qp-box__value { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 1rem; } .eoa-qp-arrow { display: flex; align-items: center; margin: 0 0.4rem; flex: 0 0 auto; } .eoa-qp-arrow--dashed { width: 26px; border-top: 3px dashed #0e9c84; } .eoa-qp-arrow-head { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #0e9c84; } .eoa-qp-solid-bar { width: 14px; height: 3px; border-radius: 2px; background: #e5534b; } .eoa-qp-diamond { width: 9px; height: 9px; background: #e5534b; transform: rotate( 45deg ); margin: 0 5px; box-shadow: 0 0 9px rgba( 229, 83, 75, 0.55 ); } /* ---- Section 11: 30/60/90 roadmap ---- */ .eoa-roadmap__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #0e9c84; margin: 0 0 0.9rem; } .eoa-roadmap__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ); gap: 0.9rem; } .eoa-roadmap-card { padding: 1.1rem 1.2rem; border-radius: 16px; display: flex; flex-direction: column; border: 1px solid rgba( 255, 255, 255, 0.1 ); background: #0e1f42; box-shadow: 0 16px 34px -22px rgba( 11, 20, 45, 0.55 ); } .eoa-roadmap-card__day { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8fb4ff; } .eoa-roadmap-card--self .eoa-roadmap-card__day, .eoa-roadmap-card--self .eoa-roadmap-card__note { color: #34d6b4; } .eoa-roadmap-card__verb { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; color: #ffffff; margin-top: 0.25rem; letter-spacing: -0.01em; } .eoa-roadmap-card__line { font-size: 0.92rem; line-height: 1.5; color: #c7d0e4; margin-top: 0.55rem; } .eoa-roadmap-card__note { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8fb4ff; margin-top: 0.8rem; } .eoa-roadmap__note { font-size: 0.85rem; line-height: 1.55; color: #667080; margin: 1rem 0 0; } /* ---- Sections 12-15: likely-20 / quick-wins / investigate / dont-change ---- */ .eoa-callout--20 { border: 1.5px solid #0e9c84; border-radius: 18px; background: linear-gradient( 180deg, #f0fbf7, #e7f7f1 ); padding: 1.35rem 1.5rem; box-shadow: 0 10px 26px -14px rgba( 14, 156, 132, 0.45 ); } .eoa-callout__pill { display: inline-flex; align-items: center; gap: 8px; background: #0e9c84; color: #ffffff; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.75rem; border-radius: 999px; } .eoa-callout__body { font-size: 1rem; line-height: 1.55; color: #0b2a24; margin: 0.55rem 0 0; font-weight: 500; } .eoa-quickwins { margin: 0.75rem 0 0; padding: 1.1rem 1.25rem; list-style: none; border: 1px solid #c9d8f7; background: linear-gradient( 180deg, #f5f8fe, #ffffff ); border-radius: 16px; box-shadow: 0 6px 18px -10px rgba( 35, 83, 212, 0.28 ); display: flex; flex-direction: column; gap: 0.85rem; } .eoa-quickwins li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 1rem; line-height: 1.45; color: #0b1220; font-weight: 500; } .eoa-quickwins li::before { content: ''; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 0.05rem; border-radius: 6px; border: 2px solid #2353d4; background: #fff; } .eoa-investigate { margin: 0.75rem 0 0; padding: 1rem 1.2rem; list-style: none; border: 1px dashed #c7d0e0; background: #fbfcfe; border-radius: 14px; display: flex; flex-direction: column; gap: 0.7rem; } .eoa-investigate li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 1rem; line-height: 1.5; color: #404a56; } .eoa-investigate li::before { content: ''; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 0.2rem; border-radius: 50%; border: 1.5px solid #aab6ce; } .eoa-dontchange { margin-top: 0.75rem; padding: 0.95rem 1.1rem; border: 1px solid rgba( 229, 83, 75, 0.35 ); background: rgba( 229, 83, 75, 0.05 ); border-radius: 14px; display: flex; gap: 0.7rem; align-items: flex-start; font-size: 1rem; line-height: 1.45; color: #0b1220; } .eoa-dontchange__dot { flex: 0 0 auto; width: 8px; height: 8px; background: #e5534b; transform: rotate( 45deg ); margin-top: 0.35rem; } /* ---- Section 19: evidence cards ---- */ .eoa-evidence-cards { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; } .eoa-evidence-card { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid #dce7e2; background: #ffffff; border-radius: 14px; } .eoa-evidence-card__icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: #e4f5ef; display: inline-flex; align-items: center; justify-content: center; } .eoa-evidence-card__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; color: #0b1220; letter-spacing: -0.01em; } .eoa-evidence-card__line { font-size: 0.92rem; line-height: 1.5; color: #3b4657; margin-top: 0.3rem; } .eoa-evidence-card__line strong { color: #0e7c68; font-weight: 600; } .eoa-evidence-card__line--look strong { color: #667080; } /* ---- Section 21: DIY cards ---- */ .eoa-diy__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #0e9c84; } .eoa-diy__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: clamp( 1.4rem, 3.2vw, 1.9rem ); letter-spacing: -0.01em; color: #0b1220; margin: 0.5rem 0 0; } .eoa-diy__lede { font-size: 1.02rem; line-height: 1.55; color: #404a56; margin: 0.6rem 0 0; } .eoa-diy__grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) ); gap: 0.85rem; margin-top: 0.9rem; } .eoa-diy-card { padding: 1.05rem 1.15rem; border: 1px solid rgba( 255, 255, 255, 0.1 ); background: #0e1f42; border-radius: 16px; box-shadow: 0 16px 34px -22px rgba( 11, 20, 45, 0.55 ); } .eoa-diy-card__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; color: #ffffff; letter-spacing: -0.01em; } .eoa-diy-card__desc { font-size: 0.92rem; line-height: 1.5; color: #c7d0e4; margin-top: 0.5rem; } .eoa-diy__footnote { font-size: 0.8rem; line-height: 1.5; color: #667080; margin: 1.1rem 0 0; } /* ---- Section 22: three paths forward ---- */ .eoa-paths { display: grid; grid-template-columns: repeat( auto-fit, minmax( 230px, 1fr ) ); gap: 0.75rem; margin-top: 0.75rem; } .eoa-path-card { padding: 1rem 1.05rem; border: 1px solid #e2e7f0; background: #ffffff; border-radius: 14px; display: flex; flex-direction: column; box-shadow: 0 4px 14px -8px rgba( 16, 24, 40, 0.16 ); } .eoa-path-card__n { font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 600; color: #2353d4; } .eoa-path-card__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: #0b1220; margin-top: 0.45rem; letter-spacing: -0.01em; } .eoa-path-card__desc { font-size: 0.92rem; line-height: 1.45; color: #404a56; margin-top: 0.45rem; } /* ---- Section 23: capability tag cards ---- */ .eoa-capability-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); gap: 0.75rem; margin-top: 0.75rem; } .eoa-capability-card { padding: 1rem 1.1rem; border: 1px solid #dce3ef; background: #ffffff; border-radius: 14px; display: flex; flex-direction: column; gap: 0.55rem; } .eoa-capability-card__chip { align-self: flex-start; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: #2353d4; background: #edf3fd; border-radius: 7px; padding: 0.3rem 0.6rem; } .eoa-capability-card__line { font-size: 0.86rem; line-height: 1.5; color: #404a56; } .eoa-capability-card__line strong { color: #0b1220; font-weight: 600; } /* ---- Section 24: closing CTA ---- */ .eoa-closing { max-width: 720px; padding: 1.4rem 1.6rem 1.5rem; border: 1px solid #dce6fa; background: linear-gradient( 180deg, #f5f8fe, #edf3fd ); border-radius: 20px; } .eoa-closing__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #0e9c84; margin: 0; } .eoa-closing__heading { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: clamp( 1.2rem, 2.3vw, 1.5rem ); line-height: 1.32; letter-spacing: -0.01em; color: #0b1220; margin: 0.75rem 0 0; } .eoa-closing__body { font-size: 1rem; line-height: 1.6; color: #404a56; margin: 0.85rem 0 0; } .eoa-closing__support { font-size: 0.85rem; line-height: 1.55; color: #667080; /* 2026-07-13 (Alex): 2-3x more breathing room below this last line of the closing section before whatever comes next (credibility band / sticky CTA) — was relying on .eoa-results__inner's 1.5rem section padding alone. */ margin: 0.8rem 0 3rem; max-width: 640px; } /* ---- Section 25: footer credibility strip ---- */ .eoa-footer-cred { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e4e8f1; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; } .eoa-footer-cred__item { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: #404a56; } .eoa-footer-cred__dot { width: 6px; height: 6px; background: #2353d4; transform: rotate( 45deg ); flex: 0 0 auto; } .eoa-results__noscript { font-size: 0.9rem; color: #667080; } /* Email-gate modal — same mechanism/behavior as the prototype's own resultFor() modal. */ .eoa-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .eoa-modal[ hidden ] { display: none; } .eoa-modal__backdrop { position: absolute; inset: 0; background: rgba( 11, 18, 32, 0.55 ); } .eoa-modal__panel { box-sizing: border-box; position: relative; background: #fff; border-radius: 16px; padding: 2rem; max-width: 420px; width: 100%; box-shadow: 0 20px 50px rgba( 16, 24, 40, 0.3 ); } .eoa-modal__title { font-size: 1.15rem; margin: 0 0 0.5rem; } .eoa-modal__lede { font-size: 0.9rem; color: #667080; margin: 0 0 1.25rem; } /* Honeypot — visually hidden (off-screen), never `display:none`/`visibility:hidden` (some bots skip those), matches patterns/home-quiz.php's .hq-hp exactly. */ .eoa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .eoa-modal__field { margin-bottom: 0.4rem; } .eoa-modal__input { box-sizing: border-box; width: 100%; padding: 0.8rem 0.9rem; font-size: 1rem; border: 1.5px solid #d9dee9; border-radius: 10px; color: #0b1220; } .eoa-modal__input:focus-visible { outline: none; border-color: #2353d4; } .eoa-modal__err { color: #c0453d; font-size: 0.85rem; margin: 0.5rem 0 0; } .eoa-modal__consent-row { margin-top: 0.75rem; font-size: 0.85rem; color: #404a56; } .eoa-modal__submit { width: 100%; margin-top: 1rem; } /* 2026-07-13 (Alex): "leave" mode's secondary way out — quiet text-button under the primary (filled) email-capture submit, same visual weight as .eoa-results__textbtn elsewhere on this page, so it reads as the lesser of two choices without competing with the real CTA. */ .eoa-modal__leave-anyway { display: block; width: 100%; margin-top: 0.6rem; padding: 0.5rem; background: none; border: none; font-size: 0.85rem; color: #667080; text-decoration: underline; cursor: pointer; min-height: 40px; } .eoa-modal__leave-anyway:hover { color: #404a56; } .eoa-modal__leave-anyway[ hidden ] { display: none; } .eoa-modal__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #667080; min-width: 44px; min-height: 44px; } .eoa-modal__sent { font-size: 0.95rem; color: #0e9c84; text-align: center; padding: 1rem 0; } .eoa-modal__sent:focus-visible { outline: none; } .eoa-modal__body[ hidden ], .eoa-modal__sent[ hidden ] { display: none; } /* Item 2 — /results/-scoped header un-stick (2026-07-12 UI polish). Overrides theme.css's `.wp-site-blocks > header.wp-block-template-part { position: sticky; }` on THIS page only, via a MORE SPECIFIC selector in this page-scoped stylesheet — parts/header.html and theme.css are never touched (check_protected_shell.py stays green). The body class comes from functions.php's alexdesigns_eoa_results_body_class(). Every other page keeps the normal sticky header. */ body.eoa-results-page .wp-site-blocks > header.wp-block-template-part { position: static; } /* Sticky "Build this plan" CTA, wired to the composed result's `outcome` string — shown on BOTH desktop and mobile (2026-07-13 Pass 3). eoa-results.js toggles [hidden] based on scroll position (shown once the main CTA bar scrolls out of view, hidden again near the page footer so it never overlaps the footer's own CTA, and hidden while the modal is open so it never overlaps the modal). */ .eoa-results__sticky-cta { display: none; } .eoa-results__sticky-cta[ hidden ] { display: none; } .eoa-results__sticky-cta:not( [ hidden ] ) { display: flex; align-items: center; gap: 1rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; /* above page content, below the modal (z-index 100) */ padding: 0.75rem 1.25rem calc( 0.75rem + env( safe-area-inset-bottom, 0px ) ); background: rgba( 255, 255, 255, 0.96 ); border-top: 1px solid #dfe5eb; box-shadow: 0 -4px 14px rgba( 16, 24, 40, 0.1 ); opacity: 1; transform: translateY( 0 ); transition: opacity 0.2s ease, transform 0.2s ease; } .eoa-results__sticky-cta-outcome { margin: 0; font-size: 0.95rem; font-weight: 600; color: #1a2233; flex: 1 1 auto; min-width: 0; } @media ( prefers-reduced-motion: reduce ) { .eoa-results__sticky-cta:not( [ hidden ] ) { transition: none; } } @media ( max-width: 781px ) { .eoa-results__sticky-cta:not( [ hidden ] ) { flex-wrap: wrap; } .eoa-results__sticky-cta-outcome { flex-basis: 100%; font-size: 0.85rem; } .eoa-results__sticky-cta .eoa-results__cta { width: 100%; justify-content: center; } /* Tablet whitespace pass (2026-07-14): every chapter/band shares .eoa-results__inner's padding, so tightening it here cuts the same compounding gap the desktop pass fixed, scaled down further for the shorter viewport. */ .eoa-results__inner { padding: 1.1rem 1.25rem; } .eoa-chapter-head { margin-bottom: 0.3rem; } .eoa-chapter-subtitle { margin-bottom: 0.6rem; } .eoa-results__consequence { margin-bottom: 0.6rem; } .eoa-sections { gap: 1rem; } .eoa-closing { padding: 1.1rem 1.25rem 1.25rem; } .eoa-footer-cred { margin-top: 0.75rem; padding-top: 0.75rem; } } @media ( max-width: 480px ) { .eoa-results__inner { padding: 0.85rem 1rem; } .eoa-chapter-subtitle { margin-bottom: 0.5rem; } .eoa-sections { gap: 0.85rem; } } /* Room at the bottom of the scrollable content so the sticky bar never covers the last line of real content or the main CTA bar while it's still in view — needed at all widths now that the sticky CTA shows on desktop too. */ .eoa-results { padding-bottom: calc( 5rem + 64px ); } /* 2026-07-13: the credibility band now renders directly after .eoa-results (page-results.html), so .eoa-results's own sticky-CTA clearance padding above shows up as dead gray space before the band's heading. Pull the band up by that exact amount to close it — the sticky bar is position:fixed so it never occupies real document flow, this reserved space was only ever a buffer against overlap, which the band itself now provides. */ .eoa-results + .eoa-cred-band { margin-top: calc( -5rem - 64px ); } /* Print/PDF — hide chrome, keep the actual content (client-side print-to-PDF only). */ @media print { .eoa-results__cta-bar, .eoa-results__sticky-cta, .eoa-modal, .eoa-results__promo { display: none !important; } }