@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,600&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Host+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* Article (single post) styles — from React ai-newsroom.css, scoped to .newsroom. @font-face stripped; fonts via Google import above. */ /* ---------- Design tokens ---------- */ .newsroom { --pink: #FF1F5B; --pink-2: #E0366D; --pink-3: #B02068; --pink-soft: #FFE8EE; --pink-wash: #FFF4F7; --pink-glow: rgba(255, 31, 91, .15); --orange: #F4A731; --violet: #7B4BC8; --teal: #2BB5BE; --green: #25C26B; --blue: #5078FF; --ink: #0E0A0C; --ink-2: #4a3f42; --ink-3: #8a7f82; --ink-4: #BFB6B9; --nr-bg: #FBFAF8; --nr-bg-2: #F4F1ED; --nr-bg-3: #EBE7E1; --line: rgba(14, 10, 12, 0.08); --line-2: rgba(14, 10, 12, 0.14); --sans: "Geist", -apple-system, system-ui, "Segoe UI", sans-serif; --serif: "Fraunces", "Times New Roman", serif; --mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; --maxw: 1280px; --col: 720px; --shadow-sm: 0 1px 2px rgba(14,10,12,.04), 0 1px 1px rgba(14,10,12,.03); --shadow-md: 0 6px 20px -8px rgba(14,10,12,.18), 0 2px 6px rgba(14,10,12,.06); --shadow-lg: 0 30px 60px -20px rgba(14,10,12,.30), 0 8px 24px -12px rgba(14,10,12,.18); --shadow-xl: 0 50px 100px -30px rgba(14,10,12,.35), 0 20px 40px -20px rgba(14,10,12,.20); font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; } .newsroom img { display: block; max-width: 100%; } .newsroom a { color: inherit; text-decoration: none; } .newsroom button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .newsroom .it { font-family: var(--serif); font-style: italic; font-weight: 400; } .newsroom .nr-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; width: 100%; } /* ---------- Buttons ---------- */ .newsroom .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1; padding: 14px 22px; border-radius: 999px; transition: transform .4s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s, border-color .25s; white-space: nowrap; } .newsroom .btn .arrow { display: inline-block; transition: transform .35s; } .newsroom .btn:hover .arrow { transform: translateX(3px); } .newsroom .btn-pink { background: var(--pink); color: #fff; box-shadow: 0 8px 24px -8px rgba(255,31,91,.55); } .newsroom .btn-pink:hover { background: var(--pink-2); box-shadow: 0 14px 36px -10px rgba(255,31,91,.70); transform: translateY(-1px); } /* ---------- Page header ---------- */ .newsroom .insights-head { position: relative; padding: 72px 0 8px; overflow: hidden; background: radial-gradient(circle at 50% -10%, var(--pink-soft) 0%, transparent 55%), var(--nr-bg); } .newsroom .insights-head .dots-bg { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(14,10,12,.10) 1px, transparent 0); background-size: 32px 32px; mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); opacity: .5; pointer-events: none; } .newsroom .insights-head .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; z-index: 0; } .newsroom .insights-head .blob.b1 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,31,91,.30), transparent 70%); top: -160px; left: 8%; animation: nr-drift1 14s ease-in-out infinite; } .newsroom .insights-head .blob.b2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(123,75,200,.22), transparent 70%); top: -120px; right: 6%; animation: nr-drift2 18s ease-in-out infinite; } @keyframes nr-drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } } @keyframes nr-drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px,40px); } } .newsroom .insights-head .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; text-align: center; } .newsroom .insights-head .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); padding: 7px 14px; border-radius: 999px; background: var(--pink-soft); margin-bottom: 24px; } .newsroom .insights-head .kicker .pin { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); animation: nr-pulse 2s infinite; } @keyframes nr-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.6); } } .newsroom .insights-head h1 { font-family: var(--sans); font-weight: 600; font-size: clamp(52px,8vw,108px); line-height: .96; letter-spacing: -0.04em; margin: 0 auto; } .newsroom .insights-head h1 .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pink); letter-spacing: -0.01em; } .newsroom .insights-head h1 .w, .newsroom .insights-head .tagline .w { display: inline-block; } .newsroom .insights-head .tagline { margin: 22px auto 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px,3vw,30px); color: var(--ink); letter-spacing: -0.01em; } .newsroom .insights-head .lede { margin: 18px auto 0; max-width: 1200px; width: 100%; font-size: 18px; line-height: 1.6; color: var(--ink-2); } /* ---------- Filter / toolbar ---------- */ .newsroom .toolbar { position: sticky; top: 100px; z-index: 30; background: rgba(251,250,248,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .newsroom .toolbar .row { max-width: var(--maxw); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .newsroom .filters { display: flex; gap: 6px; flex-wrap: wrap; } .newsroom .filters button { padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); background: #fff; transition: all .25s; white-space: nowrap; } /* remove the mobile blue tap-highlight + text-selection box on the filter buttons, featured cards, read/nav buttons, and thumbnails (they act as buttons/links) */ .newsroom .filters button, .newsroom .card, .newsroom .cslide .read, .newsroom .cthumb, .newsroom .pager button, .newsroom .nav { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .newsroom .filters button:hover { border-color: var(--line-2); color: var(--ink); transform: translateY(-1px); } .newsroom .filters button.active { background: var(--ink); color: #fff; border-color: var(--ink); } .newsroom .filters .count { font-family: var(--mono); font-size: 10px; opacity: .55; margin-left: 5px; } .newsroom .searchbox { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-3); font-size: 13px; min-width: 240px; transition: border-color .25s, box-shadow .25s; } .newsroom .searchbox:focus-within { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-glow); } .newsroom .searchbox svg { width: 14px; height: 14px; flex-shrink: 0; } .newsroom .searchbox input { border: 0; outline: 0; background: none; font: inherit; color: var(--ink); width: 100%; } .newsroom .searchbox input::placeholder { color: var(--ink-3); } @media (max-width: 720px) { .newsroom .searchbox { display: none; } } /* ---------- Section scaffold ---------- */ .newsroom .nr-section { max-width: var(--maxw); margin: 0 auto; padding: 0 32px 120px; } .newsroom .sec-label { display: flex; align-items: center; gap: 12px; font-size: 12px; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 56px 0 22px; } .newsroom .sec-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ============================================================== FEATURED — auto-rotating hero carousel (16:9) ============================================================== */ .newsroom .carousel { position: relative; width: 100%; border-radius: 26px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-lg); border: 1px solid var(--line); isolation: isolate; } .newsroom .carousel .stage { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 620px; } .newsroom .cslide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; visibility: hidden; transition: opacity .9s ease; color: #fff; } .newsroom .cslide.on { opacity: 1; visibility: visible; } .newsroom .cslide .cimg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .newsroom .cslide .cimg img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; min-width: 100% !important; min-height: 100% !important; transform: scale(1.05); transition: transform 7s linear; } .newsroom .cslide.on .cimg img { transform: scale(1.15); } .newsroom .cslide .grad { position: absolute; inset: 0; background: linear-gradient(75deg, rgba(14,10,12,.86) 0%, rgba(14,10,12,.55) 38%, rgba(14,10,12,.05) 70%), linear-gradient(0deg, rgba(14,10,12,.6), transparent 50%); } .newsroom .cslide .ctext { position: absolute; left: 0; bottom: 0; padding: clamp(28px,4vw,56px); max-width: 60%; z-index: 2; } .newsroom .cslide .pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(255,31,91,.9); padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; backdrop-filter: blur(4px); } .newsroom .cslide .pill i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; } .newsroom .cslide h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(28px,3.6vw,52px); line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; margin-bottom: 16px; text-shadow: 0 2px 30px rgba(0,0,0,.3); } .newsroom .cslide h2 .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: #fff; } .newsroom .cslide p { font-size: clamp(15px,1.3vw,18px); line-height: 1.55; color: rgba(255,255,255,.8); max-width: 48ch; text-wrap: pretty; margin-bottom: 22px; } .newsroom .cslide .cmeta { display: flex; gap: 10px; font-size: 12px; font-family: var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.65); text-transform: uppercase; margin-bottom: 20px; } .newsroom .cslide .read { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: 11px 20px; border-radius: 999px; backdrop-filter: blur(6px); transition: background .3s, gap .3s; } .newsroom .cslide .read:hover { background: var(--pink); border-color: var(--pink); gap: 14px; } /* animate text in when active */ .newsroom .cslide.on .pill, .newsroom .cslide.on h2, .newsroom .cslide.on p, .newsroom .cslide.on .cmeta, .newsroom .cslide.on .read { animation: nr-slideUp .8s cubic-bezier(.2,.8,.2,1) backwards; } .newsroom .cslide.on h2 { animation-delay: .1s; } .newsroom .cslide.on p { animation-delay: .18s; } .newsroom .cslide.on .cmeta { animation-delay: .26s; } .newsroom .cslide.on .read { animation-delay: .34s; } @keyframes nr-slideUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* thumbnail nav rail */ .newsroom .crail { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; background: var(--ink); border-top: 1px solid rgba(255,255,255,.1); } .newsroom .cthumb { position: relative; text-align: left; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; color: rgba(255,255,255,.55); border-right: 1px solid rgba(255,255,255,.08); overflow: hidden; transition: background .3s, color .3s; } .newsroom .cthumb:last-child { border-right: 0; } .newsroom .cthumb:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.85); } .newsroom .cthumb.on { color: #fff; background: rgba(255,255,255,.05); } .newsroom .cthumb .ci { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); } .newsroom .cthumb .ct { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .newsroom .cthumb .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,.12); } .newsroom .cthumb .prog i { display: block; height: 100%; width: 0; background: var(--pink); box-shadow: 0 0 10px var(--pink); } .newsroom .cthumb.on .prog i { animation: nr-fill 6s linear forwards; } @keyframes nr-fill { from { width: 0; } to { width: 100%; } } .newsroom .carousel.paused .cthumb.on .prog i { animation-play-state: paused; } /* Locked = a category filter is active: carousel is fixed on that slide, no rotation, so hide the fill progress and disable rail navigation. */ .newsroom .carousel.locked .cthumb .prog { display: none; } .newsroom .carousel.locked .crail { pointer-events: none; } @media (max-width: 720px) { .newsroom .cslide .ctext { max-width: 100%; } .newsroom .cslide .grad { background: linear-gradient(0deg, rgba(14,10,12,.92) 8%, rgba(14,10,12,.3) 60%, transparent); } .newsroom .crail .ct { display: none; } .newsroom .cthumb { padding: 14px; } } /* Mobile: the featured card is landscape 16:9 (only ~318px tall) — too short for the title + byline + button, so they crammed/overlapped. Give it a taller ratio, shrink the title, clamp it to 3 lines, hide the excerpt, and tighten spacing so it reads cleanly. */ @media (max-width: 720px) { .newsroom .carousel .stage { aspect-ratio: 4/3 !important; min-height: 380px !important; max-height: none !important; } .newsroom .cslide .ctext { padding: 22px 20px !important; } .newsroom .cslide .pill { margin-bottom: 12px; } .newsroom .cslide h2 { font-size: 21px !important; line-height: 1.14; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .newsroom .cslide p { display: none; } .newsroom .cslide .cmeta { margin-bottom: 14px; flex-wrap: wrap; } } /* ---------- Article grid (16:9 cards) ---------- */ .newsroom .grid-articles { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 4px; } .newsroom .card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .4s; transform-style: preserve-3d; will-change: transform; } .newsroom .card:hover { box-shadow: var(--shadow-lg); border-color: transparent; } .newsroom .card .thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; background: linear-gradient(150deg, var(--pink-soft) 0%, var(--nr-bg-2) 55%); } .newsroom .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); } .newsroom .card:hover .thumb img { transform: scale(1.07); } /* pink wash + light sweep on hover */ .newsroom .card .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(255,31,91,.28)); opacity: 0; transition: opacity .45s; pointer-events: none; } .newsroom .card:hover .thumb::after { opacity: 1; } .newsroom .card .thumb .sheen { position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; } .newsroom .card:hover .thumb .sheen { animation: nr-sweep .9s ease forwards; } @keyframes nr-sweep { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } } .newsroom .card .thumb .kind { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: #fff; background: rgba(14,10,12,.6); backdrop-filter: blur(6px); padding: 6px 10px; border-radius: 999px; text-transform: uppercase; } .newsroom .card .body { padding: 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; } .newsroom .card .meta { display: flex; gap: 10px; font-size: 11px; font-family: var(--mono); letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; } .newsroom .card .meta .cat { color: var(--pink); font-weight: 500; } .newsroom .card h3 { font-family: var(--sans); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; } .newsroom .card h3 .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pink); } .newsroom .card p { font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; } .newsroom .card .card-read { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--pink); } .newsroom .card .card-read .arrow { transition: transform .3s; } .newsroom .card:hover .card-read .arrow { transform: translateX(4px); } /* filtering */ .newsroom .card.hide { display: none; } .newsroom .card.enter { opacity: 0; transform: translateY(16px) scale(.97); } @media (max-width: 900px) { .newsroom .grid-articles { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px) { .newsroom .grid-articles { grid-template-columns: 1fr; } } /* ---------- Pagination ---------- */ .newsroom .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 34px 0 0; } .newsroom .pagination a, .newsroom .pagination span, .newsroom .pagination button { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); background: #fff; transition: all .25s; } .newsroom .pagination button { font-family: inherit; cursor: pointer; } .newsroom .pagination a:hover, .newsroom .pagination button:not(:disabled):hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); } .newsroom .pagination button:disabled { opacity: .45; cursor: default; } .newsroom .pagination .cur { background: var(--ink); color: #fff; border-color: var(--ink); } .newsroom .pagination .dots { border: 0; background: none; color: var(--ink-3); } .newsroom .pagination .nav { font-weight: 600; gap: 6px; } .newsroom .pagination .nav .arrow { transition: transform .3s; } .newsroom .pagination .nav:hover .arrow { transform: translateX(3px); } /* ---------- Learning CTA (Full Width) ---------- */ .newsroom .learning-cta { position: relative; width: 100%; background: #F5EEDD; padding: 56px 32px 62px; text-align: center; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .newsroom .learning-inner { position: relative; z-index: 2; max-width: 720px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; } .newsroom .learning-cta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 56px); color: #0B1F3D; line-height: 1.05; margin: 0; } .newsroom .learning-cta p { font-family: var(--sans); font-weight: 400; font-size: clamp(15px, 2vw, 17px); color: #0B1F3D; line-height: 1.55; margin: 0; } .newsroom .learning-form { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; flex-wrap: wrap; } .newsroom .learning-form input { width: 201px; height: 60px; padding: 16px 28px; border-radius: 999px; border: 2px solid #fff; background: transparent; font-family: var(--sans); font-weight: 600; font-size: 15px; color: #0B1F3D; outline: none; transition: border-color 0.25s; text-align: center; } .newsroom .learning-form input::placeholder { color: #0B1F3D; } .newsroom .learning-form input:focus { border-color: var(--pink); background: #fff; } .newsroom .learning-form button { width: 132px; height: 60px; padding: 16px 28px; background: var(--pink); border-radius: 999px; color: #fff; font-family: var(--sans); font-weight: 600; font-size: 15px; border: 2px solid transparent; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s; } .newsroom .learning-form button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(255,31,91,.55); } .newsroom .learning-grad { position: absolute; width: 800px; height: 800px; right: 0; top: -235px; background: radial-gradient(ellipse 70.71% 70.71% at 50% 50%, rgba(255, 31, 91, 0.06) 0%, rgba(255, 31, 91, 0) 60%); border-radius: 50%; pointer-events: none; z-index: 1; transform: translateX(20%); } /* ---------- Reveal ---------- */ .newsroom .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } .newsroom .reveal.in { opacity: 1; transform: none; } .newsroom .reveal.d1 { transition-delay: .08s; } .newsroom .reveal.d2 { transition-delay: .16s; } .newsroom .reveal.d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .newsroom .reveal { opacity: 1; transform: none; } .newsroom * { animation: none !important; } } /* ---------- No results ---------- */ .newsroom .no-results { grid-column: 1 / -1; text-align: center; color: var(--ink-3); font-size: 16px; padding: 60px 0; } /* Grid loading: dim current cards while the next page fetches */ .newsroom .grid-articles.is-loading { opacity: .5; pointer-events: none; transition: opacity .2s ease; } /* Skeleton cards (first load only) */ @keyframes nr-skel { 0%, 100% { opacity: .55; } 50% { opacity: .9; } } .newsroom .nr-skeleton { pointer-events: none; animation: nr-skel 1.3s ease-in-out infinite; } .newsroom .nr-skeleton .thumb { background: var(--nr-bg-3); } .newsroom .nr-skeleton .body .cat, .newsroom .nr-skeleton .body h3, .newsroom .nr-skeleton .body p { background: var(--nr-bg-3); border-radius: 6px; color: transparent; } .newsroom .nr-skeleton .body h3 { min-height: 22px; } .newsroom .nr-skeleton .body p { min-height: 40px; } /* ---------- Spacing bottom ---------- */ .newsroom .bottom-spacer { padding-bottom: 80px; } /* ============================================================== FORBES FEATURE — full article view (shown on the "Forbes" filter) ============================================================== */ .newsroom .fa { display: block; } /* Header */ .newsroom .fa-head { background: radial-gradient(ellipse 60% 190% at 50% -10%, var(--pink-soft) 0%, rgba(255,232,238,0) 55%), var(--nr-bg); border-bottom: 1px solid var(--line); } .newsroom .fa-head-inner { max-width: 760px; margin: 0 auto; padding: 56px 32px 44px; text-align: center; } .newsroom .fa-crumb { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .newsroom .fa-crumb span { opacity: .4; margin: 0 6px; } .newsroom .fa-title { margin: 18px auto 0; font-family: var(--sans); font-weight: 600; font-size: clamp(38px,5.4vw,72px); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; } .newsroom .fa-title .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pink); } .newsroom .fa-sub { margin: 22px auto 0; max-width: 620px; font-size: clamp(17px,2vw,21px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .newsroom .fa-byline { margin: 28px auto 0; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } .newsroom .fa-byline-author { display: inline-flex; align-items: center; gap: 10px; } .newsroom .fa-byline-author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-sm); } .newsroom .fa-byline-author div { display: flex; flex-direction: column; text-align: left; } .newsroom .fa-byline-author strong { font-size: 14px; font-weight: 600; color: var(--ink); } .newsroom .fa-byline-author span { font-size: 12px; color: var(--ink-3); } .newsroom .fa-byline-div { width: 1px; height: 30px; background: var(--line-2); } .newsroom .fa-byline-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); } .newsroom .fa-byline-meta svg { width: 14px; height: 14px; } /* Body layout: share | column | toc */ .newsroom .fa-body { max-width: 1180px; margin: 0 auto; padding: 48px 32px 0; display: grid; grid-template-columns: 52px minmax(0,1fr) 200px; gap: 28px; align-items: start; } .newsroom .fa-share { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .newsroom .fa-share-label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); writing-mode: vertical-rl; margin-bottom: 6px; } .newsroom .fa-share button { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; transition: all .25s; } .newsroom .fa-share button:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .newsroom .fa-share button svg { width: 16px; height: 16px; } .newsroom .fa-col { max-width: 720px; } .newsroom .fa-lead { font-size: clamp(18px,1.4vw,22px); line-height: 1.6; color: var(--ink); } .newsroom .fa-lead .it { font-family: var(--serif); font-style: italic; color: var(--ink); } .newsroom .fa-drop { float: left; font-family: var(--serif); font-weight: 400; font-size: 92px; line-height: .8; color: var(--pink-2); margin: 6px 12px 0 0; } .newsroom .fa-col p strong { font-weight: 600; color: var(--ink); } .newsroom .fa-p { margin-top: 22px; font-size: 19px; line-height: 1.72; color: var(--ink-2); text-wrap: pretty; } .newsroom .fa-dots { display: flex; gap: 8px; justify-content: center; margin: 40px 0; } .newsroom .fa-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); } .newsroom .fa-shift { margin: 48px 0 4px; font-family: var(--sans); font-weight: 600; font-size: clamp(30px,3.4vw,40px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); scroll-margin-top: 120px; } .newsroom .fa-shift .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pink); } .newsroom .fa-shift-k { display: block; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); margin-bottom: 18px; } /* Quote */ .newsroom .fa-quote { margin: 34px 0; padding: 6px 0 6px 28px; border-left: 3px solid var(--pink); display: flex; flex-direction: column; gap: 14px; } .newsroom .fa-quote span { font-family: var(--serif); font-style: italic; font-size: clamp(22px,2.4vw,30px); line-height: 1.32; color: var(--ink); } .newsroom .fa-quote cite { font-style: normal; font-size: 14px; color: var(--ink-3); } .newsroom .fa-quote cite strong { color: var(--ink); font-weight: 600; } /* Stat strip */ .newsroom .fa-stats { margin: 38px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .newsroom .fa-stat { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; } .newsroom .fa-stat b { display: block; font-weight: 600; font-size: 44px; line-height: 1; color: var(--pink); letter-spacing: -0.02em; } .newsroom .fa-stat b span { font-size: 24px; } .newsroom .fa-stat > span { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); } @media (max-width: 620px) { .newsroom .fa-stats { grid-template-columns: 1fr; } } /* Named list */ .newsroom .fa-list { margin: 22px 0; display: flex; flex-direction: column; gap: 14px; } .newsroom .fa-list li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.6; color: var(--ink-2); } .newsroom .fa-list li strong { color: var(--ink); font-weight: 600; } .newsroom .fa-bullet { position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); } /* Key takeaways */ .newsroom .fa-takeaways { position: relative; overflow: hidden; margin: 44px 0; padding: 32px 34px; border-radius: 22px; background: linear-gradient(172deg, rgba(254,251,245,.9) 0%, #EAE4D6 100%); } .newsroom .fa-take-eye { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); margin-bottom: 18px; } .newsroom .fa-takeaways ol { display: flex; flex-direction: column; gap: 16px; list-style: none; } .newsroom .fa-takeaways li { display: flex; gap: 14px; align-items: flex-start; } .newsroom .fa-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--pink); color: var(--pink); font-family: var(--mono); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .newsroom .fa-takeaways li p { font-size: 17px; line-height: 1.5; color: var(--ink); } .newsroom .fa-takeaways li p strong { font-weight: 600; } /* Author card */ .newsroom .fa-author { margin: 40px 0 50px; display: flex; gap: 20px; align-items: center; padding: 28px; background: var(--nr-bg-2); border: 1px solid var(--line); border-radius: 20px; } /* Higher specificity + margin:0 so the round bio avatar beats `.fa-col img` (the article-body image rule, which otherwise forces a 14px square). */ .newsroom .fa-col .fa-author img { width: 72px; height: 72px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid #fff; box-shadow: 0 1px 1px rgba(14,10,12,.03), 0 1px 2px rgba(14,10,12,.04); flex-shrink: 0; margin: 0; } .newsroom .fa-author strong { display: block; font-size: 17px; font-weight: 600; color: var(--ink); } .newsroom .fa-author-role { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--pink); } .newsroom .fa-author p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } /* TOC & Sidebar */ .newsroom .fa-sidebar { position: sticky; top: 200px; display: flex; flex-direction: column; gap: 30px; } .newsroom .fa-toc { display: flex; flex-direction: column; gap: 9px; padding-left: 22px; } .newsroom .fa-toc-eye { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .newsroom .fa-toc a { padding-left: 14px; border-left: 2px solid var(--line); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-3); transition: color .25s, border-color .25s; } .newsroom .fa-toc a:hover { color: var(--ink); border-color: var(--ink-3); } /* Bottom Newsroom Section */ .newsroom .fa-bottom-newsroom { background: #FEFBF5; padding: 100px 32px 140px; position: relative; } .newsroom .fa-bn-inner { max-width: var(--maxw, 1280px); margin: 0 auto; position: relative; } .newsroom .fa-bn-title { font-family: var(--serif); font-size: clamp(40px, 5vw, 68px); color: var(--ink); font-weight: 600; margin-bottom: 48px; text-align: left; } .newsroom .fa-bn-title .it { font-style: italic; color: var(--pink); } .newsroom .fa-bn-grid { display: flex; gap: 24px; align-items: stretch; position: relative; } .newsroom .fa-bn-card { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; text-decoration: none; position: relative; } .newsroom .fa-bn-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .newsroom .fa-bn-img { aspect-ratio: 16/9; position: relative; background: #EAE4D6; overflow: hidden; } .newsroom .fa-bn-img img { width: 100%; height: 100%; object-fit: cover; } .newsroom .fa-bn-badge { position: absolute; top: 16px; right: 16px; font-family: var(--sans); font-size: 11px; font-weight: 600; color: #fff; padding: 6px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; } .newsroom .fa-bn-badge.forbes { background: rgba(14,10,12,.85); backdrop-filter: blur(4px); } .newsroom .fa-bn-badge.pink { background: rgba(255,31,91,.9); backdrop-filter: blur(4px); } .newsroom .fa-bn-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .newsroom .fa-bn-meta { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 12px; text-transform: uppercase; } .newsroom .fa-bn-meta span { color: var(--pink); } .newsroom .fa-bn-card h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 24px; } .newsroom .fa-bn-read { margin-top: auto; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--pink); } .newsroom .fa-bn-next { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--pink); transition: transform .2s; } .newsroom .fa-bn-next:hover { transform: translateY(-50%) scale(1.1); } @media (max-width: 900px) { .newsroom .fa-bn-grid { flex-direction: column; } .newsroom .fa-bn-next { display: none; } } /* Interactive: Loop vs Lead */ .newsroom .fa-compare { margin: 34px 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-md); overflow: hidden; } .newsroom .fa-compare-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 26px; border-bottom: 1px solid var(--line); } .newsroom .fa-compare-eye { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .newsroom .fa-compare-eye strong { color: var(--ink); font-weight: 600; } .newsroom .fa-toggle { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--nr-bg-2); } .newsroom .fa-toggle-pill { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: 999px; background: var(--pink); box-shadow: 0 6px 14px -6px rgba(255,31,91,.6); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .newsroom .fa-toggle button { position: relative; z-index: 1; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-3); transition: color .3s; white-space: nowrap; } .newsroom .fa-toggle button.on { color: #fff; } .newsroom .fa-compare-body { display: grid; grid-template-columns: 1fr 220px; gap: 24px; padding: 26px; } .newsroom .fa-compare-copy h3 { font-family: var(--sans); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); } .newsroom .fa-compare-copy h3 .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pink); } .newsroom .fa-compare-copy p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-2); } .newsroom .fa-compare-badge { display: inline-block; margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--pink); } .newsroom .fa-compare-vis { position: relative; border-radius: 16px; background: linear-gradient(160deg, var(--pink-soft) 0%, #fff 100%); border: 1px solid var(--line); min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; } .newsroom .fa-vis-tag { position: absolute; top: 12px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .newsroom .fa-vis-node { display: flex; align-items: center; justify-content: center; border-radius: 18px; font-weight: 700; color: #fff; transition: all .4s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow-md); } .newsroom .fa-vis-person { width: 54px; height: 54px; font-size: 26px; background: var(--ink); order: 1; } .newsroom .fa-vis-ai { width: 46px; height: 46px; font-size: 18px; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-3) 100%); opacity: .85; order: 2; } .newsroom .fa-vis-node.is-front { order: 0 !important; transform: scale(1.22); opacity: 1; box-shadow: var(--shadow-lg); } @media (max-width: 620px) { .newsroom .fa-compare-body { grid-template-columns: 1fr; } } /* Hero figure */ .newsroom .fa-hero { max-width: 1180px; margin: 8px auto 0; padding: 0 32px 70px; } .newsroom .fa-hero-frame { position: relative; border-radius: 24px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-lg); aspect-ratio: 16/9; } .newsroom .fa-hero-frame img { width: 100%; height: 100%; object-fit: cover; } .newsroom .fa-hero-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,10,12,0) 40%, rgba(14,10,12,.6) 100%); } .newsroom .fa-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px clamp(24px,4vw,40px); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.9); z-index: 2; } .newsroom .fa-hero-cap strong { color: #fff; font-weight: 700; } .newsroom .fa-marker { position: absolute; z-index: 3; transform: translate(-50%,-50%); } .newsroom .fa-marker i { display: block; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,31,91,.7); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(14,10,12,.4); cursor: pointer; animation: nr-pulse 2s infinite; } .newsroom .fa-marker-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px); white-space: nowrap; background: #fff; color: var(--ink); font-size: 12px; font-weight: 500; padding: 8px 12px; border-radius: 10px; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; } .newsroom .fa-marker:hover .fa-marker-tip { opacity: 1; transform: translateX(-50%) translateY(0); } .newsroom .fa-hero figcaption { margin-top: 12px; text-align: right; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); } /* Responsive: collapse share rail + TOC */ @media (max-width: 1000px) { .newsroom .fa-body { grid-template-columns: 1fr; gap: 0; } .newsroom .fa-share { flex-direction: row; position: static; justify-content: center; margin-bottom: 24px; } .newsroom .fa-share-label { writing-mode: horizontal-tb; margin: 0 4px 0 0; } .newsroom .fa-col { max-width: 720px; margin: 0 auto; } .newsroom .fa-toc { position: static; flex-direction: row; flex-wrap: wrap; padding-left: 0; margin: 28px auto 0; max-width: 720px; } .newsroom .fa-toc a { border-left: 0; padding-left: 0; } } /* ============================================================== ARTICLE DETAIL — single WordPress post page (/ai-newsroom/[slug]) ============================================================== */ .newsroom .nr-article { max-width: 760px; margin: 0 auto; padding: 48px 24px 100px; } .newsroom .nr-article-head { display: flex; flex-direction: column; gap: 12px; } .newsroom .nr-back { align-self: flex-start; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); transition: color .25s; } .newsroom .nr-back:hover { color: var(--pink); } .newsroom .nr-art-cat { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); } .newsroom .nr-article-head h1 { font-family: var(--sans); font-weight: 600; font-size: clamp(32px,5vw,52px); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; } .newsroom .nr-art-meta { display: flex; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); } .newsroom .nr-art-hero { margin: 32px 0; border-radius: 20px; overflow: hidden; background: var(--nr-bg-2); box-shadow: var(--shadow-md); } .newsroom .nr-art-hero img { display: block; width: 100%; height: auto; } /* Rendered WordPress content typography */ .newsroom .nr-article-body { font-size: 18px; line-height: 1.7; color: var(--ink-2); } .newsroom .nr-article-body > *:first-child { margin-top: 0; } .newsroom .nr-article-body h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(24px,3vw,32px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 44px 0 14px; } .newsroom .nr-article-body h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(20px,2.4vw,24px); line-height: 1.25; color: var(--ink); margin: 32px 0 10px; } .newsroom .nr-article-body h4 { font-family: var(--sans); font-weight: 600; font-size: 18px; color: var(--ink); margin: 26px 0 8px; } .newsroom .nr-article-body p { margin: 18px 0; } .newsroom .nr-article-body a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; } .newsroom .nr-article-body strong { color: var(--ink); font-weight: 600; } .newsroom .nr-article-body ul, .newsroom .nr-article-body ol { margin: 18px 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; } .newsroom .nr-article-body li { line-height: 1.6; } .newsroom .nr-article-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 26px 0; } .newsroom .nr-article-body figure { margin: 26px 0; } .newsroom .nr-article-body figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3); text-align: center; } .newsroom .nr-article-body blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--pink); font-family: var(--serif); font-style: italic; font-size: clamp(20px,2.4vw,26px); line-height: 1.4; color: var(--ink); } .newsroom .nr-article-body table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15px; } .newsroom .nr-article-body th, .newsroom .nr-article-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; } .newsroom .nr-article-body th { background: var(--nr-bg-2); font-weight: 600; color: var(--ink); } .newsroom .nr-article-body code { font-family: var(--mono); font-size: .9em; background: var(--nr-bg-2); padding: 2px 6px; border-radius: 6px; } .newsroom .nr-article-body pre { background: var(--ink); color: #fff; padding: 18px; border-radius: 12px; overflow-x: auto; margin: 24px 0; } .newsroom .nr-article-body pre code { background: none; padding: 0; color: inherit; } .newsroom .nr-article-body hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; } .newsroom .nr-art-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); } /* ============================================================== DYNAMIC ARTICLE — WordPress content inside .fa-col ============================================================== */ .newsroom .fa-col p { margin-top: 22px; font-size: 19px; line-height: 1.72; color: var(--ink-2); text-wrap: pretty; } .newsroom .fa-col h3, .newsroom .fa-col h4 { margin: 40px 0 16px; font-family: var(--sans); font-weight: 600; font-size: clamp(20px, 2.5vw, 24px); color: var(--ink); } .newsroom .fa-col ul { list-style-type: disc; margin-top: 22px; font-size: 19px; line-height: 1.72; color: var(--ink-2); padding-left: 24px; } .newsroom .fa-col ol { list-style-type: decimal; margin-top: 22px; font-size: 19px; line-height: 1.72; color: var(--ink-2); padding-left: 24px; } .newsroom .fa-col li { margin-bottom: 12px; display: list-item; } .newsroom .fa-col a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; } .newsroom .fa-col img { max-width: 100%; height: auto; border-radius: 14px; margin: 26px 0; } .newsroom .fa-col blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--pink); font-family: var(--serif); font-style: italic; font-size: clamp(20px,2.4vw,26px); line-height: 1.4; color: var(--ink); } .newsroom .fa-col table { width: 100%; border-collapse: collapse; margin: 40px 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); } .newsroom .fa-col th, .newsroom .fa-col td { padding: 14px 16px; border: 1px solid var(--line); vertical-align: top; } .newsroom .fa-col th { background: var(--nr-bg-2); font-weight: 600; color: var(--ink); text-align: left; } .newsroom .fa-col thead { border-bottom: 2px solid var(--line); } .newsroom .fa-col tbody tr:nth-child(even) { background: rgba(0,0,0,.015); } .newsroom .fa-col code { font-family: var(--mono); font-size: .9em; background: var(--nr-bg-2); padding: 2px 6px; border-radius: 6px; } .newsroom .fa-col pre { background: var(--ink); color: #fff; padding: 18px; border-radius: 12px; overflow-x: auto; margin: 24px 0; } .newsroom .fa-col pre code { background: none; padding: 0; color: inherit; } .newsroom .fa-col hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; } .newsroom .fa-col figure { margin: 26px 0; } .newsroom .fa-col figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3); text-align: center; } /* Yoast FAQ block spacing */ .newsroom .fa-col .schema-faq-section { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); } .newsroom .fa-col .schema-faq-section:first-child { margin-top: 0; padding-top: 0; border-top: none; } .newsroom .fa-col .schema-faq-question { display: block; font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 12px; } .newsroom .fa-col .schema-faq-answer { margin-top: 0; } /* TOC scrollable */ .newsroom .fa-sidebar { align-self: start; } .newsroom .fa-toc { max-height: calc(100vh - 240px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-right: 10px; } .newsroom .fa-toc::-webkit-scrollbar { width: 4px; } .newsroom .fa-toc::-webkit-scrollbar-thumb { background-color: var(--line); border-radius: 4px; } /* ============================================================== INSIGHTS FEATURE — article-specific data figures (.ia-*) ============================================================== */ .newsroom .ia-fig { margin: 38px 0; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-md); overflow: hidden; } .newsroom .ia-fig-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 28px 18px; border-bottom: 1px solid var(--line); } .newsroom .ia-fig-head h4 { font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); } .newsroom .ia-fig-head span { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .newsroom .ia-fig figcaption { padding: 0 28px 22px; font-size: 13px; line-height: 1.5; color: var(--ink-3); } .newsroom .ia-fig figcaption strong { color: var(--ink-2); font-weight: 700; } /* Donut */ .newsroom .ia-donut-row { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: center; padding: 26px 28px; } .newsroom .ia-donut { width: 260px; height: 260px; border-radius: 50%; background: conic-gradient(var(--pink) 0 95%, var(--nr-bg-3) 95% 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto; } .newsroom .ia-donut-hole { width: 176px; height: 176px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .newsroom .ia-donut-hole b { font-family: var(--sans); font-weight: 600; font-size: 60px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; } .newsroom .ia-donut-hole span { margin-top: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .newsroom .ia-donut-legend { display: flex; flex-direction: column; gap: 18px; } .newsroom .ia-leg-k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 26px; color: var(--ink); } .newsroom .ia-leg-k i { width: 14px; height: 14px; border-radius: 4px; } .newsroom .ia-leg-k i.pink { background: var(--pink); } .newsroom .ia-leg-k i.grey { background: var(--ink); } .newsroom .ia-leg p { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-2); } .newsroom .ia-leg p strong { color: var(--ink); font-weight: 700; } @media (max-width: 620px) { .newsroom .ia-donut-row { grid-template-columns: 1fr; } } /* Tool vs Agent vs Teammate (interactive) */ .newsroom .ia-vs { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 24px 28px; } .newsroom .ia-vs-card { text-align: left; background: var(--nr-bg); border: 1px solid var(--line); border-radius: 18px; padding: 20px; transition: transform .3s, box-shadow .3s, border-color .3s, background .3s; cursor: pointer; } .newsroom .ia-vs-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); } .newsroom .ia-vs-card.on { background: linear-gradient(155deg, #fff 0%, var(--pink-wash) 100%); border-color: var(--pink-soft); box-shadow: var(--shadow-md); } .newsroom .ia-vs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .newsroom .ia-vs-top strong { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--ink); } .newsroom .ia-vs-card.on .ia-vs-top strong { color: var(--pink); } .newsroom .ia-vs-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--nr-bg-3); padding: 4px 8px; border-radius: 999px; } .newsroom .ia-vs-card.on .ia-vs-tag { background: var(--pink); color: #fff; } .newsroom .ia-vs-rows { display: flex; flex-direction: column; gap: 9px; } .newsroom .ia-vs-rows div { display: flex; flex-direction: column; gap: 1px; } .newsroom .ia-vs-rows dt { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .newsroom .ia-vs-rows dd { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); } .newsroom .ia-vs-card.on .ia-vs-rows dd { color: var(--ink); } @media (max-width: 720px) { .newsroom .ia-vs { grid-template-columns: 1fr; } } /* STALL */ .newsroom .ia-stall { display: flex; flex-direction: column; padding: 8px 28px 4px; } .newsroom .ia-stall-row { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line); } .newsroom .ia-stall-row:last-child { border-bottom: 0; } .newsroom .ia-stall-k { flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 28px; color: #fff; } .newsroom .ia-stall-k[data-i="0"] { background: var(--ink); } .newsroom .ia-stall-k[data-i="1"] { background: #3A1822; } .newsroom .ia-stall-k[data-i="2"] { background: var(--pink-3); } .newsroom .ia-stall-k[data-i="3"] { background: var(--pink-2); } .newsroom .ia-stall-k[data-i="4"] { background: var(--pink); } .newsroom .ia-stall-row strong { display: block; font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 4px; } .newsroom .ia-stall-row p { font-size: 14px; line-height: 1.5; color: var(--ink-2); } /* Three teammates */ .newsroom .ia-trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding: 24px 28px; } .newsroom .ia-tm { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; } .newsroom .ia-tm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .newsroom .ia-tm-av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 18px; color: #fff; } .newsroom .ia-tm-head strong { display: block; font-family: var(--sans); font-weight: 600; font-size: 20px; color: var(--ink); } .newsroom .ia-tm-role { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; } .newsroom .ia-tm-line { width: 100%; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 999px; } .newsroom .ia-tm-mandate { font-size: 15px; line-height: 1.5; color: var(--ink-2); } .newsroom .ia-tm-mandate strong { color: var(--ink); font-weight: 700; } .newsroom .ia-tm-metric > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .newsroom .ia-tm-metric span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .newsroom .ia-tm-metric b { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); } .newsroom .ia-tm-bar { height: 12px; border-radius: 999px; background: var(--nr-bg-3); overflow: hidden; } .newsroom .ia-tm-bar i { display: block; height: 100%; border-radius: 999px; } .newsroom .ia-pink .ia-tm-av, .newsroom .ia-pink .ia-tm-line { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-3) 100%); } .newsroom .ia-pink .ia-tm-role { color: var(--pink); } .newsroom .ia-pink .ia-tm-bar i { background: linear-gradient(90deg, var(--pink) 0%, var(--pink-3) 100%); } .newsroom .ia-violet .ia-tm-av, .newsroom .ia-violet .ia-tm-line { background: linear-gradient(135deg, #9C6BE6 0%, var(--violet) 100%); } .newsroom .ia-violet .ia-tm-role { color: var(--violet); } .newsroom .ia-violet .ia-tm-bar i { background: linear-gradient(90deg, #9C6BE6 0%, var(--violet) 100%); } .newsroom .ia-cyan .ia-tm-av, .newsroom .ia-cyan .ia-tm-line { background: linear-gradient(135deg, #3CC2CB 0%, #1B8A92 100%); } .newsroom .ia-cyan .ia-tm-role { color: #1B8A92; } .newsroom .ia-cyan .ia-tm-bar i { background: linear-gradient(90deg, #3CC2CB 0%, #1B8A92 100%); } @media (max-width: 820px) { .newsroom .ia-trio { grid-template-columns: 1fr; } } /* Compounding bars */ .newsroom .ia-bars-legend { display: flex; gap: 20px; padding: 22px 28px 0; } .newsroom .ia-bars-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); } .newsroom .ia-bars-legend i { width: 13px; height: 13px; border-radius: 4px; } .newsroom .ia-bars-legend i.pink { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-3) 100%); } .newsroom .ia-bars-legend i.grey { background: var(--nr-bg-3); border: 1px solid var(--line-2); } .newsroom .ia-bars { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: end; padding: 18px 28px 24px; height: 320px; } .newsroom .ia-bar-group { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; justify-content: flex-end; } .newsroom .ia-bar-pair { display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 100%; width: 100%; } .newsroom .ia-bar { position: relative; width: 46px; border-radius: 10px 10px 0 0; min-height: 18px; transition: height .8s cubic-bezier(.2,.8,.2,1); } .newsroom .ia-bar.pink { background: linear-gradient(180deg, var(--pink) 0%, var(--pink-3) 100%); } .newsroom .ia-bar.grey { background: var(--nr-bg-3); } .newsroom .ia-bar span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--sans); font-weight: 600; font-size: 14px; white-space: nowrap; } .newsroom .ia-bar.pink span { color: var(--pink); } .newsroom .ia-bar.grey span { color: var(--ink-3); } .newsroom .ia-bar-x { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); } /* Frameworks */ .newsroom .ia-fw { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 24px 28px; } .newsroom .ia-fw-card { background: #FBFAF8; border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; } .newsroom .ia-fw-card:last-child:nth-child(odd) { grid-column: 1 / -1; } .newsroom .ia-fw-eye { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--pink); } .newsroom .ia-fw-card strong { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--ink); } .newsroom .ia-fw-card strong .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pink); } .newsroom .ia-fw-card p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .newsroom .ia-fw-neut { margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--ink-3); } .newsroom .ia-fw-neut b { color: var(--ink-2); font-weight: 600; } @media (max-width: 720px) { .newsroom .ia-fw { grid-template-columns: 1fr; } } /* Timeline */ .newsroom .ia-timeline { padding: 26px 28px 14px; position: relative; } .newsroom .ia-tl-step { position: relative; padding-left: 30px; padding-bottom: 26px; border-left: 2px solid var(--line-2); } .newsroom .ia-tl-step:last-child { border-left-color: transparent; padding-bottom: 6px; } .newsroom .ia-tl-dot { position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--pink); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line-2); } .newsroom .ia-tl-days { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pink); margin-bottom: 4px; } .newsroom .ia-tl-body strong { display: block; font-family: var(--sans); font-weight: 600; font-size: 20px; color: var(--ink); margin-bottom: 8px; } .newsroom .ia-tl-body strong .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pink); } .newsroom .ia-tl-body p { font-size: 15px; line-height: 1.55; color: var(--ink-2); } .newsroom .ia-tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .newsroom .ia-tl-chips span { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--nr-bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; } /* Pilot-to-production conversion */ .newsroom .ia-conv { display: flex; flex-direction: column; gap: 18px; padding: 26px 28px; } .newsroom .ia-conv-row { display: grid; grid-template-columns: 190px 1fr auto; gap: 16px; align-items: center; } .newsroom .ia-conv-label strong { display: block; font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); } .newsroom .ia-conv-label span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .newsroom .ia-conv-track { height: 18px; border-radius: 999px; background: var(--nr-bg-3); overflow: hidden; } .newsroom .ia-conv-track i { display: block; height: 100%; border-radius: 999px; transition: width .9s cubic-bezier(.2,.8,.2,1); } .newsroom .ia-conv-track i.pink { background: linear-gradient(90deg, var(--pink) 0%, var(--pink-3) 100%); } .newsroom .ia-conv-track i.grey { background: var(--ink-4); } .newsroom .ia-conv-pct { font-family: var(--sans); font-weight: 600; font-size: 30px; line-height: 1; } .newsroom .ia-conv-pct.pink { color: var(--pink); } .newsroom .ia-conv-pct.grey { color: var(--ink-3); } @media (max-width: 620px) { .newsroom .ia-conv-row { grid-template-columns: 1fr auto; } .newsroom .ia-conv-track { grid-column: 1 / -1; order: 3; } } /* CTA */ .newsroom .ia-cta { position: relative; overflow: hidden; margin: 44px 0; padding: 40px; border-radius: 24px; background: radial-gradient(ellipse 92% 225% at 85% 15%, rgba(255,31,91,.14) 0%, rgba(255,31,91,0) 55%), #F5EEDD; } .newsroom .ia-cta-eye { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); } .newsroom .ia-cta h3 { margin: 14px 0 0; font-family: var(--sans); font-weight: 600; font-size: clamp(26px,3vw,34px); letter-spacing: -0.02em; color: var(--ink); } .newsroom .ia-cta h3 .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pink); } .newsroom .ia-cta p { margin: 14px 0 22px; max-width: 540px; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .newsroom .ia-cta .btn span { transition: transform .3s; } .newsroom .ia-cta .btn:hover span { transform: translateX(3px); } /* ============================================================== ASTRA THEME OVERRIDES — render the single-post article full-bleed with the React palette instead of inside Astra's constrained container. Scoped to body.aisensum-fullbleed so nothing else is touched. ============================================================== */ /* Full-width: Astra wraps the template in #content > .ast-container (max-width + padding) */ body.aisensum-fullbleed #content { background: #FBFAF8; } body.aisensum-fullbleed #content > .ast-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } body.aisensum-fullbleed #content .ast-container > .newsroom { width: 100%; } body.aisensum-fullbleed .newsroom { background: var(--nr-bg); } /* Headings: React ink text + pink italic accents (Astra tints headings light grey) */ body.aisensum-fullbleed .newsroom .fa-title, body.aisensum-fullbleed .newsroom .fa-shift, body.aisensum-fullbleed .newsroom .fa-bn-title, body.aisensum-fullbleed .newsroom .fa-bn-card h3, body.aisensum-fullbleed .newsroom .fa-col h2, body.aisensum-fullbleed .newsroom .fa-col h3, body.aisensum-fullbleed .newsroom .fa-col h4, body.aisensum-fullbleed .newsroom .fa-author strong, body.aisensum-fullbleed .newsroom .fa-byline-author strong { color: var(--ink) !important; } body.aisensum-fullbleed .newsroom .fa-title .it, body.aisensum-fullbleed .newsroom .fa-shift .it, body.aisensum-fullbleed .newsroom .fa-bn-title .it { color: var(--pink) !important; } body.aisensum-fullbleed .newsroom .fa-author-role { color: var(--pink) !important; } /* Share rail icons: Astra recolours buttons, washing out the currentColor icons */ body.aisensum-fullbleed .newsroom .fa-share button { color: var(--ink-2) !important; background: #fff !important; } body.aisensum-fullbleed .newsroom .fa-share button:hover { color: var(--pink) !important; border-color: var(--pink) !important; } body.aisensum-fullbleed .newsroom .fa-share [data-share="linkedin"] svg, body.aisensum-fullbleed .newsroom .fa-share [data-share="x"] svg { fill: currentColor !important; } body.aisensum-fullbleed .newsroom .fa-share [data-share="copy"] svg { fill: none !important; stroke: currentColor !important; } /* Astra pads