/** * TTI Articles Page — Hero + Article-Detail Styling * Loaded on the /articles/ archive (page ID 1997) AND on every individual * blog post (post_type=post, e.g. /welcome-to-tti/) so single posts inherit * the same article-card styling. Both surfaces render the same Droip * post-single template (post 2010 "Article Details"). * * Body-scope conventions: * body.tti-articles-page — shared scope, fires on /articles/ AND on * single posts. Stamped via ob_start in * functions.php (Droip strips body_class()). * body.page-id-1997 — archive-only scope, fires ONLY on /articles/. * Reserved for rules that depend on page-1997 * section ordering (e.g. .droip-page > section * :first-of-type / :nth-of-type(2)). * * Mirrors the brand language established by tti-course-* and tti-home.css: * maroon gradient (#500000 → #4c0404), cream accent (#f0e2c3), * Epilogue typography, eyebrow + bold title + lede + dual CTA pattern. * * The /articles/ page ships an empty Droip "Hero Section" block (dppxfm0t) * that we hide; a server-injected
from * functions.php takes its place. Single posts do NOT receive the marketing * hero — the Droip Article Details template already renders post title / * excerpt as its visual top section. */ /* --------------------------------------------------------------------- 1. Hide the empty Droip hero section so our injected hero is the only one. Selector by Droip block id (data attribute) survives className regen. --------------------------------------------------------------------- */ body.tti-articles-page [data-droip="dppxfm0t"], body.tti-articles-page section[id*="dppxfm0t"], body.tti-articles-page section[class*="dppxfm0t"] { display: none !important; } /* --------------------------------------------------------------------- 2. Page wallpaper — medium-darkish grey behind the whole page so the hero (maroon band) visually anchors the rest of the content. --------------------------------------------------------------------- */ body.tti-articles-page { background: linear-gradient(180deg, #3d3d3d 0%, #2c2c2c 100%) !important; /* `background-attachment: fixed` was removed 2026-05-05 — combined with `backdrop-filter: blur` on the hero eyebrow it forced the browser to recompute the blur every scroll frame, causing visible scroll jank on /articles/ (the body bg stayed pinned in viewport while content under the blurred eyebrow shifted). The gradient now scrolls with content, which is fine — the gradient is so subtle that visible motion is imperceptible on long pages. */ font-family: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* The Droip page wrapper inherits a white surface by default; force it transparent so the wallpaper shows through the hero band. The card sections below the hero keep their own surfaces. */ body.page-id-1997 .droip-page > section:first-of-type { background: transparent !important; } /* --------------------------------------------------------------------- 3. Hero shell — full-bleed band with theme gradient + soft radial accent. --------------------------------------------------------------------- */ .tti-articles-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(72px, 9vw, 144px) clamp(20px, 5vw, 64px) clamp(64px, 8vw, 120px); color: #fff; background: radial-gradient(at 92% 8%, rgba(240, 226, 195, 0.10) 0%, transparent 55%), radial-gradient(at 8% 92%, rgba(122, 0, 18, 0.45) 0%, transparent 60%), linear-gradient(135deg, #7a0012 0%, #4c0404 55%, #380000 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18); } /* Decorative grid lattice — subtle, low-opacity, behind everything */ .tti-articles-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%); pointer-events: none; } /* Cream accent lozenge — top right anchor */ .tti-articles-hero::after { content: ""; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient( circle at 30% 30%, rgba(240, 226, 195, 0.18) 0%, rgba(240, 226, 195, 0.04) 45%, transparent 70% ); z-index: -1; pointer-events: none; } /* --------------------------------------------------------------------- 4. Inner column — capped width, centered, vertical rhythm. --------------------------------------------------------------------- */ .tti-articles-hero__inner { position: relative; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); text-align: center; } /* Eyebrow — uppercase, letterspaced, cream accent */ .tti-articles-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; align-self: center; margin: 0; padding: 8px 16px; font-size: clamp(11px, 0.9vw, 13px); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #f0e2c3; background: rgba(240, 226, 195, 0.08); border: 1px solid rgba(240, 226, 195, 0.32); border-radius: 999px; /* `backdrop-filter: blur(4px)` was removed 2026-05-05 — backdrop blur recomputes against the content behind the element on every paint. Combined with the body's previous `background-attachment: fixed`, this caused per-frame GPU work that produced visible scroll jank on /articles/. The 8% cream tint + 32% cream border already give the eyebrow a clear surface against the maroon hero — the blur was decorative and not load-bearing for legibility. */ } .tti-articles-hero__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #f0e2c3; box-shadow: 0 0 12px rgba(240, 226, 195, 0.6); animation: tti-articles-pulse 2.4s ease-in-out infinite; } @keyframes tti-articles-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } @media (prefers-reduced-motion: reduce) { .tti-articles-hero__eyebrow-dot { animation: none; } } /* H1 — bold, fluid, slight tracking */ .tti-articles-hero__title { margin: 0; font-family: inherit; font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff; text-wrap: balance; } .tti-articles-hero__title-accent { display: inline-block; background: linear-gradient(120deg, #f0e2c3 0%, #fff5d8 50%, #f0e2c3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.05em; } /* Lede — readable measure, softer color */ .tti-articles-hero__lede { margin: 0 auto; max-width: 64ch; font-size: clamp(1rem, 0.95rem + 0.45vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, 0.82); text-wrap: pretty; } /* --------------------------------------------------------------------- 5. CTA buttons — primary (cream-on-maroon) + secondary (ghost). --------------------------------------------------------------------- */ .tti-articles-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(8px, 1.5vw, 16px); } .tti-articles-hero__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; border-radius: 12px; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; cursor: pointer; border: 1.5px solid transparent; will-change: transform; } .tti-articles-hero__btn:focus-visible { outline: 3px solid #f0e2c3; outline-offset: 3px; } .tti-articles-hero__btn--primary { background: #f0e2c3; color: #4c0404; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px rgba(0, 0, 0, 0.28); } .tti-articles-hero__btn--primary:hover { transform: translateY(-2px); background: #fff5d8; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 32px rgba(0, 0, 0, 0.34); } .tti-articles-hero__btn--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.42); } .tti-articles-hero__btn--secondary:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.72); transform: translateY(-2px); } .tti-articles-hero__btn-icon { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.18s ease; } .tti-articles-hero__btn:hover .tti-articles-hero__btn-icon { transform: translateX(3px); } /* --------------------------------------------------------------------- 7. Responsive tightening — mobile pads down, meta stacks cleanly. --------------------------------------------------------------------- */ @media (max-width: 575px) { .tti-articles-hero { padding: 64px 18px 56px; } .tti-articles-hero__inner { gap: 18px; } .tti-articles-hero__btn { width: 100%; max-width: 320px; } } /* --------------------------------------------------------------------- 8. (Removed.) The archive-only padding-top inset on `.droip-page > section:nth-of-type(2)` stacked on top of Droip's asymmetric 150px-top / 64px-bottom section padding, which left ~246px of empty space above the article header on /articles/ and defeated the section 12 vertical-centering rule. Section 12 now forces balanced padding-top/padding-bottom on the three article sections, giving the centering rule room to work. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 9. Article-card overrides on /articles/ (page_for_posts = 1997). The card uses the post-single Droip template (post 2010) which ships demo author + category-badge nodes. We hide the demo nodes and recolor the title/excerpt/Explore-All link to match the maroon-on-cream brand context. Selectors target stable styleId classes (`pathwise_dp...`) and Droip data-attributes that survive template re-publishes. --------------------------------------------------------------------- */ /* 9a. Hide the demo author row — Pathwise placeholder image (Rectangle-3463506) + "by " paragraph live inside the dp2splig wrapper. */ body.tti-articles-page [data-droip="dp2splig"] { display: none !important; } /* 9b. Hide the "Announcements" category-badge button (and its wrapping div). The button has a stable `pathwise_dpnnuazb` styleId class; the parent wrapper uses a per-render droip-s-* ID, so we walk up via :has(). */ body.tti-articles-page .pathwise_dpnnuazb, body.tti-articles-page div:has(> .pathwise_dpnnuazb) { display: none !important; } /* 9b1. Section width — Droip ships .pathwise_edu-container-center capped at 1320px and the inner .pathwise_dp4btxhn column at 800px, which squeezes the body copy into a narrow ribbon on wide displays. Force the article-related sections (header, body, related) to ~65vw so the text breathes consistently across viewports. */ body.tti-articles-page #article-details-section .pathwise_edu-container-center, body.tti-articles-page #details .pathwise_edu-container-center, body.tti-articles-page #related-articles .pathwise_edu-container-center, body.tti-articles-page #article-details-section .pathwise_edu-container-center-3, body.tti-articles-page #details .pathwise_edu-container-center-3, body.tti-articles-page #related-articles .pathwise_edu-container-center-3, body.tti-articles-page #article-details-section .pathwise_dp4btxhn, body.tti-articles-page #details .pathwise_dp4btxhn, body.tti-articles-page #related-articles .pathwise_dp4btxhn { width: 65vw !important; max-width: 65vw !important; margin-left: auto !important; margin-right: auto !important; } /* Narrow viewports — let the section breathe to ~92vw so mobile reads like a single comfortable column instead of a 65vw stripe. */ @media (max-width: 768px) { body.tti-articles-page #article-details-section .pathwise_edu-container-center, body.tti-articles-page #details .pathwise_edu-container-center, body.tti-articles-page #related-articles .pathwise_edu-container-center, body.tti-articles-page #article-details-section .pathwise_edu-container-center-3, body.tti-articles-page #details .pathwise_edu-container-center-3, body.tti-articles-page #related-articles .pathwise_edu-container-center-3, body.tti-articles-page #article-details-section .pathwise_dp4btxhn, body.tti-articles-page #details .pathwise_dp4btxhn, body.tti-articles-page #related-articles .pathwise_dp4btxhn { width: 92vw !important; max-width: 92vw !important; } } /* 9b1.5 — Center every child of the article-details column. Droip ships .pathwise_dp4btxhn as flex-column with default `align-items: stretch`, plus `align-items: flex-start` on the excerpt row (.pathwise_dpc7xke2). Override both so text + images sit on the centered axis. */ body.tti-articles-page #article-details-section .pathwise_dp4btxhn { align-items: center !important; text-align: center !important; } body.tti-articles-page #article-details-section .pathwise_dpj3iy06 { align-items: center !important; text-align: center !important; width: 100% !important; } body.tti-articles-page #article-details-section .pathwise_dp5t6g9k { justify-content: center !important; width: 100% !important; } body.tti-articles-page #article-details-section .pathwise_dpc7xke2 { align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; } /* 9b1.6 — Title fits on one line on desktop. The title styleId .pathwise_dp7bnf9f ships with `max-width: 600px` which forced "Welcome to the TTI Community" (≈28 chars at 48px) onto two lines. Break the cap, span the full column, and lock to one line on viewports wide enough to fit it. */ body.tti-articles-page .pathwise_dp7bnf9f, body.tti-articles-page [data-droip="dpn0vx4x"] { max-width: none !important; width: 100% !important; text-align: center !important; } @media (min-width: 1024px) { body.tti-articles-page .pathwise_dp7bnf9f, body.tti-articles-page [data-droip="dpn0vx4x"] { white-space: nowrap !important; } } /* 9b1.7 — Excerpt paragraph: was capped at width:60%; let it flow the full column width and stay centered. */ body.tti-articles-page .pathwise_dpwk8uos, body.tti-articles-page [data-droip="dpeubb0y"] { width: 100% !important; max-width: none !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* 9b2. Logo image — shrink and center horizontally. The featured image wrapper (dpmmum5e) becomes a centered flex container; the image itself caps at clamp(160px, 22vw, 280px) for fluid scaling. */ body.tti-articles-page [data-droip="dpmmum5e"] { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; padding: clamp(16px, 2vw, 28px) 0 !important; } body.tti-articles-page [data-droip="dpy0t29b"], body.tti-articles-page .pathwise_dpw3pc1p { width: clamp(160px, 22vw, 280px) !important; max-width: clamp(160px, 22vw, 280px) !important; height: auto !important; margin: 0 auto !important; display: block !important; object-fit: contain !important; /* Maroon-bordered frame. The Droip image ships with `border-radius:12px` directly on the , but the source PNG's "THE TRAINING INSTITUTE" caption sits flush against the bottom edge — at the rendered size the rounded corners clip the leading "T" and trailing "E". Inset the image content with padding so the corners round the FRAME, not the letters; layer a cream-tinted backdrop + maroon border for a brand-aligned medallion look. `box-sizing: border-box` keeps the total width inside the same `clamp()` envelope above. */ padding: 16px !important; background-color: rgba(240, 226, 195, 0.10) !important; border: 2px solid #4c0404 !important; border-radius: 14px !important; box-sizing: border-box !important; } /* 9c. Title — "Welcome to the TTI Community" — render white. */ body.tti-articles-page [data-droip="dpn0vx4x"], body.tti-articles-page .pathwise_dp7bnf9f { color: #ffffff !important; } /* 9d. Lede / excerpt paragraph — render white. */ body.tti-articles-page [data-droip="dpeubb0y"], body.tti-articles-page .pathwise_dpwk8uos { color: #ffffff !important; } /* 9e. "Explore All" link + its arrow icon — render maroon (#4c0404). */ body.tti-articles-page [data-droip="dpnh96hj"], body.tti-articles-page [data-droip="dpnh96hj"]:hover, body.tti-articles-page .pathwise_dpk7l7v8, body.tti-articles-page [data-droip="dphq6f8u"], body.tti-articles-page .pathwise_explore { color: #4c0404 !important; } body.tti-articles-page [data-droip="dpumxk8v"], body.tti-articles-page .pathwise_dpogxxuq { color: #4c0404 !important; fill: currentColor !important; } body.tti-articles-page [data-droip="dpumxk8v"] path, body.tti-articles-page .pathwise_dpogxxuq path { fill: #4c0404 !important; } /* --------------------------------------------------------------------- 10. Article surface — maroon→dark-grey gradient + white text + cream links. Applies to BOTH /articles/ archive AND every single blog post (scoped on `body.tti-articles-page` — the shared class). The Droip post-single template paints `#article-details-section` (title + excerpt) and `#details` (article body: h2/h3, paragraphs, lists, links) via `.pathwise_section-6.pathwise_bg-secondary-l-one` which resolves to a flat maroon. We override that: - #article-details-section → transparent (grey wallpaper shows) - #details → maroon-heavy gradient to dark grey - #related-articles → solid white card field Text inside #details + #article-details-section forced white; links inside #details rendered cream/beige. --------------------------------------------------------------------- */ /* 10a — Article header (#article-details-section): transparent so the body grey wallpaper shows through. The Droip template paints this section flat maroon by default; we neutralize it on singles so the title/excerpt header reads as a calm grey band rather than competing with the maroon body gradient below. */ body.tti-articles-page #article-details-section, body.tti-articles-page #article-details-section.pathwise_section-6, body.tti-articles-page #article-details-section.pathwise_bg-secondary-l-one { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* 10b — Article body (#details): maroon→dark-grey gradient, maroon-heavy (#500000 0% → #4c0404 50% → #380000 85% → #2c2c2c 100%). The Droip template wraps the body content in `.pathwise_dpbozjui` (data-droip="dpasniv9") which paints solid white at 100% width and covers the section gradient — override that wrapper to transparent so the gradient reaches the eye. */ body.tti-articles-page #details, body.tti-articles-page #details.pathwise_dphnvxuf { background: linear-gradient( 180deg, #500000 0%, #4c0404 50%, #380000 85%, #2c2c2c 100% ) !important; background-color: #4c0404 !important; background-image: linear-gradient( 180deg, #500000 0%, #4c0404 50%, #380000 85%, #2c2c2c 100% ) !important; } body.tti-articles-page #details .pathwise_dpbozjui, body.tti-articles-page #details [data-droip="dpasniv9"] { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* 10c — Related-articles section: solid white surface (per user request 2026-05-05 — keep the bottom "Read more articles" band white so the card grid sits on a clean light field below the maroon body gradient). */ body.tti-articles-page #related-articles, body.tti-articles-page #related-articles.pathwise_section-6, body.tti-articles-page #related-articles.pathwise_bg-secondary-l-one, body.tti-articles-page #related-articles.pathwise_section-gap { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* 10c — Article body text (inside #details and #article-details-section) renders white. Existing rules 9c / 9d already whiten the H1 + excerpt styleId classes; this extends to every wp-block heading, paragraph, list item, blockquote, table, and inline span inside the article surface. */ body.tti-articles-page #details, body.tti-articles-page #details h1, body.tti-articles-page #details h2, body.tti-articles-page #details h3, body.tti-articles-page #details h4, body.tti-articles-page #details h5, body.tti-articles-page #details h6, body.tti-articles-page #details p, body.tti-articles-page #details li, body.tti-articles-page #details blockquote, body.tti-articles-page #details em, body.tti-articles-page #details strong, body.tti-articles-page #details span, body.tti-articles-page #details figcaption, body.tti-articles-page #details table, body.tti-articles-page #details td, body.tti-articles-page #details th, body.tti-articles-page #article-details-section h1, body.tti-articles-page #article-details-section h2, body.tti-articles-page #article-details-section h3, body.tti-articles-page #article-details-section p { color: #ffffff !important; } /* 10d — Links inside the article body render cream/beige with a subtle underline; cream lifts on hover and intensifies the underline. Scoped to #details (the article body) so we don't recolor the article-card "Explore All" link in #article-details-section, which already has its own dedicated rules in section 9e. */ body.tti-articles-page #details a, body.tti-articles-page #details a:visited { color: #f0e2c3 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; text-decoration-color: rgba(240, 226, 195, 0.55) !important; transition: color 0.18s ease, text-decoration-color 0.18s ease; } body.tti-articles-page #details a:hover, body.tti-articles-page #details a:focus-visible { color: #fff5d8 !important; text-decoration-color: #fff5d8 !important; } body.tti-articles-page #details a:focus-visible { outline: 2px solid #f0e2c3 !important; outline-offset: 2px !important; border-radius: 2px; } /* =================================================================== 11. Animations & Transitions — applies on both /articles/ and singles. SINGLE SOURCE OF TRUTH: every entrance animation is scroll-triggered via IntersectionObserver in tti-articles.js. Above-the-fold elements reveal immediately on first paint (IO fires synchronously for intersecting targets); below-the-fold reveal as they enter the viewport. NO @keyframes-based entrance animations — those would run even on elements still off-screen and waste GPU work. Performance discipline: - Only opacity + transform are animated (GPU-accelerated, no reflow). - `will-change` is NOT declared in CSS — JS adds it just before transition and the cleanup handler removes it on transitionend so we never carry GPU layers for completed reveals. - `contain: layout paint` is scoped to elements actively transitioning (`.tti-reveal`) and dropped on cleanup with the class removal. - No infinite box-shadow animations (paint-heavy → frame drops). - All transition durations under 640ms so entrance never feels slow. Honors `prefers-reduced-motion` — JS bails entirely; CSS in this block sits behind a `no-preference` media gate so reduced-motion users see static content even if a class slips through. =================================================================== */ @media (prefers-reduced-motion: no-preference) { /* 11a — Reveal initial / final states. `.tti-reveal` and `.tti-revealed` are independent classes (not combined via `.tti-reveal.tti-revealed`) so the cleanup handler in tti-articles.js can drop `.tti-reveal` after transitionend without resetting the final state. No `contain` here — opacity + translate3d don't trigger layout reflow, and `contain: layout paint` on N simultaneously revealing elements creates separate paint contexts that compound into user-visible scroll jank near the related-articles grid. */ body.tti-articles-page .tti-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); } body.tti-articles-page .tti-revealed { opacity: 1; transform: translate3d(0, 0, 0); } /* 11b — Cap medallion hover: lift + cream wash + border tighten. */ body.tti-articles-page [data-droip="dpy0t29b"], body.tti-articles-page .pathwise_dpw3pc1p { transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 360ms ease, background-color 360ms ease, opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1); } body.tti-articles-page [data-droip="dpy0t29b"]:hover, body.tti-articles-page .pathwise_dpw3pc1p:hover { transform: translate3d(0, -3px, 0) scale(1.015) !important; border-color: #7a0012 !important; background-color: rgba(240, 226, 195, 0.18) !important; } /* 11c — Body links: kinetic underline on hover. */ body.tti-articles-page #details a { transition: color 200ms cubic-bezier(0.2, 0.7, 0.2, 1), text-decoration-color 200ms cubic-bezier(0.2, 0.7, 0.2, 1), text-underline-offset 200ms cubic-bezier(0.2, 0.7, 0.2, 1) !important; } body.tti-articles-page #details a:hover, body.tti-articles-page #details a:focus-visible { text-underline-offset: 5px !important; } /* 11d — Related-articles cards: lift + soft shadow on hover. */ body.tti-articles-page #related-articles .pathwise_dphvitgn { transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 360ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 280ms ease !important; } body.tti-articles-page #related-articles .pathwise_dphvitgn:hover { transform: translate3d(0, -5px, 0); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), 0 6px 14px rgba(0, 0, 0, 0.10); } /* 11e — Marketing hero CTA hover (archive only). The base style has a `translateY(-2px)` on hover already; here we widen the shadow + cream halo for richer feedback. */ body.tti-articles-page .tti-articles-hero__btn--primary { transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 280ms cubic-bezier(0.2, 0.8, 0.2, 1), background 280ms ease; } body.tti-articles-page .tti-articles-hero__btn--primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 14px 36px rgba(0, 0, 0, 0.34), 0 0 0 6px rgba(240, 226, 195, 0.10); } /* 11f — (Removed.) `scroll-behavior: smooth` on made user wheel/trackpad scrolls smooth in Firefox, which compounded with IO-triggered reveals to produce visible scroll latency near the related-articles grid. Anchor-jump smoothness can be re-added per-link via JS if needed. */ } /* =================================================================== 12. Vertical centering for article surfaces. Droip's `.pathwise_section-6.pathwise_bg-secondary-l-one` ships with `display:flex; flex-direction:column; justify-content:center; align-items:center;` already, but flex-column sections without a min-height grow exactly to their content + padding, so the `justify-content:center` rule has no slack to center within. We give each surface a viewport-relative minimum height so short sections (article header on /articles/, related-articles with one card) get room to balance vertically. Long sections (#details with 30+ paragraphs of body) auto-grow past the min-height — the rule is a floor, not a ceiling, so it never adds dead scroll for content-heavy pages. =================================================================== */ body.tti-articles-page #article-details-section, body.tti-articles-page #details, body.tti-articles-page #related-articles { /* Tight, content-driven sizing — no min-height floor. Padding is asymmetric on purpose: the site header is `position: fixed` at 72px tall, so the FIRST section needs enough padding-top to clear it (otherwise the date pill at the top of `#article-details-section` sits behind the fixed nav). Bottom padding stays small to keep content density high. The same padding applies to all three article surfaces for visual rhythm when scrolling between sections. */ min-height: auto !important; padding-top: clamp(96px, 7vw, 120px) !important; padding-bottom: clamp(28px, 3.5vw, 48px) !important; } @media (max-width: 767px) { body.tti-articles-page #article-details-section, body.tti-articles-page #details, body.tti-articles-page #related-articles { padding-top: clamp(80px, 18vw, 96px) !important; padding-bottom: clamp(20px, 4vw, 36px) !important; } } /* Defensive override — if a `.tti-reveal` class slips through due to a misconfigured matchMedia, reduced-motion users still see content. */ @media (prefers-reduced-motion: reduce) { body.tti-articles-page .tti-reveal, body.tti-articles-page .tti-revealed { opacity: 1 !important; transform: none !important; transition: none !important; } }