/* ============================================================ article-lp.css — landing-page treatment for paid-traffic articles. EVERY rule is scoped under `.lp` (set on ), so this file is inert on the other 122 pages that share site.css. Load it only on pages that opt in. ============================================================ */ /* Smaller masthead — the logo shouldn't compete with the headline */ .lp .topbar__logo img { height: 28px; } @media (max-width: 720px) { .lp .topbar__logo img { height: 24px; } } .lp .topbar__inner { height: 52px; } @media (max-width: 720px) { .lp .topbar__inner { height: 46px; } } /* Links read as links — blue + underline, the way a news site does it */ .lp .article-body a, .lp .news-art__lede a { color: #1A56DB; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: rgba(26, 86, 219, .4); font-weight: 500; transition: text-decoration-color .15s ease, color .15s ease; } .lp .article-body a:hover, .lp .news-art__lede a:hover { color: #1443AE; text-decoration-color: #1A56DB; } /* …but never restyle a link that is itself a button. These need the same `.lp .article-body a` specificity, or the blue-link rule above wins and the label disappears into the button's own dark background. */ .lp .article-body a.agesel__pill { color: var(--c-ink); text-decoration: none; font-weight: 700; } .lp .article-body a.agesel__pill:hover { color: #fff; } .lp .article-body a.lp-inline__btn, .lp .article-body a.lp-inline__btn:hover { color: #fff; text-decoration: none; font-weight: 700; } /* ============================================================ Hero — full-bleed press photo with an authentic caption strip ============================================================ */ .lp-hero { position: relative; margin: 0 calc(-1 * var(--gutter)) var(--sp-4); width: calc(100% + 2 * var(--gutter)); overflow: hidden; background: #0F1620; } .lp-hero img { width: 100%; height: auto; max-height: 380px; object-fit: cover; object-position: center 42%; display: block; } /* Gradient only over the lower third so the building stays readable */ .lp-hero__scrim { position: absolute; inset-inline: 0; bottom: 0; height: 72%; background: linear-gradient(to top, rgba(8, 13, 20, .94) 0%, rgba(8, 13, 20, .86) 22%, rgba(8, 13, 20, .58) 52%, rgba(8, 13, 20, .22) 78%, rgba(8, 13, 20, 0) 100%); pointer-events: none; } .lp-hero__overlay { position: absolute; inset-inline: 0; bottom: 0; padding: var(--sp-5) var(--gutter) var(--sp-4); display: flex; flex-direction: column; gap: 6px; } .lp-hero__tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 4px 11px; border-radius: 3px; } .lp-hero__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: lpPulse 1.8s ease-in-out infinite; } @keyframes lpPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .lp-hero__caption { color: #fff; font-size: clamp(15px, 2.2vw, 19px); font-weight: 700; line-height: 1.35; text-shadow: 0 1px 12px rgba(0,0,0,.5); max-width: 42em; } .lp-hero__credit { color: rgba(255,255,255,.66); font-size: 11.5px; font-weight: 500; letter-spacing: .01em; } @media (max-width: 720px) { .lp-hero img { max-height: 210px; } .lp-hero__overlay { padding: var(--sp-4) var(--gutter) var(--sp-3); } .lp-hero__scrim { height: 82%; } } @media (prefers-reduced-motion: reduce) { .lp-hero__tag::before { animation: none; } } /* Byline row — mirrors how a real desk stamps an article */ .lp .news-art__title { font-size: clamp(1.7rem, 3.8vw, 2.45rem); } .lp-stamp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-3); } .lp-stamp__sep { color: var(--c-border-strong); } .lp-stamp__updated { color: var(--c-red); font-weight: 700; } /* Share sits on the same line as the credit, pushed to the far edge. */ .lp .lp-stamp { flex-wrap: nowrap; } .lp .lp-stamp__share { margin-inline-start: auto; display: flex; gap: 6px; flex: none; } /* Phone: credit + date + share hold one line — 375px cannot fit more than that without the labels breaking mid-word. Reading time drops out, and the "updated today" flag moves to its own line rather than being lost. */ @media (max-width: 560px) { .lp .lp-stamp { flex-wrap: wrap; gap: 6px; font-size: .72rem; } .lp .lp-stamp > * { white-space: nowrap; } .lp .lp-stamp__readtime, .lp .lp-stamp__readtime + .lp-stamp__sep, .lp .lp-stamp__date + .lp-stamp__sep { display: none; } .lp .lp-stamp__share { order: 1; gap: 4px; } .lp .lp-stamp__share .news-art__share-btn { width: 28px; height: 28px; } .lp .lp-stamp__share .news-art__share-btn svg { width: 15px; height: 15px; } .lp .lp-stamp__updated { order: 2; width: 100%; } } /* ============================================================ Minimal native age selector (replaces the 4 image cards) ============================================================ */ .agesel { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-4) var(--sp-4); border: 1px solid var(--c-border); border-inline-start: 3px solid var(--c-red); border-radius: var(--r-md); background: var(--c-bg-soft); } .agesel__label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); margin-bottom: 10px; } .agesel__row { display: flex; flex-wrap: wrap; gap: 8px; } .agesel__pill { flex: 1 1 auto; min-width: 78px; text-align: center; padding: 9px 14px; border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-ink); font-size: var(--fs-sm); font-weight: 700; transition: background .15s ease, border-color .15s ease, color .15s ease; } .agesel__pill:hover { background: var(--c-red); border-color: var(--c-red); color: #fff; } .agesel__note { margin-top: 10px; font-size: var(--fs-xs); color: var(--c-muted); } @media (max-width: 520px) { .agesel__pill { min-width: 0; flex: 1 1 calc(50% - 4px); } } /* Quiet inline text CTA for mid-article use */ .lp-inline { margin: var(--sp-5) 0; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); background: var(--c-bg); } .lp-inline__txt { font-size: var(--fs-sm); color: var(--c-text); font-weight: 600; } .lp-inline__btn { flex: none; background: var(--c-ink); color: #fff; padding: 10px 22px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; transition: background .15s ease; } .lp-inline__btn:hover { background: var(--c-red); } @media (max-width: 580px) { .lp-inline { flex-direction: column; align-items: stretch; text-align: center; } .lp-inline__btn { width: 100%; } } /* ============================================================ Sidebar — CTA only. No avatar, no article rehash. ============================================================ */ .lp-side { border: 1px solid var(--c-border); border-top: 3px solid var(--c-red); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4); background: var(--c-bg); box-shadow: var(--sh-sm); text-align: center; } .lp-side__kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--c-red); margin-bottom: 8px; } .lp-side__title { font-size: 1.28rem; font-weight: 900; line-height: 1.28; color: var(--c-ink); margin-bottom: 8px; } .lp-side__sub { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; margin-bottom: var(--sp-4); } .lp-side__cta { display: block; background: var(--c-red); color: #fff; padding: 14px 18px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 800; box-shadow: 0 4px 14px -4px rgba(227,30,36,.5); transition: background .15s ease, transform .15s ease; } .lp-side__cta:hover { background: var(--c-red-dark); transform: translateY(-1px); } .lp-side__note { margin-top: 10px; font-size: 12px; color: var(--c-muted); } /* Second, quieter sidebar block further down the rail */ .lp-side__divider { margin: var(--sp-4) 0 var(--sp-3); border: 0; border-top: 1px solid var(--c-border); } .lp-side__minor { font-size: 12.5px; color: var(--c-muted); line-height: 1.55; } /* ============================================================ Exit popup — plain variant (no avatar, no gradient bar) ============================================================ */ .neto-exit-pop--plain .neto-exit-pop__card { padding: 30px 26px 24px; border-radius: 10px; } .neto-exit-pop--plain .neto-exit-pop__card::before { display: none; } .neto-exit-pop--plain .neto-exit-pop__eyebrow { color: var(--c-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; } .neto-exit-pop--plain .neto-exit-pop__eyebrow::before { display: none; } .neto-exit-pop--plain .neto-exit-pop__title { font-size: 21px; line-height: 1.3; } .neto-exit-pop--plain .neto-exit-pop__sub { font-size: 14.5px; color: var(--c-muted); } .neto-exit-pop--plain .neto-exit-pop__cta { background: var(--c-ink); border-radius: 8px; box-shadow: none; font-weight: 800; } .neto-exit-pop--plain .neto-exit-pop__cta:hover { background: var(--c-red); transform: none; } .neto-exit-pop--plain .neto-exit-pop__trust { color: var(--c-faint); font-size: 12px; } /* Text-only "no thanks" — an explicit way out keeps the popup from feeling like a trap */ .neto-exit-pop__dismiss { display: block; width: 100%; margin-top: 10px; padding: 8px 0; font-size: 13.5px; font-weight: 500; color: var(--c-muted); transition: color .15s ease; } .neto-exit-pop__dismiss:hover { color: var(--c-ink); }