/* ============================================================= HR News & Insights Loaded only on news.php. Dark mode: the page follows prefers-color-scheme and a manual toggle writes data-theme onto , which wins over the media query. Tokens are redefined rather than colours overridden per component, so the shared header and footer come along too. ============================================================= */ .news { --paper: #ffffff; --paper-2: #f7f9fc; --ink: #0f172a; --ink-2: #475569; --ink-3: #64748b; --edge: rgba(15, 23, 42, 0.08); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 18px 40px -24px rgba(15, 23, 42, 0.35); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { background: #070b14; } html:not([data-theme="light"]) .news { --paper: #0e1524; --paper-2: #0a0f1c; --ink: #e8edf6; --ink-2: #a8b6cc; --ink-3: #8496ae; --edge: rgba(255, 255, 255, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 18px 40px -22px rgba(0, 0, 0, 0.8); } html:not([data-theme="light"]) .site-header .header-shell { background: rgba(10, 15, 28, 0.86); border-bottom-color: rgba(255, 255, 255, 0.08); } html:not([data-theme="light"]) .nav-link { color: #a8b6cc; } html:not([data-theme="light"]) .nav-link:hover { color: #fff; } html:not([data-theme="light"]) .nav-toggle { background: #0e1524; border-color: rgba(255, 255, 255, 0.14); color: #e8edf6; } html:not([data-theme="light"]) .site-footer { background: #0a0f1c; border-top-color: rgba(255, 255, 255, 0.08); } html:not([data-theme="light"]) .site-footer .footer-col h2, html:not([data-theme="light"]) .site-footer .brand__name { color: #e8edf6; } html:not([data-theme="light"]) .site-footer a { color: #a8b6cc; } html:not([data-theme="light"]) .btn--ghost { background: #131c2e; border-color: rgba(255, 255, 255, 0.14); color: #e8edf6; } } html[data-theme="dark"] body { background: #070b14; } html[data-theme="dark"] .news { --paper: #0e1524; --paper-2: #0a0f1c; --ink: #e8edf6; --ink-2: #a8b6cc; --ink-3: #8496ae; --edge: rgba(255, 255, 255, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 18px 40px -22px rgba(0, 0, 0, 0.8); } html[data-theme="dark"] .site-header .header-shell { background: rgba(10, 15, 28, 0.86); border-bottom-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .nav-link { color: #a8b6cc; } html[data-theme="dark"] .nav-link:hover { color: #fff; } html[data-theme="dark"] .nav-toggle { background: #0e1524; border-color: rgba(255, 255, 255, 0.14); color: #e8edf6; } html[data-theme="dark"] .site-footer { background: #0a0f1c; border-top-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .site-footer .footer-col h2, html[data-theme="dark"] .site-footer .brand__name { color: #e8edf6; } html[data-theme="dark"] .site-footer a { color: #a8b6cc; } html[data-theme="dark"] .btn--ghost { background: #131c2e; border-color: rgba(255, 255, 255, 0.14); color: #e8edf6; } .news { background: var(--paper-2); color: var(--ink); } /* ---------- Theme toggle ---------- */ .theme-toggle { position: fixed; /* Left, because the reCAPTCHA badge occupies the bottom-right on every page that carries a form. */ left: 1.25rem; bottom: 1.25rem; z-index: 45; width: 2.875rem; height: 2.875rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--edge); color: var(--ink-2); box-shadow: var(--shadow-md); transition: transform 0.2s var(--ease-std), color 0.2s ease; } .theme-toggle:hover { transform: translateY(-2px); color: var(--primary); } .theme-toggle .icon { width: 19px; height: 19px; } /* ---------- Hero ---------- */ .news-hero { position: relative; padding-block: 4rem 3rem; text-align: center; background: radial-gradient(90% 120% at 50% -10%, rgba(37, 99, 235, 0.16) 0%, transparent 62%), linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border-bottom: 1px solid var(--edge); } .news-hero__eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; } .news-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.25rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); margin-bottom: 1rem; } .news-hero__title span { color: var(--primary); } .news-hero__lede { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); max-width: 46rem; margin: 0 auto 2rem; } .news-search { display: flex; align-items: center; gap: 0.5rem; max-width: 40rem; margin-inline: auto; padding: 0.4375rem 0.4375rem 0.4375rem 1rem; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-pill); box-shadow: var(--shadow-md); } .news-search .icon { width: 19px; height: 19px; color: var(--ink-3); flex-shrink: 0; } .news-search__input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 0.9375rem; color: var(--ink); padding: 0.5rem 0; } .news-search__input::placeholder { color: var(--ink-3); } .news-search__input:focus { outline: none; } .news-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); } .news-search__btn { flex-shrink: 0; padding: 0.625rem 1.25rem; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--primary), #1e40af); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; } /* ---------- Sticky chips ---------- */ .news-chips { position: sticky; top: 5rem; z-index: 30; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--edge); } .news-chips__row { display: flex; gap: 0.5rem; overflow-x: auto; padding-block: 0.875rem; scrollbar-width: none; } .news-chips__row::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 0.5rem 0.9375rem; border-radius: var(--radius-pill); border: 1px solid var(--edge); background: var(--paper); color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .chip:hover { border-color: var(--primary); color: var(--primary); } .chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } /* ---------- Layout ---------- */ .news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; padding-block: 3rem 4rem; align-items: start; } .news-section { margin-bottom: 3.5rem; } .news-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; } .news-section__title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink); } .news-result { font-size: 0.9375rem; color: var(--ink-2); margin-bottom: 2rem; } .news-result__clear { color: var(--primary); font-weight: 600; margin-left: 0.5rem; } .news-empty { font-size: 0.9375rem; color: var(--ink-2); } .news-empty a { color: var(--primary); font-weight: 600; } /* ---------- Stories ---------- */ .story { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease-std), box-shadow 0.3s ease, border-color 0.3s ease; } .story:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(37, 99, 235, 0.32); } .story__media { position: relative; display: block; overflow: hidden; background: var(--paper-2); flex-shrink: 0; } .story__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform 0.5s var(--ease-out); } .story:hover .story__media img { transform: scale(1.04); } .story__flag { position: absolute; top: 1rem; left: 1rem; padding: 0.3125rem 0.75rem; border-radius: var(--radius-pill); background: var(--accent); color: #1a1204; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .story__body { padding: 1.5rem; display: flex; flex-direction: column; } .story__body > p:last-child { margin-top: auto; } .story__cat { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.625rem; } .story__title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.015em; margin-bottom: 0.625rem; } .story__title a { color: var(--ink); } .story__title a:hover { color: var(--primary); } .story__summary { font-size: 0.9375rem; line-height: 1.65; color: var(--ink-2); margin-bottom: 1rem; /* Three lines, so every card in the row keeps the same rhythm however long the summary is. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .story__meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: 0.75rem; color: var(--ink-3); margin-bottom: 1rem; } .story__meta span + span { position: relative; padding-left: 1rem; } .story__meta span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: currentColor; transform: translateY(-50%); } .story--featured { display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: 1.5rem; } .story-grid .story__body { flex: 1; } .story--featured .story__body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; } .story--featured .story__title { font-size: clamp(1.375rem, 2.4vw, 1.75rem); } /* The featured media column is narrower than 16:9, so a centred crop cuts into both edges and beheads any headline the cover carries on its left. Anchor the crop left instead and let the overflow fall off the right. */ .story--featured .story__media img { object-position: left center; } .story--featured .story__summary { font-size: 1rem; -webkit-line-clamp: 4; line-clamp: 4; } .story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } /* ---------- The latest ---------- */ .latest { display: flex; flex-direction: column; gap: 1rem; } .latest__item { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; padding: 1rem; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform 0.25s var(--ease-std), box-shadow 0.25s ease, border-color 0.25s ease; } .latest__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(37, 99, 235, 0.28); } .latest__item.is-new { animation: latestIn 0.45s var(--ease-out) both; } @keyframes latestIn { from { opacity: 0; transform: translateY(12px); } } /* The media is a grid item, so it stretched to the row height — a 13rem column against ~11rem of text is far taller than 16:9, and cover then ate both side edges of the cover art. Shape the box itself instead and stop it stretching, so the whole 16:9 frame is visible. */ .latest__media { display: block; align-self: center; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); } .latest__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .latest__body { display: flex; flex-direction: column; justify-content: center; } .latest__cat { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.375rem; } .latest__title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; margin-bottom: 0.375rem; } .latest__title a { color: var(--ink); } .latest__title a:hover { color: var(--primary); } .latest__summary { font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 0.625rem; } .latest__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.75rem; color: var(--ink-3); } .latest__meta .link-arrow { font-size: 0.75rem; margin-left: auto; } .latest__more { margin-top: 1.75rem; text-align: center; } .latest__more .btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; } /* ---------- Tag cloud ---------- */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 0.625rem; } .tag-pill { display: inline-block; padding: 0.4375rem 0.875rem; border-radius: var(--radius-pill); background: var(--paper); border: 1px solid var(--edge); color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; transition: transform 0.2s var(--ease-std), color 0.2s ease, border-color 0.2s ease; } .tag-pill:hover { transform: translateY(-2px); color: var(--primary); border-color: var(--primary); } /* ---------- Newsletter ---------- */ .newsletter { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; padding: 2.25rem; border-radius: var(--radius-xl); color: #fff; background: radial-gradient(80% 140% at 88% 10%, rgba(37, 99, 235, 0.55) 0%, transparent 60%), linear-gradient(140deg, #0b1220 0%, #16233c 100%); } .newsletter__title { font-family: var(--font-display); font-weight: 800; font-size: 1.625rem; letter-spacing: -0.02em; margin-bottom: 0.625rem; } .newsletter__lede { font-size: 0.9375rem; line-height: 1.7; color: #c3cfe2; } .newsletter__form { display: flex; gap: 0.625rem; flex-wrap: wrap; } .newsletter__input { flex: 1 1 12rem; min-width: 0; padding: 0.8125rem 1rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 0.9375rem; } .newsletter__input::placeholder { color: #8ea0bb; } .newsletter__input:focus { outline: none; border-color: #60a5fa; background: rgba(255, 255, 255, 0.12); } /* ---------- Sidebar ---------- */ .news-side { position: sticky; top: 9.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .side-card { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: 1.375rem; box-shadow: var(--shadow-sm); } .side-card__title { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--ink); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--edge); } .side-rank { display: flex; flex-direction: column; gap: 0.875rem; } .side-rank li { display: flex; gap: 0.75rem; align-items: flex-start; } .side-rank span { flex-shrink: 0; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: rgba(37, 99, 235, 0.42); line-height: 1.35; } .side-rank a { font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); } .side-rank a:hover { color: var(--primary); } .side-list { display: flex; flex-direction: column; gap: 0.875rem; } .side-list li { display: flex; flex-direction: column; gap: 0.1875rem; } .side-list a { font-size: 0.875rem; font-weight: 500; line-height: 1.45; color: var(--ink); } .side-list a:hover { color: var(--primary); } .side-list__meta { font-size: 0.75rem; color: var(--ink-3); } .side-list--files li { flex-direction: row; align-items: flex-start; gap: 0.625rem; } .side-list--files .icon { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; margin-top: 0.125rem; } .side-list--files span { display: flex; flex-direction: column; gap: 0.125rem; } /* ---------- Footer CTA ---------- */ .news-cta { text-align: center; padding-block: 4.5rem; color: #fff; background: radial-gradient(70% 120% at 20% 10%, rgba(249, 115, 22, 0.2) 0%, transparent 60%), radial-gradient(80% 130% at 82% 90%, rgba(37, 99, 235, 0.45) 0%, transparent 62%), linear-gradient(150deg, #0b1220 0%, #101c33 60%, #0d1729 100%); } .news-cta__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.625rem, 3.4vw, 2.25rem); letter-spacing: -0.025em; margin-bottom: 0.875rem; } .news-cta__lede { font-size: 1rem; line-height: 1.7; color: #c3cfe2; max-width: 38rem; margin: 0 auto 2rem; } .news-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .news-cta__actions .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #fff; } .news-cta__actions .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); } /* ---------- Responsive ---------- */ @media (max-width: 1099px) { .news-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .news-side { position: static; } .story--featured { grid-template-columns: minmax(0, 1fr); } .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .news-chips { top: 4rem; } .news-hero { padding-block: 2.75rem 2rem; } .newsletter { grid-template-columns: minmax(0, 1fr); padding: 1.75rem; } .latest__item { grid-template-columns: minmax(0, 1fr); } .latest__media { max-height: 11rem; } .latest__meta .link-arrow { margin-left: 0; } } @media (max-width: 639px) { .story-grid { grid-template-columns: minmax(0, 1fr); } .news-search { flex-wrap: wrap; border-radius: var(--radius); padding: 0.75rem; } .news-search__btn { width: 100%; } .news-cta__actions .btn { width: 100%; } } /* ---------- Newsletter captcha and result message ---------- */ .newsletter__captcha { margin-top: 0.875rem; } .newsletter__captcha .g-recaptcha { display: inline-block; } .newsletter__note { margin-top: 0.875rem; font-size: 0.9375rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .newsletter__note--ok::before { content: "✓"; font-weight: 700; } .newsletter__note--error::before { content: "!"; font-weight: 700; } .newsletter__note--ok { color: #15803d; } .newsletter__note--error { color: #dc2626; } /* The newsletter block sits on a tinted panel in dark mode, where the plain greens and reds do not have enough contrast. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .newsletter__note--ok { color: #4ade80; } :root:not([data-theme="light"]) .newsletter__note--error { color: #f87171; } } :root[data-theme="dark"] .newsletter__note--ok { color: #4ade80; } :root[data-theme="dark"] .newsletter__note--error { color: #f87171; } @media (max-width: 360px) { .newsletter__captcha .g-recaptcha { transform: scale(0.86); transform-origin: 0 0; } }