/* =========================================================
CATKing Blog · Design System
Tokens, base styles, shared components.
========================================================= */
/* ----- DESIGN TOKENS ----- */
:root {
/* Brand colours */
--o: #FEA82F; /* primary orange */
--o-dark: #E8951F; /* hover, inline links, button border */
--o-darker: #C77A14; /* link hover */
--cream: #FFF4E0; /* highlighter, hover fill */
--cream-warm: #FAFAF7; /* body section bg */
--ink: #0F0F1C; /* hero band, footer, body text */
--ink-dark: #08080F; /* footer */
--navy: #1A1A2E;
--mint: #1F8A5B; /* verification, atmospheric glow */
/* Neutrals */
--txt: #1A1A2E;
--mut: #525261; /* Darker secondary text — WCAG AAA (7.3:1) on cream-warm */
--mut-light: #777787; /* Bumped from #9B9BA8 for better visibility */
--bd: #E6E6EC;
--bd-light: #F0F0F4;
--bg: #F5F7FA;
/* Typography */
--font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-accent: 'Georgia', 'Times New Roman', serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
/* Type scale (clamp for fluid). Floor raised to 13px to reduce strain
on small labels — anything at --t-xs is still scannable. */
--t-xs: 13px;
--t-sm: 14.5px;
--t-base: 16px;
--t-md: 18px;
--t-lg: 20px;
--t-xl: clamp(22px, 2.4vw, 26px);
--t-2xl: clamp(26px, 3.2vw, 32px);
--t-3xl: clamp(30px, 4.2vw, 40px);
--t-4xl: clamp(36px, 5.2vw, 58px);
/* Spacing scale */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
--s-9: 48px; --s-10: 64px; --s-11: 80px;
/* Radii */
--r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px;
/* Shadows */
--sh-sm: 0 1px 2px rgba(15, 15, 28, 0.05);
--sh-md: 0 4px 12px rgba(15, 15, 28, 0.06);
--sh-lg: 0 12px 28px rgba(15, 15, 28, 0.10);
--sh-brand: 0 12px 28px rgba(254, 168, 47, 0.20);
/* Motion */
--t-fast: 130ms;
--t-base: 200ms;
--t-slow: 320ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
/* Layout */
--max-w: 1180px;
--gutter: clamp(16px, 3vw, 32px);
/* Z-index scale — single source of truth so layering is predictable.
Rule: use the variable, not a raw number. Stacking contexts within a
local component (.card, .hero) can still use 1/2/3 since they live in
their own context. */
--z-decoration: -1; /* hero radial glows, behind content */
--z-base: 1; /* in-flow stacking inside components */
--z-content-overlay: 10; /* card badges, hover overlays */
--z-sticky: 50; /* progress bars, sticky elements below nav */
--z-fab: 80; /* floating action buttons (.to-top) */
--z-nav: 100; /* sticky top nav */
--z-dropdown: 120; /* filter dropdowns, opens below nav so its panel sits above nav-z but ok */
--z-modal-backdrop: 200; /* overlay scrim for modals/drawers */
--z-modal: 210; /* the modal / drawer panel itself */
--z-toast: 500; /* fixed-position notifications, never blocked */
}
/* ----- RESET + BASE ----- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /* keep anchored navigation below sticky nav */
-webkit-text-size-adjust: 100%;
overflow-x: clip !important;
}
body {
margin: 0;
font-family: var(--font-ui);
font-size: var(--t-base);
line-height: 1.6;
color: var(--txt);
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip !important;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--cream); color: var(--ink); }
/* ----- UTILITIES ----- */
.container { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--gutter); }
.ital { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
.accent-orange { color: var(--o); }
.highlight {
background: linear-gradient(180deg, transparent 60%, var(--cream) 60%, var(--cream) 95%, transparent 95%);
padding: 0 4px;
}
.eyebrow {
font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.1px;
text-transform: none; color: var(--o-dark);
}
.section-h {
display: flex; align-items: center; gap: 14px;
font-size: var(--t-2xl); font-weight: 900; color: var(--ink);
margin: 0 0 var(--s-6); letter-spacing: -0.6px; line-height: 1.08;
text-wrap: balance;
}
.section-h::before {
content: ""; width: 4px; height: 28px;
background: var(--o); border-radius: 1px;
}
.section-h .ital { color: var(--o); }
.h-underline {
border-bottom: 2px solid var(--o); width: fit-content;
padding-bottom: 4px;
}
.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;
}
/* ----- BUTTONS ----- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 20px; border-radius: var(--r-md); font-weight: 700;
font-size: var(--t-sm); letter-spacing: 0.2px;
transition: all var(--t-base) var(--ease);
border: 1.5px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--o); color: var(--ink); border-color: var(--o-dark); }
.btn-primary:hover { background: var(--o-dark); transform: translateY(-1px); box-shadow: var(--sh-brand); }
.btn-ghost { background: transparent; color: var(--o-dark); border-color: var(--o); }
.btn-ghost:hover { background: var(--cream); }
.btn-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: var(--t-xs); }
.btn-lg { padding: 13px 28px; font-size: var(--t-md); }
/* Inline link */
.link {
color: var(--o-dark); font-weight: 600;
border-bottom: 1px solid rgba(254, 168, 47, 0.4);
transition: all var(--t-fast) var(--ease);
}
.link:hover { color: var(--o-darker); border-bottom-color: var(--o-dark); border-bottom-width: 1.5px; }
/* On mobile bump tap height — desktop layout uninfluenced because padding
collapses around inline-element. */
@media (max-width: 640px) {
.link {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 6px 0;
}
}
/* ----- NAV (legacy, unused — current pages use .tn instead) ----- */
.nav {
position: sticky; top: 0; z-index: var(--z-nav);
background: var(--ink); color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0; gap: 24px;
}
.logo {
font-weight: 900; font-size: 18px; letter-spacing: 0.3px;
display: inline-flex; align-items: center; gap: 8px;
}
.logo-mark {
width: 28px; height: 28px; border-radius: var(--r-md);
background: var(--o); color: var(--ink);
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 14px;
}
.nav-list {
display: flex; align-items: center; gap: 4px;
list-style: none; padding: 0; margin: 0;
}
.nav-link {
padding: 7px 14px; border-radius: var(--r-md);
font-size: var(--t-sm); color: #cfcfd8; font-weight: 600;
transition: all var(--t-fast) var(--ease);
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-link.active { background: #fff; color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-icon {
width: 36px; height: 36px; border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
color: #cfcfd8; transition: all var(--t-fast) var(--ease);
}
.nav-icon:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-cta {
padding: 7px 14px; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-md);
font-size: var(--t-sm); font-weight: 600; color: #fff;
transition: all var(--t-fast) var(--ease);
}
.nav-cta:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.30); }
.nav-burger {
display: none; width: 40px; height: 40px; border-radius: var(--r-md);
align-items: center; justify-content: center; color: #fff;
background: rgba(255,255,255,0.06);
}
/* ----- HERO ----- */
.hero {
background: var(--ink); color: #fff; position: relative; overflow: hidden;
/* Fluid padding: tighter on mobile (32px) so hero doesn't dominate the
initial viewport on phones. Scales up to 48px on wider screens. */
padding: clamp(28px, 4vw, 48px) 0;
isolation: isolate;
}
/* Hero background video — muted, autoplay, loop, plays-inline. Sits behind
the gradient overlay and the radial blurs so text remains highly legible.
If the video fails to load or is missing, the .hero-bg gradients alone
give the section its identity. */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
opacity: 1; /* Was 0.55 — full opacity since the poster SVG is already
tuned for dark hero contrast. When a real clip lands the
overlay handles tone-down. */
pointer-events: none;
}
.hero-video-overlay {
position: absolute;
inset: 0;
z-index: -1;
/* Lighter overlay — poster SVG is already tuned for dark hero; we just
need enough darkening to keep text legible. */
background:
linear-gradient(180deg, rgba(15,15,28,0.55) 0%, rgba(15,15,28,0.25) 40%, rgba(15,15,28,0.35) 60%, rgba(15,15,28,0.70) 100%);
pointer-events: none;
}
.hero-bg {
position: absolute; inset: 0; pointer-events: none;
/* Hero-bg was a pair of orange + mint blurry blobs. These have moved
into the hero poster SVG (visible behind the video, behind the
overlay), so the blobs and the video now harmonize instead of
fighting each other for stacking order. */
}
.hero-inner { position: relative; max-width: 720px; margin: 0 auto; text-align: center; }
.hero h1 {
font-size: var(--t-4xl); font-weight: 900;
margin: 12px 0 16px; line-height: 1.0; letter-spacing: -1.6px;
text-wrap: balance;
}
.hero h1 .ital { color: var(--o); }
.hero p {
font-size: var(--t-md); line-height: 1.6;
color: #C5C5D0; max-width: 560px; margin: 0 auto var(--s-6);
}
.hero .eyebrow { color: var(--o); }
/* ----- SEARCH BAR ----- */
.search {
display: flex; align-items: stretch;
background: #fff;
/* 6px corner — sharper than the previous 8px, gives an editorial look that
matches the FCTA buttons. */
border-radius: 6px; overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.20);
max-width: 580px; margin: 0 auto;
border: 1.5px solid rgba(255,255,255,0.12);
}
.search input {
flex: 1; border: none; outline: none;
padding: 14px 16px; font-size: var(--t-base);
color: var(--ink); background: transparent;
min-width: 0;
}
.search input::placeholder { color: var(--mut); }
.search-icon {
display: flex; align-items: center; padding: 0 12px;
color: var(--mut);
}
.search button {
background: var(--o); color: var(--ink);
font-weight: 800; font-size: var(--t-sm);
padding: 0 24px; letter-spacing: 0.3px;
transition: background var(--t-fast) var(--ease);
}
.search button:hover { background: var(--o-dark); }
/* ----- CHIPS ----- */
.chips {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 18px; border-radius: var(--r-pill);
background: #fff; border: 1px solid var(--bd);
font-size: 14px; font-weight: 700; color: var(--ink);
cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--o); color: var(--o-dark); }
.chip[aria-pressed="true"] {
background: var(--cream); border-color: var(--o); color: var(--o-dark);
}
.chip-count {
font-size: 12.5px; opacity: 0.65; font-weight: 700;
}
/* On narrow phones, the chip wrap collapses the filter to 5-6 visible chips.
Anything without data-priority="mobile" is hidden — the reader uses the
"More categories" trigger to access the rest via the dropdown. This
replaces a 5-6 row chip wall with a single tidy row on mobile. */
@media (max-width: 640px) {
.chips {
/* Single row at typical mobile widths — 4 priority chips + More categories
fits comfortably in 360-428px ranges. Wraps if necessary. */
gap: 6px;
}
.chips .chip:not([data-priority="mobile"]) {
display: none;
}
/* Tighter chip padding on mobile so the priority chips line up neatly */
.chip {
padding: 8px 14px;
font-size: 13.5px;
}
}
.chip-all {
background: transparent; border-style: dashed; border-color: var(--o); color: var(--o-dark);
}
/* ----- CARDS -----
Editorial card pattern: confident borders, snappy hover state, accent bar
that animates in from the top edge. The transform is intentionally subtle
(-2px not -3px) to feel more like a print-design lift than a web-animation
bounce. Shadow is a tight dark-ink shadow rather than a soft orange glow
so cards feel structural rather than decorative. */
.card {
background: #fff;
border: 1px solid var(--bd);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 140ms ease,
box-shadow 220ms cubic-bezier(.2,.7,.2,1);
position: relative;
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--o);
transform: scaleX(0);
transform-origin: left center;
transition: transform 280ms cubic-bezier(.2,.7,.2,1);
z-index: 2;
}
.card:hover {
/* Editorial accent: ink border + offset bottom shadow.
Removed the previous translateY(-2px) micro-lift — it's the universal
"AI demo" hover signal. Print-publications use a static piece on the
shelf with confident shadows that punch downward. */
border-color: var(--ink);
box-shadow: 0 18px 0 -16px rgba(15,15,28,0.18), /* tight bottom-edge "shelf" */
0 22px 40px -20px rgba(15,15,28,0.18);
}
.card:hover::before { transform: scaleX(1); }
.card-img {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #DDE2EA 0%, #C9D1DD 100%);
position: relative;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
isolation: isolate;
}
.card-badge {
position: absolute; top: 10px; left: 10px;
background: var(--cream); border: 1px solid var(--o); color: var(--o-dark);
font-size: 9.5px; font-weight: 800; padding: 3px 8px;
border-radius: var(--r-sm); letter-spacing: 0.6px;
z-index: 1;
}
/* Pinned cards: editorial pick at the top of Latest Articles. Pin badge
appears top-right inside the card image area, opposite the category badge.
Anchored to .card-img not .card so it doesn't conflict with the orange
accent line that .card::before draws on hover. */
.card-pinned .card-img::after {
content: 'PINNED';
position: absolute;
top: 10px; right: 10px;
z-index: 2;
background: var(--ink);
color: #FFFFFF;
font-size: 9px;
font-weight: 800;
padding: 3px 7px 3px 18px;
border-radius: var(--r-sm);
letter-spacing: 0.8px;
/* Pin icon via inline SVG background */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 5px center;
background-size: 10px 10px;
background-color: var(--ink);
}
/* ---- NEW: explicit pinned badge (black bg, yellow text) ---- */
.card-pinned-badge {
position: absolute;
top: 10px; right: 10px;
z-index: 2;
display: inline-flex; align-items: center; gap: 5px;
background: #0F0F1C;
color: #FEA82F;
font-size: 9.5px; font-weight: 800;
padding: 4px 8px 4px 7px;
border-radius: 4px;
letter-spacing: 0.7px;
text-transform: uppercase;
border: 1px solid rgba(254,168,47,0.25);
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
line-height: 1;
white-space: nowrap;
}
.card-pinned-badge svg {
flex-shrink: 0;
color: #FEA82F;
display: block;
}
/* ---- NEW: recap badge (amber live-dot + label) ---- */
.card-recap-badge {
position: absolute;
top: 10px; left: 10px;
margin-top: 28px; /* offset below the category badge */
z-index: 2;
display: inline-flex; align-items: center; gap: 5px;
background: rgba(15,15,28,0.82);
color: #FEA82F;
font-size: 9.5px; font-weight: 800;
padding: 4px 8px 4px 7px;
border-radius: 4px;
letter-spacing: 0.7px;
text-transform: uppercase;
border: 1px solid rgba(254,168,47,0.3);
backdrop-filter: blur(4px);
line-height: 1;
white-space: nowrap;
}
.recap-live-dot {
width: 6px; height: 6px;
background: #FEA82F; border-radius: 50%;
flex-shrink: 0;
animation: recap-pulse 1.5s infinite;
}
@keyframes recap-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .35; transform: scale(.7); }
}
.card-body {
padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 7px;
}
.card-title {
/* 17.5px works well at the ~280px card width that 4-up produces on a
1280px viewport. Was 18.5px when the grid was 3-up. */
font-size: 17.5px; font-weight: 800; color: var(--ink);
margin: 0; line-height: 1.28; letter-spacing: -0.2px;
/* Cap title at 2 lines so cards stay uniform height */
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-excerpt {
font-size: 14.5px; color: var(--txt); line-height: 1.45;
margin: 0; flex: 1;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.card-meta {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
font-size: 13.5px; color: var(--mut);
margin-top: 2px;
}
.card-meta .av {
width: 22px; height: 22px; border-radius: 50%;
background: var(--cream); border: 1px solid var(--o);
color: var(--o-dark); font-size: 9.5px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
}
.card-meta .read-time { color: var(--o-dark); font-weight: 700; }
.dot { width: 3px; height: 3px; background: var(--mut-light); border-radius: 50%; flex-shrink: 0; }
/* Featured (large) card variant — image at 16:8 (wider/shallower than the
default 16:9) to keep the featured card from feeling top-heavy. Title and
excerpt stay the same so the body content is unchanged. */
.card-featured .card-img { aspect-ratio: 16 / 8; }
.card-featured .card-title { font-size: 21px; line-height: 1.2; -webkit-line-clamp: 2; }
.card-featured .card-excerpt { -webkit-line-clamp: 2; }
/* ----- PAGINATION ----- */
.pager {
display: flex; align-items: center; justify-content: center; gap: 6px;
flex-wrap: wrap;
}
.pg-btn {
min-width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 12px; border: 1px solid var(--bd); border-radius: var(--r-md);
background: #fff; font-size: var(--t-sm); font-weight: 700; color: var(--mut);
transition: all var(--t-fast) var(--ease);
}
.pg-btn:hover:not([disabled]):not(.is-active) { border-color: var(--o); color: var(--o-dark); }
.pg-btn.is-active { background: var(--o); color: var(--ink); border-color: var(--o-dark); }
.pg-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.pg-ellipsis { color: var(--mut-light); padding: 0 4px; user-select: none; }
/* ----- NEWSLETTER BAND ----- */
.newsletter {
background: var(--ink); color: #fff;
padding: var(--s-8) 0; text-align: center;
position: relative; overflow: hidden;
}
.newsletter-glow {
position: absolute; top: -60px; right: -60px;
width: 220px; height: 220px;
background: var(--o); opacity: 0.16; border-radius: 50%; filter: blur(8px);
pointer-events: none;
}
.nl-inner { position: relative; max-width: 540px; margin: 0 auto; }
.nl-inner h3 {
font-size: var(--t-2xl); font-weight: 900;
margin: 0 0 8px; letter-spacing: -0.5px;
}
.nl-inner h3 .ital { color: var(--o); }
.nl-inner p { font-size: var(--t-sm); color: #C5C5D0; margin: 0 0 var(--s-4); }
.nl-form {
display: flex; gap: 6px; padding: 5px;
background: #fff; border-radius: var(--r-lg);
align-items: center;
}
.nl-form input {
flex: 1; min-width: 0; border: none; outline: none;
padding: 10px 14px; font-size: var(--t-sm);
color: var(--ink); background: transparent;
}
.nl-form button {
background: var(--o); color: var(--ink);
font-weight: 800; font-size: var(--t-sm);
padding: 10px 22px; border-radius: var(--r-md);
letter-spacing: 0.3px;
transition: background var(--t-fast) var(--ease);
}
.nl-form button:hover { background: var(--o-dark); }
.nl-fine {
font-size: var(--t-xs); color: rgba(255,255,255,0.4);
margin-top: 10px;
}
/* ----- FOOTER ----- */
.footer {
background: var(--ink-dark); color: #cfcfd8;
padding: var(--s-9) 0 var(--s-6);
}
.footer-grid {
display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
gap: var(--s-7);
}
.footer-brand .logo { color: #fff; margin-bottom: 12px; }
.footer-brand p { font-size: var(--t-sm); color: var(--mut-light); line-height: 1.55; margin: 0 0 16px; max-width: 280px; }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,0.05); color: var(--mut-light);
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px; transition: all var(--t-fast) var(--ease);
}
.footer-social a:hover { background: var(--o); color: var(--ink); }
.footer h4 {
color: #fff; font-size: var(--t-sm); font-weight: 800;
margin: 0 0 12px; padding-bottom: 7px;
border-bottom: 2px solid var(--o); width: fit-content;
letter-spacing: 0.1px; text-transform: none;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.footer ul a {
font-size: var(--t-sm); color: var(--mut-light);
transition: color var(--t-fast) var(--ease);
}
.footer ul a:hover { color: var(--o); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: var(--s-7); padding-top: var(--s-5);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
font-size: var(--t-xs); color: var(--mut-light);
}
/* ----- MOBILE NAV DRAWER (legacy — current pages use .tn-drawer) ----- */
.drawer {
position: fixed; inset: 0; z-index: var(--z-modal-backdrop);
display: none;
}
.drawer.open { display: block; }
.drawer-backdrop {
position: absolute; inset: 0; background: rgba(15,15,28,0.6);
backdrop-filter: blur(4px);
}
.drawer-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(320px, 88vw);
background: var(--ink); color: #fff;
padding: var(--s-6); overflow-y: auto;
display: flex; flex-direction: column; gap: 4px;
animation: slidein var(--t-slow) var(--ease);
}
@keyframes slidein {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.drawer-close {
align-self: flex-end; width: 36px; height: 36px;
border-radius: var(--r-md); color: #fff;
background: rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--s-5);
}
.drawer-link {
display: block; padding: 12px 14px; border-radius: var(--r-md);
font-size: var(--t-md); font-weight: 700; color: #fff;
transition: background var(--t-fast) var(--ease);
}
.drawer-link:hover, .drawer-link:focus { background: rgba(255,255,255,0.06); }
.drawer-divider { height: 1px; background: rgba(255,255,255,0.08); margin: var(--s-3) 0; }
/* ----- TOAST ----- */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
background: var(--ink); color: #fff;
padding: 12px 20px; border-radius: var(--r-md);
font-size: var(--t-sm); font-weight: 600;
box-shadow: var(--sh-lg);
display: flex; align-items: center; gap: 10px;
z-index: var(--z-toast);
animation: toast-in 220ms var(--ease);
}
@keyframes toast-in {
from { opacity: 0; transform: translate(-50%, 20px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ----- BACK-TO-TOP BUTTON ----- */
.to-top {
position: fixed;
bottom: 24px; right: 24px;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--ink); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--sh-lg);
opacity: 0; pointer-events: none;
transform: translateY(8px);
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), background var(--t-fast) var(--ease);
z-index: var(--z-fab);
}
.to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--o); color: var(--ink); }
.to-top:focus-visible { outline-offset: 3px; }
/* Section anchor focus (used by smooth-scroll for a11y) — no visible ring */
h2:focus, h3:focus { outline: none; }
/* ----- ANIMATIONS ----- */
/* Card-in animation used by pagination after fade-out */
@keyframes cardIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Pagination fade-out state */
#articlesGrid.paging article.card {
opacity: 0.2;
transform: scale(0.985);
transition: opacity 180ms var(--ease), transform 180ms var(--ease);
pointer-events: none;
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
#articlesGrid.paging article.card { opacity: 1; transform: none; transition: none; }
}
/* ----- RESPONSIVE ----- */
@media (max-width: 900px) {
.nav-list, .nav-actions { display: none; }
.nav-burger { display: flex; }
.footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
CATKing Blog · Page-specific styles
For listing (index.html) and article (article.html).
========================================================= */
/* ----- LISTING: TOPIC CHIPS ROW ----- */
.topics-band {
background: var(--cream-warm);
padding: var(--s-6) 0 var(--s-5);
border-bottom: 1px solid var(--bd);
}
.topics-label {
text-align: center; font-size: 16px; font-weight: 800;
color: var(--ink); letter-spacing: 0.1px; text-transform: none;
margin-bottom: var(--s-4);
}
/* ----- LISTING: SECTIONS ----- */
.featured-section, .latest-section {
background: var(--cream-warm);
padding: clamp(32px, 4vw, 56px) 0;
}
.featured-section { padding-bottom: clamp(20px, 2.5vw, 32px); }
.latest-section { padding-top: clamp(16px, 2vw, 24px); padding-bottom: clamp(36px, 4.5vw, 64px); }
.section-head {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
/* Reduced upper bound to 16px to bring section heading closer to its toolbar/grid */
margin-bottom: clamp(12px, 1.4vw, 16px);
}
.section-head .section-h { margin: 0; }
.section-head-text { display: flex; flex-direction: column; gap: 4px; }
.section-sub {
font-size: 16px;
font-weight: 600;
color: var(--txt);
letter-spacing: 0.1px;
}
/* Section-sub on dark backdrop (inside .hub-section). Bumped to 85% white
alpha (was 62%) — passes WCAG AAA on ink. */
.hub-section .section-sub,
.news-section .section-sub,
.live-section .section-sub {
color: rgba(255,255,255,0.85);
}
/* Featured grid: 1 large + 2 small at wide widths, simpler stacking on smaller */
.featured-grid {
display: grid; grid-template-columns: 1.7fr 1fr 1fr;
gap: var(--s-4);
}
@media (max-width: 1100px) {
.featured-grid { grid-template-columns: 1fr 1fr; }
/* First card spans both columns to keep its featured emphasis */
.featured-grid .card.card-featured { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.featured-grid { grid-template-columns: 1fr; }
.featured-grid .card.card-featured { grid-column: auto; }
}
/* Latest grid: 4-up at wide, 3-up at mid-wide, 2-up at tablet, 1-up at mobile.
4×3 layout on desktop gives 12 cards visible per page: typically 4 pinned
(editor's picks at the top) + 8 latest by published_at. At ~1280px viewport
with 56px page padding each side, 4-up gives ~280px wide cards which fits
17px titles comfortably. Below 1100px viewport, drop to 3-up; below 900px
to 2-up; below 640px stack 1-up. */
.cards-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
}
@media (max-width: 1180px) {
.cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.cards-grid { grid-template-columns: 1fr; }
}
/* Toolbar (sort tabs + result count) — sits between section-head and cards */
.toolbar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 14px;
margin-bottom: var(--s-3); /* 12px, was --s-5 (20px) */
}
.tabs {
display: inline-flex; gap: 4px; padding: 4px;
background: #fff; border: 1px solid var(--bd); border-radius: var(--r-md);
}
.tab {
padding: 9px 14px; border-radius: var(--r-sm);
font-size: 14.5px; font-weight: 700; color: var(--mut);
transition: all var(--t-fast) var(--ease);
min-height: 40px;
display: inline-flex;
align-items: center;
}
.tab:hover { color: var(--ink); }
.tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.results-count {
font-size: 16px; color: var(--mut);
}
.results-count strong { color: var(--ink); font-weight: 800; }
/* Pagination wrapper */
.pager-wrap {
background: var(--cream-warm); padding: var(--s-3) 0 var(--s-9);
display: flex; justify-content: center;
}
/* Empty state */
.empty {
background: #fff; border: 1px dashed var(--bd); border-radius: var(--r-lg);
padding: var(--s-9); text-align: center; color: var(--mut);
grid-column: 1 / -1;
}
.empty h3 { font-size: var(--t-lg); color: var(--ink); margin: 0 0 6px; }
.empty p { margin: 0 0 var(--s-4); }
/* ============================================================
ARTICLE PAGE
============================================================ */
/* ----- READING PROGRESS BAR ----- */
.progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px;
background: rgba(15,15,28,0.06); z-index: var(--z-sticky);
}
.progress-fill {
height: 100%; width: 0; background: var(--o);
transition: width 80ms linear;
box-shadow: 0 0 8px rgba(254,168,47,0.45);
}
/* ----- ARTICLE HEADER ----- */
.article-head {
background: var(--cream-warm); padding: var(--s-7) 0 var(--s-6);
}
.crumb {
display: flex; align-items: center; gap: 6px;
font-size: var(--t-sm); color: var(--mut); flex-wrap: wrap;
margin-bottom: var(--s-5);
}
.crumb a { color: var(--mut); transition: color var(--t-fast) var(--ease); }
.crumb a:hover { color: var(--o-dark); }
.crumb .sep { color: var(--bd); }
.crumb .current { color: var(--ink); font-weight: 600; }
/* Compact category eyebrow — smaller, lighter, with leading dot. Inspired by editorial blogs. */
.article-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 800; color: var(--o-dark);
letter-spacing: 0.1px; text-transform: none;
margin-bottom: var(--s-4);
}
.article-eyebrow .eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--o);
box-shadow: 0 0 0 3px rgba(254,168,47,0.18);
}
.article-eyebrow .eyebrow-sep { color: var(--mut-light); font-weight: 400; }
.article-title {
font-size: var(--t-3xl);
font-weight: 900; color: var(--ink);
margin: 0 0 var(--s-4);
line-height: 1.08; letter-spacing: -1.2px;
max-width: 880px;
}
.article-title .ital { color: var(--o); }
/* Article deck — large lead summary right under the H1 (replaces the .lead) */
.article-deck {
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.55;
color: var(--mut);
font-weight: 500;
max-width: 760px;
margin: 0 0 var(--s-5);
}
.byline {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding-top: var(--s-3);
border-top: 1px solid var(--bd);
}
.byline-author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.av {
width: 44px; height: 44px; border-radius: 50%;
background: var(--cream); border: 1.5px solid var(--o);
color: var(--o-dark); font-size: 14px; font-weight: 800;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.av-lg { width: 60px; height: 60px; font-size: 20px; border-width: 2px; }
.byline-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.byline-meta .name { font-size: var(--t-sm); font-weight: 800; color: var(--ink); }
.byline-meta .role { font-size: var(--t-xs); color: var(--mut); font-weight: 600; }
/* Vertical divider between author and meta */
.byline-divider {
width: 1px; height: 28px;
background: var(--bd);
align-self: center;
}
/* Compact info line: date · read time · reads */
.byline-info {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--t-xs); font-weight: 600; color: var(--mut);
flex-wrap: wrap;
}
.byline-info .dot-sm {
width: 3px; height: 3px; border-radius: 50%;
background: var(--mut-light);
}
.byline-spacer { flex: 1; }
.save-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border: 1.5px solid var(--o); border-radius: var(--r-md);
background: transparent; color: var(--o-dark);
font-weight: 700; font-size: var(--t-xs);
transition: all var(--t-fast) var(--ease);
}
.save-btn:hover { background: var(--cream); }
.save-btn[aria-pressed="true"] {
background: var(--o); color: var(--ink); border-color: var(--o-dark);
}
/* ----- HERO IMAGE ----- */
.hero-img {
display: block;
width: 100%;
max-width: 1216px;
margin: 0 auto;
aspect-ratio: 16 / 9;
height: auto;
background: linear-gradient(135deg, #DDE2EA 0%, #C9D1DD 100%);
border-radius: var(--r-xl);
position: relative; overflow: hidden;
isolation: isolate;
box-shadow: 0 10px 30px -10px rgba(15,15,28,0.12);
}
/* ----- ARTICLE BODY LAYOUT ----- */
.article-body {
background: var(--cream-warm);
padding: var(--s-8) 0 var(--s-9);
position: relative;
}
.article-grid {
display: grid; grid-template-columns: 56px minmax(0, 1fr) 300px;
gap: var(--s-6);
position: relative;
}
.article-main { min-width: 0; max-width: 760px; }
/* Floating share rail (column 1 on desktop, sticky inside) */
.share-rail {
display: flex; flex-direction: column; gap: 8px;
transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.share-rail.is-hidden {
opacity: 0;
visibility: hidden;
transition: opacity 280ms ease, visibility 0s linear 0s;
}
@media (min-width: 901px) {
.share-rail {
position: sticky;
top: calc(60px + var(--s-4));
align-self: start;
}
}
.share-rail-btn {
width: 36px; height: 36px; border-radius: 50%;
background: #fff; border: 1px solid var(--bd);
color: var(--mut); display: flex; align-items: center; justify-content: center;
transition: all var(--t-fast) var(--ease);
}
.share-rail-btn:hover { background: var(--cream); color: var(--o-dark); border-color: var(--o); }
.share-rail-btn.copied { background: var(--o); color: var(--ink); border-color: var(--o-dark); }
/* TOC card (inline, in main) */
.toc-card {
background: #fff; border: 1px solid var(--bd); border-radius: var(--r-lg);
padding: var(--s-5); margin: 0 0 var(--s-6);
}
.toc-card-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s-3);
}
.toc-card-head h2 {
font-size: var(--t-md); font-weight: 800; color: var(--ink);
margin: 0; display: flex; align-items: center; gap: 8px;
}
.toc-card-head h2 .ital { color: var(--o); }
.toc-card-head .count {
font-size: var(--t-xs); color: var(--mut); font-weight: 600;
}
.toc-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 2px;
}
.toc-list a {
display: flex; gap: 10px; padding: 6px 0;
font-size: var(--t-sm); color: var(--txt); line-height: 1.5;
font-weight: 600; transition: color var(--t-fast) var(--ease);
}
.toc-list a:hover { color: var(--o-dark); }
.toc-list .num {
color: var(--o-dark); font-weight: 800; min-width: 22px;
}
.toc-list .toc-sub a {
padding-left: 32px; font-weight: 500;
font-size: var(--t-xs); color: var(--mut);
}
/* Article prose */
.prose {
font-size: var(--t-md); line-height: 1.75;
color: var(--txt);
}
.prose > * { max-width: 100%; }
.prose .lead {
font-size: 18px; line-height: 1.55; color: var(--ink);
font-weight: 500; margin: 0 0 var(--s-5);
letter-spacing: -0.005em;
}
.prose p { margin: 0 0 var(--s-4); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose h2 {
font-size: var(--t-2xl); font-weight: 900; color: var(--ink);
margin: var(--s-7) 0 var(--s-3);
padding-bottom: 6px; border-bottom: 2px solid var(--o);
width: fit-content; letter-spacing: -0.4px; line-height: 1.2;
scroll-margin-top: 80px;
}
.prose h2 .ital { color: var(--o); }
.prose h3 {
font-size: 22px; font-weight: 800; color: var(--ink);
margin: var(--s-6) 0 var(--s-3);
scroll-margin-top: 80px;
}
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 var(--s-4); }
.prose li { margin-bottom: 6px; }
/* Pull quote — editorial style with subtle top/bottom rules */
.pullquote {
margin: var(--s-7) 0;
padding: var(--s-5) 0;
border-top: 1px solid var(--bd);
border-bottom: 1px solid var(--bd);
background: transparent;
}
.pullquote p {
font-family: var(--font-accent); font-style: italic;
font-size: 22px; line-height: 1.45; color: var(--ink);
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.pullquote cite {
font-size: var(--t-xs); color: var(--mut);
font-weight: 700; font-style: normal;
letter-spacing: 0.1px; text-transform: none;
}
/* Mid-article CTA card */
.cta-card {
margin: var(--s-7) 0;
padding: var(--s-5) var(--s-6);
background: var(--ink); color: #fff;
border-radius: var(--r-lg);
display: grid; grid-template-columns: 1fr auto;
gap: var(--s-5); align-items: center;
position: relative; overflow: hidden;
}
.cta-card-glow {
position: absolute; top: -40px; right: -40px;
width: 160px; height: 160px;
background: var(--o); opacity: 0.20; border-radius: 50%; filter: blur(8px);
pointer-events: none;
}
.cta-card-content { position: relative; }
.cta-card .tag {
font-size: var(--t-xs); font-weight: 800; color: var(--o);
letter-spacing: 0.1px; text-transform: none; margin-bottom: 6px;
}
.cta-card h3 {
font-size: var(--t-lg); font-weight: 800; color: #fff;
margin: 0 0 6px; line-height: 1.3;
}
.cta-card h3 .ital { color: var(--o); }
.cta-card p { font-size: var(--t-sm); color: #C5C5D0; margin: 0; line-height: 1.5; }
.cta-card-btn {
position: relative; flex-shrink: 0;
}
@media (max-width: 600px) {
.cta-card { grid-template-columns: 1fr; }
}
/* Tags + share + author bio */
.article-foot {
margin-top: var(--s-7);
background: #232323;
padding: 30px;
border-radius: var(--r-lg);
}
@media (max-width: 640px) {
.article-foot {
padding: 20px 16px;
}
}
/* ----- POSTED IN — subtle tag block with leading label ----- */
.posted-in {
display: flex; align-items: flex-start; gap: 14px;
flex-wrap: wrap;
border-top: none;
padding-top: 0;
}
.posted-in-label {
font-size: 13px; font-weight: 800; color: #A0A0AB;
letter-spacing: 0.1px; text-transform: none;
padding-top: 8px;
flex-shrink: 0;
}
.posted-in-tags {
display: flex; flex-wrap: wrap; gap: 6px;
}
.tag-pill {
padding: 4px 11px; background: #ffffff; border: 1px solid var(--o);
border-radius: var(--r-pill); font-size: 13px;
font-weight: 700; color: var(--o-darker);
transition: all var(--t-fast) var(--ease);
}
.tag-pill:hover {
background: var(--o); color: var(--ink);
transform: translateY(-1px);
}
.share-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: var(--s-4) 0 var(--s-5);
}
.share-row-label {
font-size: 13px; font-weight: 800; color: #A0A0AB;
letter-spacing: 0.1px; text-transform: none;
}
.share-row-btn {
width: 36px; height: 36px; border-radius: 50%;
background: #fff; border: none;
color: #232323;
display: flex; align-items: center; justify-content: center;
transition: all var(--t-fast) var(--ease);
}
.share-row-btn:hover { background: var(--cream); color: var(--o-dark); transform: translateY(-2px); }
.author-bio {
background: #fff; border: 1px solid var(--bd); border-radius: var(--r-lg);
padding: var(--s-5); display: flex; gap: var(--s-4); align-items: flex-start;
margin-top: var(--s-3);
color: var(--txt);
}
.author-bio .info { flex: 1; }
.author-bio .info .name { font-size: var(--t-md); font-weight: 800; color: var(--ink); margin: 0 0 2px; }
.author-bio .info .role { font-size: var(--t-xs); color: var(--o-dark); font-weight: 700; margin: 0 0 8px; letter-spacing: 0.4px; }
.author-bio .info p { font-size: var(--t-sm); color: var(--txt); line-height: 1.55; margin: 0 0 10px; }
.author-bio .info-links { display: flex; gap: 12px; font-size: var(--t-xs); }
/* ============================================================
MOBILE COLLAPSIBLE PATTERN
Applied to dense secondary content (sidebar widgets, resources)
so mobile users can collapse sections they don't immediately need.
Uses native / so behavior is keyboard-accessible
and works without JS.
- Desktop: looks exactly like an always-open container (no marker,
no chevron, summary blends into heading).
- Mobile (<= 640px): collapsed by default, chevron rotates on open.
============================================================ */
.mobile-collapsible {
/* details element behaves as block container */
}
.mobile-collapsible > .mobile-collapsible-summary {
list-style: none;
cursor: default;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mobile-collapsible > .mobile-collapsible-summary::-webkit-details-marker { display: none; }
.mobile-collapsible > .mobile-collapsible-summary::marker { content: ''; }
.mobile-collapsible-chevron {
/* Hidden on desktop — these aren't interactive there */
display: none;
color: var(--mut);
transition: transform 200ms ease;
flex-shrink: 0;
}
@media (max-width: 640px) {
.mobile-collapsible > .mobile-collapsible-summary {
cursor: pointer;
/* Tap target — entire summary row meets 44px on small screens */
min-height: 44px;
padding: 4px 0;
/* Remove gap between summary heading and content when collapsed */
margin-bottom: 0;
}
.mobile-collapsible[open] > .mobile-collapsible-summary {
margin-bottom: 12px;
}
.mobile-collapsible-chevron { display: inline-flex; }
.mobile-collapsible[open] .mobile-collapsible-chevron {
transform: rotate(180deg);
}
/* Resources section heading — already has an h2, just reset margins */
.resources-section.mobile-collapsible > .resources-head.mobile-collapsible-summary h2 {
margin: 0;
}
}
/* ----- ARTICLE SIDEBAR ----- */
.aside {
display: flex;
flex-direction: column;
gap: 16px;
}
.aside-sticky {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 901px) {
.aside {
position: relative;
align-self: stretch;
}
.aside-sticky {
position: sticky;
top: calc(62px + 16px);
}
}
.aside-card {
background: #fff; border: 1px solid var(--bd); border-radius: var(--r-lg);
padding: 16px 18px;
flex-shrink: 0;
}
.aside-card h4 {
font-size: 17px; font-weight: 800; color: var(--ink);
margin: 0 0 12px; padding-bottom: 5px;
border-bottom: 2px solid var(--o); width: fit-content;
text-transform: none; letter-spacing: 0.1px;
}
.aside-card h4 .ital { color: var(--o); text-transform: none; letter-spacing: 0; font-size: 19px; }
/* On-this-page mini TOC */
.mini-toc {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
}
.mini-toc a {
display: block; padding: 7px 0 7px 14px;
border-left: 2px solid var(--bd);
font-size: var(--t-sm); line-height: 1.45;
color: var(--txt); font-weight: 600;
transition: all var(--t-fast) var(--ease);
}
.mini-toc a:hover { color: var(--o-dark); border-left-color: var(--cream); }
.mini-toc a.active {
color: var(--o-dark); border-left-color: var(--o);
font-weight: 700; background: var(--cream);
padding-left: 12px; padding-right: 10px;
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
/* Course CTA, compact single-row sidebar variant. Sits at ~85px tall —
denser than the 160px multi-line block, but with enough body to feel
substantive vs. a one-liner pill. */
.course-cta-compact {
display: flex;
align-items: center;
gap: 13px;
padding: 13px 16px;
background: var(--cream);
border: 1.5px solid var(--o);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.course-cta-compact:hover {
background: #FFE9C2;
transform: translateY(-1px);
box-shadow: 0 6px 16px -8px rgba(254,168,47,0.45);
}
.course-cta-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 9px;
background: #FFFFFF;
color: var(--o-darker);
display: inline-flex; align-items: center; justify-content: center;
}
.course-cta-compact-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.course-cta-compact-eyebrow {
font-size: 11.5px;
font-weight: 800;
color: var(--o-darker);
letter-spacing: 0.1px;
text-transform: none;
}
.course-cta-compact-name {
font-size: 16.5px;
font-weight: 800;
color: var(--ink);
line-height: 1.2;
letter-spacing: -0.2px;
}
.course-cta-compact-tag {
font-size: 13px;
font-weight: 600;
color: var(--mut);
line-height: 1.35;
margin-top: 2px;
/* Cap at 1 line — if it wraps, ellipsis to keep card uniform */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.course-cta-compact-arrow {
flex-shrink: 0;
color: var(--o-darker);
transition: transform 160ms ease;
}
.course-cta-compact:hover .course-cta-compact-arrow {
transform: translateX(3px);
}
/* ===== RECOMMENDED COURSE WIDGET (sidebar) =====
Design ref: cream bg, dashed orange border, graduation icon,
bold title, muted subtitle, arrow on right. */
.course-rec-widget {
display: block;
padding: 14px 16px 16px;
background: #FFF8EA;
border: 1.5px dashed #F0A500;
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
margin-top: 12px;
}
.course-rec-widget:hover {
background: #FFE9C2;
transform: translateY(-2px);
box-shadow: 0 8px 20px -8px rgba(240,165,0,0.35);
}
.course-rec-eyebrow {
display: block;
font-size: 11.5px;
font-weight: 800;
color: #C47F00;
letter-spacing: 0.05em;
text-transform: none;
margin-bottom: 10px;
}
.course-rec-body {
display: flex;
align-items: center;
gap: 12px;
}
.course-rec-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 10px;
background: #FFFFFF;
color: #C47F00;
border: 1px solid rgba(240,165,0,0.2);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.course-rec-info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.course-rec-title {
display: block;
font-size: 15.5px;
font-weight: 800;
color: #1A1A2E;
line-height: 1.25;
letter-spacing: -0.15px;
}
.course-rec-sub {
display: block;
font-size: 12.5px;
font-weight: 600;
color: #525261;
line-height: 1.4;
}
.course-rec-arrow {
flex-shrink: 0;
color: #C47F00;
transition: transform 160ms ease;
}
.course-rec-widget:hover .course-rec-arrow {
transform: translateX(4px);
}
/* Old .course-cta block — DEPRECATED but kept for backward compatibility
in case any markup still references it. Don't use in new layouts. */
.course-cta {
background: var(--cream); border: 1.5px solid var(--o); border-radius: var(--r-lg);
padding: 14px 18px 16px;
}
.course-cta .tag {
font-size: 10px; font-weight: 800; color: var(--o-dark);
letter-spacing: 0.1px; text-transform: none; margin-bottom: 6px;
}
.course-cta h4 {
font-size: var(--t-md); font-weight: 800; color: var(--ink);
margin: 0 0 6px; line-height: 1.3;
border: none; padding: 0; width: auto; letter-spacing: 0;
}
.course-cta h4 .ital { color: var(--o-dark); font-size: inherit; }
.course-cta p { font-size: var(--t-xs); color: var(--txt); margin: 0 0 10px; line-height: 1.5; }
.course-cta-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; background: var(--o); color: var(--ink);
font-weight: 800; font-size: var(--t-xs);
border: 1px solid var(--o-dark); border-radius: var(--r-md);
transition: all var(--t-fast) var(--ease);
}
.course-cta-btn:hover { background: var(--o-dark); transform: translateY(-1px); }
/* Video card */
.video-thumb {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #1f1f3a, #0f0f1c);
border-radius: var(--r-md); margin-bottom: 8px;
position: relative; cursor: pointer; overflow: hidden;
}
.video-thumb::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(254,168,47,0.18), transparent 60%);
}
.play-btn {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 44px; height: 44px; border-radius: 50%;
background: var(--o); color: var(--ink);
display: flex; align-items: center; justify-content: center;
font-size: 14px; transition: all var(--t-fast) var(--ease);
z-index: 1;
}
.video-thumb:hover .play-btn { transform: translate(-50%, -50%) scale(1.1); }
.video-title {
font-size: 15px; font-weight: 700;
color: var(--ink); line-height: 1.4;
}
/* Related mini posts */
.related-mini {
display: flex; gap: 10px; padding: 10px 0;
border-top: 1px solid var(--bd-light);
transition: opacity var(--t-fast) var(--ease);
}
.related-mini:first-of-type { border-top: none; padding-top: 0; }
.related-mini:last-of-type { padding-bottom: 0; }
.related-mini:hover { opacity: 0.7; }
.related-mini .thumb {
width: 60px; height: 46px;
background: linear-gradient(135deg, #DDE2EA, #C9D1DD);
border-radius: var(--r-sm); flex-shrink: 0;
position: relative; overflow: hidden;
}
.related-mini .thumb::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 40%, rgba(254,168,47,0.15), transparent 60%);
}
.related-mini h5 {
font-size: var(--t-xs); font-weight: 700; color: var(--ink);
margin: 0 0 3px; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.related-mini .meta { font-size: 10px; color: var(--mut); }
/* ----- RELATED BLOGS SECTION ----- */
.related-section {
background: var(--cream-warm); padding: var(--s-8) 0;
border-top: 1px solid var(--bd);
}
/* ----- RESPONSIVE — ARTICLE PAGE ----- */
@media (max-width: 900px) {
/* Use minmax(0, 1fr) so the grid column never grows past available width.
Plain '1fr' lets the column expand to children's min-content, which on
mobile means anything that *could* be wider than the viewport (sticky
siblings, content with min-width: auto) forces an overflow. The minmax
pattern clamps the column to fit-the-viewport. */
.article-grid {
grid-template-columns: minmax(0, 1fr);
}
.article-grid > * {
/* Each grid child must have min-width:0 explicitly because grid items
default to min-content. Same problem as above but at the child level. */
min-width: 0;
max-width: 100%;
}
.article-main { padding-left: 0; max-width: 100%; }
/* Floating share rail is hidden on mobile to reclaim ~50px of vertical
space at the top of every article. The bottom .share-row (after the
article body) covers the same use case, and mobile OSes have a native
share sheet via the browser anyway. */
.share-rail { display: none; }
.aside { position: static; max-height: none; overflow: visible; padding-right: 0; }
.featured-grid { grid-template-columns: 1fr 1fr; }
.featured-grid .card-featured { grid-column: 1 / -1; }
.cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.featured-grid { grid-template-columns: 1fr; }
.cards-grid { grid-template-columns: 1fr; }
.article-title { font-size: 28px; letter-spacing: -0.6px; }
.hero h1 { font-size: 32px; letter-spacing: -0.6px; }
.byline-spacer { display: none; }
.save-btn { width: 100%; justify-content: center; margin-top: 8px; }
.toolbar { flex-direction: column; align-items: flex-start; }
/* .pg-btn retains 44px min size from the ≤900px rule — don't shrink below */
}
/* ===========================================================
MOBILE OPTIMIZATION PASS
Goals on small screens:
1. Reduce article scroll depth (~15 screens → ~10)
2. Hide sidebar widgets that are redundant with full sections
3. Collapse the inline TOC by default
4. Tighten the article hero
5. Ensure 44px+ touch targets everywhere
=========================================================== */
@media (max-width: 900px) {
/* Article: hide sidebar widgets that duplicate other surfaces */
/* "Watch on YouTube" widget, bulky thumbnail, not a mobile use case */
.aside .aside-card:has(.video-thumb) { display: none; }
/* Related-posts and News-widget stay visible on mobile per design, they
give the user a next-read after the article body ends. */
}
@media (max-width: 640px) {
/* Tighten article hero padding */
.article-head { padding: 24px 0 20px; }
.crumb { margin-bottom: 16px; font-size: 11px; }
.article-eyebrow { margin-bottom: 12px; font-size: 10.5px; letter-spacing: 0.1px; }
.article-deck { font-size: 15.5px; margin-bottom: 18px; }
.byline { gap: 12px; padding-top: 14px; }
.byline-author { gap: 10px; }
.byline-info { font-size: 12px; }
/* Save-for-later already full-width on mobile — keep, but tighten height */
.save-btn { padding: 11px 16px; font-size: 13px; min-height: 44px; }
/* Trust bar: compact 1-column on mobile so each fact is its own row but
visually grouped, with reduced padding */
.trust-bar { padding: 12px 14px; gap: 6px; margin-top: 14px; }
.trust-item { font-size: 11px; gap: 6px; }
.trust-sep { display: none; }
/* Hero image: match the SVG's native 320:180 aspect ratio on mobile so the
"MONTHLY DIGEST" badge and other label content in the SVG doesn't get
clipped off the side. The height variable is overridden so aspect-ratio
actually controls the height. */
.hero-img {
aspect-ratio: 320 / 180;
height: auto;
margin: 16px auto 0;
}
/* Article body padding tightening */
.article-body { padding: 24px 0 32px; }
/* Inline TOC collapsible — see JS init for default-closed on mobile */
.toc-card { padding: 14px 18px; margin-bottom: 24px; }
.toc-card-details > summary {
list-style: none;
cursor: pointer;
position: relative;
padding-right: 30px;
/* Make summary itself a touch target */
min-height: 44px;
display: flex;
align-items: center;
margin: -6px 0;
}
.toc-card-details > summary::-webkit-details-marker { display: none; }
.toc-card-details > summary::after {
content: '';
position: absolute;
right: 6px;
top: 50%;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
transform: translateY(-50%) rotate(0deg);
transition: transform 220ms ease;
}
.toc-card-details[open] > summary::after {
transform: translateY(-50%) rotate(180deg);
}
.toc-card-details > summary .count { margin-left: auto; margin-right: 22px; }
.toc-card-details > .toc-list { margin-top: 12px; }
/* Expert insight — softer drop cap on mobile */
.expert-quote::first-letter { font-size: 1em; }
/* Spotlight stat — already responsive, just verify mobile margins */
.spotlight-stat { padding: 24px 20px 20px; }
/* Author bio at end of article — slightly tighter */
.author-bio { padding: 18px; gap: 14px; }
.author-bio .info p { font-size: 13.5px; }
/* Prose H2 / H3 sizing for narrow widths */
.prose h2 { font-size: 22px; line-height: 1.2; margin: 28px 0 12px; }
.prose h3 { font-size: 17px; margin: 20px 0 10px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.6; }
/* Touch-target floor across share rails and chips */
.share-rail-btn,
.share-row-btn { width: 44px; height: 44px; }
.tag-pill { padding: 10px 14px; min-height: 36px; }
/* Chip-style dropdown trigger and sort tabs — meet 44px minimum tap target */
.cat-select-trigger { font-size: 14.5px; min-height: 44px; }
.cat-select-trigger.is-chip { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
.tab { min-height: 44px; padding: 10px 16px; }
.pg-btn { min-width: 44px; height: 44px; padding: 0 14px; }
/* Prose lead — already tuned, but ensure tight on mobile */
.prose .lead { font-size: 16px; }
}
@media (max-width: 640px) {
/* Listing page mobile polish */
.topics-band { padding: 22px 0 18px; }
.topics-label { margin-bottom: 12px; font-size: 15px; }
.chips { gap: 6px; }
.chip { padding: 8px 13px; font-size: 14px; min-height: 36px; }
.trending-strip { padding: 12px 0; font-size: 13px; }
.collections-section { padding: 28px 0 22px; }
.collection-card { padding: 16px; }
/* h3 and stats inherit their already-readable system sizes — no override */
/* Featured + latest cards: tighter padding and font */
.card-body { padding: 16px; }
/* Footer — already responsive, no changes here */
}
@media (max-width: 380px) {
/* Very small phones — additional tightening */
.article-title { font-size: 24px; }
.article-deck { font-size: 14.5px; }
.article-eyebrow { font-size: 10px; }
.crumb { font-size: 10.5px; }
.toc-card { padding: 12px 14px; }
.toc-card-head h2 { font-size: 13px; }
.stat-value { font-size: 20px; }
.container { padding-left: 16px; padding-right: 16px; }
.prose h2 { font-size: 20px; }
}
/* Reduced motion: skip the chevron rotation animation */
@media (prefers-reduced-motion: reduce) {
.toc-card-details > summary::after { transition: none; }
}
/* ----- ARTICLE PROSE STAT GRID -----
Used inline within articles to visualize numeric data and break up
walls of body text. Cards have orange progress bars + cream-toned bg. */
.stat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-3);
margin: var(--s-5) 0 var(--s-6);
}
.stat {
background: linear-gradient(180deg, #FFFFFF, #FFF9EF);
border: 1px solid var(--bd);
border-radius: var(--r-lg);
padding: var(--s-3) var(--s-4) var(--s-4);
position: relative;
overflow: hidden;
}
.stat::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--o), transparent 70%);
}
.stat-wide { grid-column: 1 / -1; }
.stat-eyebrow {
font-size: 12.5px; font-weight: 800;
color: var(--o-dark);
text-transform: uppercase;
letter-spacing: 1.3px;
margin-bottom: 6px;
}
.stat-value {
font-family: var(--font-accent, Georgia, serif);
font-weight: 700;
font-size: clamp(28px, 4vw, 38px);
color: var(--ink);
line-height: 1;
margin-bottom: 4px;
letter-spacing: -0.5px;
}
.stat-unit {
font-size: 0.6em;
color: var(--mut);
margin-left: 2px;
font-weight: 600;
}
.stat-meta {
font-size: 13px;
color: var(--mut);
margin-bottom: var(--s-3);
}
.stat-bar {
height: 4px;
background: var(--bd);
border-radius: 2px;
overflow: hidden;
}
.stat-bar span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--o), var(--o-dark));
border-radius: 2px;
}
@media (max-width: 360px) {
.stat-grid { grid-template-columns: 1fr; }
.stat-wide { grid-column: auto; }
}
@media (min-width: 361px) and (max-width: 600px) {
/* Keep 2-column on regular phones — stats are small enough to fit */
.stat-grid { gap: 8px; }
.stat { padding: 11px 12px; }
.stat-value { font-size: 20px; }
.stat-eyebrow { font-size: 10px; letter-spacing: 0.8px; }
.stat-meta { font-size: 10.5px; }
.stat-wide { grid-column: 1 / -1; }
}
/* ----- IMAGE PLACEHOLDERS (rich editorial covers) -----
Each placeholder uses a full-bleed SVG illustration (img/cover-*.svg) that
reads as a designed cover, not a missing image. The SVGs include gradient
backgrounds, faded type, topic-specific graphic elements, and brand accents. */
.card-img, .hero-img, .related-mini .thumb {
position: relative;
isolation: isolate;
}
/* Full-bleed cover image */
.card-img {
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: #fff !important;
}
.hero-img {
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: #fff !important;
}
/* Per-topic cover */
.ph-cat { background-image: url("../img/blog/cover-cat.svg") !important; }
.ph-mocks { background-image: url("../img/blog/cover-mocks.svg") !important; }
.ph-iim { background-image: url("../img/blog/cover-iim.svg") !important; }
.ph-gdpi { background-image: url("../img/blog/cover-gdpi.svg") !important; }
.ph-study { background-image: url("../img/blog/cover-study.svg") !important; }
.ph-ca { background-image: url("../img/blog/cover-ca.svg") !important; }
.ph-nmat { background-image: url("../img/blog/cover-nmat.svg") !important; }
.ph-gmat { background-image: url("../img/blog/cover-gmat.svg") !important; }
.ph-stories { background-image: url("../img/blog/cover-stories.svg") !important; }
.ph-cet, .ph-snap, .ph-xat, .ph-cmat { background-image: url("../img/blog/cover-default.svg") !important; }
/* Hover lift on the cover image itself */
.card:hover .card-img { transform: scale(1.02); transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1); }
.card .card-img { transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1); }
/* ============================================================
KEY TAKEAWAYS CALLOUT
Inline-prose callout used at the end of each article section.
Cream-tinted card with orange-rail left border and checkmark bullets.
Inspired by Masters' Union's structured-takeaways pattern.
============================================================ */
.takeaways {
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: var(--r-lg);
padding: var(--s-4) var(--s-5);
margin: var(--s-5) 0 var(--s-6);
position: relative;
}
.takeaways-head {
display: flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 800;
color: var(--o-dark);
text-transform: uppercase;
letter-spacing: 1.4px;
margin-bottom: var(--s-3);
}
.takeaways-icon {
width: 22px; height: 22px; border-radius: 50%;
background: var(--o); color: var(--ink);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.takeaways ul {
list-style: none;
margin: 0; padding: 0;
}
.takeaways li {
position: relative;
padding: 8px 0 8px 26px;
font-size: var(--t-sm); line-height: 1.55;
color: var(--ink);
border-bottom: 1px dashed var(--bd);
}
.takeaways li:last-child { border-bottom: 0; }
.takeaways li::before {
content: "";
position: absolute; left: 0; top: 14px;
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Final-takeaways variant — darker, more emphatic */
.takeaways-final {
background: var(--ink);
border-color: var(--o);
color: #fff;
}
.takeaways-final .takeaways-head { color: var(--o); }
.takeaways-final li { color: #E6E6F0; border-bottom-color: rgba(255,255,255,0.1); }
.takeaways-final li::before {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* ============================================================
FAQ ACCORDION
Standalone section below the article body. Uses native
for accessibility (keyboard + screen-reader friendly out of the box).
Inspired by Masters' Union FAQ pattern.
============================================================ */
.faq {
margin-top: var(--s-7);
padding-top: var(--s-6);
border-top: 1px solid var(--bd);
}
.faq > h2 {
font-size: var(--t-2xl); font-weight: 900; color: var(--ink);
margin: 0 0 var(--s-5);
letter-spacing: -0.4px;
border-bottom: 2px solid var(--o);
width: fit-content; padding-bottom: 8px;
}
.faq > h2 .ital { color: var(--o); font-family: var(--font-accent, Georgia, serif); }
.faq-list {
display: flex; flex-direction: column; gap: 8px;
}
.faq-item {
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: var(--r-lg);
transition: all var(--t-fast) var(--ease);
overflow: hidden;
}
.faq-item[open] {
border-color: var(--o);
box-shadow: 0 4px 14px -8px rgba(254,168,47,0.4);
}
.faq-item summary {
display: flex; align-items: center; gap: 12px;
padding: 13px 18px;
cursor: pointer;
list-style: none;
font-size: 16px;
font-weight: 700;
color: var(--ink);
transition: color var(--t-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; } /* hide native arrow */
.faq-item summary > span:not(.faq-q):not(.faq-icon) {
/* The question text span — takes remaining space */
flex: 1 1 auto;
min-width: 0;
}
.faq-item summary:hover { color: var(--o-dark); }
.faq-item summary:focus-visible {
outline: 2px solid var(--o);
outline-offset: -2px;
border-radius: var(--r-lg);
}
/* Q-number chip — e.g. Q1, Q2... */
.faq-q {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 7px;
background: var(--cream);
color: var(--o-darker);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.6px;
border-radius: 5px;
font-family: var(--font-ui);
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faq-item[open] .faq-q {
background: var(--o);
color: var(--ink);
}
.faq-icon {
width: 24px; height: 24px; border-radius: 50%;
background: var(--cream);
color: var(--o-dark);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.faq-item[open] .faq-icon {
transform: rotate(180deg);
background: var(--o);
color: var(--ink);
}
.faq-body {
padding: 0 var(--s-5) var(--s-4);
color: var(--mut);
font-size: var(--t-sm);
line-height: 1.65;
animation: faqOpen 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-body p { margin: 0; }
.faq-body p + p { margin-top: var(--s-3); }
.faq-body em { color: var(--ink); font-style: italic; }
@keyframes faqOpen {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.faq-body { animation: none; }
.faq-item[open] .faq-icon { transition: none; }
}
@media (max-width: 600px) {
.faq-item summary { padding: 16px 18px; font-size: 15px; }
.faq-body { padding: 0 18px 16px; }
}
/* ============================================================
ENHANCEMENTS — borrowed best practices from Cracku / Google
============================================================ */
/* ---------- 1. TRUST BAR ----------
Sits between byline and hero. Shows: last-updated date, fact-checked-by,
and a small "verified by editor" stamp. Borrowed from Cracku's pattern of
surfacing freshness/authority right under the title. */
.trust-bar {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin: 18px 0 -8px;
padding: 12px 16px;
background: var(--cream);
border: 1px solid var(--bd);
border-radius: 10px;
font-size: 12.5px;
color: var(--mut);
font-weight: 500;
}
.trust-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.trust-item svg {
color: var(--o-dark);
flex-shrink: 0;
}
.trust-item strong {
color: var(--ink);
font-weight: 700;
}
.trust-sep {
width: 1px;
height: 16px;
background: var(--bd-strong, #c8c8c0);
}
@media (max-width: 600px) {
.trust-sep { display: none; }
.trust-bar { gap: 8px 14px; padding: 10px 12px; }
}
/* ---------- 2. DATA TABLE BLOCK ----------
Borrowed from Cracku — they use tables for exam pattern, year-wise paper
downloads, eligibility criteria. We make them readable, scannable, and
responsively scroll on mobile rather than reflowing badly. */
.data-table-wrap {
margin: 28px 0;
border: 1px solid var(--bd);
border-radius: 12px;
overflow: hidden;
background: #FFFFFF;
}
.data-table-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: linear-gradient(180deg, var(--cream), #FFFFFF);
border-bottom: 1px solid var(--bd);
gap: 12px;
flex-wrap: wrap;
}
.data-table-title {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.1px;
margin: 0;
}
.data-table-title .ital {
color: var(--o-darker);
font-family: Georgia, serif;
font-weight: 400;
}
.data-table-caption {
font-size: 11.5px;
font-weight: 600;
color: var(--mut);
letter-spacing: 0.4px;
}
.data-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 480px; /* horizontal scroll on narrow screens */
}
table.data-table th,
table.data-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--bd);
vertical-align: top;
}
table.data-table th {
font-family: var(--font-ui);
font-weight: 800;
font-size: 11px;
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--mut);
background: var(--cream-warm);
white-space: nowrap;
}
table.data-table tbody tr:hover {
background: var(--cream);
}
table.data-table tbody tr:last-child td {
border-bottom: 0;
}
table.data-table td.num {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--ink);
}
table.data-table td.center { text-align: center; }
table.data-table td a {
color: var(--o-darker);
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
}
table.data-table td a:hover { color: var(--ink); text-decoration: underline; }
table.data-table .row-label {
font-weight: 700;
color: var(--ink);
}
/* ---------- 3. DOWNLOAD RESOURCES SECTION ----------
Borrowed from Cracku — at end of resource-heavy articles they cluster
downloadable PDFs as a clean grid. Each row has icon + name + small CTA. */
.resources-section {
margin: 40px 0;
padding: 24px;
background: linear-gradient(135deg, #FFFFFF 0%, var(--cream) 100%);
border: 1.5px solid var(--bd);
border-radius: 16px;
}
.resources-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 12px;
flex-wrap: wrap;
}
.resources-head h2 {
font-family: var(--font-ui);
font-size: 22px;
font-weight: 800;
margin: 0;
letter-spacing: -0.4px;
color: var(--ink);
}
.resources-head h2 .ital {
color: var(--o-darker);
font-family: Georgia, serif;
font-weight: 400;
}
.resources-count {
font-size: 11.5px;
font-weight: 700;
color: var(--mut);
letter-spacing: 0.1px;
text-transform: none;
background: #FFFFFF;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--bd);
}
.resources-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
}
.resource-item {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 12px;
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: all 160ms cubic-bezier(0.4,0,0.2,1);
}
.resource-item:hover {
border-color: var(--o);
transform: translateY(-1px);
box-shadow: 0 6px 16px -8px rgba(254,168,47,0.45);
}
.resource-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 7px;
background: var(--cream);
color: var(--o-darker);
display: flex;
align-items: center;
justify-content: center;
}
.resource-meta {
flex: 1;
min-width: 0;
}
.resource-name {
display: block;
font-weight: 700;
font-size: 15px;
color: var(--ink);
margin-bottom: 1px;
line-height: 1.25;
}
.resource-detail {
display: block;
font-size: 13px;
color: var(--mut);
font-weight: 500;
}
.resource-cta {
flex-shrink: 0;
color: var(--o-darker);
font-weight: 700;
font-size: 12px;
}
/* ---------- 4. NUMBERED HEADING BADGE (long-form articles) ----------
The CATKing live blog (blog_individual.webarchive) uses "1. Heading",
"2. Heading"… very scannable for long current-affairs digests. */
.section-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--ink);
color: var(--o);
border-radius: 10px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 14px;
font-weight: 800;
letter-spacing: 0;
margin-right: 12px;
vertical-align: middle;
}
.prose h2.numbered {
display: flex;
align-items: center;
gap: 0;
}
/* ---------- 5. MID-ARTICLE NEWSLETTER ----------
Cracku injects newsletter CTAs mid-article. Inline (not full-bleed) and
smaller than the footer signup. */
.inline-newsletter {
display: flex;
align-items: center;
gap: 16px;
margin: 28px 0;
padding: 18px 20px;
background: var(--ink);
color: #FFFFFF;
border-radius: 14px;
position: relative;
overflow: hidden;
}
.inline-newsletter::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(254,168,47,0.18), transparent 65%);
pointer-events: none;
}
.inline-nl-text {
flex: 1;
min-width: 0;
position: relative;
}
.inline-nl-text h4 {
font-family: var(--font-ui);
font-size: 17px;
font-weight: 800;
margin: 0 0 4px;
letter-spacing: -0.2px;
}
.inline-nl-text h4 .ital {
color: var(--o);
font-family: Georgia, serif;
font-weight: 400;
}
.inline-nl-text p {
font-size: 13px;
color: rgba(255,255,255,0.7);
margin: 0;
line-height: 1.5;
}
.inline-nl-form {
display: flex;
gap: 6px;
flex-shrink: 0;
position: relative;
}
.inline-nl-form input {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
padding: 9px 14px;
font-family: inherit;
font-size: 13px;
color: #FFFFFF;
min-width: 200px;
}
.inline-nl-form input::placeholder { color: rgba(255,255,255,0.5); }
.inline-nl-form input:focus {
outline: none;
border-color: var(--o);
background: rgba(255,255,255,0.15);
}
.inline-nl-form button {
background: var(--o);
border: 0;
border-radius: 8px;
padding: 9px 16px;
font-family: inherit;
font-weight: 700;
font-size: 13px;
color: var(--ink);
cursor: pointer;
transition: all 140ms ease;
}
.inline-nl-form button:hover {
background: #FFFFFF;
transform: translateY(-1px);
}
@media (max-width: 700px) {
.inline-newsletter { flex-direction: column; align-items: stretch; }
.inline-nl-form { flex-direction: column; }
.inline-nl-form input { min-width: 0; }
}
/* ---------- 6. LISTING PAGE ENHANCEMENTS ---------- */
/* "What's trending" strip — adds a horizontal-scroll row of trending
topics near the top, taking from blog.google's homepage pattern. */
.trending-strip {
background: #FFFFFF;
border-bottom: 1px solid var(--bd);
padding: 14px 0;
/* overflow: hidden was clipping the fade indicator. Use relative for fade. */
position: relative;
overflow: hidden;
}
/* Right-edge fade indicator — tells users content scrolls horizontally.
Only shown on mobile/tablet where the row likely doesn't fit. */
.trending-strip::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 1px; /* sit above the border */
width: 56px;
background: linear-gradient(to right, rgba(255,255,255,0), #FFFFFF 70%);
pointer-events: none;
z-index: 2;
}
@media (min-width: 1100px) {
/* On wide screens the row usually fits; hide the fade so it doesn't look like a layout artifact. */
.trending-strip::after { display: none; }
}
.trending-row {
display: flex;
align-items: center;
gap: 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Extra padding on the right so the last item doesn't sit behind the fade */
padding-right: 56px;
}
.trending-row::-webkit-scrollbar { display: none; }
.trending-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
font-weight: 900;
color: var(--ink);
letter-spacing: 0.6px;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
position: relative;
padding-left: 12px;
}
/* Sharp orange bar on the left — matches the section-h editorial accent.
Replaces the soft pulsing dot which felt generic. */
.trending-label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 14px;
background: var(--o);
transform: translateY(-50%);
border-radius: 1px;
}
.trending-dot {
/* Kept for backwards compatibility but visually de-emphasised since the
bar accent above takes its semantic role. */
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--o);
animation: trendPulse 2s ease-in-out infinite;
display: none;
}
@keyframes trendPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.trending-link {
font-size: 15.5px;
font-weight: 600;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
/* Tap target: padded for 44px min height on mobile */
padding: 10px 0;
border-bottom: 2px solid transparent;
transition: border-color 140ms ease;
display: inline-flex;
align-items: center;
min-height: 44px;
}
.trending-link:hover {
border-bottom-color: var(--o);
}
.trending-divider {
width: 1px;
height: 14px;
background: var(--bd);
flex-shrink: 0;
}
/* ---------- 7. LISTING: "READING LISTS" / CURATED COLLECTIONS ---------- */
.collections-section {
background: #F7EFDA;
/* Subtle paper grain via SVG noise — gives the section a warm, textured
feel that distinguishes it from the flat cream-warm sections nearby. */
background-image:
radial-gradient(circle at 18% 22%, rgba(199,122,20,0.06), transparent 55%),
radial-gradient(circle at 82% 78%, rgba(199,122,20,0.045), transparent 55%),
url("data:image/svg+xml;utf8,");
padding: 44px 0 36px;
position: relative;
border-top: 1px solid rgba(199,122,20,0.10);
border-bottom: 1px solid rgba(199,122,20,0.10);
}
.collections-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.collection-card {
display: flex;
flex-direction: column;
padding: 16px 18px;
background: #FFFFFF;
border: 1.5px solid var(--bd);
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: all 200ms cubic-bezier(0.4,0,0.2,1);
position: relative;
overflow: hidden;
}
.collection-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--o);
transform: translateY(-4px);
transition: transform 200ms ease;
}
.collection-card:hover {
border-color: var(--o);
transform: translateY(-2px);
box-shadow: 0 12px 24px -10px rgba(15,15,28,0.15);
}
.collection-card:hover::before { transform: translateY(0); }
.collection-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 800;
color: var(--o-darker);
letter-spacing: 0.1px;
text-transform: none;
margin-bottom: 8px;
}
.collection-icon {
width: 22px;
height: 22px;
background: var(--cream);
color: var(--o-darker);
border-radius: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.collection-card h3 {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 800;
margin: 0 0 6px;
letter-spacing: -0.2px;
color: var(--ink);
}
.collection-card h3 .ital {
color: var(--o-darker);
font-family: Georgia, serif;
font-weight: 400;
}
.collection-card p {
font-size: 14.5px;
color: var(--txt);
margin: 0 0 12px;
line-height: 1.5;
}
.collection-stats {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
font-size: 13.5px;
color: var(--mut);
font-weight: 600;
}
.collection-stats strong {
color: var(--ink);
font-weight: 800;
}
.collection-stats .dot {
width: 3px; height: 3px;
background: var(--mut-light);
border-radius: 50%;
}
/* ---------- 8. LISTING: LATEST NEWS (live feed from Google Alerts) ---------- */
/* ============================================================
EDITORIAL HUB SECTION
Parent dark section that contains two subsections as siblings:
- "From across the web" (news carousel)
- "Live class recaps" (CATKing-authored strategy posts)
Both subsections share the same dark backdrop, single decorative
warm glow, and have only an internal divider between them.
============================================================ */
.hub-section {
background: var(--ink);
color: #FFFFFF;
padding: clamp(32px, 4vw, 52px) 0 clamp(36px, 4.5vw, 56px);
position: relative;
overflow: hidden;
}
.hub-section::before {
content: '';
position: absolute;
top: -180px; right: -160px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(254,168,47,0.12), transparent 70%);
pointer-events: none;
z-index: 0;
}
.hub-section::after {
content: '';
position: absolute;
bottom: -140px; left: -120px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(31,138,91,0.08), transparent 70%);
pointer-events: none;
z-index: 0;
}
.hub-section > .news-section {
position: relative;
z-index: 2;
}
.hub-section > .live-section {
position: relative;
z-index: 1;
}
/* News and Live become transparent subsections inside the hub. They keep
their class names for CSS scoping (.news-card, .live-card etc) but
no longer carry their own background or padding. */
.news-section {
background: transparent;
color: #FFFFFF;
padding: 0;
position: relative;
overflow: visible;
}
/* The decorative ::before/::after of news-section are deprecated since the
parent .hub-section now owns the section glow. */
.news-section::before,
.news-section::after { content: none; }
/* Spacing between the two subsections */
.hub-section > .news-section + .live-section {
margin-top: clamp(28px, 3.5vw, 48px);
padding-top: clamp(28px, 3.5vw, 44px);
border-top: 1px solid rgba(255,255,255,0.08);
}
.news-section > .container { position: relative; z-index: 1; }
/* Heading colors on dark backdrop */
.news-section .section-h { color: #FFFFFF; }
.news-section .section-h::before { background: var(--o); }
.news-section .section-h .ital { color: var(--o); }
.news-section .link {
color: var(--o);
border-bottom-color: rgba(254,168,47,0.40);
}
.news-section .link:hover {
color: #FFE0B0;
border-bottom-color: var(--o);
}
.news-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px 20px;
margin-bottom: 8px;
}
.news-head-left {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.news-live {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 800;
color: #4FD89C; /* Brighter mint for dark backdrop */
letter-spacing: 0.8px;
text-transform: uppercase;
}
.news-live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4FD89C;
box-shadow: 0 0 0 3px rgba(79,216,156,0.22);
animation: newsLivePulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes newsLivePulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(79,216,156,0.22); transform: scale(1); }
50% { box-shadow: 0 0 0 6px rgba(79,216,156,0.06); transform: scale(1.08); }
}
.news-updated {
color: rgba(255,255,255,0.55);
font-size: 14.5px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
padding-left: 6px;
border-left: 1px solid rgba(255,255,255,0.18);
margin-left: 4px;
}
.news-head h2 { margin: 0; }
.news-head .link { white-space: nowrap; }
/* Category filter — dropdown sits below the news header */
.news-filter {
padding: 8px 0 22px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.news-filter-label {
font-size: 15px;
font-weight: 700;
color: rgba(255,255,255,0.55);
text-transform: none;
letter-spacing: 0.1px;
}
/* Cat-select on dark backdrop — translucent surface with white text */
.news-section .cat-select-trigger {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.14);
color: #FFFFFF;
}
.news-section .cat-select-trigger:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(255,255,255,0.30);
}
.news-section .cat-select-trigger[aria-expanded="true"] {
background: #FFFFFF;
border-color: #FFFFFF;
color: var(--ink);
}
.news-section .cat-select-label-pre { font-size: 15px; color: rgba(255,255,255,0.55); }
.news-section .cat-select-trigger[aria-expanded="true"] .cat-select-label-pre {
color: var(--mut);
}
.news-section .cat-select-count { font-size: 13px;
background: rgba(255,255,255,0.10);
color: rgba(255,255,255,0.78);
}
.news-section .cat-select-trigger[aria-expanded="true"] .cat-select-count {
background: var(--bd-light);
color: var(--mut);
}
/* News card grid — explicit breakpoints for predictable layout */
.news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 600px) {
.news-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
@media (min-width: 980px) {
.news-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}
/* News carousel — horizontal scroll, time-ordered. Replaces the grid for
the "From across the web" section.
Layout: prev arrow · scrolling track · next arrow.
The track uses scroll-snap to land cleanly on each card. */
.news-carousel {
position: relative;
display: grid;
grid-template-columns: 40px 1fr 40px;
gap: 10px;
align-items: center;
}
.news-carousel-track {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Dark-theme scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.22) transparent;
/* Pad so the first/last card don't touch the arrow buttons */
padding: 4px 4px 14px;
}
.news-carousel-track::-webkit-scrollbar { height: 6px; }
.news-carousel-track::-webkit-scrollbar-track { background: transparent; }
.news-carousel-track::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.16);
border-radius: 3px;
}
.news-carousel-track::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.28);
}
.news-carousel-track > .news-card {
/* Each card gets fixed-width inside carousel; flexbox prevents shrinking */
flex: 0 0 320px;
scroll-snap-align: start;
scroll-snap-stop: always;
}
@media (max-width: 640px) {
.news-carousel-track > .news-card {
flex: 0 0 78vw; /* nearly full-width cards on mobile */
max-width: 320px;
}
}
/* Carousel nav arrows — dark-theme variant */
.news-carousel-nav {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.85);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
align-self: center;
}
.news-carousel-nav:hover {
background: rgba(255,255,255,0.14);
border-color: rgba(254,168,47,0.50);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 6px 18px -8px rgba(254,168,47,0.30);
}
.news-carousel-nav:disabled {
opacity: 0.28;
cursor: not-allowed;
transform: none;
}
.news-carousel-nav:disabled:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.85);
box-shadow: none;
}
.news-carousel-nav:focus-visible {
outline: 2px solid var(--o);
outline-offset: 2px;
}
@media (max-width: 640px) {
.news-carousel {
grid-template-columns: 1fr; /* hide arrows on mobile, use swipe */
}
.news-carousel-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.news-carousel-track { scroll-behavior: auto; }
.news-carousel-nav { transition: none; }
.news-carousel-nav:hover { transform: none; }
}
.news-card {
position: relative;
display: flex;
flex-direction: column;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 14px 16px 12px;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
text-decoration: none;
color: #FFFFFF;
min-height: 0;
}
.news-card:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(254,168,47,0.45);
transform: translateY(-2px);
box-shadow: 0 14px 32px -16px rgba(254,168,47,0.25);
}
.news-card::before {
content: '';
position: absolute;
top: 0; left: 18px; right: 18px;
height: 2px;
background: transparent;
border-radius: 0 0 2px 2px;
transition: background 160ms ease;
}
.news-card:hover::before { background: var(--o); }
.news-card-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 13px;
font-size: 13.5px;
flex-wrap: wrap;
}
.news-source { font-size: 14.5px;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: rgba(255,255,255,0.62);
min-width: 0;
}
.news-source-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 5px;
background: rgba(254,168,47,0.14);
color: var(--o);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.news-source-mark.is-official {
background: rgba(31,138,91,0.18);
color: #4FD89C;
}
.news-source-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.news-official {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
font-size: 10px;
font-weight: 800;
color: var(--ink);
background: #4FD89C;
border-radius: 999px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.news-official::before { content: '✓'; font-size: 11px; line-height: 1; }
.news-card h3 {
font-size: 18px;
font-weight: 700;
line-height: 1.35;
color: #FFFFFF;
margin: 0 0 9px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: -0.005em;
}
.news-card-excerpt {
font-size: 15.5px;
color: rgba(255,255,255,0.68);
line-height: 1.5;
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.10);
font-size: 13.5px;
}
.news-card-meta {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.62);
font-weight: 600;
min-width: 0;
flex-wrap: wrap;
}
.news-cat-tag {
display: inline-block;
padding: 3px 9px;
background: rgba(254,168,47,0.14);
color: var(--o);
border-radius: 4px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.3px;
}
.news-time { font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.48);
white-space: nowrap;
}
.news-readlink {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14.5px;
font-weight: 700;
color: var(--o);
white-space: nowrap;
}
.news-readlink svg {
transition: transform 160ms ease;
}
.news-card:hover .news-readlink svg {
transform: translateX(2px);
}
/* View More tile — last item in the carousel track. Functions as a CTA
tile sized exactly like a news-card so the carousel flow stays consistent.
Visually distinct: orange-tinted, centered icon + label + sub. */
.news-card.news-view-more {
background: rgba(254,168,47,0.08);
border: 1.5px solid rgba(254,168,47,0.35);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
/* Match the height of regular news cards in the carousel.
320px width comes from .news-carousel-track > .news-card. */
min-height: 100%;
}
.news-card.news-view-more::before { content: none; }
.news-card.news-view-more:hover {
background: rgba(254,168,47,0.14);
border-color: var(--o);
transform: translateY(-2px);
box-shadow: 0 14px 32px -14px rgba(254,168,47,0.45);
}
.news-view-more-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 24px 20px;
}
.news-view-more-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(254,168,47,0.18);
color: var(--o);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 200ms ease, background 160ms ease;
}
.news-card.news-view-more:hover .news-view-more-icon {
background: var(--o);
color: var(--ink);
transform: translateX(4px);
}
.news-view-more-body h3 {
font-size: 20px;
font-weight: 800;
color: #FFFFFF;
margin: 4px 0 0;
letter-spacing: -0.2px;
}
.news-view-more-body p {
font-size: 15px;
color: rgba(255,255,255,0.65);
margin: 0;
line-height: 1.4;
max-width: 220px;
}
/* Loading/empty state placeholders (used by JS later) */
.news-empty {
grid-column: 1 / -1;
padding: 40px 20px;
text-align: center;
color: var(--mut);
font-size: 14px;
border: 1px dashed var(--bd);
border-radius: 12px;
background: var(--cream-warm);
}
/* ---- Responsive refinements ---- */
@media (max-width: 900px) {
.news-head .link { font-size: 13px; }
}
@media (max-width: 640px) {
.news-head { align-items: flex-start; flex-direction: column; gap: 8px; }
.news-head h2 { font-size: 22px; }
.news-head .link {
align-self: flex-end;
margin-top: -28px; /* pull up next to the heading for compact stack */
}
.news-updated { padding-left: 0; border-left: 0; margin-left: 0; }
.news-filter { padding: 6px 0 16px; gap: 8px; }
.news-card { padding: 16px; min-height: auto; }
.news-card h3 { font-size: 15px; }
.news-card-excerpt { font-size: 13px; }
}
@media (max-width: 380px) {
.news-head h2 { font-size: 20px; }
.news-head .link { margin-top: 0; align-self: flex-start; }
.news-card { padding: 14px; }
}
/* ---- A11y: keyboard focus rings ---- */
.news-card:focus-visible,
.news-loadmore:focus-visible {
outline: 2px solid var(--o);
outline-offset: 3px;
}
.news-card:focus-visible { border-color: var(--o); }
/* ---- A11y: respect reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
.news-live-dot,
.news-widget-dot { animation: none; }
.news-card,
.news-card::before,
.news-readlink svg,
.news-loadmore,
.news-widget-item,
.news-widget-foot svg { transition: none; }
.news-card:hover { transform: none; }
}
/* ---- Print: collapse interactive chrome, keep content ---- */
@media print {
.news-section { border-top: none; padding: 16px 0; break-inside: avoid; }
.news-filter, .news-foot, .news-readlink, .news-live { display: none; }
.news-grid { display: block; }
.news-card { break-inside: avoid; border: 1px solid #ddd; margin-bottom: 8px; box-shadow: none; transform: none; }
.news-card h3 { font-size: 13px; }
}
/* ============================================================
8b. LIVE CLASS RECAPS SECTION
Distinct from the news section above:
- News = third-party (Google Alerts), dark theme
- Live class recaps = CATKing-authored strategy posts from class
transcripts. Light theme, full editorial treatment.
============================================================ */
.live-section {
background: transparent;
color: #FFFFFF;
padding: 0;
position: relative;
overflow: visible;
}
/* Decorative glows now provided by .hub-section parent — no duplicate inside .live-section. */
.live-section::before,
.live-section::after { content: none; }
.live-section > .container { position: relative; z-index: 1; }
.live-section .section-h { color: #FFFFFF; }
.live-section .section-h .ital { color: var(--o); }
/* .section-sub color handled by .hub-section .section-sub rule above (85% alpha) */
.live-section .link {
color: var(--o);
border-bottom-color: rgba(254,168,47,0.40);
}
.live-section .link:hover {
color: #FFE0B0;
border-bottom-color: var(--o);
}
.live-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 600px) {
.live-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
.live-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.live-card {
display: flex;
flex-direction: column;
/* Slightly lifted from pure ink for separation. rgba'd version of cream
gives a faint warm cast against the dark backdrop. */
background: rgb(0 0 0 / 86%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
padding: 16px 18px 14px;
text-decoration: none;
color: #FFFFFF;
position: relative;
overflow: hidden;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.live-card::before {
/* Orange accent on the left edge — stronger on dark for visibility */
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--o);
opacity: 0.7;
transition: opacity 160ms ease;
}
.live-card:hover {
background: rgb(0 0 0 / 86%);
border-color: rgba(254,168,47,0.45);
transform: translateY(-2px);
box-shadow: 0 14px 32px -16px rgba(254,168,47,0.25);
}
.live-card:hover::before { opacity: 1; }
.live-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.live-card-meta {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.live-card-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.6px;
color: var(--o);
background: rgba(254,168,47,0.10);
border: 1px solid rgba(254,168,47,0.30);
padding: 3px 8px 3px 14px;
border-radius: 999px;
/*text-transform: uppercase;*/
position: relative;
white-space: nowrap;
}
.live-card-badge::before {
/* Pulse dot — bright orange on dark bg */
content: '';
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--o);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(254,168,47,0.7);
animation: live-pulse 2s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes live-pulse {
0% { box-shadow: 0 0 0 0 rgba(254,168,47,0.7); }
70% { box-shadow: 0 0 0 6px rgba(254,168,47,0); }
100% { box-shadow: 0 0 0 0 rgba(254,168,47,0); }
}
@media (prefers-reduced-motion: reduce) {
.live-card-badge::before { animation: none; }
}
.live-card-date {
font-size: 15px;
color: rgba(255,255,255,0.65);
font-weight: 600;
}
.live-card-duration {
font-size: 13px;
color: rgba(255,255,255,0.65);
font-weight: 600;
background: rgba(255,255,255,0.06);
padding: 3px 8px;
border-radius: 6px;
white-space: nowrap;
}
.live-card-title {
font-size: 20.5px;
font-weight: 800;
color: #FFFFFF;
line-height: 1.28;
margin: 0 0 8px;
letter-spacing: -0.15px;
/* Cap title at 3 lines */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.live-card-excerpt {
font-size: 15.5px;
color: rgba(255,255,255,0.75);
line-height: 1.5;
margin: 0 0 14px;
/* Cap excerpt at 3 lines */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.live-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.10);
}
.live-card-coach {
display: inline-flex;
align-items: center;
gap: 8px;
}
.live-card-coach-av {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--o);
color: var(--ink);
font-size: 9.5px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.live-card-coach-name {
font-size: 14.5px;
font-weight: 700;
color: #FFFFFF;
}
.live-card-readlink {
font-size: 14.5px;
font-weight: 700;
color: var(--o);
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 160ms ease;
}
.live-card-readlink svg { transition: transform 160ms ease; }
.live-card:hover .live-card-readlink { color: #FFE0B0; }
.live-card:hover .live-card-readlink svg { transform: translateX(2px); }
.live-card:focus-visible {
outline: 2px solid var(--o);
outline-offset: 3px;
}
@media (max-width: 640px) {
.live-card { padding: 14px 16px 12px; }
.live-card-title { font-size: 15px; }
.live-card-excerpt { font-size: 12.5px; }
.live-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.live-card, .live-card::before, .live-card-readlink, .live-card-readlink svg { transition: none; }
.live-card:hover { transform: none; }
}
/* News sidebar widget — used in article.html .aside */
.news-widget { padding-bottom: 0; }
.news-widget h4 + .news-widget-live { margin-top: -4px; margin-bottom: 14px; }
.news-widget-live {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
font-weight: 800;
color: var(--mint);
letter-spacing: 1.0px;
text-transform: uppercase;
}
.news-widget-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 3px rgba(31,138,91,0.18);
animation: newsLivePulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
.news-widget-item {
display: block;
padding: 12px 0;
border-top: 1px solid var(--bd-light);
text-decoration: none;
color: inherit;
transition: padding-left 160ms ease;
}
.news-widget-item:first-of-type { border-top: none; padding-top: 4px; }
.news-widget-item:hover { padding-left: 4px; }
.news-widget-item:hover h5 { color: var(--o-dark); }
.news-widget-meta {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
color: var(--mut);
margin-bottom: 7px;
}
.news-widget-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--cream);
color: var(--o-darker);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.2px;
flex-shrink: 0;
}
.news-widget-mark.is-official {
background: rgba(31,138,91,0.10);
color: var(--mint);
}
.news-widget-domain {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
.news-widget-official-pill {
display: inline-block;
padding: 1px 5px;
background: var(--mint);
color: #FFFFFF;
font-size: 9px;
font-weight: 800;
border-radius: 3px;
letter-spacing: 0.3px;
text-transform: uppercase;
flex-shrink: 0;
}
.news-widget-time {
font-weight: 600;
color: var(--mut-light);
white-space: nowrap;
flex-shrink: 0;
}
.news-widget-item h5 {
font-size: 13.5px;
font-weight: 700;
line-height: 1.4;
color: var(--ink);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 160ms ease;
letter-spacing: -0.005em;
}
.news-widget-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 12px 0 14px;
margin-top: 4px;
border-top: 1px solid var(--bd-light);
font-size: 12px;
font-weight: 700;
color: var(--o-darker);
text-decoration: none;
letter-spacing: 0.2px;
}
.news-widget-foot svg { transition: transform 160ms ease; }
.news-widget-foot:hover svg { transform: translateX(2px); }
/* Widget: keyboard focus + mobile refinements */
.news-widget-item:focus-visible,
.news-widget-foot:focus-visible {
outline: 2px solid var(--o);
outline-offset: 2px;
border-radius: 4px;
}
@media (max-width: 640px) {
.news-widget-item { padding: 14px 0; }
.news-widget-item h5 { font-size: 14px; line-height: 1.42; }
.news-widget-meta { font-size: 11.5px; }
.news-widget-foot { padding: 14px 0 12px; font-size: 12.5px; }
}
/* ---------- 8c. LATEST FROM CATKING — SIDEBAR WIDGET ----------
Compact next-read widget for article.html sidebar. Shows recent INTERNAL
blog posts (not the Google Alerts feed — that's .news-widget in the
listing page). Density is the priority — 4 items fit without forcing
sidebar scroll on standard laptops. Each item carries a small author
avatar to anchor the content as authored editorial, distinguishing
from the news widget which has favicon source marks. */
.latest-articles-widget { padding-bottom: 0; }
.latest-articles-widget h4 { margin-bottom: 4px; }
.latest-articles-eyebrow {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--mut);
letter-spacing: 0.2px;
margin-bottom: 14px;
}
.latest-articles-item {
display: block;
padding: 10px 14px 10px;
margin: 0 -14px; /* bleed to card edges */
border-top: 1px solid var(--bd-light);
text-decoration: none;
color: inherit;
position: relative;
transition: background 160ms ease, padding-left 200ms cubic-bezier(.2,.7,.2,1);
}
.latest-articles-item:first-of-type { border-top: none; padding-top: 4px; }
.latest-articles-item::before {
/* Left accent stripe — fades in on hover, color matches category */
content: '';
position: absolute;
left: 0; top: 10px; bottom: 10px;
width: 3px;
background: var(--o);
border-radius: 0 2px 2px 0;
opacity: 0;
transition: opacity 180ms ease;
}
.latest-articles-item:hover {
background: var(--cream);
padding-left: 20px;
}
.latest-articles-item:hover::before { opacity: 1; }
/* Category eyebrow + accent stripe — color coded by data-cat attribute */
.latest-articles-cat {
display: inline-block;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--o-darker);
background: var(--cream);
padding: 1px 6px;
border-radius: 3px;
margin-bottom: 4px;
}
.latest-articles-cat[data-cat="cat"] { color: var(--o-darker); background: var(--cream); }
.latest-articles-cat[data-cat="nmat"] { color: #1F8A5B; background: rgba(31,138,91,0.10); }
.latest-articles-cat[data-cat="xat"] { color: #3D5AFE; background: rgba(61,90,254,0.08); }
.latest-articles-cat[data-cat="gdpi"] { color: #B23956; background: rgba(178,57,86,0.08); }
.latest-articles-cat[data-cat="snap"] { color: #6B4FBF; background: rgba(107,79,191,0.10); }
.latest-articles-cat[data-cat="cmat"] { color: #C77A14; background: rgba(199,122,20,0.10); }
.latest-articles-cat[data-cat="gmat"] { color: #1976D2; background: rgba(25,118,210,0.10); }
.latest-articles-cat[data-cat="iim"] { color: #1F8A5B; background: rgba(31,138,91,0.10); }
/* Item accent stripe matches its category */
.latest-articles-item:has([data-cat="cat"])::before { background: var(--o); }
.latest-articles-item:has([data-cat="nmat"])::before { background: #1F8A5B; }
.latest-articles-item:has([data-cat="xat"])::before { background: #3D5AFE; }
.latest-articles-item:has([data-cat="gdpi"])::before { background: #B23956; }
.latest-articles-item:has([data-cat="snap"])::before { background: #6B4FBF; }
.latest-articles-item:has([data-cat="cmat"])::before { background: #C77A14; }
.latest-articles-item:has([data-cat="gmat"])::before { background: #1976D2; }
.latest-articles-item:has([data-cat="iim"])::before { background: #1F8A5B; }
.latest-articles-item h5 {
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--ink);
margin: 0 0 6px;
letter-spacing: -0.005em;
/* Cap headline at 2 lines so widget stays compact */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Override the inherited aside-card h4-style underline on these h5s */
.latest-articles-item h5 { border-bottom: none; padding-bottom: 0; }
/* Byline row — author avatar + meta. Anchors as authored editorial content. */
.latest-articles-byline {
display: flex;
align-items: center;
gap: 8px;
}
.latest-articles-av {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--o);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.2px;
flex-shrink: 0;
font-family: var(--font-ui);
}
.latest-articles-meta {
font-size: 13px;
color: var(--mut);
font-weight: 600;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.latest-articles-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 14px 0 4px;
font-size: 14px;
font-weight: 700;
color: var(--o-darker);
text-decoration: none;
border-top: 1px solid var(--bd-light);
margin-top: 6px;
transition: color 160ms ease;
}
.latest-articles-foot:hover { color: var(--ink); }
.latest-articles-foot svg { transition: transform 160ms ease; }
.latest-articles-foot:hover svg { transform: translateX(2px); }
.latest-articles-item:focus-visible,
.latest-articles-foot:focus-visible {
outline: 2px solid var(--o);
outline-offset: 2px;
border-radius: 4px;
}
@media (max-width: 640px) {
.latest-articles-item { padding: 12px 14px 10px; }
.latest-articles-item h5 { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
.latest-articles-item, .latest-articles-item::before, .latest-articles-foot svg { transition: none; }
}
/* ---------- 8d. RELATED BLOGS — SIDEBAR WIDGET ----------
Thematically related posts (same topic cluster as the current article).
Visually distinct from .latest-articles-widget:
- Thumbnail-first horizontal layout (no author avatar)
- "Match" angle implied via header copy + topical foot-link
- Tighter padding because two stacked next-read widgets need to be dense */
.related-blogs-widget { padding-bottom: 0; }
.related-blogs-widget h4 { margin-bottom: 4px; }
.related-blogs-eyebrow {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--mut);
letter-spacing: 0.2px;
margin-bottom: 14px;
}
.related-blogs-item {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 9px 14px 9px;
margin: 0 -14px; /* bleed to card edges */
border-top: 1px solid var(--bd-light);
text-decoration: none;
color: inherit;
transition: background 160ms ease;
}
.related-blogs-item:first-of-type { border-top: none; padding-top: 4px; }
.related-blogs-item:hover {
background: var(--cream);
}
.related-blogs-thumb {
flex-shrink: 0;
width: 50px;
height: 36px;
border-radius: 6px;
overflow: hidden;
background: var(--cream);
display: block;
}
.related-blogs-thumb svg {
width: 100%;
height: 100%;
display: block;
}
.related-blogs-body {
flex: 1 1 auto;
min-width: 0;
}
.related-blogs-body h5 {
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--ink);
margin: 0 0 4px;
letter-spacing: -0.005em;
/* Cap at 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
border-bottom: none; /* override inherited .aside-card h4-style underline */
padding-bottom: 0;
}
.related-blogs-meta {
font-size: 13px;
color: var(--mut);
font-weight: 600;
}
.related-blogs-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 14px 0 4px;
font-size: 14px;
font-weight: 700;
color: var(--o-darker);
text-decoration: none;
border-top: 1px solid var(--bd-light);
margin-top: 6px;
transition: color 160ms ease;
}
.related-blogs-foot:hover { color: var(--ink); }
.related-blogs-foot svg { transition: transform 160ms ease; }
.related-blogs-foot:hover svg { transform: translateX(2px); }
.related-blogs-item:focus-visible,
.related-blogs-foot:focus-visible {
outline: 2px solid var(--o);
outline-offset: 2px;
border-radius: 4px;
}
@media (max-width: 640px) {
.related-blogs-item { padding: 11px 14px 9px; gap: 10px; }
.related-blogs-thumb { width: 50px; height: 38px; }
.related-blogs-body h5 { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
.related-blogs-item, .related-blogs-foot svg { transition: none; }
}
/* ---------- 9a. ARTICLE: EXPERT INSIGHT (dark inline callout) ---------- */
/* Sits inside the prose; visually breaks the cream/white rhythm with a
dark ink-colored card carrying a quote from a named coach/expert. */
.expert-insight {
background: var(--ink);
color: #FFFFFF;
border-radius: 14px;
padding: 28px 28px 24px;
margin: 36px 0;
position: relative;
overflow: hidden;
}
.expert-insight::before {
/* Subtle warm glow in the upper-left, hints at brand color */
content: '';
position: absolute;
top: -40px; left: -40px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(254,168,47,0.16), transparent 70%);
pointer-events: none;
}
.expert-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 800;
color: var(--o);
letter-spacing: 0.1px;
text-transform: none;
margin-bottom: 18px;
position: relative;
}
.expert-eyebrow::before {
content: '';
width: 18px; height: 1.5px;
background: var(--o);
border-radius: 1px;
}
.expert-quote {
font-family: var(--font-accent);
font-style: italic;
font-size: 22px;
line-height: 1.45;
margin: 0 0 22px;
letter-spacing: -0.01em;
color: #FFFFFF;
position: relative;
}
.expert-quote::first-letter { font-size: 28px; }
.expert-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.10);
}
.expert-av {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--o);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.expert-author-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.expert-name {
font-size: 14px;
font-weight: 700;
color: #FFFFFF;
font-family: var(--font-ui);
}
.expert-role {
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.65);
font-family: var(--font-ui);
}
@media (max-width: 640px) {
.expert-insight { padding: 22px 20px 20px; margin: 28px 0; }
.expert-quote { font-size: 19px; }
.expert-eyebrow { font-size: 10px; }
}
/* ---------- 9a-bis. ARTICLE: SPOTLIGHT STAT (dark callout, big number) ----------
Different visual idiom from .expert-insight — a large attention-grabbing
number with attribution. Used to highlight a single stat that the reader
should walk into an interview ready to cite. */
.spotlight-stat {
background: linear-gradient(135deg, #14141F 0%, #1f1f2f 100%);
color: #FFFFFF;
border-radius: 14px;
padding: 32px;
margin: 36px 0;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 28px;
align-items: center;
}
.spotlight-stat::before {
content: '';
position: absolute;
top: 50%; right: -60px;
transform: translateY(-50%);
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(254,168,47,0.14), transparent 65%);
pointer-events: none;
}
.spotlight-num {
font-size: clamp(56px, 9vw, 88px);
font-weight: 900;
color: var(--o);
line-height: 1;
letter-spacing: -0.03em;
font-family: var(--font-ui);
position: relative;
z-index: 1;
}
.spotlight-num-unit {
font-size: 0.45em;
font-weight: 800;
margin-left: 2px;
color: rgba(254,168,47,0.85);
}
.spotlight-meta { position: relative; z-index: 1; }
.spotlight-eyebrow {
display: inline-block;
font-size: 10.5px;
font-weight: 800;
color: rgba(254,168,47,0.85);
letter-spacing: 0.1px;
text-transform: none;
margin-bottom: 8px;
}
.spotlight-stat h4 {
font-size: 18px;
font-weight: 800;
color: #FFFFFF;
margin: 0 0 10px;
line-height: 1.3;
letter-spacing: -0.005em;
}
.spotlight-context {
font-size: 13.5px;
line-height: 1.5;
color: rgba(255,255,255,0.70);
margin: 0;
}
.spotlight-context strong { color: #FFFFFF; font-weight: 700; }
.spotlight-source {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.10);
font-size: 11.5px;
font-weight: 600;
color: rgba(255,255,255,0.45);
letter-spacing: 0.3px;
}
@media (max-width: 640px) {
.spotlight-stat {
grid-template-columns: 1fr;
padding: 26px 22px 22px;
gap: 14px;
margin: 28px 0;
}
.spotlight-stat::before { width: 160px; height: 160px; right: -40px; top: 0; transform: none; }
.spotlight-num { font-size: 64px; }
.spotlight-stat h4 { font-size: 16px; }
}
/* ---------- 9b. ARTICLE: PITFALL / WARNING CARD (light variant) ---------- */
/* A subtle warning callout — different visual idiom from .takeaways so
articles with multiple callouts don't feel repetitive. */
.pitfall {
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 12px;
padding: 18px 22px;
margin: 24px 0 28px;
position: relative;
display: flex;
gap: 16px;
align-items: flex-start;
}
.pitfall::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: #C77A14;
border-radius: 12px 0 0 12px;
opacity: 0.85;
}
.pitfall-icon {
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(199,122,20,0.10);
color: #C77A14;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 6px;
}
.pitfall-body { flex: 1 1 auto; min-width: 0; }
.pitfall-eyebrow {
font-size: 10.5px;
font-weight: 800;
color: #C77A14;
letter-spacing: 0.1px;
text-transform: none;
margin-bottom: 6px;
display: block;
}
.pitfall-body h4 {
font-size: 15px;
font-weight: 800;
color: var(--ink);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.pitfall-body p {
font-size: 14px;
line-height: 1.5;
color: var(--txt);
margin: 0;
}
/* ---------- 9c. ARTICLE: INLINE FIGURE / CHART ---------- */
.article-figure {
margin: 32px 0 28px;
padding: 0;
}
.article-figure-frame {
width: 100%;
aspect-ratio: 16 / 9;
background: linear-gradient(145deg, #F5F2EA, #FFF4E0);
border: 1px solid var(--bd);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.article-figure-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--mut);
}
.article-figure-placeholder svg {
opacity: 0.5;
}
.article-figure-placeholder-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--mut);
}
.article-figure-caption {
margin-top: 12px;
padding: 0 4px;
display: flex;
align-items: baseline;
gap: 10px;
font-size: 12.5px;
color: var(--mut);
line-height: 1.5;
font-style: italic;
}
.article-figure-caption strong {
color: var(--ink);
font-weight: 700;
font-style: normal;
}
.article-figure-caption-credit {
margin-left: auto;
font-size: 11px;
font-style: normal;
font-weight: 600;
color: var(--mut-light);
letter-spacing: 0.3px;
}
/* ---------- 9d. ARTICLE: TEST YOUR UNDERSTANDING (dark section) ----------
Full-width dark anchor between download resources and related articles.
Engagement surface with 3 quick check questions. */
.test-section {
background: var(--ink);
color: #FFFFFF;
padding: clamp(40px, 5vw, 64px) 0;
position: relative;
overflow: hidden;
}
.test-section::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(254,168,47,0.12), transparent 70%);
pointer-events: none;
}
.test-section::after {
content: '';
position: absolute;
bottom: -120px; left: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(254,168,47,0.07), transparent 70%);
pointer-events: none;
}
.test-inner {
position: relative;
z-index: 1;
max-width: 780px;
margin: 0 auto;
padding: 0 var(--s-5);
}
.test-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
color: var(--o);
letter-spacing: 0.1px;
text-transform: none;
margin-bottom: 14px;
}
.test-eyebrow svg { width: 14px; height: 14px; }
.test-section h2 {
font-size: clamp(28px, 4vw, 38px);
font-weight: 900;
line-height: 1.15;
color: #FFFFFF;
letter-spacing: -0.6px;
margin: 0 0 12px;
}
.test-section h2 .ital { color: var(--o); }
.test-intro {
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,0.75);
margin: 0 0 30px;
max-width: 600px;
}
.test-q-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 32px;
}
.test-q {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: hidden;
transition: background 160ms ease, border-color 160ms ease;
}
.test-q[open] {
background: rgba(255,255,255,0.05);
border-color: rgba(254,168,47,0.40);
}
.test-q summary {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
color: #FFFFFF;
line-height: 1.45;
list-style: none;
user-select: none;
}
.test-q summary::-webkit-details-marker { display: none; }
.test-q-num {
flex-shrink: 0;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(254,168,47,0.18);
color: var(--o);
font-size: 12px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
}
.test-q-text { flex: 1 1 auto; }
.test-q-toggle {
width: 22px; height: 22px;
flex-shrink: 0;
color: rgba(255,255,255,0.5);
transition: transform 200ms ease, color 160ms ease;
margin-top: 2px;
}
.test-q[open] .test-q-toggle { transform: rotate(180deg); color: var(--o); }
.test-q-answer {
padding: 0 20px 18px 60px;
font-size: 13.5px;
line-height: 1.55;
color: rgba(255,255,255,0.78);
}
.test-q-answer strong { color: #FFFFFF; font-weight: 700; }
.test-cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 24px;
padding-top: 24px;
}
.test-cta-row p {
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.85);
margin: 0;
flex: 1 1 auto;
min-width: 240px;
}
.test-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
background: var(--o);
color: var(--ink);
border-radius: 999px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: background 140ms ease, transform 140ms ease;
}
.test-cta-btn:hover { background: var(--o-dark); transform: translateY(-1px); }
.test-cta-btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 11px 18px;
color: rgba(255,255,255,0.85);
font-size: 13px;
font-weight: 700;
text-decoration: none;
border-bottom: 1px dashed rgba(255,255,255,0.30);
}
.test-cta-btn-ghost:hover { color: var(--o); border-bottom-color: var(--o); }
@media (max-width: 640px) {
.test-section h2 { font-size: 24px; }
.test-intro { font-size: 14px; }
.test-q summary { padding: 14px 16px; font-size: 14px; gap: 12px; }
.test-q-answer { padding: 0 16px 16px 52px; font-size: 13px; }
.test-cta-row { flex-direction: column; align-items: stretch; gap: 14px; }
.test-cta-btn { justify-content: center; }
.test-cta-btn-ghost { justify-content: center; border-bottom: none; padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
.test-q, .test-q-toggle, .test-cta-btn { transition: none; }
.test-cta-btn:hover { transform: none; }
}
/* ---------- 8b. LISTING: WHOLE-PAGE FILTER BANNER + FADE STATE ----------
When a topic chip is active, this banner appears below the trending strip
and cards across editor's-picks/news/collections that don't match the
filter get .is-filtered-out — they fade to half opacity rather than
disappearing entirely, preserving page rhythm. */
.page-filter-banner {
background: var(--ink);
color: #FFFFFF;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
font-size: 13px;
flex-wrap: wrap;
}
.page-filter-banner-text strong {
color: var(--o);
font-weight: 800;
text-transform: none;
letter-spacing: 0.1px;
margin-right: 6px;
}
.page-filter-banner-clear {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
color: #FFFFFF;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
font-family: var(--font-ui);
transition: background 140ms ease, border-color 140ms ease;
}
.page-filter-banner-clear:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.40);
}
/* Cards across sections fade when not matching the active filter */
.is-filtered-out {
opacity: 0.28;
pointer-events: none;
filter: grayscale(0.5);
transition: opacity 220ms ease, filter 220ms ease;
}
/* When a URL-driven category landing is active, non-matching cards are
hidden entirely — the user landed on a category-specific page and
expects to see only matching content. */
.is-hidden-by-filter {
display: none !important;
}
/* Section placeholder when a category-landing renders zero matches */
.section-empty-placeholder {
display: flex;
align-items: center;
gap: 14px;
padding: 24px 26px;
background: var(--cream);
border: 1px dashed var(--bd);
border-radius: 12px;
color: var(--mut);
font-size: 14px;
line-height: 1.5;
}
.section-empty-placeholder p { margin: 0; }
.section-empty-placeholder strong { color: var(--ink); font-weight: 700; }
.section-empty-icon {
flex-shrink: 0;
width: 38px; height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
border-radius: 50%;
color: var(--o-darker);
}
.news-section .section-empty-placeholder {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.14);
color: rgba(255,255,255,0.72);
}
.news-section .section-empty-placeholder strong { color: #FFFFFF; }
.news-section .section-empty-icon {
background: rgba(255,255,255,0.08);
color: var(--o);
}
@media (max-width: 640px) {
.section-empty-placeholder { padding: 16px 18px; font-size: 13px; gap: 12px; }
.section-empty-icon { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.is-filtered-out { transition: none; }
}
/* ---------- 9d-bis. ARTICLE: GOOGLE PREFERRED SOURCE WIDGET ----------
Pattern adapted from Cracku — encourages users to add CATKing as a
preferred source on Google so its articles surface higher in Discover. */
.google-pref {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 999px;
text-decoration: none;
color: var(--ink);
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
margin: 12px 0 18px;
max-width: 520px;
/* Subtle multi-stop progress accent at bottom in Google's brand colors */
position: relative;
}
.google-pref::after {
content: '';
position: absolute;
bottom: -1px;
left: 14%;
right: 14%;
height: 2px;
background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335);
border-radius: 2px;
opacity: 0.45;
transition: opacity 160ms ease;
}
.google-pref:hover {
border-color: rgba(66,133,244,0.45);
box-shadow: 0 6px 20px -10px rgba(66,133,244,0.25);
transform: translateY(-1px);
}
.google-pref:hover::after { opacity: 1; }
.google-pref-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.google-pref-text {
flex: 1 1 auto;
font-size: 14px;
font-weight: 600;
color: var(--ink);
line-height: 1.4;
}
.google-pref-text strong { font-weight: 700; }
.google-pref-arrow {
flex-shrink: 0;
color: var(--mut);
display: inline-flex;
transition: transform 160ms ease, color 160ms ease;
}
.google-pref:hover .google-pref-arrow {
transform: translateX(3px);
color: var(--ink);
}
@media (max-width: 640px) {
.google-pref { padding: 12px 16px; gap: 12px; margin: 8px 0 16px; }
.google-pref-text { font-size: 13px; }
.google-pref-icon svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.google-pref, .google-pref::after, .google-pref-arrow { transition: none; }
.google-pref:hover { transform: none; }
}
/* Sidebar variant — compact single-row card (~48px tall vs 126px before).
Icon | label | arrow. No separate eyebrow or CTA — the whole card is one tap. */
.google-pref-sidebar {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 14px;
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 12px;
text-decoration: none;
color: var(--ink);
position: relative;
overflow: hidden;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.google-pref-sidebar::before {
/* Thin brand-color accent strip at the top edge */
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #4285F4 0%, #34A853 33%, #FBBC05 66%, #EA4335 100%);
opacity: 0.85;
}
.google-pref-sidebar:hover {
border-color: rgba(66,133,244,0.40);
box-shadow: 0 6px 18px -10px rgba(66,133,244,0.25);
transform: translateY(-1px);
}
.google-pref-sidebar .google-pref-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.google-pref-sidebar-label {
flex: 1 1 auto;
min-width: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
/* Two-line clamp in case the headline wraps at very narrow sidebar widths */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.google-pref-sidebar-label strong { font-weight: 800; }
.google-pref-sidebar-arrow {
flex-shrink: 0;
color: #1976D2;
transition: transform 160ms ease;
display: inline-flex;
}
.google-pref-sidebar:hover .google-pref-sidebar-arrow {
transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
.google-pref-sidebar, .google-pref-sidebar-arrow { transition: none; }
.google-pref-sidebar:hover { transform: none; }
}
/* ---------- 9e. ARTICLE: FEEDBACK WIDGET ("How helpful…") ----------
Lives inside the article footer. Five emoji options reading 1–5 helpful,
single-select. On selection the widget transitions to a thank-you state. */
.feedback {
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 14px;
padding: 22px 24px 24px;
margin: 28px 0 0;
position: relative;
text-align: center;
transition: background 220ms ease;
}
.feedback[data-state="thanked"] {
background: linear-gradient(180deg, #FFFFFF, var(--cream));
}
.feedback h4 {
font-size: 15px;
font-weight: 800;
color: var(--ink);
margin: 0 0 18px;
letter-spacing: -0.01em;
}
.feedback-options {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(12px, 5vw, 36px);
flex-wrap: wrap;
}
.feedback-opt {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 12px;
background: var(--cream-warm);
border: 1.5px solid transparent;
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: transform 160ms cubic-bezier(.2,.7,.2,1), background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
font-family: inherit;
padding: 0;
}
.feedback-opt:hover {
transform: translateY(-3px) scale(1.08);
background: var(--cream);
box-shadow: 0 6px 16px -6px rgba(254,168,47,0.30);
}
.feedback-opt:focus-visible {
outline: 2px solid var(--o);
outline-offset: 3px;
}
.feedback-opt.is-selected {
background: var(--cream);
border-color: var(--o);
transform: scale(1.1);
box-shadow: 0 6px 18px -6px rgba(254,168,47,0.45);
}
.feedback[data-state="thanked"] .feedback-opt:not(.is-selected) {
opacity: 0.35;
pointer-events: none;
}
.feedback-thanks {
display: none;
margin-top: 16px;
font-size: 13.5px;
color: var(--mut);
line-height: 1.5;
}
.feedback-thanks strong { color: var(--ink); font-weight: 700; }
.feedback[data-state="thanked"] .feedback-thanks { display: block; }
@media (max-width: 640px) {
.feedback { padding: 18px 16px 22px; margin-top: 22px; }
.feedback h4 { font-size: 14px; margin-bottom: 14px; }
.feedback-opt { width: 46px; height: 46px; font-size: 24px; }
.feedback-options { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.feedback, .feedback-opt { transition: none; }
.feedback-opt:hover { transform: none; }
.feedback-opt.is-selected { transform: none; }
}
/* ---------- 9f. ARTICLE: RECENT ARTICLES STRIP ----------
Light section just below the dark Test section, before Related Blogs.
Shows the 4 most recent posts site-wide (irrespective of topic) so users
who just finished reading can keep going on whatever just hit the site. */
.recent-section {
background: var(--cream-warm);
padding: clamp(36px, 4vw, 56px) 0 clamp(28px, 3vw, 44px);
}
.recent-section .section-head {
margin-bottom: 24px;
}
.recent-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.recent-card {
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 12px;
padding: 16px 18px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.recent-card:hover {
border-color: var(--o);
transform: translateY(-2px);
box-shadow: 0 8px 22px -14px rgba(15,15,28,0.18);
}
.recent-card-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
color: var(--o-darker);
letter-spacing: 0.1px;
text-transform: none;
}
.recent-card-meta .sep {
width: 3px; height: 3px;
background: var(--mut-light);
border-radius: 50%;
}
.recent-card-meta .date { color: var(--mut); text-transform: none; font-weight: 600; letter-spacing: 0; }
.recent-card h3 {
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--ink);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: -0.005em;
}
.recent-card-author {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bd-light);
font-size: 12px;
color: var(--mut);
font-weight: 600;
}
.recent-av {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--o);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 10px;
letter-spacing: 0.2px;
flex-shrink: 0;
}
@media (max-width: 980px) {
.recent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.recent-grid { grid-template-columns: 1fr; gap: 12px; }
.recent-card { padding: 14px 16px; }
}
/* ---------- 9. REUSABLE CATEGORY DROPDOWN (.cat-select) ----------
Used by both: blog listing "More categories" filter + news section filter.
Anchored panel, searchable, optional grouping. */
.cat-select {
position: relative;
display: inline-block;
}
/* Trigger button — styled to harmonize with .chip + .news-tab */
.cat-select-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px 8px 16px;
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: var(--ink);
cursor: pointer;
font-family: var(--font-ui);
transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
line-height: 1.2;
white-space: nowrap;
}
.cat-select-trigger:hover { border-color: var(--ink); }
.cat-select-trigger[aria-expanded="true"] {
background: var(--ink);
border-color: var(--ink);
color: #FFFFFF;
}
.cat-select-trigger[aria-expanded="true"] .cat-select-count { background: rgba(255,255,255,0.18); color: #FFFFFF; }
.cat-select-trigger[aria-expanded="true"] .cat-select-chevron { transform: rotate(180deg); }
.cat-select-label { font-size: 15px; font-weight: 700; }
.cat-select-label-pre {
color: var(--mut);
font-weight: 600;
margin-right: 4px;
}
.cat-select-trigger[aria-expanded="true"] .cat-select-label-pre { color: rgba(255,255,255,0.65); }
.cat-select-count {
display: inline-block;
padding: 1px 7px;
font-size: 11px;
font-weight: 700;
background: var(--bd-light);
border-radius: 999px;
color: var(--mut);
}
.cat-select-chevron {
width: 13px; height: 13px;
margin-left: 2px;
transition: transform 180ms ease;
flex-shrink: 0;
}
/* Trigger variant: looks like a clickable chip (matches .chip dimensions) */
.cat-select-trigger.is-chip {
padding: 8px 16px 8px 18px;
font-size: 14px;
font-weight: 700;
}
/* Panel
Uses position:fixed so it escapes any ancestor stacking context (the
nearest .container has z-index:1 which would otherwise trap an
absolutely-positioned panel below sibling cards). JS sets `top` and
`left` from the trigger's getBoundingClientRect when the panel opens. */
.cat-select-panel {
position: fixed;
/* Default top/left — overridden by JS. Initial values keep markup safe
if JS doesn't run. */
top: auto;
left: auto;
min-width: 320px;
max-width: 460px;
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 14px;
box-shadow: 0 16px 48px -16px rgba(15,15,28,0.20),
0 4px 12px -6px rgba(15,15,28,0.08);
z-index: var(--z-dropdown);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: min(64vh, 520px);
}
.cat-select-panel[hidden] { display: none; }
.cat-select.is-right .cat-select-panel { left: auto; right: 0; }
/* Search field inside panel */
.cat-select-search-wrap {
position: relative;
padding: 12px 12px 8px;
border-bottom: 1px solid var(--bd-light);
flex-shrink: 0;
}
.cat-select-search {
width: 100%;
padding: 10px 14px 10px 38px;
font-size: 13.5px;
font-family: var(--font-ui);
background: var(--bd-light);
border: 1px solid transparent;
border-radius: 8px;
color: var(--ink);
outline: none;
transition: border-color 140ms ease, background 140ms ease;
}
.cat-select-search::placeholder { color: var(--mut-light); }
.cat-select-search:focus {
background: #FFFFFF;
border-color: var(--ink);
}
.cat-select-search-icon {
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--mut-light);
pointer-events: none;
}
/* Scrollable items area */
.cat-select-list {
overflow-y: auto;
padding: 6px 4px 8px;
flex: 1 1 auto;
scrollbar-width: thin;
scrollbar-color: var(--bd) transparent;
}
.cat-select-list::-webkit-scrollbar { width: 8px; }
.cat-select-list::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 4px; }
.cat-select-list::-webkit-scrollbar-thumb:hover { background: var(--mut-light); }
/* Group header */
.cat-select-group {
margin: 6px 0 2px;
padding: 6px 16px 4px;
font-size: 10.5px;
font-weight: 800;
color: var(--mut);
text-transform: uppercase;
letter-spacing: 1.2px;
}
.cat-select-group:first-child { margin-top: 2px; }
/* Items */
.cat-select-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 9px 14px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
background: transparent;
border: none;
border-radius: 7px;
cursor: pointer;
font-family: var(--font-ui);
text-align: left;
transition: background 100ms ease;
}
.cat-select-item:hover,
.cat-select-item.is-keynav {
background: var(--bd-light);
}
.cat-select-item[aria-selected="true"] {
background: var(--cream);
color: var(--o-darker);
font-weight: 700;
}
.cat-select-item[aria-selected="true"]::after {
content: '';
width: 14px;
height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
flex-shrink: 0;
margin-left: auto;
}
.cat-select-item-count {
font-size: 11px;
font-weight: 600;
color: var(--mut-light);
flex-shrink: 0;
}
.cat-select-item[aria-selected="true"] .cat-select-item-count { color: var(--o-dark); }
/* Empty state for search-no-results */
.cat-select-empty {
padding: 24px 16px;
text-align: center;
font-size: 13px;
color: var(--mut);
}
/* Mobile: full-width panel */
@media (max-width: 640px) {
.cat-select-panel {
position: fixed;
top: auto;
bottom: 12px;
left: 12px;
right: 12px;
min-width: 0;
max-width: none;
max-height: 70vh;
border-radius: 16px;
animation: catPanelSlideUp 220ms cubic-bezier(.2,.7,.2,1);
}
.cat-select.is-right .cat-select-panel { right: 12px; left: 12px; }
.cat-select-panel-backdrop {
position: fixed;
inset: 0;
background: rgba(15,15,28,0.30);
z-index: calc(var(--z-dropdown) - 1);
animation: catBackdropFade 180ms ease;
}
}
@keyframes catPanelSlideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes catBackdropFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Focus rings */
.cat-select-trigger:focus-visible,
.cat-select-item:focus-visible {
outline: 2px solid var(--o);
outline-offset: 2px;
}
.cat-select-search:focus-visible { outline: none; /* handled via :focus styling */ }
@media (prefers-reduced-motion: reduce) {
.cat-select-chevron,
.cat-select-panel { transition: none; animation: none; }
}
/* ============================================================
LANDING-PAGE PARITY: HEADER + FOOTER + FINAL CTA + DRAWER
Mirrors CATKing_Results_Revamp_v16.html exactly so blog
pages feel like part of the same site as catking.in.
============================================================ */
/* Color variables matching landing — alongside our blog tokens */
:root {
--tn-navy: #1a1a2e;
--tn-muted: #6b6b7d;
--tn-border: #e6e6ec;
--tn-bg: #f5f7fa;
--tn-orange-l: #FFF4E0;
--tn-orange-d: #E8951F;
--tn-mint: #1F8A5B;
}
/* ---------- TOP NAV (.tn) — fixed, white, matches landing exactly ---------- */
.tn {
background: #fff;
border-bottom: 1px solid var(--tn-border);
padding: 0 26px;
display: flex;
align-items: center;
gap: 18px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-nav);
height: 62px;
box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.tn .tn-logo {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-weight: 900;
font-size: 18px;
color: var(--tn-navy);
letter-spacing: -0.2px;
/* Tap target: 44px minimum (Apple HIG / WCAG AAA 2.5.5) */
min-height: 44px;
text-decoration: none;
}
.tn .tn-logo .tn-logo-mark {
width: 30px;
height: 30px;
border-radius: 7px;
background: var(--o);
color: var(--tn-navy);
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 16px;
}
.tn .tn-links {
display: flex;
gap: 2px;
flex: 1;
margin-left: 28px;
}
.tn .tn-links a {
color: var(--tn-muted);
font-size: 14px;
font-weight: 700;
padding: 8px 14px;
border-radius: 8px;
letter-spacing: 0.3px;
transition: all 0.15s ease;
text-decoration: none;
}
.tn .tn-links a:hover { color: var(--tn-navy); background: var(--tn-bg); }
.tn .tn-links a.act { color: var(--tn-navy); background: var(--tn-orange-l); }
.tn .tn-right {
display: flex;
gap: 10px;
align-items: center;
}
.tn .tn-right .tn-login {
color: var(--tn-navy);
font-size: 14px;
font-weight: 700;
padding: 9px 16px;
border-radius: 8px;
text-decoration: none;
}
.tn .tn-right .tn-login:hover { background: var(--tn-bg); }
.tn .tn-right .tn-apply {
background: var(--o);
color: #fff;
padding: 11px 22px;
/* Sharper 6px corners matching the FCTA CTAs */
border-radius: 6px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.4px;
box-shadow: 0 4px 10px -3px rgba(254,168,47,0.40),
0 1px 3px rgba(15,15,28,0.10);
transition: background 140ms ease, transform 180ms cubic-bezier(.2,.7,.2,1), box-shadow 180ms ease;
text-decoration: none;
}
.tn .tn-right .tn-apply:hover {
background: var(--tn-orange-d);
transform: translateY(-1px);
box-shadow: 0 8px 16px -4px rgba(254,168,47,0.50),
0 2px 6px rgba(15,15,28,0.12);
}
.tn-burger {
display: none;
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
/* Apple HIG: 44pt minimum tap target. Material Design: 48dp. */
width: 44px;
height: 44px;
flex-direction: column;
justify-content: center;
gap: 5px;
align-items: center;
margin-left: auto;
border-radius: 8px;
transition: background 0.15s ease;
}
.tn-burger:hover { background: var(--tn-bg); }
.tn-burger span {
display: block;
width: 22px;
height: 2.5px;
background: var(--tn-navy);
border-radius: 2px;
transition: all 0.25s ease;
}
.tn-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.tn-burger.open span:nth-child(2) { opacity: 0; }
.tn-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Body padding to compensate for fixed nav */
/*body { padding-top: 62px; }*/
/* ---------- MOBILE DRAWER (.tn-drawer) ---------- */
.tn-drawer {
position: fixed;
top: 0;
right: -320px;
width: 300px;
max-width: 85vw;
height: 100vh;
background: #fff;
z-index: var(--z-modal);
box-shadow: -20px 0 50px rgba(0,0,0,0.25);
transition: right 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.tn-drawer.open { right: 0; }
.tn-drawer-inner {
display: flex;
flex-direction: column;
height: 100%;
}
.tn-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid var(--tn-border);
}
.tn-drawer-head .tn-drawer-logo {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-weight: 900;
font-size: 16px;
color: var(--tn-navy);
}
.tn-drawer-head .tn-drawer-logo .tn-logo-mark {
width: 28px; height: 28px;
border-radius: 6px;
background: var(--o);
display: flex; align-items: center; justify-content: center;
font-weight: 900;
}
.tn-drawer-close {
background: transparent;
border: 0;
font-size: 34px;
color: var(--tn-muted);
cursor: pointer;
line-height: 1;
/* Tap target: 44×44 minimum */
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 8px;
transition: all 0.15s ease;
}
.tn-drawer-close:hover {
color: var(--tn-navy);
background: var(--tn-bg);
}
.tn-drawer-links {
flex: 1;
padding: 14px 10px;
display: flex;
flex-direction: column;
}
.tn-drawer-links a {
padding: 14px 16px;
font-size: 15px;
font-weight: 700;
color: var(--tn-navy);
border-radius: 10px;
transition: all 0.15s ease;
letter-spacing: -0.1px;
text-decoration: none;
}
.tn-drawer-links a:hover,
.tn-drawer-links a:active {
background: var(--tn-bg);
color: var(--tn-orange-d);
}
.tn-drawer-links a.act {
background: var(--tn-orange-l);
color: var(--tn-orange-d);
}
.tn-drawer-cta {
padding: 18px 22px;
border-top: 1px solid var(--tn-border);
background: #fafaf7;
}
.tn-drawer-enroll {
display: block;
background: var(--o);
color: #fff;
text-align: center;
padding: 14px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.3px;
margin-bottom: 14px;
box-shadow: 0 4px 14px rgba(254,168,47,0.3);
text-decoration: none;
}
.tn-drawer-enroll:hover { background: #F89B1A; }
.tn-drawer-contact { text-align: center; }
.tn-drawer-contact a {
font-size: 13px;
font-weight: 700;
color: var(--tn-navy);
text-decoration: none;
}
.tn-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(10,10,20,0.5);
opacity: 0;
pointer-events: none;
z-index: var(--z-modal-backdrop);
transition: opacity 0.3s ease;
}
.tn-drawer-backdrop.show {
opacity: 1;
pointer-events: auto;
}
/* ============================================================
10. COLLECTION PAGE
Dedicated layout for /collections/cat-roadmap and siblings.
Visual character: more "course landing" than "blog index" —
denser hero, ordered numbered article list, phase grouping,
outcomes block, curator+other-collections sidebar.
============================================================ */
/* ---------- 10a. COLLECTION HERO ---------- */
.collection-hero {
background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 72px);
border-bottom: 1px solid rgba(199,122,20,0.10);
position: relative;
overflow: hidden;
}
.collection-hero::before {
/* Subtle warm corner glow */
content: '';
position: absolute;
top: -120px; right: -80px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(254,168,47,0.10), transparent 70%);
pointer-events: none;
}
.collection-hero .crumb { margin-bottom: 20px; }
.collection-hero-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 56px;
align-items: center;
position: relative;
z-index: 1;
}
.collection-hero-text { min-width: 0; }
.collection-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 800;
color: var(--o-darker);
background: #FFFFFF;
border: 1px solid rgba(199,122,20,0.30);
padding: 7px 14px;
border-radius: 999px;
letter-spacing: 0.1px;
text-transform: none;
margin-bottom: 16px;
}
.collection-eyebrow-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.collection-hero h1 {
font-size: clamp(32px, 5vw, 52px);
font-weight: 900;
color: var(--ink);
margin: 0 0 14px;
line-height: 1.08;
letter-spacing: -1.0px;
}
.collection-hero h1 .ital {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
color: var(--o-darker);
}
.collection-deck {
font-size: 16px;
line-height: 1.55;
color: var(--txt);
max-width: 600px;
margin: 0 0 24px;
}
/* Collection stat row — total scope summary */
.collection-stats {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 14px 18px;
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 12px;
margin-bottom: 22px;
width: fit-content;
max-width: 100%;
}
.collection-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.collection-stat-num {
font-size: 24px;
font-weight: 900;
color: var(--ink);
line-height: 1;
letter-spacing: -0.5px;
}
.collection-stat-unit {
font-size: 13.5px;
font-weight: 700;
color: var(--mut);
margin-left: 1px;
}
.collection-stat-label {
font-size: 13.5px;
font-weight: 600;
color: var(--mut);
letter-spacing: 0.1px;
text-transform: none;
}
.collection-stat-sep {
width: 1px;
height: 24px;
background: var(--bd);
flex-shrink: 0;
}
/* Hero CTA row */
.collection-cta-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.collection-start-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--ink);
color: #FFFFFF;
font-size: 14px;
font-weight: 800;
text-decoration: none;
border-radius: 999px;
transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.collection-start-btn:hover {
background: #25253A;
color : #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 24px -10px rgba(15,15,28,0.35);
}
.collection-start-btn svg { transition: transform 160ms ease; }
.collection-start-btn:hover svg { transform: translateX(2px); }
.collection-jump-btn {
font-size: 13px;
font-weight: 700;
color: var(--mut);
text-decoration: none;
border-bottom: 1px dashed var(--mut-light);
padding-bottom: 1px;
transition: color 140ms ease, border-color 140ms ease;
}
.collection-jump-btn:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
/* Hero visual — decorative SVG */
.collection-hero-visual {
display: block;
}
.collection-hero-visual svg {
width: 100%;
height: auto;
max-width: 320px;
display: block;
}
/* ---------- 10b. COLLECTION BODY ---------- */
.collection-body {
background: var(--cream-warm);
padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 96px);
}
.collection-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 56px;
align-items: start;
}
.collection-main { min-width: 0; }
/* Phase / section grouping */
.collection-section {
margin-bottom: 40px;
}
.collection-section:last-of-type { margin-bottom: 28px; }
.collection-section-head {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(199,122,20,0.18);
}
.collection-section-num {
flex-shrink: 0;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.1px;
text-transform: none;
color: var(--o-darker);
background: #FFFFFF;
border: 1px solid rgba(199,122,20,0.30);
padding: 6px 10px;
border-radius: 6px;
margin-top: 4px;
}
.collection-section-head h2 {
font-size: 26px;
font-weight: 900;
color: var(--ink);
margin: 0 0 4px;
letter-spacing: -0.4px;
line-height: 1.2;
}
.collection-section-head h2 .ital {
font-family: Georgia, serif;
font-style: italic;
font-weight: 400;
color: var(--o-darker);
}
.collection-section-head p {
font-size: 15px;
color: var(--mut);
margin: 0;
line-height: 1.5;
}
/* Ordered article list */
.collection-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.collection-item-link {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 18px;
background: #FFFFFF;
border: 1px solid var(--bd);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
position: relative;
}
.collection-item-link:hover {
border-color: var(--o);
transform: translateY(-1px);
box-shadow: 0 8px 22px -12px rgba(15,15,28,0.18);
}
.collection-item-link::before {
content: '';
position: absolute;
left: -1px; top: -1px; bottom: -1px;
width: 3px;
background: var(--o);
border-radius: 10px 0 0 10px;
opacity: 0;
transition: opacity 160ms ease;
}
.collection-item-link:hover::before { opacity: 1; }
.collection-item-num {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--cream);
color: var(--o-darker);
font-size: 12px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2px;
font-family: var(--font-ui);
transition: background 160ms ease, color 160ms ease;
}
.collection-item-link:hover .collection-item-num {
background: var(--o);
color: var(--ink);
}
.collection-item-body { flex: 1 1 auto; min-width: 0; }
.collection-item-body h3 {
font-size: 17px;
font-weight: 700;
color: var(--ink);
margin: 0 0 4px;
line-height: 1.32;
letter-spacing: -0.005em;
}
.collection-item-body p {
font-size: 15px;
color: var(--mut);
line-height: 1.5;
margin: 0 0 8px;
/* Cap description at 2 lines so items stay uniform height */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.collection-item-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--mut);
font-weight: 600;
flex-wrap: wrap;
}
.collection-item-author {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--txt);
}
.collection-item-av {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--o);
color: var(--ink);
font-size: 9px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.2px;
}
.collection-item-time { color: var(--o-darker); font-weight: 700; }
.collection-item-week {
display: inline-block;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1px;
text-transform: none;
color: var(--mut);
background: var(--cream);
padding: 2px 6px;
border-radius: 3px;
}
.collection-item-dot {
width: 3px;
height: 3px;
background: var(--mut-light);
border-radius: 50%;
flex-shrink: 0;
}
.collection-item-arrow {
flex-shrink: 0;
color: var(--mut-light);
margin-top: 8px;
transition: color 160ms ease, transform 160ms ease;
}
.collection-item-link:hover .collection-item-arrow {
color: var(--o);
transform: translateX(3px);
}
/* Outcomes block — what you'll know at the end */
.collection-outcomes {
background: var(--ink);
color: #FFFFFF;
border-radius: 14px;
padding: 28px 32px 30px;
margin-top: 32px;
position: relative;
overflow: hidden;
}
.collection-outcomes::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(254,168,47,0.14), transparent 70%);
pointer-events: none;
}
.collection-outcomes-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.collection-outcomes-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(254,168,47,0.18);
color: var(--o);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.collection-outcomes-head h2 {
font-size: 20px;
font-weight: 900;
color: #FFFFFF;
margin: 0;
letter-spacing: -0.3px;
}
.collection-outcomes-head h2 .ital {
color: var(--o);
font-family: Georgia, serif;
font-style: italic;
font-weight: 400;
}
.collection-outcomes-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 1;
}
.collection-outcomes-list li {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,0.85);
padding-left: 26px;
position: relative;
}
.collection-outcomes-list li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 8px;
border-left: 2px solid var(--o);
border-bottom: 2px solid var(--o);
transform: rotate(-45deg);
}
/* ---------- 10c. COLLECTION SIDEBAR ---------- */
.collection-aside {
display: flex;
flex-direction: column;
gap: 16px;
align-self: start;
}
@media (min-width: 901px) {
.collection-aside {
position: sticky;
top: calc(60px + 12px);
}
}
/* Curator card */
.collection-curator {
padding: 18px;
}
.collection-curator h4 { display: none; }
.collection-curator-eyebrow {
display: block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.1px;
text-transform: none;
color: var(--mut);
margin-bottom: 10px;
}
.collection-curator-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--bd-light);
}
.collection-curator-av {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--o);
color: var(--ink);
font-size: 13px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.collection-curator-name {
display: block;
font-size: 14px;
font-weight: 800;
color: var(--ink);
}
.collection-curator-role {
display: block;
font-size: 11.5px;
color: var(--mut);
font-weight: 600;
}
.collection-curator-bio {
font-size: 13px;
line-height: 1.5;
color: var(--txt);
margin: 0 0 12px;
}
.collection-curator-link {
font-size: 12.5px;
font-weight: 700;
color: var(--o-darker);
text-decoration: none;
border-bottom: 1px solid rgba(199,122,20,0.30);
padding-bottom: 1px;
transition: color 140ms ease, border-color 140ms ease;
}
.collection-curator-link:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
/* Other collections list */
.other-collections { padding: 16px 18px; }
.other-collection-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
margin: 0 -14px;
border-top: 1px solid var(--bd-light);
text-decoration: none;
color: inherit;
transition: background 160ms ease;
}
.other-collection-item:first-of-type { border-top: none; padding-top: 4px; }
.other-collection-item:hover { background: var(--cream); }
.other-collection-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--cream);
color: var(--o-darker);
display: inline-flex;
align-items: center;
justify-content: center;
}
.other-collection-name {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--ink);
margin-bottom: 1px;
line-height: 1.3;
}
.other-collection-meta {
display: block;
font-size: 11.5px;
color: var(--mut);
font-weight: 600;
}
/* ---------- 10d. COLLECTION RESPONSIVE ---------- */
@media (max-width: 980px) {
.collection-hero-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.collection-hero-visual {
order: -1;
max-width: 240px;
}
.collection-grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.collection-grid > * {
min-width: 0;
max-width: 100%;
}
.collection-aside {
position: static;
}
}
@media (max-width: 640px) {
.collection-hero h1 { font-size: 28px; letter-spacing: -0.6px; }
.collection-deck { font-size: 14.5px; }
.collection-stats { padding: 12px 14px; gap: 14px; }
.collection-stat-num { font-size: 20px; }
.collection-stat-label { font-size: 10.5px; }
.collection-stat-sep { height: 20px; }
.collection-start-btn { padding: 11px 20px; font-size: 13.5px; }
.collection-section-head { gap: 12px; }
.collection-section-num { font-size: 10px; padding: 5px 8px; }
.collection-section-head h2 { font-size: 19px; }
.collection-section-head p { font-size: 13px; }
.collection-item-link { padding: 12px 14px; gap: 12px; }
.collection-item-num { width: 28px; height: 28px; font-size: 11px; }
.collection-item-body h3 { font-size: 14.5px; }
.collection-item-body p { font-size: 12.5px; -webkit-line-clamp: 2; }
.collection-item-arrow { display: none; }
.collection-outcomes { padding: 22px 20px 24px; }
.collection-outcomes-head h2 { font-size: 18px; }
.collection-outcomes-list li { font-size: 13.5px; padding-left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.collection-item-link,
.collection-item-link::before,
.collection-item-num,
.collection-item-arrow,
.collection-start-btn,
.collection-start-btn svg { transition: none; }
.collection-item-link:hover,
.collection-start-btn:hover { transform: none; }
}
/* ---------- FINAL CTA (.fcta) ---------- */
.fcta {
background: var(--ink);
color: #fff;
padding: clamp(48px, 6vw, 72px) 0;
position: relative;
overflow: hidden;
}
.fcta::before {
content: "";
position: absolute;
top: -150px; left: -100px;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(254,168,47,0.14), transparent 70%);
}
.fcta::after {
content: "";
position: absolute;
bottom: -100px; right: -100px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(31,138,91,0.12), transparent 70%);
}
.fcta-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 28px;
text-align: center;
position: relative;
z-index: 2;
}
.fcta .fcta-eyebrow {
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: none;
color: var(--o);
margin-bottom: 20px;
}
.fcta h2 {
font-size: 56px;
font-weight: 900;
letter-spacing: -2.2px;
line-height: 1;
margin-bottom: 22px;
color: #fff;
}
.fcta h2 .serif {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
color: var(--o);
}
.fcta p {
font-size: 17px;
opacity: 0.8;
max-width: 640px;
margin: 0 auto 36px;
line-height: 1.6;
}
.fcta-ctas {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 36px;
}
.fcta-ctas .fcta-btn {
padding: 18px 36px;
/* 6px corner radius (was 10px) — gives the buttons a sharper, more editorial
edge. Pill-rounded CTAs feel app-y; rectangular CTAs feel deliberate. */
border-radius: 6px;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.4px;
display: inline-flex;
align-items: center;
gap: 10px;
transition: transform 180ms cubic-bezier(.2,.7,.2,1),
background 140ms ease,
box-shadow 180ms ease,
color 140ms ease;
text-decoration: none;
}
.fcta-ctas .fcta-btn:hover { transform: translateY(-2px); }
.fcta-ctas .fcta-btn.p {
background: var(--o);
color: var(--ink);
/* Tighter, more directional shadow (was a wide diffuse orange glow) */
box-shadow: 0 10px 24px -10px rgba(254,168,47,0.55),
0 2px 6px -2px rgba(15,15,28,0.20);
}
.fcta-ctas .fcta-btn.p:hover {
background: var(--o-dark);
box-shadow: 0 16px 32px -12px rgba(254,168,47,0.60),
0 4px 10px -4px rgba(15,15,28,0.25);
}
.fcta-ctas .fcta-btn.s {
background: rgba(255,255,255,0.04);
color: #fff;
/* 1.5px border instead of 2px — feels more refined */
border: 1.5px solid rgba(255,255,255,0.85);
}
.fcta-ctas .fcta-btn.s:hover {
/*background: #fff;*/
color: var(--ink);
}
.fcta-contacts {
display: flex;
gap: 30px;
justify-content: center;
flex-wrap: wrap;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 14px;
}
.fcta-contacts .c {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: rgba(255,255,255,0.7);
}
.fcta-contacts .c b {
color: #fff;
font-weight: 800;
letter-spacing: 0.3px;
}
/* ---------- FOOTER (.ft) — 4-column matching landing exactly ---------- */
.ft {
background: #0a0a14;
color: #fff;
padding: 60px 0 30px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.ft-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 28px;
}
.ft-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.ft-col {
display: flex;
flex-direction: column;
}
.ft-col .ft-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
font-family: var(--font-ui);
font-weight: 900;
font-size: 20px;
color: #fff;
}
.ft-col .ft-logo .tn-logo-mark {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--o);
color: var(--tn-navy);
display: flex; align-items: center; justify-content: center;
font-weight: 900;
font-size: 18px;
}
.ft-desc {
font-size: 13px;
opacity: 0.6;
line-height: 1.6;
margin-bottom: 18px;
color: #fff;
}
.ft-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1px;
color: var(--tn-mint);
padding: 6px 12px;
border: 1px solid rgba(31,138,91,0.4);
border-radius: 20px;
background: rgba(31,138,91,0.08);
}
.ft-badge::before {
content: "✓";
font-weight: 900;
}
.ft-social {
display: flex;
gap: 8px;
margin-top: 18px;
}
.ft-social a {
width: 34px; height: 34px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
transition: all 0.15s ease;
text-decoration: none;
}
.ft-social a:hover {
background: var(--o);
color: var(--tn-navy);
transform: translateY(-2px);
}
.ft h4 {
font-size: 14px;
font-weight: 800;
letter-spacing: 0.1px;
color: var(--o);
margin: 0 0 18px;
font-family: var(--font-ui);
}
.ft ul {
list-style: none;
padding: 0;
margin: 0;
}
.ft ul li {
margin-bottom: 12px;
}
.ft ul li a {
font-size: 14px;
color: #fff;
opacity: 0.78;
transition: all 0.15s ease;
text-decoration: none;
}
.ft ul li a:hover {
opacity: 1;
color: var(--o);
}
.ft-bot {
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #fff;
opacity: 0.70;
flex-wrap: wrap;
gap: 12px;
}
.ft-bot a {
color: #fff;
text-decoration: none;
}
.ft-bot a:hover { color: var(--o); opacity: 1; }
.ft-bot-links {
display: flex;
gap: 18px;
}
/* ---------- MOBILE for .tn / .ft / .fcta ---------- */
@media (max-width: 900px) {
.tn {
padding: 0 14px;
height: 60px;
}
.tn .tn-links,
.tn .tn-right .tn-login {
display: none;
}
.tn .tn-right { margin-left: auto; gap: 8px; }
.tn .tn-right .tn-apply {
/* Bumped from 12px/9-14 to readable + tappable size. min-height 44 meets
Apple HIG/Material tap-target standard. */
font-size: 13px;
padding: 11px 16px;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.tn-burger { display: flex; }
body { padding-top: 60px; }
.fcta { padding: 44px 0; }
.fcta h2 { font-size: 32px; letter-spacing: -1.0px; }
.fcta p { font-size: 14.5px; }
.fcta-ctas { flex-direction: column; gap: 10px; }
.fcta-ctas .fcta-btn {
width: 100%;
justify-content: center;
}
.fcta-contacts {
flex-direction: column;
gap: 8px;
font-size: 12.5px;
}
.ft { padding: 40px 0 20px; }
.ft-inner { padding: 0 18px; }
.ft-row {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.ft-bot {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
@media (max-width: 520px) {
.ft-row {
grid-template-columns: 1fr;
gap: 28px;
}
.fcta h2 { font-size: 30px; letter-spacing: -1px; }
}
/* ============================================================
ARCHIVE PAGE STYLES — /news, /recaps, /blog/collections
ADMIN STYLES — /admin/news
============================================================
These were referenced by Blade templates (news/archive.blade.php,
recaps/index.blade.php, blog/collections-index.blade.php,
admin/news/index.blade.php) but not present in the original mockup
since the mockup only covered the listing, article, and collection
pages. Added here so the archives render with the same design tokens
as the rest of the site. */
/* ---------- 1. NEWS ARCHIVE (/news) ---------- */
.news-archive-hero {
background: var(--cream);
padding: 48px 0 32px;
border-bottom: 1px solid var(--bd);
}
.news-archive-hero .container { max-width: 1100px; }
.news-archive-h1 {
font-size: 44px; font-weight: 900; color: var(--ink);
letter-spacing: -1.2px; line-height: 1.0; margin: 12px 0 16px;
text-wrap: balance;
}
.news-archive-h1 .ital { color: var(--o); }
.news-archive-deck {
font-size: 17px; line-height: 1.6; color: var(--txt);
max-width: 620px; margin: 0;
}
.news-archive-body {
padding: 32px 0 64px;
background: var(--bg);
}
/* Category filter row — horizontal scrollable strip of category chips */
.news-archive-filter {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 28px;
}
.news-filter-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: var(--r-pill);
background: #fff; border: 1px solid var(--bd);
font-size: 13.5px; font-weight: 700; color: var(--ink);
text-decoration: none;
transition: all 140ms ease;
}
.news-filter-chip:hover { border-color: var(--o); color: var(--o-dark); }
.news-filter-chip.is-active {
background: var(--cream); border-color: var(--o); color: var(--o-dark);
}
.news-filter-count {
font-size: 12px; opacity: 0.65; font-weight: 700;
}
/* News card grid: 3-up desktop, 2-up tablet, 1-up mobile.
Distinct from .cards-grid (which is 4-up) because news cards are
denser and shorter. */
.news-archive-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 40px;
}
@media (max-width: 900px) {
.news-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.news-archive-grid { grid-template-columns: 1fr; }
}
/* ---------- 2. RECAPS ARCHIVE (/recaps) ---------- */
.recaps-hero {
background: linear-gradient(180deg, var(--ink) 0%, #1a1a30 100%);
color: #fff;
padding: 56px 0 40px;
}
.recaps-hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11.5px; font-weight: 800;
letter-spacing: 0.6px; text-transform: uppercase;
color: var(--o);
margin-bottom: 16px;
}
.recaps-hero-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--o);
animation: recapsPulse 2s ease-in-out infinite;
}
@keyframes recapsPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.recaps-hero-h1 {
font-size: 44px; font-weight: 900; color: #fff;
letter-spacing: -1.4px; line-height: 1.0; margin: 0 0 16px;
text-wrap: balance;
}
.recaps-hero-h1 .ital { color: var(--o); }
.recaps-hero-deck {
font-size: 17px; line-height: 1.6; color: #C5C5D0;
max-width: 640px; margin: 0;
}
.recaps-body { padding: 32px 0 64px; background: var(--bg); }
/* Recaps grid: 2-up desktop, 1-up mobile.
Recap cards are wider/deeper than article cards (more text, less imagery)
so 2-up reads better than 3-up. */
.recaps-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 40px;
}
@media (max-width: 900px) {
.recaps-grid { grid-template-columns: 1fr; }
}
/* ---------- 3. COLLECTIONS INDEX (/blog/collections) ---------- */
.collections-index-hero {
background: var(--cream);
padding: 48px 0 32px;
border-bottom: 1px solid var(--bd);
}
.collections-index-h1 {
font-size: 44px; font-weight: 900; color: var(--ink);
letter-spacing: -1.2px; line-height: 1.0; margin: 12px 0 16px;
text-wrap: balance;
}
.collections-index-h1 .ital { color: var(--o); }
.collections-index-deck {
font-size: 17px; line-height: 1.6; color: var(--txt);
max-width: 640px; margin: 0;
}
.collections-index-body { padding: 32px 0 64px; }
/* ---------- 4. ADMIN NEWS MODERATION (/admin/news) ---------- */
.admin-page { background: #f5f5f8; min-height: 100vh; }
.admin-news { padding: 48px 0 64px; }
.admin-news-head { margin-bottom: 32px; }
.admin-news-head h1 {
font-size: 32px; font-weight: 900; color: var(--ink);
letter-spacing: -0.8px; margin: 0 0 8px;
}
.admin-news-sub {
font-size: 14.5px; line-height: 1.5; color: var(--txt);
max-width: 640px; margin: 0;
}
.admin-flash {
padding: 12px 16px; border-radius: 8px;
background: #E6F4EA; border: 1px solid #C8E6CC;
color: #1B5E20; font-size: 14px; font-weight: 600;
margin-bottom: 24px;
}
.admin-news-table {
width: 100%; border-collapse: collapse;
background: #fff; border: 1px solid var(--bd);
border-radius: 8px; overflow: hidden;
font-size: 14px;
}
.admin-news-table thead {
background: #f5f5f8;
border-bottom: 1.5px solid var(--bd);
}
.admin-news-table th {
padding: 12px 14px; text-align: left;
font-weight: 700; color: var(--mut);
font-size: 11.5px; text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-news-table td {
padding: 14px;
border-bottom: 1px solid var(--bd);
vertical-align: top;
}
.admin-news-table tbody tr:last-child td { border-bottom: none; }
.admin-news-table tbody tr.is-deleted { opacity: 0.55; }
.admin-news-table tbody tr.is-deleted td a strong { text-decoration: line-through; }
.admin-news-source {
font-size: 12.5px; color: var(--mut); margin-top: 4px;
display: flex; align-items: center; gap: 8px;
}
.admin-news-pill {
display: inline-block;
padding: 2px 6px;
background: #E6F4EA; color: #1B5E20;
font-size: 10px; font-weight: 800;
letter-spacing: 0.3px;
border-radius: 4px;
}
.admin-status {
display: inline-block;
padding: 3px 8px; border-radius: 4px;
font-size: 11px; font-weight: 800;
letter-spacing: 0.3px; text-transform: uppercase;
}
.admin-status-live { background: #E6F4EA; color: #1B5E20; }
.admin-status-hidden { background: #FBEDED; color: #B71C1C; }
.admin-news-form { display: inline; }
.admin-btn {
padding: 6px 12px; border-radius: 6px;
font-size: 12.5px; font-weight: 700;
cursor: pointer; border: 1px solid transparent;
transition: all 120ms ease;
}
.admin-btn-hide {
background: #fff; color: #B71C1C; border-color: #E5C2C2;
}
.admin-btn-hide:hover {
background: #FBEDED; border-color: #B71C1C;
}
.admin-btn-restore {
background: var(--o); color: var(--ink);
}
.admin-btn-restore:hover { background: var(--o-dark); color: #fff; }
/* ---------- 5. MOBILE TWEAKS FOR THE ABOVE ---------- */
@media (max-width: 640px) {
.news-archive-hero,
.recaps-hero,
.collections-index-hero { padding: 32px 0 24px; }
.news-archive-h1,
.recaps-hero-h1,
.collections-index-h1 { font-size: 32px; letter-spacing: -0.8px; }
.admin-news-table th:nth-child(3),
.admin-news-table td:nth-child(3) { display: none; } /* Hide "Published" column on phones */
.admin-news { padding: 24px 0; }
}