:root{ /* True white page background — magenta/gold are accent-only, never a page or header background. --paper and --paper-raised are kept as two tokens (rather than collapsed into one) so any surface that later needs to be distinguished from the page can do so without touching every call site — today both resolve to the same white. */ --paper:#FFFFFF; --paper-raised:#FFFFFF; --ink:#16131C; --ink-soft:#55505C; --ink-faint:#948E97; --line:#E4E4E4; --magenta:#D41367; --magenta-deep:#93103F; --magenta-wash:#F7E3EC; --gold:#B9872B; --gold-deep:#8F6B22; --gold-wash:#F2E7CD; --font-display:'Fraunces',Georgia,'Times New Roman',serif; --font-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --font-mono:'IBM Plex Mono','SF Mono',Consolas,monospace; --measure:680px; --wide:1180px; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body); font-size:17px;line-height:1.6; } img{max-width:100%;height:auto;display:block;} a{color:var(--magenta-deep);} h1,h2,h3,h4{text-wrap:balance;} :focus-visible{outline:2px solid var(--magenta);outline-offset:2px;} @media (prefers-reduced-motion:no-preference){ a,button{transition:color .15s ease,background-color .15s ease,border-color .15s ease;} } .wrap{max-width:var(--measure);margin:0 auto;padding:0 24px;} .wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 24px;} /* ---------- shared paid badge ---------- A quiet editorial marker, not an app/ecommerce pill: no background, no icon glyph — just a small filled dot and tracked gold text, sitting inline with the rest of the metadata the way a wire-service tag would. */ .paid-badge{ display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.68rem; letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;white-space:nowrap; } .paid-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;} /* ============ MARKET TICKER ============ Bloomberg-strip DNA, simplified for an Apple-clean site: one quiet ink band, tabular numbers, an arrow plus an explicit +/- sign so direction never depends on color alone. Motion: .market-ticker-scroll is a fixed-width, overflow:hidden viewport; .market-ticker-track holds the real items followed by an identical, aria-hidden duplicate set and animates via `transform: translateX(...)` only — a compositor-driven CSS animation, not a JS timer. public/site.js measures the exact pixel distance to the duplicate's first item once (and on resize) and writes it to --ticker-shift, so the loop point lands pixel-perfectly on a frame that's visually identical to the start — no jump, no flash. Duration is likewise derived from that same measured width against a fixed px/second speed (see PIXELS_PER_SECOND in site.js), so the strip moves at a constant, readable pace regardless of viewport width instead of a fixed duration that would read fast when short and slow when long. --ticker-duration/--ticker-shift both carry static fallbacks so the strip still animates sanely before JS runs. */ .market-ticker{background:var(--ink);color:var(--paper);} .market-ticker-inner{ max-width:var(--wide);margin:0 auto;padding:7px 24px; display:flex;align-items:center;gap:16px; } .market-ticker-label{ font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase; color:var(--gold);flex:none; } .market-ticker-scroll{ position:relative;overflow:hidden;scrollbar-width:none;flex:1;min-width:0; -webkit-overflow-scrolling:touch; } .market-ticker-scroll::-webkit-scrollbar{display:none;} .market-ticker-track{ display:flex;gap:22px;width:max-content; animation:market-ticker-scroll var(--ticker-duration,32s) linear infinite; } @keyframes market-ticker-scroll{ from{transform:translateX(0);} to{transform:translateX(var(--ticker-shift,-50%));} } /* Hover-to-pause only on devices that genuinely have hover (a real mouse) — scoped past touchscreens so a tap never leaves the strip stuck paused via "sticky hover." Touch gets its own pause-while-interacting below. */ @media (hover:hover) and (pointer:fine){ .market-ticker-scroll:hover .market-ticker-track{animation-play-state:paused;} } /* While a touch is in progress (or its momentum scroll is still settling — see the `scroll` listener in site.js that keeps re-arming this), the strip is paused AND switched to a native, momentum-scrollable viewport, so a swipe scrolls the (paused) track directly instead of fighting the animation. It reverts to the animated, overflow:hidden state once the gesture is fully done. */ .market-ticker-scroll.is-touching{overflow-x:auto;} .market-ticker-scroll.is-touching .market-ticker-track{animation-play-state:paused;} .market-ticker-item{ display:flex;align-items:baseline;gap:7px;flex:none;font-family:var(--font-mono); font-size:.74rem;font-variant-numeric:tabular-nums;white-space:nowrap; } .mti-symbol{font-weight:700;color:rgba(245,238,234,.58);} .mti-price{color:var(--paper);} .mti-change{font-weight:600;} .market-ticker-item--up .mti-change{color:#5FBE83;} .market-ticker-item--down .mti-change{color:#F0897E;} .market-ticker-item--flat .mti-change{color:rgba(245,238,234,.5);} .market-ticker-meta{ font-family:var(--font-mono);font-size:.64rem;color:rgba(245,238,234,.42);flex:none;display:none; } @media (min-width:860px){.market-ticker-meta{display:block;}} /* Reduced motion: no continuous animation at all — a plain, manually scrollable strip instead, exactly as requested. The duplicate set (only ever there to make the animation loop seamlessly) is hidden so a visitor scrolling by hand never scrolls past the same six stocks twice. */ @media (prefers-reduced-motion:reduce){ .market-ticker-track{animation:none;} .market-ticker-scroll{overflow-x:auto;} .market-ticker-item[aria-hidden="true"]{display:none;} } /* ============ HEADER ============ A masthead rule pair (one solid, one hairline) stands in for the fussy navigation chrome of a typical site header — a cheap, recognizable newspaper device that reads as "publication" rather than "product." */ .site-header{background:var(--paper);position:sticky;top:0;z-index:30;box-shadow:0 1px 0 var(--ink),0 4px 0 -3px var(--line);} .site-header-inner{display:flex;align-items:center;gap:20px;padding:10px 24px;} .site-logo{display:flex;align-items:center;text-decoration:none;flex:none;} /* Real logo asset (media/on the pen logo.PNG), height-constrained with width:auto so its native 700:280 ratio is never stretched. Sized as the publication's masthead mark, not a small nav icon — bigger again at wider breakpoints, with header padding trimmed to compensate so the bar itself doesn't grow much taller. */ .site-logo-img{height:42px;width:auto;display:block;} @media (min-width:640px){.site-logo-img{height:50px;}} @media (min-width:1080px){.site-logo-img{height:60px;}} .site-tagline{display:none;font-size:.71rem;color:var(--ink-faint);margin:0;padding-left:16px;border-left:1px solid var(--line);line-height:1.3;max-width:22ch;} .site-nav{display:none;gap:22px;margin-left:auto;} .site-nav a{ color:var(--ink);text-decoration:none;font-family:var(--font-mono);font-size:.74rem;font-weight:600; letter-spacing:.04em;text-transform:uppercase; } .site-nav a:hover{color:var(--magenta-deep);} /* Find My Trial gets a filled pill, not a plain text link — it's a major site feature (patient trial search), not just another nav destination, so it needs to read as distinct at a glance without a whole second header treatment. */ .site-nav-find-trial{ background:var(--magenta);color:#fff !important;padding:6px 12px;border-radius:99px; } .site-nav-find-trial:hover{background:var(--magenta-deep);color:#fff !important;} .site-header-actions{display:flex;align-items:center;gap:12px;margin-left:auto;} .site-icon-link{display:flex;color:var(--ink-soft);} .site-icon-link:hover{color:var(--magenta-deep);} .site-subscribe-cta{ display:none;background:var(--magenta);color:#fff;text-decoration:none;font-weight:700;font-size:.8rem; padding:9px 16px;border-radius:4px;white-space:nowrap; } .site-subscribe-cta:hover{background:var(--magenta-deep);} .site-menu-toggle{display:flex;background:none;border:none;color:var(--ink);padding:4px;cursor:pointer;} .mobile-menu{border-top:1px solid var(--line);padding:18px 24px 24px;background:var(--paper-raised);} .mobile-menu nav{display:flex;flex-direction:column;gap:2px;margin-bottom:16px;} .mobile-menu nav a{ color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;padding:12px 4px; border-bottom:1px solid var(--line); } .mobile-subscribe-cta{ display:block;text-align:center;background:var(--magenta);color:#fff;text-decoration:none; font-weight:700;padding:14px;border-radius:4px; } .mobile-find-trial-cta{ display:block;text-align:center;background:var(--ink);color:#fff;text-decoration:none; font-weight:700;padding:14px;border-radius:4px;margin-bottom:16px; } @media (min-width:640px){ .site-subscribe-cta{display:inline-block;} } @media (min-width:860px){ .site-nav{display:flex;} .site-menu-toggle{display:none;} .mobile-menu{display:none !important;} } @media (min-width:1080px){ .site-tagline{display:block;} } /* ============ ARTICLE HEADER (article page only) ============ */ .article-header{padding:36px 0 0;} .kicker{ display:inline-block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; color:var(--magenta-deep);font-weight:600;border-left:3px solid var(--magenta);padding-left:9px;margin-bottom:20px; line-height:1.2; } h1.headline{ font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,5vw,2.7rem); line-height:1.12;margin:0 0 16px;text-wrap:balance; } .dek{ font-family:var(--font-display);font-style:italic;font-weight:500; font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--ink-soft);line-height:1.5;margin:0 0 26px;max-width:56ch; } .byline{display:flex;align-items:center;gap:11px;padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--line);} .byline-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--magenta),var(--gold));flex:none;} .byline-name{font-weight:700;font-size:.92rem;} .byline-meta{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);} .byline > .paid-badge{margin-left:auto;} .hero{margin:0 0 34px;border-radius:4px;overflow:hidden;background:var(--line);} .hero img{width:100%;} /* ---------- article body ---------- */ .article-body{font-size:1.06rem;line-height:1.8;} .article-body p{margin:0 0 22px;} .article-body h2{font-family:var(--font-display);font-weight:600;font-size:1.45rem;margin:40px 0 16px;line-height:1.3;} .article-body h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin:32px 0 14px;} .article-body ul,.article-body ol{margin:0 0 22px;padding-left:1.3em;} .article-body li{margin-bottom:10px;} .article-body blockquote{ margin:28px 0;padding:2px 0 2px 20px;border-left:3px solid var(--gold); font-family:var(--font-display);font-style:italic;font-size:1.18rem;line-height:1.5;color:var(--ink); } .article-body blockquote p{margin:0;} .article-body a{text-decoration-thickness:1px;text-underline-offset:2px;} .article-body strong{font-weight:700;} .article-body hr{border:none;border-top:1px solid var(--line);margin:36px 0;} figure.otp-figure{margin:32px 0;} figure.otp-figure figcaption{ font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint);margin-top:10px;line-height:1.5; } .otp-embed{position:relative;width:100%;aspect-ratio:16/9;margin:32px 0;background:var(--ink);border-radius:4px;overflow:hidden;} .otp-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} /* ============ STATIC/INFORMATIONAL PAGES ============ About, Editorial Process, Sponsorships, Site Rules & FAQ, Contact — see src/render/pages/. Deliberately thin: the page shell and typography are the SAME .wrap/.article-header/.headline/.dek/.article-body rules the article template already uses above, so these few additions only cover what's genuinely new (a TOC, numbered rules, a sponsor disclosure list, a social link row) rather than a parallel "legal page" style system. */ .static-page{padding-bottom:60px;} .static-page-header{padding-bottom:8px;} .static-page-toc{ margin:28px 0 8px;padding:16px 20px;background:var(--paper-raised); border:1px solid var(--line);border-radius:4px; } .static-page-toc-label{ font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-faint);margin:0 0 8px; } .static-page-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;} .static-page-toc a{font-size:.88rem;color:var(--ink-soft);text-decoration:none;} .static-page-toc a:hover{color:var(--magenta-deep);} .site-rules-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:14px;} .site-rules-list li{display:flex;align-items:baseline;gap:14px;} .rule-number{ font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--gold-deep);flex:none; width:1.6em; } .sponsor-disclosure-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:20px;} .sponsor-disclosure-item{padding-bottom:18px;border-bottom:1px solid var(--line);} .sponsor-disclosure-item:last-child{border-bottom:none;padding-bottom:0;} .sponsor-disclosure-item > a{ font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);text-decoration:none; } .sponsor-disclosure-item > a:hover{color:var(--magenta-deep);} .sponsor-disclosure-item p{margin:6px 0 0;font-size:.92rem;color:var(--ink-soft);line-height:1.6;} .contact-social-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:4px;} .contact-social-row a{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);text-decoration:none;} .contact-social-row a:hover{color:var(--magenta-deep);} @media (max-width:599px){ .static-page-toc{padding:14px 16px;} } /* ---------- paywall module ---------- */ .paywall{ margin:8px 0 40px;border-radius:6px;padding:36px 30px;text-align:center; background:var(--ink);color:var(--paper); } .paywall-kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;} .paywall-headline{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,3vw,1.6rem);margin:0 auto 14px;max-width:20ch;line-height:1.25;text-wrap:balance;} .paywall-lede{font-size:.94rem;line-height:1.6;color:rgba(245,238,234,.72);max-width:44ch;margin:0 auto 24px;} .paywall-benefits{list-style:none;margin:0 auto 28px;padding:0;display:inline-flex;flex-direction:column;gap:10px;text-align:left;} .paywall-benefits li{font-size:.85rem;line-height:1.5;color:rgba(245,238,234,.88);padding-left:20px;position:relative;max-width:340px;} .paywall-benefits li::before{content:"—";position:absolute;left:0;color:var(--gold);} .paywall-cta{ display:inline-block;background:var(--magenta);color:#fff;text-decoration:none; font-weight:700;font-size:.94rem;padding:15px 30px;border-radius:4px;margin-bottom:16px; } .paywall-cta:hover{background:var(--magenta-deep);} .paywall-signin{font-size:.82rem;color:rgba(245,238,234,.65);margin:0 0 18px;} .paywall-signin a{color:var(--gold);} .paywall-fine{font-family:var(--font-mono);font-size:.68rem;color:rgba(245,238,234,.48);line-height:1.6;max-width:46ch;margin:0 auto;} /* ---------- share row ---------- */ .share-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:28px 0;margin:12px 0 8px;border-top:1px solid var(--line);} .share-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-right:6px;} .share-link{ font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft);text-decoration:none;background:none; border:1px solid var(--line);padding:7px 12px;border-radius:20px;cursor:pointer; } .share-link:hover{border-color:var(--magenta);color:var(--magenta-deep);} /* ---------- article-page newsletter aside + podcast note ---------- */ .newsletter{margin:44px 0;padding:32px 28px;border:1px solid var(--line);border-radius:6px;background:var(--paper-raised);} .newsletter-kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta-deep);margin:0 0 12px;} .newsletter h3{font-family:var(--font-display);font-weight:600;font-size:1.35rem;margin:0 0 10px;} .newsletter p{font-size:.9rem;color:var(--ink-soft);margin:0 0 20px;max-width:48ch;} .newsletter-embed{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;} .newsletter-embed iframe{display:block;width:100%;height:360px;border:0;} .podcast-note{ display:flex;align-items:center;gap:14px;margin:0 0 44px;padding:18px 20px; border-radius:6px;background:var(--gold-wash); } .podcast-note .mark{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#5c3f10);flex:none;} .podcast-note p{margin:0;font-size:.86rem;line-height:1.5;color:#3a2a08;} .podcast-note a{color:#3a2a08;font-weight:700;text-decoration:underline;} /* ---------- related stories (article page) ---------- */ .related{padding:44px 0 60px;border-top:1px solid var(--line);} .related h3{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 22px;} .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .related-item{text-decoration:none;color:var(--ink);display:block;} .related-thumb{aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:var(--line);margin-bottom:12px;} .related-thumb img{width:100%;height:100%;object-fit:cover;} .related-item h4{font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1.32;margin:0 0 6px;} .related-item .meta{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);display:flex;align-items:center;gap:8px;} /* ============ HOMEPAGE: TOP ZONE ============ The lead story, supporting stories, and both featured video cards as ONE bounded "front page" — a thick top rule continuing the masthead's own rule weight, a hairline close, and an internal column divider between written news and programming. Not two components floating side by side with a gap between them. */ .top-zone{border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .top-zone-inner{display:flex;flex-direction:column;} .top-zone-main{padding:40px 0 32px;} .top-zone-watch{padding:28px 0 32px;border-top:1px solid var(--line);} .lead-story-headline{ font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,5.4vw,3.1rem); line-height:1.04;letter-spacing:-.01em;margin:0 0 16px; } .lead-story-headline a{color:var(--ink);text-decoration:none;} .lead-story-headline a:hover{color:var(--magenta-deep);} .lead-story-dek{ font-family:var(--font-display);font-style:italic;font-size:clamp(1.02rem,2.4vw,1.22rem); color:var(--ink-soft);line-height:1.5;margin:0 0 18px;max-width:60ch; } .lead-story-meta{ display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--font-mono); font-size:.74rem;color:var(--ink-faint);margin-bottom:22px;padding-top:14px;border-top:1px solid var(--line); } .lead-story-image{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--line);} .lead-story-image img{width:100%;height:100%;object-fit:cover;} /* ---------- watch / programming rail ---------- One bordered panel with an internal divider, not two loose cards next to a news story — this is what makes it read as On The Pen's own programming block rather than an embed of someone else's videos. */ .watch-eyebrow{ font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-faint);margin:0 0 12px;display:flex;align-items:center;gap:8px; } .watch-eyebrow::after{content:"";flex:1;height:1px;background:var(--line);} .watch-stack{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--paper-raised);} .watch-stack .video-card{padding:16px;} .watch-stack .video-card + .video-card{border-top:1px solid var(--line);} .watch-stack .video-card--podcast{background:linear-gradient(180deg,var(--gold-wash) 0%,var(--paper-raised) 130%);} /* ---------- video cards ---------- */ .video-card{display:block;} .video-card-media{ position:relative;display:block;aspect-ratio:16/9;border-radius:3px;overflow:hidden; background:var(--ink);cursor:pointer; } .video-card-media img{width:100%;height:100%;object-fit:cover;} .video-card-no-thumb{width:100%;height:100%;background:linear-gradient(135deg,#2b2530,var(--ink));} .video-card-media::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(22,19,28,0) 55%,rgba(22,19,28,.55) 100%); } .video-card-play{ position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.94);color:var(--ink);display:flex;align-items:center;justify-content:center; pointer-events:none;z-index:2; } .video-card--compact .video-card-play{width:34px;height:34px;} .video-card-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} /* Once playing, the thumbnail's darkening gradient (meant to calm busy YouTube art and set off the play button) would otherwise paint straight over the live player's own controls — and the pointer cursor should stop implying there's still something to click. */ .video-card-media.is-playing{cursor:default;} .video-card-media.is-playing::after{content:none;} .video-card-body{padding-top:12px;} .video-card-kicker{ position:absolute;left:10px;bottom:10px;z-index:2; display:inline-block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase; padding:3px 8px;border-radius:2px;font-weight:700; } .kicker-gold{background:var(--gold);color:#2b1f04;} .kicker-magenta{background:var(--magenta);color:#fff;display:flex;align-items:center;gap:5px;} .kicker-magenta::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;} .video-card-title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.3;margin:0 0 6px;} .video-card-title a{color:var(--ink);text-decoration:none;} .video-card-title a:hover{color:var(--magenta-deep);} /* Content-type identity (serif/produced vs. sans/immediate) must win regardless of card size, so only font-size is touched by the compact variant below — both rules would otherwise tie on specificity and the later one (compact) would silently erase the livestream's sans title in the Recent Livestreams grid. */ .video-card--livestream .video-card-title{font-family:var(--font-body);font-weight:700;letter-spacing:-.005em;} .video-card--compact .video-card-title{font-size:.92rem;} .video-card-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);margin-bottom:8px;} .video-card-desc{font-size:.85rem;color:var(--ink-soft);line-height:1.55;margin:0 0 10px;} .video-card-watch{font-family:var(--font-mono);font-size:.72rem;color:var(--magenta-deep);text-decoration:none;font-weight:600;} .video-card-watch:hover{text-decoration:underline;} .video-card--compact .video-card-watch{display:none;} .video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;} /* ---------- supporting news row ---------- */ .supporting-stack{padding-top:20px;margin-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:18px;} .secondary-story h3{font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.32;margin:0 0 6px;} .secondary-story h3 a{color:var(--ink);text-decoration:none;} .secondary-story h3 a:hover{color:var(--magenta-deep);} .secondary-story-meta{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);} .secondary-story.has-image{display:flex;gap:14px;} .secondary-story-image{flex:none;width:120px;aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--line);} .secondary-story-image img{width:100%;height:100%;object-fit:cover;} /* ---------- section heading ---------- The recurring OTP device: a short magenta rule above every section label. Same motif at every section start — Latest News, The GLP-1 Report, Recent Livestreams — so it reads as one publication's rhythm rather than three unrelated blocks bolted together. */ .section-head{padding:0 0 18px;border-bottom:1px solid var(--line);margin-bottom:26px;} .section-head::before{content:"";display:block;width:32px;height:3px;background:var(--magenta);margin-bottom:14px;} /* The Weekly Dose keeps its gold identity even at the section level, not just in the top-of-page module — the same signal, carried through. */ #podcast .section-head::before{background:var(--gold);} .section-head h2{font-family:var(--font-display);font-weight:600;font-size:1.5rem;letter-spacing:-.005em;margin:0 0 4px;} .section-head p{font-size:.85rem;color:var(--ink-soft);margin:0;} /* ---------- editorial zones ---------- Each major homepage section is a full-width band: the
itself carries the border/background, an inner .wrap-wide keeps the content at reading width. Three deliberately different treatments, not one card style repeated — Latest News stays plain white (the newsroom baseline), The Weekly Dose gets a warm gold tint (its flagship identity, carried from the top-of-page module), and Livestreams / Sponsors share a quiet neutral tint that reads as "adjacent, secondary" without competing with either. Zones butt directly against each other — the rule between them does the separating, not blank margin. */ /* Find My Trial: its own quiet magenta-wash tint — the site's flagship patient utility gets the same "distinct identity" treatment as The Weekly Dose's gold, just in the brand's primary accent instead. */ .find-trial-promo{background:var(--ink);border-top:1px solid var(--line);padding:48px 0;} .find-trial-promo .kicker{color:var(--gold);border-left-color:var(--gold);} .find-trial-promo-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:56ch;margin:0 auto;} .find-trial-promo-inner h2{font-family:var(--font-display);font-weight:700;font-size:1.9rem;margin:4px 0 0;color:var(--paper);} .find-trial-promo-dek{font-size:.98rem;color:rgba(245,238,234,.85);line-height:1.6;margin:0 0 6px;} .find-trial-promo-cta{display:inline-block;padding:13px 32px;} .find-trial-promo-cta.pipeline-cta-primary{background:var(--gold);color:#2b1f04;} .find-trial-promo-cta.pipeline-cta-primary:hover{background:var(--gold-deep);} .find-trial-promo-stat{font-family:var(--font-mono);font-size:.72rem;color:rgba(245,238,234,.6);margin:8px 0 0;} @media (min-width:860px){ .find-trial-promo{padding:60px 0;} .find-trial-promo-inner h2{font-size:2.2rem;} } .news-zone{border-top:1px solid var(--line);padding:36px 0 12px;} .podcast-zone{background:#FBF6EA;border-top:1px solid var(--line);padding:36px 0 40px;} .livestream-zone{background:#FAFAFA;border-top:1px solid var(--line);padding:36px 0 40px;} .top-stories-zone{border-top:1px solid var(--line);padding:36px 0 40px;} /* ---------- top stories ---------- #1 gets a genuinely larger, image-led treatment; #2-5 compress into a quiet numbered list. The heart count is one small mono-set data point next to the date, not a badge or a social-widget affordance — it explains the ranking, it isn't something to click. */ .top-stories-grid{display:grid;gap:28px;} .top-story-rank{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);flex:none;width:20px;padding-top:3px;} .top-story-featured{display:flex;gap:22px;align-items:flex-start;} .top-story-featured h3{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.22;margin:6px 0 8px;} .top-story-featured h3 a{color:var(--ink);text-decoration:none;} .top-story-featured h3 a:hover{color:var(--magenta-deep);} .top-story-dek{font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin:0 0 12px;max-width:52ch;} .top-story-featured-body{flex:1;min-width:0;} .top-story-featured-image{flex:none;width:220px;aspect-ratio:10/6.5;border-radius:3px;overflow:hidden;background:var(--line);} .top-story-featured-image img{width:100%;height:100%;object-fit:cover;} .top-stories-list{list-style:none;margin:0;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;} .top-story-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);} .top-story-row:last-child{border-bottom:none;} .top-story-row h4{font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1.32;margin:0 0 6px;} .top-story-row h4 a{color:var(--ink);text-decoration:none;} .top-story-row h4 a:hover{color:var(--magenta-deep);} .top-story-row-body{flex:1;min-width:0;} .top-story-meta{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);flex-wrap:wrap;} /* Restrained on purpose — muted meta color, not the magenta/gold brand accents, so this reads as a quiet supporting data point (an estimate) rather than a highlighted stat or a social-proof badge. */ .top-story-audience{display:flex;align-items:center;gap:4px;color:var(--ink-faint);} .top-story-audience-count{font-weight:600;color:var(--ink-soft);} @media (min-width:700px){ .top-stories-grid{grid-template-columns:1.4fr 1fr;align-items:start;} .top-stories-list{border-top:none;padding-top:0;} } /* ---------- latest news list ---------- Three weights, not one row style repeated: the newest story runs large with an image and excerpt, the next two stay medium, and everything older compresses into a dense, fast-scanning list — a visible freshness gradient down the page instead of identical cards. */ .news-list{display:flex;flex-direction:column;} .news-row{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);} .news-row-image{flex:none;width:88px;height:88px;border-radius:3px;overflow:hidden;background:var(--line);} .news-row-image img{width:100%;height:100%;object-fit:cover;} .news-row-meta{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);margin-bottom:6px;} .news-row h3{font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.32;margin:0 0 5px;} .news-row h3 a{color:var(--ink);text-decoration:none;} .news-row h3 a:hover{color:var(--magenta-deep);} .news-row-excerpt{font-size:.86rem;color:var(--ink-soft);line-height:1.55;margin:0;} .news-row--featured{padding-top:2px;} .news-row--featured .news-row-image{width:220px;height:150px;} .news-row--featured h3{font-size:1.4rem;line-height:1.24;} @media (min-width:640px){.news-row--featured .news-row-image{width:280px;height:170px;}} .news-row--compact{padding:13px 0;gap:12px;} .news-row--compact .news-row-meta{margin-bottom:2px;} .news-row--compact h3{font-size:.92rem;font-weight:500;line-height:1.35;} /* ---------- topic chips (dormant until real topic data exists) ---------- */ .topic-areas{padding:16px 0;} .topic-chip-row{display:flex;gap:8px;flex-wrap:wrap;} .topic-chip{ font-family:var(--font-mono);font-size:.72rem;padding:6px 12px;border-radius:20px; border:1px solid var(--line);color:var(--ink-soft);text-decoration:none; } /* ---------- subscribe module ---------- */ .subscribe-module{background:var(--ink);color:var(--paper);padding:56px 0;position:relative;} .subscribe-module::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--magenta),var(--gold));} .subscribe-grid{display:flex;flex-direction:column;gap:32px;} .subscribe-kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;} .subscribe-copy h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.1rem);margin:0 0 14px;max-width:15ch;line-height:1.15;} .subscribe-dek{font-size:.94rem;line-height:1.6;color:rgba(245,238,234,.75);max-width:46ch;margin:0 0 22px;} .subscribe-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;} .subscribe-benefits li{font-size:.9rem;color:rgba(245,238,234,.85);padding-left:20px;position:relative;line-height:1.5;} .subscribe-benefits li::before{content:"—";position:absolute;left:0;color:var(--gold);} .subscribe-embed-wrap{background:rgba(245,238,234,.04);border:1px solid rgba(245,238,234,.14);border-radius:6px;padding:18px;} .subscribe-embed-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(245,238,234,.55);margin:0 0 12px;text-align:center;} .subscribe-embed{border-radius:4px;overflow:hidden;background:#fff;} .subscribe-embed iframe{display:block;width:100%;height:380px;border:0;} /* ---------- mission ---------- */ /* Deliberately the one open, unbounded section on the page — a single short editorial statement reads better as a breath between the dark membership band and the quiet sponsor strip than as another framed zone competing for attention. */ .mission-section{padding:40px 0;text-align:center;} .mission-line{ font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(1.2rem,3.2vw,1.6rem); color:var(--ink);margin:0 0 12px;line-height:1.4; } .mission-sub{font-size:.88rem;color:var(--ink-soft);max-width:52ch;margin:0 auto;line-height:1.6;} /* ---------- sponsors ---------- Reads as a disclosure line, not an ad unit: quiet label, plain wordmarks, no borders or tiles competing with the journalism above. Same neutral tint as Livestreams — both are "secondary, adjacent" zones in the same system, not one-off treatments. */ .sponsors-zone{background:#FAFAFA;padding:32px 0 40px;border-top:1px solid var(--line);} .sponsors-label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin:0 0 18px;} .sponsors-row{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap;} .sponsors-row a{ font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink-soft);text-decoration:none; opacity:.7; } .sponsors-row a:hover{opacity:1;color:var(--ink);} /* ---------- footer ---------- */ footer.site-footer{border-top:1px solid var(--line);padding:48px 0 0;} .footer-grid{display:flex;flex-direction:column;gap:32px;padding-bottom:36px;} .footer-brand .footer-logo-img{height:34px;} .footer-brand p{font-size:.82rem;color:var(--ink-soft);max-width:38ch;line-height:1.5;margin:10px 0 16px;} .footer-social{display:flex;flex-wrap:wrap;gap:10px 16px;} .footer-social a{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);text-decoration:none;} .footer-social a:hover{color:var(--magenta-deep);} .footer-col h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px;} .footer-col{display:flex;flex-direction:column;gap:9px;} .footer-col a{color:var(--ink);text-decoration:none;font-size:.88rem;} .footer-col a:hover{color:var(--magenta-deep);} .footer-legal{border-top:1px solid var(--line);padding:18px 0 32px;} .footer-legal p{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);line-height:1.7;max-width:70ch;margin:0;} /* ---------- search page ---------- */ .search-page{padding:36px 0 60px;} .search-form{display:flex;gap:10px;margin-bottom:8px;} .search-form input{ flex:1;font-family:var(--font-body);font-size:1rem;padding:12px 14px;border:1px solid var(--line); border-radius:4px;background:var(--paper-raised);color:var(--ink); } .search-form button{ font-family:var(--font-body);font-weight:700;font-size:.9rem;background:var(--ink);color:var(--paper); border:none;border-radius:4px;padding:12px 20px;cursor:pointer; } .search-count{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);margin:20px 0 4px;} .search-empty{color:var(--ink-soft);padding:24px 0;} /* ============ RESPONSIVE ============ */ /* Base styles above are mobile-first. Progressively enhance upward. */ @media (min-width:600px){ .supporting-stack{flex-direction:row;} .secondary-story{flex:1;} .secondary-story.has-image{flex-direction:column;} .secondary-story-image{width:100%;aspect-ratio:16/10;} .video-grid{grid-template-columns:repeat(2,1fr);} } @media (min-width:768px){ .related-grid{grid-template-columns:repeat(2,1fr);} .footer-grid{flex-direction:row;flex-wrap:wrap;} .footer-brand{flex:1 1 100%;} .footer-col{flex:1 1 160px;} .news-row-image{width:110px;height:110px;} } @media (min-width:900px){ .top-zone-inner{flex-direction:row;align-items:stretch;} .top-zone-main{flex:1 1 60%;min-width:0;padding:36px 44px 36px 0;border-right:1px solid var(--line);} .top-zone-watch{flex:1 1 38%;max-width:400px;padding:36px 0 36px 40px;border-top:none;} .subscribe-grid{flex-direction:row;align-items:center;justify-content:space-between;} .subscribe-copy{flex:1 1 46%;} .subscribe-embed-wrap{flex:1 1 40%;max-width:420px;} .related-grid{grid-template-columns:repeat(3,1fr);} .video-grid{grid-template-columns:repeat(3,1fr);} .footer-brand{flex:1 1 260px;} } @media (min-width:1200px){ .lead-story-headline{font-size:2.75rem;} } /* ---------- dedicated mobile pass ---------- Not just "does it fit" — tighter rhythm between modules, denser video cards, a smaller subscribe embed, and a leaner footer so the page reads as designed-for-the-phone rather than a shrunk desktop layout. */ @media (max-width:599px){ body{font-size:16px;} .wrap,.wrap-wide,.site-header-inner{padding-left:18px;padding-right:18px;} .top-zone-main{padding:22px 0 20px;} .lead-story-headline{line-height:1.1;} .lead-story-image{margin-left:0;margin-right:0;max-height:280px;} .lead-story-meta{margin-bottom:0;} .top-zone-watch{padding:18px 0 22px;} .watch-stack .video-card{padding:14px;} .video-card-desc{display:none;} .supporting-stack{padding-top:18px;margin-top:18px;gap:16px;} .section-head{padding-bottom:14px;margin-bottom:18px;} .related-grid{grid-template-columns:1fr;gap:22px;} .paywall{padding:30px 20px;} .paywall-benefits li{max-width:none;} .newsletter{padding:26px 20px;} .share-row{gap:8px;} .video-grid{grid-template-columns:1fr;gap:20px;} .video-card--compact .video-card-media{max-height:200px;} .news-zone{padding:26px 0 6px;} .news-row{padding:16px 0;} .news-row-image{width:72px;height:72px;} .news-row--featured{flex-direction:column;} .news-row--featured .news-row-image{width:100%;height:200px;} .news-row--featured h3{font-size:1.22rem;} .news-row--compact{padding:11px 0;} .podcast-zone,.livestream-zone{padding:26px 0 30px;} .top-stories-zone{padding:26px 0 30px;} .top-story-featured{flex-direction:column;gap:14px;} .top-story-featured-image{width:100%;aspect-ratio:16/9;} .top-story-featured h3{font-size:1.28rem;} .subscribe-module{padding:40px 0;} .subscribe-embed-wrap{padding:14px;} .subscribe-embed iframe{height:320px;} .mission-section{padding:32px 0;} .sponsors-zone{padding:24px 0 30px;} .sponsors-row{gap:20px 24px;} footer.site-footer{padding-top:36px;} .footer-grid{gap:26px;padding-bottom:26px;} .footer-col{gap:7px;} .footer-legal{padding:14px 0 26px;} } /* ============ PIPELINE TRACKER ============ Consumer-grade, not a clinical database: card grid (never a table), one phase badge per drug, hierarchy via spacing and section containment rather than bordered boxes around everything. Reuses the site's existing .kicker/.headline/.dek/.wrap-wide vocabulary — this is meant to read as the same publication, not a bolted-on tool. */ /* Blanket safety net, not a per-class patch: every string on these pages — drug names, sponsor names, facility names, trial titles — is sourced from ClinicalTrials.gov and can be arbitrarily long or, in one real case found during testing, a long comma-separated list with no spaces to wrap on ("Endocrine,Metabolic,Neuropsychiatric,Muscle,...") which forced a 320px page to render 570px wide. overflow-wrap and word-break are both inherited properties, so setting them once on every top-level pipeline section covers all text underneath — headings, card titles, everything — without hunting down every individual class that might someday receive a pathologically long API string. */ .pipeline-hero,.pipeline-browse,.pipeline-detail-body,.pipeline-drug-summary, .pipeline-trial-header,.pipeline-trial-locations,.pipeline-find-trial{ overflow-wrap:break-word;word-break:break-word; } .pipeline-hero{padding:40px 0 8px;} .pipeline-hero .dek{max-width:60ch;} .pipeline-hero-hint{font-size:.86rem;color:var(--ink-soft);max-width:60ch;margin:2px 0 0;} .pipeline-browse{padding:28px 0 8px;} /* ---------- search + filters ---------- */ .pipeline-search-row{display:flex;gap:10px;} .pipeline-search-row input[type="search"]{ flex:1;min-width:0;padding:13px 16px;border:1px solid var(--line);border-radius:6px; font-family:var(--font-body);font-size:.95rem;background:var(--paper);color:var(--ink); } .pipeline-search-row input[type="search"]:focus-visible{outline:2px solid var(--magenta);outline-offset:1px;} .pipeline-search-submit{ flex:none;padding:13px 20px;border:none;border-radius:6px;background:var(--ink);color:var(--paper); font-family:var(--font-body);font-weight:600;font-size:.9rem;cursor:pointer; } .pipeline-search-submit:hover{background:var(--magenta-deep);} .pipeline-visually-hidden{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ---------- primary filters (always visible — the 3 patient questions that matter most: condition, route, added-to-GLP-1) ---------- */ .pipeline-primary-filters{display:flex;flex-direction:column;gap:18px;margin-top:18px;} .pipeline-primary-filter-field{display:flex;flex-direction:column;gap:8px;} .pipeline-primary-filter-label{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;color:var(--ink-soft);font-weight:600; } .pipeline-segmented-control{border:none;margin:0;padding:0;} .pipeline-segmented-control legend{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;color:var(--ink-soft);font-weight:600; padding:0 0 8px; } .pipeline-segment-row{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; } .pipeline-segment{ position:relative;display:flex;align-items:center;justify-content:center;text-align:center; padding:13px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:.86rem; min-height:46px; } .pipeline-segment input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;} .pipeline-segment.is-selected{border-color:var(--ink);background:var(--ink);color:var(--paper);font-weight:600;} .pipeline-segment:has(input:focus-visible){outline:2px solid var(--magenta);outline-offset:2px;} .pipeline-therapy-hint{font-size:.76rem;color:var(--ink-faint);line-height:1.5;margin:8px 0 0;} .pipeline-match-mode{border:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line);} .pipeline-match-mode legend{font-size:.72rem;color:var(--ink-faint);padding:0 0 6px;} .pipeline-match-mode label{display:flex;align-items:center;gap:8px;font-size:.84rem;padding:4px 0;} /* ---------- active filter chips ---------- */ .pipeline-active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;} .pipeline-filter-chip{ display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px; background:var(--magenta-wash);color:var(--magenta-deep);font-size:.8rem;font-weight:600;text-decoration:none; } .pipeline-filter-chip span{font-weight:400;opacity:.7;} .pipeline-clear-all{font-size:.8rem;color:var(--ink-faint);margin-left:4px;} .pipeline-search-trials-submit{width:100%;text-align:center;margin-top:16px;} .pipeline-filter-sheet{margin-top:14px;border:1px solid var(--line);border-radius:8px;background:var(--paper-raised);} .pipeline-filter-sheet summary{ list-style:none;cursor:pointer;padding:13px 16px;font-family:var(--font-mono);font-size:.78rem; letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:8px; } .pipeline-filter-sheet summary::-webkit-details-marker{display:none;} .pipeline-filter-sheet summary::before{content:"⚙";font-size:.9rem;} .pipeline-filter-count{background:var(--magenta);color:#fff;border-radius:99px;padding:1px 8px;font-size:.66rem;text-transform:none;letter-spacing:0;} .pipeline-filter-grid{ display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:4px 16px 16px; } .pipeline-filter-grid label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--ink-soft);font-family:var(--font-mono);min-width:0;} .pipeline-filter-grid select{ width:100%;max-width:100%;min-width:0;box-sizing:border-box; padding:10px 12px;border:1px solid var(--line);border-radius:5px;font-family:var(--font-body); font-size:.88rem;background:var(--paper);color:var(--ink); /* A