@charset "utf-8"; /* ===================================================================== ERGOSPHERE - NEWS / DISPATCHES PAGE (desktop / base) Self-contained, namespaced .news_* classes. Hardcoded brand values to match the rest of the site (no CSS variables). Brand: navy #0a1628 / #0d1a2d, cyan #00d4ff, royal #4169e1, green #4ade80, amber #fbbf24, purple #b06bff. Link AFTER ergosphere-custom.css in news.html . ===================================================================== */ /* ---------- page intro ---------- */ .news_intro { text-align: center; max-width: 760px; margin: 0 auto; clear: both; } .news_intro p { color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.8; margin: 0 auto; } .news_intro p + p { margin-top: 14px; } /* small ticker chips under the heading */ .news_pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px auto 0; max-width: 620px; } .news_pill { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.75); padding: 7px 14px; border-radius: 100px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); } .news_pill b { color: #00d4ff; font-weight: 700; } /* ===================================================================== TIMELINE ===================================================================== */ .news_timeline { position: relative; max-width: 1060px; margin: 8px auto 0; width: 100%; } /* the continuous spine */ .news_timeline::before { content: ''; position: absolute; left: 131px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(to bottom, rgba(0,212,255,0) 0%, #00d4ff 5%, rgba(0,212,255,.35) 92%, rgba(0,212,255,0) 100%); z-index: 0; } /* year marker that rides the spine */ .news_year { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 0 56px; margin: 4px 0 22px; } .news_year_tag { grid-column: 2; justify-self: start; font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 700; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(0,212,255,.85); padding: 6px 16px; border-radius: 100px; background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.25); } .news_year::after { content: ''; position: absolute; left: 124px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #0d1a2d; border: 2px solid rgba(0,212,255,.6); } /* one news entry: date | (spine) | card */ .news_entry { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 0 56px; padding-bottom: 34px; align-items: start; } .news_entry:last-child { padding-bottom: 0; } /* date column */ .news_date { text-align: right; padding-top: 22px; user-select: none; } .news_date .news_date_m { display: block; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00d4ff; } .news_date .news_date_d { display: block; font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.05; color: #fff; } .news_date .news_date_y { display: block; font-size: 12px; font-weight: 500; letter-spacing: 1px; color: rgba(255,255,255,.4); margin-top: 2px; } /* spine node */ .news_node { position: absolute; left: 122px; top: 30px; width: 20px; height: 20px; border-radius: 50%; background: #0d1a2d; border: 2px solid #00d4ff; z-index: 2; box-shadow: 0 0 0 5px #0d1a2d, 0 0 14px rgba(0,212,255,.55); transition: transform .3s ease, box-shadow .3s ease; } .news_node::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #00d4ff; opacity: .85; transition: transform .3s ease; } .news_entry:hover .news_node { transform: scale(1.18); box-shadow: 0 0 0 5px #0d1a2d, 0 0 22px rgba(0,212,255,.9); } /* node accent colours per category */ .news_entry[data-cat="milestone"] .news_node { border-color: #4ade80; box-shadow: 0 0 0 5px #0d1a2d, 0 0 14px rgba(74,222,128,.55); } .news_entry[data-cat="milestone"] .news_node::after { background: #4ade80; } .news_entry[data-cat="craft"] .news_node { border-color: #b06bff; box-shadow: 0 0 0 5px #0d1a2d, 0 0 14px rgba(176,107,255,.55); } .news_entry[data-cat="craft"] .news_node::after { background: #b06bff; } .news_entry[data-cat="method"] .news_node { border-color: #fbbf24; box-shadow: 0 0 0 5px #0d1a2d, 0 0 14px rgba(251,191,36,.5); } .news_entry[data-cat="method"] .news_node::after { background: #fbbf24; } .news_entry[data-cat="announce"] .news_node { border-color: #6ea8ff; box-shadow: 0 0 0 5px #0d1a2d, 0 0 14px rgba(110,168,255,.55); } .news_entry[data-cat="announce"] .news_node::after { background: #6ea8ff; } .news_entry[data-cat="partner"] .news_node { border-color: #b06bff; box-shadow: 0 0 0 5px #0d1a2d, 0 0 14px rgba(176,107,255,.55); } .news_entry[data-cat="partner"] .news_node::after { background: #b06bff; } .news_entry[data-cat="edu"] .news_node { border-color: #4ade80; box-shadow: 0 0 0 5px #0d1a2d, 0 0 14px rgba(74,222,128,.55); } .news_entry[data-cat="edu"] .news_node::after { background: #4ade80; } /* ===================================================================== CARD ===================================================================== */ .news_card { position: relative; display: block; text-align: left; width: 100%; cursor: pointer; font-family: inherit; color: inherit; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 26px 30px; overflow: hidden; transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; } /* left accent edge that lights up on hover */ .news_card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #00d4ff; opacity: 0; transform: scaleY(.4); transform-origin: top; transition: opacity .3s ease, transform .35s ease; } .news_entry[data-cat="milestone"] .news_card::before { background: #4ade80; } .news_entry[data-cat="craft"] .news_card::before { background: #b06bff; } .news_entry[data-cat="method"] .news_card::before { background: #fbbf24; } .news_entry[data-cat="announce"] .news_card::before { background: #6ea8ff; } .news_entry[data-cat="partner"] .news_card::before { background: #b06bff; } .news_entry[data-cat="edu"] .news_card::before { background: #4ade80; } .news_card:hover, .news_card:focus-within { transform: translateY(-4px); background: rgba(255,255,255,.05); border-color: rgba(0,212,255,.45); outline: none; box-shadow: 0 22px 50px -28px rgba(0,0,0,.8), 0 0 40px -18px rgba(0,212,255,.5); } .news_card:hover::before, .news_card:focus-within::before { opacity: 1; transform: scaleY(1); } .news_card:focus-within { box-shadow: 0 0 0 2px rgba(0,212,255,.6), 0 22px 50px -28px rgba(0,0,0,.8); } /* the title link doubles as the whole-card hit target (its ::after overlays the card) */ .news_card__link { color: inherit; text-decoration: none; outline: none; } .news_card__link::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 12px; } /* feature card (latest / pinned) gets the animated gradient frame */ .news_card.is_feature { background: linear-gradient(135deg, rgba(0,212,255,.07), rgba(65,105,225,.04)); border-color: rgba(0,212,255,.28); } .news_card.is_feature::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, #00d4ff, transparent); } /* card meta row */ .news_card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .news_tag { display: inline-block; font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 11px; border-radius: 100px; background: rgba(0,212,255,.12); color: #00d4ff; border: 1px solid rgba(0,212,255,.001); } .news_tag--release { background: rgba(0,212,255,.12); color: #00d4ff; } .news_tag--milestone { background: rgba(74,222,128,.13); color: #4ade80; } .news_tag--craft { background: rgba(176,107,255,.14);color: #c79bff; } .news_tag--method { background: rgba(251,191,36,.13); color: #fbbf24; } .news_tag--announce { background: rgba(110,168,255,.14);color: #9cc2ff; } .news_tag--partner { background: rgba(176,107,255,.14);color: #c79bff; } .news_tag--edu { background: rgba(74,222,128,.13); color: #4ade80; } .news_tag--version { background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.12); } .news_card__title { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; color: #fff; letter-spacing: .3px; line-height: 1.25; margin: 0 0 12px; } .news_card.is_feature .news_card__title { font-size: 25px; } .news_card__excerpt { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.68); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news_card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #00d4ff; } .news_card__more .arr { transition: transform .25s ease; } .news_card:hover .news_card__more .arr, .news_card:focus-visible .news_card__more .arr { transform: translateX(5px); } /* full body lives in the DOM (for SEO + as the reader source) but is hidden */ .news_entry__full { display: none; } /* ===================================================================== READER OVERLAY ===================================================================== */ .news_reader { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(4,7,13,.7); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s linear .35s, backdrop-filter .35s ease; } .news_reader.is_open { opacity: 1; visibility: visible; pointer-events: auto; backdrop-filter: blur(9px) saturate(120%); -webkit-backdrop-filter: blur(9px) saturate(120%); transition: opacity .35s ease, visibility 0s, backdrop-filter .35s ease; } .news_reader__panel { position: relative; width: 100%; max-width: 880px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, #0c1a2c 0%, #0a1422 100%); border: 1px solid rgba(0,212,255,.22); border-radius: 18px; box-shadow: 0 50px 130px -30px rgba(0,0,0,.85), 0 0 90px -20px rgba(0,212,255,.12), inset 0 1px 0 rgba(255,255,255,.05); transform: translateY(22px) scale(.94); opacity: 0; transition: transform .4s cubic-bezier(.2,.75,.25,1), opacity .35s ease; } .news_reader.is_open .news_reader__panel { transform: translateY(0) scale(1); opacity: 1; } /* top accent rail */ .news_reader__panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, #00d4ff, #4169e1, transparent); } /* close button */ .news_reader__close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75); transition: all .25s ease; backdrop-filter: blur(4px); } .news_reader__close:hover { background: rgba(0,212,255,.16); border-color: rgba(0,212,255,.5); color: #fff; transform: rotate(90deg); } .news_reader__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; } /* header (fixed inside panel) */ .news_reader__head { padding: 38px 52px 22px; flex: none; border-bottom: 1px solid rgba(255,255,255,.08); } .news_reader__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; } .news_reader__date { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.45); } .news_reader__title { font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 700; color: #fff; letter-spacing: .3px; line-height: 1.18; margin: 0; } .news_reader__title span { color: #00d4ff; } /* scrolling body */ .news_reader__body { padding: 28px 52px 40px; overflow-y: auto; overscroll-behavior: contain; } .news_reader__body p { font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.74); margin: 0 0 20px; max-width: 68ch; } .news_reader__body p:last-child { margin-bottom: 0; } .news_reader__body strong { color: #fff; font-weight: 600; } .news_reader__body a { color: #00d4ff; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,.35); transition: border-color .2s ease; } .news_reader__body a:hover { border-bottom-color: #00d4ff; } .news_reader__body h4 { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #00d4ff; margin: 34px 0 14px; } .news_reader__body ul { list-style: none; padding: 0; margin: 0 0 22px; } .news_reader__body ul li { position: relative; padding: 6px 0 6px 24px; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.74); } .news_reader__body ul li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: #00d4ff; } .news_reader__body blockquote { margin: 26px 0; padding: 4px 0 4px 26px; border-left: 3px solid #00d4ff; font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 300; font-size: 21px; line-height: 1.45; color: rgba(255,255,255,.9); } .news_reader__body blockquote strong { color: #00d4ff; font-style: normal; font-weight: 600; } /* a "read the full release notes" style inline CTA inside a story */ .news_storylink { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .5px; color: #00d4ff; text-decoration: none; border: none !important; } .news_storylink .arr { transition: transform .25s ease; } .news_storylink:hover .arr { transform: translateX(5px); } /* footer: prev / next navigation */ .news_reader__foot { flex: none; display: flex; justify-content: space-between; gap: 14px; padding: 18px 52px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); } .news_reader__nav { display: flex; flex-direction: column; gap: 3px; cursor: pointer; background: none; border: none; text-align: left; padding: 6px 4px; max-width: 46%; transition: opacity .2s ease, transform .2s ease; } .news_reader__nav[disabled] { opacity: .25; cursor: default; pointer-events: none; } .news_reader__nav.is_next { text-align: right; align-items: flex-end; } .news_reader__nav_lbl { font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); } .news_reader__nav_ttl { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.82); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .news_reader__nav:hover .news_reader__nav_ttl { color: #00d4ff; } .news_reader__nav.is_prev:hover { transform: translateX(-3px); } .news_reader__nav.is_next:hover { transform: translateX(3px); } /* custom scrollbar for the reader body */ .news_reader__body::-webkit-scrollbar { width: 9px; } .news_reader__body::-webkit-scrollbar-track { background: transparent; } .news_reader__body::-webkit-scrollbar-thumb { background: rgba(0,212,255,.3); border-radius: 100px; border: 2px solid transparent; background-clip: content-box; } .news_reader__body::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,.55); background-clip: content-box; } .news_reader__body { scrollbar-width: thin; scrollbar-color: rgba(0,212,255,.35) transparent; } /* ===================================================================== EMPTY-STATE / ACCESSIBILITY HELPERS ===================================================================== */ .news_sr_only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===================================================================== RESPONSIVE ===================================================================== */ /* large tablet: tighten reader gutters */ @media (max-width: 920px) { .news_reader__head { padding: 34px 36px 20px; } .news_reader__body { padding: 26px 36px 36px; } .news_reader__foot { padding: 16px 36px; } .news_reader__title { font-size: 28px; } } /* tablet / phone: collapse the timeline to a single left-rail column */ @media (max-width: 720px) { .news_timeline::before { left: 9px; } .news_year { grid-template-columns: 1fr; padding-left: 36px; margin: 0 0 18px; } .news_year_tag { grid-column: 1; } .news_year::after { left: 1px; top: 4px; } .news_entry { grid-template-columns: 1fr; gap: 0; padding-left: 36px; padding-bottom: 26px; } .news_node { left: 1px; top: 6px; width: 18px; height: 18px; } .news_date { text-align: left; padding-top: 0; margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; } .news_date .news_date_m { font-size: 12px; } .news_date .news_date_d { font-size: 17px; } .news_date .news_date_y { font-size: 12px; margin-top: 0; } .news_card { padding: 22px 22px; } .news_card__title { font-size: 20px; } .news_card.is_feature .news_card__title { font-size: 21px; } } /* small phone: full-bleed reader */ @media (max-width: 560px) { .news_reader { padding: 0; } .news_reader__panel { max-width: 100%; max-height: 100vh; height: 100%; border-radius: 0; border: none; } .news_reader__head { padding: 64px 22px 18px; } .news_reader__body { padding: 22px 22px 30px; } .news_reader__body p { font-size: 15.5px; } .news_reader__foot { padding: 14px 22px; } .news_reader__title { font-size: 24px; } .news_reader__close { top: 14px; right: 14px; width: 38px; height: 38px; } .news_pills { gap: 8px; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { .news_card, .news_card__more .arr, .news_node, .news_node::after, .news_reader, .news_reader__panel, .news_reader__close, .news_storylink .arr, .news_reader__nav { transition: none !important; } .news_reader__panel { transform: none; } .news_reader.is_open { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } }