/* ========================================================================= 86'd Me mobile homepage (Phase 2) Source of truth for the look: 86dme-homepage-combined.zip (approved): tokens.css, base.css, mission.css, section-tiles.css, featured-article.css, story-row.css and the homepage parts of integration.css. WordPress-specific additions are marked "WP". Every selector is scoped to .hp86-home, so nothing here changes the desktop homepage, article pages, ads or the Phase 1 header and menu. Loaded on page-home.php only. Sections: 1 tokens 2 show/hide 3 guards 4 page 5 intro 6 tiles 7 featured article 8 story rows 9 small phones 10 motion ========================================================================= */ /* ---------- 1. Design tokens (approved tokens.css) ---------- */ .hp86-home { --hp86-paper: #ffffff; --hp86-ink: #141414; --hp86-muted: #4a4a4a; --hp86-rule: #e4e1dc; --hp86-navy: #0b1f5c; --hp86-red: #b0151c; --hp86-orange: #ff6319; --hp86-purple: #7a2bb8; --hp86-display: 'Roboto Serif', Georgia, serif; --hp86-deck: 'Roboto Serif', Georgia, serif; --hp86-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --hp86-gutter: max(16px, env(safe-area-inset-left, 0px)); --hp86-gutter-right: max(16px, env(safe-area-inset-right, 0px)); --hp86-stack-gap: 10px; --hp86-rule-heavy: 3px solid var(--hp86-ink); } /* ---------- 2. Show at 1023px and below; desktop keeps the three column top section ---------- WP: the mobile block is printed directly before the desktop top section in page-home.php, so "the next section" is exactly that one. Nothing else on the page is hidden. */ @media (min-width: 1024px) { .hp86-home { display: none !important; } } @media (max-width: 1023px) { .hp86-home + section { display: none !important; } } /* ---------- 3. Guards (WP): the theme styles plain elements site wide (body font-weight 200 !important, line-height 2, letter-spacing .5px; uppercase and colored links; p, h2, hr sizes and margins; img borders). Reset inside the component. */ .hp86-home { display: block; background: var(--hp86-paper); color: var(--hp86-ink); font-family: var(--hp86-body); font-weight: 400; font-style: normal; font-size: 16px; line-height: normal; letter-spacing: normal; text-transform: none; text-align: left; -webkit-text-size-adjust: 100%; } .hp86-home *, .hp86-home *::before, .hp86-home *::after { box-sizing: border-box; } .hp86-home a, .hp86-home a:visited, .hp86-home a:hover, .hp86-home a:focus, .hp86-home a:active { color: inherit; text-decoration: none; text-transform: inherit; transition: none; background: none; font: inherit; letter-spacing: inherit; font-stretch: inherit; } .hp86-home p, .hp86-home h2, .hp86-home hr, .hp86-home nav, .hp86-home article, .hp86-home section { margin: 0; padding: 0; } .hp86-home h2 { clear: none; font-style: normal; color: inherit; } .hp86-home img { max-width: 100%; border: 0; box-shadow: none; vertical-align: middle; } .hp86-home picture { display: contents; } .hp86-home picture source { display: none; } .hp86-home svg { display: block; overflow: visible; } /* ---------- 4. Page column (approved base.css) ---------- */ .hp86-home .hp86-page { max-width: 520px; margin: 0 auto; padding-left: var(--hp86-gutter); padding-right: var(--hp86-gutter-right); /* WP: approved spacing under the header (header margin-bottom 2px + section gap 10px). The header itself comes from Phase 1 and sits outside this column. */ padding-top: 12px; padding-bottom: 28px; display: flex; flex-direction: column; gap: var(--hp86-stack-gap); background: var(--hp86-paper); color: var(--hp86-ink); font-family: var(--hp86-body); } .hp86-home .hp86-page > * { flex-shrink: 0; } .hp86-home a:focus-visible { outline: 3px solid var(--hp86-orange); outline-offset: 3px; border-radius: 6px; } .hp86-home .hp86-bleed { margin-left: calc(-1 * var(--hp86-gutter)); margin-right: calc(-1 * var(--hp86-gutter-right)); } /* ---------- 5. Intro line (approved mission.css) ---------- */ .hp86-home .hp86-mission { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .hp86-home .hp86-mission p { margin: 0; font-family: var(--hp86-deck); font-weight: 400; font-stretch: 78%; font-size: 15px; line-height: 1.24; letter-spacing: normal; color: #000000; text-wrap: balance; } .hp86-home .hp86-mission hr { display: block; width: 32px; height: 2px; border: 0; background: var(--hp86-red); border-radius: 2px; margin: 0; padding: 0; } /* ---------- 6. Section tiles (approved section-tiles.css) ---------- */ .hp86-home .hp86-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .hp86-home .hp86-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; } .hp86-home .hp86-tile img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; display: block; transition: transform .15s ease; } .hp86-home a.hp86-tile:hover img { transform: translateY(-2px); } .hp86-home .hp86-tile span { font-family: var(--hp86-display); font-weight: 700; font-stretch: 70%; font-size: 11px; line-height: 1.1; letter-spacing: -0.01em; text-transform: none; text-wrap: balance; color: var(--hp86-ink); } /* WP: a tile without a destination yet looks the same but is not a link. */ .hp86-home .hp86-tile--nolink { cursor: default; } /* ---------- 7. Featured article (approved featured-article.css) ---------- */ .hp86-home .hp86-feature { display: flex; flex-direction: column; gap: 10px; } .hp86-home .hp86-feature__media { position: relative; display: block; } /* WP: real photos have any shape; crop to the approved 714 x 348 frame using the focal point set for the desktop (object-position comes from the template). */ .hp86-home .hp86-feature__media img { display: block; width: 100%; height: auto; aspect-ratio: 714 / 348; object-fit: cover; } .hp86-home .hp86-feature__badges { position: absolute; left: 14px; bottom: -14px; display: flex; gap: 8px; flex-wrap: wrap; } .hp86-home .hp86-badge { font-family: var(--hp86-body); font-weight: 600; font-size: 12px; line-height: normal; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; } .hp86-home .hp86-badge--category { background: var(--hp86-orange); color: #fff; } .hp86-home .hp86-badge--type { background: var(--hp86-ink); color: #fff; } .hp86-home .hp86-feature__text { padding: 18px 0 0; display: flex; flex-direction: column; gap: 6px; } .hp86-home .hp86-feature__headline { margin: 0; font-family: var(--hp86-display); font-weight: 800; font-stretch: 52%; font-size: 34.56px; line-height: .92; letter-spacing: -0.015em; text-transform: uppercase; text-align: center; text-wrap: balance; } .hp86-home .hp86-feature__summary { margin: 0; text-align: center; font-family: var(--hp86-deck); font-weight: 400; font-stretch: 80%; font-size: 17.25px; letter-spacing: -0.01em; line-height: 1.45; color: var(--hp86-muted); } .hp86-home .hp86-feature__byline { font-family: var(--hp86-display); font-weight: 800; font-stretch: 65%; font-size: 15px; line-height: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--hp86-purple); text-align: center; padding-top: 2px; } /* WP: no featured image. Badges sit above the headline instead of on the photo. */ .hp86-home .hp86-feature--no-media .hp86-feature__badges { position: static; justify-content: center; padding-top: 4px; } .hp86-home .hp86-feature--no-media .hp86-feature__text { padding-top: 4px; } /* ---------- 8. Story rows (approved story-row.css) ---------- */ .hp86-home .hp86-stories { border-top: var(--hp86-rule-heavy); display: flex; flex-direction: column; } .hp86-home .hp86-story { display: grid; grid-template-columns: 38% minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding-block: 12px; border-bottom: var(--hp86-rule-heavy); } .hp86-home .hp86-story__image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; } .hp86-home .hp86-story__kicker { font-family: var(--hp86-display); font-weight: 700; font-stretch: 70%; font-size: 12px; line-height: normal; letter-spacing: .05em; text-transform: uppercase; color: var(--hp86-red); } .hp86-home .hp86-story__title { margin: 2px 0 4px; font-family: var(--hp86-display); font-weight: 800; font-stretch: 60%; font-size: 21px; line-height: 1.1; letter-spacing: normal; text-transform: none; text-wrap: balance; } .hp86-home .hp86-story__summary { margin: 0; font-family: var(--hp86-deck); font-weight: 400; font-stretch: 85%; font-size: 14.5px; line-height: 1.4; letter-spacing: normal; color: var(--hp86-muted); } .hp86-home .hp86-story__arrow { color: var(--hp86-red); } /* WP: no photo. Text takes the photo's column instead of showing an empty grey box. */ .hp86-home .hp86-story--no-image { grid-template-columns: minmax(0, 1fr) 20px; } /* ---------- 9. Small phones (approved integration.css section 2) ---------- */ @media (max-width: 400px) { .hp86-home .hp86-tile span { font-size: 11px; font-stretch: 54%; font-variation-settings: 'opsz' 36; letter-spacing: 0; } .hp86-home .hp86-story__kicker { font-stretch: 62%; letter-spacing: .04em; } } @media (max-width: 380px) { .hp86-home .hp86-feature__headline { font-size: 25.92px; } } @media (max-width: 389.98px) { .hp86-home .hp86-feature__headline { font-size: clamp(25.92px, calc((12.857vw - 14.14px) * .96), 34.56px); } } @media (max-width: 340px) { .hp86-home .hp86-tiles { column-gap: 4px; } .hp86-home .hp86-tile span { font-size: 10.5px; font-stretch: 50%; font-variation-settings: 'opsz' 72; } } /* ---------- 10. Motion ---------- */ @media (prefers-reduced-motion: reduce) { .hp86-home .hp86-tile img { transition: none; } } /* Fresh Content overlays stay inside the existing mobile image boxes. */ .hp86-home .hp86-story__media { position: relative; min-width: 0; } .hp86-home .hp86-fresh-image { position: absolute; inset: 6px 6px auto auto; z-index: 1; width: min(44px, 38.5%); height: auto; aspect-ratio: 1; pointer-events: none; } .hp86-home .hp86-feature__media .hp86-fresh-image { inset: 8px 8px auto auto; width: 56px; aspect-ratio: 1; object-fit: contain; } .hp86-home .hp86-fresh-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }